@panphora/clayjs 1.15.2 → 1.16.0

package/src/page/editor.js

@@ -6,30 +6,30 @@
 // `page` cascade layer, so a theme is one plain stylesheet that sets tokens on
 // .page-shell (and adds scoped rules where it needs to); unlayered theme rules
 // always win. Contract: plans/.../default-page/v1/look/THEME-CONTRACT.md
-import { state, view as pmView, keymap, commands, history, gapcursor, inputrules } from "../vendor/prosemirror.vendor.js";
+import { state, view as pmView, model, keymap, commands, history, gapcursor, inputrules } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { identityPlugin, docFromBlocks, blockMap, keyBetween, newId } from "./model.js";
 import { blockKeys, structurePlugin, collapsePlugin, pastePlugin, BlockSelection, STEP } from "./blocks.js";
-import { chromePlugin } from "./chrome.js";
+import { chromePlugin, slashRangePlugin } from "./chrome.js";
 import { announcementPlugin } from "./announce.js";
 import { linkPlugin } from "./link.js";
-import { blockSelectionPlugin } from "./blocksel.js";
-import { markdownPlugin, markdownKeys, backspaceToParagraph } from "./markdown.js";
+import { blockSelectionPlugin, asStep } from "./blocksel.js";
+import { markdownPlugin, markdownKeys, backspaceToParagraph, composing } from "./markdown.js";
 import { placeholderPlugin } from "./placeholder.js";
-import { mediaPlugin, ImageView, FileView } from "./media.js";
-import { highlightPlugin, CodeBlockView } from "./highlight.js";
-import { tableKeys, tablePlugin, TableView, TableCellView } from "./table.js";
+import { titlePlugin } from "./document-title-runtime.js";
+import { mediaPlugin } from "./media.js";
+import { highlightSlot } from "./highlight-slot.js";
+import { tableKeys, tablePlugin } from "./table.js";
 import { tableSelectPlugin } from "./table-select.js";
 import { chartPlugin, ChartView } from "./chart.js";
-import { BoardView } from "./board-view.js";
-import { boardPlugin, cardPanel } from "./board-panel.js";
-import { ToolView } from "./tool-view.js";
-import { createToolHost } from "./tools.js";
+import { boardPlugin } from "./board-views.js";
 import { checklistPlugin, checklistKeys } from "./checklist.js";
 import { csvImportPlugin } from "./csv-import.js";
-import { TABLE_CSS } from "./table-style.js";
-import { BOARD_CSS } from "./board-style.js";
 import { styleWithLegacyId } from "../lib/style.js";
+import { historyIntentPlugin } from "./history-intent.js";
+import { createFeatureLoader } from "./feature-loader.js";
+import { COMMAND_FEATURES, FEATURES, featureForType } from "./features/registry.js";
+import { toolViews } from "./tool-views.js";
 
 const STYLE_ID = "page-editor-style";
 const INDENTS = [1, 2, 3, 4, 5, 6, 7, 8];
@@ -126,7 +126,10 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: inherit; font: 500 13px/1 var(--page-font); cursor: pointer; }
 .page-tool:hover, .page-tool[aria-pressed="true"] { background: var(--page-pop-hover); }
 .page-tool-turn { gap: 4px; padding: 0 8px; }
+/* The phone's fourth control: everything the narrow bar folds away. */
+.page-tool-more { display: none; }
 .page-tool-sep { width: 1px; height: 16px; margin: 0 3px; background: currentColor; opacity: 0.5; }
+.page-safe-probe { position: fixed; left: 0; bottom: 0; width: 0; height: 0; padding-bottom: env(safe-area-inset-bottom); visibility: hidden; pointer-events: none; }
 .page-plus { position: absolute; z-index: 2; top: calc(var(--page-plus-top, 0px) - var(--page-plus-size) / 2); left: calc(var(--page-plus-left, 0px) - var(--page-plus-size) - 12px); width: var(--page-plus-size); height: var(--page-plus-size); display: grid; place-items: center; padding: 0; cursor: pointer; }
 .page-plus[aria-expanded="true"] { color: var(--page-chrome-ink-moved); background: var(--page-chrome-bg-moved); }
 .page-grip { position: absolute; z-index: 2; top: calc(var(--page-plus-top, 0px) - var(--page-grip-size, var(--page-plus-size)) / 2); left: calc(var(--page-plus-left, 0px) - var(--page-plus-size) - 12px - var(--page-grip-size, var(--page-plus-size)) - 2px); width: var(--page-grip-size, var(--page-plus-size)); height: var(--page-grip-size, var(--page-plus-size)); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--page-chrome-radius); background: none; color: var(--page-chrome-ink-moved); opacity: 0; cursor: grab; touch-action: none; transition: opacity var(--page-fade); }
@@ -157,40 +160,8 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-link-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
 .page-link-btn:hover { background: var(--page-pop-hover); }
 .page-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-.page-editor .page-image { margin-inline: 0; }
-.page-image-frame { position: relative; margin: 0 auto; max-width: 100%; }
-.page-image-frame img { display: block; width: 100%; height: auto; border-radius: var(--page-image-radius, 6px); }
-.page-image[data-broken] .page-image-frame { min-height: 80px; background: var(--page-code-bg); border-radius: var(--page-image-radius, 6px); }
-.page-image-handle { position: absolute; top: 50%; inset-inline-end: 6px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--page-chrome-ink-moved); opacity: 0; cursor: ew-resize; touch-action: none; transition: opacity var(--page-fade); }
-.page-image:hover .page-image-handle, .page-image.is-selected .page-image-handle { opacity: 1; }
-.page-editor .page-image.page-block-selected { background: none; box-shadow: none; }
-.page-editor .page-image.page-block-selected .page-image-frame { box-shadow: 0 0 0 6px var(--page-block-selected, rgba(88, 120, 170, 0.12)); border-radius: var(--page-image-radius, 6px); }
-.page-image[data-align="left"] .page-image-frame { margin-left: 0; margin-right: auto; }
-.page-image[data-align="right"] .page-image-frame { margin-left: auto; margin-right: 0; }
-.page-image[data-align="left"] .page-image-caption { text-align: left; }
-.page-image[data-align="right"] .page-image-caption { text-align: right; }
-.page-image-align { position: absolute; top: 8px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); box-shadow: var(--page-pop-shadow); border-radius: 7px; }
-.page-image.is-selected .page-image-align, .page-image.page-block-selected .page-image-align { display: flex; }
-.page-image-align button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
-.page-image-align button:hover, .page-image-align button[aria-pressed="true"] { background: var(--page-pop-hover); }
-.page-image.is-selected .page-image-frame img { outline: 2px solid var(--page-selection); outline-offset: 2px; }
-.page-image-caption { margin-top: 6px; color: var(--page-ink-soft); font-size: 0.88em; text-align: center; outline: none; }
-.page-image-caption[data-empty]::before { content: attr(data-placeholder); color: var(--page-ink-faint); }
 .ProseMirror-focused .page-placeholder::before { content: attr(data-placeholder); float: left; height: 0; color: var(--page-ink-faint); pointer-events: none; }
-.page-image:not(.is-selected) .page-image-caption[data-empty]:not(:focus) { display: none; }
-.page-file-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--page-rule); border-radius: 8px; color: var(--page-ink); text-decoration: none; }
-.page-file-icon { color: var(--page-link, var(--page-accent)); }
-.page-file-name { color: var(--page-link, var(--page-accent)); min-width: 0; overflow-wrap: anywhere; }
-.page-file-meta { margin-inline-start: auto; color: var(--page-ink-faint); font-size: 0.88em; }
-.page-upload { display: flex; align-items: center; gap: 10px; margin: var(--page-block-gap) 0; padding: 8px 12px; border: 1px dashed var(--page-rule); border-radius: 8px; color: var(--page-ink-soft); font-size: 0.88em; }
-.page-upload-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.6; }
-.page-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-upload-bar { flex: 1; height: 2px; border-radius: 1px; background: var(--page-rule); overflow: hidden; }
-.page-upload-bar > span { display: block; height: 100%; background: var(--page-progress, var(--page-ink-soft)); transition: width 200ms; }
-.page-upload[data-state="error"] .page-upload-msg, .page-upload[data-state="embed-choice"] .page-upload-msg { flex: 1; }
-.page-upload[data-state="error"] .page-upload-msg { color: var(--page-danger, #9E3B2F); }
-.page-upload-btn { border: 0; padding: 4px 8px; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
-.page-upload-btn:hover { background: var(--page-pop-hover); }
+.page-editor .page-title-placeholder::before { content: attr(data-placeholder); float: left; height: 0; color: var(--page-ink-faint); pointer-events: none; }
 .page-csv-error { margin: 8px 0; color: var(--page-danger); font-size: 14px; }
 .page-editor .page-table { max-width: 100%; min-width: 0; border: 1px solid var(--page-rule); border-radius: 8px; }
 .page-editor .page-chart { position: relative; max-width: 100%; min-width: 0; margin-inline: 0; color: var(--page-ink); }
@@ -198,14 +169,6 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-chart figcaption { color: var(--page-ink-soft); font-size: 0.88em; text-align: center; }
 .page-chart-settings { display: block; margin: 8px auto 0; padding: 4px 10px; border: 1px solid var(--page-rule); border-radius: 6px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; cursor: pointer; }
 .page-chart-title-input { display: block; width: min(100%, 24em); box-sizing: border-box; margin: 6px auto; padding: 4px 8px; border: 1px solid var(--page-rule); border-radius: 6px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; }
-.page-tool-block { position: relative; min-height: 48px; border: 1px solid var(--page-rule); border-radius: 8px; padding: 12px; }
-.page-tool-settings { position: absolute; top: 4px; inset-inline-end: 4px; border: 0; border-radius: 5px; background: var(--page-pop-bg); color: var(--page-ink-soft); font: 12px var(--page-font); padding: 5px 8px; cursor: pointer; opacity: 0; }
-.page-tool-block:hover .page-tool-settings, .page-tool-block:focus-within .page-tool-settings { opacity: 1; }
-.page-ai-panel { position: relative; z-index: 5; width: min(520px, 100%); box-sizing: border-box; margin: 12px auto; padding: 14px; border: 1px solid var(--page-pop-line); border-radius: 10px; background: var(--page-pop-bg); color: var(--page-pop-ink); box-shadow: var(--page-pop-shadow); }
-.page-ai-panel textarea { width: 100%; min-height: 88px; box-sizing: border-box; padding: 8px; border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; resize: vertical; }
-.page-ai-actions { display: flex; gap: 8px; margin-top: 8px; }
-.page-ai-actions button { border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; padding: 5px 10px; cursor: pointer; }
-.page-ai-status, [data-tool-note], [data-tool-error] { color: var(--page-danger); font-size: 0.85em; }
 .page-table-scroll { max-width: 100%; overflow-x: auto; }
 .page-table table { border-collapse: collapse; min-width: max-content; width: 100%; table-layout: auto; }
 .page-table th, .page-table td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
@@ -223,18 +186,31 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-check-popup { display: inline-flex; gap: 4px; padding: 4px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); border-radius: var(--page-pop-radius); box-shadow: var(--page-pop-shadow); }
 .page-check-popup input { font: inherit; color: inherit; background: var(--page-pop-bg); border: 1px solid var(--page-pop-line); }
 .page-check-popup.page-check-owner { display: inline-block; width: min(280px, 80vw); padding: 8px 0; vertical-align: top; }
+.page-board-owners { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 8px; }
+.page-board-people { display: flex; flex-wrap: wrap; gap: 4px; }
+.page-board-person { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--page-rule); border-radius: 14px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 13px; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
+.page-board-person.is-none { padding-inline-start: 10px; color: var(--page-pop-muted); }
+.page-board-person:hover { background: var(--page-pop-hover); }
+.page-board-person[aria-pressed="true"] { border-color: var(--page-accent); background: var(--page-selection); color: var(--page-pop-ink); }
+.page-board-owner-input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 14px; }
+.page-board-owner-input::placeholder { color: var(--page-ink-faint); }
+.page-board-face { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--page-code-bg); box-shadow: inset 0 0 0 1px var(--page-rule); color: var(--page-ink-soft); font-size: 10.5px; font-weight: 600; line-height: 1; }
 .page-scrim { display: none; }
 .page-shell [hidden] { display: none !important; }
-${TABLE_CSS}
-${BOARD_CSS}
 @media (max-width: 560px) {
-  .page-dock { display: none; }
+  /* One fixed bar over the visual viewport, with the four controls a phone keeps.
+     The bubble and the desktop-only tools stand down so nothing is doubled. */
+  .page-dock { display: flex; position: fixed; left: 0; top: 8px; width: 204px; min-width: 204px; box-sizing: border-box; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 8px; z-index: 3; }
+  .page-tool-desk { display: none; }
+  .page-dock .page-tool-more { display: inline-flex; }
+  .page-dock .page-tool { min-width: 44px; height: 44px; }
+  .page-shell:has(.page-bubble:not([hidden])) .page-dock { visibility: visible; }
+  .page-dock + .page-editor { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
   .page-plus { position: fixed; top: auto; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; }
-  .page-grip { position: fixed; top: auto; left: 68px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; opacity: 1; color: var(--page-chrome-ink-rest); background: var(--page-chrome-bg-rest); border: 1px solid var(--page-chrome-line-rest); }
-  .page-bubble { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; justify-content: center; gap: 4px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; background: var(--page-bar-bg); color: var(--page-bar-ink); }
-  .page-bubble .page-tool { min-width: 44px; height: 44px; }
+  .page-grip { position: fixed; top: auto; left: 68px; bottom: calc(16px + var(--page-grip-lift, 0px) + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; opacity: 1; color: var(--page-chrome-ink-rest); background: var(--page-chrome-bg-rest); border: 1px solid var(--page-chrome-line-rest); }
+  .page-bubble { display: none; }
   .page-scrim { display: block; position: fixed; inset: 0; z-index: 4; background: var(--page-scrim); }
-  .page-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70vh; z-index: 5; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: var(--page-pop-radius) var(--page-pop-radius) 0 0; border-width: 1px 0 0; }
+  .page-menu { position: fixed; left: 0; top: 0; width: var(--page-pop-width, min(280px, calc(100vw - 16px))); max-height: min(70vh, var(--page-pop-max, 70vh)); overflow-y: auto; transform: translate(var(--page-pop-x, 0px), var(--page-pop-y, 0px)); z-index: 5; }
   .page-menu-item { min-height: 48px; font-size: 16px; }
   .page-link { position: fixed; left: 0; right: 0; top: auto; bottom: 0; max-width: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; }
   .page-link-input { min-width: 0; height: 44px; font-size: 16px; }
@@ -242,9 +218,11 @@ ${BOARD_CSS}
   .page-image-frame { width: 100% !important; }
   .page-image-handle { display: none; }
   .page-table th button, .page-table-row-menu, .page-check-chip, .page-check-popup button, .page-menu-item { min-height: 44px; }
+  .page-board-owner-input { font-size: 16px; height: 44px; }
+  .page-board-person { height: 44px; border-radius: 22px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .page-dock, .page-plus, .page-grip, .page-toggle-button, .page-image-handle, .page-upload-bar > span { transition: none; }
+  .page-dock, .page-plus, .page-grip, .page-toggle-button, .page-image-handle, .page-upload-bar > span, .page-board-person { transition: none; }
 }
 }
 `;
@@ -263,30 +241,253 @@ const editKeys = ({ history: useHistory = true, undo, redo } = {}) => ({
   "Mod-i": commands.toggleMark(schema.marks.em),
 });
 
+const restoreShortcut = (st, dispatch, view) => {
+  if (composing(null, view)) return false;
+  return inputrules.undoInputRule(st, dispatch && ((tr) => dispatch(asStep(tr))));
+};
+
 const markKeys = {
-  Backspace: commands.chainCommands(inputrules.undoInputRule, backspaceToParagraph),
+  Backspace: commands.chainCommands(restoreShortcut, backspaceToParagraph),
   "Mod-e": commands.toggleMark(schema.marks.code),
   "Mod-Shift-s": commands.toggleMark(schema.marks.strike),
 };
 
 const defaultUpload = (file, options) => globalThis.clay?.upload?.(file, options) ?? Promise.resolve({ ok: false, code: "unavailable", msg: "File uploads are not available in this editor" });
 
-export function pagePlugins({ upload = defaultUpload, highlight, history: useHistory = true, undo, redo, onAiTool = null, toolHost = null } = {}) {
+const nodeViewRegistries = new WeakMap();
+
+export const lazyViewsKey = new state.PluginKey("lazyViews");
+
+// Stands in for a view part's node view until its type loads: the schema's own
+// toDOM, and an update that asks to be recreated once the real view exists.
+class PendingView {
+  constructor(node, registry) {
+    this.node = node;
+    this.type = node.type;
+    this.registry = registry;
+    const { dom, contentDOM } = model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    this.dom = dom;
+    this.contentDOM = contentDOM ?? null;
+  }
+  update(node) { return node.type === this.type && !this.registry.has(node.type.name); }
+}
+
+// Recreates only the node views of the types that just loaded: one node
+// decoration makes ProseMirror rebuild those nodes and no others.
+export function lazyViewsPlugin() {
+  return new state.Plugin({
+    key: lazyViewsKey,
+    state: {
+      init: () => pmView.DecorationSet.empty,
+      apply(tr) {
+        const meta = tr.getMeta(lazyViewsKey);
+        if (!meta) return pmView.DecorationSet.empty;
+        const decorations = [];
+        tr.doc.forEach((node, offset) => {
+          if (!meta.types.includes(node.type.name)) return;
+          decorations.push(pmView.Decoration.node(offset, offset + node.nodeSize, {}, { lazyView: decorations.length + 1 }));
+        });
+        return pmView.DecorationSet.create(tr.doc, decorations);
+      },
+    },
+    props: { decorations: (state) => lazyViewsKey.getState(state) },
+  });
+}
+
+// Adds a view part to a running editor: its CSS at once, its node views into the
+// editor's registry, and a transaction that recreates only those block types.
+export function installPageFeature({ view, upload, toolHost, board = null, undo = null, redo = null, revise = null, highlight }, id, mod) {
+  const feature = mod.createFeature({ view, upload, toolHost, board, undo, redo, revise, highlight });
+  const registry = nodeViewRegistries.get(view);
+  const apply = () => {
+    if (feature.css) styleWithLegacyId(`page-feature-${id}`, feature.css, `page-feature-${id}`, ["editor-ui"]);
+    if (!feature.nodeViews) return;
+    const types = Object.keys(feature.nodeViews);
+    for (const type of types) registry.set(type, feature.nodeViews[type]);
+    view.dispatch(view.state.tr.setMeta(lazyViewsKey, { types }).setMeta("addToHistory", false));
+  };
+  const afterComposition = () => {
+    if (view.isDestroyed) return;
+    if (view.composing) setTimeout(afterComposition, 25);
+    else apply();
+  };
+  if (view.composing) view.dom.addEventListener("compositionend", () => setTimeout(afterComposition, 25), { once: true });
+  else apply();
+  return feature;
+}
+
+// Loads the view part for a block type the editor shows but has no view for:
+// the blocks that were there at boot, and any that arrive later.
+function featureWatchPlugin(features) {
+  return new state.Plugin({
+    view(editorView) {
+      const failed = new Set();
+      const walk = () => {
+        for (const id of failed) if (features.has(id)) failed.delete(id);
+        editorView.state.doc.forEach((node) => {
+          const id = featureForType(node.type.name);
+          if (!id || features.has(id) || failed.has(id)) return;
+          features.ensure(id).catch(() => { failed.add(id); });
+        });
+      };
+      let doc = editorView.state.doc;
+      walk();
+      return {
+        update() {
+          if (editorView.state.doc === doc) return;
+          doc = editorView.state.doc;
+          walk();
+        },
+      };
+    },
+  });
+}
+
+// The optional commands. A command module exports `createFeature(context)` returning
+// `{ run, dispose }`; the editor fetches it on the first ask and installs it once, and
+// nothing here is preloaded by the block-type scan. A command is asked for with the state
+// it was asked in: the module is fetched, and the command runs only if the edit is still
+// open, the document revision has not moved and the selection is where it was. A failed
+// fetch is reported and asked for again on the next request; an exit disposes what was
+// installed and aborts whatever was still arriving, and the next entry installs fresh
+// against the module the browser already holds.
+function createCommandHost({ load = () => Promise.reject(new Error("page: this editor has no command module")), context = () => ({}), reportError } = {}) {
+  const modules = new Map();
+  const waiters = new Set();
+  let view = null;
+  let loader = null;
+  let active = true;
+  let disposed = false;
+  let revision = 0;
+
+  // One fetch per command for the life of the host, whatever the entry: a module that
+  // failed is the one thing not kept, so the next ask loads it again.
+  const moduleFor = (id) => {
+    let fetched = modules.get(id);
+    if (!fetched) {
+      fetched = Promise.resolve(load(id));
+      modules.set(id, fetched);
+      fetched.catch(() => { if (modules.get(id) === fetched) modules.delete(id); });
+    }
+    return fetched;
+  };
+
+  const loaderFor = () => {
+    loader ??= createFeatureLoader({
+      load: moduleFor,
+      install: (id, mod) => mod.createFeature(context(view)),
+      reportError: reportError ?? ((error, id) => console.error(`clayjs: the ${id} command failed to load`, error)),
+    });
+    return loader;
+  };
+
+  // The document revision and the selection a command was asked for. A revision moves
+  // when any transaction changes the document, whoever wrote it.
+  const leaseOf = () => {
+    const at = revision;
+    const selection = view.state.selection;
+    return {
+      revision: at,
+      selection,
+      valid: () => active && !disposed && !view.isDestroyed && revision === at && view.state.selection.eq(selection),
+    };
+  };
+
+  function observe(state, prevState) {
+    if (state.doc !== prevState.doc) revision += 1;
+    for (const waiter of waiters) {
+      if (waiter.lease.valid()) continue;
+      waiters.delete(waiter);
+      waiter.controller.abort({ ok: false, code: "stale-target" });
+    }
+  }
+
+  async function run(id, args) {
+    if (!active || disposed || !view || view.isDestroyed) return { ok: false, code: "not-editing" };
+    const waiter = { lease: leaseOf(), controller: new AbortController() };
+    waiters.add(waiter);
+    try {
+      const feature = await loaderFor().ensure(id, { signal: waiter.controller.signal });
+      if (!feature) return { ok: false, code: "not-editing" };
+      if (!waiter.lease.valid()) return { ok: false, code: "stale-target" };
+      return await feature.run(args);
+    } catch (error) {
+      if (waiter.controller.signal.aborted) return waiter.controller.signal.reason;
+      return { ok: false, code: "unavailable", error };
+    } finally {
+      waiters.delete(waiter);
+    }
+  }
+
+  function leave() {
+    if (!active) return;
+    active = false;
+    for (const waiter of waiters) waiter.controller.abort({ ok: false, code: "not-editing" });
+    waiters.clear();
+    loader?.dispose();
+    loader = null;
+  }
+
+  return {
+    attach(editorView) { view = editorView; },
+    observe,
+    run,
+    enter() { if (!disposed) active = true; },
+    leave,
+    dispose() {
+      leave();
+      disposed = true;
+      active = false;
+      modules.clear();
+    },
+  };
+}
+
+const commandHosts = new WeakMap();
+// A command asks for its module with the state it was asked in, so the host has to hear
+// about every transaction: one that moves the document revision or the selection refuses
+// a command whose module is still arriving rather than running it where the person has
+// since left.
+function commandWatchPlugin(host) {
+  return new state.Plugin({
+    view: () => ({ update: (editorView, prevState) => host.observe(editorView.state, prevState) }),
+  });
+}
+
+// Runs an optional command on a mounted editor, by the id its row has in COMMAND_FEATURES.
+// A command nobody offers, or an editor with no command host, refuses rather than throws.
+export function runPageCommand(view, id, args) {
+  const host = view ? commandHosts.get(view) : null;
+  if (!host) return Promise.resolve({ ok: false, code: "not-editing" });
+  if (!Object.hasOwn(COMMAND_FEATURES, id)) return Promise.resolve({ ok: false, code: "unknown-command" });
+  return host.run(id, args);
+}
+
+// Tools follow the tables a document holds; the host arrives with the tool view
+// part on a document that had no tool at boot.
+function toolFollowPlugin(toolHost) {
+  return new state.Plugin({
+    view(view) {
+      const changed = toolHost ? () => toolHost.tablesChanged() : () => toolViews.get(view)?.tablesChanged?.();
+      let previous = view.state.doc;
+      return { update(next) { if (next.state.doc !== previous) { previous = next.state.doc; changed(); } } };
+    },
+  });
+}
+
+export function pagePlugins({ upload = defaultUpload, highlight, history: useHistory = true, undo, redo, onAiTool = null, toolHost = null, features = null, commandHost = null } = {}) {
   return [
     announcementPlugin(),
     chromePlugin({ onAiTool }),
-    toolHost && new state.Plugin({
-      view(view) {
-        let previous = view.state.doc;
-        return { update(next) { if (next.state.doc !== previous) { previous = next.state.doc; toolHost.tablesChanged(); } } };
-      },
-    }),
+    slashRangePlugin(),
+    toolFollowPlugin(toolHost),
     linkPlugin(),
     tableSelectPlugin(),
     blockSelectionPlugin(),
     markdownPlugin(),
     markdownKeys(),
     placeholderPlugin(),
+    titlePlugin(),
     keymap.keymap(markKeys),
     tableKeys,
     checklistKeys,
@@ -301,11 +502,15 @@ export function pagePlugins({ upload = defaultUpload, highlight, history: useHis
     checklistPlugin(),
     csvImportPlugin({ upload }),
     collapsePlugin(),
-    mediaPlugin({ upload }),
-    highlightPlugin(highlight),
+    mediaPlugin({ upload, features }),
+    highlightSlot(),
     pastePlugin(),
+    historyIntentPlugin(),
     useHistory ? history.history() : null,
     gapcursor.gapCursor(),
+    lazyViewsPlugin(),
+    features ? featureWatchPlugin(features) : null,
+    commandHost ? commandWatchPlugin(commandHost) : null,
   ].filter(Boolean);
 }
 
@@ -315,6 +520,29 @@ export function pageState(blocks, options = {}) {
   return state.EditorState.create({ doc, plugins: pagePlugins(options) });
 }
 
+// The shell is built detached and moved into the article once it is complete, so
+// the node views in it measured nothing while it was out of the document. One pass
+// in place gives them a real box: the state is the same object it was, and no node
+// view is rebuilt for it.
+export function refreshMountedView(view) {
+  if (!view || view.isDestroyed) return;
+  view.updateState(view.state);
+}
+
+// Admission on a mounted editor, in one place: the commit that enters edit opens it,
+// and the exit that holds the session closed shuts it without touching a buffer.
+export function setEditorActive(view, active) {
+  if (!view || view.isDestroyed) return false;
+  const open = active === true;
+  view.setProps({ editable: () => open });
+  // A refused exit closes admission without destroying the view, so the commands are told
+  // here: the exit disposes what they installed, and the next entry installs fresh.
+  const host = commandHosts.get(view);
+  if (open) host?.enter();
+  else host?.leave();
+  return open;
+}
+
 // Clicking a checklist box (drawn by ::before in the item's start gutter)
 // toggles `checked`.
 function checkboxClick(view, event) {
@@ -335,9 +563,8 @@ function checkboxClick(view, event) {
 // Mounts the editor in `mount`, inside a .page-shell wrapper (the surface a
 // theme styles). `onChange(record)` gets the block record (blockMap) after
 // every transaction that changed the document.
-export function createPageEditor(mount, { blocks = null, onChange = null, upload, highlight, doc: initialDoc, dispatch, history: useHistory = true, undo, redo, editable = true, toolHost: providedToolHost = null, onAiTool = null, reviseTool = null, board = null } = {}) {
+export function createPageEditor(mount, { blocks = null, onChange = null, upload, highlight, doc: initialDoc, dispatch, history: useHistory = true, undo, redo, editable = true, toolHost = null, onAiTool = null, reviseTool = null, board = null, features: providedFeatures = null } = {}) {
   const doc = mount.ownerDocument;
-  const toolHost = providedToolHost ?? createToolHost({ mode: "edit" });
   // Editor chrome, injected on every edit-mode boot and kept out of the saved file:
   // the reader theme <link> styles the page for visitors.
   styleWithLegacyId(STYLE_ID, PAGE_EDITOR_CSS, STYLE_ID, ["editor-ui"]);
@@ -347,20 +574,32 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
   shell.setAttribute("sap-ignore", "");
   mount.appendChild(shell);
   let afterStep = false;
-  const view = new pmView.EditorView(shell, {
-    state: pageState(blocks, { upload, highlight, doc: initialDoc, history: useHistory, undo, redo, onAiTool, toolHost }),
+  let view = null;
+  const features = providedFeatures ?? createFeatureLoader({
+    load: (id) => FEATURES[id].load(),
+    install: (id, mod) => installPageFeature({ view, upload, toolHost, board, undo, redo, revise: reviseTool, highlight }, id, mod),
+  });
+  // Commands are their own loader: a document never fetches a picker to be read or typed
+  // in, and the host outlives a refused exit so a re-entry installs once more.
+  const commandHost = createCommandHost({
+    load: (id) => COMMAND_FEATURES[id].load(),
+    context: (editorView) => ({ view: editorView, upload }),
+  });
+  const nodeViewRegistry = new Map();
+  const nodeViews = {
+    chart: (node, v, getPos) => new ChartView(node, v, getPos),
+  };
+  for (const feature of Object.values(FEATURES)) for (const type of feature.views ?? feature.types) {
+    nodeViews[type] = (node, v, getPos, decorations, inner) => {
+      const make = nodeViewRegistry.get(node.type.name);
+      return make ? make(node, v, getPos, decorations, inner) : new PendingView(node, nodeViewRegistry);
+    };
+  }
+  view = new pmView.EditorView(shell, {
+    state: pageState(blocks, { upload, highlight, doc: initialDoc, history: useHistory, undo, redo, onAiTool, toolHost, features, commandHost }),
     attributes: { class: "page-editor" },
     editable: () => editable,
-    nodeViews: {
-      image: (node, v, getPos) => new ImageView(node, v, getPos),
-      file: (node, v) => new FileView(node, v),
-      code_block: (node, v, getPos) => new CodeBlockView(node, v, getPos),
-      table: (node, v, getPos) => new TableView(node, v, getPos),
-      chart: (node, v, getPos) => new ChartView(node, v, getPos),
-      tool: (node, v, getPos) => new ToolView(node, v, getPos, { host: toolHost, revise: reviseTool }),
-      table_cell: (node, v, getPos) => new TableCellView(node, v, getPos),
-      ...(board ? { board: (node, v, getPos) => new BoardView(node, v, getPos, { commands: board, undo, redo, panel: cardPanel(v) }) } : {}),
-    },
+    nodeViews,
     handleDOMEvents: {
       mousedown: checkboxClick,
       dragstart(v, event) {
@@ -382,5 +621,10 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
       if (onChange && view.state.doc !== before) onChange(blockMap(view.state.doc));
     },
   });
+  nodeViewRegistries.set(view, nodeViewRegistry);
+  commandHost.attach(view);
+  commandHosts.set(view, commandHost);
+  const destroy = view.destroy.bind(view);
+  view.destroy = () => { commandHost.dispose(); features.dispose(); destroy(); };
   return view;
 }

package/src/page/feature-loader.js

@@ -0,0 +1,72 @@
+// Optional editor features load the first time a document needs them. One import per
+// feature; a caller's abort stops only its own wait; dispose() makes late results inert.
+export function createFeatureLoader({ load, install, reportError = (error) => console.error("clayjs: an editor feature failed to load", error) }) {
+  const installed = new Map();
+  const pending = new Map();
+  const prepared = new Map();
+  let disposed = false;
+
+  // A preparation fetches the module without installing it, so the boot can overlap
+  // that fetch with the room join. The install that follows consumes this same
+  // import: a feature is fetched once, and a failed fetch is that attempt. The next
+  // ensure after it loads again through the loader's reporting and the feature's
+  // Retry.
+  function prepare(id) {
+    if (disposed) return Promise.reject(new Error(`page: feature loader disposed before ${id}`));
+    let shared = prepared.get(id);
+    if (!shared) {
+      shared = Promise.resolve(load(id));
+      prepared.set(id, shared);
+      // The install reports the failure; this keeps an unconsumed preparation quiet.
+      shared.catch(() => {});
+    }
+    return shared;
+  }
+
+  function loadFor(id) {
+    const fetched = prepared.get(id);
+    if (!fetched) return load(id);
+    prepared.delete(id);
+    return fetched;
+  }
+
+  function ensure(id, { signal } = {}) {
+    if (disposed) return Promise.reject(new Error(`page: feature loader disposed before ${id}`));
+    if (installed.has(id)) return Promise.resolve(installed.get(id));
+    let shared = pending.get(id);
+    if (!shared) {
+      shared = loadFor(id)
+        .then((mod) => (disposed ? null : Promise.resolve(install(id, mod))))
+        .then((feature) => {
+          if (disposed) {
+            feature?.dispose?.();
+            return feature;
+          }
+          installed.set(id, feature);
+          return feature;
+        });
+      shared.catch((error) => { if (!disposed) reportError(error, id); }).finally(() => pending.delete(id));
+      pending.set(id, shared);
+    }
+    if (!signal) return shared;
+    if (signal.aborted) return Promise.reject(signal.reason);
+    return new Promise((resolve, reject) => {
+      const onAbort = () => reject(signal.reason);
+      signal.addEventListener("abort", onAbort, { once: true });
+      shared.then(resolve, reject).finally(() => signal.removeEventListener("abort", onAbort));
+    });
+  }
+
+  return {
+    prepare,
+    ensure,
+    has: (id) => installed.has(id),
+    dispose() {
+      disposed = true;
+      for (const feature of installed.values()) feature?.dispose?.();
+      installed.clear();
+      pending.clear();
+      prepared.clear();
+    },
+  };
+}

package/src/page/features/board.js

@@ -0,0 +1,12 @@
+import { BOARD_CSS } from "../board-style.js";
+import { BoardView } from "../board-view.js";
+import { cardPanel } from "../board-panel.js";
+
+export function createFeature({ board = null, undo = null, redo = null } = {}) {
+  return {
+    id: "board",
+    nodeViews: board ? { board: (node, view, getPos) => new BoardView(node, view, getPos, { commands: board, undo, redo, panel: cardPanel(view) }) } : null,
+    css: board ? BOARD_CSS : null,
+    dispose() {},
+  };
+}

package/src/page/features/code.js

@@ -0,0 +1,13 @@
+// Code blocks: their language picker and the syntax colours. Loaded the first
+// time a document has or takes a code block.
+import { CodeBlockView, startHighlighter } from "../highlight.js";
+
+export function createFeature({ view = null, highlight = {} } = {}) {
+  const highlighter = view ? startHighlighter(view, highlight) : null;
+  return {
+    id: "code",
+    nodeViews: { code_block: (node, v, getPos) => new CodeBlockView(node, v, getPos) },
+    css: null,
+    dispose() { highlighter?.destroy(); },
+  };
+}