x-star-editor 0.2.2 → 0.2.4

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);
+  };
+}();
 
 /**
  * 过滤模式
@@ -351,10 +375,10 @@ export var postViewerRender = function postViewerRender(root, options) {
     jsx: jsx,
     jsxs: jsxs,
     components: _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
-      custom: function custom(_ref) {
+      custom: function custom(_ref2) {
         var _options$customBlocks;
-        var meta = _ref.meta,
-          value = _ref.value;
+        var meta = _ref2.meta,
+          value = _ref2.value;
         return jsx((_options$customBlocks = options.customBlocks[meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
           children: value
         });
@@ -362,7 +386,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();
 
@@ -375,7 +399,9 @@ var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkBreaks
 export var toHTML = function toHTML(sourceCode) {
   return toHTMLProcessor.processSync(sourceCode).toString();
 };
-var toMarkdownProcessor = unified().use(rehypeRemark).use(remarkGfm).use(remarkStringify).freeze();
+var toMarkdownProcessor = unified().use(rehypeRemark, {
+  newlines: true
+}).use(remarkGfm).use(remarkStringify).freeze();
 
 /**
  * 将带有 HTML 的 Markdown 文本转成 Markdown 文本

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

@@ -19,11 +19,11 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onInsertFile = _ref.onInsertFile;
   var editorRef = useMdEditorRef();
   var viewerRef = useMdViewerRef();
-  var container = useRef(null);
+  var containerRef = useRef(null);
   useImperativeHandle(ref, function () {
     return _objectSpread(_objectSpread(_objectSpread({}, editorRef.current), viewerRef.current), {}, {
       getContainer: function getContainer() {
-        return container.current;
+        return containerRef.current;
       }
     });
   }, []);
@@ -135,7 +135,7 @@ var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     value = _useState2[0],
     setValue = _useState2[1];
   return /*#__PURE__*/React.createElement("div", {
-    ref: container,
+    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