@coze-editor/react-components 0.1.0-alpha.0fd19e

package/dist/esm/index.js

@@ -0,0 +1,1475 @@
+// src/cursor-mirror/index.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { autoUpdate } from "@floating-ui/dom";
+import { useEditor, useInjector } from "@coze-editor/react";
+import {
+  elementAtPosition,
+  positionElementLayer,
+  SelectionSide
+} from "@coze-editor/extensions";
+var CursorMirror = forwardRef(function CursorMirror2({ side, onChange, onVisibleChange }, ref) {
+  const injector = useInjector();
+  const editor = useEditor();
+  const [dom] = useState(() => document.createElement("div"));
+  const domRef = useRef(dom);
+  domRef.current = dom;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onVisibleChangeRef = useRef(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+  useImperativeHandle(ref, () => domRef.current);
+  useLayoutEffect(
+    () => injector.inject([
+      elementAtPosition.of({
+        dom: domRef.current,
+        pos: side
+      }),
+      positionElementLayer
+    ]),
+    [injector, side]
+  );
+  useEffect(() => {
+    const floating = document.createElement("div");
+    document.body.appendChild(floating);
+    const dispose = autoUpdate(
+      domRef.current,
+      floating,
+      () => {
+        if (typeof onChangeRef.current === "function") {
+          onChangeRef.current();
+        }
+      },
+      { animationFrame: true }
+    );
+    return () => {
+      document.body.removeChild(floating);
+      dispose();
+    };
+  }, []);
+  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
+import {
+  forwardRef as forwardRef2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { autoUpdate as autoUpdate2 } from "@floating-ui/dom";
+import { useEditor as useEditor2, useInjector as useInjector2 } from "@coze-editor/react";
+import {
+  elementAtPosition as elementAtPosition2,
+  positionElementLayer as positionElementLayer2
+} from "@coze-editor/extensions";
+var PositionMirror = forwardRef2(function CursorMirror3({ position, onChange, onVisibleChange }, ref) {
+  const injector = useInjector2();
+  const editor = useEditor2();
+  const [dom] = useState2(() => {
+    const el = document.createElement("div");
+    el.classList.add("cm-position-mirror");
+    return el;
+  });
+  const domRef = useRef2(dom);
+  domRef.current = dom;
+  const onChangeRef = useRef2(onChange);
+  onChangeRef.current = onChange;
+  const onVisibleChangeRef = useRef2(onVisibleChange);
+  onVisibleChangeRef.current = onVisibleChange;
+  useImperativeHandle2(ref, () => domRef.current);
+  useLayoutEffect2(
+    () => injector.inject([
+      elementAtPosition2.of({
+        dom: domRef.current,
+        pos: position
+      }),
+      positionElementLayer2
+    ]),
+    [injector, position]
+  );
+  useEffect2(() => {
+    const floating = document.createElement("div");
+    document.body.appendChild(floating);
+    const dispose = autoUpdate2(
+      domRef.current,
+      floating,
+      () => {
+        if (typeof onChangeRef.current === "function") {
+          onChangeRef.current();
+        }
+      },
+      { animationFrame: true }
+    );
+    return () => {
+      document.body.removeChild(floating);
+      dispose();
+    };
+  }, []);
+  useEffect2(() => {
+    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
+import { createPortal } from "react-dom";
+import { useLayoutEffect as useLayoutEffect3 } from "react";
+import { useHTMLElement } from "@coze-editor/react-hooks";
+import { useInjector as useInjector3 } from "@coze-editor/react";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+var InlayHintWidget = class extends WidgetType {
+  constructor(element) {
+    super();
+    this.element = element;
+  }
+  eq(other) {
+    return this.element === other.element;
+  }
+  toDOM() {
+    return this.element;
+  }
+};
+function CursorInlayHint({ children }) {
+  const injector = useInjector3();
+  const element = useHTMLElement("span");
+  useLayoutEffect3(
+    () => injector.inject([
+      EditorView.decorations.compute(
+        ["selection"],
+        (state) => Decoration.set([
+          Decoration.widget({
+            widget: new InlayHintWidget(element),
+            side: 1
+          }).range(state.selection.main.head)
+        ])
+      )
+    ]),
+    [injector]
+  );
+  return createPortal(children, element);
+}
+
+// src/markers/markers.tsx
+import { useCallback, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useStateField } from "@coze-editor/react-hooks";
+import { useInjector as useInjector4 } from "@coze-editor/react";
+import { mergeableMarkers } from "@coze-editor/extensions";
+function Markers({ markers }) {
+  const injector = useInjector4();
+  const field = useStateField(useCallback(() => markers, [markers]));
+  useLayoutEffect4(
+    () => injector.inject([field, mergeableMarkers.from(field)]),
+    [injector, field]
+  );
+  return null;
+}
+
+// src/markers/diagnostic-markers.tsx
+import React, { useLayoutEffect as useLayoutEffect5, useMemo } from "react";
+import hash from "hash-sum";
+import { useInjector as useInjector5 } from "@coze-editor/react";
+import { EditorView as EditorView2 } from "@codemirror/view";
+function DiagnosticMarkers({ markers }) {
+  const theme = 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 = useInjector5();
+  useLayoutEffect5(
+    () => injector.inject([EditorView2.theme(theme)]),
+    [injector, theme]
+  );
+  const finalMarkers = useMemo(
+    () => markers.map((marker) => {
+      const className = getClassNameFromColor(marker.color ?? "red");
+      return {
+        from: marker.from,
+        to: marker.to,
+        className
+      };
+    }),
+    [markers]
+  );
+  return /* @__PURE__ */ React.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-${hash(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
+import { createPortal as createPortal2 } from "react-dom";
+import React2, { useEffect as useEffect3, useState as useState3 } from "react";
+import { useHydrateAtoms } from "jotai/utils";
+import { Provider, useAtomValue } from "jotai";
+import {
+  useCompartment,
+  useHTMLElement as useHTMLElement2,
+  useInjectorEffect,
+  useLatest
+} from "@coze-editor/react-hooks";
+import { useEditor as useEditor3 } from "@coze-editor/react";
+import { gutter as leftGutter } from "@codemirror/view";
+import { Facet as Facet3, RangeSet as RangeSet2 } from "@codemirror/state";
+
+// src/gutter/right-gutter.ts
+import {
+  MapMode,
+  Facet,
+  RangeValue,
+  RangeSet
+} from "@codemirror/state";
+import { EditorView as EditorView3, ViewPlugin, BlockType, Direction } from "@codemirror/view";
+var GutterMarker = class extends 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 = MapMode.TrackBefore;
+GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
+GutterMarker.prototype.point = true;
+var gutterLineClass = Facet.define();
+var gutterWidgetClass = Facet.define();
+var defaults = {
+  class: "",
+  renderEmptyElements: false,
+  elementStyle: "",
+  markers: () => RangeSet.empty,
+  lineMarker: () => null,
+  widgetMarker: () => null,
+  lineMarkerChange: null,
+  initialSpacer: null,
+  updateSpacer: null,
+  domEventHandlers: {}
+};
+var activeGutters = Facet.define();
+function gutter(config) {
+  return [gutters(), activeGutters.of({ ...defaults, ...config })];
+}
+var unfixGutters = Facet.define({
+  combine: (values) => values.some((x) => x)
+});
+function gutters(config) {
+  const result = [
+    gutterView,
+    // right gutter theme
+    EditorView3.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 = 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 = 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 == 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 == 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 || !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) => EditorView3.scrollMargins.of((view) => {
+    const value = view.plugin(plugin);
+    if (!value || value.gutters.length == 0 || !value.fixed) return null;
+    return view.textDirection == 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 = 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 !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 RangeSet.of(marks);
+});
+
+// src/gutter/atoms.ts
+import { atom } from "jotai";
+import { Facet as Facet2 } from "@codemirror/state";
+var facetAtom = atom(Facet2.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 }) {
+  useHydrateAtoms([[facetAtom, markers]]);
+  return /* @__PURE__ */ React2.createElement(React2.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] = useState3(
+    () => Facet3.define()
+  );
+  useInjectorEffect(
+    (injector) => {
+      const gutter2 = placement === "right" /* Right */ ? gutter : leftGutter;
+      return injector.inject([
+        gutter2({
+          class: defaultClassName ?? "",
+          markers(view) {
+            const specs = view.state.facet(markersFacet);
+            const { lines } = view.state.doc;
+            let markers = RangeSet2.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__ */ React2.createElement(Provider, null, /* @__PURE__ */ React2.createElement(HydrateAtoms, { markers: markersFacet }, children));
+}
+function GutterLineMarker({
+  lineNumber,
+  children
+}) {
+  const facet = useAtomValue(facetAtom);
+  const editor = useEditor3();
+  const compartment = useCompartment();
+  const elementRef = useLatest(useHTMLElement2());
+  useInjectorEffect((injector) => injector.inject([compartment.of([])]), []);
+  useEffect3(() => {
+    if (!editor) {
+      return;
+    }
+    editor.$view.dispatch({
+      effects: compartment.reconfigure(
+        facet.of({
+          lineNumber,
+          dom: elementRef.current
+        })
+      )
+    });
+  }, [editor, compartment, lineNumber]);
+  return createPortal2(children, elementRef.current);
+}
+
+// src/fold-gutter/index.tsx
+import { createPortal as createPortal3 } from "react-dom";
+import React3, {
+  useEffect as useEffect4,
+  useState as useState4
+} from "react";
+import { v4 } from "@lukeed/uuid";
+import { disposeAll } from "@coze-editor/utils";
+import {
+  useInjectorEffect as useInjectorEffect2,
+  useLatest as useLatest2,
+  usePortalConnector
+} from "@coze-editor/react-hooks";
+import { useInjector as useInjector6 } from "@coze-editor/react";
+import { EditorView as EditorView4 } from "@codemirror/view";
+import { Prec } from "@codemirror/state";
+import { codeFolding, foldGutter } from "@codemirror/language";
+function FluentTriangleDown12Filled(props) {
+  return /* @__PURE__ */ React3.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8px",
+      height: "8px",
+      viewBox: "0 0 12 12",
+      ...props
+    },
+    /* @__PURE__ */ React3.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__ */ React3.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "8px",
+      height: "8px",
+      viewBox: "0 0 12 12",
+      ...props
+    },
+    /* @__PURE__ */ React3.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__ */ React3.createElement(FluentTriangleDown12Filled, null) : /* @__PURE__ */ React3.createElement(FluentTriangleRight12Filled, null);
+}
+function defaultRenderPlaceholder() {
+  return null;
+}
+function FoldGutter({
+  renderMarker = defaultRenderMarker,
+  renderPlaceholder = defaultRenderPlaceholder,
+  opacityTransition = false,
+  opacityTransitionDuration = 300
+}) {
+  const connector = usePortalConnector({ sync: true });
+  const connectorRef = useLatest2(connector);
+  const renderMarkerRef = useLatest2(renderMarker);
+  const renderPlaceholderRef = useLatest2(renderPlaceholder);
+  const [opacity, setOpacity] = useState4(0);
+  const setOpacityRef = useLatest2(setOpacity);
+  const injector = useInjector6();
+  const { Portal } = connector;
+  useEffect4(() => {
+    if (!opacityTransition || !opacityTransitionDuration) {
+      return;
+    }
+    return injector.inject([
+      EditorView4.theme({
+        ".cm-foldGutter": {
+          transition: `opacity ${opacityTransitionDuration / 1e3}s ease`
+        }
+      })
+    ]);
+  }, [injector, opacityTransition, opacityTransitionDuration]);
+  useInjectorEffect2(
+    (injector2) => {
+      if (!opacityTransition) {
+        return;
+      }
+      return injector2.inject([
+        Prec.lowest(
+          EditorView4.theme({
+            ".cm-foldGutter": {
+              opacity
+            }
+          })
+        )
+      ]);
+    },
+    [opacityTransition, opacity]
+  );
+  useInjectorEffect2((injector2) => {
+    const disposes = [];
+    return disposeAll([
+      injector2.inject([
+        Prec.low(
+          EditorView4.theme({
+            ".cm-foldGutter .cm-gutterElement": {
+              display: "flex",
+              alignItems: "center",
+              cursor: "pointer"
+            }
+          })
+        ),
+        foldGutter({
+          markerDOM(open) {
+            const dom = document.createElement("span");
+            dom.setAttribute("aria-expanded", open ? "true" : "false");
+            const id = v4();
+            connectorRef.current.connect(
+              id,
+              createPortal3(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;
+            }
+          }
+        }),
+        codeFolding({
+          placeholderDOM(view, onclick) {
+            const dom = document.createElement("span");
+            const id = v4();
+            connectorRef.current.connect(
+              id,
+              createPortal3(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__ */ React3.createElement(Portal, null);
+}
+
+// src/placeholder/index.tsx
+import { createPortal as createPortal4 } from "react-dom";
+import { useHTMLElement as useHTMLElement3, useInjectorEffect as useInjectorEffect3 } from "@coze-editor/react-hooks";
+import {
+  placeholder,
+  activeLinePlaceholder
+} from "@coze-editor/extension-placeholder";
+function Placeholder({ children }) {
+  const element = useHTMLElement3("span");
+  useInjectorEffect3(
+    (injector) => injector.inject([placeholder(() => element)]),
+    []
+  );
+  return createPortal4(children, element);
+}
+function ActiveLinePlaceholder({
+  children
+}) {
+  const element = useHTMLElement3("span");
+  useInjectorEffect3(
+    (injector) => injector.inject([activeLinePlaceholder(() => element)]),
+    []
+  );
+  return createPortal4(children, element);
+}
+
+// src/ref-element/index.tsx
+import { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useLatest as useLatest3 } from "@coze-editor/react-hooks";
+var RefElement = forwardRef3(({ element }, ref) => {
+  const domRef = useLatest3(element);
+  useImperativeHandle3(ref, () => domRef.current);
+  return null;
+});
+RefElement.displayName = "RefElement";
+
+// src/line-widget/index.tsx
+import { createPortal as createPortal5 } from "react-dom";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect6, useRef as useRef3 } from "react";
+import { useHTMLElement as useHTMLElement4 } from "@coze-editor/react-hooks";
+import {
+  useEditor as useEditor4,
+  useInjector as useInjector7
+} from "@coze-editor/react";
+
+// src/line-widget/cursor-widget/state.ts
+import { EditorView as EditorView5 } from "@codemirror/view";
+import {
+  StateField,
+  StateEffect
+} from "@codemirror/state";
+
+// src/line-widget/cursor-widget/widget-decoration.ts
+import { Decoration as Decoration2, WidgetType as WidgetType3 } from "@codemirror/view";
+var CustomDivWidget = class extends WidgetType3 {
+  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 Decoration2.none;
+  }
+  return Decoration2.set(
+    Decoration2.widget({
+      widget: new CustomDivWidget(config.createDOM()),
+      side: config.side,
+      block: true,
+      config
+    }).range(pos)
+  );
+};
+
+// src/line-widget/cursor-widget/state.ts
+var setWidgetEffect = StateEffect.define();
+var getPos = (state, num) => state.doc.line(num).from;
+var cursorWidgetState = (facet) => 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) => EditorView5.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 = useRef3(null);
+  const injector = useInjector7();
+  const editor = useEditor4();
+  useEffect5(() => {
+    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 = useHTMLElement4("span");
+  useLayoutEffect6(() => {
+    const { extension, setWidgetLineNumber: setWidgetLineNumber2 } = cursorBlockWidget({
+      side,
+      lineNumber,
+      createDOM: () => element
+    });
+    setWidgetLineNumberRef.current = setWidgetLineNumber2;
+    return injector.inject(extension);
+  }, [injector]);
+  return createPortal5(children, element);
+}
+
+// src/diff-view/index.tsx
+import { useLayoutEffect as useLayoutEffect7 } from "react";
+import { useInjector as useInjector8 } from "@coze-editor/react";
+
+// src/diff-view/extension.ts
+import { EditorView as EditorView6 } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { unifiedMergeView } from "@codemirror/merge";
+var diffView = (props) => {
+  const { original = "" } = props;
+  return [
+    unifiedMergeView({
+      original,
+      gutter: false
+    }),
+    EditorState.phrases.of({
+      Accept: "^Y",
+      Reject: "^N"
+    }),
+    EditorView6.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 = useInjector8();
+  useLayoutEffect7(() => injector.inject(diffView({ original })), []);
+  return null;
+}
+
+// src/mention/extension.ts
+import { FacetCombineStrategy } from "@coze-editor/utils";
+import {
+  Facet as Facet4,
+  MapMode as MapMode2,
+  StateField as StateField2
+} from "@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 = Facet4.define();
+function mention(options) {
+  const mentionConfig = Facet4.define({
+    combine: FacetCombineStrategy.Last
+  });
+  const field = StateField2.define({
+    create() {
+      return {
+        show: false,
+        triggerContext: void 0
+      };
+    },
+    update(value, tr) {
+      const options2 = tr.startState.facet(mentionConfig);
+      const { search = true, onOpenChange, onSearch } = 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);
+        }
+      }
+      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,
+            MapMode2.TrackAfter
+          );
+          const newTo = tr.changes.mapPos(
+            value.triggerContext.to,
+            1,
+            MapMode2.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
+import { useInjectorEffect as useInjectorEffect4, useLatest as useLatest4 } from "@coze-editor/react-hooks";
+function Mention(props) {
+  const propsRef = useLatest4(props);
+  useInjectorEffect4((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);
+        }
+      }
+    };
+    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
+import { createPortal as createPortal6 } from "react-dom";
+import { forwardRef as forwardRef4, useImperativeHandle as useImperativeHandle4 } from "react";
+import {
+  useHTMLElement as useHTMLElement5,
+  useInjectorEffect as useInjectorEffect5,
+  useLatest as useLatest5
+} from "@coze-editor/react-hooks";
+import { useEditor as useEditor5 } from "@coze-editor/react";
+import { Decoration as Decoration3, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { MapMode as MapMode3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
+var DOMWidget = class extends WidgetType4 {
+  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 = StateEffect2.define();
+var EmbededLineView = forwardRef4(function EmbededLineView2({ children }, ref) {
+  const dom = useHTMLElement5("div");
+  const domRef = useLatest5(dom);
+  const editor = useEditor5();
+  const editorRef = useLatest5(editor);
+  useImperativeHandle4(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 */
+        })
+      });
+    }
+  }));
+  useInjectorEffect5((injector) => {
+    const field = StateField3.define({
+      create() {
+        return {
+          position: 0,
+          side: "before" /* Before */,
+          decorations: Decoration3.none
+        };
+      },
+      update(value, tr) {
+        const newPosition = tr.changes.mapPos(
+          value.position,
+          -1,
+          MapMode3.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: Decoration3.set([
+              Decoration3.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: Decoration3.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: Decoration3.set([
+                Decoration3.widget({
+                  widget: new DOMWidget({
+                    dom: domRef.current
+                  }),
+                  block: true,
+                  side: newValue.side === "after" /* After */ ? 1 : -1
+                }).range(decoPos)
+              ])
+            };
+          }
+        }
+        return newValue;
+      },
+      provide(f) {
+        return EditorView7.decorations.compute(
+          [f],
+          (state) => state.field(f).decorations
+        );
+      }
+    });
+    return injector.inject([field]);
+  }, []);
+  return createPortal6(children, dom);
+});
+export {
+  ActiveLinePlaceholder,
+  CursorInlayHint,
+  CursorMirror,
+  DiagnosticMarkers,
+  DiffView,
+  EmbededLineView,
+  EmbededLineViewSide,
+  FoldGutter,
+  Gutter,
+  GutterLineMarker,
+  GutterPlacement,
+  LineWidget,
+  Markers,
+  Mention,
+  Placeholder,
+  PositionMirror,
+  RefElement,
+  SelectionSide,
+  getCurrentMentionReplaceRange
+};
+//# sourceMappingURL=index.js.map