@coze-editor/react-components 0.1.0-alpha.7cf9d0 → 0.1.0-alpha.7f007e

package/dist/index.js

@@ -45,8 +45,10 @@ __export(index_exports, {
   Mention: () => Mention,
   Placeholder: () => Placeholder,
   PositionMirror: () => PositionMirror,
+  PrefixElement: () => PrefixElement,
   RefElement: () => RefElement,
   SelectionSide: () => import_extensions.SelectionSide,
+  ValueSync: () => ValueSync,
   getCurrentMentionReplaceRange: () => getCurrentMentionReplaceRange
 });
 module.exports = __toCommonJS(index_exports);
@@ -1174,7 +1176,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) {
@@ -1193,6 +1198,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 = {
@@ -1300,6 +1314,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([
@@ -1449,6 +1468,132 @@ var EmbededLineView = (0, import_react21.forwardRef)(function EmbededLineView2({
   }, []);
   return (0, import_react_dom6.createPortal)(children, dom);
 });
+
+// src/prefix-element/react.tsx
+var import_react_dom7 = require("react-dom");
+var import_react23 = require("react");
+var import_react_hooks10 = require("@coze-editor/react-hooks");
+var import_react24 = require("@coze-editor/react");
+var import_view10 = require("@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 import_view10.WidgetType {
+  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 = (0, import_react_hooks10.useHTMLElement)("span");
+  const latestElement = (0, import_react_hooks10.useLatest)(element);
+  const latestDeletable = (0, import_react_hooks10.useLatest)(deletable);
+  const latestOnDelete = (0, import_react_hooks10.useLatest)(onDelete);
+  const injector = (0, import_react24.useInjector)();
+  (0, import_react23.useLayoutEffect)(() => {
+    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([
+      import_view10.EditorView.decorations.of(
+        import_view10.Decoration.set([
+          import_view10.Decoration.widget({
+            side: -100,
+            block: false,
+            widget: new PrefixElementWidget(() => latestElement.current)
+          }).range(0)
+        ])
+      ),
+      import_view10.keymap.of([
+        { key: "Backspace", shift: run, run },
+        { key: "Meta-Backspace", shift: run, run }
+      ])
+    ]);
+  }, []);
+  return (0, import_react_dom7.createPortal)(children, element);
+}
+
+// src/value-sync.tsx
+var import_react26 = require("react");
+var import_react27 = require("@coze-editor/react");
+function ValueSync({ value }) {
+  const editor = (0, import_react27.useEditor)();
+  (0, import_react26.useEffect)(() => {
+    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;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActiveLinePlaceholder,
@@ -1467,8 +1612,10 @@ var EmbededLineView = (0, import_react21.forwardRef)(function EmbededLineView2({
   Mention,
   Placeholder,
   PositionMirror,
+  PrefixElement,
   RefElement,
   SelectionSide,
+  ValueSync,
   getCurrentMentionReplaceRange
 });
 //# sourceMappingURL=index.js.map