fix: force update state to re-render <ReactQuill>

thematters · Dec 30, 2022 · 21a1e3d · 21a1e3d
1 parent e7d44c7
commit 21a1e3d
Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -97,7 +97,7 @@ const App = () => {
         titleDefaultValue=""
         titleReadOnly={false}
       />
-      {/*
+
       <br />
 
       <MattersCommentEditor
@@ -114,7 +114,7 @@ const App = () => {
         texts={{
           COMMENT_PLACEHOLDER: 'custom placeholder\nand line break',
         }}
-      /> */}
+      />
     </>
   )
 }

diff --git a/src/article.tsx b/src/article.tsx
@@ -234,7 +234,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
         texts: this.texts,
       },
       mention: {
-        mentionContainer: this.mentionReference.current,
+        mentionContainer: this.mentionReference?.current,
         handleMentionChange: this.handleMentionChange,
         storeMentionInstance: this.storeMentionInstance,
       },
@@ -261,7 +261,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
           update={this.props.editorUpdate}
         />
         <div id="editor-article-container" className={classes}>
-          {this.mentionReference.current && (
+          {this.mentionReference?.current && (
             <ReactQuill
               formats={FORMAT_CONFIG}
               modules={modulesConfig}

diff --git a/src/comment.tsx b/src/comment.tsx
@@ -113,8 +113,7 @@ export class MattersCommentEditor extends React.Component<Props, State> {
     const modulesConfig = {
       ...MODULE_CONFIG,
       mention: {
-        mentionContainer:
-          this.mentionReference && this.mentionReference.current,
+        mentionContainer: this.mentionReference?.current,
         handleMentionChange: this.handleMentionChange,
         storeMentionInstance: this.storeMentionInstance,
       },
@@ -123,25 +122,29 @@ export class MattersCommentEditor extends React.Component<Props, State> {
     return (
       <>
         <div id="editor-comment-container">
-          <ReactQuill
-            formats={FORMAT_CONFIG}
-            modules={modulesConfig}
-            placeholder={this.texts.COMMENT_PLACEHOLDER}
-            readOnly={this.props.readOnly}
-            ref={this.editorReference}
-            theme={this.props.theme}
-            value={this.state.content}
-            onChange={this.handleChange}
-            bounds="#editor-comment-container"
-            scrollingContainer={this.props.scrollingContainer}
-          />
+          {this.mentionReference?.current && (
+            <ReactQuill
+              formats={FORMAT_CONFIG}
+              modules={modulesConfig}
+              placeholder={this.texts.COMMENT_PLACEHOLDER}
+              readOnly={this.props.readOnly}
+              ref={this.editorReference}
+              theme={this.props.theme}
+              value={this.state.content}
+              onChange={this.handleChange}
+              bounds="#editor-comment-container"
+              scrollingContainer={this.props.scrollingContainer}
+            />
+          )}
 
           <MattersEditorMention
             mentionLoading={this.props.mentionLoading}
             mentionListComponent={this.props.mentionListComponent}
             mentionSelection={this.handleMentionSelection}
             mentionUsers={this.props.mentionUsers}
             reference={this.mentionReference}
+            // FIXME: force update state to re-render <ReactQuill>
+            onMount={() => this.setState({ content: this.state.content })}
           />
         </div>
       </>