x-star-editor 0.2.6 → 0.3.1

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";
 
 /**
@@ -53,49 +53,6 @@ export var useContainer = function useContainer(ref) {
     return node instanceof HTMLElement && node.dataset.ignore !== undefined;
   };
 
-  /**
-   * 将 DOM 树规范化
-   *
-   * 检查每个行节点的末尾是否为零宽空格，如果不是，则删除行中的零宽空格并在末尾添加零宽空格
-   */
-  var normalize = function normalize() {
-    if (!ref.current) {
-      return;
-    }
-    var traverse = function traverse(node, depth) {
-      if (isIgnore(node)) {
-        return;
-      }
-      if (depth === 2) {
-        var _node$lastChild;
-        // 检查行节点的末尾
-        if (((_node$lastChild = node.lastChild) === null || _node$lastChild === void 0 ? void 0 : _node$lastChild.nodeType) === Node.TEXT_NODE) {
-          var _node$lastChild$nodeV;
-          if ((_node$lastChild$nodeV = node.lastChild.nodeValue) !== null && _node$lastChild$nodeV !== void 0 && _node$lastChild$nodeV.endsWith("\u200B")) {
-            return;
-          }
-        }
-      } else if (depth > 2) {
-        // 删除行中的零宽空格
-        if (node.nodeType === Node.TEXT_NODE) {
-          var _node$nodeValue;
-          if ((_node$nodeValue = node.nodeValue) !== null && _node$nodeValue !== void 0 && _node$nodeValue.includes("\u200B")) {
-            node.nodeValue = node.nodeValue.replace(/\u200B/g, '');
-          }
-          return;
-        }
-      }
-      for (var i = 0; i < node.childNodes.length; i++) {
-        traverse(node.childNodes[i], depth + 1);
-      }
-      if (depth === 2) {
-        // 添加零宽空格
-        node.appendChild(document.createTextNode("\u200B"));
-      }
-    };
-    traverse(ref.current, 0);
-  };
-
   /**
    * 获取容器文本
    *
@@ -152,14 +109,9 @@ export var useContainer = function useContainer(ref) {
       for (; oldChild && newChild;) {
         var oldNext = oldChild.nextSibling;
         var newNext = newChild.nextSibling;
-        if (oldChild.nodeName !== newChild.nodeName) {
-          // 节点名称不同，直接替换
+        if (oldChild.nodeName !== newChild.nodeName || oldChild.nodeType === Node.TEXT_NODE) {
+          // 节点名称不同，或节点均为文本类型，直接替换
           oldChild.replaceWith(newChild);
-        } else if (oldChild.nodeType === Node.TEXT_NODE) {
-          // 节点均为文本类型，更新文本内容
-          if (oldChild.nodeValue !== newChild.nodeValue) {
-            oldChild.nodeValue = newChild.nodeValue;
-          }
         } else {
           // 节点名称相同，更新属性和子节点
           if (oldChild instanceof HTMLElement && newChild instanceof HTMLElement) {
@@ -219,64 +171,62 @@ export var useContainer = function useContainer(ref) {
   };
 
   /**
-   * 获取容器选区
+   * 根据节点和节点内偏移量获取容器内偏移量
    *
-   * 用 Selection API 获取选中的 DOM 节点和节点内偏移量，在 DOM 树上遍历获取对应的容器内偏移量
-   *
-   * @returns 容器选区
+   * @param root 容器根节点
+   * @param targetNode 节点
+   * @param targetOffset 节点内偏移量
+   * @returns 容器内偏移量
    */
-  var getSelection = function getSelection() {
-    var selection = window.getSelection();
-    if (!selection || !selection.anchorNode || !selection.focusNode) {
-      return createSelection(-1);
-    }
-
-    /**
-     * 根据节点和节点内偏移量获取容器内偏移量
-     *
-     * @param targetNode 节点
-     * @param targetOffset 节点内偏移量
-     * @returns 容器内偏移量
-     */
-    var getOffset = function getOffset(targetNode, targetOffset) {
-      if (!ref.current) {
-        return -1;
+  var getOffset = function getOffset(root, targetNode, targetOffset) {
+    var offset = 0;
+    var traverse = function traverse(node) {
+      if (isIgnore(node)) {
+        return;
       }
-      var offset = 0;
-      var traverse = function traverse(node) {
-        if (isIgnore(node)) {
-          return;
-        }
-        if (node === targetNode) {
-          if (node.nodeType === Node.TEXT_NODE) {
-            if (node.nodeValue) {
-              offset += targetOffset;
-              if (targetOffset === node.nodeValue.length && node.nodeValue.endsWith("\u200B")) {
-                offset--;
-              }
-            }
-          } else {
-            for (var i = 0; i < targetOffset; i++) {
-              traverse(node.childNodes[i]);
-            }
-          }
-          return true;
-        }
+      if (node === targetNode) {
         if (node.nodeType === Node.TEXT_NODE) {
           if (node.nodeValue) {
-            offset += node.nodeValue.length;
+            offset += targetOffset;
+            if (targetOffset === node.nodeValue.length && node.nodeValue.endsWith("\u200B")) {
+              offset--;
+            }
           }
         } else {
-          for (var _i = 0; _i < node.childNodes.length; _i++) {
-            if (traverse(node.childNodes[_i])) {
-              return true;
-            }
+          for (var i = 0; i < targetOffset; i++) {
+            traverse(node.childNodes[i]);
           }
         }
-      };
-      return traverse(ref.current) ? offset : -1;
+        return true;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.nodeValue) {
+          offset += node.nodeValue.length;
+        }
+      } else {
+        for (var _i = 0; _i < node.childNodes.length; _i++) {
+          if (traverse(node.childNodes[_i])) {
+            return true;
+          }
+        }
+      }
     };
-    return createSelection(getOffset(selection.anchorNode, selection.anchorOffset), getOffset(selection.focusNode, selection.focusOffset));
+    return traverse(root) ? offset : -1;
+  };
+
+  /**
+   * 获取容器选区
+   *
+   * 用 Selection API 获取选中的 DOM 节点和节点内偏移量，在 DOM 树上遍历获取对应的容器内偏移量
+   *
+   * @returns 容器选区
+   */
+  var getSelection = function getSelection() {
+    var selection = window.getSelection();
+    if (!selection || !selection.anchorNode || !selection.focusNode || !ref.current) {
+      return createSelection(-1);
+    }
+    return createSelection(getOffset(ref.current, selection.anchorNode, selection.anchorOffset), getOffset(ref.current, selection.focusNode, selection.focusOffset));
   };
 
   /**
@@ -290,23 +240,18 @@ export var useContainer = function useContainer(ref) {
     var anchorOffset = _ref2.anchorOffset,
       focusOffset = _ref2.focusOffset;
     var selection = window.getSelection();
-    if (!selection || anchorOffset === -1 || focusOffset === -1) {
+    if (!selection || anchorOffset === -1 || focusOffset === -1 || !ref.current) {
       return;
     }
 
     /**
      * 根据容器内偏移量获取节点和节点内偏移量
      *
+     * @param root 容器根节点
      * @param targetOffset 容器内偏移量
      * @returns 节点和节点内偏移量
      */
-    var getNodeOffset = function getNodeOffset(targetOffset) {
-      if (!ref.current) {
-        return {
-          node: undefined,
-          offset: 0
-        };
-      }
+    var getNodeOffset = function getNodeOffset(root, targetOffset) {
       var offset = targetOffset;
       var traverse = function traverse(node) {
         if (isIgnore(node)) {
@@ -329,19 +274,21 @@ export var useContainer = function useContainer(ref) {
         }
       };
       return {
-        node: traverse(ref.current),
+        node: traverse(root),
         offset: offset
       };
     };
-    var anchor = getNodeOffset(anchorOffset);
-    var focus = getNodeOffset(focusOffset);
+    var anchor = getNodeOffset(ref.current, anchorOffset);
+    var focus = getNodeOffset(ref.current, focusOffset);
     if (!anchor.node || !focus.node) {
       return;
     }
     selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
-    if (!ref.current) {
-      return;
-    }
+    ref.current.scrollIntoView({
+      behavior: 'instant',
+      block: 'nearest',
+      inline: 'nearest'
+    });
     var range = document.createRange();
     range.setStart(focus.node, focus.offset);
     range.setEnd(focus.node, focus.offset);
@@ -357,10 +304,46 @@ 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({
-    normalize: normalize,
     getText: getText,
     setText: setText,
+    getOffset: getOffset,
     getSelection: getSelection,
     setSelection: setSelection
   }).current;

package/dist/utils/handler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DeleteAction, InsertAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
+import type { InsertAction, SelectAction, SetAction, ToggleAction, useHistory } from './history';
 /**
  * 处理函数上下文
  */
@@ -11,11 +11,11 @@ export interface Handler<T = void> {
     (ctx: HandlerContext): T;
 }
 export declare const insertHandler: (payload: InsertAction['payload']) => Handler;
-export declare const deleteHandler: (payload: DeleteAction['payload']) => Handler;
 export declare const toggleHandler: (payload: ToggleAction['payload']) => Handler;
 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

@@ -21,52 +21,49 @@ export var insertHandler = function insertHandler(payload) {
     });
   };
 };
-export var deleteHandler = function deleteHandler(payload) {
+export var toggleHandler = function toggleHandler(payload) {
   return function (_ref2) {
     var selection = _ref2.selection,
       dispatch = _ref2.dispatch;
     return dispatch({
-      type: 'delete',
+      type: 'toggle',
       payload: payload,
       selection: selection
     });
   };
 };
-export var toggleHandler = function toggleHandler(payload) {
+export var setHandler = function setHandler(payload) {
   return function (_ref3) {
     var selection = _ref3.selection,
       dispatch = _ref3.dispatch;
     return dispatch({
-      type: 'toggle',
+      type: 'set',
       payload: payload,
       selection: selection
     });
   };
 };
-export var setHandler = function setHandler(payload) {
+export var undoHandler = function undoHandler() {
   return function (_ref4) {
-    var selection = _ref4.selection,
-      dispatch = _ref4.dispatch;
+    var dispatch = _ref4.dispatch;
     return dispatch({
-      type: 'set',
-      payload: payload,
-      selection: selection
+      type: 'undo'
     });
   };
 };
-export var undoHandler = function undoHandler() {
+export var redoHandler = function redoHandler() {
   return function (_ref5) {
     var dispatch = _ref5.dispatch;
     return dispatch({
-      type: 'undo'
+      type: 'redo'
     });
   };
 };
-export var redoHandler = function redoHandler() {
+export var batchHandler = function batchHandler() {
   return function (_ref6) {
     var dispatch = _ref6.dispatch;
     return dispatch({
-      type: 'redo'
+      type: 'batch'
     });
   };
 };
@@ -107,170 +104,6 @@ export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHan
           selection: selection
         });
       },
-      Backspace: function Backspace(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'backward',
-            boundary: 'char'
-          },
-          selection: selection
-        });
-      },
-      '$mod+Backspace': function $modBackspace(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'backward',
-            boundary: 'line'
-          },
-          selection: selection
-        });
-      },
-      'Shift+Backspace': function ShiftBackspace(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'backward',
-            boundary: 'char'
-          },
-          selection: selection
-        });
-      },
-      'Meta+Backspace': function MetaBackspace(e) {
-        return e.preventDefault();
-      },
-      'Alt+Backspace': function AltBackspace(e) {
-        return e.preventDefault();
-      },
-      'Control+Backspace': function ControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Backspace': function ShiftMetaBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Alt+Backspace': function ShiftAltBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Control+Backspace': function ShiftControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Meta+Alt+Backspace': function MetaAltBackspace(e) {
-        return e.preventDefault();
-      },
-      'Meta+Control+Backspace': function MetaControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Alt+Control+Backspace': function AltControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Alt+Backspace': function ShiftMetaAltBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Control+Backspace': function ShiftMetaControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Shift+Alt+Control+Backspace': function ShiftAltControlBackspace(e) {
-        return e.preventDefault();
-      },
-      'Meta+Alt+Control+Backspace': function MetaAltControlBackspace(e) {
-        return e.preventDefault();
-      },
-      Delete: function Delete(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'forward',
-            boundary: 'char'
-          },
-          selection: selection
-        });
-      },
-      '$mod+Delete': function $modDelete(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'forward',
-            boundary: 'line'
-          },
-          selection: selection
-        });
-      },
-      'Shift+Delete': function ShiftDelete(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'delete',
-          payload: {
-            direction: 'forward',
-            boundary: 'char'
-          },
-          selection: selection
-        });
-      },
-      'Meta+Delete': function MetaDelete(e) {
-        return e.preventDefault();
-      },
-      'Alt+Delete': function AltDelete(e) {
-        return e.preventDefault();
-      },
-      'Control+Delete': function ControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Delete': function ShiftMetaDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Alt+Delete': function ShiftAltDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Control+Delete': function ShiftControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Meta+Alt+Delete': function MetaAltDelete(e) {
-        return e.preventDefault();
-      },
-      'Meta+Control+Delete': function MetaControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Alt+Control+Delete': function AltControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Alt+Delete': function ShiftMetaAltDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Meta+Control+Delete': function ShiftMetaControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Shift+Alt+Control+Delete': function ShiftAltControlDelete(e) {
-        return e.preventDefault();
-      },
-      'Meta+Alt+Control+Delete': function MetaAltControlDelete(e) {
-        return e.preventDefault();
-      },
-      '$mod+KeyI': function $modKeyI(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'toggle',
-          payload: {
-            type: 'emphasis'
-          },
-          selection: selection
-        });
-      },
-      '$mod+KeyB': function $modKeyB(e) {
-        e.preventDefault();
-        dispatch({
-          type: 'toggle',
-          payload: {
-            type: 'strong'
-          },
-          selection: selection
-        });
-      },
       '$mod+KeyZ': function $modKeyZ(e) {
         e.preventDefault();
         dispatch({

package/dist/utils/history.d.ts

@@ -14,14 +14,6 @@ export interface InsertAction {
     };
     selection: ContainerSelection;
 }
-export interface DeleteAction {
-    type: 'delete';
-    payload?: {
-        direction: 'backward' | 'forward';
-        boundary: 'char' | 'line';
-    };
-    selection: ContainerSelection;
-}
 export interface ToggleAction {
     type: 'toggle';
     payload: {
@@ -46,13 +38,15 @@ export interface SetAction {
     payload: State;
     selection: ContainerSelection;
 }
-type StateAction = InsertAction | DeleteAction | ToggleAction | SetAction;
+type StateAction = InsertAction | ToggleAction | SetAction;
 /**
  * 编辑器历史
  */
 interface History {
     states: (State & {
-        action: StateAction;
+        action: StateAction & {
+            batch?: boolean;
+        };
     })[];
     index: number;
     selection: ContainerSelection;
@@ -63,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 {};