Release: v0.1.19

demo/index.tsx

@@ -86,7 +86,7 @@ const App = () => {
         enableReviseMode={false}
         enableToolbar={true}
         eventName={eventName}
-        language="EN"
+        language="zh_hant"
         mentionLoading={false}
         mentionKeywordChange={mentionKeywordChange}
         mentionUsers={demoMentionUsers}
@@ -101,13 +101,16 @@ const App = () => {
         editorContent={commentContent}
         editorUpdate={(params) => setCommentContent(params.content)}
         eventName={eventName}
-        language="EN"
+        language="en"
         mentionLoading={false}
         mentionKeywordChange={mentionKeywordChange}
         mentionUsers={demoMentionUsers}
         mentionListComponent={DemoMentionList}
         readOnly={false}
         theme="bubble"
+        texts={{
+          COMMENT_PLACEHOLDER: 'custom placeholder\nand line break',
+        }}
       />
     </>
   )

package.json

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

src/article.tsx

@@ -8,7 +8,7 @@ import MattersEditorTitle from './components/Title'
 import MattersEditorToolbar from './components/Toolbar'
 import { FORMAT_CONFIG, MODULE_CONFIG } from './configs/default'
 import { DEBOUNCE_DELAY, LANGUAGE, SELECTION_TYPES } from './enums/common'
-import { TEXT } from './enums/text'
+import { TEXT, Texts } from './enums/text'
 import createImageMatcher from './matchers/createImage'
 import { initAudioPlayers } from './utils/audioPlayer'
 import { defineSelection, getQuillInstance } from './utils/editor'
@@ -21,7 +21,7 @@ interface Props {
   enableReviseMode?: boolean
   enableToolbar?: boolean
   eventName: string
-  language: string
+  language: Language
   mentionLoading: boolean
   mentionKeywordChange: (keyword: string) => void
   mentionUsers: any
@@ -59,12 +59,16 @@ export class MattersArticleEditor extends React.Component<Props, State> {
       toolbarPosition: 0,
       toolbarVisible: false,
     }
-    this.texts = props.texts || TEXT[props.language] || TEXT[LANGUAGE.ZH_HANT]
+
+    this.texts = {
+      ...TEXT[props.language || LANGUAGE.zh_hant],
+      ...props.texts,
+    }
 
     // temporarily hacky solution
     Util.eventDispatcher = this.eventDispatcher
     Util.eventName = props.eventName
-    Util.language = props.language || LANGUAGE.ZH_HANT
+    Util.language = props.language || LANGUAGE.zh_hant
     Util.reviseMode = props.enableReviseMode
     Quill.register('formats/util', Util, true)
   }

src/blots/Figcaption.ts

@@ -5,6 +5,7 @@ import BaseBlockEmbed from './BaseBlockEmbed'
 import { TEXT } from '../enums/text'
 import { getLangFromRoot } from '../utils/dom'
 import { langConvert } from '../utils/language'
+import { LANGUAGE } from '../enums/common'
 
 interface FigcaptionParams {
   caption: string
@@ -17,8 +18,8 @@ class Figcaption extends BaseBlockEmbed {
   static create(value: FigcaptionParams) {
     const node = super.create(value)
 
-    const lang = (langConvert.html2sys(getLangFromRoot()) || '').toUpperCase()
-    const placeholder = (TEXT[lang] || TEXT['ZH_HANT']).CAPTION_PLACEHOLDER
+    const lang = langConvert.html2sys(getLangFromRoot()) || ''
+    const placeholder = TEXT[lang || LANGUAGE.zh_hant].CAPTION_PLACEHOLDER
 
     const textarea = document.createElement('textarea')
     textarea.value = value.caption || ''

src/comment.tsx

@@ -5,14 +5,14 @@ import ReactQuill, { Quill } from 'react-quill'
 import MattersEditorMention from './components/Mention'
 import { FORMAT_CONFIG, MODULE_CONFIG } from './configs/comment'
 import { DEBOUNCE_DELAY, LANGUAGE } from './enums/common'
-import { TEXT } from './enums/text'
+import { TEXT, Texts } from './enums/text'
 import { getQuillInstance } from './utils/editor'
 
 interface Props {
   editorContent: string
   editorUpdate: (params: Params) => void
   eventName: string
-  language: string
+  language: Language
   mentionLoading: boolean
   mentionKeywordChange: (keyword: string) => void
   mentionUsers: any
@@ -40,7 +40,11 @@ export class MattersCommentEditor extends React.Component<Props, State> {
       content: this.props.editorContent,
       mentionInstance: null,
     }
-    this.texts = props.texts || TEXT[props.language] || TEXT[LANGUAGE.ZH_HANT]
+
+    this.texts = {
+      ...TEXT[props.language || LANGUAGE.zh_hant],
+      ...props.texts,
+    }
   }
 
   componentDidMount() {

src/components/Title/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
+import { Texts } from '../../enums/text'
 
 /**
  * This is an optional component belonged to the edoitor.

src/components/Toolbar/ToolbarDividerButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Texts } from '../../enums/text'
 import SVGToolbarDivider from '../../icons/ToolbarDivider'
 
 /**

src/components/Toolbar/ToolbarEmbedCodeButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Texts } from '../../enums/text'
 import SVGToolbarEmbedCode from '../../icons/ToolbarEmbedCode'
 
 /**

src/components/Toolbar/ToolbarEmbedVideoButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Texts } from '../../enums/text'
 import SVGToolbarEmbedVideo from '../../icons/ToolbarEmbedVideo'
 
 /**

src/components/Toolbar/ToolbarUploadAudioButton.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../enums/common'
 import SVGSpinner from '../../icons/Spinner'
 import SVGToolbarUploadAudio from '../../icons/ToolbarUploadAudio'
+import { Texts } from '../../enums/text'
 
 /**
  * This component is an audio upload button which shoule only resides in toolbar. Now, it supports

src/components/Toolbar/ToolbarUploadImageButton.tsx

@@ -5,6 +5,7 @@ import {
   COLOR,
   UPLOAD_IMAGE_SIZE_LIMIT,
 } from '../../enums/common'
+import { Texts } from '../../enums/text'
 import SVGSpinner from '../../icons/Spinner'
 import SVGToolbarUploadImage from '../../icons/ToolbarUploadImage'
 

src/components/Toolbar/index.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames'
 import React from 'react'
 import { Quill } from 'react-quill'
 
+import { Texts } from '../../enums/text'
 import SVGToolbarAdd from '../../icons/ToolbarAdd'
-
 import { insertImageBlock, insertEmbedBlock } from '../../utils/editor'
 
 import ToolbarDividerButton from './ToolbarDividerButton'

src/definitions/editor.d.ts

@@ -4,12 +4,8 @@ type Language = 'zh_hant' | 'zh_hans' | 'en'
 
 type HTMLLanguage = 'zh-Hant' | 'zh-Hans' | 'en'
 
-type OGLanguage = 'zh_HK' | 'zh_TW' | 'zh_CN' | 'en'
-
 type Params = { [key: string]: any }
 
 type ResultData = { [key: string]: any }
 
 type SelectionRange = { index: number; length: number }
-
-type Texts = { [key: string]: any }

src/enums/common.ts

@@ -20,10 +20,10 @@ export const DEBOUNCE_DELAY: number = 300
 
 export const DEBOUNCE_DELAY_MENTION: number = 900
 
-export const LANGUAGE: { [key: string]: string } = {
-  EN: 'EN',
-  ZH_HANS: 'ZH_HANS',
-  ZH_HANT: 'ZH_HANT',
+export const LANGUAGE = {
+  en: 'en',
+  zh_hans: 'zh_hans',
+  zh_hant: 'zh_hant',
 }
 
 export const KEYCODES: { [key: string]: number } = {

src/enums/text.ts

@@ -1,5 +1,5 @@
 export const TEXT = {
-  EN: {
+  en: {
     CAPTION_PLACEHOLDER: 'Add your description',
     COMMENT_PLACEHOLDER: 'Enter comment ...',
     EDITOR_PLACEHOLDER: 'Enter content ...',
@@ -27,7 +27,7 @@ export const TEXT = {
     UPLOAD_IMAGE_SINGLE_LIMIT: 'Please upload one image at a time',
     UPLOAD_IMAGE_SUCCESSFUL: 'Image upload successfully',
   },
-  ZH_HANS: {
+  zh_hans: {
     CAPTION_PLACEHOLDER: '添加说明文字…',
     COMMENT_PLACEHOLDER: '发表你的评论…',
     EDITOR_PLACEHOLDER: '请输入正文…',
@@ -53,7 +53,7 @@ export const TEXT = {
     UPLOAD_IMAGE_SINGLE_LIMIT: '请一次上传一个文件',
     UPLOAD_IMAGE_SUCCESSFUL: '圖片上傳成功',
   },
-  ZH_HANT: {
+  zh_hant: {
     CAPTION_PLACEHOLDER: '添加說明文字…',
     COMMENT_PLACEHOLDER: '發表你的評論…',
     EDITOR_PLACEHOLDER: '請輸入正文…',
@@ -80,3 +80,7 @@ export const TEXT = {
     UPLOAD_IMAGE_SUCCESSFUL: '圖片上傳成功',
   },
 }
+
+export type TextKeys = keyof typeof TEXT.en
+
+export type Texts = { [key in TextKeys]?: string }

src/modules/imageDrop.ts

@@ -5,6 +5,7 @@ import {
   COLOR,
   UPLOAD_IMAGE_SIZE_LIMIT,
 } from '../enums/common'
+import { Texts } from '../enums/text'
 import { insertImageBlock } from '../utils/editor'
 
 /**

src/utils/language.ts

@@ -1,31 +1,9 @@
 export const langConvert = {
-  og2html: (lang: OGLanguage): HTMLLanguage => {
-    return ({
-      zh_HK: 'zh-Hant',
-      zh_TW: 'zh-Hant',
-      zh_CN: 'zh-Hans',
-      en: 'en',
-    }[lang] || 'zh-Hant') as HTMLLanguage
-  },
-  sys2html: (lang: Language): HTMLLanguage => {
-    return ({
-      zh_hans: 'zh-Hans',
-      zh_hant: 'zh-Hant',
-      en: 'en',
-    }[lang] || 'zh-Hant') as HTMLLanguage
-  },
   html2sys: (lang: HTMLLanguage): Language => {
     return ({
       'zh-Hans': 'zh_hans',
       'zh-Hant': 'zh_hant',
       en: 'en',
     }[lang] || 'zh_hant') as Language
   },
-  sys2Og: (lang: Language): OGLanguage => {
-    return ({
-      zh_hant: 'zh-HK',
-      zh_hans: 'zh-CN',
-      en: 'en',
-    }[lang] || 'zh_HK') as OGLanguage
-  },
 }