[pre-release] 0.1.27-alpha.1

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",
@@ -44,7 +44,7 @@
     "@tippyjs/react": "^4.0.4",
     "@types/classnames": "^2.2.10",
     "@types/lodash": "^4.14.191",
-    "@types/quill": "^2.0.3",
+    "@types/quill": "^2.0.10",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/uuid": "^9.0.0",

src/article.tsx

@@ -1,7 +1,7 @@
 import _debounce from 'lodash/debounce'
-import Quill from 'quill'
 import React from 'react'
 import ReactQuill from 'react-quill'
+import Quill from 'quill'
 
 import Util from './blots/Util'
 import MattersEditorMention from './components/Mention'
@@ -92,11 +92,12 @@ export class MattersArticleEditor extends React.Component<Props, State> {
     initAudioPlayers()
 
     // set init text
-    this.initText = this.instance.getText() || ''
+    this.initText = this.instance?.getText() || ''
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     this.instance = this.initQuillInstance()
+
     this.resetLinkInputPlaceholder()
     initAudioPlayers()
 
@@ -233,8 +234,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
         texts: this.texts,
       },
       mention: {
-        mentionContainer:
-          this.mentionReference && this.mentionReference.current,
+        mentionContainer: this.mentionReference?.current,
         handleMentionChange: this.handleMentionChange,
         storeMentionInstance: this.storeMentionInstance,
       },
@@ -261,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}
@@ -293,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>
       </>

src/blots/AudioFigure.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/BaseBlockEmbed.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Parchment = Quill.import('parchment')
 const BlockEmbed = Quill.import('blots/block/embed')

src/blots/Divider.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/EmbedClipboard.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import { COLOR, KEYCODES, URL_LIKE_BUTTON } from '../enums/common'
 import { TEXT } from '../enums/text'

src/blots/EmbedCode.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/EmbedVideo.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/Figcaption.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/ImageFigure.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 import BaseBlockEmbed from './BaseBlockEmbed'
 

src/blots/Mention.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Embed = Quill.import('blots/embed')
 

src/blots/SmartBreak.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Embed = Quill.import('blots/embed')
 

src/blots/Source.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const BlockEmbed = Quill.import('blots/block/embed')
 

src/blots/Tag.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Embed = Quill.import('blots/embed')
 

src/blots/Util.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Embed = Quill.import('blots/embed')
 

src/comment.tsx

@@ -1,6 +1,6 @@
 import _debounce from 'lodash/debounce'
-import Quill from 'quill'
 import React from 'react'
+import Quill from 'quill'
 import ReactQuill from 'react-quill'
 
 import MattersEditorMention from './components/Mention'
@@ -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>
       </>

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

src/components/Toolbar/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import Quill from 'quill'
 import React from 'react'
+import Quill from 'quill'
 
 import { Texts } from '../../enums/text'
 import SVGToolbarAdd from '../../icons/ToolbarAdd'

src/matchers/createImage.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 //import IMAGE_PLACEHOLDER from '~/static/images/image-placeholder.svg'
 

src/matchers/lineBreaker.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 const Delta = Quill.import('delta')
 

src/modules/clipboard.ts

@@ -1,4 +1,4 @@
-import { Quill } from 'react-quill'
+import Quill from 'quill'
 
 // import { docsSoap } from 'docs-soap'
 import { soap } from '../utils/soap'
@@ -61,9 +61,10 @@ class RemadeClipboard extends Clipboard {
       delta.insert(text, {
         [CodeBlock.blotName]: formats[CodeBlock.blotName],
       })
-    } else if (!clipboardData.types.includes("text/html") || !htmlRaw) {
+    } else if (!clipboardData.types.includes('text/html') || !htmlRaw) {
       delta.insert(text)
-    } else { // text/html
+    } else {
+      // text/html
       // add image matcher only when pasting html
       this.addMatcher('IMG', createImageMatcher(this.upload))