feat(blot): add a new blot and change props for editor revise mode

demo/index.tsx

@@ -83,6 +83,8 @@ const App = () => {
         editorContentId=""
         editorUpdate={editorUpdate}
         editorUpload={editorUpload}
+        enableReviseMode={false}
+        enableToolbar={true}
         eventName={eventName}
         language="EN"
         mentionLoading={false}
@@ -92,6 +94,7 @@ const App = () => {
         readOnly={false}
         theme="bubble"
         titleDefaultValue=""
+        titleReadOnly={false}
       />
       <br />
       <MattersCommentEditor

src/article.tsx

@@ -18,6 +18,8 @@ interface Props {
   editorContentId: string
   editorUpdate: (params: Params) => void
   editorUpload: (params: Params) => Promise<ResultData>
+  enableReviseMode?: boolean
+  enableToolbar?: boolean
   eventName: string
   language: string
   mentionLoading: boolean
@@ -28,9 +30,11 @@ interface Props {
   theme: string
   texts?: Texts
   titleDefaultValue?: string
+  titleReadOnly?: boolean
   uploadAudioSizeLimit?: number
   uploadImageSizeLimit?: number
   scrollingContainer?: string | HTMLElement
+  disableToolbar?: boolean
 }
 
 interface State {
@@ -60,6 +64,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
     Util.eventDispatcher = this.eventDispatcher
     Util.eventName = props.eventName
     Util.language = props.language || LANGUAGE.ZH_HANT
+    Util.reviseMode = props.enableReviseMode
     Quill.register('formats/util', Util, true)
   }
 
@@ -211,7 +216,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
       <>
         <MattersEditorTitle
           defaultValue={this.props.titleDefaultValue}
-          readOnly={this.props.readOnly}
+          readOnly={this.props.titleReadOnly}
           texts={this.texts}
           update={this.props.editorUpdate}
         />
@@ -230,6 +235,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
             scrollingContainer={this.props.scrollingContainer}
           />
           <MattersEditorToolbar
+            enable={this.props.enableToolbar}
             eventDispatcher={this.eventDispatcher}
             eventName={this.props.eventName}
             instance={this.instance}

src/blots/AudioFigure.ts

@@ -1,15 +1,20 @@
 import { Quill } from 'react-quill'
 
+import BaseBlockEmbed from './BaseBlockEmbed'
+
 const Parchment = Quill.import('parchment')
-const BlockEmbed = Quill.import('blots/block/embed')
 
 interface AudioFigureParams {
   caption?: string
   fileName?: string
   sources: Array<{ src: string; type: string; assetId: string }>
 }
 
-class AudioFigure extends BlockEmbed {
+class AudioFigure extends BaseBlockEmbed {
+  static blotName = 'audioFigure'
+  static className = 'audio'
+  static tagName = 'figure'
+
   public static create(value: AudioFigureParams) {
     const node = super.create(value)
 
@@ -54,6 +59,12 @@ class AudioFigure extends BlockEmbed {
       </footer>
     `
 
+    const util = Parchment.query('util')
+    if (util && util.reviseMode === true) {
+      node.setAttribute('contenteditable', false)
+      node.classList.add('u-area-disable')
+    }
+
     node.appendChild(audio)
     node.appendChild(player)
     node.appendChild(figcaption)
@@ -116,10 +127,6 @@ class AudioFigure extends BlockEmbed {
   }
 }
 
-AudioFigure.blotName = 'audioFigure'
-AudioFigure.className = 'audio'
-AudioFigure.tagName = 'figure'
-
 Quill.register('formats/audioFigure', AudioFigure)
 
 export default AudioFigure

src/blots/BaseBlockEmbed.ts

@@ -0,0 +1,23 @@
+import { Quill } from 'react-quill'
+
+const Parchment = Quill.import('parchment')
+const BlockEmbed = Quill.import('blots/block/embed')
+
+class BaseBlockEmbed extends BlockEmbed {
+  static reviseMode: boolean
+
+  constructor(domNode: HTMLElement) {
+    super(domNode)
+    const util = Parchment.query('util')
+    this.reviseMode = util && util.reviseMode === true
+  }
+
+  deleteAt(index: number, length: number) {
+    if (this.reviseMode === true) {
+      return
+    }
+    return super.deleteAt(index, length)
+  }
+}
+
+export default BaseBlockEmbed

src/blots/Divider.ts

@@ -1,11 +1,13 @@
 import { Quill } from 'react-quill'
 
-const BlockEmbed = Quill.import('blots/block/embed')
+import BaseBlockEmbed from './BaseBlockEmbed'
 
-class DividerBlot extends BlockEmbed {}
+const Parchment = Quill.import('parchment')
 
-DividerBlot.blotName = 'divider'
-DividerBlot.tagName = 'HR'
+class DividerBlot extends BaseBlockEmbed {
+  static blotName = 'divider'
+  static tagName = 'HR'
+}
 
 Quill.register('formats/divider', DividerBlot)
 

src/blots/EmbedCode.ts

@@ -1,21 +1,26 @@
 import { Quill } from 'react-quill'
 
+import BaseBlockEmbed from './BaseBlockEmbed'
+
 import {
   SANDBOX_DEFAULT_SETTINGS,
   SANDBOX_SPECIAL_SETTINGS,
 } from '../enums/common'
 
-const BlockEmbed = Quill.import('blots/block/embed')
 const Parchment = Quill.import('parchment')
 
 interface EmbedCodeParams {
   caption?: string
   url: string
 }
 
-class EmbedCode extends BlockEmbed {
+class EmbedCode extends BaseBlockEmbed {
+  static blotName = 'embedCode'
+  static className = 'embed-code'
+  static tagName = 'figure'
+
   static create(value: EmbedCodeParams) {
-    const node = super.create() as HTMLElement
+    const node = super.create()
 
     // caption
     const figcaption = Parchment.create('figcaption', {
@@ -39,6 +44,12 @@ class EmbedCode extends BlockEmbed {
     iframeContainer.setAttribute('class', 'iframe-container')
     iframeContainer.appendChild(iframe)
 
+    const util = Parchment.query('util')
+    if (util && util.reviseMode === true) {
+      node.setAttribute('contenteditable', false)
+      node.classList.add('u-area-disable')
+    }
+
     node.appendChild(iframeContainer)
     node.appendChild(figcaption)
 
@@ -68,10 +79,6 @@ class EmbedCode extends BlockEmbed {
   }
 }
 
-EmbedCode.blotName = 'embedCode'
-EmbedCode.className = 'embed-code'
-EmbedCode.tagName = 'figure'
-
 Quill.register('formats/embedCode', EmbedCode)
 
 export default EmbedCode

src/blots/EmbedVideo.ts

@@ -1,16 +1,21 @@
 import { Quill } from 'react-quill'
 
+import BaseBlockEmbed from './BaseBlockEmbed'
+
 import { SANDBOX_DEFAULT_SETTINGS } from '../enums/common'
 
-const BlockEmbed = Quill.import('blots/block/embed')
 const Parchment = Quill.import('parchment')
 
 interface EmbedVideoParams {
   caption?: string
   url: string
 }
 
-class EmbedVideo extends BlockEmbed {
+class EmbedVideo extends BaseBlockEmbed {
+  static blotName = 'embedVideo'
+  static className = 'embed-video'
+  static tagName = 'figure'
+
   static create(value: EmbedVideoParams) {
     const node = super.create()
 
@@ -30,6 +35,12 @@ class EmbedVideo extends BlockEmbed {
     iframeContainer.setAttribute('class', 'iframe-container')
     iframeContainer.appendChild(iframe)
 
+    const util = Parchment.query('util')
+    if (util && util.reviseMode === true) {
+      node.setAttribute('contenteditable', false)
+      node.classList.add('u-area-disable')
+    }
+
     node.appendChild(iframeContainer)
     node.appendChild(figcaption)
 
@@ -47,10 +58,6 @@ class EmbedVideo extends BlockEmbed {
   }
 }
 
-EmbedVideo.blotName = 'embedVideo'
-EmbedVideo.className = 'embed-video'
-EmbedVideo.tagName = 'figure'
-
 Quill.register('formats/embedVideo', EmbedVideo)
 
 export default EmbedVideo

src/blots/Figcaption.ts

@@ -1,16 +1,19 @@
 import { Quill } from 'react-quill'
 
+import BaseBlockEmbed from './BaseBlockEmbed'
+
 import { TEXT } from '../enums/text'
 import { getLangFromRoot } from '../utils/dom'
 import { langConvert } from '../utils/language'
 
-const BlockEmbed = Quill.import('blots/block/embed')
-
 interface FigcaptionParams {
   caption: string
 }
 
-class Figcaption extends BlockEmbed {
+class Figcaption extends BaseBlockEmbed {
+  static blotName = 'figcaption'
+  static tagName = 'figcaption'
+
   static create(value: FigcaptionParams) {
     const node = super.create(value)
 
@@ -62,9 +65,6 @@ class Figcaption extends BlockEmbed {
   }
 }
 
-Figcaption.blotName = 'figcaption'
-Figcaption.tagName = 'figcaption'
-
 Quill.register('formats/figcaption', Figcaption)
 
 export default Figcaption

src/blots/ImageFigure.ts

@@ -1,7 +1,8 @@
 import { Quill } from 'react-quill'
 
+import BaseBlockEmbed from './BaseBlockEmbed'
+
 const Parchment = Quill.import('parchment')
-const BlockEmbed = Quill.import('blots/block/embed')
 
 /**
  * @see ref: https://github.com/quilljs/quill/blob/develop/formats/image.js
@@ -14,7 +15,11 @@ interface ImageFigureParams {
   src?: string
 }
 
-class ImageFigure extends BlockEmbed {
+class ImageFigure extends BaseBlockEmbed {
+  static blotName = 'imageFigure'
+  static className = 'image'
+  static tagName = 'figure'
+
   public static create(value: ImageFigureParams) {
     const node = super.create(value)
 
@@ -35,6 +40,12 @@ class ImageFigure extends BlockEmbed {
       image.dataset.assetId = value.assetId
     }
 
+    const util = Parchment.query('util')
+    if (util && util.reviseMode === true) {
+      node.setAttribute('contenteditable', false)
+      node.classList.add('u-area-disable')
+    }
+
     node.appendChild(image)
     node.appendChild(figcaption)
 
@@ -53,10 +64,6 @@ class ImageFigure extends BlockEmbed {
   }
 }
 
-ImageFigure.blotName = 'imageFigure'
-ImageFigure.className = 'image'
-ImageFigure.tagName = 'figure'
-
 Quill.register('formats/imageFigure', ImageFigure)
 
 export default ImageFigure

src/blots/index.ts

@@ -1,4 +1,5 @@
 import './AudioFigure'
+import './BaseBlockEmbed'
 import './Divider'
 import './EmbedClipboard'
 import './EmbedCode'

src/components/Toolbar/index.tsx

@@ -18,6 +18,7 @@ import ToolbarUploadImageButton from './ToolbarUploadImageButton'
  *
  * Usage:
  *   <MattersEditorToolbar
+ *     enable={true}
  *     eventDispatcher={() => {}}
  *     eventName="event-name"
  *     postion={0}
@@ -31,6 +32,7 @@ import ToolbarUploadImageButton from './ToolbarUploadImageButton'
  */
 
 interface Props {
+  enable?: boolean
   eventDispatcher: (event: string, data: any) => void
   eventName: string
   instance: Quill | null
@@ -44,6 +46,7 @@ interface Props {
 }
 
 const MattersEditorToolbar: React.FC<Props> = ({
+  enable = true,
   eventDispatcher,
   eventName,
   instance,
@@ -129,6 +132,10 @@ const MattersEditorToolbar: React.FC<Props> = ({
     setExpanded(false)
   }
 
+  if (enable === false) {
+    return null
+  }
+
   return (
     <aside className={containerClasses} style={style}>
       <button