x-star-editor 0.2.4 → 0.2.6

package/dist/utils/history.js

@@ -97,10 +97,14 @@ var stateReducer = function stateReducer(_ref, action) {
             }
           case 'code':
             {
-              var language = action.payload.language;
+              var _action$payload2 = action.payload,
+                lang = _action$payload2.lang,
+                value = _action$payload2.value,
+                showLineNumbers = _action$payload2.showLineNumbers;
+              var _startOffset = lineEndOffset + lang.length + (showLineNumbers ? 21 : 5);
               return {
-                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n```").concat(language, " showLineNumbers\n\n```\n").concat(lineAfter),
-                selection: createSelection(lineEndOffset + language.length + 21)
+                sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n```").concat(lang).concat(showLineNumbers ? ' showLineNumbers' : '', "\n").concat(value, "\n```\n").concat(lineAfter),
+                selection: createSelection(_startOffset, _startOffset + value.length)
               };
             }
           case 'delete':
@@ -139,9 +143,9 @@ var stateReducer = function stateReducer(_ref, action) {
                 });
               });
               for (var _i3 = 0; _i3 < _values.length; _i3++) {
-                var value = _values[_i3];
-                if (value) {
-                  _lines[_i3] = _lines[_i3].replace(new RegExp("^ {0,3}#{".concat(value, "} +")), '');
+                var _value = _values[_i3];
+                if (_value) {
+                  _lines[_i3] = _lines[_i3].replace(new RegExp("^ {0,3}#{".concat(_value, "} +")), '');
                 }
               }
               if (_values.some(function (value) {
@@ -160,10 +164,10 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'image':
           case 'link':
             {
-              var _action$payload2 = action.payload,
-                _type = _action$payload2.type,
-                url = _action$payload2.url,
-                description = _action$payload2.description;
+              var _action$payload3 = action.payload,
+                _type = _action$payload3.type,
+                url = _action$payload3.url,
+                description = _action$payload3.description;
               return {
                 sourceCode: "".concat(before).concat(_type === 'link' ? '' : '!', "[").concat(description, "](").concat(url, ")").concat(after),
                 selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'link' ? 0 : 1))
@@ -192,9 +196,9 @@ var stateReducer = function stateReducer(_ref, action) {
       }
     case 'set':
       {
-        var _action$payload3 = action.payload,
-          _sourceCode = _action$payload3.sourceCode,
-          selection = _action$payload3.selection;
+        var _action$payload4 = action.payload,
+          _sourceCode = _action$payload4.sourceCode,
+          selection = _action$payload4.selection;
         return {
           sourceCode: _sourceCode.replace(/\r\n?/g, '\n'),
           selection: selection

package/dist/utils/markdown.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Root as HastRoot } from 'hast';
 import { defaultSchema } from 'rehype-sanitize';
 import type { ViewerOptions } from '../x-star-md-viewer';
 /**
@@ -8,21 +9,13 @@ import type { ViewerOptions } from '../x-star-md-viewer';
  * @returns DOM 树
  */
 export declare const editorRender: (sourceCode: string) => HTMLDivElement;
-/**
- * 将 Mdast 树转成 Hast 树的处理器
- */
-declare const toHastProcessor: import("unified").FrozenProcessor<import("mdast").Root, import("hast").Root, import("hast").Root, void>;
-/**
- * Hast 根节点
- */
-export type HastRoot = Awaited<ReturnType<(typeof toHastProcessor)['run']>>;
 /**
  * 将 Markdown 文本转成 Hast 树
  *
  * @param sourceCode Markdown 文本
  * @returns Hast 树
  */
-export declare const preViewerRender: (sourceCode: string) => Promise<import("hast").Root>;
+export declare const preViewerRender: (sourceCode: string) => Promise<HastRoot>;
 /**
  * 过滤模式
  */
@@ -35,7 +28,7 @@ export declare const getDefaultSchema: () => Schema;
  * @param schema 过滤模式
  * @returns 新的 Hast 树
  */
-export declare const viewerRender: (root: HastRoot, schema: Schema) => import("hast").Root;
+export declare const viewerRender: (root: HastRoot, schema: Schema) => HastRoot;
 /**
  * 将 Hast 树映射到 React 虚拟 DOM 树
  *
@@ -65,4 +58,3 @@ export declare const toMarkdown: (sourceCode: string) => string;
  * @returns 纯文本
  */
 export declare const toText: (sourceCode: string) => string;
-export {};

package/dist/utils/markdown.js

@@ -5,12 +5,13 @@ 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';
 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';
+import rehypeRemark, { defaultHandlers } from 'rehype-remark';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
 import remarkBreaks from 'remark-breaks';
@@ -22,16 +23,15 @@ import remarkStringify from 'remark-stringify';
 import strip from 'strip-markdown';
 import { unified } from 'unified';
 import { prefix } from "./global";
+import rehypeLine from "./rehype/rehype-line";
+import rehypeMath, { isMathNode } from "./rehype/rehype-math";
+import rehypeRawPositions from "./rehype/rehype-raw-positions";
 
 /**
  * 将 Markdown 文本解析为 Mdast 树的处理器
  */
 var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).freeze();
 
-/**
- * Mdast 根节点
- */
-
 /**
  * 带缓存的解析函数
  *
@@ -46,10 +46,6 @@ var cachedParse = function () {
   };
 }();
 
-/**
- * Mdast 节点
- */
-
 /**
  * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
  *
@@ -231,6 +227,7 @@ export var editorRender = function editorRender(sourceCode) {
           // 如果栈大小为 1，说明为块级元素终点
           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();
           scanOffset++;
@@ -278,11 +275,7 @@ var toHastProcessor = unified().use(remarkBreaks).use(remarkRehype, {
   strategy: 'img-svg'
 }).use(rehypePrism, {
   ignoreMissing: true
-}).use(rehypeKatex).freeze();
-
-/**
- * Hast 根节点
- */
+}).freeze();
 
 /**
  * 将 Markdown 文本转成 Hast 树
@@ -341,25 +334,7 @@ export var getDefaultSchema = function getDefaultSchema() {
  * @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();
-      }
-    };
-  }).runSync(root);
+  return unified().use(rehypeRawPositions).use(rehypeRaw).use(rehypeMath).use(rehypeSanitize, schema).use(rehypeLine).runSync(root);
 };
 
 /**
@@ -370,25 +345,35 @@ export var viewerRender = function viewerRender(root, schema) {
  * @returns React 虚拟 DOM 树
  */
 export var postViewerRender = function postViewerRender(root, options) {
-  return toJsxRuntime(root, {
+  var components = _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
+    custom: function custom(props) {
+      var _options$customBlocks;
+      return jsx((_options$customBlocks = options.customBlocks[props.meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
+        children: props.value
+      });
+    }
+  });
+  return toJsxRuntime(unified().use(rehypeKatex).runSync(root), {
     Fragment: Fragment,
     jsx: jsx,
     jsxs: jsxs,
-    components: _objectSpread(_objectSpread({}, options.customHTMLElements), {}, {
-      custom: function custom(_ref2) {
-        var _options$customBlocks;
-        var meta = _ref2.meta,
-          value = _ref2.value;
-        return jsx((_options$customBlocks = options.customBlocks[meta]) !== null && _options$customBlocks !== void 0 ? _options$customBlocks : 'div', {
-          children: value
-        });
-      }
-    })
+    components: components
   });
 };
-var toHTMLProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkRehype, {
-  allowDangerousHtml: true
-}).use(rehypeRaw).use(rehypeStringify).freeze();
+var toHTMLProcessor = unified().use(remarkParse).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(rehypeRawPositions).use(rehypeRaw).use(rehypeMath).use(rehypeStringify).freeze();
 
 /**
  * 将 Markdown 文本转成 HTML 文本
@@ -400,8 +385,21 @@ export var toHTML = function toHTML(sourceCode) {
   return toHTMLProcessor.processSync(sourceCode).toString();
 };
 var toMarkdownProcessor = unified().use(rehypeRemark, {
-  newlines: true
-}).use(remarkGfm).use(remarkStringify).freeze();
+  newlines: true,
+  handlers: {
+    div: function div(h, node) {
+      return isMathNode(node) ? h(node, 'math', hastToText(node)) : defaultHandlers.div(h, node);
+    },
+    span: function span(h, node) {
+      return isMathNode(node) ? h(node, 'inlineMath', hastToText(node)) : defaultHandlers.span(h, node);
+    },
+    custom: function custom(h, node) {
+      return h(node, 'math', {
+        meta: node.properties.meta
+      }, node.properties.value);
+    }
+  }
+}).use(remarkMath).use(remarkGfm).use(remarkStringify).freeze();
 
 /**
  * 将带有 HTML 的 Markdown 文本转成 Markdown 文本
@@ -412,7 +410,14 @@ var toMarkdownProcessor = unified().use(rehypeRemark, {
 export var toMarkdown = function toMarkdown(sourceCode) {
   return toMarkdownProcessor.stringify(toMarkdownProcessor.runSync(toHTMLProcessor.runSync(toHTMLProcessor.parse(sourceCode))));
 };
-var toTextProcessor = unified().use(remarkParse).use(remarkGfm).use(strip).use(remarkStringify).freeze();
+var toTextProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).use(strip, {
+  remove: ['math', ['inlineMath', function (node) {
+    return {
+      type: 'text',
+      value: node.value
+    };
+  }]]
+}).use(remarkStringify).freeze();
 
 /**
  * 将 Markdown 文本转成纯文本

package/dist/utils/rehype/rehype-line.d.ts

@@ -0,0 +1,6 @@
+import type { Root as HastRoot } from 'hast';
+/**
+ * 为第一层 Hast 节点添加行号属性
+ */
+declare const rehypeLine: () => (root: HastRoot) => void;
+export default rehypeLine;

package/dist/utils/rehype/rehype-line.js

@@ -0,0 +1,17 @@
+import { SKIP, visit } from 'unist-util-visit';
+
+/**
+ * 为第一层 Hast 节点添加行号属性
+ */
+var rehypeLine = function rehypeLine() {
+  return function (root) {
+    return visit(root, 'element', function (node) {
+      var _node$properties, _node$position;
+      (_node$properties = node.properties) !== null && _node$properties !== void 0 ? _node$properties : node.properties = {};
+      // 记录行号，用于同步滚动
+      node.properties['data-line'] = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.line;
+      return SKIP;
+    });
+  };
+};
+export default rehypeLine;

package/dist/utils/rehype/rehype-math.d.ts

@@ -0,0 +1,13 @@
+import type { RootContent as HastNode, Root as HastRoot } from 'hast';
+/**
+ * 判断一个 Hast 节点是否属于行内公式或公式块
+ *
+ * @param node Hast 节点
+ * @returns 是否属于行内公式或公式块
+ */
+export declare const isMathNode: (node: HastRoot | HastNode) => boolean | undefined;
+/**
+ * 解析属于 Raw 节点的文本中的数学公式
+ */
+declare const rehypeMath: () => (root: HastRoot) => void;
+export default rehypeMath;

package/dist/utils/rehype/rehype-math.js

@@ -0,0 +1,175 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { EXIT, SKIP, visit } from 'unist-util-visit';
+
+/**
+ * 判断一个 Hast 节点是否属于行内代码或代码块
+ *
+ * @param node Hast 节点
+ * @returns 是否属于行内代码或代码块
+ */
+var isCodeNode = function isCodeNode(node) {
+  return node.type === 'element' && node.tagName === 'code';
+};
+
+/**
+ * 判断一个 Hast 节点是否属于行内公式或公式块
+ *
+ * @param node Hast 节点
+ * @returns 是否属于行内公式或公式块
+ */
+export var isMathNode = function isMathNode(node) {
+  var _node$properties, _node$properties2;
+  return node.type === 'element' && Array.isArray((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.className) && ((_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.className.includes('math'));
+};
+
+/**
+ * 解析文本中的公式
+ *
+ * @param text 文本
+ * @returns Hast 节点
+ */
+var parseMath = function parseMath(text) {
+  var result = [];
+
+  /**
+   * 扫描文本
+   */
+  var scan = '';
+
+  /**
+   * 是否转义
+   */
+  var escape = false;
+
+  /**
+   * 连续 `$` 的数量
+   */
+  var level = 0;
+
+  /**
+   * 是否在行内公式中
+   */
+  var inline = false;
+
+  /**
+   * 是否在公式块中
+   */
+  var block = false;
+  var push = function push() {
+    if (level === 1 && !block) {
+      result.push(inline ? {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['math', 'math-inline']
+        },
+        children: [{
+          type: 'text',
+          value: scan
+        }]
+      } : {
+        type: 'text',
+        value: scan
+      });
+      scan = '';
+      inline = !inline;
+    } else if (level === 2 && !inline) {
+      result.push(block ? {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          className: ['math', 'math-display']
+        },
+        children: [{
+          type: 'text',
+          value: scan
+        }]
+      } : {
+        type: 'text',
+        value: scan
+      });
+      scan = '';
+      block = !block;
+    } else if (level) {
+      scan += '$'.repeat(level);
+    }
+    level = 0;
+  };
+  for (var i = 0; i <= text.length; i++) {
+    var _text$i;
+    var c = (_text$i = text[i]) !== null && _text$i !== void 0 ? _text$i : '';
+    if (escape) {
+      if (c === '\\') {
+        scan += c;
+      } else {
+        scan += c === '$' ? c : "\\".concat(c);
+        escape = false;
+      }
+    } else if (c === '$') {
+      level++;
+    } else {
+      push();
+      if (c === '\\') {
+        escape = true;
+      } else {
+        scan += c;
+      }
+    }
+  }
+  if (scan) {
+    result.push({
+      type: 'text',
+      value: scan
+    });
+  }
+  return result;
+};
+
+/**
+ * 解析属于 Raw 节点的文本中的数学公式
+ */
+var rehypeMath = function rehypeMath() {
+  return function (root) {
+    var rawPositions = [];
+    var i = 0;
+
+    // 获取 rehype-raw-positions 记录的 Raw 节点的位置信息
+    visit(root, {
+      tagName: 'raw-positions'
+    }, function (node, index, parent) {
+      var _node$properties3;
+      if (typeof ((_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.value) === 'string') {
+        rawPositions = node.properties.value.split(' ').map(function (offset) {
+          return parseInt(offset);
+        });
+      }
+      if (index !== null && parent) {
+        parent.children.splice(index);
+      }
+      return EXIT;
+    }, true);
+    if (rawPositions.length < 2) {
+      return;
+    }
+    visit(root, function (node, index, parent) {
+      if (isCodeNode(node) || isMathNode(node)) {
+        return SKIP;
+      }
+      if (node.type === 'text' && index !== null && parent) {
+        var _node$position;
+        var startOffset = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.offset;
+        if (startOffset === undefined) {
+          return;
+        }
+        for (; i < rawPositions.length - 1 && rawPositions[i + 1] <= startOffset; i += 2);
+        if (i < rawPositions.length - 1 && rawPositions[i] <= startOffset) {
+          var _parent$children;
+          var result = parseMath(node.value);
+          (_parent$children = parent.children).splice.apply(_parent$children, [index, 1].concat(_toConsumableArray(result)));
+          return index + result.length;
+        }
+      }
+    });
+  };
+};
+export default rehypeMath;

package/dist/utils/rehype/rehype-raw-positions.d.ts

@@ -0,0 +1,6 @@
+import type { Root as HastRoot } from 'hast';
+/**
+ * 保存 Raw 节点的位置信息
+ */
+declare const rehypeRawPositions: () => (root: HastRoot) => void;
+export default rehypeRawPositions;

package/dist/utils/rehype/rehype-raw-positions.js

@@ -0,0 +1,30 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * 保存 Raw 节点的位置信息
+ */
+var rehypeRawPositions = function rehypeRawPositions() {
+  return function (root) {
+    var rawPositions = [];
+    visit(root, 'raw', function (node) {
+      var _node$position, _node$position2;
+      var startOffset = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.offset;
+      var endOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : _node$position2.end.offset;
+      if (startOffset === undefined || endOffset === undefined) {
+        return;
+      }
+      rawPositions.push(startOffset, endOffset);
+    });
+
+    // 记录在新的 Hast 节点上，防止被 rehype-raw 删除
+    root.children.push({
+      type: 'element',
+      tagName: 'raw-positions',
+      properties: {
+        value: rawPositions.join(' ')
+      },
+      children: []
+    });
+  };
+};
+export default rehypeRawPositions;

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

@@ -238,12 +238,9 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   onInsertFileLatest.current = onInsertFile;
   var options = useMemo(function () {
     return composeHandlers(plugins)({
-      toolbarItemMap: getDefaultToolbarItemMap(locale, function () {
+      toolbarItemMap: getDefaultToolbarItemMap(locale, function (file, options) {
         var _onInsertFileLatest$c;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        return (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call.apply(_onInsertFileLatest$c, [onInsertFileLatest].concat(args));
+        return (_onInsertFileLatest$c = onInsertFileLatest.current) === null || _onInsertFileLatest$c === void 0 ? void 0 : _onInsertFileLatest$c.call(onInsertFileLatest, file, options);
       }),
       toolbarItems: getDefaultToolbarItems(),
       keyboardEventHandlers: getDefaultKeyboardEventHandlers()