fix: 修复设置换行模式的时候有报错，增加换行模式本地记忆功能 #339

Tencent · Oct 30, 2022 · 3facef0 · 3facef0
1 parent d7269fb
commit 3facef0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 29 deletions.
diff --git a/src/core/hooks/Br.js b/src/core/hooks/Br.js
@@ -16,13 +16,14 @@
 import ParagraphBase from '@/core/ParagraphBase';
 import { isBrowser } from '@/utils/env';
 import { compileRegExp } from '@/utils/regexp';
+import { getIsClassicBrFromLocal, testKeyInLocal } from '@/utils/config';
 
 export default class Br extends ParagraphBase {
   static HOOK_NAME = 'br';
 
   constructor(options) {
     super({ needCache: true });
-    this.classicBr = options.globalConfig.classicBr;
+    this.classicBr = testKeyInLocal('classicBr') ? getIsClassicBrFromLocal() : options.globalConfig.classicBr;
   }
 
   beforeMakeHtml(str) {
@@ -37,17 +38,16 @@ export default class Br extends ParagraphBase {
       const lineCount = lines.match(/\n/g).length;
       const sign = `br${lineCount}`;
       let html = '';
-      const { classicBr } = this.$engine.$cherry.options.engine.global;
       if (isBrowser()) {
         // 为了同步滚动
-        if (classicBr) {
+        if (this.classicBr) {
           html = `<span data-sign="${sign}" data-type="br" data-lines="${lineCount}"></span>`;
         } else {
           html = `<p data-sign="${sign}" data-type="br" data-lines="${lineCount}">&nbsp;</p>`;
         }
       } else {
         // node环境下直接输出br
-        html = classicBr ? '' : '<br/>';
+        html = this.classicBr ? '' : '<br/>';
       }
       const placeHolder = this.pushCache(html, sign);
       // 结尾只补充一个\n是因为Br将下一个段落中间的所有换行都替换掉了，而两个换行符会导致下一个区块行数计算错误

diff --git a/src/core/hooks/Paragraph.js b/src/core/hooks/Paragraph.js
@@ -15,6 +15,7 @@
  */
 import ParagraphBase from '@/core/ParagraphBase';
 import { blockNames } from '@/utils/sanitize';
+import { getIsClassicBrFromLocal, testKeyInLocal } from '@/utils/config';
 /**
  * 段落级语法
  * 段落级语法可以具备以下特性：
@@ -35,7 +36,7 @@ export default class Paragraph extends ParagraphBase {
     // 是否启用经典换行逻辑
     // true：一个换行会被忽略，两个以上连续换行会分割成段落，
     // false： 一个换行会转成<br>，两个连续换行会分割成段落，三个以上连续换行会转成<br>并分割段落
-    this.classicBr = options.globalConfig.classicBr;
+    this.classicBr = testKeyInLocal('classicBr') ? getIsClassicBrFromLocal() : options.globalConfig.classicBr;
     this.removeBrAfterBlock = null;
     this.removeBrBeforeBlock = null;
     this.removeNewlinesBetweenTags = null;
@@ -47,10 +48,9 @@ export default class Paragraph extends ParagraphBase {
    * @returns markdown源码
    */
   $cleanParagraph(str) {
-    const { classicBr } = this.$engine.$cherry.options.engine.global;
     // remove leading and trailing newlines
     const trimedPar = str.replace(/^\n+/, '').replace(/\n+$/, '');
-    if (classicBr) {
+    if (this.classicBr) {
       return trimedPar;
     }
     const minifiedPar = this.joinRawHtml(trimedPar);

diff --git a/src/toolbars/hooks/Settings.js b/src/toolbars/hooks/Settings.js
@@ -16,6 +16,7 @@
 import MenuBase from '@/toolbars/MenuBase';
 import locale from '@/locales/index';
 import Event from '@/Event';
+import { saveIsClassicBrToLocal, getIsClassicBrFromLocal, testKeyInLocal } from '@/utils/config';
 
 /**
  * 设置按钮
@@ -29,7 +30,9 @@ export default class Settings extends MenuBase {
     this.setName('settings', 'settings');
     this.updateMarkdown = false;
     this.engine = $cherry.engine;
-    const { classicBr } = this.engine.$cherry.options.engine.global;
+    const classicBr = testKeyInLocal('classicBr')
+      ? getIsClassicBrFromLocal()
+      : this.engine.$cherry.options.engine.global?.classicBr;
     const { defaultModel } = $cherry.editor.options;
     const classicBrIconName = classicBr ? 'br' : 'normal';
     const classicBrName = classicBr ? 'classicBr' : 'normalBr';
@@ -39,7 +42,7 @@ export default class Settings extends MenuBase {
     this.subMenuConfig = [
       { iconName: classicBrIconName, name: classicBrName, onclick: this.bindSubClick.bind(this, 'classicBr') },
       { iconName: previewIcon, name: previewName, onclick: this.bindSubClick.bind(this, 'previewClose') },
-      { iconName: '', name: '隐藏Toolbar', onclick: this.bindSubClick.bind(this, 'toggleToolbar') },
+      { iconName: '', name: '隐藏(ctrl+0)', onclick: this.bindSubClick.bind(this, 'toggleToolbar') },
     ];
     this.attachEventListeners();
     this.shortcutKeyMaps = [
@@ -125,27 +128,21 @@ export default class Settings extends MenuBase {
     // eslint-disable-next-line no-param-reassign
     shortKey = this.matchShortcutKey(shortKey);
     if (shortKey === 'classicBr') {
-      const [dom] = Array.from(this.subMenu.dom.children);
-      if (dom.childNodes[1].textContent === locale.zh_CN.classicBr) {
-        dom.children[0].setAttribute(
-          'class',
-          dom.children[0].getAttribute('class').replace('ch-icon-br', 'ch-icon-normal'),
-        );
-        this.engine.$cherry.options.engine.global.classicBr = false;
-        this.engine.hookCenter.hookList.paragraph.forEach((item) => {
-          item.classicBr = false;
-        });
-        dom.childNodes[1].textContent = locale.zh_CN.normalBr;
+      const targetIsClassicBr = !getIsClassicBrFromLocal();
+      saveIsClassicBrToLocal(targetIsClassicBr);
+      this.engine.$cherry.options.engine.global.classicBr = targetIsClassicBr;
+      this.engine.hookCenter.hookList.paragraph.forEach((item) => {
+        item.classicBr = targetIsClassicBr;
+      });
+
+      let i = this.$cherry.wrapperDom.querySelector('.cherry-dropdown .ch-icon-normal');
+      i = i ? i : this.$cherry.wrapperDom.querySelector('.cherry-dropdown .ch-icon-br');
+      if (targetIsClassicBr) {
+        i.classList.replace('ch-icon-normal', 'ch-icon-br');
+        i.parentElement.childNodes[1].textContent = locale.zh_CN.classicBr;
       } else {
-        dom.children[0].setAttribute(
-          'class',
-          dom.children[0].getAttribute('class').replace('ch-icon-normal', 'ch-icon-br'),
-        );
-        this.engine.$cherry.options.engine.global.classicBr = true;
-        this.engine.hookCenter.hookList.paragraph.forEach((item) => {
-          item.classicBr = true;
-        });
-        dom.childNodes[1].textContent = locale.zh_CN.classicBr;
+        i.classList.replace('ch-icon-br', 'ch-icon-normal');
+        i.parentElement.childNodes[1].textContent = locale.zh_CN.normalBr;
       }
       this.engine.$cherry.previewer.update('');
       this.engine.$cherry.initText(this.engine.$cherry.editor.editor);

diff --git a/src/utils/config.js b/src/utils/config.js
@@ -26,6 +26,38 @@ export function customizer(objValue, srcValue) {
   }
 }
 
+/**
+ * 检查本地有没有值
+ * @param {string} key
+ */
+export function testKeyInLocal(key) {
+  if (localStorage) {
+    return localStorage.getItem(`cherry-${key}`) !== null;
+  }
+  return false;
+}
+
+/**
+ * 保存是否经典换行
+ * @param {boolean} isClassicBr
+ */
+export function saveIsClassicBrToLocal(isClassicBr) {
+  if (localStorage) {
+    localStorage.setItem('cherry-classicBr', isClassicBr ? 'true' : 'false');
+  }
+}
+
+/**
+ * 是否经典换行
+ */
+export function getIsClassicBrFromLocal() {
+  let ret = 'false';
+  if (localStorage) {
+    ret = localStorage.getItem('cherry-classicBr');
+  }
+  return ret === 'true';
+}
+
 /**
  * 保存当前主题
  * @param {string} theme