x-star-editor 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { ToolbarItem } from './components/Toolbar';
 export { createSelection, getRange } from './utils/container';
-export { insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
+export { batchHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
 export type { Executor, Handler, KeyboardEventHandler } from './utils/handler';
 export { toHTML, toMarkdown, toText } from './utils/markdown';
 export { default as XStarEditor, useEditorRef } from './x-star-editor';

package/dist/index.js

@@ -1,5 +1,5 @@
 export { createSelection, getRange } from "./utils/container";
-export { insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
+export { batchHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
 export { toHTML, toMarkdown, toText } from "./utils/markdown";
 export { default as XStarEditor, useEditorRef } from "./x-star-editor";
 export { default as XStarMdEditor, useMdEditorRef } from "./x-star-md-editor";

package/dist/utils/container.js

@@ -1,5 +1,5 @@
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { editorRender } from "./markdown";
 
 /**
@@ -304,6 +304,42 @@ export var useContainer = function useContainer(ref) {
       ref.current.scrollTop += bottomOffset;
     }
   };
+
+  // 确保光标不在零宽空格后
+  useEffect(function () {
+    var listener = function listener() {
+      var _ref$current, _anchorNode$nodeValue, _focusNode$nodeValue;
+      var selection = window.getSelection();
+      if (!selection || !selection.anchorNode || !selection.focusNode || !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(selection.anchorNode))) {
+        return;
+      }
+      var update = false;
+      var anchorNode = selection.anchorNode,
+        anchorOffset = selection.anchorOffset,
+        focusNode = selection.focusNode,
+        focusOffset = selection.focusOffset;
+      if (anchorNode.nodeType === Node.TEXT_NODE && ((_anchorNode$nodeValue = anchorNode.nodeValue) === null || _anchorNode$nodeValue === void 0 ? void 0 : _anchorNode$nodeValue[anchorOffset - 1]) === "\u200B") {
+        update = true;
+        anchorOffset--;
+      }
+      if (focusNode.nodeType === Node.TEXT_NODE && ((_focusNode$nodeValue = focusNode.nodeValue) === null || _focusNode$nodeValue === void 0 ? void 0 : _focusNode$nodeValue[focusOffset - 1]) === "\u200B") {
+        update = true;
+        focusOffset--;
+      }
+      if (update) {
+        selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      }
+    };
+    document.addEventListener('selectionchange', listener, {
+      capture: true,
+      passive: true
+    });
+    return function () {
+      return document.removeEventListener('selectionchange', listener, {
+        capture: true
+      });
+    };
+  }, []);
   return useRef({
     getText: getText,
     setText: setText,

package/dist/utils/handler.d.ts

@@ -15,6 +15,7 @@ export declare const toggleHandler: (payload: ToggleAction['payload']) => Handle
 export declare const setHandler: (payload: SetAction['payload']) => Handler;
 export declare const undoHandler: () => Handler;
 export declare const redoHandler: () => Handler;
+export declare const batchHandler: () => Handler;
 export declare const selectHandler: (selection: SelectAction['selection']) => Handler;
 /**
  * 执行函数

package/dist/utils/handler.js

@@ -59,9 +59,17 @@ export var redoHandler = function redoHandler() {
     });
   };
 };
-export var selectHandler = function selectHandler(selection) {
+export var batchHandler = function batchHandler() {
   return function (_ref6) {
     var dispatch = _ref6.dispatch;
+    return dispatch({
+      type: 'batch'
+    });
+  };
+};
+export var selectHandler = function selectHandler(selection) {
+  return function (_ref7) {
+    var dispatch = _ref7.dispatch;
     return dispatch({
       type: 'select',
       selection: selection
@@ -80,11 +88,11 @@ export var selectHandler = function selectHandler(selection) {
  */
 
 export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHandlers() {
-  return [function (_ref7) {
-    var sourceCode = _ref7.sourceCode,
-      selection = _ref7.selection,
-      dispatch = _ref7.dispatch,
-      e = _ref7.e;
+  return [function (_ref8) {
+    var sourceCode = _ref8.sourceCode,
+      selection = _ref8.selection,
+      dispatch = _ref8.dispatch,
+      e = _ref8.e;
     return createKeybindingsHandler({
       Tab: function Tab(e) {
         e.preventDefault();

package/dist/utils/history.d.ts

@@ -44,7 +44,9 @@ type StateAction = InsertAction | ToggleAction | SetAction;
  */
 interface History {
     states: (State & {
-        action: StateAction;
+        action: StateAction & {
+            batch?: boolean;
+        };
     })[];
     index: number;
     selection: ContainerSelection;
@@ -55,15 +57,21 @@ export interface UndoAction {
 export interface RedoAction {
     type: 'redo';
 }
+export interface BatchAction {
+    type: 'batch';
+    selection?: ContainerSelection;
+}
 export interface SelectAction {
     type: 'select';
     selection: ContainerSelection;
 }
-type HistoryAction = UndoAction | RedoAction | SelectAction;
+type HistoryAction = UndoAction | RedoAction | BatchAction | SelectAction;
 export declare const useHistory: (initialSourceCode: string) => {
     history: History;
     sourceCode: string;
     selection: ContainerSelection;
-    dispatch: import("react").Dispatch<StateAction | HistoryAction>;
+    dispatch: import("react").Dispatch<HistoryAction | (StateAction & {
+        batch?: boolean | undefined;
+    })>;
 };
 export {};

package/dist/utils/history.js

@@ -132,8 +132,8 @@ var stateReducer = function stateReducer(_ref, action) {
                 url = _action$payload2.url,
                 description = _action$payload2.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))
+                sourceCode: "".concat(before).concat(_type === 'image' ? '!' : '', "[").concat(description, "](").concat(url, ")").concat(after),
+                selection: createSelection(startOffset + url.length + description.length + 4 + (_type === 'image' ? 1 : 0))
               };
             }
           case 'math':
@@ -214,6 +214,20 @@ var historyReducer = function historyReducer(_ref2, action) {
           selection: states[index + 1].selection
         };
       }
+    case 'batch':
+      {
+        var _action$selection2, _action$selection3;
+        return {
+          states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
+            selection: (_action$selection2 = action.selection) !== null && _action$selection2 !== void 0 ? _action$selection2 : states[index].selection,
+            action: _objectSpread(_objectSpread({}, states[index].action), {}, {
+              batch: false
+            })
+          })]),
+          index: index,
+          selection: (_action$selection3 = action.selection) !== null && _action$selection3 !== void 0 ? _action$selection3 : selection
+        };
+      }
     case 'select':
       {
         return {
@@ -233,8 +247,19 @@ var historyReducer = function historyReducer(_ref2, action) {
             selection: selection
           };
         }
+        if (states[index].action.batch && action.batch) {
+          return {
+            states: [].concat(_toConsumableArray(states.slice(0, index)), [_objectSpread(_objectSpread({}, states[index]), state)]),
+            index: index,
+            selection: state.selection
+          };
+        }
         return {
-          states: [].concat(_toConsumableArray(states.slice(index < 100 ? 0 : index - 99, index + 1)), [_objectSpread(_objectSpread({}, state), {}, {
+          states: [].concat(_toConsumableArray(states.slice(index < 100 ? 0 : index - 99, index)), [_objectSpread(_objectSpread({}, states[index]), {}, {
+            action: _objectSpread(_objectSpread({}, states[index].action), {}, {
+              batch: false
+            })
+          }), _objectSpread(_objectSpread({}, state), {}, {
             action: action
           })]),
           index: index < 100 ? index + 1 : 100,

package/dist/utils/markdown.js

@@ -3,7 +3,6 @@ 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 { toText as hastToText } from 'hast-util-to-text';
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
@@ -32,20 +31,6 @@ import rehypeRawPositions from "./rehype/rehype-raw-positions";
  */
 var toMdastProcessor = unified().use(remarkParse).use(remarkGfm).use(remarkMath).freeze();
 
-/**
- * 带缓存的解析函数
- *
- * @param sourceCode Markdown 文本
- * @returns Mdast 树
- */
-var cachedParse = function () {
-  var cache = {};
-  return function (sourceCode) {
-    var _cache$sourceCode;
-    return (_cache$sourceCode = cache[sourceCode]) !== null && _cache$sourceCode !== void 0 ? _cache$sourceCode : (cache = _defineProperty({}, sourceCode, toMdastProcessor.parse(sourceCode)))[sourceCode];
-  };
-}();
-
 /**
  * 将 Markdown 文本映射到 DOM 树，第一层为 `<div>` 块元素，第二层为 `<div>` 行元素，之后均为 `<span>` 元素
  *
@@ -243,7 +228,7 @@ export var editorRender = function editorRender(sourceCode) {
     }
     addText(sourceCode.slice(scanOffset, parentEndOffset), true);
   };
-  getChildren(cachedParse(sourceCode).children, sourceCode.length);
+  getChildren(toMdastProcessor.parse(sourceCode).children, sourceCode.length);
   if (scanOffset <= sourceCode.length) {
     // 添加最后一行文本
     block.append(createLine(sourceCode.slice(scanOffset)));
@@ -289,7 +274,7 @@ export var preViewerRender = /*#__PURE__*/function () {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.next = 2;
-          return toHastProcessor.run(cachedParse(sourceCode));
+          return toHastProcessor.run(toMdastProcessor.parse(sourceCode));
         case 2:
           return _context.abrupt("return", _context.sent);
         case 3:

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

@@ -93,6 +93,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case 'copy':
       case 'cut':
         {
+          // 防止传输其他类型数据
           e.preventDefault();
           if (startOffset < endOffset) {
             e.clipboardData.setData('text/plain', sourceCode.slice(startOffset, endOffset));
@@ -114,9 +115,13 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (e.type) {
       case 'compositionend':
         {
+          // 组合时不更新 DOM，组合结束统一更新
           var _selection = getSelection();
           container.setText(sourceCodeLatest.current);
           container.setSelection(_selection);
+          dispatch({
+            type: 'batch'
+          });
           break;
         }
     }
@@ -130,6 +135,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       case 'dragstart':
         {
           if (startOffset < endOffset) {
+            // 防止传输其他类型数据
             e.dataTransfer.clearData();
             e.dataTransfer.setData('text/plain', sourceCode.slice(startOffset, endOffset));
           }
@@ -162,6 +168,7 @@ var XStarMdEditor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     switch (e.type) {
       case 'keydown':
         {
+          // 组合时不触发快捷键
           if (!e.nativeEvent.isComposing) {
             composeHandlers(options.keyboardEventHandlers)({
               history: history,
@@ -178,163 +185,165 @@ 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) {
+        return;
+      }
+      var startOffset = container.getOffset(containerRef.current, targetRange.startContainer, targetRange.startOffset);
+      var endOffset = container.getOffset(containerRef.current, targetRange.endContainer, targetRange.endOffset);
+      var selection = createSelection(startOffset, endOffset);
+      switch (e.inputType) {
+        case 'insertText':
+          {
+            e.preventDefault();
+            if (e.data !== null) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: e.data
+                },
+                selection: selection
+              });
+            }
+            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: selection,
+                batch: true
+              });
+              dispatch({
+                type: 'batch'
+              });
+            } 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':
           {
-            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;
-                  }
+            e.preventDefault();
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: '\n'
+              },
+              selection: selection
+            });
+            break;
+          }
+        case 'insertCompositionText':
+        case 'insertFromComposition':
+          {
+            // 避免 DOM 更新扰乱组合
+            ignoreNext.current = true;
+            if (e.data !== null) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: e.data
+                },
+                selection: selection,
+                batch: true
+              });
+            }
+            break;
+          }
+        case 'deleteWordBackward':
+        case 'deleteWordForward':
+        case 'deleteContentBackward':
+        case 'deleteContentForward':
+          {
+            e.preventDefault();
+            if (startOffset < endOffset) {
+              dispatch({
+                type: 'insert',
+                payload: {
+                  text: ''
+                },
+                selection: selection
+              });
+            } else if (e.inputType.endsWith('Backward')) {
+              if (startOffset) {
+                dispatch({
+                  type: 'insert',
+                  payload: {
+                    text: ''
+                  },
+                  selection: createSelection(startOffset - 1, endOffset)
+                });
+              }
+            } else {
+              if (endOffset < sourceCodeLatest.current.length) {
+                dispatch({
+                  type: 'insert',
+                  payload: {
+                    text: ''
+                  },
+                  selection: createSelection(startOffset, endOffset + 1)
+                });
               }
             }
             break;
           }
+        case 'deleteByDrag':
+        case 'deleteCompositionText':
+          {
+            ignoreNext.current = true;
+            dispatch({
+              type: 'insert',
+              payload: {
+                text: ''
+              },
+              selection: selection,
+              batch: true
+            });
+            break;
+          }
+        case 'formatBold':
+          {
+            e.preventDefault();
+            dispatch({
+              type: 'toggle',
+              payload: {
+                type: 'strong'
+              },
+              selection: selection
+            });
+            break;
+          }
+        case 'formatItalic':
+          {
+            e.preventDefault();
+            dispatch({
+              type: 'toggle',
+              payload: {
+                type: 'emphasis'
+              },
+              selection: selection
+            });
+            break;
+          }
+        default:
+          {
+            e.preventDefault();
+            break;
+          }
       }
     };
     (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.addEventListener('beforeinput', listener);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-editor",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "An editor developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",