one-design-next 0.0.13 → 0.0.14

package/dist/composer/editor.js

@@ -34,7 +34,7 @@ import { createPortal } from 'react-dom';
 import { buildClipboardPayload, COMPOSER_CLIPBOARD_MIME, parseClipboardPayload, plainTextFromClipboardPayload, remapClipboardPayload } from "./clipboard";
 import { useChipManager } from "./hooks/useChipManager";
 import { useChipSelectionMarker } from "./hooks/useChipSelectionMarker";
-import { findChipHostBeforeCaret, getPlainText, isEditorEmpty, probeTrigger, resolveCaretJumpAroundChip, ZWSP } from "./utils";
+import { findChipHostAfterCaret, findChipHostBeforeCaret, getPlainText, getVisibleTextBeforeHost, isEditorEmpty, moveCaretBeforeChip, normalizeEditorDom, probeTrigger, resolveCaretJumpAroundChip, stripInvisibleChars, ZWSP } from "./utils";
 import { ComposerInlineRef } from "./inline-ref";
 import ScrollArea from "../scroll-area";
 
@@ -176,6 +176,7 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
   var fireChange = useCallback(function () {
     var el = editorRef.current;
     if (!el) return;
+    normalizeEditorDom(el);
     setEmpty(isEditorEmpty(el));
     onChange === null || onChange === void 0 || onChange(getPlainText(el));
     // editor.height 锁定时 RO 不触发，主动同步一次，确保升格判定能拿到 scrollHeight
@@ -390,7 +391,10 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
    * ───────────────────────────────────── */
   var handleInput = useCallback(function () {
     var el = editorRef.current;
-    if (el) setEmpty(isEditorEmpty(el));
+    if (el) {
+      normalizeEditorDom(el);
+      setEmpty(isEditorEmpty(el));
+    }
     requestScrollCaretIntoView();
     if (isComposingRef.current) return;
     fireChange();
@@ -442,17 +446,35 @@ export var ComposerEditor = /*#__PURE__*/forwardRef(function ComposerEditor(_ref
       if (onTriggerKeyDown(e) === true) return;
     }
 
-    // Backspace：紧邻 chip 后方时整块删
+    // Backspace：chip 边界——空 text 在 chip 后先退回 chip 前；chip 前无正文再整块删
     if (e.key === 'Backspace') {
+      var el = editorRef.current;
       var sel = window.getSelection();
-      if (sel && sel.rangeCount > 0) {
+      if (el && sel && sel.rangeCount > 0) {
         var range = sel.getRangeAt(0);
-        if (range.collapsed) {
-          var host = findChipHostBeforeCaret(range);
-          var _id = host === null || host === void 0 ? void 0 : host.dataset.mentionId;
-          if (_id) {
+        if (range.collapsed && el.contains(range.startContainer)) {
+          var hostBefore = findChipHostBeforeCaret(range);
+          if (hostBefore !== null && hostBefore !== void 0 && hostBefore.dataset.mentionId) {
+            var _node$textContent;
+            var node = range.startContainer,
+              offset = range.startOffset;
+            if (node.nodeType === Node.TEXT_NODE && offset === 0 && node.previousSibling === hostBefore && stripInvisibleChars((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : '') === '') {
+              e.preventDefault();
+              moveCaretBeforeChip(hostBefore, {
+                removeTrailingEmptyText: true,
+                trailingText: node
+              });
+              return;
+            }
+            e.preventDefault();
+            removeChip(hostBefore.dataset.mentionId);
+            return;
+          }
+          var hostAfter = findChipHostAfterCaret(range);
+          var idAfter = hostAfter === null || hostAfter === void 0 ? void 0 : hostAfter.dataset.mentionId;
+          if (idAfter && getVisibleTextBeforeHost(el, hostAfter).trim() === '') {
             e.preventDefault();
-            removeChip(_id);
+            removeChip(idAfter);
             return;
           }
         }

package/dist/composer/utils.d.ts

@@ -86,6 +86,19 @@ export declare function resolveCaretJumpAroundChip(range: Range, direction: 'lef
     node: Node;
     offset: number;
 } | null;
+export declare function childIndex(node: Node): number;
+/** chip 之前的可见纯文本（不含 marker / 不可见字符）。 */
+export declare function getVisibleTextBeforeHost(editor: HTMLElement, host: HTMLElement, chipIdAttr?: string): string;
+/**
+ * 清理 contenteditable 删字后的幽灵节点：空 text、仅 chip 时的占位 <br>。
+ * 避免「文字 + invocation」删光文字后出现多余换行，以及 caret 卡在 chip 后误删 invocation。
+ */
+export declare function normalizeEditorDom(editor: HTMLElement, _chipIdAttr?: string): void;
+/** caret 落在 chip 后空 text 时，挪到 chip 前（不删 chip）。 */
+export declare function moveCaretBeforeChip(host: HTMLElement, opts?: {
+    removeTrailingEmptyText?: boolean;
+    trailingText?: Text | null;
+}): void;
 export interface TriggerProbe {
     /** 触发字符 */
     trigger: string;

package/dist/composer/utils.js

@@ -328,7 +328,7 @@ export function resolveCaretJumpAroundChip(range, direction) {
     offset: childIndex(chip) + 1
   };
 }
-function childIndex(node) {
+export function childIndex(node) {
   var i = 0;
   var cur = node.previousSibling;
   while (cur) {
@@ -338,6 +338,83 @@ function childIndex(node) {
   return i;
 }
 
+/** chip 之前的可见纯文本（不含 marker / 不可见字符）。 */
+export function getVisibleTextBeforeHost(editor, host) {
+  var chipIdAttr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mentionId';
+  var r = document.createRange();
+  r.selectNodeContents(editor);
+  r.setEndBefore(host);
+  var tmp = document.createElement('div');
+  tmp.appendChild(r.cloneContents());
+  return stripInvisibleChars(stripMarkers(getPlainText(tmp))).replace(/\n/g, '');
+}
+
+/**
+ * 清理 contenteditable 删字后的幽灵节点：空 text、仅 chip 时的占位 <br>。
+ * 避免「文字 + invocation」删光文字后出现多余换行，以及 caret 卡在 chip 后误删 invocation。
+ */
+export function normalizeEditorDom(editor) {
+  var _chipIdAttr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mentionId';
+  var emptyTexts = [];
+  var walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+  var n;
+  while (n = walker.nextNode()) {
+    var _t$textContent;
+    var t = n;
+    if (stripInvisibleChars((_t$textContent = t.textContent) !== null && _t$textContent !== void 0 ? _t$textContent : '') === '') {
+      emptyTexts.push(t);
+    }
+  }
+  emptyTexts.forEach(function (t) {
+    return t.remove();
+  });
+  var plain = stripInvisibleChars(stripMarkers(getPlainText(editor))).replace(/\n/g, '');
+  var hasChip = !!editor.querySelector('[data-odn-composer-chip-host]');
+  if (hasChip && plain === '') {
+    editor.querySelectorAll('br').forEach(function (br) {
+      return br.remove();
+    });
+  }
+  editor.querySelectorAll('[data-odn-composer-chip-host]').forEach(function (hostEl) {
+    var host = hostEl;
+    var prev = host.previousSibling;
+    while (prev) {
+      if (prev.nodeType === Node.TEXT_NODE) {
+        var _prev$textContent;
+        var _t = stripInvisibleChars((_prev$textContent = prev.textContent) !== null && _prev$textContent !== void 0 ? _prev$textContent : '');
+        if (_t !== '') break;
+        var rm = prev;
+        prev = prev.previousSibling;
+        rm.remove();
+        continue;
+      }
+      if (prev.nodeType === Node.ELEMENT_NODE && prev.tagName === 'BR') {
+        var _rm = prev;
+        prev = prev.previousSibling;
+        _rm.remove();
+        continue;
+      }
+      break;
+    }
+  });
+}
+
+/** caret 落在 chip 后空 text 时，挪到 chip 前（不删 chip）。 */
+export function moveCaretBeforeChip(host, opts) {
+  var parent = host.parentNode;
+  if (!parent) return;
+  var sel = window.getSelection();
+  if (!sel) return;
+  var r = document.createRange();
+  r.setStart(parent, childIndex(host));
+  r.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(r);
+  if (opts !== null && opts !== void 0 && opts.removeTrailingEmptyText && opts.trailingText) {
+    opts.trailingText.remove();
+  }
+}
+
 /* ────────────────────────────────────────────────────────────────────
  * Trigger probe · @ / / 触发态判定
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "One Design Next from TAD@tencent.com",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",