To repair the open image dialog is very slow in Chrome

[raisezhang]

This issue mainly solve the quill in chrome52+ image dialog is very slow bugs!

In fact this problem the quill trunk has been repair the question. slab/quill#1265, slab/quill#1260
But the quill is not yet released the latest code to the NPM and the react-quill isn't reference to the latest code.

So to solve this problem, need to temporary hack, the code is as follows:

/*
 *  [email protected]
 */

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ''
        }
        this.qlToolBar = null;
    }

    changeInputAttribute(e) {
        if (e.target.className.indexOf('ql-image') >= 0) {
            e.target.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon, image/x-quicktime');
        }
    }

    componentDidMount() {
        this.qlToolBar = this.refs.quillEditor.getEditor().container.parentNode.querySelector('.ql-toolbar');
        this.qlToolBar.addEventListener('DOMNodeInserted', this.changeInputAttribute, false);
    }

    componentWillUnmount() {
        if (this.qlToolBar) {
            this.qlToolBar.removeEventListener('DOMNodeInserted', this.changeInputAttribute, false);
            this.qlToolBar = null;
        }
    }

    handleChange(value) {
        this.setState({text: value})
    }

    render() {
        return (<ReactQuill ref="quillEditor" value={this.state.text} onChange={this.handleChange}/>)
    }
}

reference： https://github.com/YouHan26/quill/blob/494d87b7388ca9d6e65ee396980f0554b7edb40f/themes/base.js#L128

[alexkrolick]

Thanks for documenting the workaround.

1.0.0-rc.2 has quill^1.2.0 as a dependency, which looks like it has the fix from slab/quill#1090: https://github.com/quilljs/quill/blob/v1.2.0/themes/base.js#L127

[raisezhang]

image/svg+xml also need to be deleted.
https://github.com/quilljs/quill/releases

[alexkrolick]

I don't see a significant different in open time for the image dialog between the handler w/out SVG and the default.

I'm on Chrome 57.

cc @jhchen, slab/quill#1265

[jhchen]

I have the same concern which is that I also do not experience and noticeable slowdown or speedup with the svg removal whereas the issue reports a 6-10s slowdown. I was able to reproduce the original issue slab/quill#1090 in addition to the issue being well documented on StackOverflow and Chrome bug reports and promptly accepted the PR.

[raisezhang]

Thanks @jhchen @alexkrolick

[jhchen]

@raisezhang How long does it take you to open the default and non-SVG file dialogs that @alexkrolick posted?

[raisezhang]

default： about 8 seconds
http://recordit.co/YS1oLDicqP

non-SVG： about 1 seconds
http://recordit.co/ix4a3blEjF

macOS Sierra 10.12.2
Chrome 57.0.2987.133 (64-bit)

[alexkrolick]

Ok thanks for the demo - this is Chrome 57 on Windows I'm assuming?

[alexkrolick]

This actually a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=638874

@jhchen what's your policy on working around platform bugs?

[alexkrolick]

@raisezhang if anyone feels the need to mitigate the issue before Chrome fixes it they should be able to follow your patch.

[jhchen]

I don't think the linked Chrome bug is describing this issue. There was previously an Issue with the same side effect slab/quill#1090 but this Issue has to do with svgs specifically.

[alexkrolick]

The SVG-specific bug is tracking here, although not much progress has been made: https://bugs.chromium.org/p/chromium/issues/detail?id=678507

[jhchen]

Okay thanks for the link. In any case it Quill's policy is to not rely on browsers to fix anything if possible and to work around or fix in another layer. In some ways the existence of Quill owes to the fact that browsers have not fixed the many issues surrounding contenteditable.