@coze-editor/react-components 0.1.0-alpha.09ffeb

package/dist/index.js

@@ -0,0 +1,1596 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ActiveLinePlaceholder: () => ActiveLinePlaceholder,
+  CursorInlayHint: () => CursorInlayHint,
+  CursorMirror: () => CursorMirror,
+  DiagnosticMarkers: () => DiagnosticMarkers,
+  DiffView: () => DiffView,
+  EmbededLineView: () => EmbededLineView,
+  EmbededLineViewSide: () => EmbededLineViewSide,
+  FoldGutter: () => FoldGutter,
+  Gutter: () => Gutter,
+  GutterLineMarker: () => GutterLineMarker,
+  GutterPlacement: () => GutterPlacement,
+  LineWidget: () => LineWidget,
+  Markers: () => Markers,
+  Mention: () => Mention,
+  Placeholder: () => Placeholder,
+  PositionMirror: () => PositionMirror,
+  PrefixElement: () => PrefixElement,
+  RefElement: () => RefElement,
+  SelectionSide: () => import_extensions.SelectionSide,
+  getCurrentMentionReplaceRange: () => getCurrentMentionReplaceRange
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/cursor-mirror/index.tsx
+var import_react = require("react");
+var import_dom = require("@floating-ui/dom");
+var import_react2 = require("@coze-editor/react");
+var import_extensions = require("@coze-editor/extensions");
+var CursorMirror = (0, import_react.forwardRef)(function CursorMirror2({ side, onChange, onVisibleChange }, ref) {
+  const injector = (0, import_react2.useInjector)();
+  const editor = (0, import_react2.useEditor)();
+  const [dom] = (0, import_react.useState)(() => document.createElement("div"));
+  const domRef = (0, import_react.useRef)(dom);
+  domRef.current = dom;
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onVisibleChangeRef = (0, import_react.useRef)(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+  (0, import_react.useImperativeHandle)(ref, () => domRef.current);
+  (0, import_react.useLayoutEffect)(
+    () => injector.inject([
+      import_extensions.elementAtPosition.of({
+        dom: domRef.current,
+        pos: side
+      }),
+      import_extensions.positionElementLayer
+    ]),
+    [injector, side]
+  );
+  (0, import_react.useEffect)(() => {
+    const floating = document.createElement("div");
+    document.body.appendChild(floating);
+    const dispose = (0, import_dom.autoUpdate)(
+      domRef.current,
+      floating,
+      () => {
+        if (typeof onChangeRef.current === "function") {
+          onChangeRef.current();
+        }
+      },
+      { animationFrame: true }
+    );
+    return () => {
+      document.body.removeChild(floating);
+      dispose();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+    const view = editor.$view;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (typeof onVisibleChangeRef.current === "function") {
+            onVisibleChangeRef.current(entry.isIntersecting);
+          }
+        });
+      },
+      {
+        root: view.scrollDOM,
+        threshold: 0
+      }
+    );
+    observer.observe(domRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [editor]);
+  return null;
+});
+
+// src/position-mirror/index.tsx
+var import_react3 = require("react");
+var import_dom2 = require("@floating-ui/dom");
+var import_react4 = require("@coze-editor/react");
+var import_extensions2 = require("@coze-editor/extensions");
+var PositionMirror = (0, import_react3.forwardRef)(function CursorMirror3({ position, onChange, onVisibleChange }, ref) {
+  const injector = (0, import_react4.useInjector)();
+  const editor = (0, import_react4.useEditor)();
+  const [dom] = (0, import_react3.useState)(() => {
+    const el = document.createElement("div");
+    el.classList.add("cm-position-mirror");
+    return el;
+  });
+  const domRef = (0, import_react3.useRef)(dom);
+  domRef.current = dom;
+  const onChangeRef = (0, import_react3.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onVisibleChangeRef = (0, import_react3.useRef)(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+  (0, import_react3.useImperativeHandle)(ref, () => domRef.current);
+  (0, import_react3.useLayoutEffect)(
+    () => injector.inject([
+      import_extensions2.elementAtPosition.of({
+        dom: domRef.current,
+        pos: position
+      }),
+      import_extensions2.positionElementLayer
+    ]),
+    [injector, position]
+  );
+  (0, import_react3.useEffect)(() => {
+    const floating = document.createElement("div");
+    document.body.appendChild(floating);
+    const dispose = (0, import_dom2.autoUpdate)(
+      domRef.current,
+      floating,
+      () => {
+        if (typeof onChangeRef.current === "function") {
+          onChangeRef.current();
+        }
+      },
+      { animationFrame: true }
+    );
+    return () => {
+      document.body.removeChild(floating);
+      dispose();
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+    const view = editor.$view;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (typeof onVisibleChangeRef.current === "function") {
+            onVisibleChangeRef.current(entry.isIntersecting);
+          }
+        });
+      },
+      {
+        root: view.scrollDOM,
+        threshold: 0
+      }
+    );
+    observer.observe(domRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [editor]);
+  return null;
+});
+
+// src/cursor-inlay-hint/index.tsx
+var import_react_dom = require("react-dom");
+var import_react5 = require("react");
+var import_react_hooks = require("@coze-editor/react-hooks");
+var import_react6 = require("@coze-editor/react");
+var import_view = require("@codemirror/view");
+var InlayHintWidget = class extends import_view.WidgetType {
+  constructor(element) {
+    super();
+    this.element = element;
+  }
+  eq(other) {
+    return this.element === other.element;
+  }
+  toDOM() {
+    return this.element;
+  }
+};
+function CursorInlayHint({ children }) {
+  const injector = (0, import_react6.useInjector)();
+  const element = (0, import_react_hooks.useHTMLElement)("span");
+  (0, import_react5.useLayoutEffect)(
+    () => injector.inject([
+      import_view.EditorView.decorations.compute(
+        ["selection"],
+        (state) => import_view.Decoration.set([
+          import_view.Decoration.widget({
+            widget: new InlayHintWidget(element),
+            side: 1
+          }).range(state.selection.main.head)
+        ])
+      )
+    ]),
+    [injector]
+  );
+  return (0, import_react_dom.createPortal)(children, element);
+}
+
+// src/markers/markers.tsx
+var import_react7 = require("react");
+var import_react_hooks2 = require("@coze-editor/react-hooks");
+var import_react8 = require("@coze-editor/react");
+var import_extensions3 = require("@coze-editor/extensions");
+function Markers({ markers }) {
+  const injector = (0, import_react8.useInjector)();
+  const field = (0, import_react_hooks2.useStateField)((0, import_react7.useCallback)(() => markers, [markers]));
+  (0, import_react7.useLayoutEffect)(
+    () => injector.inject([field, import_extensions3.mergeableMarkers.from(field)]),
+    [injector, field]
+  );
+  return null;
+}
+
+// src/markers/diagnostic-markers.tsx
+var import_react9 = __toESM(require("react"));
+var import_hash_sum = __toESM(require("hash-sum"));
+var import_react10 = require("@coze-editor/react");
+var import_view2 = require("@codemirror/view");
+function DiagnosticMarkers({ markers }) {
+  const theme = (0, import_react9.useMemo)(() => {
+    const colors = getColors(markers);
+    return colors.reduce((memo, color) => {
+      const className = getClassNameFromColor(color);
+      memo[`& .${className}`] = {
+        backgroundPosition: "left bottom",
+        backgroundRepeat: "repeat-x",
+        paddingBottom: "0.7px",
+        backgroundImage: underline(color)
+      };
+      return memo;
+    }, {});
+  }, [markers]);
+  const injector = (0, import_react10.useInjector)();
+  (0, import_react9.useLayoutEffect)(
+    () => injector.inject([import_view2.EditorView.theme(theme)]),
+    [injector, theme]
+  );
+  const finalMarkers = (0, import_react9.useMemo)(
+    () => markers.map((marker) => {
+      const className = getClassNameFromColor(marker.color ?? "red");
+      return {
+        from: marker.from,
+        to: marker.to,
+        className
+      };
+    }),
+    [markers]
+  );
+  return /* @__PURE__ */ import_react9.default.createElement(Markers, { markers: finalMarkers });
+}
+var isString = (v) => Boolean(v);
+function getColors(markers) {
+  return [
+    .../* @__PURE__ */ new Set([
+      ...markers.map((marker) => marker.color).filter((v) => isString(v)),
+      "red"
+    ])
+  ];
+}
+function getClassNameFromColor(color) {
+  return `cm-sdk-diagnostic-marker-${(0, import_hash_sum.default)(color)}`;
+}
+function svg(content, attrs) {
+  return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" ${attrs}>${encodeURIComponent(content)}</svg>')`;
+}
+function underline(color) {
+  return svg(
+    `<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`,
+    'width="6" height="3"'
+  );
+}
+
+// src/gutter/gutter.tsx
+var import_react_dom2 = require("react-dom");
+var import_react11 = __toESM(require("react"));
+var import_utils = require("jotai/utils");
+var import_jotai2 = require("jotai");
+var import_react_hooks3 = require("@coze-editor/react-hooks");
+var import_react12 = require("@coze-editor/react");
+var import_view4 = require("@codemirror/view");
+var import_state3 = require("@codemirror/state");
+
+// src/gutter/right-gutter.ts
+var import_state = require("@codemirror/state");
+var import_view3 = require("@codemirror/view");
+var GutterMarker = class extends import_state.RangeValue {
+  /// @internal
+  compare(other) {
+    return this == other || this.constructor == other.constructor && this.eq(other);
+  }
+  /// Compare this marker to another marker of the same type.
+  eq(other) {
+    return false;
+  }
+  /// This property can be used to add CSS classes to the gutter
+  /// element that contains this marker.
+  elementClass;
+  /// Called if the marker has a `toDOM` method and its representation
+  /// was removed from a gutter.
+  destroy(dom) {
+  }
+};
+GutterMarker.prototype.elementClass = "";
+GutterMarker.prototype.toDOM = void 0;
+GutterMarker.prototype.mapMode = import_state.MapMode.TrackBefore;
+GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
+GutterMarker.prototype.point = true;
+var gutterLineClass = import_state.Facet.define();
+var gutterWidgetClass = import_state.Facet.define();
+var defaults = {
+  class: "",
+  renderEmptyElements: false,
+  elementStyle: "",
+  markers: () => import_state.RangeSet.empty,
+  lineMarker: () => null,
+  widgetMarker: () => null,
+  lineMarkerChange: null,
+  initialSpacer: null,
+  updateSpacer: null,
+  domEventHandlers: {}
+};
+var activeGutters = import_state.Facet.define();
+function gutter(config) {
+  return [gutters(), activeGutters.of({ ...defaults, ...config })];
+}
+var unfixGutters = import_state.Facet.define({
+  combine: (values) => values.some((x) => x)
+});
+function gutters(config) {
+  const result = [
+    gutterView,
+    // right gutter theme
+    import_view3.EditorView.baseTheme({
+      ".cm-right-gutters": {
+        flexShrink: 0,
+        display: "flex",
+        height: "100%",
+        boxSizing: "border-box",
+        insetInlineStart: 0,
+        zIndex: 200
+      },
+      ".cm-right-gutter": {
+        display: "flex !important",
+        // Necessary -- prevents margin collapsing
+        flexDirection: "column",
+        flexShrink: 0,
+        boxSizing: "border-box",
+        minHeight: "100%",
+        overflow: "hidden"
+      },
+      ".cm-rightGutterElement": {
+        boxSizing: "border-box"
+      }
+    })
+  ];
+  if (config && config.fixed === false) result.push(unfixGutters.of(true));
+  return result;
+}
+var gutterView = import_view3.ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.view = view;
+    this.prevViewport = view.viewport;
+    this.dom = document.createElement("div");
+    this.dom.className = "cm-right-gutters";
+    this.dom.setAttribute("aria-hidden", "true");
+    this.dom.style.minHeight = this.view.contentHeight / this.view.scaleY + "px";
+    this.gutters = view.state.facet(activeGutters).map((conf) => new SingleGutterView(view, conf));
+    for (const gutter2 of this.gutters) this.dom.appendChild(gutter2.dom);
+    this.fixed = !view.state.facet(unfixGutters);
+    if (this.fixed) {
+      this.dom.style.position = "sticky";
+    }
+    this.syncGutters(false);
+    view.scrollDOM.appendChild(this.dom);
+  }
+  gutters;
+  dom;
+  fixed;
+  prevViewport;
+  update(update) {
+    if (this.updateGutters(update)) {
+      const vpA = this.prevViewport, vpB = update.view.viewport;
+      const vpOverlap = Math.min(vpA.to, vpB.to) - Math.max(vpA.from, vpB.from);
+      this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8);
+    }
+    if (update.geometryChanged) {
+      this.dom.style.minHeight = this.view.contentHeight / this.view.scaleY + "px";
+    }
+    if (this.view.state.facet(unfixGutters) != !this.fixed) {
+      this.fixed = !this.fixed;
+      this.dom.style.position = this.fixed ? "sticky" : "";
+    }
+    this.prevViewport = update.view.viewport;
+  }
+  syncGutters(detach) {
+    const before = this.dom.previousSibling;
+    if (detach) this.dom.remove();
+    const lineClasses = import_state.RangeSet.iter(this.view.state.facet(gutterLineClass), this.view.viewport.from);
+    let classSet = [];
+    const contexts = this.gutters.map((gutter2) => new UpdateContext(gutter2, this.view.viewport, -this.view.documentPadding.top));
+    for (const line of this.view.viewportLineBlocks) {
+      if (classSet.length) classSet = [];
+      if (Array.isArray(line.type)) {
+        let first = true;
+        for (const b of line.type) {
+          if (b.type == import_view3.BlockType.Text && first) {
+            advanceCursor(lineClasses, classSet, b.from);
+            for (const cx of contexts) cx.line(this.view, b, classSet);
+            first = false;
+          } else if (b.widget) {
+            for (const cx of contexts) cx.widget(this.view, b);
+          }
+        }
+      } else if (line.type == import_view3.BlockType.Text) {
+        advanceCursor(lineClasses, classSet, line.from);
+        for (const cx of contexts) cx.line(this.view, line, classSet);
+      } else if (line.widget) {
+        for (const cx of contexts) cx.widget(this.view, line);
+      }
+    }
+    for (const cx of contexts) cx.finish();
+    if (detach) {
+      this.view.scrollDOM.insertBefore(this.dom, (before == null ? void 0 : before.nextSibling) ?? null);
+    }
+  }
+  updateGutters(update) {
+    const prev = update.startState.facet(activeGutters), cur = update.state.facet(activeGutters);
+    let change = update.docChanged || update.heightChanged || update.viewportChanged || !import_state.RangeSet.eq(
+      update.startState.facet(gutterLineClass),
+      update.state.facet(gutterLineClass),
+      update.view.viewport.from,
+      update.view.viewport.to
+    );
+    if (prev == cur) {
+      for (const gutter2 of this.gutters) if (gutter2.update(update)) change = true;
+    } else {
+      change = true;
+      const gutters2 = [];
+      for (const conf of cur) {
+        const known = prev.indexOf(conf);
+        if (known < 0) {
+          gutters2.push(new SingleGutterView(this.view, conf));
+        } else {
+          this.gutters[known].update(update);
+          gutters2.push(this.gutters[known]);
+        }
+      }
+      for (const g of this.gutters) {
+        g.dom.remove();
+        if (gutters2.indexOf(g) < 0) g.destroy();
+      }
+      for (const g of gutters2) this.dom.appendChild(g.dom);
+      this.gutters = gutters2;
+    }
+    return change;
+  }
+  destroy() {
+    for (const view of this.gutters) view.destroy();
+    this.dom.remove();
+  }
+}, {
+  provide: (plugin) => import_view3.EditorView.scrollMargins.of((view) => {
+    const value = view.plugin(plugin);
+    if (!value || value.gutters.length == 0 || !value.fixed) return null;
+    return view.textDirection == import_view3.Direction.LTR ? { left: value.dom.offsetWidth * view.scaleX } : { right: value.dom.offsetWidth * view.scaleX };
+  })
+});
+function asArray(val) {
+  return Array.isArray(val) ? val : [val];
+}
+function advanceCursor(cursor, collect, pos) {
+  while (cursor.value && cursor.from <= pos) {
+    if (cursor.from == pos) collect.push(cursor.value);
+    cursor.next();
+  }
+}
+var UpdateContext = class {
+  constructor(gutter2, viewport, height) {
+    this.gutter = gutter2;
+    this.height = height;
+    this.cursor = import_state.RangeSet.iter(gutter2.markers, viewport.from);
+  }
+  cursor;
+  i = 0;
+  addElement(view, block, markers) {
+    const { gutter: gutter2 } = this, above = (block.top - this.height) / view.scaleY, height = block.height / view.scaleY;
+    if (this.i == gutter2.elements.length) {
+      const newElt = new GutterElement(view, height, above, markers);
+      gutter2.elements.push(newElt);
+      gutter2.dom.appendChild(newElt.dom);
+    } else {
+      gutter2.elements[this.i].update(view, height, above, markers);
+    }
+    this.height = block.bottom;
+    this.i++;
+  }
+  line(view, line, extraMarkers) {
+    let localMarkers = [];
+    advanceCursor(this.cursor, localMarkers, line.from);
+    if (extraMarkers.length) localMarkers = localMarkers.concat(extraMarkers);
+    const forLine = this.gutter.config.lineMarker(view, line, localMarkers);
+    if (forLine) localMarkers.unshift(forLine);
+    const gutter2 = this.gutter;
+    if (localMarkers.length == 0 && !gutter2.config.renderEmptyElements) return;
+    this.addElement(view, line, localMarkers);
+  }
+  widget(view, block) {
+    const marker = this.gutter.config.widgetMarker(view, block.widget, block);
+    let markers = marker ? [marker] : null;
+    for (const cls of view.state.facet(gutterWidgetClass)) {
+      const marker2 = cls(view, block.widget, block);
+      if (marker2) (markers || (markers = [])).push(marker2);
+    }
+    if (markers) this.addElement(view, block, markers);
+  }
+  finish() {
+    const gutter2 = this.gutter;
+    while (gutter2.elements.length > this.i) {
+      const last = gutter2.elements.pop();
+      gutter2.dom.removeChild(last.dom);
+      last.destroy();
+    }
+  }
+};
+var SingleGutterView = class {
+  constructor(view, config) {
+    this.view = view;
+    this.config = config;
+    this.dom = document.createElement("div");
+    this.dom.className = "cm-right-gutter" + (this.config.class ? " " + this.config.class : "");
+    for (const prop in config.domEventHandlers) {
+      this.dom.addEventListener(prop, (event) => {
+        let target = event.target, y;
+        if (target != this.dom && this.dom.contains(target)) {
+          while (target.parentNode != this.dom) target = target.parentNode;
+          const rect = target.getBoundingClientRect();
+          y = (rect.top + rect.bottom) / 2;
+        } else {
+          y = event.clientY;
+        }
+        const line = view.lineBlockAtHeight(y - view.documentTop);
+        if (config.domEventHandlers[prop](view, line, event)) event.preventDefault();
+      });
+    }
+    this.markers = asArray(config.markers(view));
+    if (config.initialSpacer) {
+      this.spacer = new GutterElement(view, 0, 0, [config.initialSpacer(view)]);
+      this.dom.appendChild(this.spacer.dom);
+      this.spacer.dom.style.cssText += "visibility: hidden; pointer-events: none";
+    }
+  }
+  dom;
+  elements = [];
+  markers;
+  spacer = null;
+  update(update) {
+    const prevMarkers = this.markers;
+    this.markers = asArray(this.config.markers(update.view));
+    if (this.spacer && this.config.updateSpacer) {
+      const updated = this.config.updateSpacer(this.spacer.markers[0], update);
+      if (updated != this.spacer.markers[0]) this.spacer.update(update.view, 0, 0, [updated]);
+    }
+    const vp = update.view.viewport;
+    return !import_state.RangeSet.eq(this.markers, prevMarkers, vp.from, vp.to) || (this.config.lineMarkerChange ? this.config.lineMarkerChange(update) : false);
+  }
+  destroy() {
+    for (const elt of this.elements) elt.destroy();
+  }
+};
+var GutterElement = class {
+  dom;
+  height = -1;
+  above = 0;
+  markers = [];
+  constructor(view, height, above, markers) {
+    this.dom = document.createElement("div");
+    this.dom.className = "cm-rightGutterElement";
+    this.update(view, height, above, markers);
+  }
+  update(view, height, above, markers) {
+    if (this.height != height) {
+      this.height = height;
+      this.dom.style.height = height + "px";
+    }
+    if (this.above != above)
+      this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
+    if (!sameMarkers(this.markers, markers)) this.setMarkers(view, markers);
+  }
+  setMarkers(view, markers) {
+    let cls = "cm-rightGutterElement", domPos = this.dom.firstChild;
+    for (let iNew = 0, iOld = 0; ; ) {
+      let skipTo = iOld, marker = iNew < markers.length ? markers[iNew++] : null, matched = false;
+      if (marker) {
+        const c = marker.elementClass;
+        if (c) cls += " " + c;
+        for (let i = iOld; i < this.markers.length; i++)
+          if (this.markers[i].compare(marker)) {
+            skipTo = i;
+            matched = true;
+            break;
+          }
+      } else {
+        skipTo = this.markers.length;
+      }
+      while (iOld < skipTo) {
+        const next = this.markers[iOld++];
+        if (next.toDOM) {
+          next.destroy(domPos);
+          const after = domPos.nextSibling;
+          domPos.remove();
+          domPos = after;
+        }
+      }
+      if (!marker) break;
+      if (marker.toDOM) {
+        if (matched) domPos = domPos.nextSibling;
+        else this.dom.insertBefore(marker.toDOM(view), domPos);
+      }
+      if (matched) iOld++;
+    }
+    this.dom.className = cls;
+    this.markers = markers;
+  }
+  destroy() {
+    this.setMarkers(null, []);
+  }
+};
+function sameMarkers(a, b) {
+  if (a.length != b.length) return false;
+  for (let i = 0; i < a.length; i++) if (!a[i].compare(b[i])) return false;
+  return true;
+}
+var activeLineGutterMarker = new class extends GutterMarker {
+  elementClass = "cm-activeLineRightGutter";
+}();
+var activeLineGutterHighlighter = gutterLineClass.compute(["selection"], (state) => {
+  const marks = [];
+  let last = -1;
+  for (const range of state.selection.ranges) {
+    const linePos = state.doc.lineAt(range.head).from;
+    if (linePos > last) {
+      last = linePos;
+      marks.push(activeLineGutterMarker.range(linePos));
+    }
+  }
+  return import_state.RangeSet.of(marks);
+});
+
+// src/gutter/atoms.ts
+var import_jotai = require("jotai");
+var import_state2 = require("@codemirror/state");
+var facetAtom = (0, import_jotai.atom)(import_state2.Facet.define());
+
+// src/gutter/gutter.tsx
+var DOMGutterLineMarker = class extends GutterMarker {
+  constructor(dom) {
+    super();
+    this.dom = dom;
+  }
+  eq(other) {
+    return this.dom === other.dom;
+  }
+  toDOM() {
+    return this.dom;
+  }
+};
+function HydrateAtoms({ markers, children }) {
+  (0, import_utils.useHydrateAtoms)([[facetAtom, markers]]);
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, children);
+}
+var GutterPlacement = /* @__PURE__ */ ((GutterPlacement2) => {
+  GutterPlacement2["Left"] = "left";
+  GutterPlacement2["Right"] = "right";
+  return GutterPlacement2;
+})(GutterPlacement || {});
+function Gutter({
+  defaultClassName,
+  placement = "left" /* Left */,
+  children
+}) {
+  const [markersFacet] = (0, import_react11.useState)(
+    () => import_state3.Facet.define()
+  );
+  (0, import_react_hooks3.useInjectorEffect)(
+    (injector) => {
+      const gutter2 = placement === "right" /* Right */ ? gutter : import_view4.gutter;
+      return injector.inject([
+        gutter2({
+          class: defaultClassName ?? "",
+          markers(view) {
+            const specs = view.state.facet(markersFacet);
+            const { lines } = view.state.doc;
+            let markers = import_state3.RangeSet.empty;
+            for (const spec of specs) {
+              const { lineNumber } = spec;
+              if (lineNumber < 1 || lineNumber > lines) {
+                continue;
+              }
+              const line = view.state.doc.line(spec.lineNumber);
+              markers = markers.update({
+                add: [new DOMGutterLineMarker(spec.dom).range(line.from)],
+                sort: true
+              });
+            }
+            return markers;
+          }
+        })
+      ]);
+    },
+    [placement]
+  );
+  return /* @__PURE__ */ import_react11.default.createElement(import_jotai2.Provider, null, /* @__PURE__ */ import_react11.default.createElement(HydrateAtoms, { markers: markersFacet }, children));
+}
+function GutterLineMarker({
+  lineNumber,
+  children
+}) {
+  const facet = (0, import_jotai2.useAtomValue)(facetAtom);
+  const editor = (0, import_react12.useEditor)();
+  const compartment = (0, import_react_hooks3.useCompartment)();
+  const elementRef = (0, import_react_hooks3.useLatest)((0, import_react_hooks3.useHTMLElement)());
+  (0, import_react_hooks3.useInjectorEffect)((injector) => injector.inject([compartment.of([])]), []);
+  (0, import_react11.useEffect)(() => {
+    if (!editor) {
+      return;
+    }
+    editor.$view.dispatch({
+      effects: compartment.reconfigure(
+        facet.of({
+          lineNumber,
+          dom: elementRef.current
+        })
+      )
+    });
+  }, [editor, compartment, lineNumber]);
+  return (0, import_react_dom2.createPortal)(children, elementRef.current);
+}
+
+// src/fold-gutter/index.tsx
+var import_react_dom3 = require("react-dom");
+var import_react13 = __toESM(require("react"));
+var import_uuid = require("@lukeed/uuid");
+var import_utils2 = require("@coze-editor/utils");
+var import_react_hooks4 = require("@coze-editor/react-hooks");
+var import_react14 = require("@coze-editor/react");
+var import_view5 = require("@codemirror/view");
+var import_state4 = require("@codemirror/state");
+var import_language = require("@codemirror/language");
+function FluentTriangleDown12Filled(props) {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8px",
+      height: "8px",
+      viewBox: "0 0 12 12",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M5.214 10.541a.903.903 0 0 0 1.572 0l4.092-7.169C11.226 2.762 10.789 2 10.09 2H1.91c-.698 0-1.135.762-.787 1.372z"
+      }
+    )
+  );
+}
+function FluentTriangleRight12Filled(props) {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8px",
+      height: "8px",
+      viewBox: "0 0 12 12",
+      ...props
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M10.541 6.786a.903.903 0 0 0 0-1.572L3.372 1.122C2.762.774 2 1.211 2 1.91v8.182c0 .698.762 1.135 1.372.787z"
+      }
+    )
+  );
+}
+function defaultRenderMarker(open) {
+  return open ? /* @__PURE__ */ import_react13.default.createElement(FluentTriangleDown12Filled, null) : /* @__PURE__ */ import_react13.default.createElement(FluentTriangleRight12Filled, null);
+}
+function defaultRenderPlaceholder() {
+  return null;
+}
+function FoldGutter({
+  renderMarker = defaultRenderMarker,
+  renderPlaceholder = defaultRenderPlaceholder,
+  opacityTransition = false,
+  opacityTransitionDuration = 300
+}) {
+  const connector = (0, import_react_hooks4.usePortalConnector)({ sync: true });
+  const connectorRef = (0, import_react_hooks4.useLatest)(connector);
+  const renderMarkerRef = (0, import_react_hooks4.useLatest)(renderMarker);
+  const renderPlaceholderRef = (0, import_react_hooks4.useLatest)(renderPlaceholder);
+  const [opacity, setOpacity] = (0, import_react13.useState)(0);
+  const setOpacityRef = (0, import_react_hooks4.useLatest)(setOpacity);
+  const injector = (0, import_react14.useInjector)();
+  const { Portal } = connector;
+  (0, import_react13.useEffect)(() => {
+    if (!opacityTransition || !opacityTransitionDuration) {
+      return;
+    }
+    return injector.inject([
+      import_view5.EditorView.theme({
+        ".cm-foldGutter": {
+          transition: `opacity ${opacityTransitionDuration / 1e3}s ease`
+        }
+      })
+    ]);
+  }, [injector, opacityTransition, opacityTransitionDuration]);
+  (0, import_react_hooks4.useInjectorEffect)(
+    (injector2) => {
+      if (!opacityTransition) {
+        return;
+      }
+      return injector2.inject([
+        import_state4.Prec.lowest(
+          import_view5.EditorView.theme({
+            ".cm-foldGutter": {
+              opacity
+            }
+          })
+        )
+      ]);
+    },
+    [opacityTransition, opacity]
+  );
+  (0, import_react_hooks4.useInjectorEffect)((injector2) => {
+    const disposes = [];
+    return (0, import_utils2.disposeAll)([
+      injector2.inject([
+        import_state4.Prec.low(
+          import_view5.EditorView.theme({
+            ".cm-foldGutter .cm-gutterElement": {
+              display: "flex",
+              alignItems: "center",
+              cursor: "pointer"
+            }
+          })
+        ),
+        (0, import_language.foldGutter)({
+          markerDOM(open) {
+            const dom = document.createElement("span");
+            dom.setAttribute("aria-expanded", open ? "true" : "false");
+            const id = (0, import_uuid.v4)();
+            connectorRef.current.connect(
+              id,
+              (0, import_react_dom3.createPortal)(renderMarkerRef.current(open), dom)
+            );
+            disposes.push(() => {
+              connectorRef.current.disconnect(id);
+            });
+            return dom;
+          },
+          domEventHandlers: {
+            mouseenter() {
+              setOpacityRef.current(1);
+              return true;
+            },
+            mouseleave() {
+              setOpacityRef.current(0);
+              return true;
+            }
+          }
+        }),
+        (0, import_language.codeFolding)({
+          placeholderDOM(view, onclick) {
+            const dom = document.createElement("span");
+            const id = (0, import_uuid.v4)();
+            connectorRef.current.connect(
+              id,
+              (0, import_react_dom3.createPortal)(renderPlaceholderRef.current(), dom)
+            );
+            disposes.push(() => {
+              connectorRef.current.disconnect(id);
+            });
+            dom.addEventListener("click", onclick, false);
+            disposes.push(() => {
+              dom.removeEventListener("click", onclick, false);
+            });
+            return dom;
+          }
+        })
+      ]),
+      ...disposes
+    ]);
+  }, []);
+  return /* @__PURE__ */ import_react13.default.createElement(Portal, null);
+}
+
+// src/placeholder/index.tsx
+var import_react_dom4 = require("react-dom");
+var import_react_hooks5 = require("@coze-editor/react-hooks");
+var import_extension_placeholder = require("@coze-editor/extension-placeholder");
+function Placeholder({ children }) {
+  const element = (0, import_react_hooks5.useHTMLElement)("span");
+  (0, import_react_hooks5.useInjectorEffect)(
+    (injector) => injector.inject([(0, import_extension_placeholder.placeholder)(() => element)]),
+    []
+  );
+  return (0, import_react_dom4.createPortal)(children, element);
+}
+function ActiveLinePlaceholder({
+  children
+}) {
+  const element = (0, import_react_hooks5.useHTMLElement)("span");
+  (0, import_react_hooks5.useInjectorEffect)(
+    (injector) => injector.inject([(0, import_extension_placeholder.activeLinePlaceholder)(() => element)]),
+    []
+  );
+  return (0, import_react_dom4.createPortal)(children, element);
+}
+
+// src/ref-element/index.tsx
+var import_react15 = require("react");
+var import_react_hooks6 = require("@coze-editor/react-hooks");
+var RefElement = (0, import_react15.forwardRef)(({ element }, ref) => {
+  const domRef = (0, import_react_hooks6.useLatest)(element);
+  (0, import_react15.useImperativeHandle)(ref, () => domRef.current);
+  return null;
+});
+RefElement.displayName = "RefElement";
+
+// src/line-widget/index.tsx
+var import_react_dom5 = require("react-dom");
+var import_react16 = require("react");
+var import_react_hooks7 = require("@coze-editor/react-hooks");
+var import_react17 = require("@coze-editor/react");
+
+// src/line-widget/cursor-widget/state.ts
+var import_view7 = require("@codemirror/view");
+var import_state5 = require("@codemirror/state");
+
+// src/line-widget/cursor-widget/widget-decoration.ts
+var import_view6 = require("@codemirror/view");
+var CustomDivWidget = class extends import_view6.WidgetType {
+  customDOM;
+  constructor(customDOM) {
+    super();
+    this.customDOM = customDOM;
+  }
+  toDOM() {
+    const div = document.createElement("div");
+    div.className = "cursor-widget-wrapper";
+    div.setAttribute("style", "caret-color: initial;");
+    if (this.customDOM) {
+      div.appendChild(this.customDOM);
+    }
+    return div;
+  }
+  eq(widget) {
+    return widget.customDOM === this.customDOM;
+  }
+};
+var createBlockWidget = (config, pos) => {
+  if (typeof pos !== "number") {
+    return import_view6.Decoration.none;
+  }
+  return import_view6.Decoration.set(
+    import_view6.Decoration.widget({
+      widget: new CustomDivWidget(config.createDOM()),
+      side: config.side,
+      block: true,
+      config
+    }).range(pos)
+  );
+};
+
+// src/line-widget/cursor-widget/state.ts
+var setWidgetEffect = import_state5.StateEffect.define();
+var getPos = (state, num) => state.doc.line(num).from;
+var cursorWidgetState = (facet) => import_state5.StateField.define({
+  create(state) {
+    return createBlockWidget(
+      facet.config,
+      typeof facet.config.lineNumber === "number" ? getPos(state, facet.config.lineNumber) : void 0
+    );
+  },
+  update(widget, tr) {
+    tr.effects.forEach((effect) => {
+      if (effect.is(setWidgetEffect) && effect.value.id === facet.id) {
+        widget = createBlockWidget(
+          {
+            ...facet.config,
+            side: effect.value.side,
+            lineNumber: effect.value.lineNumber
+          },
+          typeof effect.value.lineNumber === "number" ? getPos(tr.state, effect.value.lineNumber) : void 0
+        );
+      }
+    });
+    return widget.update({
+      filter: (from, to) => 0 <= from && to <= tr.state.doc.length
+    });
+  },
+  provide: (f) => import_view7.EditorView.decorations.from(f)
+});
+var setWidgetLineNumber = (id, lineNumber, side) => ({
+  effects: [setWidgetEffect.of({ lineNumber, id, side })]
+});
+
+// src/line-widget/cursor-widget/common.ts
+var nextID = 1;
+var ConfigFacet = class {
+  constructor(config) {
+    this.config = config;
+  }
+  id = nextID++;
+};
+
+// src/line-widget/cursor-widget/index.ts
+var cursorBlockWidget = (config) => {
+  const facet = new ConfigFacet(config);
+  return {
+    setWidgetLineNumber: (lineNumber, side) => setWidgetLineNumber(facet.id, lineNumber, side),
+    extension: [cursorWidgetState(facet)]
+  };
+};
+
+// src/line-widget/index.tsx
+function LineWidget({ children, lineNumber, side }) {
+  const setWidgetLineNumberRef = (0, import_react16.useRef)(null);
+  const injector = (0, import_react17.useInjector)();
+  const editor = (0, import_react17.useEditor)();
+  (0, import_react16.useEffect)(() => {
+    var _a;
+    if (setWidgetLineNumberRef.current && (editor == null ? void 0 : editor.$view)) {
+      (_a = editor.$view) == null ? void 0 : _a.dispatch(setWidgetLineNumberRef.current(lineNumber, side));
+    }
+  }, [lineNumber, side]);
+  const element = (0, import_react_hooks7.useHTMLElement)("span");
+  (0, import_react16.useLayoutEffect)(() => {
+    const { extension, setWidgetLineNumber: setWidgetLineNumber2 } = cursorBlockWidget({
+      side,
+      lineNumber,
+      createDOM: () => element
+    });
+    setWidgetLineNumberRef.current = setWidgetLineNumber2;
+    return injector.inject(extension);
+  }, [injector]);
+  return (0, import_react_dom5.createPortal)(children, element);
+}
+
+// src/diff-view/index.tsx
+var import_react18 = require("react");
+var import_react19 = require("@coze-editor/react");
+
+// src/diff-view/extension.ts
+var import_view8 = require("@codemirror/view");
+var import_state7 = require("@codemirror/state");
+var import_merge = require("@codemirror/merge");
+var diffView = (props) => {
+  const { original = "" } = props;
+  return [
+    (0, import_merge.unifiedMergeView)({
+      original,
+      gutter: false
+    }),
+    import_state7.EditorState.phrases.of({
+      Accept: "^Y",
+      Reject: "^N"
+    }),
+    import_view8.EditorView.theme({
+      ".cm-deletedChunk": {
+        paddingLeft: "2px",
+        backgroundColor: "rgba(220, 68, 50, 0.2)"
+      },
+      ".cm-deletedChunk .cm-chunkButtons": {
+        position: "static",
+        display: "flex"
+      },
+      ".cm-deletedChunk .cm-chunkButtons button": {
+        flex: "1",
+        margin: "0px"
+      },
+      ".cm-deletedChunk .cm-chunkButtons button:first-child": {
+        marginRight: "2px"
+      },
+      ".cm-deletedChunk del": {
+        textDecoration: "none",
+        backgroundColor: "rgba(220, 68, 50, 0.4)"
+      },
+      "&.cm-merge-b .cm-changedLine": {
+        backgroundColor: "rgba(33, 170, 33, 0.2)"
+      },
+      ".cm-insertedLine .cm-changedText": {
+        background: "none",
+        backgroundColor: "rgba(33, 170, 33, 0.4)"
+      }
+    })
+  ];
+};
+
+// src/diff-view/index.tsx
+function DiffView({ original }) {
+  const injector = (0, import_react19.useInjector)();
+  (0, import_react18.useLayoutEffect)(() => injector.inject(diffView({ original })), []);
+  return null;
+}
+
+// src/mention/extension.ts
+var import_utils3 = require("@coze-editor/utils");
+var import_state8 = require("@codemirror/state");
+
+// src/mention/is.ts
+function hasTriggerCharacters(options) {
+  return Array.isArray(options.triggerCharacters);
+}
+function hasTrigger(options) {
+  return typeof options.trigger === "function";
+}
+
+// src/mention/extension.ts
+var validForReg = /^[\u4e00-\u9fa5a-zA-Z0-9_']*$/;
+function defaultValidFor(text) {
+  return validForReg.test(text);
+}
+var fields = import_state8.Facet.define();
+function mention(options) {
+  const mentionConfig = import_state8.Facet.define({
+    combine: import_utils3.FacetCombineStrategy.Last
+  });
+  const field = import_state8.StateField.define({
+    create() {
+      return {
+        show: false,
+        triggerContext: void 0
+      };
+    },
+    update(value, tr) {
+      const options2 = tr.startState.facet(mentionConfig);
+      if (!options2) {
+        return value;
+      }
+      const { search = true, onOpenChange, onSearch, onTrigger } = options2;
+      let { show } = value;
+      let triggerContext = void 0;
+      if (tr.docChanged) {
+        if (hasTriggerCharacters(options2)) {
+          tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+            const insertString = inserted.toString();
+            if (fromA === toA && options2.triggerCharacters.includes(insertString)) {
+              triggerContext = {
+                from: fromB,
+                to: toB,
+                triggerCharacter: insertString,
+                cursorPosition: tr.state.selection.main.head
+              };
+            }
+          });
+        } 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 = {
+        show: value.show,
+        triggerContext: value.triggerContext ? { ...value.triggerContext } : void 0
+      };
+      if (triggerContext) {
+        newValue.triggerContext = triggerContext;
+        show = true;
+        if (typeof onSearch === "function") {
+          onSearch({
+            value: ""
+          });
+        }
+      } else if (tr.docChanged && value.triggerContext && search) {
+        if (newValue.triggerContext) {
+          const newFrom = tr.changes.mapPos(
+            value.triggerContext.from,
+            1,
+            import_state8.MapMode.TrackAfter
+          );
+          const newTo = tr.changes.mapPos(
+            value.triggerContext.to,
+            1,
+            import_state8.MapMode.Simple
+          );
+          if (typeof newFrom === "number" && typeof newTo === "number") {
+            newValue.triggerContext.from = newFrom;
+            newValue.triggerContext.to = newTo;
+          } else {
+            show = false;
+          }
+        }
+        if (show === true) {
+          const validFor = typeof search === "object" ? search.validFor : defaultValidFor;
+          const from = value.triggerContext.cursorPosition;
+          const to = tr.state.selection.main.head;
+          if (to >= from) {
+            const text = tr.state.sliceDoc(from, to);
+            if (validFor(text, from, to, tr.state)) {
+              show = true;
+              if (typeof onSearch === "function") {
+                onSearch({
+                  value: text
+                });
+              }
+            } else {
+              show = false;
+            }
+          } else {
+            show = false;
+          }
+        }
+      } else if (isSelectUserEvent) {
+        show = false;
+      }
+      if (show === false) {
+        newValue.triggerContext = void 0;
+      }
+      if (show !== value.show) {
+        newValue.show = show;
+        if (typeof onOpenChange === "function") {
+          onOpenChange({
+            value: show,
+            state: tr.state,
+            triggerContext: newValue.triggerContext ? {
+              from: newValue.triggerContext.from,
+              to: newValue.triggerContext.to,
+              triggerCharacter: newValue.triggerContext.triggerCharacter
+            } : void 0
+          });
+        }
+      }
+      return newValue;
+    }
+  });
+  return [mentionConfig.of(options), field, fields.of(field)];
+}
+function getCurrentMentionReplaceRange(state) {
+  const allFields = state.facet(fields);
+  for (const field of allFields) {
+    const fieldState = state.field(field, false);
+    if (fieldState && fieldState.triggerContext && typeof fieldState.triggerContext.from === "number" && typeof fieldState.triggerContext.to === "number") {
+      return {
+        from: fieldState.triggerContext.from,
+        to: fieldState.triggerContext.to
+      };
+    }
+  }
+}
+
+// src/mention/react.tsx
+var import_react_hooks8 = require("@coze-editor/react-hooks");
+function Mention(props) {
+  const propsRef = (0, import_react_hooks8.useLatest)(props);
+  (0, import_react_hooks8.useInjectorEffect)((injector) => {
+    const sharedOptions = {
+      search: props.search,
+      onOpenChange(...args) {
+        if (typeof propsRef.current.onOpenChange === "function") {
+          return propsRef.current.onOpenChange(...args);
+        }
+      },
+      onSearch(...args) {
+        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([
+      mention(
+        hasTrigger(props) ? {
+          ...sharedOptions,
+          trigger(tr) {
+            if (hasTrigger(propsRef.current)) {
+              return propsRef.current.trigger(tr);
+            }
+          }
+        } : {
+          ...sharedOptions,
+          triggerCharacters: props.triggerCharacters ?? []
+        }
+      )
+    ]);
+  });
+  return null;
+}
+
+// src/embeded-line-view/react.tsx
+var import_react_dom6 = require("react-dom");
+var import_react21 = require("react");
+var import_react_hooks9 = require("@coze-editor/react-hooks");
+var import_react22 = require("@coze-editor/react");
+var import_view9 = require("@codemirror/view");
+var import_state9 = require("@codemirror/state");
+var DOMWidget = class extends import_view9.WidgetType {
+  constructor(options) {
+    super();
+    this.options = options;
+  }
+  toDOM() {
+    return this.options.dom;
+  }
+  eq(other) {
+    return this.options.dom === other.options.dom;
+  }
+};
+var EmbededLineViewSide = /* @__PURE__ */ ((EmbededLineViewSide2) => {
+  EmbededLineViewSide2["Before"] = "before";
+  EmbededLineViewSide2["After"] = "after";
+  return EmbededLineViewSide2;
+})(EmbededLineViewSide || {});
+var updateEffect = import_state9.StateEffect.define();
+var EmbededLineView = (0, import_react21.forwardRef)(function EmbededLineView2({ children }, ref) {
+  const dom = (0, import_react_hooks9.useHTMLElement)("div");
+  const domRef = (0, import_react_hooks9.useLatest)(dom);
+  const editor = (0, import_react22.useEditor)();
+  const editorRef = (0, import_react_hooks9.useLatest)(editor);
+  (0, import_react21.useImperativeHandle)(ref, () => ({
+    update({ visible, line, side }) {
+      var _a;
+      (_a = editorRef.current) == null ? void 0 : _a.$view.dispatch({
+        effects: updateEffect.of({
+          visible,
+          line: line ?? 1,
+          side: side ?? "before" /* Before */
+        })
+      });
+    }
+  }));
+  (0, import_react_hooks9.useInjectorEffect)((injector) => {
+    const field = import_state9.StateField.define({
+      create() {
+        return {
+          position: 0,
+          side: "before" /* Before */,
+          decorations: import_view9.Decoration.none
+        };
+      },
+      update(value, tr) {
+        const newPosition = tr.changes.mapPos(
+          value.position,
+          -1,
+          import_state9.MapMode.Simple
+        );
+        let newValue = value;
+        if (typeof newPosition === "number" && newPosition !== value.position) {
+          const docLine = tr.state.doc.lineAt(newPosition);
+          let decoPos = 0;
+          if (value.side === "after" /* After */) {
+            decoPos = docLine.to;
+          } else {
+            decoPos = docLine.from;
+          }
+          newValue = {
+            ...value,
+            position: newPosition,
+            decorations: import_view9.Decoration.set([
+              import_view9.Decoration.widget({
+                widget: new DOMWidget({
+                  dom: domRef.current
+                }),
+                block: true,
+                side: value.side === "after" /* After */ ? 1 : -1
+              }).range(decoPos)
+            ])
+          };
+        }
+        for (const effect of tr.effects) {
+          if (effect.is(updateEffect)) {
+            const { visible, line, side } = effect.value;
+            if (!visible) {
+              return {
+                position: newValue.position,
+                side,
+                decorations: import_view9.Decoration.none
+              };
+            }
+            if (line < 1 || line > tr.startState.doc.lines) {
+              continue;
+            }
+            const docLine = tr.startState.doc.line(line);
+            let decoPos = 0;
+            if (side === "after" /* After */) {
+              decoPos = docLine.to;
+            } else {
+              decoPos = docLine.from;
+            }
+            return {
+              position: decoPos,
+              side,
+              decorations: import_view9.Decoration.set([
+                import_view9.Decoration.widget({
+                  widget: new DOMWidget({
+                    dom: domRef.current
+                  }),
+                  block: true,
+                  side: newValue.side === "after" /* After */ ? 1 : -1
+                }).range(decoPos)
+              ])
+            };
+          }
+        }
+        return newValue;
+      },
+      provide(f) {
+        return import_view9.EditorView.decorations.compute(
+          [f],
+          (state) => state.field(f).decorations
+        );
+      }
+    });
+    return injector.inject([field]);
+  }, []);
+  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);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActiveLinePlaceholder,
+  CursorInlayHint,
+  CursorMirror,
+  DiagnosticMarkers,
+  DiffView,
+  EmbededLineView,
+  EmbededLineViewSide,
+  FoldGutter,
+  Gutter,
+  GutterLineMarker,
+  GutterPlacement,
+  LineWidget,
+  Markers,
+  Mention,
+  Placeholder,
+  PositionMirror,
+  PrefixElement,
+  RefElement,
+  SelectionSide,
+  getCurrentMentionReplaceRange
+});
+//# sourceMappingURL=index.js.map