@coze-editor/react-components 0.1.0-alpha.8d7a30 → 0.1.0-alpha.9a9cc7

package/dist/esm/index.js

@@ -1172,7 +1172,10 @@ function mention(options) {
     },
     update(value, tr) {
       const options2 = tr.startState.facet(mentionConfig);
-      const { search = true, onOpenChange, onSearch } = options2;
+      if (!options2) {
+        return value;
+      }
+      const { search = true, onOpenChange, onSearch, onTrigger } = options2;
       let { show } = value;
       let triggerContext = void 0;
       if (tr.docChanged) {
@@ -1191,6 +1194,15 @@ function mention(options) {
         } else if (hasTrigger(options2)) {
           triggerContext = options2.trigger(tr);
         }
+        if (triggerContext && typeof onTrigger === "function") {
+          onTrigger({
+            triggerContext: {
+              from: triggerContext.from,
+              to: triggerContext.to,
+              triggerCharacter: triggerContext.triggerCharacter
+            }
+          });
+        }
       }
       const isSelectUserEvent = tr.isUserEvent("select");
       const newValue = {
@@ -1298,6 +1310,11 @@ function Mention(props) {
         if (typeof propsRef.current.onSearch === "function") {
           return propsRef.current.onSearch(...args);
         }
+      },
+      onTrigger(...args) {
+        if (typeof propsRef.current.onTrigger === "function") {
+          return propsRef.current.onTrigger(...args);
+        }
       }
     };
     return injector.inject([
@@ -1451,6 +1468,132 @@ var EmbededLineView = forwardRef4(function EmbededLineView2({ children }, ref) {
   }, []);
   return createPortal6(children, dom);
 });
+
+// src/prefix-element/react.tsx
+import { createPortal as createPortal7 } from "react-dom";
+import { useLayoutEffect as useLayoutEffect8 } from "react";
+import { useHTMLElement as useHTMLElement6, useLatest as useLatest6 } from "@coze-editor/react-hooks";
+import { useInjector as useInjector9 } from "@coze-editor/react";
+import { Decoration as Decoration4, EditorView as EditorView8, keymap, WidgetType as WidgetType5 } from "@codemirror/view";
+
+// src/prefix-element/dom.ts
+var scratchRange;
+function textRange(node, from, to = from) {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+}
+function flattenRect(rect, left) {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+}
+function clientRectsFor(dom) {
+  if (dom.nodeType == 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType == 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+}
+
+// src/prefix-element/react.tsx
+var PrefixElementWidget = class extends WidgetType5 {
+  constructor(content) {
+    super();
+    this.content = content;
+  }
+  toDOM(view) {
+    const wrap = document.createElement("span");
+    wrap.className = "cm-prefix-element";
+    wrap.style.cssText = "height: 0;";
+    wrap.appendChild(
+      typeof this.content === "string" ? document.createTextNode(this.content) : typeof this.content === "function" ? this.content(view) : this.content
+    );
+    if (typeof this.content === "string") {
+      wrap.setAttribute("aria-label", `prefix ${this.content}`);
+    } else {
+      wrap.setAttribute("aria-hidden", "true");
+    }
+    return wrap;
+  }
+  coordsAt(dom) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode);
+    const rect = flattenRect(rects[0], style.direction != "rtl");
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight
+      };
+    }
+    return rect;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+function PrefixElement({ deletable, onDelete, children }) {
+  const element = useHTMLElement6("span");
+  const latestElement = useLatest6(element);
+  const latestDeletable = useLatest6(deletable);
+  const latestOnDelete = useLatest6(onDelete);
+  const injector = useInjector9();
+  useLayoutEffect8(() => {
+    function run(view) {
+      if (view.state.selection.main.empty && view.state.selection.main.head === 0 && latestDeletable.current === true && typeof latestOnDelete.current === "function") {
+        latestOnDelete.current();
+      }
+      return false;
+    }
+    return injector.inject([
+      EditorView8.decorations.of(
+        Decoration4.set([
+          Decoration4.widget({
+            side: -100,
+            block: false,
+            widget: new PrefixElementWidget(() => latestElement.current)
+          }).range(0)
+        ])
+      ),
+      keymap.of([
+        { key: "Backspace", shift: run, run },
+        { key: "Meta-Backspace", shift: run, run }
+      ])
+    ]);
+  }, []);
+  return createPortal7(children, element);
+}
+
+// src/value-sync.tsx
+import { useEffect as useEffect6 } from "react";
+import { useEditor as useEditor6 } from "@coze-editor/react";
+function ValueSync({ value }) {
+  const editor = useEditor6();
+  useEffect6(() => {
+    if (!editor) {
+      return;
+    }
+    const { doc } = editor.$view.state;
+    if (typeof value === "string" && value !== doc.toString()) {
+      editor.$view.dispatch({
+        changes: {
+          from: 0,
+          to: doc.length,
+          insert: value
+        }
+      });
+    }
+  }, [editor, value]);
+  return null;
+}
 export {
   ActiveLinePlaceholder,
   CursorInlayHint,
@@ -1468,8 +1611,10 @@ export {
   Mention,
   Placeholder,
   PositionMirror,
+  PrefixElement,
   RefElement,
   SelectionSide,
+  ValueSync,
   getCurrentMentionReplaceRange
 };
 //# sourceMappingURL=index.js.map