fix(*): 避免出现 theme__null class 以及修复了常用操作的一些i18n国际化问题 (#463)

* Improved code to avoid theme__null

* Fixed i18n issues of common actions

src/locales/en_US.js

@@ -29,7 +29,7 @@ export default {
   quickTable: 'Quick Table',
   quote: 'Quote',
   size: 'Size',
-  color: 'Color',
+  color: 'Text Color & Background',
   strikethrough: 'Strikethrough',
   sub: 'Sub',
   sup: 'Sup',

src/toolbars/hooks/Bold.js

@@ -39,7 +39,7 @@ export default class Bold extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = this.getSelection(selection) || '加粗';
+    let $selection = this.getSelection(selection) || this.locale.bold;
     // 如果是单选，并且选中内容的开始结束内没有加粗语法，则扩大选中范围
     if (!this.isSelections && !this.$testIsBold($selection)) {
       this.getMoreSelection('**', '**', () => {

src/toolbars/hooks/CheckList.js

@@ -33,7 +33,7 @@ export default class Checklist extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'Item 1\n    Item 1.1\nItem 2';
     const [before] = $selection.match(/^\n*/);
     const [after] = $selection.match(/\n*$/);
     return `${before}${getListFromStr($selection, 'checklist')}${after}`;

src/toolbars/hooks/Color.js

@@ -43,7 +43,7 @@ export default class Color extends MenuBase {
    * @returns 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '', event) {
-    let $selection = getSelection(this.editor.editor, selection) || '字体颜色或背景';
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.color;
     if (this.hasCacheOnce()) {
       // @ts-ignore
       const { type, color } = this.getAndCleanCacheOnce();

src/toolbars/hooks/Copy.js

@@ -78,7 +78,7 @@ export default class Copy extends MenuBase {
     // 切换loading状态
     if (this.isLoading) {
       const loadingButton = document.querySelector('.icon-loading');
-      loadingButton.outerHTML = '<i class="ch-icon ch-icon-copy" title="复制内容"></i>';
+      loadingButton.outerHTML = `<i class="ch-icon ch-icon-copy" title="${this.locale.copy}"></i>`;
     } else {
       const copyButton = document.querySelector('.ch-icon-copy');
       copyButton.outerHTML = '<div class="icon-loading loading"></div>';

src/toolbars/hooks/H1.js

@@ -35,7 +35,7 @@ export default class H1 extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '标题';
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.h1;
     const header = '#';
     if (!this.isSelections && !this.$testIsHead($selection)) {
       this.getMoreSelection('\n', '', () => {

src/toolbars/hooks/H2.js

@@ -35,7 +35,7 @@ export default class H2 extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '标题';
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.h2;
     const header = '##';
     if (!this.isSelections && !this.$testIsHead($selection)) {
       this.getMoreSelection('\n', '', () => {

src/toolbars/hooks/H3.js

@@ -35,7 +35,7 @@ export default class H3 extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '标题';
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.h3;
     const header = '###';
     if (!this.isSelections && !this.$testIsHead($selection)) {
       this.getMoreSelection('\n', '', () => {

src/toolbars/hooks/Header.js

@@ -56,7 +56,7 @@ export default class Header extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection, 'line', true) || '标题';
+    let $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.header;
     const header = this.$getFlagStr(shortKey);
     if (!this.isSelections && !this.$testIsHead($selection)) {
       this.getMoreSelection('\n', '', () => {

src/toolbars/hooks/Insert.js

@@ -109,13 +109,13 @@ export default class Insert extends MenuBase {
         return `${selection}\n\n$ e=mc^2 $\n\n`;
       case 'checklist':
         // 插入检查项
-        return `${selection}\n\n- [x] No.1\n- [ ] No.2\n- [ ] No.3\n`;
+        return `${selection}\n\n- [x] Item 1\n- [ ] Item 2\n- [ ] Item 3\n`;
       case 'toc':
         // 插入目录
         return `${selection}\n\n[[toc]]\n`;
       case 'link':
         // 插入超链接
-        return `${selection}[超链接](http://url.com) `;
+        return `${selection}[${this.locale.link}](http://url.com) `;
       case 'image':
         // 插入图片，调用上传文件逻辑
         this.handleUpload('image');

src/toolbars/hooks/Italic.js

@@ -39,7 +39,7 @@ export default class Italic extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = this.getSelection(selection) || '斜体';
+    let $selection = this.getSelection(selection) || this.locale.italic;
     // 如果是单选，并且选中内容的开始结束内没有加粗语法，则扩大选中范围
     if (!this.isSelections && !this.$testIsItalic($selection)) {
       this.getMoreSelection('*', '*', () => {

src/toolbars/hooks/Link.js

@@ -31,9 +31,9 @@ export default class Link extends MenuBase {
   onClick(selection, shortKey = '') {
     // 插入图片，调用上传文件逻辑
     if (/^http/.test(selection)) {
-      return `[超链接](${selection})`;
+      return `[${this.locale.link}](${selection})`;
     }
-    const title = selection ? selection : '超链接';
+    const title = selection ? selection : this.locale.link;
     return `[${title}](http://url.com) `;
   }
 

src/toolbars/hooks/Ol.js

@@ -33,7 +33,7 @@ export default class Ol extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'Item 1\n    Item 1.1\nItem 2';
     const [before] = $selection.match(/^\n*/);
     const [after] = $selection.match(/\n*$/);
     return `${before}${getListFromStr($selection, 'ol')}${after}`;

src/toolbars/hooks/Quote.js

@@ -30,7 +30,7 @@ export default class Quote extends MenuBase {
    * @returns
    */
   onClick(selection) {
-    const $selection = getSelection(this.editor.editor, selection, 'line', true) || '引用';
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || this.locale.quote;
     const isWrapped = $selection.split('\n').every((text) => /^\s*>[^\n]+$/.exec(text));
     if (isWrapped) {
       // 去掉>号

src/toolbars/hooks/Strikethrough.js

@@ -35,7 +35,7 @@ export default class Strikethrough extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection) || '删除线';
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.strikethrough;
     // @ts-ignore
     const needWhitespace = this.$cherry?.options?.engine?.syntax?.strikethrough?.needWhitespace;
     const space = needWhitespace ? ' ' : '';

src/toolbars/hooks/Sub.js

@@ -35,7 +35,7 @@ export default class Sub extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection) || '下标';
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.sub;
     // 如果选中的内容里有下标的语法，则认为是要去掉下标语法
     if (!this.isSelections && !this.$testIsSub($selection)) {
       this.getMoreSelection('^^', '^^', () => {

src/toolbars/hooks/Sup.js

@@ -35,7 +35,7 @@ export default class Sup extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = getSelection(this.editor.editor, selection) || '上标';
+    let $selection = getSelection(this.editor.editor, selection) || this.locale.sup;
     // 如果选中的内容里有上标的语法，则认为是要去掉上标语法
     if (!this.isSelections && !this.$testIsSup($selection)) {
       this.getMoreSelection('^', '^', () => {

src/toolbars/hooks/Ul.js

@@ -33,7 +33,7 @@ export default class Ul extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'No.1\n    No.1.1\nNo.2';
+    const $selection = getSelection(this.editor.editor, selection, 'line', true) || 'Item 1\n    Item 1.1\nItem 2';
     const [before] = $selection.match(/^\n*/);
     const [after] = $selection.match(/\n*$/);
     return `${before}${getListFromStr($selection, 'ul')}${after}`;

src/toolbars/hooks/Underline.js

@@ -34,7 +34,7 @@ export default class Underline extends MenuBase {
    * @returns {string} 回填到编辑器光标位置/选中文本区域的内容
    */
   onClick(selection, shortKey = '') {
-    let $selection = selection ? selection : '下划线';
+    let $selection = selection ? selection : this.locale.underline;
     // 如果选中的内容里有下划线语法，则认为是要去掉下划线语法
     if (!this.isSelections && !this.$testIsUnderline($selection)) {
       this.getMoreSelection(' /', '/ ', () => {

src/utils/config.js

@@ -75,7 +75,10 @@ function saveThemeToLocal(theme) {
 export function getThemeFromLocal(fullClass = false) {
   let ret = 'default';
   if (typeof localStorage !== 'undefined') {
-    ret = localStorage.getItem('cherry-theme');
+    const localTheme = localStorage.getItem('cherry-theme');
+    if (localTheme) {
+      ret = localTheme;
+    }
   }
   return fullClass ? `theme__${ret}` : ret;
 }

src/utils/regexp.js

@@ -176,7 +176,7 @@ export function getCodeBlockRule() {
  * @returns {String}
  */
 export function getListFromStr(selection, type) {
-  let $selection = selection ? selection : 'No.1\n    No.1.1\nNo.2';
+  let $selection = selection ? selection : 'Item 1\n    Item 1.1\nItem 2';
   $selection = $selection.replace(/^\n+/, '').replace(/\n+$/, '');
   let pre = '1.';
   switch (type) {