x-star-editor 0.0.2 → 0.0.3

package/dist/XStarEditor/index.d.ts

@@ -1,12 +1,17 @@
 import React from 'react';
-import type { XStarMdEditorProps } from '../XStarMdEditor';
-import type { XStarMdViewerProps } from '../XStarMdViewer';
-export interface XStarMDProps {
+import type { XStarMdEditorHandle, XStarMdEditorProps } from '../XStarMdEditor';
+import type { XStarMdViewerHandle, XStarMdViewerProps } from '../XStarMdViewer';
+export interface XStarEditorHandle {
+    getEditor: () => XStarMdEditorHandle | null;
+    getViewer: () => XStarMdViewerHandle | null;
+}
+export interface XStarEditorProps {
     height?: React.CSSProperties['height'];
     initialValue?: string;
     editorProps?: Omit<XStarMdEditorProps, 'initialValue' | 'onChange'>;
     viewerProps?: Omit<XStarMdViewerProps, 'value'>;
     onChange?: (value: string) => void;
 }
-declare const XStarEditor: ({ height, initialValue, editorProps, viewerProps, onChange, }: XStarMDProps) => React.JSX.Element;
+declare const XStarEditor: React.ForwardRefExoticComponent<XStarEditorProps & React.RefAttributes<XStarEditorHandle>>;
 export default XStarEditor;
+export declare const useEditorRef: () => React.RefObject<XStarEditorHandle>;

package/dist/XStarEditor/index.js

@@ -12,12 +12,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 classNames from 'classnames/bind';
-import React, { useEffect, useRef, useState } from 'react';
-import XStarMdEditor from "../XStarMdEditor";
-import XStarMdViewer from "../XStarMdViewer";
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import XStarMdEditor, { useMdEditorRef } from "../XStarMdEditor";
+import XStarMdViewer, { useMdViewerRef } from "../XStarMdViewer";
 import styles from "./index.module.css";
 var cx = classNames.bind(styles);
-var XStarEditor = function XStarEditor(_ref) {
+var XStarEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var height = _ref.height,
     initialValue = _ref.initialValue,
     editorProps = _ref.editorProps,
@@ -27,44 +27,94 @@ var XStarEditor = function XStarEditor(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var editorRef = useRef(null);
-  var viewerRef = useRef(null);
+  var editorRef = useMdEditorRef();
+  var viewerRef = useMdViewerRef();
+  useImperativeHandle(ref, function () {
+    return {
+      getEditor: function getEditor() {
+        return editorRef.current;
+      },
+      getViewer: function getViewer() {
+        return viewerRef.current;
+      }
+    };
+  }, []);
+
+  // 同步滚动
   useEffect(function () {
     var _editorRef$current, _viewerRef$current;
     var editor = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getContainer();
     var viewer = (_viewerRef$current = viewerRef.current) === null || _viewerRef$current === void 0 ? void 0 : _viewerRef$current.getContainer();
 
     /**
-     * 获取一个父元素的子元素到父元素顶部的距离
+     * 获取两个父元素的子元素到各自父元素顶部的距离
      *
-     * @param element 父元素
-     * @param index 是否只考虑有 `index` 属性的子元素
-     * @returns 子元素到父元素顶部的距离
+     * @param fromElement 第一个父元素
+     * @param toElement 第二个父元素
+     * @returns 子元素到各自父元素顶部的距离
      */
-    var getOffsetTops = function getOffsetTops(element, index) {
-      var offsetTops = [0];
-      for (var i = 0; i < element.children.length; i++) {
-        var child = element.children[i];
-        if (child instanceof HTMLElement && (!index || child.hasAttribute('index'))) {
-          offsetTops.push(child.offsetTop);
+    var getOffsetTops = function getOffsetTops(fromElement, toElement) {
+      var fromOffsetTops = [0];
+      var toOffsetTops = [0];
+      var fromLimit = fromElement.scrollHeight - fromElement.clientHeight;
+      var toLimit = toElement.scrollHeight - toElement.clientHeight;
+      if (fromLimit > 0 && toLimit > 0) {
+        for (var i = 0, j = 0; i < fromElement.children.length && j < toElement.children.length;) {
+          var _fromChild$getAttribu, _toChild$getAttribute;
+          var fromChild = fromElement.children[i];
+          var toChild = toElement.children[j];
+          var fromLine = parseInt((_fromChild$getAttribu = fromChild.getAttribute('line')) !== null && _fromChild$getAttribu !== void 0 ? _fromChild$getAttribu : '');
+          var toLine = parseInt((_toChild$getAttribute = toChild.getAttribute('line')) !== null && _toChild$getAttribute !== void 0 ? _toChild$getAttribute : '');
+          if (!(fromChild instanceof HTMLElement) || !fromLine) {
+            i++;
+          } else if (!(toChild instanceof HTMLElement) || !toLine) {
+            j++;
+          } else if (fromLine < toLine) {
+            i++;
+          } else if (fromLine > toLine) {
+            j++;
+          } else {
+            fromOffsetTops.push(fromChild.offsetTop);
+            toOffsetTops.push(toChild.offsetTop);
+            i++;
+            j++;
+          }
         }
+        for (; fromOffsetTops[fromOffsetTops.length - 1] >= fromLimit || toOffsetTops[toOffsetTops.length - 1] >= toLimit;) {
+          fromOffsetTops.pop();
+          toOffsetTops.pop();
+        }
+        fromOffsetTops.push(fromLimit);
+        toOffsetTops.push(toLimit);
       }
-      offsetTops.push(element.scrollHeight);
-      return offsetTops;
+      return [fromOffsetTops, toOffsetTops];
     };
+
+    /**
+     * 是否忽略下一个滚动事件
+     */
+    var ignoreNext = false;
     var listener = function listener(e) {
-      if (!editor || !viewer) {
+      var ignore = ignoreNext;
+      ignoreNext = false;
+      if (ignore || !editor || !viewer) {
         return;
       }
       var _ref2 = e.currentTarget === editor ? [editor, viewer] : [viewer, editor],
         _ref3 = _slicedToArray(_ref2, 2),
         fromElement = _ref3[0],
         toElement = _ref3[1];
-      var fromOffsetTops = getOffsetTops(fromElement, fromElement === editor);
-      var toOffsetTops = getOffsetTops(toElement, toElement === editor);
+      var _getOffsetTops = getOffsetTops(fromElement, toElement),
+        _getOffsetTops2 = _slicedToArray(_getOffsetTops, 2),
+        fromOffsetTops = _getOffsetTops2[0],
+        toOffsetTops = _getOffsetTops2[1];
       for (var i = 0; i < fromOffsetTops.length - 1; i++) {
         if (fromOffsetTops[i] <= fromElement.scrollTop && fromElement.scrollTop < fromOffsetTops[i + 1]) {
-          toElement.scrollTop = (fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i];
+          var scrollTop = (fromElement.scrollTop - fromOffsetTops[i]) / (fromOffsetTops[i + 1] - fromOffsetTops[i]) * (toOffsetTops[i + 1] - toOffsetTops[i]) + toOffsetTops[i];
+          if (toElement.scrollTop !== scrollTop) {
+            ignoreNext = true;
+            toElement.scrollTop = scrollTop;
+          }
           break;
         }
       }
@@ -110,5 +160,9 @@ var XStarEditor = function XStarEditor(_ref) {
     }, viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.style),
     value: value
   })));
-};
-export default XStarEditor;
+});
+XStarEditor.displayName = 'XStarEditor';
+export default XStarEditor;
+export var useEditorRef = function useEditorRef() {
+  return useRef(null);
+};

package/dist/XStarEditor/index.module.css

@@ -3,17 +3,17 @@
   flex-wrap: wrap;
 }
 
-.editor {
+.container .toolbar {
+  width: 100%;
+}
+
+.container .editor {
   flex: 1;
   border-bottom-right-radius: 0;
 }
 
-.viewer {
+.container .viewer {
   flex: 1;
   border-radius: 0;
   border-bottom-right-radius: 0.2em;
 }
-
-.toolbar {
-  width: 100%;
-}

package/dist/XStarMdEditor/index.d.ts

@@ -29,3 +29,4 @@ export interface XStarMdEditorProps {
 }
 declare const XStarMdEditor: React.ForwardRefExoticComponent<XStarMdEditorProps & React.RefAttributes<XStarMdEditorHandle>>;
 export default XStarMdEditor;
+export declare const useMdEditorRef: () => React.RefObject<XStarMdEditorHandle>;

package/dist/XStarMdEditor/index.js

@@ -260,4 +260,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 XStarMdEditor.displayName = 'XStarMdEditor';
-export default XStarMdEditor;
+export default XStarMdEditor;
+export var useMdEditorRef = function useMdEditorRef() {
+  return useRef(null);
+};

package/dist/XStarMdEditor/index.module.css

@@ -1,6 +1,5 @@
 .container {
   position: relative;
-  margin: 0 -1px;
   line-height: 1.6em;
   white-space: break-spaces;
   color: #000000d9;

package/dist/XStarMdViewer/index.d.ts

@@ -16,3 +16,4 @@ export interface XStarMdViewerProps {
 }
 declare const XStarMdViewer: React.ForwardRefExoticComponent<XStarMdViewerProps & React.RefAttributes<XStarMdViewerHandle>>;
 export default XStarMdViewer;
+export declare const useMdViewerRef: () => React.RefObject<XStarMdViewerHandle>;

package/dist/XStarMdViewer/index.js

@@ -30,4 +30,7 @@ var XStarMdViewer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 XStarMdViewer.displayName = 'XStarMdViewer';
-export default XStarMdViewer;
+export default XStarMdViewer;
+export var useMdViewerRef = function useMdViewerRef() {
+  return useRef(null);
+};

package/dist/XStarMdViewer/index.module.css

@@ -1,6 +1,5 @@
 .container {
   position: relative;
-  margin: 0 -1px;
   padding: 0 1em;
   color: #000000d9;
   background-color: white;

package/dist/components/FileInput.js

@@ -58,11 +58,11 @@ var FileInput = function FileInput(_ref) {
       return setFile((_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]);
     }
   }), /*#__PURE__*/React.createElement("input", {
-    className: cx('input', 'file-input'),
+    className: cx('input'),
     readOnly: true,
     value: (_file$name = file === null || file === void 0 ? void 0 : file.name) !== null && _file$name !== void 0 ? _file$name : ''
   }), /*#__PURE__*/React.createElement("button", {
-    className: cx('button', 'file-button'),
+    className: cx('button'),
     type: "button"
   }, "\u9009\u62E9\u6587\u4EF6"))) : /*#__PURE__*/React.createElement("label", {
     className: cx('field')

package/dist/components/FileInput.module.css

@@ -2,44 +2,52 @@
   margin: 0.5em 1em 1em 1em;
 }
 
-.tabs {
+.container .tabs {
   display: flex;
 }
 
-.tab {
+.container .tabs .tab {
   padding: 0.4em 1em;
   border-bottom: 1px solid #f5771280;
   cursor: pointer;
   user-select: none;
 }
 
-.tab.active {
+.container .tabs .tab.active {
   color: #f57712;
   border-bottom: 2px solid #f57712;
 }
 
-.field {
-  margin: 0.8em;
+.container .buttons {
   display: flex;
-  flex-direction: column;
-  gap: 0.2em;
-  font-size: 0.9em;
+  flex-direction: row-reverse;
+  gap: 0.4em;
 }
 
-.file-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.container .button {
+  padding: 0.4em 1em;
+  background-color: #f0f0f0;
+  border: 1px solid #d0d0d0;
+  border-radius: 0.2em;
+  cursor: pointer;
+  user-select: none;
 }
 
-.hidden {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
+.container .button.primary {
+  color: #ffffff;
+  background-color: #f57712;
+  border: none;
+}
+
+.container .field {
+  margin: 0.8em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2em;
+  font-size: 0.9em;
 }
 
-.input {
+.container .field .input {
   width: 20em;
   padding: 0.4em;
   border: 1px solid #d0d0d0;
@@ -47,35 +55,27 @@
   outline: none;
 }
 
-.input:focus {
+.container .field .input:focus {
   border: 1px solid #f57712;
 }
 
-.input.file-input {
-  width: 14em;
-}
-
-.buttons {
+.container .field .file-container {
+  position: relative;
   display: flex;
-  flex-direction: row-reverse;
-  gap: 0.4em;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.button {
-  padding: 0.4em 1em;
-  background-color: #f0f0f0;
-  border: 1px solid #d0d0d0;
-  border-radius: 0.2em;
-  cursor: pointer;
-  user-select: none;
+.container .field .file-container .hidden {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
 }
 
-.button.primary {
-  color: #ffffff;
-  background-color: #f57712;
-  border: none;
+.container .field .file-container .input {
+  width: 14em;
 }
 
-.button.file-button {
+.container .field .file-container .button {
   padding: 0.3em 0.4em;
 }

package/dist/components/Toolbar.js

@@ -58,7 +58,7 @@ var Button = function Button(_ref) {
     className: cx('button-container')
   }, /*#__PURE__*/React.createElement("div", {
     className: cx('button', {
-      'button-hover': tooltipOpen || popoverMount
+      active: tooltipOpen || popoverMount
     }),
     onClick: function onClick() {
       setPopoverOpen(true);

package/dist/components/Toolbar.module.css

@@ -1,8 +1,19 @@
-.button-container {
+.toolbar {
+  padding: 0.2em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2em;
+  background-color: #f5771210;
+  border: 1px solid #f5771220;
+  border-top-left-radius: 0.2em;
+  border-top-right-radius: 0.2em;
+}
+
+.toolbar .button-container {
   position: relative;
 }
 
-.button {
+.toolbar .button-container .button {
   width: 2em;
   height: 2em;
   display: flex;
@@ -14,13 +25,47 @@
   user-select: none;
 }
 
-.button-hover {
+.toolbar .button-container .button.active {
   background-color: #f8f8f8;
   border: 1px solid #f5771280;
   border-radius: 0.2em;
 }
 
-.tooltip {
+.toolbar .button-container .button .icon {
+  width: 45%;
+  height: 45%;
+  background-size: contain;
+}
+
+.toolbar .button-container .button .icon.code-library {
+  background-image: url(icons/code-library.svg);
+}
+
+.toolbar .button-container .button .icon.italic {
+  background-image: url(icons/italic.svg);
+}
+
+.toolbar .button-container .button .icon.bold {
+  background-image: url(icons/bold.svg);
+}
+
+.toolbar .button-container .button .icon.code {
+  background-image: url(icons/code.svg);
+}
+
+.toolbar .button-container .button .icon.link {
+  background-image: url(icons/link.svg);
+}
+
+.toolbar .button-container .button .icon.image {
+  background-image: url(icons/image.svg);
+}
+
+.toolbar .button-container .button .icon.strikethrough {
+  background-image: url(icons/strikethrough.svg);
+}
+
+.toolbar .button-container .button .tooltip {
   position: absolute;
   top: 3em;
   width: max-content;
@@ -32,7 +77,7 @@
   z-index: 2;
 }
 
-.tooltip::before {
+.toolbar .button-container .button .tooltip::before {
   content: '';
   position: absolute;
   top: -0.3em;
@@ -43,7 +88,7 @@
   transform: rotate(45deg);
 }
 
-.popover {
+.toolbar .button-container .popover {
   position: absolute;
   width: max-content;
   background-color: #f8f8f8;
@@ -54,63 +99,17 @@
   z-index: 1;
 }
 
-.option {
+.toolbar .button-container .popover .option {
   padding: 4px 8px;
   cursor: pointer;
   user-select: none;
 }
 
-.option:hover {
+.toolbar .button-container .popover .option:hover {
   background-color: #f0f0f0;
 }
 
-.icon {
-  width: 45%;
-  height: 45%;
-  background-size: contain;
-}
-
-.icon.code-library {
-  background-image: url(icons/code-library.svg);
-}
-
-.icon.italic {
-  background-image: url(icons/italic.svg);
-}
-
-.icon.bold {
-  background-image: url(icons/bold.svg);
-}
-
-.icon.code {
-  background-image: url(icons/code.svg);
-}
-
-.icon.link {
-  background-image: url(icons/link.svg);
-}
-
-.icon.image {
-  background-image: url(icons/image.svg);
-}
-
-.icon.strikethrough {
-  background-image: url(icons/strikethrough.svg);
-}
-
-.toolbar {
-  margin: 0 -1px;
-  padding: 0.2em;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.2em;
-  background-color: #f5771210;
-  border: 1px solid #f5771220;
-  border-top-left-radius: 0.2em;
-  border-top-right-radius: 0.2em;
-}
-
-.divider {
+.toolbar .divider {
   margin: 0.4em;
   border: 1px solid #f5771280;
 }

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { default as XStarEditor } from './XStarEditor';
-export type { XStarMDProps } from './XStarEditor';
-export { default as XStarMdEditor } from './XStarMdEditor';
+export { default as XStarEditor, useEditorRef } from './XStarEditor';
+export type { XStarEditorHandle, XStarEditorProps } from './XStarEditor';
+export { default as XStarMdEditor, useMdEditorRef } from './XStarMdEditor';
 export type { XStarMdEditorHandle, XStarMdEditorPlugin, XStarMdEditorProps, } from './XStarMdEditor';
-export { default as XStarMdViewer } from './XStarMdViewer';
+export { default as XStarMdViewer, useMdViewerRef } from './XStarMdViewer';
 export type { XStarMdViewerHandle, XStarMdViewerPlugin, XStarMdViewerProps, } from './XStarMdViewer';
 export { createSelection, getRange } from './utils/container';
 export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';

package/dist/index.js

@@ -1,5 +1,5 @@
-export { default as XStarEditor } from "./XStarEditor";
-export { default as XStarMdEditor } from "./XStarMdEditor";
-export { default as XStarMdViewer } from "./XStarMdViewer";
+export { default as XStarEditor, useEditorRef } from "./XStarEditor";
+export { default as XStarMdEditor, useMdEditorRef } from "./XStarMdEditor";
+export { default as XStarMdViewer, useMdViewerRef } from "./XStarMdViewer";
 export { createSelection, getRange } from "./utils/container";
 export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";

package/dist/styles/prism.css

@@ -15,7 +15,7 @@
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
-  font-size: 0.9em;
+  font-size: 1em;
   line-height: 1.2em;
 
   -moz-tab-size: 4;
@@ -31,7 +31,7 @@
 .x-star-md-viewer.x-star-md-viewer pre > code {
   margin: 0;
   color: #393a34;
-  font-size: 1em;
+  font-size: 1.1em;
 }
 
 .x-star-md-viewer.x-star-md-viewer pre::-moz-selection,

package/dist/utils/container.js

@@ -238,7 +238,7 @@ export var useContainer = function useContainer() {
           if (node.nodeType === Node.TEXT_NODE) {
             if (node.nodeValue) {
               offset += targetOffset;
-              if (node.nodeValue[targetOffset - 1] === "\u200B") {
+              if (targetOffset === node.nodeValue.length && node.nodeValue.endsWith("\u200B")) {
                 offset--;
               }
             }
@@ -298,7 +298,7 @@ export var useContainer = function useContainer() {
       var traverse = function traverse(node) {
         if (node.nodeType === Node.TEXT_NODE) {
           if (node.nodeValue) {
-            if (offset < node.nodeValue.length) {
+            if (offset < node.nodeValue.length || offset === node.nodeValue.length && !node.nodeValue.endsWith("\u200B")) {
               return node;
             }
             offset -= node.nodeValue.length;

package/dist/utils/history.d.ts

@@ -54,6 +54,6 @@ export interface SelectAction {
 export declare const useHistory: (initialSourceCode: string) => {
     sourceCode: string;
     selection: ContainerSelection;
-    dispatch: import("react").Dispatch<InsertAction | DeleteAction | ToggleAction | SetAction | UndoAction | RedoAction | SelectAction>;
+    dispatch: import("react").Dispatch<ToggleAction | UndoAction | RedoAction | SelectAction | InsertAction | DeleteAction | SetAction>;
 };
 export {};

package/dist/utils/markdown.js

@@ -1,5 +1,6 @@
 var _defaultSchema$tagNam, _defaultSchema$attrib, _defaultSchema$attrib2, _defaultSchema$attrib3, _defaultSchema$attrib4, _defaultSchema$attrib5, _defaultSchema$attrib6, _defaultSchema$attrib7, _defaultSchema$attrib8;
 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); }
@@ -53,7 +54,25 @@ var processor = unified().use(remarkParse).use(remarkBreaks).use(remarkGfm).use(
   }
 }).use(rehypePrism, {
   ignoreMissing: true
-}).use(rehypeKatex).use(rehypeRaw).use(rehypeSanitize, schema).freeze();
+}).use(rehypeKatex).use(rehypeRaw).use(rehypeSanitize, schema).use(function () {
+  return function (root) {
+    var _iterator = _createForOfIteratorHelper(root.children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var node = _step.value;
+        if ('properties' in node && node.properties) {
+          var _node$position;
+          node.properties.line = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : _node$position.start.line;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+}).freeze();
 
 /**
  * Mdast 节点
@@ -211,51 +230,60 @@ export var editorRender = function editorRender(sourceCode) {
    * @param parentEndOffset 父节点终点偏移量
    */
   var getChildren = function getChildren(nodes, parentEndOffset) {
-    for (var i = 0; i < nodes.length; i++) {
-      var _node$position, _node$position2;
-      var node = nodes[i];
-      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) {
-        continue;
-      }
-      // 由于 unified 的问题，起点偏移量可能小于扫描偏移量，应修正
-      if (startOffset < scanOffset) {
-        startOffset = scanOffset;
-      }
-      // 如果起点偏移量大于等于终点偏移量，则不用添加任何文本
-      if (startOffset >= endOffset) {
-        continue;
-      }
+    var _iterator2 = _createForOfIteratorHelper(nodes),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _node$position2, _node$position3;
+        var node = _step2.value;
+        var startOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : _node$position2.start.offset;
+        var endOffset = (_node$position3 = node.position) === null || _node$position3 === void 0 ? void 0 : _node$position3.end.offset;
+        if (startOffset === undefined || endOffset === undefined) {
+          continue;
+        }
+        // 由于 unified 的问题，起点偏移量可能小于扫描偏移量，应修正
+        if (startOffset < scanOffset) {
+          startOffset = scanOffset;
+        }
+        // 如果起点偏移量大于等于终点偏移量，则不用添加任何文本
+        if (startOffset >= endOffset) {
+          continue;
+        }
 
-      // 添加扫描偏移量与起点偏移量间的分隔文本
-      addText(sourceCode.slice(scanOffset, startOffset), true);
+        // 添加扫描偏移量与起点偏移量间的分隔文本
+        addText(sourceCode.slice(scanOffset, startOffset), true);
 
-      // 为 Mdast 节点创建 DOM 元素
-      stack.push({
-        node: node,
-        el: document.createElement(stack.length ? 'span' : 'div'),
-        first: true
-      });
-      if ('children' in node) {
-        getChildren(node.children, endOffset);
-      } else {
-        addText(sourceCode.slice(scanOffset, endOffset));
-      }
-      if (stack.length > 1) {
-        pushElement(stack.length - 1, true);
-      } else {
-        // 如果栈大小为 1，说明为块级元素终点
-        stack[0].el.append("\u200B");
-        pushElement(0, true);
-        block.setAttribute('index', "".concat(i));
-        pushBlock();
-        scanOffset++;
+        // 为 Mdast 节点创建 DOM 元素
+        stack.push({
+          node: node,
+          el: document.createElement(stack.length ? 'span' : 'div'),
+          first: true
+        });
+        if ('children' in node) {
+          getChildren(node.children, endOffset);
+        } else {
+          addText(sourceCode.slice(scanOffset, endOffset));
+        }
+        if (stack.length > 1) {
+          pushElement(stack.length - 1, true);
+        } else {
+          var _node$position4;
+          // 如果栈大小为 1，说明为块级元素终点
+          stack[0].el.append("\u200B");
+          pushElement(0, true);
+          block.setAttribute('line', "".concat((_node$position4 = node.position) === null || _node$position4 === void 0 ? void 0 : _node$position4.start.line));
+          pushBlock();
+          scanOffset++;
+        }
+        stack.pop();
       }
-      stack.pop();
-    }
 
-    // 添加扫描偏移量与父节点终点偏移量间的分隔文本
+      // 添加扫描偏移量与父节点终点偏移量间的分隔文本
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
   getChildren(processor.parse(sourceCode).children, sourceCode.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "An editor developed by turingstar",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",