Reloadable dochandles

codemirror-base/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@automerge/automerge-codemirror": "^0.2.0",
+    "@codemirror/commands": "^6.9.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
     "@inkandswitch/patchwork-bootloader": "^0.2.8",

codemirror-base/src/lib/codemirror.tsx

@@ -12,6 +12,7 @@ import {
   createReadOnlyExtension,
   createDecorationsExtension,
   createDiffExtension,
+  createHistoryExtension,
   createScrollHighlightIntoViewExtension,
 } from "./extensions";
 
@@ -39,6 +40,8 @@ type CodeMirrorProps<T> = {
   // When the returned range changes, the editor scrolls it into view -- unless
   // it's already visible. Used to follow focus driven by other views.
   scrollTarget?: () => readonly [number, number] | null;
+  // Forces the editor read-only. A heads-pinned handle makes it read-only
+  // regardless (tracked internally), so this is only needed as an override.
   readOnly?: boolean;
   withView?(view: EditorView): void;
 };
@@ -54,7 +57,16 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
   );
 
   const [readOnlyExtension, createEffectReconfigureReadOnly] =
-    createReadOnlyExtension(() => !!props.readOnly);
+    createReadOnlyExtension(
+      () => props.handle,
+      () => !!props.readOnly
+    );
+
+  // Undo/redo lives here (not in tool-supplied extensions) so the stack can
+  // be reset when the handle's backing is swapped in place -- see history.ts.
+  const [historyExtension, createEffectResetHistory] = createHistoryExtension(
+    () => props.handle
+  );
 
   const [decorationsExtension, createEffectReconfigureDecorations] =
     createDecorationsExtension(() => props.decorations?.());
@@ -90,6 +102,7 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
     // syncExtension must come before diffExtension so diff stays in sync with edits.
     syncExtension,
     diffExtension,
+    historyExtension,
     scrollHighlightIntoViewExtension,
     userExtensionsCompartment.of(props.extensions || []),
     readOnlyExtension,
@@ -111,6 +124,7 @@ export function CodeMirror<T>(props: CodeMirrorProps<T>) {
   createEffectReconfigureReadOnly(view);
   createEffectReconfigureDecorations?.(view);
   createEffectReconfigureDiff(view);
+  createEffectResetHistory(view);
   createEffectScrollHighlightIntoView(view);
 
   // Reconfigure user extensions when props.extensions changes

codemirror-base/src/lib/extensions/automergeSync.ts

@@ -1,20 +1,23 @@
-import { createEffect } from "solid-js";
+import { createEffect, onCleanup } from "solid-js";
 
 /** CodeMirror */
 import { EditorView } from "@codemirror/view";
-import { Compartment } from "@codemirror/state";
+import { Compartment, Transaction } from "@codemirror/state";
 
 /** Automerge */
 import type { Prop as AutomergeProp } from "@automerge/automerge/slim";
 import { automergeSyncPlugin } from "@automerge/automerge-codemirror";
-import type { DocHandle } from "@automerge/automerge-repo/slim";
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
 
 /**
  * Create a CodeMirror extension for synchronizing with an Automerge document using a CodeMirror
  Compartment.
  * @param handle The Automerge document handle.
  * @param path The path to the specific document property to synchronize.
- * @returns A tuple containing the extension and a function to create an effect for reconfiguring the extension when the handle or path change.
+ * @returns A tuple containing the extension and a function to create an effect for reconfiguring the extension when the handle or path change (or the handle's backing is swapped in place).
  */
 export function createSyncExtension<T>(
   handle: () => DocHandle<T>,
@@ -35,18 +38,44 @@ export function createSyncExtension<T>(
   // instance is destroyed without seeing this transaction, so the full-doc
   // reset below is not echoed back into the automerge doc) and the fresh
   // plugin re-seeds its reconciled heads from the current doc.
+  //
+  // The reset is a synthetic remote transaction, not a user edit: it must not
+  // land on the undo stack (undoing it would restore a different timeline's
+  // text and write it back into the doc). Marking it also makes the history
+  // reset on `scopeReplaced` (see `createHistoryExtension`) order-independent
+  // across the two `change` listeners.
   const createReconfigureEffect = (view: EditorView) =>
     createEffect(() => {
-      // The `handle()`/`path()` reads inside `syncExtension` are tracked, so a
-      // reactive prop change re-runs this and rebuilds the plugin.
-      view.dispatch({
-        effects: sync.reconfigure(syncExtension()),
-        changes: {
-          from: 0,
-          to: view.state.doc.length,
-          insert: initialDoc(),
-        },
-      });
+      const rebuild = () => {
+        view.dispatch({
+          effects: sync.reconfigure(syncExtension()),
+          changes: {
+            from: 0,
+            to: view.state.doc.length,
+            insert: initialDoc(),
+          },
+          annotations: [
+            Transaction.addToHistory.of(false),
+            Transaction.remote.of(true),
+          ],
+        });
+      };
+      // Runs inside the effect, so the `handle()`/`path()` reads are tracked
+      // and a reactive prop change re-runs this whole wiring.
+      rebuild();
+
+      // The draft overlay can re-point a live handle at a different clone
+      // without the handle identity changing (a `change` event with
+      // `scopeReplaced: true`). The sync plugin diffs incrementally from its
+      // reconciled heads, which don't exist in the new backing's history — so
+      // rebuild the plugin (and the editor content) from the swapped-in doc.
+      const h = handle();
+      if (!h) return;
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (payload.scopeReplaced) rebuild();
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
     });
 
   return [sync.of(syncExtension()), createReconfigureEffect] as const;

codemirror-base/src/lib/extensions/commentUI.ts

@@ -153,7 +153,8 @@ const buttonTooltip = (
   options: CommentUIOptions
 ): Tooltip | null => {
   const sel = state.selection.main;
-  if (sel.empty) return null;
+  // A read-only editor can't take the comment write, so don't offer the button.
+  if (sel.empty || state.readOnly) return null;
 
   // Anchor the button at the drag tail (the selection head) rather than the
   // start, so dragging left-to-right lands it on the right and right-to-left
@@ -203,6 +204,15 @@ const commentUIField = (options: CommentUIOptions, ui: CommentUIState) =>
       let buttonDismissed = value.buttonDismissed;
       let popoverChanged = false;
 
+      // Read-only can flip mid-session: entering it closes any open popover —
+      // its reply box writes to a doc that rejects writes — and the flip
+      // itself must recompute the tooltip so the button hides/re-arms.
+      const readOnlyChanged = tr.startState.readOnly !== tr.state.readOnly;
+      if (readOnlyChanged && tr.state.readOnly && popover) {
+        popover = null;
+        popoverChanged = true;
+      }
+
       // Keep the popover pinned to its text as the document shifts under it.
       if (popover && tr.docChanged) {
         popover = { ...popover, anchor: tr.changes.mapPos(popover.anchor) };
@@ -248,6 +258,7 @@ const commentUIField = (options: CommentUIOptions, ui: CommentUIState) =>
         !popoverChanged &&
         !tr.docChanged &&
         !tr.selection &&
+        !readOnlyChanged &&
         buttonDismissed === value.buttonDismissed
       ) {
         return value;
@@ -283,6 +294,9 @@ const commentInteractions = (
       if ((event.target as HTMLElement | null)?.closest("." + POPOVER_CLASS)) {
         return false;
       }
+      // Read-only: don't open threads either — the popover's reply box would
+      // write into a doc that rejects writes.
+      if (view.state.readOnly) return false;
       const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
       if (pos == null) return false;
       const hit = options.threadAtPos(pos);

codemirror-base/src/lib/extensions/history.ts

@@ -0,0 +1,52 @@
+import { createEffect, onCleanup } from "solid-js";
+
+/** CodeMirror */
+import { EditorView, keymap } from "@codemirror/view";
+import { Compartment } from "@codemirror/state";
+import { history, historyKeymap } from "@codemirror/commands";
+
+/** Automerge */
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
+
+/**
+ * Undo/redo history, owned by the base editor. Tools must not add their own
+ * `history()`: the underlying history state field is a module-level singleton
+ * in `@codemirror/commands`, so a second copy elsewhere in the configuration
+ * would keep the field alive across our reset and defeat it.
+ *
+ * The stack is reset whenever the handle's backing is swapped in place (a
+ * `change` event with `scopeReplaced: true` — e.g. scrubbing history or
+ * switching drafts re-points the handle at a different clone): the old
+ * entries describe a different timeline, and undo must only revert what the
+ * user has done since. CodeMirror has no clear-history API; the sanctioned
+ * reset is cycling the extension out of and back into the configuration,
+ * which drops the history field's state and re-creates it empty.
+ */
+export function createHistoryExtension<T>(handle: () => DocHandle<T>) {
+  const compartment = new Compartment();
+  const historyExtension = () => [history(), keymap.of(historyKeymap)];
+
+  const createResetEffect = (view: EditorView) =>
+    createEffect(() => {
+      const h = handle();
+      if (!h) return;
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (!payload.scopeReplaced) return;
+        // Two dispatches: the first removes the history field (dropping its
+        // state), the second re-adds it empty. The sync extension's rebuild
+        // for the same event is dispatched with `addToHistory: false`, so the
+        // relative order of the two `change` listeners doesn't matter.
+        view.dispatch({ effects: compartment.reconfigure([]) });
+        view.dispatch({
+          effects: compartment.reconfigure(historyExtension()),
+        });
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
+    });
+
+  return [compartment.of(historyExtension()), createResetEffect] as const;
+}

codemirror-base/src/lib/extensions/index.ts

@@ -1,5 +1,6 @@
 export { createDecorationsExtension } from "./decorations";
 export { createReadOnlyExtension } from "./readOnly";
 export { createSyncExtension } from "./automergeSync";
+export { createHistoryExtension } from "./history";
 export { createDiffExtension } from "./diff";
 export { createScrollHighlightIntoViewExtension } from "./scrollHighlightIntoView";

codemirror-base/src/lib/extensions/readOnly.ts

@@ -1,31 +1,66 @@
-import { createEffect } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 
 /** CodeMirror */
 import { EditorView } from "@codemirror/view";
 import { Compartment, EditorState } from "@codemirror/state";
 
+/** Automerge */
+import type {
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo/slim";
+
 /**
- * Create a CodeMirror extension for controlling read-only mode using a CodeMirror Compartment.
- * @param readOnly Whether the editor should be read-only.
- * @returns A tuple containing the extension and a function to create an effect for reconfiguring
- the extension when the readOnly prop changes.
+ * Create a CodeMirror extension that makes the editor read-only whenever the
+ * handle is (`handle.isReadOnly()`, e.g. a heads-pinned view) or the `force`
+ * override says so.
+ *
+ * The handle's read-only state can flip in place: its backing may be swapped
+ * without the handle identity changing (a `change` event with
+ * `scopeReplaced: true`), so it is tracked as a signal re-read on every swap
+ * rather than sampled once.
+ *
+ * @param handle The Automerge document handle.
+ * @param force Forces read-only regardless of the handle's state.
+ * @returns A tuple containing the extension and a function to create the
+ * effects that track the handle and reconfigure the extension.
  */
-export function createReadOnlyExtension(readOnly: () => boolean) {
+export function createReadOnlyExtension<T>(
+  handle: () => DocHandle<T> | undefined,
+  force: () => boolean = () => false
+) {
   const readOnlyCompartment = new Compartment();
 
-  // Function to get the desired state of the read-only extensions based on the readOnly parameter
+  // Seeded at factory time so the initial EditorState is already correct when
+  // the editor mounts on a read-only handle.
+  const [handleReadOnly, setHandleReadOnly] = createSignal(
+    !!handle()?.isReadOnly()
+  );
+
   const readOnlyExtensions = () =>
-    readOnly()
+    force() || handleReadOnly()
       ? [EditorState.readOnly.of(true), EditorView.editable.of(false)]
       : [];
 
-  // Function to create an effect that reconfigures the read-only compartment
-  const createReconfigureEffect = (view: EditorView) =>
+  const createReconfigureEffect = (view: EditorView) => {
+    // Follow the handle's read-only state across backing swaps.
+    createEffect(() => {
+      const h = handle();
+      if (!h) return;
+      setHandleReadOnly(h.isReadOnly());
+      const onChange = (payload: DocHandleChangePayload<T>) => {
+        if (payload.scopeReplaced) setHandleReadOnly(h.isReadOnly());
+      };
+      h.on("change", onChange);
+      onCleanup(() => h.off("change", onChange));
+    });
+
     createEffect(() => {
       view.dispatch({
         effects: readOnlyCompartment.reconfigure(readOnlyExtensions()),
       });
     });
+  };
 
   return [
     readOnlyCompartment.of(readOnlyExtensions()),

codemirror-base/src/tool.tsx

@@ -50,8 +50,6 @@ type Baseline = { heads: UrlHeads | null };
 const PATH = ["content"];
 
 export function CodeMirrorEditor(props: PatchworkToolProps<TextDoc>) {
-  const isReadOnly = props.handle.isReadOnly();
-
   // Diff baseline from the active draft overlay; plain JSON `{ heads }`. Fed to
   // the CodeMirror diff extension, which recomputes spans on every doc change
   // (driven by the sync plugin's transactions, so no manual tick is needed).
@@ -269,7 +267,6 @@ export function CodeMirrorEditor(props: PatchworkToolProps<TextDoc>) {
               decorations={decorations}
               baseline={() => baseline()?.heads ?? null}
               extensions={extensions()}
-              readOnly={isReadOnly}
               onChangeSelection={onChangeSelection}
               scrollTarget={scrollTarget}
             />

codemirror-markdown/src/extensions/markdown.ts

@@ -1,11 +1,6 @@
 /** CodeMirror Extensions */
 import { completionKeymap } from "@codemirror/autocomplete";
-import {
-  defaultKeymap,
-  history,
-  historyKeymap,
-  indentWithTab,
-} from "@codemirror/commands";
+import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
 import { foldKeymap, indentOnInput, indentUnit } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
@@ -15,15 +10,18 @@ import { EditorView, keymap } from "@codemirror/view";
 /** Styles */
 import { theme } from "../themes/markdown.ts";
 
+// Undo/redo (`history()`/`historyKeymap`) is deliberately absent: the base
+// editor (codemirror-base) owns it, so it can reset the stack when a scope
+// swap re-points the doc handle (see codemirror-base's history extension).
+// Adding a second `history()` here would keep the underlying singleton state
+// field alive across that reset and break it.
 export function markdownExtensions() {
   return [
     ...theme("sans"),
-    history(),
     indentOnInput(),
     keymap.of([
       ...defaultKeymap,
       ...searchKeymap,
-      ...historyKeymap,
       ...foldKeymap,
       ...completionKeymap,
       indentWithTab,

contact/src/components/InlineContactAvatar.ts

@@ -21,6 +21,7 @@ export function renderInlineContactAvatar(
 
     const isRegistered = contact.type === "registered";
     const name = isRegistered ? contact.name : "Anonymous";
+    avatar.title = name;
 
     // avatar image
     let avatarImgUrl: string | undefined;

drafts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-patchwork/drafts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
     "@automerge/automerge-repo": "^2.6.0-subduction.26",
     "@inkandswitch/patchwork-elements": "1.0.0",
     "@inkandswitch/patchwork-plugins": "^0.0.11",
-    "@inkandswitch/patchwork-providers": "0.2.2",
+    "@inkandswitch/patchwork-providers": "0.3.0",
     "@inkandswitch/patchwork-providers-solid": "0.2.3",
     "solid-automerge": "^2.0.0",
     "solid-js": "^1.9.9"