x-star-editor 0.1.1 → 0.1.2

package/dist/utils/markdown.js

@@ -1,16 +1,7 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import rehypeKatex from 'rehype-katex';
@@ -28,44 +19,29 @@ import remarkStringify from 'remark-stringify';
 import strip from 'strip-markdown';
 import { unified } from 'unified';
 import { prefix } from "./global";
-export var getDefaultSchema = function getDefaultSchema() {
-  var _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8, _defaultSchema$protoc, _defaultSchema$protoc2, _defaultSchema$tagNam;
-  return _objectSpread(_objectSpread({}, defaultSchema), {}, {
-    attributes: _objectSpread(_objectSpread({}, defaultSchema.attributes), {}, {
-      pre: [].concat(_toConsumableArray((_defaultSchema$attrib = (_defaultSchema$attrib2 = defaultSchema.attributes) === null || _defaultSchema$attrib2 === void 0 ? void 0 : _defaultSchema$attrib2.pre) !== null && _defaultSchema$attrib !== void 0 ? _defaultSchema$attrib : []), ['className', 'style']),
-      code: [].concat(_toConsumableArray((_defaultSchema$attrib3 = (_defaultSchema$attrib4 = defaultSchema.attributes) === null || _defaultSchema$attrib4 === void 0 ? void 0 : _defaultSchema$attrib4.code) !== null && _defaultSchema$attrib3 !== void 0 ? _defaultSchema$attrib3 : []), ['className', 'style']),
-      div: [].concat(_toConsumableArray((_defaultSchema$attrib5 = (_defaultSchema$attrib6 = defaultSchema.attributes) === null || _defaultSchema$attrib6 === void 0 ? void 0 : _defaultSchema$attrib6.div) !== null && _defaultSchema$attrib5 !== void 0 ? _defaultSchema$attrib5 : []), ['className', 'style']),
-      span: [].concat(_toConsumableArray((_defaultSchema$attrib7 = (_defaultSchema$attrib8 = defaultSchema.attributes) === null || _defaultSchema$attrib8 === void 0 ? void 0 : _defaultSchema$attrib8.span) !== null && _defaultSchema$attrib7 !== void 0 ? _defaultSchema$attrib7 : []), ['className', 'style', 'line']),
-      svg: ['xmlns', 'width', 'height', 'viewBox', 'preserveAspectRatio'],
-      path: ['d'],
-      custom: ['meta', 'value']
-    }),
-    protocols: _objectSpread(_objectSpread({}, defaultSchema.protocols), {}, {
-      src: [].concat(_toConsumableArray((_defaultSchema$protoc = (_defaultSchema$protoc2 = defaultSchema.protocols) === null || _defaultSchema$protoc2 === void 0 ? void 0 : _defaultSchema$protoc2.src) !== null && _defaultSchema$protoc !== void 0 ? _defaultSchema$protoc : []), ['data'])
-    }),
-    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['svg', 'path', 'custom'])
-  });
-};
 
 /**
- * 将 Markdown 文本解析为 Mdast 树并转换为 Hast 树的处理器
+ * 将 Markdown 文本解析为 Mdast 树的处理器
  */
-var processor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(remarkMath).use(remarkRehype, {
-  allowDangerousHtml: true,
-  handlers: {
-    math: function math(h, node) {
-      return (
-        // 如果 Math 节点的 `meta` 属性不为空，则视为自定义块
-        node.meta ? h(node.position, 'custom', {
-          meta: node.meta,
-          value: node.value
-        }) : h(node, 'div')
-      );
-    }
-  }
-}).use(rehypePrism, {
-  ignoreMissing: true
-}).use(rehypeKatex).use(rehypeRaw).freeze();
+var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).freeze();
+
+/**
+ * Mdast 根节点
+ */
+
+/**
+ * 带缓存的解析函数
+ *
+ * @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];
+  };
+}();
 
 /**
  * Mdast 节点
@@ -125,7 +101,7 @@ export var editorRender = function editorRender(sourceCode) {
     var styleElement = stack[index && !isFlowContent(stack[index - 1].node) ? index : 0].el;
     styleElement.classList.add("".concat(mdPrefix).concat(node.type));
     if (node.type === 'heading') {
-      styleElement.classList.add("".concat(mdPrefix, "heading").concat(node.depth));
+      styleElement.classList.add("".concat(mdPrefix, "heading-").concat(node.depth));
     }
 
     // 如果索引为 0，则父节点为块级元素，否则为前一个索引的 DOM 元素
@@ -267,7 +243,7 @@ export var editorRender = function editorRender(sourceCode) {
     }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
-  getChildren(processor.parse(sourceCode).children, sourceCode.length);
+  getChildren(cachedParse(sourceCode).children, sourceCode.length);
   if (scanOffset <= sourceCode.length) {
     // 添加最后一行文本
     block.append(createLine(sourceCode.slice(scanOffset)));
@@ -275,15 +251,73 @@ export var editorRender = function editorRender(sourceCode) {
   }
   return el;
 };
+
+/**
+ * 将 Mdast 树转成 Hast 树的处理器
+ */
+var toHastProcessor = unified().use(remarkBreaks).use(remarkRehype, {
+  allowDangerousHtml: true,
+  handlers: {
+    math: function math(h, node) {
+      return (
+        // 如果 Math 节点的 `meta` 属性不为空，则视为自定义块
+        node.meta ? h(node.position, 'custom', {
+          meta: node.meta,
+          value: node.value
+        }) : h(node, 'div')
+      );
+    }
+  }
+}).use(rehypePrism, {
+  ignoreMissing: true
+}).use(rehypeKatex).freeze();
+
+/**
+ * Hast 根节点
+ */
+
 /**
- * 将 Markdown 文本映射到 React 虚拟 DOM 树
+ * 将 Markdown 文本转成 Hast 树
  *
  * @param sourceCode Markdown 文本
- * @param options 配置项
- * @returns React 虚拟 DOM 树
+ * @returns Hast 树
+ */
+export var preViewerRender = function preViewerRender(sourceCode) {
+  return toHastProcessor.runSync(cachedParse(sourceCode));
+};
+
+/**
+ * 过滤模式
+ */
+
+export var getDefaultSchema = function getDefaultSchema() {
+  var _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8, _defaultSchema$protoc, _defaultSchema$protoc2, _defaultSchema$tagNam;
+  return _objectSpread(_objectSpread({}, defaultSchema), {}, {
+    attributes: _objectSpread(_objectSpread({}, defaultSchema.attributes), {}, {
+      pre: [].concat(_toConsumableArray((_defaultSchema$attrib = (_defaultSchema$attrib2 = defaultSchema.attributes) === null || _defaultSchema$attrib2 === void 0 ? void 0 : _defaultSchema$attrib2.pre) !== null && _defaultSchema$attrib !== void 0 ? _defaultSchema$attrib : []), ['className', 'style']),
+      code: [].concat(_toConsumableArray((_defaultSchema$attrib3 = (_defaultSchema$attrib4 = defaultSchema.attributes) === null || _defaultSchema$attrib4 === void 0 ? void 0 : _defaultSchema$attrib4.code) !== null && _defaultSchema$attrib3 !== void 0 ? _defaultSchema$attrib3 : []), ['className', 'style']),
+      div: [].concat(_toConsumableArray((_defaultSchema$attrib5 = (_defaultSchema$attrib6 = defaultSchema.attributes) === null || _defaultSchema$attrib6 === void 0 ? void 0 : _defaultSchema$attrib6.div) !== null && _defaultSchema$attrib5 !== void 0 ? _defaultSchema$attrib5 : []), ['className', 'style']),
+      span: [].concat(_toConsumableArray((_defaultSchema$attrib7 = (_defaultSchema$attrib8 = defaultSchema.attributes) === null || _defaultSchema$attrib8 === void 0 ? void 0 : _defaultSchema$attrib8.span) !== null && _defaultSchema$attrib7 !== void 0 ? _defaultSchema$attrib7 : []), ['className', 'style', 'line']),
+      svg: ['xmlns', 'viewBox', 'preserveAspectRatio'],
+      path: ['d'],
+      custom: ['meta', 'value']
+    }),
+    protocols: _objectSpread(_objectSpread({}, defaultSchema.protocols), {}, {
+      src: [].concat(_toConsumableArray((_defaultSchema$protoc = (_defaultSchema$protoc2 = defaultSchema.protocols) === null || _defaultSchema$protoc2 === void 0 ? void 0 : _defaultSchema$protoc2.src) !== null && _defaultSchema$protoc !== void 0 ? _defaultSchema$protoc : []), ['data'])
+    }),
+    tagNames: [].concat(_toConsumableArray((_defaultSchema$tagNam = defaultSchema.tagNames) !== null && _defaultSchema$tagNam !== void 0 ? _defaultSchema$tagNam : []), ['svg', 'path', 'custom'])
+  });
+};
+
+/**
+ * 将 Hast 树转成新的 Hast 树
+ *
+ * @param root Hast 树
+ * @param schema 过滤模式
+ * @returns 新的 Hast 树
  */
-export var viewerRender = function viewerRender(sourceCode, options) {
-  return toJsxRuntime(processor().use(rehypeSanitize, options.customSchema).use(function () {
+export var viewerRender = function viewerRender(root, schema) {
+  return unified().use(rehypeRaw).use(rehypeSanitize, schema).use(function () {
     return function (root) {
       var _iterator2 = _createForOfIteratorHelper(root.children),
         _step2;
@@ -301,7 +335,18 @@ export var viewerRender = function viewerRender(sourceCode, options) {
         _iterator2.f();
       }
     };
-  }).runSync(processor.parse(sourceCode)), {
+  }).runSync(root);
+};
+
+/**
+ * 将 Hast 树映射到 React 虚拟 DOM 树
+ *
+ * @param root Hast 树
+ * @param options 配置项
+ * @returns React 虚拟 DOM 树
+ */
+export var postViewerRender = function postViewerRender(root, options) {
+  return toJsxRuntime(root, {
     Fragment: Fragment,
     jsx: jsx,
     jsxs: jsxs,
@@ -317,10 +362,9 @@ export var viewerRender = function viewerRender(sourceCode, options) {
     })
   });
 };
-var toHastProcessor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(remarkRehype, {
+var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkBreaks).use(remarkRehype, {
   allowDangerousHtml: true
-}).use(rehypeRaw).freeze();
-var toHTMLProcessor = unified().use(rehypeStringify).freeze();
+}).use(rehypeRaw).use(rehypeStringify).freeze();
 
 /**
  * 将 Markdown 文本转成 HTML 文本
@@ -329,9 +373,9 @@ var toHTMLProcessor = unified().use(rehypeStringify).freeze();
  * @returns HTML 文本
  */
 export var toHTML = function toHTML(sourceCode) {
-  return toHTMLProcessor.stringify(toHastProcessor.runSync(toHastProcessor.parse(sourceCode)));
+  return toHTMLProcessor.processSync(sourceCode).toString();
 };
-var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkBreaks).use(remarkStringify).freeze();
+var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkStringify).freeze();
 
 /**
  * 将带有 HTML 的 Markdown 文本转成 Markdown 文本
@@ -340,7 +384,7 @@ var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkB
  * @returns Markdown 文本
  */
 export var toMarkdown = function toMarkdown(sourceCode) {
-  return toMarkdownProcessor.stringify(toMarkdownProcessor.runSync(toHastProcessor.runSync(toHastProcessor.parse(sourceCode))));
+  return toMarkdownProcessor.stringify(toMarkdownProcessor.runSync(toHTMLProcessor.runSync(toHTMLProcessor.parse(sourceCode))));
 };
 var toTextProcessor = unified().use(strip).freeze();
 

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

@@ -13,23 +13,31 @@ export interface XStarEditorProps {
     /**
      * 语言
      */
-    locale?: string;
+    locale?: XStarMdEditorProps['locale'];
     /**
      * 初始文本
      */
     initialValue?: string;
+    /**
+     * 是否启用 Web Worker
+     */
+    enableWebWorker?: XStarMdViewerProps['enableWebWorker'];
     /**
      * 编辑器属性
      */
-    editorProps?: Omit<XStarMdEditorProps, 'locale' | 'initialValue' | 'onChange'>;
+    editorProps?: Omit<XStarMdEditorProps, 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
     /**
      * 浏览器属性
      */
-    viewerProps?: Omit<XStarMdViewerProps, 'value'>;
+    viewerProps?: Omit<XStarMdViewerProps, 'value' | 'enableWebWorker'>;
     /**
      * 文本变化回调函数
      */
-    onChange?: (value: string) => void;
+    onChange?: XStarMdEditorProps['onChange'];
+    /**
+     * 文件插入回调函数
+     */
+    onInsertFile?: XStarMdEditorProps['onInsertFile'];
 }
 declare const XStarEditor: React.ForwardRefExoticComponent<XStarEditorProps & React.RefAttributes<XStarEditorHandle>>;
 export default XStarEditor;

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

@@ -1,16 +1,6 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { prefix } from "../utils/global";
@@ -20,9 +10,11 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
     locale = _ref.locale,
     initialValue = _ref.initialValue,
+    enableWebWorker = _ref.enableWebWorker,
     editorProps = _ref.editorProps,
     viewerProps = _ref.viewerProps,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    onInsertFile = _ref.onInsertFile;
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -155,14 +147,16 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: function onChange(value) {
       setValue(value);
       _onChange === null || _onChange === void 0 ? void 0 : _onChange(value);
-    }
+    },
+    onInsertFile: onInsertFile
   })), /*#__PURE__*/React.createElement(XStarMdViewer, _extends({
     ref: viewerRef
   }, viewerProps, {
     style: _objectSpread(_objectSpread({}, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style), {}, {
       height: height
     }),
-    value: value
+    value: value,
+    enableWebWorker: enableWebWorker
   })));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import Toolbar, { getDefaultToolbarItemMap, getDefaultToolbarItems } from "../components/Toolbar";
 import { LocaleProvider } from "../locales";
 import { getRange, useContainer } from "../utils/container";
@@ -24,17 +24,12 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     selection = _useHistory.selection,
     dispatch = _useHistory.dispatch;
   var initialized = useRef(false);
-  var onChangeLatest = useRef(onChange);
-  onChangeLatest.current = onChange;
-  var onInsertFileLatest = useRef(onInsertFile);
-  onInsertFileLatest.current = onInsertFile;
 
   // 将文本同步到容器
   useEffect(function () {
     container.setText(sourceCode);
     if (initialized.current) {
-      var _onChangeLatest$curre;
-      (_onChangeLatest$curre = onChangeLatest.current) === null || _onChangeLatest$curre === void 0 ? void 0 : _onChangeLatest$curre.call(onChangeLatest, sourceCode);
+      onChange === null || onChange === void 0 ? void 0 : onChange(sourceCode);
     }
   }, [sourceCode]);
 
@@ -96,7 +91,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         {
           e.preventDefault();
           if (startOffset < endOffset) {
-            e.clipboardData.setData('text/plain', sourceCodeLatest.current.slice(startOffset, endOffset));
+            e.clipboardData.setData('text/plain', sourceCode.slice(startOffset, endOffset));
             if (e.type === 'cut') {
               dispatch({
                 type: 'delete',
@@ -118,9 +113,8 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               selection: selection
             });
           } else if (e.clipboardData.types.includes('Files')) {
-            var _onInsertFileLatest$c;
             var _file = e.clipboardData.files[0];
-            (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call(onInsertFileLatest, _file, {
+            onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
               description: _file.name,
               image: _file.type.startsWith('image/')
             });
@@ -134,6 +128,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * 开始组合时的选区
    */
   var compositionStartSelection = useRef();
+  var compositionEndTimer = useRef();
   var compositionEventHandler = function compositionEventHandler(e) {
     switch (e.type) {
       case 'compositionend':
@@ -147,7 +142,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               selection: compositionStartSelection.current
             });
             // 确保组合事件屏蔽表单和键盘事件
-            window.setTimeout(function () {
+            compositionEndTimer.current = window.setTimeout(function () {
               return compositionStartSelection.current = undefined;
             });
           }
@@ -155,6 +150,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
       case 'compositionstart':
         {
+          window.clearTimeout(compositionEndTimer.current);
           compositionStartSelection.current = getSelection();
           break;
         }
@@ -195,6 +191,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var formEventHandler = function formEventHandler(e) {
     if (compositionStartSelection.current) {
+      e.preventDefault();
       return;
     }
     switch (e.type) {
@@ -214,24 +211,24 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
-  var _composeHandlers = composeHandlers(plugins)({
-      toolbarItemMap: getDefaultToolbarItemMap(locale, onInsertFileLatest.current),
+  var options = useMemo(function () {
+    return composeHandlers(plugins)({
+      toolbarItemMap: getDefaultToolbarItemMap(locale, onInsertFile),
       toolbarItems: getDefaultToolbarItems(),
       keyboardEventHandlers: getDefaultKeyboardEventHandlers()
-    }),
-    toolbarItemMap = _composeHandlers.toolbarItemMap,
-    toolbarItems = _composeHandlers.toolbarItems,
-    keyboardEventHandlers = _composeHandlers.keyboardEventHandlers;
+    });
+  }, [plugins]);
   var keyboardEventHandler = function keyboardEventHandler(e) {
     if (compositionStartSelection.current) {
+      e.preventDefault();
       return;
     }
     switch (e.type) {
       case 'keydown':
         {
-          composeHandlers(keyboardEventHandlers)({
-            history: historyLatest.current,
-            sourceCode: sourceCodeLatest.current,
+          composeHandlers(options.keyboardEventHandlers)({
+            history: history,
+            sourceCode: sourceCode,
             selection: getSelection(),
             dispatch: dispatch,
             e: e
@@ -245,8 +242,8 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: classNames(toolbarClassName),
     style: toolbarStyle,
-    itemMap: toolbarItemMap,
-    items: toolbarItems,
+    itemMap: options.toolbarItemMap,
+    items: options.toolbarItems,
     exec: exec
   }), /*#__PURE__*/React.createElement("div", {
     ref: container.ref,

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

@@ -1,5 +1,22 @@
+import type { Components } from 'hast-util-to-jsx-runtime';
 import React from 'react';
-import type { ViewerOptions } from '../utils/markdown';
+import type { Schema } from '../utils/markdown';
+export interface ViewerOptions {
+    /**
+     * 自定义过滤模式
+     */
+    customSchema: Schema;
+    /**
+     * 自定义 HTML 元素
+     */
+    customHTMLElements: Partial<Components>;
+    /**
+     * 自定义块
+     */
+    customBlocks: Partial<Record<string, React.ComponentType<{
+        children: string;
+    }>>>;
+}
 export interface XStarMdViewerPlugin {
     (ctx: ViewerOptions): void;
 }
@@ -23,6 +40,10 @@ export interface XStarMdViewerProps {
      * 插件
      */
     plugins?: XStarMdViewerPlugin[];
+    /**
+     * 是否启用 Web Worker
+     */
+    enableWebWorker?: boolean;
 }
 declare const XStarMdViewer: React.ForwardRefExoticComponent<XStarMdViewerProps & React.RefAttributes<XStarMdViewerHandle>>;
 export default XStarMdViewer;

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

@@ -1,14 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import classNames from 'classnames';
-import React, { useImperativeHandle, useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { prefix } from "../utils/global";
 import { composeHandlers } from "../utils/handler";
-import { getDefaultSchema, viewerRender } from "../utils/markdown";
+import { getDefaultSchema, postViewerRender, preViewerRender, viewerRender } from "../utils/markdown";
 var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
-    plugins = _ref.plugins;
+    plugins = _ref.plugins,
+    enableWebWorker = _ref.enableWebWorker;
   var container = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -17,15 +19,47 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   }, []);
+  var options = useMemo(function () {
+    return composeHandlers(plugins)({
+      customSchema: getDefaultSchema(),
+      customHTMLElements: {},
+      customBlocks: {}
+    });
+  }, [plugins]);
+  var optionsLatest = useRef(options);
+  optionsLatest.current = options;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    children = _useState2[0],
+    setChildren = _useState2[1];
+  var worker = useRef();
+  useEffect(function () {
+    if (enableWebWorker) {
+      worker.current = new Worker(new URL('../../workers/markdown.worker.js', import.meta.url));
+      worker.current.addEventListener('message', function (_ref2) {
+        var data = _ref2.data;
+        return setChildren(postViewerRender(data, optionsLatest.current));
+      });
+      return function () {
+        var _worker$current;
+        return (_worker$current = worker.current) === null || _worker$current === void 0 ? void 0 : _worker$current.terminate();
+      };
+    }
+  }, [enableWebWorker]);
+  useEffect(function () {
+    var params = [preViewerRender(value), options.customSchema];
+    if (enableWebWorker) {
+      var _worker$current2;
+      (_worker$current2 = worker.current) === null || _worker$current2 === void 0 ? void 0 : _worker$current2.postMessage(params);
+    } else {
+      setChildren(postViewerRender(viewerRender.apply(void 0, params), options));
+    }
+  }, [value, options]);
   return /*#__PURE__*/React.createElement("div", {
     ref: container,
     className: classNames("".concat(prefix, "md-viewer"), className),
     style: style
-  }, viewerRender(value, composeHandlers(plugins)({
-    customSchema: getDefaultSchema(),
-    customHTMLElements: {},
-    customBlocks: {}
-  })));
+  }, children);
 });
 if (process.env.NODE_ENV !== 'production') {
   XStarMdViewer.displayName = 'XStarMdViewer';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "x-star-editor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "workers"
   ],
   "scripts": {
     "build": "father build && sass src:dist --no-source-map",
@@ -44,6 +45,7 @@
     ]
   },
   "dependencies": {
+    "@babel/runtime": "^7.22.11",
     "classnames": "^2.3.2",
     "hast-util-to-jsx-runtime": "^1.2.0",
     "rehype-katex": "^6.0.3",