Skip to content

Commit

Permalink
Fix editor regeneration and focus handling. Fix zenoamaro#593
Browse files Browse the repository at this point in the history
  • Loading branch information
zenoamaro committed Apr 15, 2020
1 parent f38b144 commit aa97597
Showing 1 changed file with 17 additions and 20 deletions.
37 changes: 17 additions & 20 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,12 +209,9 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
shouldComponentUpdate(nextProps: ReactQuillProps, nextState: ReactQuillState) {
this.validateProps(nextProps);

// If no editor has been instantiated, the component should update
if (!this.editor) return true;
const editor = this.editor!;

// If the component has been regenerated, we already know we should update.
if (this.state.generation !== nextState.generation) {
// If the editor hasn't been instantiated yet, or the component has been
// regenerated, we already know we should update.
if (!this.editor || this.state.generation !== nextState.generation) {
return true;
}

Expand All @@ -230,13 +227,13 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
// NOTE: Comparing an HTML string and a Quill Delta will always trigger a
// change, regardless of whether they represent the same document.
if (!this.isEqualValue(nextContents, prevContents)) {
this.setEditorContents(editor, nextContents);
this.setEditorContents(this.editor, nextContents);
}
}

// Handle read-only changes in-place
if (nextProps.readOnly !== this.props.readOnly) {
this.setEditorReadOnly(editor, nextProps.readOnly!);
this.setEditorReadOnly(this.editor, nextProps.readOnly!);
}

// Clean and Dirty props require a render
Expand All @@ -262,16 +259,13 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
}

componentDidUpdate(prevProps: ReactQuillProps, prevState: ReactQuillState) {
if (!this.editor) return;
const editor = this.editor;

// If we're changing one of the `dirtyProps`, the entire Quill Editor needs
// to be re-instantiated. Regenerating the editor will cause the whole tree,
// including the container, to be cleaned up and re-rendered from scratch.
// Store the contents so they can be restored later.
if (this.shouldComponentRegenerate(prevProps)) {
const delta = editor.getContents();
const selection = editor.getSelection();
const delta = this.editor!.getContents();
const selection = this.editor!.getSelection();
this.regenerationSnapshot = {delta, selection};
this.setState({generation: this.state.generation + 1});
this.destroyEditor();
Expand All @@ -283,9 +277,8 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
const {delta, selection} = this.regenerationSnapshot!;
delete this.regenerationSnapshot;
this.instantiateEditor();
editor.setContents(delta);
// NOTE: The editor will also set focus iff selection is non-null.
if (selection) editor.setSelection(selection);
this.editor!.setContents(delta);
postpone(() => this.editor!.setSelection(selection!));
}
}

Expand Down Expand Up @@ -390,16 +383,13 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
*/
setEditorContents(editor: Quill, value: Value) {
this.value = value;
const restoreFocus = editor.hasFocus();
const sel = this.getEditorSelection();
if (typeof value === 'string') {
editor.setContents(editor.clipboard.convert(value));
} else {
editor.setContents(value);
}
if (restoreFocus) {
Promise.resolve().then(() => this.setEditorSelection(editor, sel));
}
postpone(() => this.setEditorSelection(editor, sel));
}

setEditorSelection(editor: Quill, range: Range) {
Expand Down Expand Up @@ -580,6 +570,13 @@ class ReactQuill extends React.Component<ReactQuillProps, ReactQuillState> {
}
}

/*
Small helper to execute a function in the next micro-tick.
*/
function postpone(fn: (value: void) => void) {
Promise.resolve().then(fn);
}

// Compatibility Export to avoid `require(...).default` on CommonJS.
// See: https://github.com/Microsoft/TypeScript/issues/2719
export = ReactQuill;

0 comments on commit aa97597

Please sign in to comment.