Merge branch 'v5' into beta

imzbf · Nov 11, 2024 · a873d39 · a873d39
2 parents 82e5861 + 4975782
commit a873d39
Show file tree

Hide file tree

Showing 16 changed files with 98 additions and 43 deletions.
diff --git a/packages/MdEditor/Editor.tsx b/packages/MdEditor/Editor.tsx
@@ -56,7 +56,7 @@ const Editor = forwardRef((props: EditorProps, ref: ForwardedRef<unknown>) => {
     noHighlight = defaultProps.noHighlight,
     noImgZoomIn = defaultProps.noImgZoomIn,
     language = defaultProps.language,
-    inputBoxWitdh = defaultProps.inputBoxWitdh,
+    inputBoxWidth = defaultProps.inputBoxWidth,
     sanitizeMermaid = defaultProps.sanitizeMermaid,
     transformImgUrl = defaultProps.transformImgUrl,
     codeFoldable = defaultProps.codeFoldable,
@@ -190,8 +190,8 @@ const Editor = forwardRef((props: EditorProps, ref: ForwardedRef<unknown>) => {
           theme={props.theme}
           noImgZoomIn={noImgZoomIn}
           onDrop={props.onDrop}
-          inputBoxWitdh={inputBoxWitdh}
-          onInputBoxWitdhChange={props.onInputBoxWitdhChange}
+          inputBoxWidth={inputBoxWidth}
+          onInputBoxWidthChange={props.onInputBoxWidthChange}
           sanitizeMermaid={sanitizeMermaid}
           transformImgUrl={transformImgUrl}
           codeFoldable={codeFoldable}

diff --git a/packages/MdEditor/config.ts b/packages/MdEditor/config.ts
@@ -477,7 +477,7 @@ export const defaultProps = {
   autoDetectCode: false,
   noHighlight: false,
   noImgZoomIn: false,
-  inputBoxWitdh: '50%',
+  inputBoxWidth: '50%',
   sanitizeMermaid: (h: string) => Promise.resolve(h),
   transformImgUrl: (t: string) => t,
   codeFoldable: true,

diff --git a/packages/MdEditor/hooks.ts b/packages/MdEditor/hooks.ts
@@ -50,6 +50,7 @@ import {
   PREVIEW_ONLY_CHANGED
 } from './static/event-name';
 import { ContentExposeParam } from './layouts/Content/type';
+import { CDN_IDS } from './static';
 
 /**
  * 键盘监听
@@ -165,12 +166,12 @@ export const useExpansion = (staticProps: StaticProps) => {
         ...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
       });
     }
 
@@ -181,7 +182,7 @@ export const useExpansion = (staticProps: StaticProps) => {
       appendHandler('script', {
         ...standaloneJs,
         src: editorExtensions.prettier!.standaloneJs,
-        id: `${prefix}-prettier`
+        id: CDN_IDS.prettier
       });
     }
 
@@ -191,7 +192,7 @@ export const useExpansion = (staticProps: StaticProps) => {
       appendHandler('script', {
         ...parserMarkdownJs,
         src: editorExtensions.prettier!.parserMarkdownJs,
-        id: `${prefix}-prettierMD`
+        id: CDN_IDS.prettierMD
       });
     }
   }, [noPrettier, noUploadImg]);

diff --git a/packages/MdEditor/layouts/Content/hooks/useHighlight.ts b/packages/MdEditor/layouts/Content/hooks/useHighlight.ts
@@ -1,7 +1,8 @@
 import { useContext, useEffect, useRef, useState } from 'react';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
 import { EditorContext } from '~/context';
 import { appendHandler, updateHandler } from '~/utils/dom';
+import { CDN_IDS } from '~/static';
 import { ContentPreviewProps } from '../props';
 
 /**
@@ -25,7 +26,7 @@ const useHighlight = (props: ContentPreviewProps) => {
     updateHandler('link', {
       ...highlight.css,
       rel: 'stylesheet',
-      id: `${prefix}-hlCss`
+      id: CDN_IDS.hlcss
     });
   }, [highlight.css, props.noHighlight]);
 
@@ -39,7 +40,7 @@ const useHighlight = (props: ContentPreviewProps) => {
       'script',
       {
         ...highlight.js,
-        id: `${prefix}-hljs`,
+        id: CDN_IDS.hljs,
         onload() {
           hljsRef.current = window.hljs;
           setHljsInited(true);

diff --git a/packages/MdEditor/layouts/Content/hooks/useKatex.ts b/packages/MdEditor/layouts/Content/hooks/useKatex.ts
@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
 import { appendHandler } from '~/utils/dom';
+import { CDN_IDS } from '~~/MdEditor/static';
+
 import { ContentPreviewProps } from '../props';
 
 /**
@@ -27,7 +29,7 @@ const useKatex = (props: ContentPreviewProps) => {
       'script',
       {
         src: editorExtensions.katex!.js,
-        id: `${prefix}-katex`,
+        id: CDN_IDS.katexjs,
         onload() {
           katexRef.current = window.katex;
           setKatexInited(true);
@@ -38,7 +40,7 @@ const useKatex = (props: ContentPreviewProps) => {
     appendHandler('link', {
       rel: 'stylesheet',
       href: editorExtensions.katex!.css,
-      id: `${prefix}-katexCss`
+      id: CDN_IDS.katexcss
     });
   }, [props.noKatex]);
 

diff --git a/packages/MdEditor/layouts/Content/hooks/useMarkdownIt.ts b/packages/MdEditor/layouts/Content/hooks/useMarkdownIt.ts
@@ -28,7 +28,6 @@ import KatexPlugin from '../markdownIt/katex';
 import AdmonitionPlugin from '../markdownIt/admonition';
 import HeadingPlugin from '../markdownIt/heading';
 import CodePlugin from '../markdownIt/code';
-import XSSPlugin from '../markdownIt/xss';
 import TaskListPlugin from '../markdownIt/task';
 import { ContentPreviewProps } from '../props';
 
@@ -137,11 +136,6 @@ const useMarkdownIt = (props: ContentPreviewProps, previewOnly: boolean) => {
           customIconRef
         }
       },
-      {
-        type: 'xss',
-        plugin: XSSPlugin,
-        options: {}
-      },
       {
         type: 'sub',
         plugin: SubPlugin,

diff --git a/packages/MdEditor/layouts/Content/hooks/useMermaid.ts b/packages/MdEditor/layouts/Content/hooks/useMermaid.ts
@@ -4,6 +4,7 @@ import { prefix, configOption } from '~/config';
 import { EditorContext } from '~/context';
 import { appendHandler } from '~/utils/dom';
 import { mermaidCache } from '~/utils/cache';
+import { CDN_IDS } from '~~/MdEditor/static';
 
 import { ContentPreviewProps } from '../props';
 
@@ -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.current = window.mermaid;
             configMermaid();

diff --git a/packages/MdEditor/layouts/Content/hooks/useResize.ts b/packages/MdEditor/layouts/Content/hooks/useResize.ts
@@ -9,11 +9,11 @@ const useResize = (
   resizeRef: RefObject<HTMLDivElement>
 ) => {
   const [inputWrapperStyle, setInputWrapperStyle] = useState<CSSProperties>({
-    width: props.inputBoxWitdh
+    width: props.inputBoxWidth
   });
 
   const [resizeOperateStyle, setResizeOperateStyle] = useState<CSSProperties>({
-    left: props.inputBoxWitdh
+    left: props.inputBoxWidth
   });
 
   /**
@@ -25,7 +25,7 @@ const useResize = (
     props.setting.preview || props.setting.htmlPreview
   );
 
-  const resizedWidth = useRef<string | number | undefined>(props.inputBoxWitdh);
+  const resizedWidth = useRef<string | number | undefined>(props.inputBoxWidth);
 
   useEffect(() => {
     // 挂载后计算宽度的数值
@@ -60,7 +60,7 @@ const useResize = (
       });
 
       resizedWidth.current = ibw;
-      props.onInputBoxWitdhChange?.(ibw);
+      props.onInputBoxWidthChange?.(ibw);
     };
 
     const resizeMousedown = () => {
@@ -92,23 +92,23 @@ const useResize = (
   }, [contentRef, props, resizeRef]);
 
   useEffect(() => {
-    if (props.inputBoxWitdh) {
-      resizedWidth.current = props.inputBoxWitdh;
+    if (props.inputBoxWidth) {
+      resizedWidth.current = props.inputBoxWidth;
       setInputWrapperStyle((prevState) => {
         return {
           ...prevState,
-          width: props.inputBoxWitdh
+          width: props.inputBoxWidth
         };
       });
 
       setResizeOperateStyle((prevState) => {
         return {
           ...prevState,
-          left: props.inputBoxWitdh
+          left: props.inputBoxWidth
         };
       });
     }
-  }, [props.inputBoxWitdh]);
+  }, [props.inputBoxWidth]);
 
   useEffect(() => {
     const po = props.setting.previewOnly;

diff --git a/packages/MdEditor/layouts/Content/markdownIt/xss/index.ts b/packages/MdEditor/layouts/Content/markdownIt/xss/index.ts
@@ -34,7 +34,7 @@ const MdWhiteList: xss.IFilterXSSOptions['whiteList'] = {
   ]
 };
 
-const XSSPlugin = (md: markdownit, options: XSSPluginType) => {
+export const XSSPlugin = (md: markdownit, options: XSSPluginType) => {
   const { extendedWhiteList = {}, xss: xssOption = {} } = options;
   let xssIns: xss.FilterXSS;
 
@@ -87,5 +87,3 @@ const XSSPlugin = (md: markdownit, options: XSSPluginType) => {
     }
   });
 };
-
-export default XSSPlugin;
diff --git a/packages/MdEditor/layouts/Content/props.ts b/packages/MdEditor/layouts/Content/props.ts
@@ -49,8 +49,8 @@ export type ContentProps = Readonly<
      * @returns
      */
     onDrop?: (event: DragEvent) => void;
-    inputBoxWitdh: string;
-    onInputBoxWitdhChange?: (width: string) => void;
+    inputBoxWidth: string;
+    onInputBoxWidthChange?: (width: string) => void;
     transformImgUrl: (text: string) => string | Promise<string>;
   } & ContentPreviewProps
 >;
diff --git a/packages/MdEditor/layouts/Toolbar/hooks.ts b/packages/MdEditor/layouts/Toolbar/hooks.ts
@@ -1,5 +1,5 @@
 import { RefObject, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
 import { EditorContext } from '~/context';
 import { appendHandler } from '~/utils/dom';
 import { ToolDirective } from '~/utils/content-help';
@@ -10,6 +10,7 @@ import {
   UPLOAD_IMAGE
 } from '~/static/event-name';
 import bus from '~/utils/event-bus';
+import { CDN_IDS } from '~/static';
 
 import { ToolbarProps } from './';
 import { HoverData } from './TableShape';
@@ -69,7 +70,7 @@ export const useSreenfull = (props: ToolbarProps) => {
           {
             ...editorExtensionsAttrs.screenfull?.js,
             src: editorExtensions.screenfull!.js,
-            id: `${prefix}-screenfull`,
+            id: CDN_IDS.screenfull,
             onload() {
               // 复制实例
               screenfull.current = window.screenfull;

diff --git a/packages/MdEditor/layouts/Toolbar/index.tsx b/packages/MdEditor/layouts/Toolbar/index.tsx
@@ -1081,7 +1081,31 @@ const Toolbar = (props: ToolbarProps) => {
     },
     [
       props,
-      ult.toolbarTips,
+      ult.toolbarTips?.bold,
+      ult.toolbarTips?.underline,
+      ult.toolbarTips?.italic,
+      ult.toolbarTips?.strikeThrough,
+      ult.toolbarTips?.sub,
+      ult.toolbarTips?.sup,
+      ult.toolbarTips?.quote,
+      ult.toolbarTips?.unorderedList,
+      ult.toolbarTips?.orderedList,
+      ult.toolbarTips?.task,
+      ult.toolbarTips?.codeRow,
+      ult.toolbarTips?.code,
+      ult.toolbarTips?.link,
+      ult.toolbarTips?.image,
+      ult.toolbarTips?.revoke,
+      ult.toolbarTips?.next,
+      ult.toolbarTips?.save,
+      ult.toolbarTips?.prettier,
+      ult.toolbarTips?.pageFullscreen,
+      ult.toolbarTips?.fullscreen,
+      ult.toolbarTips?.catalog,
+      ult.toolbarTips?.preview,
+      ult.toolbarTips?.previewOnly,
+      ult.toolbarTips?.htmlPreview,
+      ult.toolbarTips?.github,
       emitHandler,
       TitleDropdown,
       setModalData,
@@ -1094,8 +1118,9 @@ const Toolbar = (props: ToolbarProps) => {
       MermaidDropdown,
       KatexDropdown,
       theme,
-      language,
-      previewTheme
+      codeTheme,
+      previewTheme,
+      language
     ]
   );
 

diff --git a/packages/MdEditor/static/index.ts b/packages/MdEditor/static/index.ts
@@ -0,0 +1,15 @@
+import { prefix } from '../config';
+
+export const CDN_IDS: Record<string, string> = {
+  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`
+};
diff --git a/packages/MdEditor/type.ts b/packages/MdEditor/type.ts
@@ -471,11 +471,11 @@ export interface EditorProps extends MdPreviewProps {
    *
    * @example '100px'/'50%'
    */
-  inputBoxWitdh?: string;
+  inputBoxWidth?: string;
   /**
    * 输入框宽度变化事件
    */
-  onInputBoxWitdhChange?: (width: string) => void;
+  onInputBoxWidthChange?: (width: string) => void;
   /**
    * 替换粘贴的图片链接
    *

diff --git a/packages/index.ts b/packages/index.ts
@@ -9,6 +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 '~/layouts/Content/markdownIt/xss';
 export * from './config';
+export * from './util';
 
 export * from '~/type';
diff --git a/packages/util.ts b/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();
+    }
+  });
+};