x-star-editor 0.2.1 → 0.2.3

package/dist/utils/markdown.js

@@ -1,10 +1,13 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import rehypeKatex from 'rehype-katex';
+import rehypeMermaid from 'rehype-mermaidjs';
 import rehypePrism from 'rehype-prism-plus';
 import rehypeRaw from 'rehype-raw';
 import rehypeRemark from 'rehype-remark';
@@ -77,7 +80,7 @@ export var editorRender = function editorRender(sourceCode) {
   /**
    * DOM 树根元素
    */
-  var el = document.createElement('div');
+  var root = document.createElement('div');
 
   /**
    * 判断一个 Mdast 节点的子节点是否为流内容
@@ -98,16 +101,16 @@ export var editorRender = function editorRender(sourceCode) {
     var node = stack[index].node;
 
     // 如果节点为流内容，则将样式添加到该行的 `<div>` 元素上，否则添加到该节点的元素上
-    var styleElement = stack[index && !isFlowContent(stack[index - 1].node) ? index : 0].el;
+    var styleElement = stack[index && !isFlowContent(stack[index - 1].node) ? index : 0].element;
     styleElement.classList.add("".concat(mdPrefix).concat(node.type));
     if (node.type === 'heading') {
       styleElement.classList.add("".concat(mdPrefix, "heading-").concat(node.depth));
     }
 
     // 如果索引为 0，则父节点为块级元素，否则为前一个索引的 DOM 元素
-    var parentElement = index ? stack[index - 1].el : block;
-    parentElement.append(stack[index].el);
-    stack[index].el = document.createElement(index ? 'span' : 'div');
+    var parentElement = index ? stack[index - 1].element : block;
+    parentElement.append(stack[index].element);
+    stack[index].element = document.createElement(index ? 'span' : 'div');
     stack[index].counter++;
   };
 
@@ -115,7 +118,7 @@ export var editorRender = function editorRender(sourceCode) {
    * 将块级元素推到 DOM 树根元素中
    */
   var pushBlock = function pushBlock() {
-    el.append(block);
+    root.append(block);
     block = document.createElement('div');
   };
 
@@ -157,16 +160,16 @@ export var editorRender = function editorRender(sourceCode) {
     if (stack.length) {
       // 如果栈不为空，说明为块级元素内的文本，每一行都应推到块级元素中
       if (lines[0]) {
-        stack[stack.length - 1].el.append(delimiter ? createDelimiter(lines[0]) : lines[0]);
+        stack[stack.length - 1].element.append(delimiter ? createDelimiter(lines[0]) : lines[0]);
       }
       for (var i = 1; i < lines.length; i++) {
         for (var j = stack.length - 1; j; j--) {
           pushElement(j);
         }
-        stack[0].el.append("\u200B");
+        stack[0].element.append("\u200B");
         pushElement(0);
         if (lines[i]) {
-          stack[stack.length - 1].el.append(delimiter ? createDelimiter(lines[i]) : lines[i]);
+          stack[stack.length - 1].element.append(delimiter ? createDelimiter(lines[i]) : lines[i]);
         }
       }
       scanOffset += text.length;
@@ -213,7 +216,7 @@ export var editorRender = function editorRender(sourceCode) {
         // 为 Mdast 节点创建 DOM 元素
         stack.push({
           node: node,
-          el: document.createElement(stack.length ? 'span' : 'div'),
+          element: document.createElement(stack.length ? 'span' : 'div'),
           counter: 0
         });
         if ('children' in node) {
@@ -226,7 +229,7 @@ export var editorRender = function editorRender(sourceCode) {
         } else {
           var _node$position3;
           // 如果栈大小为 1，说明为块级元素终点
-          stack[0].el.append("\u200B");
+          stack[0].element.append("\u200B");
           pushElement(0);
           block.dataset.line = "".concat((_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.start.line);
           pushBlock();
@@ -249,7 +252,7 @@ export var editorRender = function editorRender(sourceCode) {
     block.append(createLine(sourceCode.slice(scanOffset)));
     pushBlock();
   }
-  return el;
+  return root;
 };
 
 /**
@@ -268,6 +271,11 @@ var toHastProcessor = unified().use(remarkBreaks).use(remarkRehype, {
       );
     }
   }
+}).use(rehypeMermaid, {
+  errorFallback: function errorFallback(element) {
+    return element;
+  },
+  strategy: 'img-svg'
 }).use(rehypePrism, {
   ignoreMissing: true
 }).use(rehypeKatex).freeze();
@@ -282,9 +290,25 @@ var toHastProcessor = unified().use(remarkBreaks).use(remarkRehype, {
  * @param sourceCode Markdown 文本
  * @returns Hast 树
  */
-export var preViewerRender = function preViewerRender(sourceCode) {
-  return toHastProcessor.runSync(cachedParse(sourceCode));
-};
+export var preViewerRender = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(sourceCode) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return toHastProcessor.run(cachedParse(sourceCode));
+        case 2:
+          return _context.abrupt("return", _context.sent);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function preViewerRender(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 /**
  * 过滤模式
@@ -316,27 +340,43 @@ export var getDefaultSchema = function getDefaultSchema() {
  * @param schema 过滤模式
  * @returns 新的 Hast 树
  */
-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;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var node = _step2.value;
-          if ('properties' in node && node.properties) {
-            var _node$position4;
-            node.properties['data-line'] = (_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+export var viewerRender = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(root, schema) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return unified().use(rehypeRaw).use(rehypeSanitize, schema).use(function () {
+            return function (root) {
+              var _iterator2 = _createForOfIteratorHelper(root.children),
+                _step2;
+              try {
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  var node = _step2.value;
+                  if ('properties' in node && node.properties) {
+                    var _node$position4;
+                    node.properties['data-line'] = (_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line;
+                  }
+                }
+              } catch (err) {
+                _iterator2.e(err);
+              } finally {
+                _iterator2.f();
+              }
+            };
+          }).run(root);
+        case 2:
+          return _context2.abrupt("return", _context2.sent);
+        case 3:
+        case "end":
+          return _context2.stop();
       }
-    };
-  }).runSync(root);
-};
+    }, _callee2);
+  }));
+  return function viewerRender(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 
 /**
  * 将 Hast 树映射到 React 虚拟 DOM 树
@@ -351,10 +391,10 @@ export var postViewerRender = function postViewerRender(root, options) {
     jsx: jsx,
     jsxs: jsxs,
     components: _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
-      custom: function custom(_ref) {
+      custom: function custom(_ref3) {
         var _options$customBlocks;
-        var meta = _ref.meta,
-          value = _ref.value;
+        var meta = _ref3.meta,
+          value = _ref3.value;
         return jsx((_options$customBlocks = options.customBlocks[meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
           children: value
         });
@@ -362,7 +402,7 @@ export var postViewerRender = function postViewerRender(root, options) {
     })
   });
 };
-var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkBreaks).use(remarkRehype, {
+var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype, {
   allowDangerousHtml: true
 }).use(rehypeRaw).use(rehypeStringify).freeze();
 
@@ -372,10 +412,28 @@ var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkBreaks
  * @param sourceCode Markdown 文本
  * @returns HTML 文本
  */
-export var toHTML = function toHTML(sourceCode) {
-  return toHTMLProcessor.processSync(sourceCode).toString();
-};
-var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkStringify).freeze();
+export var toHTML = /*#__PURE__*/function () {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(sourceCode) {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return toHTMLProcessor.process(sourceCode);
+        case 2:
+          return _context3.abrupt("return", _context3.sent.toString());
+        case 3:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function toHTML(_x4) {
+    return _ref4.apply(this, arguments);
+  };
+}();
+var toMarkdownProcessor = unified().use(rehypeRemark, {
+  newlines: true
+}).use(remarkGfm).use(remarkStringify).freeze();
 
 /**
  * 将带有 HTML 的 Markdown 文本转成 Markdown 文本
@@ -383,10 +441,33 @@ var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkS
  * @param sourceCode 带有 HTML 的 Markdown 文本
  * @returns Markdown 文本
  */
-export var toMarkdown = function toMarkdown(sourceCode) {
-  return toMarkdownProcessor.stringify(toMarkdownProcessor.runSync(toHTMLProcessor.runSync(toHTMLProcessor.parse(sourceCode))));
-};
-var toTextProcessor = unified().use(strip).freeze();
+export var toMarkdown = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(sourceCode) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.t0 = toMarkdownProcessor;
+          _context4.t1 = toMarkdownProcessor;
+          _context4.next = 4;
+          return toHTMLProcessor.run(toHTMLProcessor.parse(sourceCode));
+        case 4:
+          _context4.t2 = _context4.sent;
+          _context4.next = 7;
+          return _context4.t1.run.call(_context4.t1, _context4.t2);
+        case 7:
+          _context4.t3 = _context4.sent;
+          return _context4.abrupt("return", _context4.t0.stringify.call(_context4.t0, _context4.t3));
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function toMarkdown(_x5) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+var toTextProcessor = unified().use(remarkParse).use(remarkGfm).use(strip).use(remarkStringify).freeze();
 
 /**
  * 将 Markdown 文本转成纯文本
@@ -394,6 +475,22 @@ var toTextProcessor = unified().use(strip).freeze();
  * @param sourceCode Markdown 文本
  * @returns 纯文本
  */
-export var toText = function toText(sourceCode) {
-  return toTextProcessor.processSync(sourceCode).toString();
-};
+export var toText = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(sourceCode) {
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return toTextProcessor.process(sourceCode);
+        case 2:
+          return _context5.abrupt("return", _context5.sent.toString());
+        case 3:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return function toText(_x6) {
+    return _ref6.apply(this, arguments);
+  };
+}();

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { XStarMdEditorHandle, XStarMdEditorProps } from '../x-star-md-editor';
 import type { XStarMdViewerHandle, XStarMdViewerProps } from '../x-star-md-viewer';
 export interface XStarEditorHandle extends XStarMdEditorHandle, XStarMdViewerHandle {
+    getContainer: () => HTMLDivElement;
 }
 export interface XStarEditorProps {
     /**
@@ -13,7 +14,7 @@ export interface XStarEditorProps {
      */
     style?: React.CSSProperties;
     /**
-     * 编辑器和浏览器的高度（不包括工具栏）
+     * 编辑器和查看器的高度（不包括工具栏）
      */
     height?: React.CSSProperties['height'];
     /**
@@ -33,7 +34,7 @@ export interface XStarEditorProps {
      */
     editorProps?: Omit<XStarMdEditorProps, 'height' | 'locale' | 'initialValue' | 'onChange' | 'onInsertFile'>;
     /**
-     * 浏览器属性
+     * 查看器属性
      */
     viewerProps?: Omit<XStarMdViewerProps, 'height' | 'value' | 'enableWebWorker'>;
     /**

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

@@ -1,6 +1,6 @@
 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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { prefix } from "../utils/global";
@@ -17,14 +17,15 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     viewerProps = _ref.viewerProps,
     _onChange = _ref.onChange,
     onInsertFile = _ref.onInsertFile;
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
   var editorRef = useMdEditorRef();
   var viewerRef = useMdViewerRef();
+  var containerRef = useRef(null);
   useImperativeHandle(ref, function () {
-    return _objectSpread(_objectSpread({}, editorRef.current), viewerRef.current);
+    return _objectSpread(_objectSpread(_objectSpread({}, editorRef.current), viewerRef.current), {}, {
+      getContainer: function getContainer() {
+        return containerRef.current;
+      }
+    });
   }, []);
 
   // 同步滚动
@@ -129,7 +130,12 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     };
   }, []);
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: classNames("".concat(prefix, "editor"), className),
     style: style
   }, /*#__PURE__*/React.createElement(XStarMdEditor, _extends({

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

@@ -19,7 +19,8 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     plugins = _ref.plugins,
     onChange = _ref.onChange,
     onInsertFile = _ref.onInsertFile;
-  var container = useContainer();
+  var containerRef = useRef(null);
+  var container = useContainer(containerRef);
   var _useHistory = useHistory(initialValue),
     history = _useHistory.history,
     sourceCode = _useHistory.sourceCode,
@@ -78,7 +79,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return {
       exec: exec,
       getEditorContainer: function getEditorContainer() {
-        return container.ref.current;
+        return containerRef.current;
       }
     };
   }, []);
@@ -276,7 +277,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     items: options.toolbarItems,
     exec: exec
   }), /*#__PURE__*/React.createElement("div", {
-    ref: container.ref,
+    ref: containerRef,
     className: classNames("".concat(prefix, "md-editor"), className),
     style: _objectSpread(_objectSpread({}, style), {}, {
       height: height

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

@@ -33,7 +33,7 @@ export interface XStarMdViewerProps {
      */
     style?: React.CSSProperties;
     /**
-     * 浏览器的高度
+     * 查看器的高度
      */
     height?: React.CSSProperties['height'];
     /**