x-star-editor 0.2.4 → 0.2.6

package/dist/components/Toolbar.d.ts

@@ -7,7 +7,7 @@ interface ToolbarItemProps {
     popoverRender?: (exec: Executor, close: () => void) => React.ReactNode;
     onClick?: (exec: Executor) => void;
 }
-type ToolbarItem = ToolbarItemProps | Handler<ToolbarItemProps>;
+export type ToolbarItem = ToolbarItemProps | Handler<ToolbarItemProps>;
 export type ToolbarItemMap = Partial<Record<string, ToolbarItem>>;
 export declare const getDefaultToolbarItemMap: (locale?: string, onInsertFile?: ((file: File, options: {
     description: string;
@@ -18,8 +18,8 @@ export declare const getDefaultToolbarItems: () => ToolbarItems;
 interface ToolbarProps {
     className?: string;
     style?: React.CSSProperties;
-    itemMap: Partial<Record<string, ToolbarItem>>;
-    items: (string | ToolbarItem)[][];
+    itemMap: ToolbarItemMap;
+    items: ToolbarItems;
     exec: Executor;
 }
 declare const Toolbar: ({ className, style, itemMap, items, exec }: ToolbarProps) => React.JSX.Element;

package/dist/components/Toolbar.js

@@ -5,26 +5,30 @@ import React, { useEffect, useRef, useState } from 'react';
 import SvgBlockquote from "../icons/Blockquote";
 import SvgCode from "../icons/Code";
 import SvgDelete from "../icons/Delete";
+import SvgEditOnly from "../icons/EditOnly";
 import SvgEmphasis from "../icons/Emphasis";
 import SvgEnterFullscreen from "../icons/EnterFullscreen";
 import SvgExitFullscreen from "../icons/ExitFullscreen";
 import SvgHeading from "../icons/Heading";
+import SvgHelp from "../icons/Help";
 import SvgImage from "../icons/Image";
 import SvgInlineCode from "../icons/InlineCode";
 import SvgInlineMath from "../icons/InlineMath";
 import SvgLink from "../icons/Link";
 import SvgMath from "../icons/Math";
+import SvgMermaid from "../icons/Mermaid";
 import SvgOrderedList from "../icons/OrderedList";
 import SvgRedo from "../icons/Redo";
 import SvgStrong from "../icons/Strong";
 import SvgTable from "../icons/Table";
+import SvgTaskList from "../icons/TaskList";
 import SvgThematicBreak from "../icons/ThematicBreak";
 import SvgToHTML from "../icons/ToHtml";
 import SvgToMarkdown from "../icons/ToMarkdown";
 import SvgUndo from "../icons/Undo";
 import SvgUnorderedList from "../icons/UnorderedList";
+import SvgViewOnly from "../icons/ViewOnly";
 import { getFormat } from "../locales";
-import { createSelection } from "../utils/container";
 import { prefix } from "../utils/global";
 import { redoHandler, toggleHandler, undoHandler } from "../utils/handler";
 import { toHTML, toMarkdown } from "../utils/markdown";
@@ -131,13 +135,15 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('code'),
       popoverRender: function popoverRender(exec, close) {
-        var optionRender = function optionRender(label, language) {
+        var optionRender = function optionRender(label, lang) {
           return /*#__PURE__*/React.createElement("div", {
             className: classNames("".concat(prefix, "option")),
             onClick: function onClick() {
               exec(toggleHandler({
                 type: 'code',
-                language: language
+                lang: lang,
+                value: '',
+                showLineNumbers: true
               }));
               close();
             }
@@ -157,6 +163,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         }));
       }
     },
+    editOnly: {
+      children: /*#__PURE__*/React.createElement(SvgEditOnly, {
+        className: classNames("".concat(prefix, "icon"))
+      }),
+      tooltip: t('editOnly')
+    },
     emphasis: {
       children: /*#__PURE__*/React.createElement(SvgEmphasis, {
         className: classNames("".concat(prefix, "icon"))
@@ -200,6 +212,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender(1, '1.6em'), optionRender(2, '1.3em'), optionRender(3, '1.2em'), optionRender(4, '1.1em'), optionRender(5, '1em'), optionRender(6, '0.9em'));
       }
     },
+    help: {
+      children: /*#__PURE__*/React.createElement(SvgHelp, {
+        className: classNames("".concat(prefix, "icon"))
+      }),
+      tooltip: t('help')
+    },
     image: {
       children: /*#__PURE__*/React.createElement(SvgImage, {
         className: classNames("".concat(prefix, "icon"))
@@ -285,6 +303,20 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         }));
       }
     },
+    mermaid: {
+      children: /*#__PURE__*/React.createElement(SvgMermaid, {
+        className: classNames("".concat(prefix, "icon"))
+      }),
+      tooltip: t('mermaid'),
+      onClick: function onClick(exec) {
+        return exec(toggleHandler({
+          type: 'code',
+          lang: 'mermaid',
+          value: "flowchart TB\n    A --> C\n    A --> D\n    B --> C\n    B --> D",
+          showLineNumbers: false
+        }));
+      }
+    },
     orderedList: {
       children: /*#__PURE__*/React.createElement(SvgOrderedList, {
         className: classNames("".concat(prefix, "icon"))
@@ -321,6 +353,12 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       }),
       tooltip: t('table')
     },
+    taskList: {
+      children: /*#__PURE__*/React.createElement(SvgTaskList, {
+        className: classNames("".concat(prefix, "icon"))
+      }),
+      tooltip: t('taskList')
+    },
     thematicBreak: {
       children: /*#__PURE__*/React.createElement(SvgThematicBreak, {
         className: classNames("".concat(prefix, "icon"))
@@ -346,7 +384,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
             type: 'set',
             payload: {
               sourceCode: toHTML(sourceCode),
-              selection: createSelection(0)
+              selection: selection
             },
             selection: selection
           });
@@ -367,7 +405,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
             type: 'set',
             payload: {
               sourceCode: toMarkdown(sourceCode),
-              selection: createSelection(0)
+              selection: selection
             },
             selection: selection
           });
@@ -392,14 +430,20 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         className: classNames("".concat(prefix, "icon"))
       }),
       tooltip: t('unorderedList')
+    },
+    viewOnly: {
+      children: /*#__PURE__*/React.createElement(SvgViewOnly, {
+        className: classNames("".concat(prefix, "icon"))
+      }),
+      tooltip: t('viewOnly')
     }
   };
 };
 export var getDefaultToolbarItems = function getDefaultToolbarItems() {
-  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote'],
-  // ['table', 'orderedList', 'unorderedList'],
-  ['link', 'image'], ['inlineCode', 'code', 'inlineMath', 'math'], ['toMarkdown', 'toHTML'], ['undo', 'redo']
-  // ['fullscreen'],
+  return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote' /** 'table' */], ['link', 'image', 'mermaid'], ['inlineCode', 'code', 'inlineMath', 'math'], ['undo', 'redo'],
+  // ['orderedList', 'unorderedList', 'taskList'],
+  ['toMarkdown', 'toHTML']
+  // ['help', 'editOnly', 'viewOnly', 'fullscreen'],
   ];
 };
 

package/dist/icons/EditOnly.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+declare const SvgEditOnly: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgEditOnly;

package/dist/icons/EditOnly.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var SvgEditOnly = function SvgEditOnly(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: "M15.992 6.531h.916c.05 0 .092.05.092.11v10.718c0 .06-.041.11-.092.11h-.916c-.05 0-.092-.05-.092-.11V6.641c0-.06.041-.11.092-.11Zm-1.859 0c.255 0 .46.204.46.456v10.025a.458.458 0 0 1-.46.455H7.454a.458.458 0 0 1-.46-.455V6.987c0-.252.206-.456.46-.456h6.68ZM7.998 16.49h5.6v-9h-5.6v9Z"
+  }));
+};
+export default SvgEditOnly;

package/dist/icons/Help.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+declare const SvgHelp: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgHelp;

package/dist/icons/Help.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var SvgHelp = function SvgHelp(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    transform: "translate(5 5)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: 10,
+    height: 10,
+    x: 2,
+    y: 2,
+    stroke: "currentColor",
+    rx: 1
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: "M8.526 4.33A2.305 2.305 0 0 0 7 3.773c-.574 0-1.116.199-1.526.557a1.864 1.864 0 0 0-.662 1.412v.104c0 .06.05.11.11.11h.656c.06 0 .11-.05.11-.11v-.104c0-.603.589-1.094 1.312-1.094.723 0 1.313.491 1.313 1.094 0 .425-.301.815-.767.994a1.528 1.528 0 0 0-.985 1.447v.294c0 .06.05.109.11.109h.656c.06 0 .11-.05.11-.11v-.31c0-.27.169-.515.422-.612.806-.31 1.327-1.022 1.327-1.812a1.858 1.858 0 0 0-.66-1.412Zm-2.073 5.678a.547.547 0 1 0 1.094 0 .547.547 0 0 0-1.094 0Z"
+  })));
+};
+export default SvgHelp;

package/dist/icons/Mermaid.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+declare const SvgMermaid: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgMermaid;

package/dist/icons/Mermaid.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var SvgMermaid = function SvgMermaid(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: "M16.936 13.576h-1.295v-1.894a.1.1 0 0 0-.1-.1h-3.09v-1.195h1.346a.2.2 0 0 0 .2-.2V6.6a.2.2 0 0 0-.2-.199h-3.588a.2.2 0 0 0-.2.2v3.587c0 .11.09.2.2.2h1.345v1.196h-3.09a.1.1 0 0 0-.099.1v1.893H7.069a.2.2 0 0 0-.199.2v3.587c0 .11.09.2.2.2h3.587a.2.2 0 0 0 .2-.2v-3.588a.2.2 0 0 0-.2-.199H9.262V12.48h5.482v1.096h-1.396a.2.2 0 0 0-.199.2v3.587c0 .11.09.2.2.2h3.587a.2.2 0 0 0 .2-.2v-3.588a.2.2 0 0 0-.2-.199Zm-7.026.947v2.093H7.817v-2.093H9.91Zm1.046-5.083V7.347h2.093V9.44h-2.093Zm5.233 7.176h-2.093v-2.093h2.093v2.093Z"
+  }));
+};
+export default SvgMermaid;

package/dist/icons/TaskList.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+declare const SvgTaskList: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgTaskList;

package/dist/icons/TaskList.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var SvgTaskList = function SvgTaskList(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: "M17.869 7.625H9.884a.11.11 0 0 0-.109.11V8.5c0 .06.05.11.11.11h7.984c.06 0 .11-.05.11-.11v-.766a.11.11 0 0 0-.11-.109ZM17.869 11.508H9.884a.11.11 0 0 0-.109.11v.765c0 .06.05.11.11.11h7.984c.06 0 .11-.05.11-.11v-.766a.11.11 0 0 0-.11-.11ZM17.869 15.39H9.884a.11.11 0 0 0-.109.11v.766c0 .06.05.109.11.109h7.984c.06 0 .11-.05.11-.11V15.5a.11.11 0 0 0-.11-.11Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "currentColor",
+    strokeLinecap: "square",
+    strokeLinejoin: "round",
+    strokeWidth: 0.75,
+    d: "m6.4 8.25.75.75 1.5-1.5M6.4 11.75l.75.75 1.5-1.5M6.4 15.75l.75.75 1.5-1.5"
+  })));
+};
+export default SvgTaskList;

package/dist/icons/ViewOnly.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+import React from 'react';
+declare const SvgViewOnly: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgViewOnly;

package/dist/icons/ViewOnly.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var SvgViewOnly = function SvgViewOnly(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    fillRule: "nonzero",
+    d: "M8.008 6.531h-.916c-.05 0-.092.05-.092.11v10.718c0 .06.041.11.092.11h.916c.05 0 .092-.05.092-.11V6.641c0-.06-.041-.11-.092-.11Zm1.859 0a.458.458 0 0 0-.46.456v10.025c0 .252.205.455.46.455h6.679c.254 0 .46-.203.46-.455V6.987a.458.458 0 0 0-.46-.456h-6.68Zm6.135 9.959h-5.6v-9h5.6v9Z"
+  }));
+};
+export default SvgViewOnly;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+export type { ToolbarItem } from './components/Toolbar';
 export { createSelection, getRange } from './utils/container';
 export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
-export type { Handler } from './utils/handler';
+export type { Executor, Handler, KeyboardEventHandler } from './utils/handler';
 export { toHTML, toMarkdown, toText } from './utils/markdown';
 export { default as XStarEditor, useEditorRef } from './x-star-editor';
 export type { XStarEditorHandle, XStarEditorProps } from './x-star-editor';

package/dist/locales/en_US.d.ts

@@ -11,24 +11,29 @@ declare const _default: {
         readonly blockquote: "Blockquote";
         readonly code: "Code Block";
         readonly delete: "Strikethrough";
+        readonly editOnly: "Edit Only";
         readonly emphasis: "Italic";
         readonly enterFullscreen: "Enter Fullscreen";
         readonly exitFullscreen: "Exit Fullscreen";
         readonly heading: "Heading";
+        readonly help: "Help";
         readonly image: "Image";
         readonly inlineCode: "Inline Code";
         readonly inlineMath: "Inline Formula";
         readonly link: "Link";
         readonly math: "Formula Block";
+        readonly mermaid: "Mermaid";
         readonly orderedList: "Ordered List";
         readonly redo: "Redo";
         readonly strong: "Bold";
         readonly table: "Table";
+        readonly taskList: "Task List";
         readonly thematicBreak: "Thematic Break";
         readonly toHTML: "To HTML";
         readonly toMarkdown: "To Markdown";
         readonly undo: "Undo";
         readonly unorderedList: "Unordered List";
+        readonly viewOnly: "View Only";
     };
 };
 export default _default;

package/dist/locales/en_US.js

@@ -11,23 +11,28 @@ export default {
     blockquote: 'Blockquote',
     code: 'Code Block',
     delete: 'Strikethrough',
+    editOnly: 'Edit Only',
     emphasis: 'Italic',
     enterFullscreen: 'Enter Fullscreen',
     exitFullscreen: 'Exit Fullscreen',
     heading: 'Heading',
+    help: 'Help',
     image: 'Image',
     inlineCode: 'Inline Code',
     inlineMath: 'Inline Formula',
     link: 'Link',
     math: 'Formula Block',
+    mermaid: 'Mermaid',
     orderedList: 'Ordered List',
     redo: 'Redo',
     strong: 'Bold',
     table: 'Table',
+    taskList: 'Task List',
     thematicBreak: 'Thematic Break',
     toHTML: 'To HTML',
     toMarkdown: 'To Markdown',
     undo: 'Undo',
-    unorderedList: 'Unordered List'
+    unorderedList: 'Unordered List',
+    viewOnly: 'View Only'
   }
 };

package/dist/locales/index.d.ts

@@ -22,24 +22,29 @@ export declare const useLocale: <T extends "fileInput" | "toolbarItem">(slice: T
             readonly blockquote: "引用";
             readonly code: "代码块";
             readonly delete: "删除线";
+            readonly editOnly: "仅编辑";
             readonly emphasis: "斜体";
             readonly enterFullscreen: "进入全屏";
             readonly exitFullscreen: "退出全屏";
             readonly heading: "标题";
+            readonly help: "帮助";
             readonly image: "图片";
             readonly inlineCode: "行内代码";
             readonly inlineMath: "行内公式";
             readonly link: "链接";
             readonly math: "公式块";
+            readonly mermaid: "Mermaid";
             readonly orderedList: "有序列表";
             readonly redo: "恢复";
             readonly strong: "粗体";
             readonly table: "表格";
+            readonly taskList: "任务列表";
             readonly thematicBreak: "分隔线";
             readonly toHTML: "转成 HTML";
             readonly toMarkdown: "转成 Markdown";
             readonly undo: "撤销";
             readonly unorderedList: "无序列表";
+            readonly viewOnly: "仅查看";
         };
     } | {
         readonly fileInput: {
@@ -54,24 +59,29 @@ export declare const useLocale: <T extends "fileInput" | "toolbarItem">(slice: T
             readonly blockquote: "Blockquote";
             readonly code: "Code Block";
             readonly delete: "Strikethrough";
+            readonly editOnly: "Edit Only";
             readonly emphasis: "Italic";
             readonly enterFullscreen: "Enter Fullscreen";
             readonly exitFullscreen: "Exit Fullscreen";
             readonly heading: "Heading";
+            readonly help: "Help";
             readonly image: "Image";
             readonly inlineCode: "Inline Code";
             readonly inlineMath: "Inline Formula";
             readonly link: "Link";
             readonly math: "Formula Block";
+            readonly mermaid: "Mermaid";
             readonly orderedList: "Ordered List";
             readonly redo: "Redo";
             readonly strong: "Bold";
             readonly table: "Table";
+            readonly taskList: "Task List";
             readonly thematicBreak: "Thematic Break";
             readonly toHTML: "To HTML";
             readonly toMarkdown: "To Markdown";
             readonly undo: "Undo";
             readonly unorderedList: "Unordered List";
+            readonly viewOnly: "View Only";
         };
     })[T][U];
 };
@@ -88,24 +98,29 @@ export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale:
         readonly blockquote: "引用";
         readonly code: "代码块";
         readonly delete: "删除线";
+        readonly editOnly: "仅编辑";
         readonly emphasis: "斜体";
         readonly enterFullscreen: "进入全屏";
         readonly exitFullscreen: "退出全屏";
         readonly heading: "标题";
+        readonly help: "帮助";
         readonly image: "图片";
         readonly inlineCode: "行内代码";
         readonly inlineMath: "行内公式";
         readonly link: "链接";
         readonly math: "公式块";
+        readonly mermaid: "Mermaid";
         readonly orderedList: "有序列表";
         readonly redo: "恢复";
         readonly strong: "粗体";
         readonly table: "表格";
+        readonly taskList: "任务列表";
         readonly thematicBreak: "分隔线";
         readonly toHTML: "转成 HTML";
         readonly toMarkdown: "转成 Markdown";
         readonly undo: "撤销";
         readonly unorderedList: "无序列表";
+        readonly viewOnly: "仅查看";
     };
 } | {
     readonly fileInput: {
@@ -120,24 +135,29 @@ export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale:
         readonly blockquote: "Blockquote";
         readonly code: "Code Block";
         readonly delete: "Strikethrough";
+        readonly editOnly: "Edit Only";
         readonly emphasis: "Italic";
         readonly enterFullscreen: "Enter Fullscreen";
         readonly exitFullscreen: "Exit Fullscreen";
         readonly heading: "Heading";
+        readonly help: "Help";
         readonly image: "Image";
         readonly inlineCode: "Inline Code";
         readonly inlineMath: "Inline Formula";
         readonly link: "Link";
         readonly math: "Formula Block";
+        readonly mermaid: "Mermaid";
         readonly orderedList: "Ordered List";
         readonly redo: "Redo";
         readonly strong: "Bold";
         readonly table: "Table";
+        readonly taskList: "Task List";
         readonly thematicBreak: "Thematic Break";
         readonly toHTML: "To HTML";
         readonly toMarkdown: "To Markdown";
         readonly undo: "Undo";
         readonly unorderedList: "Unordered List";
+        readonly viewOnly: "View Only";
     };
 })[T][U];
 export {};

package/dist/locales/zh_CN.d.ts

@@ -11,24 +11,29 @@ declare const _default: {
         readonly blockquote: "引用";
         readonly code: "代码块";
         readonly delete: "删除线";
+        readonly editOnly: "仅编辑";
         readonly emphasis: "斜体";
         readonly enterFullscreen: "进入全屏";
         readonly exitFullscreen: "退出全屏";
         readonly heading: "标题";
+        readonly help: "帮助";
         readonly image: "图片";
         readonly inlineCode: "行内代码";
         readonly inlineMath: "行内公式";
         readonly link: "链接";
         readonly math: "公式块";
+        readonly mermaid: "Mermaid";
         readonly orderedList: "有序列表";
         readonly redo: "恢复";
         readonly strong: "粗体";
         readonly table: "表格";
+        readonly taskList: "任务列表";
         readonly thematicBreak: "分隔线";
         readonly toHTML: "转成 HTML";
         readonly toMarkdown: "转成 Markdown";
         readonly undo: "撤销";
         readonly unorderedList: "无序列表";
+        readonly viewOnly: "仅查看";
     };
 };
 export default _default;

package/dist/locales/zh_CN.js

@@ -11,23 +11,28 @@ export default {
     blockquote: '引用',
     code: '代码块',
     delete: '删除线',
+    editOnly: '仅编辑',
     emphasis: '斜体',
     enterFullscreen: '进入全屏',
     exitFullscreen: '退出全屏',
     heading: '标题',
+    help: '帮助',
     image: '图片',
     inlineCode: '行内代码',
     inlineMath: '行内公式',
     link: '链接',
     math: '公式块',
+    mermaid: 'Mermaid',
     orderedList: '有序列表',
     redo: '恢复',
     strong: '粗体',
     table: '表格',
+    taskList: '任务列表',
     thematicBreak: '分隔线',
     toHTML: '转成 HTML',
     toMarkdown: '转成 Markdown',
     undo: '撤销',
-    unorderedList: '无序列表'
+    unorderedList: '无序列表',
+    viewOnly: '仅查看'
   }
 };

package/dist/utils/container.js

@@ -141,28 +141,28 @@ export var useContainer = function useContainer(ref) {
     /**
      * 将一棵 DOM 树更新为另一棵 DOM 树
      *
-     * @param newNode 新节点
      * @param oldNode 旧节点
+     * @param newNode 新节点
      */
-    var diff = function diff(newNode, oldNode) {
-      var newChild = newNode.firstChild;
+    var diff = function diff(oldNode, newNode) {
       var oldChild = oldNode.firstChild;
+      var newChild = newNode.firstChild;
 
       // 依次更新子节点
-      for (; newChild && oldChild;) {
-        var newNext = newChild.nextSibling;
+      for (; oldChild && newChild;) {
         var oldNext = oldChild.nextSibling;
-        if (newChild.nodeName !== oldChild.nodeName) {
+        var newNext = newChild.nextSibling;
+        if (oldChild.nodeName !== newChild.nodeName) {
           // 节点名称不同，直接替换
           oldChild.replaceWith(newChild);
-        } else if (newChild.nodeType === Node.TEXT_NODE) {
+        } else if (oldChild.nodeType === Node.TEXT_NODE) {
           // 节点均为文本类型，更新文本内容
-          if (newChild.nodeValue !== oldChild.nodeValue) {
+          if (oldChild.nodeValue !== newChild.nodeValue) {
             oldChild.nodeValue = newChild.nodeValue;
           }
         } else {
           // 节点名称相同，更新属性和子节点
-          if (newChild instanceof HTMLElement && oldChild instanceof HTMLElement) {
+          if (oldChild instanceof HTMLElement && newChild instanceof HTMLElement) {
             var _iterator = _createForOfIteratorHelper(oldChild.getAttributeNames()),
               _step;
             try {
@@ -183,9 +183,9 @@ export var useContainer = function useContainer(ref) {
             try {
               for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
                 var newAttrName = _step2.value;
-                var newAttrValue = newChild.getAttribute(newAttrName);
                 var oldAttrValue = oldChild.getAttribute(newAttrName);
-                if (newAttrValue !== null && newAttrValue !== oldAttrValue) {
+                var newAttrValue = newChild.getAttribute(newAttrName);
+                if (oldAttrValue !== newAttrValue && newAttrValue !== null) {
                   oldChild.setAttribute(newAttrName, newAttrValue);
                 }
               }
@@ -195,10 +195,10 @@ export var useContainer = function useContainer(ref) {
               _iterator2.f();
             }
           }
-          diff(newChild, oldChild);
+          diff(oldChild, newChild);
         }
-        newChild = newNext;
         oldChild = oldNext;
+        newChild = newNext;
       }
 
       // 移除节点
@@ -215,7 +215,7 @@ export var useContainer = function useContainer(ref) {
         newChild = _newNext;
       }
     };
-    diff(editorRender(text), ref.current);
+    diff(ref.current, editorRender(text));
   };
 
   /**

package/dist/utils/history.d.ts

@@ -28,7 +28,9 @@ export interface ToggleAction {
         type: 'blockquote' | 'delete' | 'emphasis' | 'inlineCode' | 'inlineMath' | 'math' | 'strong' | 'thematicBreak';
     } | {
         type: 'code';
-        language: string;
+        lang: string;
+        value: string;
+        showLineNumbers: boolean;
     } | {
         type: 'heading';
         depth: 1 | 2 | 3 | 4 | 5 | 6;