Merge branch 'develop' into beta

imzbf · Jun 4, 2024 · f1c2714 · f1c2714
2 parents 88b1d11 + bf9a986
commit f1c2714
Show file tree

Hide file tree

Showing 28 changed files with 362 additions and 274 deletions.
diff --git a/README-CN.md b/README-CN.md
@@ -45,6 +45,10 @@ yarn add @vavt/rt-extension
 
 ## 💡 用法
 
+当使用服务端渲染时，请务必设置`editorId`为固定值。
+
+从`v4.0.0`开始，内部组件支持按需引用。
+
 ### ✍🏻 编辑器模式
 
 ```jsx
@@ -58,10 +62,6 @@ export default () => {
 };
 ```
 
-> 从`v4.0.0`开始，内部组件支持按需引用。
-
-> 如果页面存在多个编辑器，请给组件设置不相同的`editorId`。
-
 ### 📖 仅预览模式
 
 ```jsx
@@ -84,6 +84,8 @@ export default () => {
 };
 ```
 
+当使用服务端渲染时，`scrollElement`应该是字符类型，例：`body`、`#id`、`.class`。
+
 ## 🗺 预览图
 
 | 默认模式 | 暗黑模式 | 仅预览 |
@@ -103,17 +105,17 @@ export default () => {
 | modelValue | `string` | '' | md 编辑内容 |
 | theme | `light \| dark` | 'light' | 主题切换 |
 | className | `string` | '' | 编辑器类名 |
+| style | `string \| CSSProperties` | {} | 编辑器内联样式 |
 | language | `string` | 'zh-CN' | 内置中英文('zh-CN','en-US')，可自行扩展其他语言，同时可覆盖内置的中英文 |
-| editorId | `string` | 'md-editor-rt' | 编辑器唯一标识，非必须项，当相同页面存在两个编辑器时，请务必区别该属性 |
-| showCodeRowNumber | `boolean` | false | 代码块是否显示行号 |
+| editorId | `string` | 'md-editor-rt\_[\d]' | 编辑器唯一标识，默认数字累加，当使用服务端渲染时，请务必设置该属性为固定值 |
+| showCodeRowNumber | `boolean` | true | 代码块是否显示行号 |
 | previewTheme | `'default' \| 'github' \| 'vuepress' \| 'mk-cute' \| 'smart-blue' \| 'cyanosis'` | 'default' | 预览内容主题，自定义主题规则见下方 |
-| style | `string \| CSSProperties` | {} | 编辑器内联样式 |
 | noMermaid | `boolean` | false | 如果你不希望使用图表展示内容，可以设置关闭 |
 | noKatex | `boolean` | false | 不使用 katex 展示数学公式 |
 | codeTheme | `'atom' \| 'a11y' \| 'github' \| 'gradient' \| 'kimbie' \| 'paraiso' \| 'qtcreator' \| 'stackoverflow'` | 'atom' | 代码块 highlight 样式名称，扩展更多见下方 |
 | mdHeadingId | `(text: string, level: number, index: number) => string` | (text) => text | 标题`ID`计算方式 |
-| sanitize | `(html: string) => string` | (html) => html | 通过该方法移除危险内容，比如 xss 相关。3.x 以后已内置危险代码处理，非特殊需求请勿使用该属性 |
-| noIconfont | `boolean` | false | 不插入 iconfont 链接，你可以下载[SVG 版](https://at.alicdn.com/t/c/font_2605852_prouiefeic.js)或[Font Class 版](https://at.alicdn.com/t/c/font_2605852_prouiefeic.css)到本地自行引入 |
+| sanitize | `(html: string) => string` | (html) => html | 通过该属性修改编译后的html内容 |
+| noIconfont | `boolean` | false | 不插入 iconfont 链接，你可以下载[SVG 版](https://at.alicdn.com/t/c/font_2605852_d06wmn2c1od.js)或[Font Class 版](https://at.alicdn.com/t/c/font_2605852_d06wmn2c1od.css)到本地自行引入 |
 | formatCopiedText | `(text: string) => string` | (text: string) => text | 格式化复制代码 |
 | codeStyleReverse | `boolean` | true | 代码块为暗色背景的预览主题，将代码风格设置为暗色风格 |
 | codeStyleReverseList | `Array<string>` | ['default', 'mk-cute'] | 代码块为暗色背景的预览主题 |

diff --git a/README.md b/README.md
@@ -48,6 +48,10 @@ For more ways to use or contribute, please refer to: [md-editor-extension](https
 
 ## 💡 Usage
 
+When using server-side rendering, make sure to set `editorId` to a constant value.
+
+Starting from `4.0.0`, internal components can be imported on-demand.
+
 ### ✍🏻 Display Editor
 
 ```jsx
@@ -61,10 +65,6 @@ export default () => {
 };
 ```
 
-> `^4.0.0`, internal components can be imported on-demand.
-
-> If there are multiple editors on the page, please set different `editorId` for each editor!
-
 ### 📖 Preview Only
 
 ```jsx
@@ -87,6 +87,8 @@ export default () => {
 };
 ```
 
+When using server-side rendering, `scrollElement` should be of string type, eg: `body`, `#id`, `.class`.
+
 ## 🗺 Preview
 
 | Default theme | Dark theme | Preview only |
@@ -106,17 +108,17 @@ Inputing prompt and mark, emoji extensions
 | modelValue | `string` | '' | Markdown content |
 | theme | `'light' \| 'dark'` | 'light' | Editor theme |
 | className | `string` | '' |  |
+| style | `CSSProperties` | {} | Editor inline style |
 | language | `string` | 'zh-CN' | Build-in language('zh-CN','en-US') |
-| editorId | `string` | 'md-editor-rt' | Editor id, it is used when there are more than two editors in the same page |
-| showCodeRowNumber | `boolean` | false | Show row number for code block or not |
+| editorId | `string` | 'md-editor-rt\_[\d]' | Editor's id, default incrementing by number. When using server-side rendering, make sure to set this attribute to a constant value |
+| showCodeRowNumber | `boolean` | true | Show row number for code block or not |
 | previewTheme | `'default' \| 'github' \| 'vuepress' \| 'mk-cute' \| 'smart-blue' \| 'cyanosis'` | 'default' | Preview theme, can be customized |
-| style | `CSSProperties` | {} | Editor inline style |
 | noMermaid | `boolean` | false | Use mermaid or not |
 | noKatex | `boolean` | false | Use katex or not |
 | codeTheme | `'atom' \| 'a11y' \| 'github' \| 'gradient' \| 'kimbie' \| 'paraiso' \| 'qtcreator' \| 'stackoverflow'` | 'atom' | Highlight code style, can be customized also |
 | mdHeadingId | `(text: string, level: number, index: number) => string` | (text) => text | H1-H6 `ID` generator |
-| sanitize | `(html: string) => string` | (html) => html | Sanitize the html, prevent XSS. After 3.x, dangerous code has been processed by default. Please do not use this attribute unless there are special requirements |
-| noIconfont | `boolean` | false | Not append iconfont script, download different versions [SVG](https://at.alicdn.com/t/c/font_2605852_prouiefeic.js)或[Font Class](https://at.alicdn.com/t/c/font_2605852_prouiefeic.css) and import it by yourself |
+| sanitize | `(html: string) => string` | (html) => html | This attribute is used to alter the compiled HTML content |
+| noIconfont | `boolean` | false | Not append iconfont script, download different versions [SVG](https://at.alicdn.com/t/c/font_2605852_d06wmn2c1od.js)或[Font Class](https://at.alicdn.com/t/c/font_2605852_d06wmn2c1od.css) and import it by yourself |
 | formatCopiedText | `(text: string) => string` | (text: string) => text | Format copied code |
 | codeStyleReverse | `boolean` | true | Code style will be reversed to dark while code block of the theme has a dark background |
 | codeStyleReverseList | `Array<string>` | ['default', 'mk-cute'] | Themes to be reversed |

diff --git a/dev/Preview/index.tsx b/dev/Preview/index.tsx
@@ -7,7 +7,8 @@ import {
   MdCatalog,
   config,
   ExposeParam,
-  editorExtensionsAttrs
+  editorExtensionsAttrs,
+  StrIcon
 } from '~~/index';
 
 // import Editor from '../../lib/md-editor-rt.es';
@@ -299,7 +300,7 @@ export default ({ theme, previewTheme, codeTheme, lang }: PreviewProp) => {
           // toolbarsExclude={['github']}
           // noPrettier
           // tabWidth={4}
-          showCodeRowNumber
+          // showCodeRowNumber
           // tableShape={[10, 10]}
           // noMermaid
           // placeholder="placeholder"
@@ -316,7 +317,9 @@ export default ({ theme, previewTheme, codeTheme, lang }: PreviewProp) => {
           // maxLength={10}
           // noHighlight
           // autoDetectCode
-          // onHtmlChanged={console.log}
+          // onHtmlChanged={(html: string) => {
+          //   console.log(html);
+          // }}
           // onBlur={console.log}
           // onFocus={console.log}
           // showToolbarName
@@ -332,25 +335,25 @@ export default ({ theme, previewTheme, codeTheme, lang }: PreviewProp) => {
           //   );
           // }}
           // noImgZoomIn
-          // customIcon={{
-          //   bold: {
-          //     component: 'A',
-          //     props: {}
-          //   },
-          //   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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-editor-rt",
-  "version": "4.15.1-5",
+  "version": "4.15.5",
   "license": "MIT",
   "keywords": [
     "react",
@@ -53,9 +53,9 @@
     "markdown-it": "^14.0.0",
     "markdown-it-image-figures": "^2.1.1",
     "markdown-it-task-lists": "^2.1.1",
-    "markdown-it-xss": "^1.0.2",
     "medium-zoom": "^1.1.0",
-    "punycode": "^2.3.1"
+    "punycode": "^2.3.1",
+    "xss": "^1.0.15"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
@@ -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.0.3",
+    "@vavt/markdown-theme": "^4.1.0",
     "@vavt/vite-plugin-import-markdown": "^1.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.6.7",

diff --git a/packages/MdEditor/components/Icon/Icon.tsx b/packages/MdEditor/components/Icon/Icon.tsx
@@ -35,7 +35,8 @@ export type IconName =
   | 'formula'
   | 'close'
   | 'delete'
-  | 'upload';
+  | 'upload'
+  | 'collapse-tips';
 
 const Icon = (props: { name: IconName }) => {
   return configOption.iconfontType === 'svg' ? (

diff --git a/packages/MdEditor/components/Icon/Str.ts b/packages/MdEditor/components/Icon/Str.ts
@@ -1,7 +1,7 @@
 import { prefix, configOption } from '~/config';
 import { CustomIcon } from '~/type';
 
-const StrIcon = (name: 'copy', customIcon: CustomIcon): string => {
+const StrIcon = (name: 'copy' | 'collapse-tips', customIcon: CustomIcon): string => {
   if (typeof customIcon[name] === 'string') {
     return customIcon[name] as string;
   }

diff --git a/packages/MdEditor/config.ts b/packages/MdEditor/config.ts
@@ -14,8 +14,8 @@ export const prefix = 'md-editor';
 export const defaultEditorId = 'md-editor-rt';
 
 // 字体链接
-export const iconfontSvgUrl = 'https://at.alicdn.com/t/c/font_2605852_rfu1p40qggh.js';
-export const iconfontClassUrl = 'https://at.alicdn.com/t/c/font_2605852_rfu1p40qggh.css';
+export const iconfontSvgUrl = 'https://at.alicdn.com/t/c/font_2605852_cmafimm6hot.js';
+export const iconfontClassUrl = 'https://at.alicdn.com/t/c/font_2605852_cmafimm6hot.css';
 
 export const cdnBase = 'https://cdnjs.cloudflare.com/ajax/libs';
 
@@ -300,7 +300,7 @@ export const defaultProps = {
   onHtmlChanged: () => {},
   onGetCatalog: () => {},
   tabWidth: 2,
-  showCodeRowNumber: false,
+  showCodeRowNumber: true,
   previewTheme: 'default',
   mdHeadingId: (text: string) => text,
   style: {},
@@ -465,11 +465,11 @@ export const editorExtensionsAttrs: ConfigOption['editorExtensionsAttrs'] = {
     }
   },
   iconfont: {
-    integrity: 'sha384-re+xpK8m5zCba6cD67TTpnI2Exr9m2LkD1LyD0wsKnETw00YWUOFOpuoPLrRDlgF',
+    integrity: 'sha384-HRrf1e8/EiqrIZQftejl7pMTeuLeYczOz7rolAGxgw86N7UjiXkex67Uf2XTZz5z',
     crossOrigin: 'anonymous'
   },
   iconfontClass: {
-    integrity: 'sha384-aM5RSsvQjertneee/Ntz1poyGMo3kWmIhBciGBibd5+pnaXBlZoMkLO4StM7tH10',
+    integrity: 'sha384-81pjilF/gLoQvAfd8madmeylVdv8IagPQaq1C/OZbysLav7k9g+Ir3XD5qK00Q5r',
     crossOrigin: 'anonymous'
   },
   screenfull: {