feat: #683 增加主题缓存的命名空间机制

Tencent · Jan 21, 2024 · f4bf980 · f4bf980
1 parent 03f7a99
commit f4bf980
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/src/Cherry.config.js b/src/Cherry.config.js
@@ -389,6 +389,8 @@ const defaultConfig = {
     { className: 'violet', label: '淡雅' },
     { className: 'blue', label: '清幽' },
   ],
+  // 定义主题的作用范围，相同themeNameSpace的实例共享主题配置
+  themeNameSpace: 'cherry',
   // 预览页面不需要绑定事件
   isPreviewOnly: false,
   // 预览区域跟随编辑器光标自动滚动

diff --git a/src/Cherry.js b/src/Cherry.js
@@ -560,7 +560,7 @@ export default class Cherry extends CherryStatic {
       'cherry-previewer cherry-markdown',
       className || '',
       autonumberClass,
-      getThemeFromLocal(true),
+      getThemeFromLocal(true, this.options.themeNameSpace),
     ].join(' ');
     if (dom) {
       previewer = dom;

diff --git a/src/utils/config.js b/src/utils/config.js
@@ -62,20 +62,20 @@ export function getIsClassicBrFromLocal() {
  * 保存当前主题
  * @param {string} theme
  */
-function saveThemeToLocal(theme) {
+function saveThemeToLocal(nameSpace, theme) {
   if (typeof localStorage !== 'undefined') {
-    localStorage.setItem('cherry-theme', theme);
+    localStorage.setItem(`${nameSpace}-theme`, theme);
   }
 }
 
 /**
  * 获取当前主题
  * @returns {string} 主题名
  */
-export function getThemeFromLocal(fullClass = false) {
+export function getThemeFromLocal(fullClass = false, nameSpace = 'cherry') {
   let ret = 'default';
   if (typeof localStorage !== 'undefined') {
-    const localTheme = localStorage.getItem('cherry-theme');
+    const localTheme = localStorage.getItem(`${nameSpace}-theme`);
     if (localTheme) {
       ret = localTheme;
     }
@@ -89,10 +89,11 @@ export function getThemeFromLocal(fullClass = false) {
  * @param {string} theme 如果没有传theme，则从本地缓存里取
  */
 export function changeTheme($cherry, theme = '') {
-  const newTheme = (theme ? theme : getThemeFromLocal()).replace(/^.*theme__/, '');
+  const themeNameSpace = $cherry.options.themeNameSpace || 'cherry';
+  const newTheme = (theme ? theme : getThemeFromLocal(false, themeNameSpace)).replace(/^.*theme__/, '');
   const newClass = ` theme__${newTheme}`;
   $cherry.wrapperDom.className = $cherry.wrapperDom.className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
   $cherry.previewer.getDomContainer().className =
     $cherry.previewer.getDomContainer().className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
-  saveThemeToLocal(newTheme);
+  saveThemeToLocal(themeNameSpace, newTheme);
 }
diff --git a/types/cherry.d.ts b/types/cherry.d.ts
@@ -31,6 +31,8 @@ export interface CherryOptions {
   };
   /** 有哪些主题 */
   theme: {className: string, label: string}[];
+  /** 定义主题的作用范围，相同themeNameSpace的实例共享主题配置 */
+  themeNameSpace: string,
   callback: {
     /** 编辑器内容改变并完成渲染后触发 */
     afterChange: CherryLifecycle;