feat: #769 代码块主题缓存 (#781)

* chore(release): 0.8.42 * feat: #769 代码块主题缓存 * fix: 修改代码主题支持多实例场景 --------- Co-authored-by: sunsonliu(刘阳) <[email protected]> Co-authored-by: saraph1nes <[email protected]> Co-authored-by: yuxuanxia <[email protected]>
Tencent · Jun 24, 2024 · 912c25e · 912c25e
1 parent 5bb2b26
commit 912c25e
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 12 deletions.
diff --git a/dist/cherry-markdown.js b/dist/cherry-markdown.js
diff --git a/dist/fonts/ch-icon.eot b/dist/fonts/ch-icon.eot
diff --git a/dist/fonts/ch-icon.ttf b/dist/fonts/ch-icon.ttf
diff --git a/dist/fonts/ch-icon.woff b/dist/fonts/ch-icon.woff
diff --git a/dist/fonts/ch-icon.woff2 b/dist/fonts/ch-icon.woff2
diff --git a/src/Cherry.js b/src/Cherry.js
@@ -24,7 +24,7 @@ import ToolbarRight from './toolbars/ToolbarRight';
 import Toc from './toolbars/Toc';
 import { createElement } from './utils/dom';
 import Sidebar from './toolbars/Sidebar';
-import { customizer, getThemeFromLocal, changeTheme } from './utils/config';
+import { customizer, getThemeFromLocal, changeTheme, getCodeThemeFromLocal } from './utils/config';
 import NestedError, { $expectTarget } from './utils/error';
 import getPosBydiffs from './utils/recount-pos';
 import defaultConfig from './Cherry.config';
@@ -492,6 +492,9 @@ export default class Cherry extends CherryStatic {
         'data-codeBlockTheme': codeBlockTheme,
       },
     );
+
+    wrapperDom.setAttribute('data-code-block-theme', getCodeThemeFromLocal(this.options.themeNameSpace));
+
     this.wrapperDom = wrapperDom;
     return wrapperDom;
   }

diff --git a/src/toolbars/hooks/CodeTheme.js b/src/toolbars/hooks/CodeTheme.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import MenuBase from '@/toolbars/MenuBase';
+import { changeCodeTheme } from '@/utils/config';
 /**
  * 设置代码块的主题
  * 本功能依赖[prism组件](https://github.com/PrismJS/prism)
@@ -39,10 +40,9 @@ export default class CodeTheme extends MenuBase {
   /**
    * 响应点击事件
    * @param {string} shortKey 快捷键参数，本函数不处理这个参数
-   * @param {string} theme 具体的代码块主题
-   * @returns 回填到编辑器光标位置/选中文本区域的内容
+   * @param {string} codeTheme 具体的代码块主题
    */
-  onClick(shortKey = '', theme) {
-    document.querySelector('.cherry').setAttribute('data-code-block-theme', theme);
+  onClick(shortKey = '', codeTheme) {
+    changeCodeTheme(this.$cherry, codeTheme);
   }
 }
diff --git a/src/utils/config.js b/src/utils/config.js
@@ -97,3 +97,46 @@ export function changeTheme($cherry, theme = '') {
     $cherry.previewer.getDomContainer().className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
   saveThemeToLocal(themeNameSpace, newTheme);
 }
+
+/**
+ * 保存当前代码主题
+ * @param {string} nameSpace
+ * @param {string} codeTheme
+ */
+function saveCodeThemeToLocal(nameSpace, codeTheme) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(`${nameSpace}-codeTheme`, codeTheme);
+  }
+}
+
+/**
+ * 获取当前代码主题
+ * @param {string} nameSpace
+ * @returns {string} 主题名
+ */
+export function getCodeThemeFromLocal(nameSpace = 'cherry') {
+  let res = 'default';
+  if (typeof localStorage !== 'undefined') {
+    const localTheme = localStorage.getItem(`${nameSpace}-codeTheme`);
+    if (localTheme) {
+      res = localTheme;
+    }
+  }
+  return res;
+}
+
+/**
+ * 修改代码主题
+ * 相同themeNameSpace的实例有一样的代码主题配置
+ * @param {object} $cherry
+ * @param {string} codeTheme 如果没有传codeTheme，则从本地缓存里取
+ */
+export function changeCodeTheme($cherry, codeTheme) {
+  const themeNameSpace = $cherry.options.themeNameSpace || 'cherry';
+
+  const newTheme = codeTheme ? codeTheme : getCodeThemeFromLocal(themeNameSpace);
+
+  $cherry.wrapperDom.setAttribute('data-code-block-theme', newTheme);
+
+  saveCodeThemeToLocal(themeNameSpace, newTheme);
+}