Merge branch 'develop' into beta

imzbf · Jun 12, 2024 · 304559b · 304559b
2 parents 1f7e29e + 88f0a8e
commit 304559b
Show file tree

Hide file tree

Showing 11 changed files with 403 additions and 142 deletions.
diff --git a/dev/Preview/index.tsx b/dev/Preview/index.tsx
@@ -7,8 +7,7 @@ import {
   MdCatalog,
   config,
   ExposeParam,
-  editorExtensionsAttrs,
-  StrIcon
+  editorExtensionsAttrs
 } from '~~/index';
 
 // import Editor from '../../lib/md-editor-rt.es';
@@ -335,25 +334,27 @@ export default ({ theme, previewTheme, codeTheme, lang }: PreviewProp) => {
           //   );
           // }}
           // noImgZoomIn
-          customIcon={{
-            // bold: {
-            //   component: 'A',
-            //   props: {}
-            // },
-            copy: StrIcon('copy', {}) // '<i class="fa fa-car"></i>',
-            // preview: {
-            //   component: '<i class="fa fa-car"></i>',
-            //   props: {
-            //     name: 'copy'
-            //   }
-            // },
-            // github: {
-            //   component: Icon,
-            //   props: {
-            //     name: 'italic'
-            //   }
-            // }
-          }}
+          customIcon={
+            {
+              // bold: {
+              //   component: 'A',
+              //   props: {}
+              // },
+              // copy: StrIcon('copy', {}) // '<i class="fa fa-car"></i>',
+              // preview: {
+              //   component: '<i class="fa fa-car"></i>',
+              //   props: {
+              //     name: 'copy'
+              //   }
+              // },
+              // github: {
+              //   component: Icon,
+              //   props: {
+              //     name: 'italic'
+              //   }
+              // }
+            }
+          }
           inputBoxWitdh={md.inputBoxWitdh}
           onInputBoxWitdhChange={(w) => {
             md.inputBoxWitdh = w;

diff --git a/dev/SecEditor.tsx b/dev/SecEditor.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { MdEditor } from '~~/index';
+import { MdEditor, StrIcon } from '~~/index';
 import data from './data.md';
 
 export default () => {
@@ -11,6 +11,9 @@ export default () => {
         modelValue={text}
         onChange={setText}
         scrollAuto={false}
+        customIcon={{
+          copy: StrIcon('copy', {}) // '<i class="fa fa-car"></i>',
+        }}
         // onDrop={(e) => {
         //   console.log('ee', e);
         // }}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-editor-rt",
-  "version": "4.16.0-0",
+  "version": "4.16.7",
   "license": "MIT",
   "keywords": [
     "react",
@@ -40,7 +40,7 @@
   ],
   "scripts": {
     "dev": "tsx ./scripts/dev",
-    "build": "tsc && tsx ./scripts/build"
+    "build": "tsx ./scripts/build"
   },
   "dependencies": {
     "@codemirror/lang-markdown": "^6.2.5",
@@ -67,7 +67,7 @@
     "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
-    "@vavt/markdown-theme": "^4.1.0",
+    "@vavt/markdown-theme": "^4.1.1",
     "@vavt/vite-plugin-import-markdown": "^1.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.6.7",
@@ -84,6 +84,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "screenfull": "^6.0.2",
+    "tsc-alias": "^1.8.10",
     "tsx": "^4.7.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",

diff --git a/packages/MdEditor/layouts/Content/hooks/useMarkdownIt.ts b/packages/MdEditor/layouts/Content/hooks/useMarkdownIt.ts
@@ -67,6 +67,16 @@ const useMarkdownIt = (props: ContentPreviewProps, previewOnly: boolean) => {
     themeRef.current = theme;
   }, [theme]);
 
+  const usedLanguageTextRef = useRef(usedLanguageText);
+  useEffect(() => {
+    usedLanguageTextRef.current = usedLanguageText;
+  }, [usedLanguageText]);
+
+  const customIconRef = useRef(customIcon);
+  useEffect(() => {
+    customIconRef.current = customIcon;
+  }, [customIcon]);
+
   const { hljsRef, hljsInited } = useHighlight(props);
   const { katexRef, katexInited } = useKatex(props);
   const { reRender, replaceMermaid } = useMermaid(props);
@@ -108,11 +118,11 @@ const useMarkdownIt = (props: ContentPreviewProps, previewOnly: boolean) => {
         plugin: CodePlugin,
         options: {
           editorId,
-          usedLanguageText,
+          usedLanguageTextRef,
           // showCodeRowNumber,
           codeFoldable,
           autoFoldThreshold,
-          customIcon
+          customIconRef
         }
       },
       {

diff --git a/packages/MdEditor/layouts/Content/hooks/useResize.ts b/packages/MdEditor/layouts/Content/hooks/useResize.ts
@@ -84,6 +84,7 @@ const useResize = (
 
   useEffect(() => {
     if (props.inputBoxWitdh) {
+      resizedWidth.current = props.inputBoxWitdh;
       setInputWrapperStyle((prevState) => {
         return {
           ...prevState,

diff --git a/packages/MdEditor/layouts/Content/markdownIt/code/index.ts b/packages/MdEditor/layouts/Content/markdownIt/code/index.ts
@@ -6,6 +6,7 @@
  * 源码如果在页面中存在多个编辑器，但是内容又是相同的时候，第二个开始的内容有点混乱
  * 需要与编辑器的editorId绑定
  */
+import { RefObject } from 'react';
 import markdownit, { Renderer, Token } from 'markdown-it';
 import { CustomIcon, StaticTextDefaultValue } from '~/type';
 import { prefix } from '~/config';
@@ -14,10 +15,10 @@ import StrIcon from '~/components/Icon/Str';
 
 export interface CodeTabsPluginOps extends markdownit.Options {
   editorId: string;
-  usedLanguageText: StaticTextDefaultValue;
+  usedLanguageTextRef: RefObject<StaticTextDefaultValue>;
   codeFoldable: boolean;
   autoFoldThreshold: number;
-  customIcon: CustomIcon;
+  customIconRef: RefObject<CustomIcon>;
 }
 
 const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
@@ -64,9 +65,11 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
       return '';
     }
 
-    const codeCodeText = _opts.usedLanguageText.copyCode!.text;
-    const copyBtnHtml = _opts.customIcon.copy || codeCodeText;
-    const isIcon = !!_opts.customIcon.copy;
+    const codeCodeText = _opts.usedLanguageTextRef.current!.copyCode!.text;
+    const copyBtnHtml = _opts.customIconRef.current!.copy || codeCodeText;
+    const isIcon = !!_opts.customIconRef.current!.copy;
+
+    const collapseTips = `<span class="${prefix}-collapse-tips">${StrIcon('collapse-tips', _opts.customIconRef.current!)}</span>`;
 
     const [GROUP] = getGroupAndTab(tokens[idx]);
     if (GROUP === null) {
@@ -91,7 +94,7 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
           <div class="${prefix}-code-action">
           <span class="${prefix}-code-lang">${tokens[idx].info.trim()}</span>
           <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}">${copyBtnHtml}</span>
-          <span class="${prefix}-collapse-tips">${StrIcon('collapse-tips', _opts.customIcon)}</span>
+          ${tagContainer === 'details' ? collapseTips : ''}
         </div>
         </${tagHeader}>${codeRendered}</${tagContainer}>`;
     }
@@ -148,7 +151,7 @@ const codetabs = (md: markdownit, _opts: CodeTabsPluginOps) => {
         <div class="${prefix}-code-action">
           <span class="${prefix}-codetab-lang">${langs}</span>
           <span class="${prefix}-copy-button" data-tips="${codeCodeText}"${isIcon ? ' data-is-icon=true' : ''}">${copyBtnHtml}</span>
-          <span class="${prefix}-collapse-tips">${StrIcon('collapse-tips', _opts.customIcon)}</span>
+          ${tagContainer === 'details' ? collapseTips : ''}
         </div>
       </${tagHeader}>${pres}</${tagContainer}>`;
   };