feat(vscodePlugin): support theme selected state (#965)

chore(upgrade): `cherry-markdown` up ` v0.8.50`

vscodePlugin/.gitignore

@@ -1,7 +1,6 @@
 out
 /dist
 node_modules
-.vscode-test/
 
 web-resources/scripts/global-vars.js
 

vscodePlugin/.vscodeignore

@@ -1,5 +1,4 @@
 .vscode/**
-.vscode-test/**
 out/**
 node_modules/**
 src/**

vscodePlugin/package.json

@@ -193,7 +193,6 @@
     "mocha": "^8.4.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.2",
-    "vscode-test": "^1.5.2",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0"
   },

vscodePlugin/tsconfig.json

@@ -9,7 +9,7 @@
 		],
 		"sourceMap": true,
 		"rootDir": "src",
-		"strict": true   /* enable all strict type-checking options */
+		"strict": true /* enable all strict type-checking options */
 		/* Additional Checks */
 		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
 		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
@@ -19,7 +19,6 @@
 		"src/**/*.ts"
 	],
 	"exclude": [
-		"node_modules",
-		".vscode-test"
+		"node_modules"
 	]
-}
+}

vscodePlugin/web-resources/scripts/index.js

@@ -56,81 +56,6 @@ const customMenuFont = Cherry.createMenuHook('字体样式', {
 //   ],
 // });
 
-// eslint-disable-next-line no-undef
-const customMenuChangeTheme = Cherry.createMenuHook('主题', {
-  iconName: 'insertChart',
-  onClick: (selection, type) => {
-    changeTheme(type);
-    vscode.postMessage({
-      type: 'change-theme',
-      data: type,
-    });
-  },
-  subMenuConfig: [
-    {
-      noIcon: true,
-      name: '默认·default',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'default');
-      },
-    },
-    {
-      noIcon: true,
-      name: '暗黑·dark',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'dark');
-      },
-    },
-    {
-      noIcon: true,
-      name: '明亮·light',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'light');
-      },
-    },
-    {
-      noIcon: true,
-      name: '清新·green',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'green');
-      },
-    },
-    {
-      noIcon: true,
-      name: '热情·red',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'red');
-      },
-    },
-    {
-      noIcon: true,
-      name: '淡雅·violet',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'violet');
-      },
-    },
-    {
-      noIcon: true,
-      name: '清幽·blue',
-      onclick: () => {
-        cherry.toolbar.menus.hooks.customMenuChangeTheme.fire(null, 'blue');
-      },
-    },
-  ],
-});
-
-function changeTheme(theme) {
-  const cherryDom = cherry.wrapperDom;
-  const cherryPreviewDom = cherry.previewer.getDom();
-  cherryDom.className = `${cherryDom.className.replace(
-    / theme__[\S]+$/,
-    '',
-  )} theme__${theme}`;
-  cherryPreviewDom.className = `${cherryPreviewDom.className.replace(
-    / theme__[\S]+$/,
-    '',
-  )} theme__${theme}`;
-}
 
 /** 处理 a 链接跳转问题 */
 const onClickLink = (target) => {
@@ -258,12 +183,11 @@ const basicConfig = {
       'customMenuChangeModule',
       'mobilePreview',
       'copy',
-      'customMenuChangeTheme',
+      'theme',
     ],
     customMenu: {
       customMenuChangeModule,
       customMenuFont,
-      customMenuChangeTheme,
     },
     toc: true,
   },
@@ -299,6 +223,15 @@ const basicConfig = {
       window.uploadFileCallback = callback;
     },
   },
+  event: {
+    // 当编辑区内容有实际变化时触发
+    changeMainTheme: (theme) => {
+      vscode.postMessage({
+        type: 'change-theme',
+        data: theme,
+      });
+    },
+  },
   previewer: {
     // 自定义markdown预览区域class
     // className: 'markdown'
@@ -349,14 +282,12 @@ function isHttpUrl(url) {
 
 const mdInfo = JSON.parse(document.getElementById('markdown-info').value);
 const config = Object.assign({}, basicConfig, { value: mdInfo.text });
-const { theme } = mdInfo;
 // eslint-disable-next-line new-cap, no-undef
 const cherry = new Cherry(config);
 // eslint-disable-next-line no-undef
 const vscode = acquireVsCodeApi();
 // 图片缓存
 // const imgCache = {};
-changeTheme(theme);
 
 // function afterInit() {
 //   setTimeout(() => {
@@ -475,7 +406,6 @@ window.addEventListener('message', (e) => {
     case 'editor-change':
       window.disableEditListener = true;
       cherry.setValue(data.text);
-      changeTheme(data.theme);
       editTimeOut && clearTimeout(editTimeOut);
       editTimeOut = setTimeout(() => {
         window.disableEditListener = false;