From 02d715be336918d6e502177206da67465c713fd6 Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Fri, 5 Feb 2021 21:02:29 +0800 Subject: [PATCH] feat(text): merge `texts` with default texts --- demo/index.tsx | 7 ++++-- package.json | 2 +- src/article.tsx | 12 ++++++---- src/blots/Figcaption.ts | 5 +++-- src/comment.tsx | 10 ++++++--- src/components/Title/index.tsx | 1 + .../Toolbar/ToolbarDividerButton.tsx | 1 + .../Toolbar/ToolbarEmbedCodeButton.tsx | 1 + .../Toolbar/ToolbarEmbedVideoButton.tsx | 1 + .../Toolbar/ToolbarUploadAudioButton.tsx | 1 + .../Toolbar/ToolbarUploadImageButton.tsx | 1 + src/components/Toolbar/index.tsx | 2 +- src/definitions/editor.d.ts | 4 ---- src/enums/common.ts | 8 +++---- src/enums/text.ts | 10 ++++++--- src/modules/imageDrop.ts | 1 + src/utils/language.ts | 22 ------------------- 17 files changed, 43 insertions(+), 46 deletions(-) diff --git a/demo/index.tsx b/demo/index.tsx index d9062924..9fb07306 100644 --- a/demo/index.tsx +++ b/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', + }} /> ) diff --git a/package.json b/package.json index 6592339a..c1684ffb 100644 --- a/package.json +++ b/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", diff --git a/src/article.tsx b/src/article.tsx index 96c6caae..c438b9d2 100644 --- a/src/article.tsx +++ b/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 { 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) } diff --git a/src/blots/Figcaption.ts b/src/blots/Figcaption.ts index 6c98dd63..bbbb7308 100644 --- a/src/blots/Figcaption.ts +++ b/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 || '' diff --git a/src/comment.tsx b/src/comment.tsx index 87f86083..0e3eeec1 100644 --- a/src/comment.tsx +++ b/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 { 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() { diff --git a/src/components/Title/index.tsx b/src/components/Title/index.tsx index a801077b..35472fce 100644 --- a/src/components/Title/index.tsx +++ b/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. diff --git a/src/components/Toolbar/ToolbarDividerButton.tsx b/src/components/Toolbar/ToolbarDividerButton.tsx index 382e743c..9291340b 100644 --- a/src/components/Toolbar/ToolbarDividerButton.tsx +++ b/src/components/Toolbar/ToolbarDividerButton.tsx @@ -1,5 +1,6 @@ import React from 'react' +import { Texts } from '../../enums/text' import SVGToolbarDivider from '../../icons/ToolbarDivider' /** diff --git a/src/components/Toolbar/ToolbarEmbedCodeButton.tsx b/src/components/Toolbar/ToolbarEmbedCodeButton.tsx index 478710be..eba04643 100644 --- a/src/components/Toolbar/ToolbarEmbedCodeButton.tsx +++ b/src/components/Toolbar/ToolbarEmbedCodeButton.tsx @@ -1,5 +1,6 @@ import React from 'react' +import { Texts } from '../../enums/text' import SVGToolbarEmbedCode from '../../icons/ToolbarEmbedCode' /** diff --git a/src/components/Toolbar/ToolbarEmbedVideoButton.tsx b/src/components/Toolbar/ToolbarEmbedVideoButton.tsx index 6fd0ae8c..93906ee3 100644 --- a/src/components/Toolbar/ToolbarEmbedVideoButton.tsx +++ b/src/components/Toolbar/ToolbarEmbedVideoButton.tsx @@ -1,5 +1,6 @@ import React from 'react' +import { Texts } from '../../enums/text' import SVGToolbarEmbedVideo from '../../icons/ToolbarEmbedVideo' /** diff --git a/src/components/Toolbar/ToolbarUploadAudioButton.tsx b/src/components/Toolbar/ToolbarUploadAudioButton.tsx index 34e64e80..746b5222 100644 --- a/src/components/Toolbar/ToolbarUploadAudioButton.tsx +++ b/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 diff --git a/src/components/Toolbar/ToolbarUploadImageButton.tsx b/src/components/Toolbar/ToolbarUploadImageButton.tsx index 186d115b..1e3656cd 100644 --- a/src/components/Toolbar/ToolbarUploadImageButton.tsx +++ b/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' diff --git a/src/components/Toolbar/index.tsx b/src/components/Toolbar/index.tsx index f719d0b8..0fe830e4 100644 --- a/src/components/Toolbar/index.tsx +++ b/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' diff --git a/src/definitions/editor.d.ts b/src/definitions/editor.d.ts index 78668154..f8536dd2 100644 --- a/src/definitions/editor.d.ts +++ b/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 } diff --git a/src/enums/common.ts b/src/enums/common.ts index 66aa9c8b..39751c17 100644 --- a/src/enums/common.ts +++ b/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 } = { diff --git a/src/enums/text.ts b/src/enums/text.ts index 0cdf069e..bca7876b 100644 --- a/src/enums/text.ts +++ b/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 } diff --git a/src/modules/imageDrop.ts b/src/modules/imageDrop.ts index b4762d87..c270ebd0 100644 --- a/src/modules/imageDrop.ts +++ b/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' /** diff --git a/src/utils/language.ts b/src/utils/language.ts index 52f255cf..874f9e7b 100644 --- a/src/utils/language.ts +++ b/src/utils/language.ts @@ -1,19 +1,4 @@ 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', @@ -21,11 +6,4 @@ export const langConvert = { 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 - }, }