x-star-editor 0.3.3 → 0.3.5

package/dist/components/FileInput.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface FileInputProps {
+    image?: boolean;
     onCancel: () => void;
     onOk: (data: ({
         type: 'file';
@@ -11,5 +12,5 @@ interface FileInputProps {
         description: string;
     }) => void;
 }
-declare const FileInput: ({ onCancel, onOk }: FileInputProps) => React.JSX.Element;
+declare const FileInput: ({ image, onCancel, onOk }: FileInputProps) => React.JSX.Element;
 export default FileInput;

package/dist/components/FileInput.js

@@ -6,7 +6,8 @@ import { useLocale } from "../locales";
 import { prefix } from "../utils/global";
 var FileInput = function FileInput(_ref) {
   var _file$name;
-  var onCancel = _ref.onCancel,
+  var image = _ref.image,
+    onCancel = _ref.onCancel,
     onOk = _ref.onOk;
   var _useState = useState('file'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47,6 +48,7 @@ var FileInput = function FileInput(_ref) {
   }, /*#__PURE__*/React.createElement("input", {
     className: classNames("".concat(prefix, "hidden")),
     type: "file",
+    accept: image ? 'image/*' : undefined,
     onChange: function onChange(e) {
       var _e$target$files;
       return setFile((_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]);

package/dist/components/Toolbar.js

@@ -5,10 +5,7 @@ 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";
@@ -27,7 +24,6 @@ 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 { prefix } from "../utils/global";
 import { redoHandler, toggleHandler, undoHandler } from "../utils/handler";
@@ -70,8 +66,7 @@ var Item = function Item(_ref) {
         }
       };
       document.addEventListener('click', listener, {
-        capture: true,
-        passive: true
+        capture: true
       });
       return function () {
         return document.removeEventListener('click', listener, {
@@ -83,9 +78,10 @@ var Item = function Item(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(prefix, "item-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), tooltipOpen || popoverMount), _classNames)),
+    className: classNames("".concat(prefix, "item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), popoverMount), _classNames)),
     onClick: function onClick() {
       if (!disabled) {
+        setTooltipOpen(false);
         setPopoverOpen(true);
         _onClick === null || _onClick === void 0 ? void 0 : _onClick();
       }
@@ -144,22 +140,42 @@ var headingOptions = [{
   depth: 6,
   fontSize: '0.9em'
 }];
-var mermaidOptions = [{
-  label: 'Flowchart',
-  value: "flowchart TD\n    A[Start] --> B{Is it?}\n    B -- Yes --> C[OK]\n    C --> D[Rethink]\n    D --> B\n    B -- No ----> E[End]"
-}, {
+var mermaidOptions = [
+// {
+//   label: 'Flowchart',
+//   value: `flowchart TD
+//   A[Start] --> B{Is it?}
+//   B -- Yes --> C[OK]
+//   C --> D[Rethink]
+//   D --> B
+//   B -- No ----> E[End]`,
+// },
+{
   label: 'Sequence Diagram',
   value: "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!\n    Alice-)John: See you later!"
 }, {
   label: 'Class Diagram',
   value: "classDiagram\n    class BankAccount\n    BankAccount : +String owner\n    BankAccount : +Bigdecimal balance\n    BankAccount : +deposit(amount)\n    BankAccount : +withdrawal(amount)"
-}, {
-  label: 'State Diagram',
-  value: "stateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]"
-}, {
-  label: 'Entity Relationship Diagram',
-  value: "erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses"
-}, {
+},
+// {
+//   label: 'State Diagram',
+//   value: `stateDiagram-v2
+//   [*] --> Still
+//   Still --> [*]
+
+//   Still --> Moving
+//   Moving --> Still
+//   Moving --> Crash
+//   Crash --> [*]`,
+// },
+// {
+//   label: 'Entity Relationship Diagram',
+//   value: `erDiagram
+//   CUSTOMER ||--o{ ORDER : places
+//   ORDER ||--|{ LINE-ITEM : contains
+//   CUSTOMER }|..|{ DELIVERY-ADDRESS : uses`,
+// },
+{
   label: 'User Journey',
   value: "journey\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me"
 }, {
@@ -171,10 +187,25 @@ var mermaidOptions = [{
 }, {
   label: 'Quadrant Chart',
   value: "quadrantChart\n    title Reach and engagement of campaigns\n    x-axis Low Reach --> High Reach\n    y-axis Low Engagement --> High Engagement\n    quadrant-1 We should expand\n    quadrant-2 Need to promote\n    quadrant-3 Re-evaluate\n    quadrant-4 May be improved\n    Campaign A: [0.3, 0.6]\n    Campaign B: [0.45, 0.23]\n    Campaign C: [0.57, 0.69]\n    Campaign D: [0.78, 0.34]\n    Campaign E: [0.40, 0.34]\n    Campaign F: [0.35, 0.78]"
-}, {
-  label: 'Requirement Diagram',
-  value: "requirementDiagram\n\n    requirement test_req {\n    id: 1\n    text: the test text.\n    risk: high\n    verifymethod: test\n    }\n\n    element test_entity {\n    type: simulation\n    }\n\n    test_entity - satisfies -> test_req"
-}, {
+},
+// {
+//   label: 'Requirement Diagram',
+//   value: `requirementDiagram
+
+//   requirement test_req {
+//   id: 1
+//   text: the test text.
+//   risk: high
+//   verifymethod: test
+//   }
+
+//   element test_entity {
+//   type: simulation
+//   }
+
+//   test_entity - satisfies -> test_req`,
+// },
+{
   label: 'Gitgraph (Git) Diagram',
   value: "gitGraph\n   commit\n   commit\n   branch develop\n   checkout develop\n   commit\n   commit\n   checkout main\n   merge develop\n   commit\n   commit"
 }, {
@@ -184,10 +215,7 @@ var mermaidOptions = [{
   label: 'Timeline',
   value: "timeline\n    title History of Social Media Platform\n    2002 : LinkedIn\n    2004 : Facebook\n         : Google\n    2005 : Youtube\n    2006 : Twitter"
 }];
-export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
-  var _SvgEnterFullscreen, _t;
-  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var onInsertFile = arguments.length > 1 ? arguments[1] : undefined;
+export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(locale, onInsertFile) {
   var t = getFormat(locale, 'toolbarItem');
   return {
     blockquote: {
@@ -237,12 +265,6 @@ 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"))
@@ -254,14 +276,6 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
         }));
       }
     },
-    fullscreen: {
-      children: (_SvgEnterFullscreen = /*#__PURE__*/React.createElement(SvgEnterFullscreen, {
-        className: classNames("".concat(prefix, "icon"))
-      })) !== null && _SvgEnterFullscreen !== void 0 ? _SvgEnterFullscreen : /*#__PURE__*/React.createElement(SvgExitFullscreen, {
-        className: classNames("".concat(prefix, "icon"))
-      }),
-      tooltip: (_t = t('enterFullscreen')) !== null && _t !== void 0 ? _t : t('exitFullscreen')
-    },
     heading: {
       children: /*#__PURE__*/React.createElement(SvgHeading, {
         className: classNames("".concat(prefix, "icon"))
@@ -301,6 +315,7 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
       tooltip: t('image'),
       popoverRender: function popoverRender(exec, close) {
         return /*#__PURE__*/React.createElement(FileInput, {
+          image: true,
           onCancel: close,
           onOk: function onOk(data) {
             if (data.type === 'file') {
@@ -517,12 +532,6 @@ 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')
     }
   };
 };
@@ -530,7 +539,7 @@ export var getDefaultToolbarItems = function getDefaultToolbarItems() {
   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'],
+  // ['help'],
   ];
 };
 

package/dist/locales/index.d.ts

@@ -85,7 +85,7 @@ export declare const useLocale: <T extends "fileInput" | "toolbarItem">(slice: T
         };
     })[T][U];
 };
-export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale: string, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
+export declare const getFormat: <T extends "fileInput" | "toolbarItem">(locale: string | undefined, slice: T) => <U extends keyof MessageMap[T]>(key: U) => ({
     readonly fileInput: {
         readonly cancel: "取消";
         readonly chooseFile: "选择文件";

package/dist/locales/index.js

@@ -30,8 +30,10 @@ export var useLocale = function useLocale(slice) {
     format: format
   };
 };
-export var getFormat = function getFormat(locale, slice) {
+export var getFormat = function getFormat() {
   var _zh_CN$en_US$locale2;
+  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var slice = arguments.length > 1 ? arguments[1] : undefined;
   var message = ((_zh_CN$en_US$locale2 = {
     zh_CN: zh_CN,
     en_US: en_US

package/dist/styles/index.css

@@ -75,6 +75,8 @@
 }
 
 .x-star-editor-toolbar {
+  position: relative;
+  color: rgba(0, 0, 0, 0.88);
   padding: 0.5em 1em;
   display: flex;
   flex-wrap: wrap;
@@ -83,8 +85,14 @@
   border: 1px solid #dedede;
   border-top-left-radius: 0.3em;
   border-top-right-radius: 0.3em;
-  position: relative;
-  color: rgba(0, 0, 0, 0.88);
+}
+.x-star-editor-toolbar *,
+.x-star-editor-toolbar ::before,
+.x-star-editor-toolbar ::after {
+  box-sizing: border-box;
+}
+.x-star-editor-toolbar ::selection {
+  background-color: #c1def1;
 }
 .x-star-editor-toolbar .x-star-editor-item-container {
   position: relative;
@@ -106,12 +114,15 @@
   background-color: rgba(230, 247, 255, 0.7);
   cursor: not-allowed;
 }
-.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-active {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item:hover, .x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-active {
   background-color: #cbedfd;
 }
 .x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item .x-star-editor-icon {
   font-size: 1.75em;
 }
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item .x-star-editor-icon.x-star-editor-active {
+  color: #1890ff;
+}
 .x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-tooltip {
   position: absolute;
   top: 3em;
@@ -160,19 +171,20 @@
   margin: 0.4em;
   border: 1px solid #dedede;
 }
-.x-star-editor-toolbar *,
-.x-star-editor-toolbar ::before,
-.x-star-editor-toolbar ::after {
-  box-sizing: border-box;
-}
-.x-star-editor-toolbar ::selection {
-  background-color: #c1def1;
-}
 
 .x-star-editor-editor {
   display: flex;
   flex-wrap: wrap;
 }
+.x-star-editor-editor.x-star-editor-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+.x-star-editor-editor.x-star-editor-fullscreen > .x-star-editor-md-editor,
+.x-star-editor-editor.x-star-editor-fullscreen > .x-star-editor-md-viewer {
+  height: calc(100% - 3em) !important;
+}
 .x-star-editor-editor > .x-star-editor-toolbar {
   width: 100%;
 }
@@ -182,34 +194,39 @@
   border-bottom-right-radius: 0;
 }
 .x-star-editor-editor > .x-star-editor-md-viewer {
+  border: 1px solid #dedede;
+  border-top: none;
+  border-bottom-right-radius: 0.3em;
+  border-bottom-left-radius: 0.3em;
   padding: 0 1em;
   flex: 1;
   background-color: #fff;
+  border-bottom-left-radius: 0;
+  overflow: auto;
+}
+.x-star-editor-editor > .x-star-editor-active {
   border: 1px solid #dedede;
   border-top: none;
   border-bottom-right-radius: 0.3em;
-  overflow: auto;
+  border-bottom-left-radius: 0.3em;
+}
+.x-star-editor-editor > .x-star-editor-hidden {
+  display: none;
 }
 
 .x-star-editor-md-editor {
-  padding: 0 1em;
-  line-height: 1.6em;
-  white-space: break-spaces;
-  background-color: #fff;
+  position: relative;
+  color: rgba(0, 0, 0, 0.88);
   border: 1px solid #dedede;
   border-top: none;
   border-bottom-right-radius: 0.3em;
   border-bottom-left-radius: 0.3em;
+  padding: 0 1em;
+  line-height: 1.6em;
+  white-space: break-spaces;
+  background-color: #fff;
   outline: none;
   overflow: auto;
-  position: relative;
-  color: rgba(0, 0, 0, 0.88);
-}
-.x-star-editor-md-editor > :first-child {
-  margin-top: 1em;
-}
-.x-star-editor-md-editor > :last-child {
-  margin-bottom: 1em;
 }
 .x-star-editor-md-editor *,
 .x-star-editor-md-editor ::before,
@@ -219,6 +236,12 @@
 .x-star-editor-md-editor ::selection {
   background-color: #c1def1;
 }
+.x-star-editor-md-editor > :first-child {
+  margin-top: 0.5em;
+}
+.x-star-editor-md-editor > :last-child {
+  margin-bottom: 0.5em;
+}
 
 .x-star-editor-md-viewer {
   position: relative;

package/dist/utils/container.d.ts

@@ -41,4 +41,5 @@ export declare const useContainer: (ref: React.RefObject<HTMLDivElement>) => {
     getOffset: (root: Node, targetNode: Node, targetOffset: number) => number;
     getSelection: () => ContainerSelection;
     setSelection: ({ anchorOffset, focusOffset }: ContainerSelection) => void;
+    normalizeSelection: () => void;
 };

package/dist/utils/container.js

@@ -1,5 +1,5 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { editorRender } from "./markdown";
 
 /**
@@ -294,57 +294,49 @@ export var useContainer = function useContainer(ref) {
     range.setEnd(focus.node, focus.offset);
     var rangeRect = range.getBoundingClientRect();
     var containerRect = ref.current.getBoundingClientRect();
-    var topOffset = rangeRect.top - containerRect.top;
-    var bottomOffset = rangeRect.bottom - containerRect.bottom;
+    var topOffset = Math.round(rangeRect.top - containerRect.top);
+    var bottomOffset = Math.round(rangeRect.bottom - containerRect.bottom);
 
     // 将光标滚动到视口内
-    if (topOffset < 0) {
-      ref.current.scrollTop += topOffset;
-    } else if (bottomOffset > 0) {
-      ref.current.scrollTop += bottomOffset;
+    if (topOffset < 1) {
+      ref.current.scrollTop += topOffset - 1;
+    } else if (bottomOffset > -1) {
+      ref.current.scrollTop += bottomOffset + 1;
     }
   };
 
-  // 确保光标不在零宽空格后
-  useEffect(function () {
-    var listener = function listener() {
-      var _ref$current, _anchorNode$nodeValue, _focusNode$nodeValue;
-      var selection = window.getSelection();
-      if (!selection || !selection.anchorNode || !selection.focusNode || !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(selection.anchorNode))) {
-        return;
-      }
-      var update = false;
-      var anchorNode = selection.anchorNode,
-        anchorOffset = selection.anchorOffset,
-        focusNode = selection.focusNode,
-        focusOffset = selection.focusOffset;
-      if (anchorNode.nodeType === Node.TEXT_NODE && ((_anchorNode$nodeValue = anchorNode.nodeValue) === null || _anchorNode$nodeValue === void 0 ? void 0 : _anchorNode$nodeValue[anchorOffset - 1]) === "\u200B") {
-        update = true;
-        anchorOffset--;
-      }
-      if (focusNode.nodeType === Node.TEXT_NODE && ((_focusNode$nodeValue = focusNode.nodeValue) === null || _focusNode$nodeValue === void 0 ? void 0 : _focusNode$nodeValue[focusOffset - 1]) === "\u200B") {
-        update = true;
-        focusOffset--;
-      }
-      if (update) {
-        selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
-      }
-    };
-    document.addEventListener('selectionchange', listener, {
-      capture: true,
-      passive: true
-    });
-    return function () {
-      return document.removeEventListener('selectionchange', listener, {
-        capture: true
-      });
-    };
-  }, []);
+  /**
+   * 标准化容器选区，确保光标不在零宽空格后
+   */
+  var normalizeSelection = function normalizeSelection() {
+    var _anchorNode$nodeValue, _focusNode$nodeValue;
+    var selection = window.getSelection();
+    if (!selection || !selection.anchorNode || !selection.focusNode || !ref.current) {
+      return;
+    }
+    var update = false;
+    var anchorNode = selection.anchorNode,
+      anchorOffset = selection.anchorOffset,
+      focusNode = selection.focusNode,
+      focusOffset = selection.focusOffset;
+    if (anchorNode.nodeType === Node.TEXT_NODE && ((_anchorNode$nodeValue = anchorNode.nodeValue) === null || _anchorNode$nodeValue === void 0 ? void 0 : _anchorNode$nodeValue[anchorOffset - 1]) === "\u200B") {
+      update = true;
+      anchorOffset--;
+    }
+    if (focusNode.nodeType === Node.TEXT_NODE && ((_focusNode$nodeValue = focusNode.nodeValue) === null || _focusNode$nodeValue === void 0 ? void 0 : _focusNode$nodeValue[focusOffset - 1]) === "\u200B") {
+      update = true;
+      focusOffset--;
+    }
+    if (update) {
+      selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    }
+  };
   return useRef({
     getText: getText,
     setText: setText,
     getOffset: getOffset,
     getSelection: getSelection,
-    setSelection: setSelection
+    setSelection: setSelection,
+    normalizeSelection: normalizeSelection
   }).current;
 };

package/dist/utils/history.d.ts

@@ -66,7 +66,7 @@ export interface SelectAction {
     selection: ContainerSelection;
 }
 type HistoryAction = UndoAction | RedoAction | BatchAction | SelectAction;
-export declare const useHistory: (initialSourceCode: string) => {
+export declare const useHistory: (initialSourceCode: string, readOnly?: boolean) => {
     history: History;
     sourceCode: string;
     selection: ContainerSelection;

package/dist/utils/history.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { useReducer } from 'react';
+import { useReducer, useRef } from 'react';
 import { createSelection, getRange } from "./container";
 
 /**
@@ -268,7 +268,7 @@ var historyReducer = function historyReducer(_ref2, action) {
       }
   }
 };
-export var useHistory = function useHistory(initialSourceCode) {
+export var useHistory = function useHistory(initialSourceCode, readOnly) {
   var _useReducer = useReducer(historyReducer, initialSourceCode, function (text) {
       var action = {
         type: 'insert',
@@ -292,10 +292,16 @@ export var useHistory = function useHistory(initialSourceCode) {
     _useReducer2 = _slicedToArray(_useReducer, 2),
     history = _useReducer2[0],
     dispatch = _useReducer2[1];
+  var readOnlyLatest = useRef(readOnly);
+  readOnlyLatest.current = readOnly;
   return {
     history: history,
     sourceCode: history.states[history.index].sourceCode,
     selection: history.selection,
-    dispatch: dispatch
+    dispatch: useRef(function (action) {
+      if (!readOnlyLatest.current) {
+        dispatch(action);
+      }
+    }).current
   };
 };

package/dist/utils/markdown.js

@@ -3,6 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
 import { toText as hastToText } from 'hast-util-to-text';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
@@ -31,6 +32,20 @@ import rehypeRawPositions from "./rehype/rehype-raw-positions";
  */
 var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).freeze();
 
+/**
+ * 带缓存的解析函数
+ *
+ * @param sourceCode Markdown 文本
+ * @returns Mdast 树
+ */
+var cachedParse = function () {
+  var cache = {};
+  return function (sourceCode) {
+    var _cache$sourceCode;
+    return (_cache$sourceCode = cache[sourceCode]) !== null && _cache$sourceCode !== void 0 ? _cache$sourceCode : (cache = _defineProperty({}, sourceCode, toMdastProcessor.parse(sourceCode)))[sourceCode];
+  };
+}();
+
 /**
  * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
  *
@@ -228,7 +243,7 @@ export var editorRender = function editorRender(sourceCode) {
     }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
-  getChildren(toMdastProcessor.parse(sourceCode).children, sourceCode.length);
+  getChildren(cachedParse(sourceCode).children, sourceCode.length);
   if (scanOffset <= sourceCode.length) {
     // 添加最后一行文本
     block.append(createLine(sourceCode.slice(scanOffset)));
@@ -274,7 +289,7 @@ export var preViewerRender = /*#__PURE__*/function () {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.next = 2;
-          return toHastProcessor.run(toMdastProcessor.parse(sourceCode));
+          return toHastProcessor.run(JSON.parse(JSON.stringify(cachedParse(sourceCode))));
         case 2:
           return _context.abrupt("return", _context.sent);
         case 3:

package/dist/x-star-editor/index.d.ts

@@ -25,6 +25,10 @@ export interface XStarEditorProps {
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 是否只读
+     */
+    readOnly?: XStarMdEditorProps['readOnly'];
     /**
      * 是否启用 Web Worker
      */
@@ -32,7 +36,7 @@ export interface XStarEditorProps {
     /**
      * 编辑器属性
      */
-    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
+    editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'readOnly' | 'onChange' | 'onInsertFile'>;
     /**
      * 查看器属性
      */

package/dist/x-star-editor/index.js

@@ -1,8 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createKeybindingsHandler } from 'tinykeys';
+import SvgEditOnly from "../icons/EditOnly";
+import SvgEnterFullscreen from "../icons/EnterFullscreen";
+import SvgExitFullscreen from "../icons/ExitFullscreen";
+import SvgViewOnly from "../icons/ViewOnly";
+import { getFormat } from "../locales";
 import { prefix } from "../utils/global";
 import XStarMdEditor, { useMdEditorRef } from "../x-star-md-editor";
 import XStarMdViewer, { useMdViewerRef } from "../x-star-md-viewer";
@@ -28,12 +36,14 @@ var ViewerRenderWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children);
 });
 var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _classNames4, _classNames5, _classNames6;
   var className = _ref2.className,
     style = _ref2.style,
     height = _ref2.height,
     locale = _ref2.locale,
     _ref2$initialValue = _ref2.initialValue,
     initialValue = _ref2$initialValue === void 0 ? '' : _ref2$initialValue,
+    readOnly = _ref2.readOnly,
     enableWebWorker = _ref2.enableWebWorker,
     editorProps = _ref2.editorProps,
     viewerProps = _ref2.viewerProps,
@@ -56,6 +66,9 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     var _editorRef$current, _viewerRef$current;
     var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getEditorContainer();
     var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getViewerContainer();
+    if (!editor || !viewer) {
+      return;
+    }
 
     /**
      * 获取两个父元素的子元素到各自父元素顶部的距离
@@ -114,7 +127,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     var listener = function listener(e) {
       var ignore = ignoreNext;
       ignoreNext = false;
-      if (ignore || !editor || !viewer) {
+      if (ignore) {
         return;
       }
       var _ref3 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
@@ -127,7 +140,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         toOffsetTops = _getOffsetTops2[1];
       for (var i = 0; i < fromOffsetTops.length - 1; i++) {
         if (fromOffsetTops[i] <= fromElement.scrollTop && fromElement.scrollTop < fromOffsetTops[i + 1]) {
-          var scrollTop = (fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i];
+          var scrollTop = Math.round((fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i]);
           if (toElement.scrollTop !== scrollTop) {
             ignoreNext = true;
             toElement.scrollTop = scrollTop;
@@ -136,37 +149,105 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         }
       }
     };
-    editor === null || editor === void 0 ? void 0 : editor.addEventListener('scroll', listener, {
-      capture: true,
-      passive: true
+    var observer = new MutationObserver(function () {
+      return listener({
+        currentTarget: editor
+      });
     });
-    viewer === null || viewer === void 0 ? void 0 : viewer.addEventListener('scroll', listener, {
-      capture: true,
-      passive: true
+    editor.addEventListener('scroll', listener);
+    viewer.addEventListener('scroll', listener);
+    observer.observe(viewer, {
+      subtree: true,
+      childList: true
     });
     return function () {
-      editor === null || editor === void 0 ? void 0 : editor.removeEventListener('scroll', listener, {
-        capture: true
-      });
-      viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('scroll', listener, {
-        capture: true
-      });
+      editor.removeEventListener('scroll', listener);
+      viewer.removeEventListener('scroll', listener);
+      observer.disconnect();
     };
   }, []);
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
+  var _useState3 = useState(['editor', 'viewer']),
+    _useState4 = _slicedToArray(_useState3, 2),
+    layout = _useState4[0],
+    setLayout = _useState4[1];
+  var editOnly = layout.includes('editor') && !layout.includes('viewer');
+  var viewOnly = !layout.includes('editor') && layout.includes('viewer');
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fullscreen = _useState6[0],
+    setFullscreen = _useState6[1];
+  var editorPlugins = useMemo(function () {
+    var _editorProps$plugins;
+    return [function (ctx) {
+      var t = getFormat(locale, 'toolbarItem');
+      ctx.toolbarItemMap.editOnly = {
+        children: /*#__PURE__*/React.createElement(SvgEditOnly, {
+          className: classNames("".concat(prefix, "icon"), _defineProperty({}, "".concat(prefix, "active"), editOnly))
+        }),
+        tooltip: t('editOnly'),
+        onClick: function onClick() {
+          return setLayout(editOnly ? ['editor', 'viewer'] : ['editor']);
+        }
+      };
+      ctx.toolbarItemMap.viewOnly = {
+        children: /*#__PURE__*/React.createElement(SvgViewOnly, {
+          className: classNames("".concat(prefix, "icon"), _defineProperty({}, "".concat(prefix, "active"), viewOnly))
+        }),
+        tooltip: t('viewOnly'),
+        onClick: function onClick() {
+          return setLayout(viewOnly ? ['editor', 'viewer'] : ['viewer']);
+        }
+      };
+      ctx.toolbarItemMap.fullscreen = {
+        children: fullscreen ? /*#__PURE__*/React.createElement(SvgExitFullscreen, {
+          className: classNames("".concat(prefix, "icon"))
+        }) : /*#__PURE__*/React.createElement(SvgEnterFullscreen, {
+          className: classNames("".concat(prefix, "icon"))
+        }),
+        tooltip: fullscreen ? t('exitFullscreen') : t('enterFullscreen'),
+        onClick: function onClick() {
+          return setFullscreen(!fullscreen);
+        }
+      };
+      ctx.toolbarItems.push(['editOnly', 'viewOnly', 'fullscreen']);
+    }].concat(_toConsumableArray((_editorProps$plugins = editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) !== null && _editorProps$plugins !== void 0 ? _editorProps$plugins : []));
+  }, [locale, editOnly, viewOnly, fullscreen, editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins]);
+
+  // 防止出现两个滚动条，按下 Esc 退出全屏
+  useEffect(function () {
+    if (fullscreen) {
+      var overflow = document.body.style.overflow;
+      var listener = createKeybindingsHandler({
+        Escape: function Escape(e) {
+          e.stopPropagation();
+          setFullscreen(false);
+        }
+      });
+      document.body.style.overflow = 'hidden';
+      document.addEventListener('keydown', listener);
+      return function () {
+        document.body.style.overflow = overflow;
+        document.removeEventListener('keydown', listener);
+      };
+    }
+  }, [fullscreen]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
-    className: classNames("".concat(prefix, "editor"), className),
+    className: classNames("".concat(prefix, "editor"), _defineProperty({}, "".concat(prefix, "fullscreen"), fullscreen), className),
     style: style
   }, /*#__PURE__*/React.createElement(XStarMdEditor, _extends({
     ref: editorRef
   }, editorProps, {
+    className: classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "active"), editOnly), _defineProperty(_classNames4, "".concat(prefix, "hidden"), viewOnly), _classNames4), editorProps === null || editorProps === void 0 ? void 0 : editorProps.className),
     height: height,
     locale: locale,
     initialValue: initialValue,
+    readOnly: viewOnly || readOnly,
+    plugins: editorPlugins,
     onChange: function onChange(value) {
       setValue(value);
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
@@ -174,12 +255,13 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onInsertFile: onInsertFile
   })), viewerRender ? /*#__PURE__*/React.createElement(ViewerRenderWrapper, {
     ref: viewerRef,
-    className: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className,
+    className: classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefix, "active"), viewOnly), _defineProperty(_classNames5, "".concat(prefix, "hidden"), editOnly), _classNames5), viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className),
     style: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style,
     height: height
   }, viewerRender(value)) : /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
     ref: viewerRef
   }, viewerProps, {
+    className: classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(prefix, "active"), viewOnly), _defineProperty(_classNames6, "".concat(prefix, "hidden"), editOnly), _classNames6), viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.className),
     height: height,
     value: value,
     enableWebWorker: enableWebWorker

package/dist/x-star-md-editor/index.d.ts

@@ -51,6 +51,10 @@ export interface XStarMdEditorProps {
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 是否只读
+     */
+    readOnly?: boolean;
     /**
      * 插件
      */

package/dist/x-star-md-editor/index.js

@@ -16,12 +16,13 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     locale = _ref.locale,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    readOnly = _ref.readOnly,
     plugins = _ref.plugins,
     onChange = _ref.onChange,
     onInsertFile = _ref.onInsertFile;
   var containerRef = useRef(null);
   var container = useContainer(containerRef);
-  var _useHistory = useHistory(initialValue),
+  var _useHistory = useHistory(initialValue, readOnly),
     history = _useHistory.history,
     sourceCode = _useHistory.sourceCode,
     selection = _useHistory.selection,
@@ -124,6 +125,11 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           });
           break;
         }
+      case 'compositionstart':
+        {
+          container.normalizeSelection();
+          break;
+        }
     }
   };
   var dragEventHandler = function dragEventHandler(e) {
@@ -186,7 +192,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _containerRef$current;
     var listener = function listener(e) {
       var targetRange = e.getTargetRanges()[0];
-      if (!containerRef.current || !targetRange) {
+      if (!targetRange || !containerRef.current) {
         return;
       }
       var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
@@ -369,6 +375,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     contentEditable: true,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,
+    onCompositionStart: compositionEventHandler,
     onCopy: clipboardEventHandler,
     onCut: clipboardEventHandler,
     onDragStart: dragEventHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",