x-star-editor 0.2.6 → 0.3.0

package/dist/utils/container.js

@@ -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);
@@ -358,9 +305,9 @@ export var useContainer = function useContainer(ref) {
     }
   };
   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,7 +11,6 @@ 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;

package/dist/utils/handler.js

@@ -21,32 +21,21 @@ 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',
-      payload: payload,
-      selection: selection
-    });
-  };
-};
-export var setHandler = function setHandler(payload) {
-  return function (_ref4) {
-    var selection = _ref4.selection,
-      dispatch = _ref4.dispatch;
     return dispatch({
       type: 'set',
       payload: payload,
@@ -55,24 +44,24 @@ export var setHandler = function setHandler(payload) {
   };
 };
 export var undoHandler = function undoHandler() {
-  return function (_ref5) {
-    var dispatch = _ref5.dispatch;
+  return function (_ref4) {
+    var dispatch = _ref4.dispatch;
     return dispatch({
       type: 'undo'
     });
   };
 };
 export var redoHandler = function redoHandler() {
-  return function (_ref6) {
-    var dispatch = _ref6.dispatch;
+  return function (_ref5) {
+    var dispatch = _ref5.dispatch;
     return dispatch({
       type: 'redo'
     });
   };
 };
 export var selectHandler = function selectHandler(selection) {
-  return function (_ref7) {
-    var dispatch = _ref7.dispatch;
+  return function (_ref6) {
+    var dispatch = _ref6.dispatch;
     return dispatch({
       type: 'select',
       selection: selection
@@ -91,11 +80,11 @@ export var selectHandler = function selectHandler(selection) {
  */
 
 export var getDefaultKeyboardEventHandlers = function getDefaultKeyboardEventHandlers() {
-  return [function (_ref8) {
-    var sourceCode = _ref8.sourceCode,
-      selection = _ref8.selection,
-      dispatch = _ref8.dispatch,
-      e = _ref8.e;
+  return [function (_ref7) {
+    var sourceCode = _ref7.sourceCode,
+      selection = _ref7.selection,
+      dispatch = _ref7.dispatch,
+      e = _ref7.e;
     return createKeybindingsHandler({
       Tab: function Tab(e) {
         e.preventDefault();
@@ -107,170 +96,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,7 +38,7 @@ export interface SetAction {
     payload: State;
     selection: ContainerSelection;
 }
-type StateAction = InsertAction | DeleteAction | ToggleAction | SetAction;
+type StateAction = InsertAction | ToggleAction | SetAction;
 /**
  * 编辑器历史
  */

package/dist/utils/history.js

@@ -27,43 +27,6 @@ var stateReducer = function stateReducer(_ref, action) {
           selection: createSelection(startOffset + text.length)
         };
       }
-    case 'delete':
-      {
-        // 选区不为空
-        if (startOffset < endOffset) {
-          return {
-            sourceCode: "".concat(before).concat(after),
-            selection: createSelection(startOffset)
-          };
-        }
-
-        // 选区为空，根据删除方向和边界生成新状态
-        if (action.payload) {
-          var _action$payload = action.payload,
-            direction = _action$payload.direction,
-            boundary = _action$payload.boundary;
-          if (direction === 'backward' && startOffset) {
-            var index = before.lastIndexOf('\n');
-            var length = boundary === 'char' || index === before.length - 1 ? 1 : before.length - 1 - index;
-            return {
-              sourceCode: "".concat(before.slice(0, before.length - length)).concat(after),
-              selection: createSelection(startOffset - length)
-            };
-          }
-          if (direction === 'forward' && startOffset < sourceCode.length) {
-            var _index = "".concat(after, "\n").indexOf('\n');
-            var _length = boundary === 'char' || !_index ? 1 : _index;
-            return {
-              sourceCode: "".concat(before).concat(after.slice(_length)),
-              selection: createSelection(startOffset)
-            };
-          }
-        }
-        return {
-          sourceCode: sourceCode,
-          selection: action.selection
-        };
-      }
     case 'toggle':
       {
         var lineStartOffset = before.lastIndexOf('\n') + 1;
@@ -97,10 +60,10 @@ var stateReducer = function stateReducer(_ref, action) {
             }
           case 'code':
             {
-              var _action$payload2 = action.payload,
-                lang = _action$payload2.lang,
-                value = _action$payload2.value,
-                showLineNumbers = _action$payload2.showLineNumbers;
+              var _action$payload = action.payload,
+                lang = _action$payload.lang,
+                value = _action$payload.value,
+                showLineNumbers = _action$payload.showLineNumbers;
               var _startOffset = lineEndOffset + lang.length + (showLineNumbers ? 21 : 5);
               return {
                 sourceCode: "".concat(sourceCode.slice(0, lineEndOffset), "\n```").concat(lang).concat(showLineNumbers ? ' showLineNumbers' : '', "\n").concat(value, "\n```\n").concat(lineAfter),
@@ -164,10 +127,10 @@ var stateReducer = function stateReducer(_ref, action) {
           case 'image':
           case 'link':
             {
-              var _action$payload3 = action.payload,
-                _type = _action$payload3.type,
-                url = _action$payload3.url,
-                description = _action$payload3.description;
+              var _action$payload2 = action.payload,
+                _type = _action$payload2.type,
+                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))
@@ -196,9 +159,9 @@ var stateReducer = function stateReducer(_ref, action) {
       }
     case 'set':
       {
-        var _action$payload4 = action.payload,
-          _sourceCode = _action$payload4.sourceCode,
-          selection = _action$payload4.selection;
+        var _action$payload3 = action.payload,
+          _sourceCode = _action$payload3.sourceCode,
+          selection = _action$payload3.selection;
         return {
           sourceCode: _sourceCode.replace(/\r\n?/g, '\n'),
           selection: selection