@k2b/editor 0.0.0 → 0.1.1

package/src/collab/history.ts

@@ -0,0 +1,39 @@
+import { isolateHistory } from "@codemirror/commands";
+import { EditorState, type Extension, type Transaction } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { ySyncAnnotation } from "y-codemirror.next";
+import type { UndoManager } from "yjs";
+
+/** A transaction's own history boundary; a local line break, such as Enter, is an undo step of its own. */
+const isolation = (tr: Transaction) => {
+  const explicit = tr.annotation(isolateHistory);
+  if (explicit || tr.annotation(ySyncAnnotation) || !tr.isUserEvent("input") || tr.isUserEvent("input.paste")) return explicit;
+  let lineBreak = false;
+  tr.changes.iterChanges((_from, _to, _fromB, _toB, text) => {
+    if (text.lines > 1) lineBreak = true;
+  });
+  return lineBreak ? "full" : undefined;
+};
+
+/**
+ * Honor CodeMirror's history boundaries in the Yjs undo stack: "before" and
+ * "full" close the open undo item before yCollab sends the edit to Yjs, and
+ * "after" and "full" close it once the edit is in Yjs.
+ */
+export const isolateYjsHistory = (undoManager: UndoManager): Extension => [
+  EditorState.transactionExtender.of((tr) => {
+    const isolate = isolation(tr);
+    if (isolate === "before" || isolate === "full") undoManager.stopCapturing();
+    return null;
+  }),
+  // Update listeners run after yCollab's view plugin wrote the transaction to Yjs.
+  EditorView.updateListener.of((update) => {
+    if (
+      update.transactions.some((tr) => {
+        const value = isolation(tr);
+        return value === "after" || value === "full";
+      })
+    )
+      undoManager.stopCapturing();
+  }),
+];

package/src/collab/index.ts

@@ -0,0 +1,32 @@
+import type { Extension } from "@codemirror/state";
+import { yCollab } from "y-codemirror.next";
+import type { Awareness } from "y-protocols/awareness";
+import type * as Y from "yjs";
+import { isolateYjsHistory } from "./history";
+import { remoteCursors } from "./remote-cursors";
+
+export { isolateYjsHistory } from "./history";
+export { resolveTextCursor } from "./relative-cursor";
+export { REMOTE_CARET_IDLE_CLASS, REMOTE_CARET_LABEL_IDLE_MS, remoteCursors } from "./remote-cursors";
+
+export type CollabOptions = {
+  /** The shared text the editor shows; the application owns its document and transport. */
+  text: Y.Text;
+  /** The Yjs undo stack of this editor; without it, undo stays CodeMirror's own. */
+  undoManager?: Y.UndoManager;
+  /**
+   * Presence of the other writers. The editor publishes its own cursor as `{ anchor, head }` relative positions in
+   * the `cursor` field and draws the others' cursors with `user.name` and `user.color`.
+   */
+  awareness?: Awareness;
+};
+
+/**
+ * Collaborative editing for `@k2b/editor`: the Yjs binding, undo steps that keep CodeMirror's history boundaries,
+ * and the other writers' cursors. The transport, such as a WebSocket provider, stays in the application.
+ */
+export const collab = (options: CollabOptions): Extension => [
+  yCollab(options.text, null, { undoManager: options.undoManager ?? false }),
+  options.undoManager ? isolateYjsHistory(options.undoManager) : [],
+  options.awareness ? remoteCursors(options.text, options.awareness) : [],
+];

package/src/collab/relative-cursor.ts

@@ -0,0 +1,18 @@
+import * as Y from "yjs";
+
+/** Resolve only the already mounted text root; Yjs may create unknown named roots. */
+export const resolveTextCursor = (ytext: Y.Text, value: unknown): Y.AbsolutePosition | null => {
+  const doc = ytext.doc;
+  if (!doc) return null;
+  try {
+    const position = Y.createRelativePositionFromJSON(value);
+    if (typeof position.tname !== "string" || position.type !== null) return null;
+    const root = doc.share.get(position.tname);
+    if (!(root instanceof Y.Text) || root !== ytext) return null;
+    const absolute = Y.createAbsolutePositionFromRelativePosition(position, doc);
+    return absolute?.type === ytext ? absolute : null;
+  } catch {
+    // Pending references and malformed transient cursor states have no position.
+    return null;
+  }
+};

package/src/collab/remote-cursors.ts

@@ -0,0 +1,358 @@
+import { Annotation, EditorSelection, type Extension } from "@codemirror/state";
+import { BlockType, EditorView, type LayerMarker, layer, RectangleMarker, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+import type { Awareness } from "y-protocols/awareness";
+import * as Y from "yjs";
+import { resolveTextCursor } from "./relative-cursor";
+
+// Long enough to read a name after the caret stops, short enough that a pause in typing clears the text it covers.
+export const REMOTE_CARET_LABEL_IDLE_MS = 3_000;
+export const REMOTE_CARET_IDLE_CLASS = "cm-remoteCaret-idle";
+
+const hasCursor = (cursor: unknown): cursor is { anchor: object; head: object } =>
+  typeof cursor === "object" &&
+  cursor !== null &&
+  "anchor" in cursor &&
+  typeof cursor.anchor === "object" &&
+  cursor.anchor !== null &&
+  "head" in cursor &&
+  typeof cursor.head === "object" &&
+  cursor.head !== null;
+
+const remoteCursorsAnnotation = Annotation.define<boolean>();
+
+class RemoteSelectionMarker implements LayerMarker {
+  constructor(
+    readonly rect: RectangleMarker,
+    readonly color: string,
+  ) {}
+
+  eq(other: LayerMarker) {
+    return other instanceof RemoteSelectionMarker && this.rect.eq(other.rect) && this.color === other.color;
+  }
+
+  draw() {
+    const dom = this.rect.draw();
+    dom.style.backgroundColor = this.color;
+    return dom;
+  }
+
+  update(dom: HTMLElement, old: LayerMarker) {
+    if (!(old instanceof RemoteSelectionMarker)) return false;
+    this.rect.update(dom, old.rect);
+    dom.style.backgroundColor = this.color;
+    return true;
+  }
+}
+
+class RemoteCaretMarker implements LayerMarker {
+  constructor(
+    readonly rect: RectangleMarker,
+    readonly color: string,
+    readonly name: string,
+    readonly idle: boolean,
+  ) {}
+
+  eq(other: LayerMarker) {
+    return (
+      other instanceof RemoteCaretMarker &&
+      this.rect.eq(other.rect) &&
+      this.color === other.color &&
+      this.name === other.name &&
+      this.idle === other.idle
+    );
+  }
+
+  draw() {
+    const dom = this.rect.draw();
+    const dot = document.createElement("div");
+    dot.className = "cm-remoteCaretDot";
+    const label = document.createElement("div");
+    label.className = "cm-remoteCaretLabel";
+    dom.append(dot, label);
+    this.patch(dom);
+    return dom;
+  }
+
+  update(dom: HTMLElement, old: LayerMarker) {
+    if (!(old instanceof RemoteCaretMarker)) return false;
+    this.rect.update(dom, old.rect);
+    this.patch(dom);
+    return true;
+  }
+
+  private patch(dom: HTMLElement) {
+    dom.style.setProperty("--remote-color", this.color);
+    dom.classList.toggle(REMOTE_CARET_IDLE_CLASS, this.idle);
+    const label = dom.querySelector(".cm-remoteCaretLabel");
+    if (label) label.textContent = this.name;
+  }
+}
+
+const remoteCursorTheme = EditorView.theme({
+  ".cm-remoteCaretLayer, .cm-remoteSelectionLayer": { pointerEvents: "none" },
+  ".cm-remoteCaret": { position: "absolute", width: "2px", marginLeft: "-1px", backgroundColor: "var(--remote-color)" },
+  // The name flag meets the top of the caret and continues its left edge.
+  ".cm-remoteCaretLabel": {
+    position: "absolute",
+    left: "0",
+    bottom: "100%",
+    padding: "0 4px",
+    borderRadius: "4px 4px 4px 0",
+    backgroundColor: "var(--remote-color)",
+    color: "#fff",
+    font: "500 11px/15px var(--font-sans)",
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    opacity: "1",
+    transition: "none",
+  },
+  // An idle caret keeps a dot as the hover target for its name.
+  ".cm-remoteCaretDot": {
+    position: "absolute",
+    left: "-2px",
+    top: "-3px",
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    backgroundColor: "var(--remote-color)",
+    opacity: "0",
+  },
+  // Only a visible dot takes the pointer; an invisible one would swallow presses on the text below it.
+  ".cm-remoteCaret-idle .cm-remoteCaretDot": { opacity: "1", pointerEvents: "auto" },
+  ".cm-remoteCaret-idle:not(:hover) .cm-remoteCaretLabel": { opacity: "0", transition: "opacity 300ms ease-out" },
+  "@media (prefers-reduced-motion: reduce)": { ".cm-remoteCaret-idle:not(:hover) .cm-remoteCaretLabel": { transition: "none" } },
+});
+
+export const remoteCursors = (ytext: Y.Text, awareness: Awareness): Extension => {
+  if (!ytext.doc) throw new Error("Remote cursors require a Y.Text attached to a document");
+  const doc = ytext.doc;
+
+  const plugin = ViewPlugin.fromClass(
+    class {
+      lastActive = new Map<number, number>();
+      cursorKeys = new Map<number, string>();
+      nullCursors = new Set<number>();
+      deletions: { position: Y.RelativePosition; time: number }[] = [];
+      timer: ReturnType<typeof setTimeout> | undefined;
+
+      constructor(readonly view: EditorView) {
+        this.trackCursors([...awareness.getStates().keys()]);
+        awareness.on("change", this.onAwarenessChange);
+        ytext.observe(this.onTextChange);
+        doc.on("afterTransaction", this.onTransaction);
+        this.apply();
+      }
+
+      trackCursors(clients: number[]) {
+        for (const client of clients) {
+          if (client === doc.clientID) continue;
+          const cursor: unknown = awareness.getStates().get(client)?.cursor;
+          if (!hasCursor(cursor)) {
+            this.nullCursors.add(client);
+            continue;
+          }
+          if (this.nullCursors.delete(client)) {
+            const now = Date.now();
+            this.pruneDeletions(now);
+            const position = Y.createRelativePositionFromJSON(cursor.head);
+            const head = resolveTextCursor(ytext, position);
+            const deletion = this.deletions.findIndex(({ position: deleted }) => {
+              if (Y.compareRelativePositions(position, deleted)) return true;
+              const absolute = resolveTextCursor(ytext, deleted);
+              return head?.type === ytext && absolute?.type === ytext && head.index === absolute.index;
+            });
+            if (deletion !== -1) {
+              this.lastActive.set(client, now);
+              this.deletions.splice(deletion, 1);
+            }
+          }
+          const key = JSON.stringify([cursor.anchor, cursor.head]);
+          if (this.cursorKeys.get(client) === key) continue;
+          this.cursorKeys.set(client, key);
+          this.lastActive.set(client, Date.now());
+        }
+      }
+
+      onAwarenessChange = ({ added, updated, removed }: { added: number[]; updated: number[]; removed: number[] }) => {
+        this.trackCursors([...added, ...updated]);
+        // Keep the key when a cursor is nulled: republishing it is not activity.
+        for (const client of removed) {
+          this.lastActive.delete(client);
+          this.cursorKeys.delete(client);
+          this.nullCursors.delete(client);
+        }
+        if ([...added, ...updated, ...removed].some((client) => client !== doc.clientID)) {
+          this.apply();
+          this.redraw();
+        }
+      };
+
+      pruneDeletions(now: number) {
+        this.deletions = this.deletions.filter(({ time }) => now - time < REMOTE_CARET_LABEL_IDLE_MS);
+      }
+
+      onTextChange = (event: Y.YTextEvent, transaction: Y.Transaction) => {
+        if (transaction.local) return;
+        const now = Date.now();
+        let index = 0;
+        for (const op of event.delta) {
+          if (op.retain !== undefined) index += op.retain;
+          if (op.insert !== undefined) index += typeof op.insert === "string" ? op.insert.length : 1;
+          if (op.delete === undefined) continue;
+          let matched = false;
+          for (const [client, state] of awareness.getStates()) {
+            if (client === doc.clientID || !hasCursor(state.cursor)) continue;
+            const head = resolveTextCursor(ytext, state.cursor.head);
+            if (head?.type !== ytext || head.index !== index) continue;
+            this.lastActive.set(client, now);
+            matched = true;
+          }
+          if (!matched) {
+            // The deletion can arrive before an idle sender republishes its cursor.
+            this.pruneDeletions(now);
+            this.deletions.push({ position: Y.createRelativePositionFromTypeIndex(ytext, index), time: now });
+          }
+        }
+      };
+
+      onTransaction = (transaction: Y.Transaction) => {
+        if (transaction.local) return;
+        // Document writers and server-owned awareness envelopes have separate IDs.
+        for (const [client, state] of awareness.getStates()) {
+          const writer: unknown = state.writerId;
+          if (typeof writer !== "number") continue;
+          if ((transaction.afterState.get(writer) ?? 0) > (transaction.beforeState.get(writer) ?? 0))
+            this.lastActive.set(client, Date.now());
+        }
+        // Yjs observers have already dispatched the view update before this event.
+        this.apply();
+        this.redraw();
+      };
+
+      apply() {
+        if (this.timer !== undefined) clearTimeout(this.timer);
+        this.timer = undefined;
+        const now = Date.now();
+        let nextDeadline = Infinity;
+        for (const lastActive of this.lastActive.values()) {
+          const deadline = lastActive + REMOTE_CARET_LABEL_IDLE_MS;
+          if (deadline > now) nextDeadline = Math.min(nextDeadline, deadline);
+        }
+        if (nextDeadline !== Infinity)
+          this.timer = setTimeout(() => {
+            this.apply();
+            this.redraw();
+          }, nextDeadline - now);
+      }
+
+      redraw() {
+        this.view.dispatch({ annotations: remoteCursorsAnnotation.of(true) });
+      }
+
+      update(update: ViewUpdate) {
+        if (!update.selectionSet && !update.docChanged && !update.focusChanged) return;
+        const localState = awareness.getLocalState();
+        if (localState !== null) {
+          const hasFocus = update.view.hasFocus && update.view.dom.ownerDocument.hasFocus();
+          const selection = hasFocus ? update.state.selection.main : null;
+          const cursor: unknown = localState.cursor;
+          const currentAnchor = hasCursor(cursor) ? Y.createRelativePositionFromJSON(cursor.anchor) : null;
+          const currentHead = hasCursor(cursor) ? Y.createRelativePositionFromJSON(cursor.head) : null;
+          if (selection !== null) {
+            const anchor = Y.createRelativePositionFromTypeIndex(ytext, selection.anchor);
+            const head = Y.createRelativePositionFromTypeIndex(ytext, selection.head);
+            if (
+              !currentAnchor ||
+              !currentHead ||
+              !Y.compareRelativePositions(currentAnchor, anchor) ||
+              !Y.compareRelativePositions(currentHead, head)
+            ) {
+              awareness.setLocalStateField("cursor", { anchor, head });
+            }
+          } else if (cursor != null && hasFocus) {
+            awareness.setLocalStateField("cursor", null);
+          }
+        }
+      }
+
+      destroy() {
+        awareness.off("change", this.onAwarenessChange);
+        ytext.unobserve(this.onTextChange);
+        doc.off("afterTransaction", this.onTransaction);
+        if (this.timer !== undefined) clearTimeout(this.timer);
+      }
+    },
+  );
+
+  const clients = (view: EditorView) => {
+    const result: { anchor: number; head: number; color: string; name: string; idle: boolean }[] = [];
+    for (const [client, state] of awareness.getStates()) {
+      const cursor: unknown = state.cursor;
+      if (client === doc.clientID || !hasCursor(cursor)) continue;
+      const anchor = resolveTextCursor(ytext, cursor.anchor);
+      const head = resolveTextCursor(ytext, cursor.head);
+      if (anchor?.type !== ytext || head?.type !== ytext) continue;
+      const user: unknown = state.user;
+      const color = typeof user === "object" && user !== null && "color" in user && typeof user.color === "string" ? user.color : "#30bced";
+      const name = typeof user === "object" && user !== null && "name" in user && typeof user.name === "string" ? user.name : "Anonymous";
+      const lastActive = view.plugin(plugin)?.lastActive.get(client);
+      result.push({
+        anchor: anchor.index,
+        head: head.index,
+        color,
+        name,
+        idle: lastActive === undefined || Date.now() - lastActive >= REMOTE_CARET_LABEL_IDLE_MS,
+      });
+    }
+    return result;
+  };
+  const update = (update: ViewUpdate) =>
+    update.docChanged ||
+    update.viewportChanged ||
+    update.geometryChanged ||
+    update.transactions.some((tr) => tr.annotation(remoteCursorsAnnotation));
+
+  return [
+    plugin,
+    layer({
+      above: false,
+      class: "cm-remoteSelectionLayer",
+      update,
+      markers: (view) =>
+        clients(view).flatMap(({ anchor, head, color }) =>
+          anchor === head
+            ? []
+            : RectangleMarker.forRange(view, "cm-remoteSelection", EditorSelection.range(anchor, head)).map(
+                (rect) => new RemoteSelectionMarker(rect, color + "33"),
+              ),
+        ),
+    }),
+    layer({
+      above: true,
+      class: "cm-remoteCaretLayer",
+      update,
+      markers: (view) =>
+        clients(view).flatMap(({ anchor, head, color, name, idle }) => {
+          const block = view.lineBlockAt(head);
+          if (block.type === BlockType.WidgetRange) {
+            if (head < view.viewport.from || head > view.viewport.to) return [];
+            const base = view.scrollDOM.getBoundingClientRect();
+            const edge = view.contentDOM.getBoundingClientRect();
+            const padding = parseFloat(getComputedStyle(view.contentDOM).paddingLeft);
+            const rect = new RectangleMarker(
+              "cm-remoteCaret",
+              edge.left + padding - base.left + view.scrollDOM.scrollLeft,
+              view.documentTop + block.top - base.top + view.scrollDOM.scrollTop,
+              null,
+              view.defaultLineHeight,
+            );
+            return [new RemoteCaretMarker(rect, color, name, idle)];
+          }
+          return RectangleMarker.forRange(view, "cm-remoteCaret", EditorSelection.cursor(head, head > anchor ? -1 : 1)).map(
+            (rect) => new RemoteCaretMarker(rect, color, name, idle),
+          );
+        }),
+    }),
+    remoteCursorTheme,
+  ];
+};

package/src/editor-state.ts

@@ -0,0 +1,199 @@
+import { isolateHistory } from "@codemirror/commands";
+import { Compartment, type EditorState, type Extension, StateEffect } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import type { TextEditorController, TextEditorControls } from "@k2b/ui/text-editor";
+import { type Accessor, createEffect, createSignal, getOwner, onCleanup, untrack } from "solid-js";
+
+/**
+ * One command a person can run on the editor. The toolbar, the bubble menu and the slash menu render the same
+ * actions; each place gets its own list. `run` receives the view after the place restored the selection it acted on.
+ */
+export type EditorAction = {
+  id: string;
+  /** Tabler icon class without the leading `ti `, such as `ti-bold`. */
+  icon: string;
+  label: string;
+  /** CodeMirror key spec, such as `Mod-b`; places only show it, the keymap binds it. */
+  shortcut?: string;
+  run: (view: EditorView) => void | Promise<void>;
+  /** Pressed state, for toggles such as bold. */
+  isActive?: (state: EditorState) => boolean;
+  /** `false` greys the action out and ignores presses. Every action is off in a read-only editor. */
+  isEnabled?: (state: EditorState) => boolean;
+};
+
+/**
+ * Keep a command's edits apart from the surrounding typing in the undo history: close the open undo item before it
+ * and again after its last edit, also when the command waits for a picker first. Edits inside the command group as
+ * the history groups them; a command that should undo at once dispatches one transaction. A view destroyed meanwhile
+ * ignores the closing transaction.
+ */
+export const asUndoStep = (view: EditorView, run: () => void | Promise<void>) => {
+  view.dispatch({ annotations: isolateHistory.of("before") });
+  const close = () => view.dispatch({ annotations: isolateHistory.of("after") });
+  let result: void | Promise<void>;
+  try {
+    result = run();
+  } catch (error) {
+    close();
+    throw error;
+  }
+  if (result) return result.finally(close);
+  close();
+};
+
+type Slot = { compartment: Compartment; value: Extension; joined: boolean };
+
+export type EditorHandle = {
+  /** The mounted view; `undefined` before `<Editor>` mounted and after it unmounted. */
+  view: Accessor<EditorView | undefined>;
+  /** The view's latest state; every document, selection or focus change updates it. */
+  state: Accessor<EditorState | undefined>;
+  /** Whether the editor itself or one of its places has focus. */
+  focused: Accessor<boolean>;
+  /** Table controls of the shared text editor, for toolbars that edit tables. */
+  controls: Accessor<TextEditorControls | undefined>;
+  controller: Accessor<TextEditorController | undefined>;
+  /**
+   * Add an extension to the view, also before it mounts. A function is tracked: its later values reconfigure only
+   * its own slot. The slot leaves the view again when the calling owner is disposed. Changes reach a mounted view one
+   * microtask later, so a factory may read signals that change during an editor update.
+   */
+  use: (extension: Extension | (() => Extension)) => void;
+  /** Run an action apart from surrounding edits in the undo history and keep focus in the editor; disabled actions do nothing. */
+  run: (action: Pick<EditorAction, "run" | "isEnabled">) => void | Promise<void>;
+  isActive: (action: Pick<EditorAction, "isActive">) => boolean;
+  isEnabled: (action: Pick<EditorAction, "isEnabled">) => boolean;
+  /** Everything `<Editor>` passes to the view. Hosts mounting `TextEditor` themselves add this to its extensions. */
+  extension: () => Extension;
+  /**
+   * Hand a mounted view to the handle; `<Editor>` does this from `onReady`. A host that mounts the view itself also
+   * passes the text editor's controller and table controls when it has them.
+   */
+  attach: (view: EditorView, parts?: { controller?: TextEditorController; controls?: TextEditorControls }) => void;
+  /** Forget a view that is being destroyed; a newer attached view stays. */
+  detach: (view: EditorView) => void;
+};
+
+/**
+ * Shared state of one editor. `<Editor>` mounts the view; `<Toolbar>`, `<BubbleMenu>` and `<SlashMenu>` read and
+ * change it from wherever the host places them. There is no second document model: the state is CodeMirror's.
+ */
+export function createEditor(): EditorHandle {
+  const [view, setView] = createSignal<EditorView>();
+  const [state, setState] = createSignal<EditorState>();
+  const [focused, setFocused] = createSignal(false);
+  const [controller, setController] = createSignal<TextEditorController>();
+  const [controls, setControls] = createSignal<TextEditorControls>();
+  const slots = new Set<Slot>();
+  // CodeMirror refuses a dispatch while it updates the view, and a plugin that throws there is switched off for good,
+  // such as the Yjs binding. A slot's factory may run inside such an update when it reads a signal that a plugin or
+  // listener wrote, so slots reach the view one microtask later, together, after the update finished.
+  const pending = new Set<Slot>();
+  const flush = () => {
+    const current = untrack(view);
+    if (!current) return;
+    const ready = [...pending];
+    pending.clear();
+    if (!current.dom.isConnected) return;
+    const effects = ready.map((slot) => {
+      if (slot.joined) return slot.compartment.reconfigure(slot.value);
+      slot.joined = true;
+      return StateEffect.appendConfig.of(slot.compartment.of(slot.value));
+    });
+    if (effects.length) current.dispatch({ effects });
+  };
+  const schedule = (slot: Slot) => {
+    if (!pending.size) queueMicrotask(flush);
+    pending.add(slot);
+  };
+  // Listeners run inside the dispatch of whoever changed the view, maybe a host effect. They only write signals: a
+  // read here would subscribe that effect to every editor update, and its next dispatch would run it again.
+  const tracker = EditorView.updateListener.of((update) => {
+    setState(update.state);
+    if (update.focusChanged) setFocused(update.view.hasFocus);
+  });
+
+  const use = (extension: Extension | (() => Extension)) => {
+    const slot: Slot = { compartment: new Compartment(), value: [], joined: false };
+    slots.add(slot);
+    if (typeof extension === "function")
+      createEffect(() => {
+        slot.value = extension();
+        schedule(slot);
+      });
+    else {
+      slot.value = extension;
+      // A place added after the view mounted joins its configuration.
+      if (untrack(view)) schedule(slot);
+    }
+    if (getOwner())
+      onCleanup(() => {
+        slots.delete(slot);
+        // A whole editor that unmounts disposes its places in the same pass; a view torn down meanwhile keeps its
+        // configuration, so no listener reads a field that just left. A place that leaves a living editor goes.
+        slot.value = [];
+        if (slot.joined) schedule(slot);
+        else pending.delete(slot);
+      });
+  };
+
+  const run = (action: Pick<EditorAction, "run" | "isEnabled">) => {
+    const current = view();
+    if (!current || !isEnabled(action)) return;
+    const returnFocus = () => {
+      // A command may already have handed focus into a table cell or a picker.
+      if (current.dom.isConnected && !current.dom.contains(current.dom.ownerDocument.activeElement)) current.focus();
+    };
+    return asUndoStep(current, () => {
+      const result = action.run(current);
+      if (!result) return returnFocus();
+      return result.finally(returnFocus);
+    });
+  };
+
+  const isActive = (action: Pick<EditorAction, "isActive">) => {
+    const current = state();
+    return !!current && !!action.isActive?.(current);
+  };
+  const isEnabled = (action: Pick<EditorAction, "isEnabled">) => {
+    const current = state();
+    // CodeMirror's read-only facet stops typing, not dispatched changes, so actions check it here.
+    return !!current && !current.readOnly && action.isEnabled?.(current) !== false;
+  };
+
+  return {
+    view,
+    state,
+    focused,
+    controls,
+    controller,
+    use,
+    run,
+    isActive,
+    isEnabled,
+    extension: () => [
+      tracker,
+      [...slots].map((slot) => {
+        slot.joined = true;
+        return slot.compartment.of(slot.value);
+      }),
+    ],
+    attach(next, parts) {
+      setController(parts?.controller);
+      setControls(parts?.controls);
+      setView(next);
+      setState(next.state);
+      setFocused(next.hasFocus);
+      // Values that changed before the view existed reach it now.
+      if (pending.size) queueMicrotask(flush);
+    },
+    detach(old) {
+      if (untrack(view) !== old) return;
+      setView(undefined);
+      setController(undefined);
+      setControls(undefined);
+      setFocused(false);
+    },
+  };
+}