Merge pull request #245 from thematters/develop

Release: v0.1.17

.github/workflows/build_and_publish.yml → .github/workflows/publish.yml

@@ -1,13 +1,10 @@
-name: Build & Publish
+name: Publish
 
 on:
   push:
     branches:
       - master
       - develop
-  pull_request:
-    branches:
-      - '*'
 
 env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - '*'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@master
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2.1.1
+        with:
+          node-version: '12.16'
+          registry-url: 'https://registry.npmjs.org'
+          always-auth: true
+
+      - name: Cache Dependencies
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Test
+        run: npm run lint
+
+      - name: Build
+        run: npm run build

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "The editor component.",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

readme.md

@@ -1,6 +1,6 @@
 # Matters Editor
 
-![Deploy Status](https://github.com/thematters/matters-editor/workflows/Build%20&%20Publish/badge.svg) ![Release Status](https://github.com/thematters/matters-editor/workflows/Create%20Release/badge.svg) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+![Publish Status](https://github.com/thematters/matters-editor/workflows/Publish/badge.svg) ![Test Status](https://github.com/thematters/matters-editor/workflows/Test/badge.svg) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
 This rich text editor is based on three amazing projects [Quill](https://quilljs.com/), [react-quill](https://github.com/zenoamaro/react-quill) and [Tippy.js](https://atomiks.github.io/tippyjs/). This editor has been used in a real production called [Matters](http://matters.news), a writing platform built on top of IPFS. Currently, we're pulling it out as a standalone package, so there will be some big changes in the following. 😎
 

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,6 +30,7 @@ interface Props {
   theme: string
   texts?: Texts
   titleDefaultValue?: string
+  titleReadOnly?: boolean
   uploadAudioSizeLimit?: number
   uploadImageSizeLimit?: number
   scrollingContainer?: string | HTMLElement
@@ -60,6 +63,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)
   }
 
@@ -191,7 +195,7 @@ export class MattersArticleEditor extends React.Component<Props, State> {
   render() {
     const classes = this.props.readOnly ? 'u-area-disable' : ''
 
-    const modulesConfig = {
+    let modulesConfig = {
       ...MODULE_CONFIG,
       imageDrop: {
         eventDispatcher: this.eventDispatcher,
@@ -207,11 +211,16 @@ export class MattersArticleEditor extends React.Component<Props, State> {
       },
     }
 
+    if (this.props.enableReviseMode) {
+      modulesConfig.toolbar = null
+      modulesConfig.imageDrop = null
+    }
+
     return (
       <>
         <MattersEditorTitle
           defaultValue={this.props.titleDefaultValue}
-          readOnly={this.props.readOnly}
+          readOnly={this.props.titleReadOnly}
           texts={this.texts}
           update={this.props.editorUpdate}
         />
@@ -230,6 +239,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,11 @@
 import { Quill } from 'react-quill'
 
-const BlockEmbed = Quill.import('blots/block/embed')
+import BaseBlockEmbed from './BaseBlockEmbed'
 
-class DividerBlot extends BlockEmbed {}
-
-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