React-quill: Calling insertembed on quill instance

[stinoga]

What is the best way to tap into the insertembed with React Quill? I tried a simple call to the component, but no dice:

import ReactQuill, {Quill} from 'react-quill';

Quill.insertEmbed(10, 'image', 'http://quilljs.com/images/cloud.png');

http://quilljs.com/docs/api/#insertembed

[alexkrolick]

You need a ref to the specific quill instance, which you can get with the getEditor API: https://github.com/zenoamaro/react-quill#methods

[stinoga]

@alexkrolick Thanks! I'm trying to insert a text value into the editor that removes completely when you hit the delete key after it, like an embed. Below is my code. It's working great, but the textContent seems to update twice. First it sets the text correctly as 'variable name', then next it just sets the value to true.

Any idea why? Also, is this the best way to handle what I'm trying to do?

import React, { Component } from 'react';
import {connect} from 'react-redux';
import ReactQuill, {Quill} from 'react-quill';
import Store from '../core/store';

let Embed = Quill.import('blots/block/embed');

class Variable extends Embed {
  static create(value) {
    let node = super.create();
    node.textContent = value;
    return node;
  }
}
Variable.blotName = 'variable';
Variable.tagName = 'span';
Variable.className = 'variable';

Quill.register(Variable);

class EditableInput extends Component {
  constructor(props) {
    super(props);
    this.formats = ['align', 'bold', 'italic', 'underline', 'variable'];
    this.modules = {
      toolbar: [
        ['bold', 'italic', 'underline']
      ],
    };
  }

  test = () => {
    this.reactQuillRef.getEditor().insertEmbed(0, 'variable', 'variable name');
  };

  render() {
    const {
      text
    } = this.props;

    return (
      <div>
        <ReactQuill
          ref={(el) => { this.reactQuillRef = el }}
          value={text}
          formats={this.formats}
          modules={this.modules}
        />
        <button onClick={this.test}>Add variable name text</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    text: state.viewState.text,
    variable: state.viewState.variable
  };
}

export default connect(mapStateToProps)(EditableInput);

[alexkrolick]

It works if you change from value to defaultValue: https://codepen.io/alexkrolick/pen/rmjzBN?editors=0010

This is something to do with the controlled component rerendering with textContent - potentially a bug.