Re-rendering after props change adds another toolbar

[stevenwinslowwhite]

When pasting elements into quill editor, all formatting is lost if I provide ReactQuill with a formats prop. If I remove the formats={formats}, then a copy paste of formatted text inserts properly (still formatted).

Below is a snippet of code:

const formats = [
    "list",
    "link",
    "bullet",
    "italic",
    "bold",
    "color",
    "font",
    "size",
    "image",
    { name: "h1", tag: "H1", prepare: "heading", type: "line" },
    { name: "h2", tag: "H2", prepare: "heading", type: "line" },
    { name: "h3", tag: "H3", prepare: "heading", type: "line" },
    { name: "p",  tag: "P",  prepare: "formatBlock", type: "line" },
];

    render() {
        return (
            <ReactQuill
                onChange={(content) => this._onEditorChange(content)}
                className={'QuillEditor'}
                value={this.props.content}
                formats={formats}>

                <div key="editor"
                     ref="editor" ></div>

                <ReactQuill.Toolbar
                    key="toolbar"
                    ref="toolbar"
                    items={toolbarItems}
                />
            </ReactQuill>
        );
    }

Is this expected? What can I do to debug the issue?

Versions: react-quill: 0.4.1, Quill: 1.2.0

[alexkrolick]

Try the version from master, Quill 1.x is out of date.

[stevenwinslowwhite]

I'm a bit confused - you say that Quill 1.x is out of date, but I'm looking at https://www.npmjs.com/package/quill, and 1.2 is the latest version. If you're talking about react-quill, I see the latest version is 0.4.1, which is what I'm using.

Are you recommending not using the npm published version?

[alexkrolick]

Sorry, yes, the react-quill package on NPM is pre-1.0 and bundles a pre-1.0 version of Quill.

The Github version on master and the releases at https://github.com/alexkrolick/react-quill/releases use Quill 1.x and have a corresponding major version bump.

[stevenwinslowwhite]

I'm looking into feasibility of pointing to github instead of npm in our build system. In the meantime, is there a reason that a more recent version of master isn't being pushed to npm?

[alexkrolick]

In package.json, you can point to a release tag:

"react-quill": "alexkrolick/react-quill#v2.0.2",

"react-quill": "zenoamaro/react-quill",

Release discussion for 1.0 #120

Relevant PR: #134

[stevenwinslowwhite]

Any major gotcha's I should know about when upgrading to 2.0.1 from 0.4.1? I just did the package.json updates, and getting:

document is not defined

from line 2377 of quill.js:

var elem = document.createElement('div');

[alexkrolick]

Are you trying to render on a server or something? Quill depends on some document APIs; you can browse some of the issues for the react-quill wrapper and quill upstream that mention this.  Other than that, if you were using the README on master you probably have already configured it correctly. See release notes for breaking changes.

[stevenwinslowwhite]

Yes - we do server side rendering. I've disabled that so now it only renders client side, and getting tons of issues w/ the toolbar. I've updated the component to use a module for the toolbar, but it is completely horked. Whenever the textarea is updated, componentDidUpdate is being called, which calls componentDidMount, which calls var editor = this.createEditor( this.getEditorElement(), this.getEditorConfig());, which eventually in quill.js creates a new toolbar. Therefore, for every character I type, I get a new toolbar. Am I somehow out of sync w/ proper changes? I'm now running with 1.2.0 Quill and 2.0.1 react-quill.

[stevenwinslowwhite]

Hey Alex - any update here? Are you fairly certain that the latest commit is stable, and doesn't have issues w/ the toolbar?

[alexkrolick]

Looking at https://github.com/alexkrolick/react-quill/blob/v2.0.2/src/component.js I'm seeing

Are you using a configuration like this: https://github.com/alexkrolick/react-quill#toolbar? It seems like you must be sending one of the "dirty" props in a parent component that would trigger a rerender of the quill container.

[stevenwinslowwhite]

Wow - because I was inlining the module in the declaration, when component.js was doing equality for the dirty props, it was seeing this.props["modules"] as !== prevProps["modules"].

I think the last thing I'm looking at now is it doesn't appear that the newer code supports formats. Is format supposed to go through a module now? I don't see that on quill's docs, however I do see in component.js that setCustomFormats is commented out. New preferred way to set formats for > 1.0?

// this.setCustomFormats(editor); // deprecated in Quill v1.0

[stevenwinslowwhite]

Meh - this appears to be some css that isn't being applied properly. I'm all set now - thanks for the help, closing out bug.

[zenoamaro]

This is an actual issue that needs to be dealt with.

Re-rendering Quill is causing toolbars to multiply exponentially.

We're most definitely doing something wrong when re-instantiating Quill.

[alexkrolick]

I'm having difficulty reproducing this one.

In this example with the deprecated component ReactQuill.Toolbar as a child the Toolbar component actually seems to have no effect at all; it just renders the Quill defaults: http://codepen.io/alexkrolick/pen/WpogXy?editors=001

In this one with a custom toolbar ID provided to Quill via the modules prop, it works fine: http://codepen.io/alexkrolick/pen/gmroPj

[zenoamaro]

@alexkrolick, the issue is not specifically about toolbars, however the symptoms are the same.

Check this codepen here, and interact with the editor: http://codepen.io/anon/pen/KWqNbr

I am causing Quill to re-render each time by setting a bogus random class on ReactQuill – ideally nothing of the sort should happen.

[alexkrolick]

The basic problem is that Quill creates uncontrolled DOM elements that don't get cleaned up after a remount/rerender. I can stop the additional of the toolbar by deleting the previous toolbar from the DOM in the unmount handler, but it causes the editor to be unfocused on the next tick. Working on a fix for that.

[alexkrolick]

Will have to pay attention to this change in the unmount/mount ordering coming in React 16: facebook/react#9214 (comment)

[zenoamaro]

@alexkrolick, good catch. I guess this is a Quill bug actually? So I'd be fine with applying hacks here until it's fixed.

[alexkrolick]

• @zenoamaro I'm not sure it's really a Quill bug; it's more like the traditional DOM-manipulating paradigm is at odds with React's need to control all the nodes under its root element. Dropdown default values not working with custom JSX toolbar #175 is similar.

[alexkrolick]

Interestingly I can get a simple example working where React resets the DOM successfully after a props change:

http://codepen.io/alexkrolick/pen/yMEXPe

I wonder if the issue is the toolbar is being created outside of the DOM element created by React?

[alexkrolick]

I've updated the Codepen to isolate the problem: https://codepen.io/alexkrolick/pen/yMEXPe?editors=0010

The issue is very much the position of the toolbar in the DOM tree. It's essentially a sibling of the node created by the component, so it sits outside of the tree that React knows about and thus never gets cleaned up by the reconciliation algorithm.

https://facebook.github.io/react/docs/reconciliation.html