x-star-editor 0.3.2 → 0.3.4

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,14 +24,13 @@ 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";
 import { toHTML, toMarkdown } from "../utils/markdown";
 import Fade from "./Fade";
 import FileInput from "./FileInput";
-var Button = function Button(_ref) {
+var Item = function Item(_ref) {
   var _classNames;
   var children = _ref.children,
     toolbarRef = _ref.toolbarRef,
@@ -70,8 +66,7 @@ var Button = function Button(_ref) {
         }
       };
       document.addEventListener('click', listener, {
-        capture: true,
-        passive: true
+        capture: true
       });
       return function () {
         return document.removeEventListener('click', listener, {
@@ -81,11 +76,12 @@ var Button = function Button(_ref) {
     }
   }, [popoverMount]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "button-container"))
+    className: classNames("".concat(prefix, "item-container"))
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(prefix, "button"), (_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"), tooltipOpen || 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"))
@@ -517,12 +531,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 +538,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'],
   ];
 };
 
@@ -564,7 +572,7 @@ var Toolbar = function Toolbar(_ref9) {
         tooltip = _ref10.tooltip,
         _popoverRender = _ref10.popoverRender,
         _onClick2 = _ref10.onClick;
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(Item, {
         key: index,
         toolbarRef: toolbarRef,
         disabled: disabled,

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,13 +85,19 @@
   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-button-container {
+.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;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item {
   width: 2em;
   height: 2em;
   display: flex;
@@ -99,20 +107,23 @@
   cursor: pointer;
   user-select: none;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button.x-star-editor-disabled::before {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-item.x-star-editor-disabled::before {
   content: "";
   position: absolute;
   inset: 0;
   background-color: rgba(230, 247, 255, 0.7);
   cursor: not-allowed;
 }
-.x-star-editor-toolbar .x-star-editor-button-container > .x-star-editor-button.x-star-editor-active {
+.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-button-container > .x-star-editor-button .x-star-editor-icon {
+.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-button-container .x-star-editor-tooltip {
+.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;
   width: max-content;
@@ -127,7 +138,7 @@
   transform: translate(calc(1.25em - 50%));
   transition: opacity 0.3s;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-tooltip::before {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-tooltip::before {
   content: "";
   position: absolute;
   top: -0.3em;
@@ -137,7 +148,7 @@
   transform-origin: 0 0;
   transform: rotate(45deg);
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover {
   position: absolute;
   width: max-content;
   background-color: #fff;
@@ -148,68 +159,74 @@
   z-index: 1;
   transition: opacity 0.3s;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover .x-star-editor-option {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover .x-star-editor-option {
   padding: 6px 12px;
   cursor: pointer;
   user-select: none;
 }
-.x-star-editor-toolbar .x-star-editor-button-container .x-star-editor-popover .x-star-editor-option:hover {
+.x-star-editor-toolbar .x-star-editor-item-container .x-star-editor-popover .x-star-editor-option:hover {
   background-color: #e6f7ff;
 }
 .x-star-editor-toolbar .x-star-editor-divider {
   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-toolbar {
+.x-star-editor-editor.x-star-editor-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+.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%;
 }
-.x-star-editor-editor .x-star-editor-md-editor {
+.x-star-editor-editor > .x-star-editor-md-editor {
   flex: 1;
   border-right: none;
   border-bottom-right-radius: 0;
 }
-.x-star-editor-editor .x-star-editor-md-viewer {
+.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: 1em;
+}
+.x-star-editor-md-editor > :last-child {
+  margin-bottom: 1em;
+}
 
 .x-star-editor-md-viewer {
   position: relative;

package/dist/utils/container.js

@@ -330,14 +330,9 @@ export var useContainer = function useContainer(ref) {
         selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
       }
     };
-    document.addEventListener('selectionchange', listener, {
-      capture: true,
-      passive: true
-    });
+    document.addEventListener('selectionchange', listener);
     return function () {
-      return document.removeEventListener('selectionchange', listener, {
-        capture: true
-      });
+      return document.removeEventListener('selectionchange', listener);
     };
   }, []);
   return useRef({

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.js

@@ -1,8 +1,15 @@
 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 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,6 +35,7 @@ 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,
@@ -136,37 +144,86 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         }
       }
     };
-    editor === null || editor === void 0 ? void 0 : editor.addEventListener('scroll', listener, {
-      capture: true,
-      passive: true
-    });
-    viewer === null || viewer === void 0 ? void 0 : viewer.addEventListener('scroll', listener, {
-      capture: true,
-      passive: true
-    });
+    editor === null || editor === void 0 ? void 0 : editor.addEventListener('scroll', listener);
+    viewer === null || viewer === void 0 ? void 0 : viewer.addEventListener('scroll', listener);
     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 === null || editor === void 0 ? void 0 : editor.removeEventListener('scroll', listener);
+      viewer === null || viewer === void 0 ? void 0 : viewer.removeEventListener('scroll', listener);
     };
   }, []);
   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]);
+
+  // 防止出现两个滚动条
+  useEffect(function () {
+    if (fullscreen) {
+      var overflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return function () {
+        document.body.style.overflow = overflow;
+      };
+    }
+  }, [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,
+    plugins: editorPlugins,
     onChange: function onChange(value) {
       setValue(value);
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
@@ -174,12 +231,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.js

@@ -186,7 +186,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);

package/package.json

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