x-star-editor 0.2.5 → 0.3.0

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

@@ -1,5 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { SKIP, visit } from 'unist-util-visit';
+import { EXIT, SKIP, visit } from 'unist-util-visit';
 
 /**
  * 判断一个 Hast 节点是否属于行内代码或代码块
@@ -130,31 +130,39 @@ var parseMath = function parseMath(text) {
  */
 var rehypeMath = function rehypeMath() {
   return function (root) {
-    var _child$properties;
-    var child = root.children[root.children.length - 1];
-    if ((child === null || child === void 0 ? void 0 : child.type) !== 'element' || typeof ((_child$properties = child.properties) === null || _child$properties === void 0 ? void 0 : _child$properties.rawPositions) !== 'string') {
-      return;
-    }
-    root.children.pop();
+    var rawPositions = [];
+    var i = 0;
 
     // 获取 rehype-raw-positions 记录的 Raw 节点的位置信息
-    var rawPositions = child.properties.rawPositions.split(' ').map(function (offset) {
-      return parseInt(offset);
-    });
-    var i = 0;
+    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, _node$position$start, _node$position2, _node$position2$end;
-        var startOffset = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : (_node$position$start = _node$position.start) === null || _node$position$start === void 0 ? void 0 : _node$position$start.offset;
-        var endOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : (_node$position2$end = _node$position2.end) === null || _node$position2$end === void 0 ? void 0 : _node$position2$end.offset;
-        if (startOffset === undefined || endOffset === undefined) {
+        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 && rawPositions[i + 1] >= endOffset) {
+        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)));

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

@@ -7,9 +7,9 @@ var rehypeRawPositions = function rehypeRawPositions() {
   return function (root) {
     var rawPositions = [];
     visit(root, 'raw', function (node) {
-      var _node$position, _node$position$start, _node$position2, _node$position2$end;
-      var startOffset = (_node$position = node.position) === null || _node$position === void 0 ? void 0 : (_node$position$start = _node$position.start) === null || _node$position$start === void 0 ? void 0 : _node$position$start.offset;
-      var endOffset = (_node$position2 = node.position) === null || _node$position2 === void 0 ? void 0 : (_node$position2$end = _node$position2.end) === null || _node$position2$end === void 0 ? void 0 : _node$position2$end.offset;
+      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;
       }
@@ -19,9 +19,9 @@ var rehypeRawPositions = function rehypeRawPositions() {
     // 记录在新的 Hast 节点上，防止被 rehype-raw 删除
     root.children.push({
       type: 'element',
-      tagName: 'div',
+      tagName: 'raw-positions',
       properties: {
-        rawPositions: rawPositions.join(' ')
+        value: rawPositions.join(' ')
       },
       children: []
     });

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

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 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";
+import { createSelection, getRange, useContainer } from "../utils/container";
 import { prefix } from "../utils/global";
 import { composeHandlers, getDefaultKeyboardEventHandlers } from "../utils/handler";
 import { useHistory } from "../utils/history";
@@ -26,11 +26,14 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sourceCode = _useHistory.sourceCode,
     selection = _useHistory.selection,
     dispatch = _useHistory.dispatch;
+  var ignoreNext = useRef(false);
   var initialized = useRef(false);
 
   // 将文本同步到容器
   useEffect(function () {
-    container.setText(sourceCode);
+    if (!ignoreNext.current) {
+      container.setText(sourceCode);
+    }
     if (initialized.current) {
       onChange === null || onChange === void 0 ? void 0 : onChange(sourceCode);
     }
@@ -38,16 +41,14 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // 将选区同步到容器
   useEffect(function () {
-    if (initialized.current) {
+    if (!ignoreNext.current && initialized.current) {
       container.setSelection(selection);
     }
   }, [selection]);
   useEffect(function () {
+    ignoreNext.current = false;
     initialized.current = true;
-    return function () {
-      initialized.current = false;
-    };
-  }, []);
+  }, [sourceCode, selection]);
   var historyLatest = useRef(history);
   historyLatest.current = history;
   var sourceCodeLatest = useRef(sourceCode);
@@ -97,110 +98,41 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             e.clipboardData.setData('text/plain', sourceCode.slice(startOffset, endOffset));
             if (e.type === 'cut') {
               dispatch({
-                type: 'delete',
+                type: 'insert',
+                payload: {
+                  text: ''
+                },
                 selection: selection
               });
             }
           }
           break;
         }
-      case 'paste':
-        {
-          e.preventDefault();
-          if (e.clipboardData.types.includes('text/plain')) {
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.clipboardData.getData('text/plain')
-              },
-              selection: selection
-            });
-          } else if (e.clipboardData.types.includes('Files')) {
-            var _file = e.clipboardData.files[0];
-            onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
-              description: _file.name,
-              image: _file.type.startsWith('image/')
-            });
-          }
-          break;
-        }
     }
   };
-
-  /**
-   * 开始组合时的选区
-   */
-  var compositionStartSelection = useRef();
-
-  /**
-   * 容器同步控制器
-   */
-  var syncController = useMemo(function () {
-    var timer = 0;
-
-    /**
-     * 将最新的文本和选区同步到容器
-     */
-    var sync = function sync() {
-      if (compositionStartSelection.current) {
-        var _selection = getSelection();
-        container.setText(sourceCodeLatest.current);
-        container.setSelection(_selection);
-        compositionStartSelection.current = undefined;
-      }
-      timer = 0;
-    };
-    return {
-      /**
-       * 在下个事件循环中同步
-       */
-      start: function start() {
-        if (!timer) {
-          timer = window.setTimeout(sync);
-        }
-      },
-      /**
-       * 立即执行下个事件循环中的同步
-       */
-      flush: function flush() {
-        if (timer) {
-          window.clearTimeout(timer);
-          sync();
-        }
-      }
-    };
-  }, []);
   var compositionEventHandler = function compositionEventHandler(e) {
     switch (e.type) {
       case 'compositionend':
         {
-          syncController.start();
-          break;
-        }
-      case 'compositionstart':
-        {
-          syncController.flush();
-          compositionStartSelection.current = getSelection();
+          var _selection = getSelection();
+          container.setText(sourceCodeLatest.current);
+          container.setSelection(_selection);
           break;
         }
     }
   };
   var dragEventHandler = function dragEventHandler(e) {
+    var selection = getSelection();
+    var _getRange2 = getRange(selection),
+      startOffset = _getRange2.startOffset,
+      endOffset = _getRange2.endOffset;
     switch (e.type) {
-      case 'drop':
+      case 'dragstart':
         {
-          var _selection2 = getSelection();
-          window.setTimeout(function () {
-            container.normalize();
-            dispatch({
-              type: 'set',
-              payload: {
-                sourceCode: container.getText(),
-                selection: getSelection()
-              },
-              selection: _selection2
-            });
-          });
+          if (startOffset < endOffset) {
+            e.dataTransfer.clearData();
+            e.dataTransfer.setData('text/plain', sourceCode.slice(startOffset, endOffset));
+          }
           break;
         }
     }
@@ -214,26 +146,6 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
-  var formEventHandler = function formEventHandler(e) {
-    switch (e.type) {
-      case 'beforeinput':
-        {
-          e.preventDefault();
-          if ('data' in e && typeof e.data === 'string') {
-            var _compositionStartSele;
-            dispatch({
-              type: 'insert',
-              payload: {
-                text: e.data
-              },
-              selection: (_compositionStartSele = compositionStartSelection.current) !== null && _compositionStartSele !== void 0 ? _compositionStartSele : getSelection()
-            });
-            compositionStartSelection.current = undefined;
-          }
-          break;
-        }
-    }
-  };
   var onInsertFileLatest = useRef(onInsertFile);
   onInsertFileLatest.current = onInsertFile;
   var options = useMemo(function () {
@@ -250,9 +162,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (e.type) {
       case 'keydown':
         {
-          if (compositionStartSelection.current) {
-            e.preventDefault();
-          } else {
+          if (!e.nativeEvent.isComposing) {
             composeHandlers(options.keyboardEventHandlers)({
               history: history,
               sourceCode: sourceCode,
@@ -265,6 +175,174 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
     }
   };
+  useEffect(function () {
+    var _containerRef$current;
+    var listener = function listener(e) {
+      switch (e.type) {
+        case 'beforeinput':
+          {
+            var targetRange = e.getTargetRanges()[0];
+            if (containerRef.current && targetRange) {
+              var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
+              var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+              var _selection2 = createSelection(startOffset, endOffset);
+              switch (e.inputType) {
+                case 'insertText':
+                  {
+                    e.preventDefault();
+                    if (e.data !== null) {
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: e.data
+                        },
+                        selection: _selection2
+                      });
+                    }
+                    break;
+                  }
+                case 'insertReplacementText':
+                case 'insertFromDrop':
+                case 'insertFromPaste':
+                  {
+                    var _e$dataTransfer, _e$dataTransfer2;
+                    e.preventDefault();
+                    if ((_e$dataTransfer = e.dataTransfer) !== null && _e$dataTransfer !== void 0 && _e$dataTransfer.types.includes('text/plain')) {
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: e.dataTransfer.getData('text/plain')
+                        },
+                        selection: _selection2
+                      });
+                    } else if ((_e$dataTransfer2 = e.dataTransfer) !== null && _e$dataTransfer2 !== void 0 && _e$dataTransfer2.types.includes('Files')) {
+                      var _file = e.dataTransfer.files[0];
+                      onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(_file, {
+                        description: _file.name,
+                        image: _file.type.startsWith('image/')
+                      });
+                    }
+                    break;
+                  }
+                case 'insertLineBreak':
+                case 'insertParagraph':
+                  {
+                    e.preventDefault();
+                    dispatch({
+                      type: 'insert',
+                      payload: {
+                        text: '\n'
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                case 'insertCompositionText':
+                case 'insertFromComposition':
+                  {
+                    if (e.data !== null) {
+                      ignoreNext.current = true;
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: e.data
+                        },
+                        selection: _selection2
+                      });
+                    }
+                    break;
+                  }
+                case 'deleteWordBackward':
+                case 'deleteWordForward':
+                case 'deleteContentBackward':
+                case 'deleteContentForward':
+                  {
+                    e.preventDefault();
+                    if (startOffset < endOffset) {
+                      dispatch({
+                        type: 'insert',
+                        payload: {
+                          text: ''
+                        },
+                        selection: _selection2
+                      });
+                    } else if (e.inputType.endsWith('Backward')) {
+                      if (startOffset) {
+                        dispatch({
+                          type: 'insert',
+                          payload: {
+                            text: ''
+                          },
+                          selection: createSelection(startOffset - 1, endOffset)
+                        });
+                      }
+                    } else {
+                      if (endOffset < sourceCodeLatest.current.length - 1) {
+                        dispatch({
+                          type: 'insert',
+                          payload: {
+                            text: ''
+                          },
+                          selection: createSelection(startOffset, endOffset + 1)
+                        });
+                      }
+                    }
+                    break;
+                  }
+                case 'deleteByDrag':
+                case 'deleteCompositionText':
+                  {
+                    ignoreNext.current = true;
+                    dispatch({
+                      type: 'insert',
+                      payload: {
+                        text: ''
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                case 'formatBold':
+                  {
+                    e.preventDefault();
+                    dispatch({
+                      type: 'toggle',
+                      payload: {
+                        type: 'strong'
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                case 'formatItalic':
+                  {
+                    e.preventDefault();
+                    dispatch({
+                      type: 'toggle',
+                      payload: {
+                        type: 'emphasis'
+                      },
+                      selection: _selection2
+                    });
+                    break;
+                  }
+                default:
+                  {
+                    e.preventDefault();
+                    break;
+                  }
+              }
+            }
+            break;
+          }
+      }
+    };
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.addEventListener('beforeinput', listener);
+    return function () {
+      var _containerRef$current2;
+      return (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.removeEventListener('beforeinput', listener);
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(LocaleProvider, {
     locale: locale
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -280,15 +358,12 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       height: height
     }),
     contentEditable: true,
-    onBeforeInput: formEventHandler,
     onBlur: focusEventHandler,
     onCompositionEnd: compositionEventHandler,
-    onCompositionStart: compositionEventHandler,
     onCopy: clipboardEventHandler,
     onCut: clipboardEventHandler,
-    onDrop: dragEventHandler,
-    onKeyDown: keyboardEventHandler,
-    onPaste: clipboardEventHandler
+    onDragStart: dragEventHandler,
+    onKeyDown: keyboardEventHandler
   }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -36,6 +36,10 @@ export interface XStarMdViewerProps {
      * 查看器的高度
      */
     height?: React.CSSProperties['height'];
+    /**
+     * 内置主题
+     */
+    theme?: string;
     /**
      * 文本
      */