feat: export clearSideEffects

dev/App.tsx

@@ -47,13 +47,13 @@ export default defineComponent({
             lang={lang.value}
           />
 
-          {/* <VueTemplate />
+          <VueTemplate />
 
           <PreviewOnly
             theme={theme.value}
             previewTheme={previewTheme.value}
             codeTheme={codeTheme.value}
-          /> */}
+          />
         </div>
       </div>
     );

packages/MdEditor/composition.ts

@@ -1,4 +1,5 @@
 import { reactive, watch, computed, onMounted, provide, ref, Ref, useId } from 'vue';
+import { deepClone, deepMerge } from '@vavt/util';
 import {
   InnerError,
   SettingType,
@@ -34,7 +35,7 @@ import {
 } from '~/static/event-name';
 import bus from '~/utils/event-bus';
 import { ContentExposeParam } from './layouts/Content/type';
-import { deepClone, deepMerge } from '@vavt/util';
+import { CDN_IDS } from './static';
 
 /**
  * 处理保存逻辑，主要是需要异步返回编译后的html
@@ -263,12 +264,12 @@ export const useExpansion = (props: EditorProps) => {
         ...css,
         rel: 'stylesheet',
         href: editorExtensions.cropper!.css,
-        id: `${prefix}-cropperCss`
+        id: CDN_IDS.croppercss
       });
       appendHandler('script', {
         ...js,
         src: editorExtensions.cropper!.js,
-        id: `${prefix}-cropper`
+        id: CDN_IDS.cropperjs
       });
     }
 
@@ -278,7 +279,7 @@ export const useExpansion = (props: EditorProps) => {
       appendHandler('script', {
         ...standaloneJs,
         src: editorExtensions.prettier!.standaloneJs,
-        id: `${prefix}-prettier`
+        id: CDN_IDS.prettier
       });
     }
 
@@ -288,7 +289,7 @@ export const useExpansion = (props: EditorProps) => {
       appendHandler('script', {
         ...parserMarkdownJs,
         src: editorExtensions.prettier!.parserMarkdownJs,
-        id: `${prefix}-prettierMD`
+        id: CDN_IDS.prettierMD
       });
     }
   });

packages/MdEditor/layouts/Content/composition/useHighlight.ts

@@ -1,7 +1,8 @@
 import { ComputedRef, inject, onMounted, shallowRef, watch } from 'vue';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
 import { appendHandler, updateHandler } from '~/utils/dom';
 import { ContentPreviewProps } from '../ContentPreview';
+import { CDN_IDS } from '~/static';
 
 /**
  * 注册代码高亮扩展到页面
@@ -26,13 +27,13 @@ const useHighlight = (props: ContentPreviewProps) => {
     appendHandler('link', {
       ...highlight.value.css,
       rel: 'stylesheet',
-      id: `${prefix}-hlCss`
+      id: CDN_IDS.hlcss
     });
     appendHandler(
       'script',
       {
         ...highlight.value.js,
-        id: `${prefix}-hljs`,
+        id: CDN_IDS.hljs,
         onload() {
           hljsRef.value = window.hljs;
         }
@@ -52,7 +53,7 @@ const useHighlight = (props: ContentPreviewProps) => {
       updateHandler('link', {
         ...highlight.value.css,
         rel: 'stylesheet',
-        id: `${prefix}-hlCss`
+        id: CDN_IDS.hlcss
       });
     }
   );

packages/MdEditor/layouts/Content/composition/useKatex.ts

@@ -1,7 +1,8 @@
 import { onMounted, shallowRef } from 'vue';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
 import { appendHandler } from '~/utils/dom';
 import { ContentPreviewProps } from '../ContentPreview';
+import { CDN_IDS } from '~/static';
 
 /**
  * 注册katex扩展到页面
@@ -23,7 +24,7 @@ const useKatex = (props: ContentPreviewProps) => {
       'script',
       {
         src: editorExtensions.katex!.js,
-        id: `${prefix}-katex`,
+        id: CDN_IDS.katexjs,
         onload() {
           katex.value = window.katex;
         }
@@ -34,7 +35,7 @@ const useKatex = (props: ContentPreviewProps) => {
     appendHandler('link', {
       rel: 'stylesheet',
       href: editorExtensions.katex!.css,
-      id: `${prefix}-katexCss`
+      id: CDN_IDS.katexcss
     });
   });
 

packages/MdEditor/layouts/Content/composition/useMermaid.ts

@@ -1,8 +1,9 @@
 import { watch, inject, ComputedRef, onMounted, shallowRef, Ref } from 'vue';
+import { randomId } from '@vavt/util';
 import { prefix, configOption } from '~/config';
 import { appendHandler } from '~/utils/dom';
-import { randomId } from '@vavt/util';
 import { mermaidCache } from '~/utils/cache';
+import { CDN_IDS } from '~/static';
 
 import { ContentPreviewProps } from '../ContentPreview';
 
@@ -52,7 +53,7 @@ const useMermaid = (props: ContentPreviewProps) => {
         ...editorExtensionsAttrs.mermaid?.js,
         rel: 'modulepreload',
         href: jsSrc,
-        id: `${prefix}-mermaid-m`
+        id: CDN_IDS.mermaidM
       });
 
       import(
@@ -69,7 +70,7 @@ const useMermaid = (props: ContentPreviewProps) => {
         {
           ...editorExtensionsAttrs.mermaid?.js,
           src: jsSrc,
-          id: `${prefix}-mermaid`,
+          id: CDN_IDS.mermaid,
           onload() {
             mermaidRef.value = window.mermaid;
             configMermaid();

packages/MdEditor/layouts/Toolbar/composition.ts

@@ -1,7 +1,8 @@
 import { onMounted, inject, ref } from 'vue';
-import { configOption, prefix } from '~/config';
+import { configOption } from '~/config';
 import { appendHandler } from '~/utils/dom';
 import bus from '~/utils/event-bus';
+import { CDN_IDS } from '~/static';
 import { CHANGE_FULL_SCREEN, ERROR_CATCHER } from '~/static/event-name';
 import { ToolbarProps } from './props';
 
@@ -64,7 +65,7 @@ export const useSreenfull = (props: ToolbarProps) => {
         {
           ...editorExtensionsAttrs.screenfull?.js,
           src: editorExtensions.screenfull!.js,
-          id: `${prefix}-screenfull`,
+          id: CDN_IDS.screenfull,
           onload: screenfullLoad
         },
         'screenfull'

packages/MdEditor/static/index.ts

@@ -0,0 +1,15 @@
+import { prefix } from '../config';
+
+export const CDN_IDS = {
+  hljs: `${prefix}-hljs`,
+  hlcss: `${prefix}-hlCss`,
+  prettier: `${prefix}-prettier`,
+  prettierMD: `${prefix}-prettierMD`,
+  cropperjs: `${prefix}-cropper`,
+  croppercss: `${prefix}-cropperCss`,
+  screenfull: `${prefix}-screenfull`,
+  mermaidM: `${prefix}-mermaid-m`,
+  mermaid: `${prefix}-mermaid`,
+  katexjs: `${prefix}-katex`,
+  katexcss: `${prefix}-katexCss`
+};

packages/index.ts

@@ -9,8 +9,8 @@ export { default as MdModal } from './MdEditor/components/Modal';
 export { default as StrIcon } from './MdEditor/components/Icon/Str';
 export { default as NormalFooterToolbar } from './NormalFooterToolbar';
 
-export * from './MdEditor/layouts/Content/markdownIt/xss';
-
+export * from '~/layouts/Content/markdownIt/xss';
 export * from './config';
+export * from './util';
 
 export * from '~/type';

packages/util.ts

@@ -0,0 +1,15 @@
+import { CDN_IDS } from './MdEditor/static';
+
+/**
+ * 清空组件带来的副作用，例如
+ * 1. 使用CDN嵌入的链接，为了保证多个组件能够正常使用，组件在卸载时不会主动移除
+ */
+export const clearSideEffects = () => {
+  (Object.keys(CDN_IDS) as Array<keyof typeof CDN_IDS>).forEach((key) => {
+    const ele = document.getElementById(CDN_IDS[key]);
+
+    if (ele) {
+      ele.remove();
+    }
+  });
+};