feat: import Quill from quill instead of react-quill

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',
         }}
-      />
+      /> */}
     </>
   )
 }

package.json

@@ -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,7 +92,7 @@ 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) {
@@ -233,8 +233,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,
       },

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'

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))