fix: force update state to trigger <ReactQuill> re-rendering

thematters · Dec 30, 2022 · e7d44c7 · e7d44c7
1 parent e6e1baa
commit e7d44c7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.1.27-alpha.0",
+  "version": "0.1.27-alpha.1",
   "description": "The editor component.",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

diff --git a/src/article.tsx b/src/article.tsx
@@ -97,6 +97,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     this.instance = this.initQuillInstance()
+
     this.resetLinkInputPlaceholder()
     initAudioPlayers()
 
@@ -260,19 +261,21 @@ export class MattersArticleEditor extends React.Component<Props, State> {
           update={this.props.editorUpdate}
         />
         <div id="editor-article-container" className={classes}>
-          <ReactQuill
-            formats={FORMAT_CONFIG}
-            modules={modulesConfig}
-            placeholder={this.texts.EDITOR_PLACEHOLDER}
-            readOnly={this.props.readOnly}
-            ref={this.editorReference}
-            theme={this.props.theme}
-            value={this.state.content}
-            onBlur={this.handleBlur}
-            onChange={this.handleChange}
-            onChangeSelection={this.handleChangeSelection}
-            scrollingContainer={this.props.scrollingContainer}
-          />
+          {this.mentionReference.current && (
+            <ReactQuill
+              formats={FORMAT_CONFIG}
+              modules={modulesConfig}
+              placeholder={this.texts.EDITOR_PLACEHOLDER}
+              readOnly={this.props.readOnly}
+              ref={this.editorReference}
+              theme={this.props.theme}
+              value={this.state.content}
+              onBlur={this.handleBlur}
+              onChange={this.handleChange}
+              onChangeSelection={this.handleChangeSelection}
+              scrollingContainer={this.props.scrollingContainer}
+            />
+          )}
           <MattersEditorToolbar
             enable={this.props.enableToolbar}
             eventDispatcher={this.eventDispatcher}
@@ -292,6 +295,8 @@ export class MattersArticleEditor extends React.Component<Props, State> {
             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>
       </>

diff --git a/src/components/Mention/index.tsx b/src/components/Mention/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-import SVGSpinner from '../../icons/Spinner'
+import React, { useEffect } from 'react'
 
 /**
  * This component is a mention list container which will be visible when typing `@`.
@@ -20,6 +18,7 @@ interface Props {
   mentionSelection: any
   mentionUsers: any[]
   reference: React.RefObject<HTMLElement>
+  onMount: () => any
 }
 
 export default ({
@@ -28,9 +27,14 @@ export default ({
   mentionSelection,
   mentionUsers,
   reference,
+  onMount,
 }: Props) => {
   const hasMention = mentionUsers.length <= 0 && !mentionLoading
 
+  useEffect(() => {
+    onMount()
+  }, [])
+
   return (
     <section className="mention-container" ref={reference}>
       {hasMention

diff --git a/src/utils/soap.ts b/src/utils/soap.ts
@@ -5,21 +5,22 @@ const docsId = /id="docs\-internal\-guid/
 
 // for copying from GoogleDoc
 export function soap(html: string) {
-
   if (!html.match(docsId)) return html
 
   const doc = parseHTML(html)
 
   // GoogleDoc seems always wrap the clipboard under a `<b>` tag with "font-weight:normal;"
   // <b style="font-weight:normal;" id="docs-internal-guid-2db0d950-7fff-7f11-db86-642209503788">...</b>
-  if (doc?.children?.length > 0
-    && doc.children[0] instanceof Node
-    && doc.children[0].nodeType === Node.ELEMENT_NODE
+  if (
+    doc?.children?.length > 0 &&
+    doc.children[0] instanceof Node &&
+    doc.children[0].nodeType === Node.ELEMENT_NODE
   ) {
     const node = doc.children[0] as HTMLElement
-    if (node.tagName === 'B'
-      && node.style?.fontWeight === 'normal'
-      && node.id?.match(/^docs-internal-guid-/)
+    if (
+      node.tagName === 'B' &&
+      node.style?.fontWeight === 'normal' &&
+      node.id?.match(/^docs-internal-guid-/)
     ) {
       const body = document.createElement('body')
       body.append(...node.children)