@openpresentation/opf-editor 0.26.0 → 0.26.1

package/README.md

@@ -76,9 +76,9 @@ control.destroy();
 
 The host owns the source draft, OPF validation, slide preview, persistence and session history. `onChange` includes invalid JSON while typing; keep the last valid preview until the draft validates. `update` applies external source without emitting `onChange` or creating a local undo step. It preserves unrelated edits through CodeMirror's history mapping; it is not a collaboration/conflict-resolution protocol. Importing either entrypoint does not require a DOM; mounting requires an existing browser container.
 
-The control provides indentation, paired quotes/brackets, folding shortcuts, search, undo/redo, JSON syntax diagnostics and explicit formatting (`Cmd/Ctrl+Shift+F`). Enter at the end of a nonempty string array item supplies indentation, quotes and commas. Other Enter positions use ordinary JSON indentation. Source offsets are UTF-16 in the original authored string. Existing CRLF, CR and LF spellings survive ordinary edits and undo; new typed lines use the first existing separator. Paste retains the text delivered by the browser clipboard event. Explicit formatting deliberately standardizes whitespace, preserving JSON values and numeric lexemes.
+The control provides indentation, paired quotes/brackets, folding shortcuts, search, undo/redo, JSON syntax diagnostics, multiple cursors and explicit formatting (`Shift+Alt+F` or `Cmd/Ctrl+Shift+F`, also while the JSON does not parse). Its keys follow VS Code (see Keyboard below). Enter at the end of a nonempty string array item supplies indentation, quotes and commas. Other Enter positions use ordinary JSON indentation. Source offsets are UTF-16 in the original authored string. Existing CRLF, CR and LF spellings survive ordinary edits and undo; new typed lines use the first existing separator. Paste retains the text delivered by the browser clipboard event. Explicit formatting deliberately standardizes whitespace, preserving JSON values and numeric lexemes.
 
-Click a categorical property/value or press `Ctrl+Space`, `Cmd+Space` or `Alt+Down` to open its choices. Records the document embeds come first, then those of the catalogs the host passes as `catalogs` (`Catalog[]`, the session's registered list); there are no built-in records. The actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs(list)` replaces the host's catalogs and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI.
+Press `Alt+Shift+O` (and, with `completions` off, `Ctrl+Space`) to open the choices of the categorical property or value at the caret; clicking a value only places the caret. Records the document embeds come first, then those of the catalogs the host passes as `catalogs` (`Catalog[]`, the session's registered list); there are no built-in records. The actual schema supplies enums and booleans. Prose and extension fields do not gain menus just because their keys resemble schema fields. External catalog URLs are not fetched. `setCatalogs(list)` replaces the host's catalogs and closes stale choices. Supply `onOptions(left?, top?)` to retain an existing menu UI.
 
 In OPF 0.19, layout choices change only the template reference and preserve authored content. Empty regions remain available for explicit insertion; choosing a template does not invent blank payloads. The JSON field menu groups templates by intent and describes their supported regions. Hosts apply `replaceFieldOption` or `fieldOptionEdit(context, value)` as one undoable edit and check that `context.source` is still current.
 
@@ -116,13 +116,15 @@ Methods: `replaceDocument(document, { source?, format?, name?, meta? })` (below)
 - **Keyboard Undo and Redo in the pane (one model).** Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z (Ctrl+Y) work in two layers, in this order. First CodeMirror's history, which holds only the text typed in the pane since its last whole-document change (a `replaceDocument`, or a session Undo, Redo or restore, each of which clears it because the typed edits no longer fit the text). When that has nothing left, the key steps the session over a whole-document replace, exactly as its Undo and Redo do, so the text comes back byte for byte: Undo steps back over the nearest `replaceDocument` together with the pane's own edits typed on it (the typing was already undone, step by step, by CodeMirror's history); Redo steps forward over the replace. The key never reaches over an edit made elsewhere (the canvas, a panel): Undo stops at it, and the host's Undo button (or `editor.undo()`) undoes that edit, after which the key reaches the load again. A read-only pane takes neither key. `mountJsonCodeEditor` exposes the same seam as `historyFallback: { undo(), redo() }` (answer `true` when you did something) plus `resetHistory()` and `undoDepth()` on the control.
 - **JSON is canonical** and keeps the author's bytes: a YAML or Markdown edit rewrites only the changed JSON tokens (`exact-source`), and Undo restores the exact spelling.
 - **YAML and Markdown** are core's browser-safe converters, `@openpresentation/opf/yaml` and `/markdown`. Switching format writes the session's document in the new format. An edit parses back to the document and reaches the session as one `replace` patch, after a short delay (`applyDelay`, default 250 ms) so one burst of typing is one undo step. A syntax error, or an OPF rule the session refuses, is listed with its line and never reaches the document; Undo, Redo and outside edits replace a draft that did not parse.
-- **Nothing is lost silently.** Markdown writes what its dialect has no syntax for (a `design`, region keys, nested groups) as YAML in `opf-slide` and `opf-block` fences; each such part is a warning finding with its JSON Pointer and reason. Comments in YAML cannot survive a rewrite from the document: Format and outside edits drop them and say how many. A document that is not valid OPF cannot be written as YAML or Markdown; the pane stays in JSON and says so.
-- **Completions.** In JSON the pane offers property names and values as you type (`completions: false` keeps the field menu only): the keys the schema allows at the cursor's object, and the enum, boolean and catalog values of the field, from the same data as the field menu (`getJsonCompletions` in `/json-options`, which reads drafts that do not parse yet). Enter accepts, Escape closes, and Ctrl+Space or Alt+ArrowDown still open the field menu. YAML and Markdown keep the menu only. `mountJsonCodeEditor` takes the same `completions` option, off by default there.
+- **Nothing is lost silently.** Markdown writes what its dialect has no syntax for (a `design`, region keys, nested groups) as YAML in `opf-slide` and `opf-block` fences; each such part is a warning finding with its JSON Pointer and reason. Comments in YAML cannot survive a rewrite from the document: outside edits drop them and say how many. Format (below) never rewrites from the document, so it keeps them. A document that is not valid OPF cannot be written as YAML or Markdown; the pane stays in JSON and says so.
+- **Completions.** In JSON the pane offers property names and values as you type (`completions: false` keeps the field menu only): the keys the schema allows at the cursor's object, and the enum, boolean and catalog values of the field, from the same data as the field menu (`getJsonCompletions` in `/json-options`, which reads drafts that do not parse yet). Tab and Enter accept the selected item (at once, right after a keystroke too), Escape closes the list, and Ctrl+Space (Cmd+I on macOS) opens it, also right after a finished string. With several cursors the list stays closed. YAML and Markdown have no completions yet. `mountJsonCodeEditor` takes the same `completions` option, off by default there.
+- **Keyboard.** The keys are VS Code's. `Tab` accepts a suggestion when the list is open; otherwise it inserts spaces up to the next tab stop (replacing a selection inside one line; a selection over several lines, or a whole line, is indented line by line) and `Shift+Tab` outdents the line. The indentation unit is the document's (JSON: read once when a document is opened, two spaces if nothing is indented, or a tab; YAML and Markdown: two spaces) and typing never changes it. `Alt+Up` and `Alt+Down` move the line, `Shift+Alt+Up` and `Shift+Alt+Down` copy it, `Cmd/Ctrl+Shift+K` deletes it. `Cmd/Ctrl+D` adds the next occurrence, `Cmd/Ctrl+Shift+L` all of them, `Cmd/Ctrl+Alt+Up` and `Down` a cursor above or below, `Alt+click` a cursor, `Shift+Alt+drag` a column; `Escape` goes back to one cursor. The field menu (a searchable dialog of the choices of one field) is on `Alt+Shift+O`; `Tab` and `Shift+Tab` stay inside it and `Escape` returns to the editor. A paste inserts the clipboard text as it is, however many lines it has.
+- **Format document.** `Shift+Alt+F` (and `Cmd/Ctrl+Shift+F`) and the Format button do the same in JSON, YAML and Markdown, and change whitespace only, as one undo step with the cursor kept on its token. JSON is laid out token by token with the document's indentation, also while it does not parse; YAML keeps its comments, blank lines, quote styles, number spellings and key order (the pane says so and does nothing when the YAML has errors); Markdown gets at most one blank line between blocks (code fences untouched), its front matter formatted as YAML, and one newline at the end. A format that would change the document is refused. The pane does not rewrite the text from the document (`toYaml`, `toMarkdown`) any more, so it no longer drops comments.
 - **Accessibility.** The editor's `aria-invalid` is `true` while the findings include an error and `false` otherwise. The format button (`aria-label="Source format"`) opens a `role="menu"` of `menuitemradio` items: Arrow keys, Home, End, Enter, Escape (focus returns to the button) and Tab. The file name is a button that becomes a text input; Enter or Escape commits. Controls show a 2px `--opf-ui-ring` focus outline.
 - **Styles.** `src/styles/source-pane.css` uses only `--opf-ui-*` tokens under the `opf-source-` prefix. It ships in the editor's `styles.css` (`@openpresentation/opf-editor/styles.css`), which also defines the tokens.
-- **Dependency.** `@codemirror/lang-yaml` (MIT) highlights YAML; Markdown uses a small stream tokenizer built on `@codemirror/language`, so no Markdown, HTML, CSS or JavaScript grammar is added.
+- **Dependency.** `yaml` (ISC; core already depends on it) formats YAML while keeping its comments. `@codemirror/lang-yaml` (MIT) highlights YAML; Markdown uses a small stream tokenizer built on `@codemirror/language`, so no Markdown, HTML, CSS or JavaScript grammar is added.
 
-Icons are inline paths from [Lucide](https://lucide.dev) (ISC license). The harness is `examples/source-pane.html` (built by `pnpm run build:playground`); `pnpm run test:source-pane-browser` drives it.
+Icons are inline paths from [Lucide](https://lucide.dev) (ISC license). The harness is `examples/source-pane.html` (built by `pnpm run build:playground`); `pnpm run test:source-pane-browser` drives it, and `pnpm run test:source-keyboard-browser` runs the keyboard cases (real key events; `OPF_BROWSER_ENGINE=webkit` and `OPF_KEYBOARD_PLATFORM=win32|linux|darwin` pick the browser and the key map).
 
 ## Layout editor (RR-99)
 

package/dist/json-editor.d.ts

@@ -7,10 +7,18 @@ export interface JsonEditorApi {
   hasFocus(): boolean;
   focus(): void;
   setSelection(from: number, to?: number): void;
-  /** Replace one source range atomically; boundaries inside CRLF are rejected. */
-  replace(from: number, to: number, text: string): void;
+  /**
+   * Replace one source range atomically; boundaries inside CRLF are rejected. The cursor moves to the end of the inserted text unless
+   * `keepSelection` is set. `userEvent` names the edit (default `"input.replace"`; a paste uses `"input.paste"`): it must not be
+   * `"input.type"` or `"input.complete"`, which re-indent the inserted lines.
+   */
+  replace(from: number, to: number, text: string, options?: { keepSelection?: boolean; userEvent?: string }): void;
+  /** Replace the whole text with `text` as one undoable edit; only what differs changes, and a whitespace-only difference (a format) is one change per run of whitespace, so the cursor stays on its token. */
+  replaceDiff(text: string): void;
+  /** The indentation unit now in effect: a tab character or some spaces (JSON: read once when a document is opened; YAML and Markdown: two spaces). */
+  indentUnit(): string;
   coordinates(): { left: number; top: number };
-  /** Explicit, undoable whitespace formatting; returns false for invalid JSON. */
+  /** Explicit, undoable whitespace formatting of JSON, also while it does not parse; returns false in YAML and Markdown (the source pane formats those). */
   format(): boolean;
 }
 export interface JsonCodeEditorOptions {
@@ -23,7 +31,11 @@ export interface JsonCodeEditorOptions {
   /** Highlighting and behavior: "json" (default) adds the parse linter, field highlights and the option menu. */
   language?: "json" | "yaml" | "markdown";
   readOnly?: boolean;
-  /** Live completion popup in JSON: property names and enum, boolean and catalog values at the cursor's JSON path, from the same data as the field menu (default false here; the source pane turns it on). Ctrl+Space still opens the field menu. */
+  /**
+   * Live completion list in JSON: property names and enum, boolean and catalog values at the cursor's JSON path, from the same data as the field
+   * menu (default false here; the source pane turns it on). Tab and Enter accept the selected item, Escape closes the list, and Ctrl+Space (Cmd+I on
+   * macOS) opens it. The field menu is on Alt+Shift+O; with `completions` off it is also on Ctrl+Space.
+   */
   completions?: boolean;
   catalogs?: JsonCatalogContext;
   /** Overrides the built-in menu, allowing an existing host UI to keep its appearance. */
@@ -34,6 +46,11 @@ export interface JsonCodeEditorOptions {
    * whole-document replace.
    */
   historyFallback?: { undo?(): boolean; redo?(): boolean };
+  /**
+   * Format document (Shift+Alt+F and Cmd/Ctrl+Shift+F). The source pane passes one that formats JSON, YAML and Markdown; without it the keys
+   * format JSON only.
+   */
+  onFormat?(): void;
   onFocus?(): void;
   onHoverField?(path: string | null): void;
   onError?(error: unknown): void;

package/dist/json-editor.js

@@ -1,16 +1,17 @@
-import { Annotation, Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField, Transaction } from "@codemirror/state";
-import { Decoration, EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
-import { defaultKeymap, history, historyKeymap, indentWithTab, isolateHistory, redo, undo, undoDepth } from "@codemirror/commands";
+import { Annotation, ChangeSet, Compartment, EditorSelection, EditorState, Prec, StateEffect, StateField, Transaction, countColumn } from "@codemirror/state";
+import { Decoration, EditorView, crosshairCursor, drawSelection, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap, indentLess, indentMore, insertNewlineAndIndent, isolateHistory, redo, undo, undoDepth } from "@codemirror/commands";
 import { HighlightStyle, StreamLanguage, bracketMatching, codeFolding, foldKeymap, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
-import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, startCompletion } from "@codemirror/autocomplete";
+import { acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, completionStatus, moveCompletionSelection, startCompletion } from "@codemirror/autocomplete";
 import { highlightSelectionMatches, search, searchKeymap } from "@codemirror/search";
 import { linter } from "@codemirror/lint";
 import { tags } from "@lezer/highlight";
-import { applyEdits, findNodeAtOffset, format, getNodePath, parseTree } from "jsonc-parser";
+import { findNodeAtOffset, getNodePath, parseTree } from "jsonc-parser";
 import {jsonSource,jsonSourceHistory,setJsonSource} from './json-source.js';
-import {textInputMap,preferredLineEnding} from './text-input.js';
+import {textInputMap} from './text-input.js';
+import {detectIndent,formatJsonSource,whitespaceEdits} from './json-format.js';
 const external = Annotation.define();
 const hoverField = StateEffect.define();
 const activeField = StateField.define({ create: () => null, update: (value, tr) => tr.effects.reduce((value2, effect) => effect.is(hoverField) ? effect.value : value2, value) });
@@ -70,24 +71,83 @@ function languageExtension(name, completions) {
   if (name === "markdown") return markdownLanguage;
   return [json(), linter(jsonParseLinter(), { delay: 500 }), fieldDecorations, completions ?? []];
 }
-// The completion popup keeps CodeMirror's keys (arrows, Enter, Escape) but not Ctrl-Space, which opens the field menu.
-const completionKeys = Prec.highest(keymap.of(completionKeymap.filter((binding) => binding.run !== startCompletion)));
+// Tab or Enter pressed right after a keystroke can arrive before the completion query that keystroke started has answered (with the data
+// loaded it answers within a task or two). Accepting then waits for the answer instead of inserting whitespace or a line over a list that is
+// about to open; when no list comes, `fallback` does what the key does without a list.
+function acceptOrFallBack(isReady, fallback) {
+  return (view) => {
+    if (acceptCompletion(view)) return true;
+    if (completionStatus(view.state) !== "pending" || !isReady()) return false;
+    let tries = 0;
+    const settle = () => {
+      if (!view.dom.isConnected) return;
+      if (completionStatus(view.state) === "pending" && ++tries < 50) { setTimeout(settle, 2); return; }
+      if (!acceptCompletion(view)) fallback(view);
+    };
+    setTimeout(settle, 0);
+    return true;
+  };
+}
+// Completion keys, as in VS Code: Tab and Enter accept the selected suggestion, Escape closes the list, Ctrl+Space (and Cmd+I on macOS) opens it
+// wherever the schema has something to offer, and the arrows, the Page keys and Ctrl+N and Ctrl+P (macOS) move the selection. Without a list,
+// none of them is taken: Tab then inserts whitespace and Enter inserts a line.
+function completionKeys(isReady) {
+  return Prec.highest(keymap.of([
+    ...completionKeymap.filter((binding) => binding.key !== "Enter"),
+    { key: "Enter", run: acceptOrFallBack(isReady, (view) => nextStringItem(view) || insertNewlineAndIndent(view)) },
+    { key: "Tab", run: acceptOrFallBack(isReady, tabCommand) },
+    { mac: "Mod-i", run: startCompletion },
+    { mac: "Ctrl-n", run: moveCompletionSelection(true) },
+    { mac: "Ctrl-p", run: moveCompletionSelection(false) },
+  ]));
+}
 // Accept a completion by rewriting its whole token (quotes included), so a string key, a bare word and a changed value type all land
-// as valid JSON. A key adds ": " when none follows and then offers the values of that key.
+// as valid JSON. A key adds ": " when none follows and then offers the values of that key. The quotes are read from the text when the
+// completion is applied, because the list is reused while the author keeps typing the same token.
 function completionApply(found, option) {
   return (view, completion, from, to) => {
-    const start = found.quoted ? from - 1 : from;
-    const end = found.closed ? to + 1 : to;
+    const { state } = view;
+    const start = found.quoted && state.sliceDoc(from - 1, from) === '"' ? from - 1 : from;
+    const end = found.quoted && state.sliceDoc(to, to + 1) === '"' ? to + 1 : to;
     let insert = JSON.stringify(option.value);
-    const chain = found.kind === "key" && !/^\s*:/.test(view.state.sliceDoc(end, Math.min(view.state.doc.length, end + 200)));
+    const chain = found.kind === "key" && !/^\s*:/.test(state.sliceDoc(end, Math.min(state.doc.length, end + 200)));
     if (chain) insert += ": ";
     view.dispatch({ changes: { from: start, to: end, insert }, selection: { anchor: start + insert.length }, userEvent: "input.complete", scrollIntoView: true });
     if (chain) setTimeout(() => startCompletion(view), 0);
   };
 }
-function indentation(source) {
-  const spaces = source.match(/^[\t ]+(?=\S)/gm) ?? [];
-  return spaces.some((value) => value.includes("	")) ? "	" : " ".repeat(spaces.length ? Math.min(8, ...spaces.map((value) => value.length)) : 2);
+// A quoted token keeps its list for any text between the quotes; a bare word for word characters only.
+const QUOTED_TEXT = /^[^"\\\n\r]*$/;
+const WORD_TEXT = /^[A-Za-z0-9_.-]*$/;
+const DEFAULT_INDENT = "  ";
+const tabWidth = (unit) => (unit === "\t" ? 4 : unit.length);
+// Tab without a completion list (VS Code's `tab`): whitespace goes in at the caret, up to the next tab stop, and replaces a selection inside
+// one line; a selection over several lines, or one line in full, is indented line by line. Every selection range does the same.
+function tabCommand(view) {
+  const { state } = view;
+  if (state.readOnly) return false;
+  const unit = state.facet(indentUnit), size = state.tabSize;
+  const lineWise = state.selection.ranges.some((range) => {
+    if (range.empty) return false;
+    const first = state.doc.lineAt(range.from), last = state.doc.lineAt(range.to);
+    return first.number !== last.number || (range.from === first.from && range.to === first.to && first.length > 0);
+  });
+  if (lineWise) {
+    // Indent the lines; a selection that began at the start of its line still does, so it keeps covering whole lines.
+    const wholeStart = state.selection.ranges.map((range) => !range.empty && range.from === state.doc.lineAt(range.from).from);
+    if (!indentMore(view)) return false;
+    const after = view.state.selection;
+    view.dispatch({ selection: EditorSelection.create(after.ranges.map((range, index) => (wholeStart[index] ? EditorSelection.range(view.state.doc.lineAt(range.from).from, range.to) : range)), after.mainIndex) });
+    return true;
+  }
+  const change = state.changeByRange((range) => {
+    const line = state.doc.lineAt(range.from);
+    const column = countColumn(state.sliceDoc(line.from, range.from), size);
+    const insert = unit === "\t" ? "\t" : " ".repeat(unit.length - (column % unit.length));
+    return { changes: { from: range.from, to: range.to, insert }, range: EditorSelection.cursor(range.from + insert.length) };
+  });
+  view.dispatch(state.update(change, { scrollIntoView: true, userEvent: "input" }));
+  return true;
 }
 function sourceDecorations(state) {
   const ranges = [];
@@ -139,7 +199,7 @@ function nextStringItem(view) {
   const line = state.doc.lineAt(node.offset);
   const existingIndent = /^\s*/.exec(line.text)[0];
   const parentLine = state.doc.lineAt(node.parent.offset);
-  const indent = line.number === parentLine.number ? /^\s*/.exec(parentLine.text)[0] + indentation(source) : existingIndent;
+  const indent = line.number === parentLine.number ? /^\s*/.exec(parentLine.text)[0] + state.facet(indentUnit) : existingIndent;
   const inserted = `,
 ${indent}""${hasNext ? "," : ""}`;
   view.dispatch({
@@ -171,6 +231,11 @@ function mountJsonCodeEditor(parent, options) {
   const editableExtension = (readOnly) => [EditorState.readOnly.of(Boolean(readOnly)), EditorView.editable.of(!readOnly)];
   let languageName = options.language ?? "json";
   let disposed=false, menu=null, catalogs=options.catalogs??[], generation=0;
+  // The indentation unit belongs to the document, not to the text as it is edited: JSON reads it once when a document is opened (here,
+  // and when the host replaces the text), YAML and Markdown always use two spaces. Typing never changes it.
+  let jsonIndent = detectIndent(options.code) ?? DEFAULT_INDENT;
+  const unitOf = (name) => (name === "json" ? jsonIndent : DEFAULT_INDENT);
+  const indentExtension = (name) => [indentUnit.of(unitOf(name)), EditorState.tabSize.of(tabWidth(unitOf(name)))];
   function closeOptions(){generation++;menu?.destroy();menu=null;}
   async function openOptions(left,top){
     closeOptions();
@@ -183,43 +248,60 @@ function mountJsonCodeEditor(parent, options) {
       menu=mountJsonFieldMenu(parent,api,catalogs,left,top,()=>{menu=null;});
     }catch(error){options.onError?.(error);}
   }
-  // Live completions (JSON only, `completions: true`): property names and values at the cursor's JSON path, from the same data as the
-  // field menu. The data loads with the field menu's chunk on first use.
-  async function completionSource(context) {
-    if (disposed || languageName !== "json") return null;
-    let module;
-    try { module = await import('./json-options.js'); } catch (error) { options.onError?.(error); return null; }
-    if (disposed || context.aborted) return null;
-    const found = module.getJsonCompletions(context.state.doc.toString(), context.pos, catalogs, { explicit: context.explicit });
+  // Live completions (JSON only, `completions: true`): property names and values at the cursor's JSON path, from the same data as the field
+  // menu. The data loads with the field menu's chunk, at the first focus or the first query; once loaded, a query answers at once (no
+  // promise), and the list stays valid while the author types within the same token (`validFor`), so typing only refilters it.
+  let optionsModule = null, optionsLoading = null;
+  const loadOptions = () => (optionsLoading ??= import('./json-options.js').then((module) => (optionsModule = module), (error) => { optionsLoading = null; throw error; }));
+  function completionResult(context) {
+    const found = optionsModule.getJsonCompletions(context.state.doc.toString(), context.pos, catalogs, { explicit: context.explicit });
     if (!found) return null;
-    return { from: found.from, to: found.to, filter: true, options: found.options.map((option) => ({
+    return { from: found.from, to: found.to, filter: true, validFor: found.quoted ? QUOTED_TEXT : WORD_TEXT, options: found.options.map((option) => ({
       label: option.label, detail: option.detail, info: option.info, boost: option.boost, type: found.kind === "key" ? "property" : "enum", apply: completionApply(found, option),
     })) };
   }
-  // Undo and Redo run CodeMirror's history first. When it has nothing left, the host's fallback may step further (the source pane
-  // routes a whole-document replace to the session); a fallback answers true when it did something.
+  function completionSource(context) {
+    // One list for one cursor: with several, Tab and Enter keep their plain meaning at every cursor instead of completing at the main one only.
+    if (disposed || languageName !== "json" || context.state.selection.ranges.length > 1) return null;
+    if (optionsModule) return completionResult(context);
+    return loadOptions().then(() => (disposed || context.aborted ? null : completionResult(context)), (error) => { options.onError?.(error); return null; });
+  }
+  // Undo and Redo run CodeMirror's history first. When it has nothing left, the host's fallback may step further (the source pane routes a whole-document replace to the session); a fallback answers true when it did something.
   const undoCommand = (target) => undo(target) || Boolean(options.historyFallback?.undo?.());
   const redoCommand = (target) => redo(target) || Boolean(options.historyFallback?.redo?.());
   const historyBindings = historyKeymap.map((binding) => binding.run === undo ? { ...binding, run: undoCommand } : binding.run === redo ? { ...binding, run: redoCommand } : binding);
-  const completionExtension = options.completions ? [autocompletion({ override: [completionSource], defaultKeymap: false, icons: false, maxRenderedOptions: 60 }), completionKeys] : null;
-  let currentIndent = indentation(options.code);
+  // Accept with no minimum delay: the list is already valid for the typed text, so Tab or Enter right after a keystroke accepts (VS Code does).
+  const completionExtension = options.completions ? [autocompletion({ override: [completionSource], defaultKeymap: false, icons: false, maxRenderedOptions: 60, interactionDelay: 0, activateOnTypingDelay: 0 }), completionKeys(() => optionsModule !== null)] : null;
   const contentAttributes = (invalid = options.invalid, describedBy = options.describedBy) => EditorView.contentAttributes.of({
     "aria-label": options.label,
     "aria-invalid": String(Boolean(invalid)),
     "aria-describedby": describedBy ?? "",
-    "aria-keyshortcuts": "Control+Space Meta+Space Alt+ArrowDown",
+    "aria-keyshortcuts": options.completions ? "Control+Space" : "Control+Space Alt+Shift+O",
     spellcheck: "false",
     autocapitalize: "off",
     autocorrect: "off"
   });
+  // Format the document: the host's command (the source pane formats every language) or, standalone, the JSON formatter.
+  const runFormat = () => { if (options.onFormat) options.onFormat(); else api.format(); return true; };
+  // These chords are read from the event, not from CodeMirror's keymap: Alt changes the character a key produces on macOS, so the physical key counts.
+  const letter = (event, name) => event.code === `Key${name.toUpperCase()}` || event.key.toLowerCase() === name;
+  // Cmd/Ctrl+Shift+F (kept from earlier versions) and VS Code's Shift+Alt+F.
+  const isFormatKey = (event) => event.shiftKey && !((event.metaKey || event.ctrlKey) && event.altKey) && (event.metaKey || event.ctrlKey || event.altKey) && letter(event, "f");
+  // The field menu: Alt+Shift+O, a chord VS Code does not use.
+  const isOptionsKey = (event) => event.altKey && event.shiftKey && !event.metaKey && !event.ctrlKey && letter(event, "o");
   const view = new EditorView({ parent, state: EditorState.create({ doc: options.code, extensions: [
     language.of(languageExtension(languageName, completionExtension)),
     editable.of(editableExtension(options.readOnly)),
     jsonSource.init(()=>options.code),jsonSourceHistory,
-    indent.of(indentUnit.of(currentIndent)),
+    indent.of(indentExtension(languageName)),
     indentOnInput(),
     historyField.of(history()),
     drawSelection(),
+    // Multiple cursors, as in VS Code: Cmd/Ctrl+D, Cmd/Ctrl+Shift+L, Cmd/Ctrl+Alt+Up and Down, Alt+click (and Cmd/Ctrl+click), and Shift+Alt+drag for a column.
+    EditorState.allowMultipleSelections.of(true),
+    EditorView.clickAddsSelectionRange.of((event) => event.altKey || (/Mac|iPhone|iPad/.test(navigator.platform) ? event.metaKey : event.ctrlKey)),
+    rectangularSelection({ eventFilter: (event) => event.altKey && event.shiftKey && event.button === 0 }),
+    crosshairCursor(),
     bracketMatching(),
     closeBrackets(),
     codeFolding(),
@@ -241,9 +323,14 @@ function mountJsonCodeEditor(parent, options) {
         redoCommand(view);
         return true;
       }
-      if ((event.metaKey || event.ctrlKey) && event.shiftKey && !event.altKey && event.key.toLowerCase() === "f") {
+      if (isFormatKey(event)) {
+        event.preventDefault();
+        runFormat();
+        return true;
+      }
+      if (languageName === "json" && isOptionsKey(event)) {
         event.preventDefault();
-        api.format();
+        void openOptions();
         return true;
       }
       return false;
@@ -252,19 +339,10 @@ function mountJsonCodeEditor(parent, options) {
       { key: "Enter", run: nextStringItem },
       { key: '"', run: (view2) => skipDelimiter(view2, '"') },
       { key: ",", run: (view2) => skipDelimiter(view2, ",") },
-      { key: "Mod-Space", run: () => {
-        void openOptions();
-        return true;
-      } },
-      { key: "Ctrl-Space", run: () => {
-        void openOptions();
-        return true;
-      } },
-      { key: "Alt-ArrowDown", run: () => {
-        void openOptions();
-        return true;
-      } },
-      indentWithTab,
+      // The field menu (a searchable dialog of the choices of one field) is on Alt+Shift+O, a chord VS Code does not use. With completions off
+      // it is also on Ctrl+Space, because the list is not there to take that key.
+      ...(options.completions ? [] : [{ key: "Ctrl-Space", run: () => languageName === "json" && (void openOptions(), true) }, { key: "Mod-Space", run: () => languageName === "json" && (void openOptions(), true) }]),
+      { key: "Tab", run: tabCommand, shift: indentLess },
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyBindings,
@@ -272,16 +350,14 @@ function mountJsonCodeEditor(parent, options) {
       ...foldKeymap
     ]),
     EditorView.domEventHandlers({
-      click(event) {
-        if (view.state.selection.main.empty) void openOptions(event.clientX, event.clientY + 12);
-      },
       paste(event){
         if(!event.clipboardData||view.state.selection.ranges.length!==1)return false;
         const text=event.clipboardData.getData('text/plain');
         if(!text)return false;
-        event.preventDefault();api.replace(...api.getSelection(),text);return true;
+        event.preventDefault();api.replace(...api.getSelection(),text,{userEvent:'input.paste'});return true;
       },
       focus() {
+        if (options.completions) void loadOptions().catch(() => {});
         options.onFocus?.();
       },
       mousemove(event) {
@@ -293,6 +369,9 @@ function mountJsonCodeEditor(parent, options) {
     }),
     EditorView.updateListener.of((update) => {
       if(update.docChanged||update.selectionSet)closeOptions();
+      // Tests and hosts wait on this: a completion query is still running.
+      const busy = completionStatus(update.state) === "pending", dom = update.view.dom;
+      if (busy !== (dom.dataset.opfBusy === "1")) { if (busy) dom.dataset.opfBusy = "1"; else delete dom.dataset.opfBusy; }
       if (update.docChanged && !update.transactions.every((tr) => tr.annotation(external))) options.onChange(update.state.field(jsonSource));
     })
   ] }) });
@@ -302,28 +381,53 @@ function mountJsonCodeEditor(parent, options) {
     hasFocus: () => view.hasFocus,
     focus: () => view.focus(),
     setSelection: (from, to=from) => {const map=textInputMap(api.getValue());view.dispatch({ selection: EditorSelection.single(map.toInput(from),map.toInput(to)), scrollIntoView: true });},
-    replace: (from, to, text) => {
+    // `keepSelection` leaves the cursor where the edit maps it (a format keeps it on the same token) instead of moving it to the end of the new text.
+    // `userEvent` names the edit; the default is not "input.complete" or "input.type", which would run indentOnInput over the inserted lines and make
+    // the text differ from the source the edit declares (a pasted block ending in "}" was dropped that way).
+    replace: (from, to, text, { keepSelection = false, userEvent = "input.replace" } = {}) => {
       const source=api.getValue(),map=textInputMap(source),a=map.toInput(from),b=map.toInput(to);
       if(to<from||map.toSource(a)!==from||map.toSource(b)!==to)throw new RangeError('JSON edits must use source boundaries outside a CRLF pair.');
       const insert=textInputMap(text).text,next=source.slice(0,from)+text+source.slice(to);
-      view.dispatch({changes:{from:a,to:b,insert},selection:{anchor:a+insert.length},effects:setJsonSource.of(next),
-        annotations:[Transaction.userEvent.of('input.complete'),isolateHistory.of('full')],scrollIntoView:true});
+      view.dispatch({changes:{from:a,to:b,insert},...(keepSelection?{}:{selection:{anchor:a+insert.length}}),effects:setJsonSource.of(next),
+        annotations:[Transaction.userEvent.of(userEvent),isolateHistory.of('full')],scrollIntoView:true});
     },
+    /** The indentation unit now in effect: a tab character or some spaces. */
+    indentUnit: () => view.state.facet(indentUnit),
     coordinates: () => {
       const rect = view.coordsAtPos(view.state.selection.main.head) ?? parent.getBoundingClientRect();
       return { left: rect.left, top: rect.bottom + 8 };
     },
     format: () => {
+      if (languageName !== "json") return false;
+      // jsonc-parser formats tokens, so it also lays out a draft that does not parse yet.
+      api.replaceDiff(formatJsonSource(api.getValue(), view.state.facet(indentUnit)));
+      return true;
+    },
+    /**
+     * Replace the whole text with `next` as one undoable edit. When `next` differs only in whitespace (a format), each run of whitespace that
+     * changed is its own change, so the cursor stays on its token; otherwise only the part that differs is replaced.
+     */
+    replaceDiff: (next) => {
       const source = api.getValue();
-      try {
-        JSON.parse(source);
-      } catch {
-        return false;
+      if (source === next) return;
+      const edits = whitespaceEdits(source, next);
+      if (edits) {
+        const map = textInputMap(source);
+        try {
+          const changes = ChangeSet.of(edits.map((edit) => ({ from: map.toInput(edit.from), to: map.toInput(edit.to), insert: textInputMap(edit.insert).text })), view.state.doc.length);
+          view.dispatch({ changes, selection: view.state.selection.map(changes, 1), effects: setJsonSource.of(next), annotations: [Transaction.userEvent.of("input.format"), isolateHistory.of("full")], scrollIntoView: true });
+          return;
+        } catch (error) {
+          // An edit that splits a CRLF pair: replace the differing middle instead.
+          if (!(error instanceof RangeError)) throw error;
+        }
       }
-      const unit = indentation(source);
-      const next = applyEdits(source, format(source, void 0, { insertSpaces: unit !== "	", tabSize: unit.length, eol: preferredLineEnding(source) }));
-      if (source !== next) api.replace(0, source.length, next);
-      return true;
+      let from = 0, end = source.length, nextEnd = next.length;
+      while (from < end && from < nextEnd && source[from] === next[from]) from++;
+      while (end > from && nextEnd > from && source[end - 1] === next[nextEnd - 1]) { end--; nextEnd--; }
+      if (source[from - 1] === "\r" && source[from] === "\n") from--;
+      if (source[end - 1] === "\r" && source[end] === "\n") { end++; nextEnd++; }
+      api.replace(from, end, next.slice(from, nextEnd), { keepSelection: true, userEvent: "input.format" });
     }
   };
   return {
@@ -334,7 +438,7 @@ function mountJsonCodeEditor(parent, options) {
     setLanguage(name){
       if(name===languageName)return;
       languageName=name;closeOptions();
-      view.dispatch({ effects: language.reconfigure(languageExtension(name, completionExtension)) });
+      view.dispatch({ effects: [language.reconfigure(languageExtension(name, completionExtension)), indent.reconfigure(indentExtension(name))] });
     },
     /** Forget the typed edits CodeMirror can undo (the text they were typed against is gone). Returns nothing; the document is unchanged. */
     resetHistory(){
@@ -350,10 +454,14 @@ function mountJsonCodeEditor(parent, options) {
       if(code!==api.getValue())closeOptions();
       const current = view.state.doc.toString(), normalized=textInputMap(code).text;
       const effects = [attributes.reconfigure(contentAttributes(invalid, describedBy)), hoverField.of(field),setJsonSource.of(code)];
-      const nextIndent = indentation(code);
-      if (nextIndent !== currentIndent) {
-        currentIndent = nextIndent;
-        effects.push(indent.reconfigure(indentUnit.of(nextIndent)));
+      // A different text is a different document (or a rewrite of it by the host): read its indentation again. The same text, which the host
+      // passes after every applied edit to refresh the attributes, keeps the unit.
+      if (current !== normalized) {
+        const detected = detectIndent(code);
+        if (detected && detected !== jsonIndent) {
+          jsonIndent = detected;
+          if (languageName === "json") effects.push(indent.reconfigure(indentExtension("json")));
+        }
       }
       if (current === normalized) {
         view.dispatch({ effects });

package/dist/json-format.js

@@ -0,0 +1,54 @@
+import { applyEdits, format } from "jsonc-parser";
+import { preferredLineEnding } from "./text-input.js";
+
+/**
+ * The indentation unit of a JSON text: a tab when an indented line starts with one, else the smallest indentation found (at most 8
+ * spaces); null when no line is indented.
+ */
+export function detectIndent(source) {
+  const spaces = source.match(/^[\t ]+(?=\S)/gm) ?? [];
+  if (!spaces.length) return null;
+  return spaces.some((value) => value.includes("\t")) ? "\t" : " ".repeat(Math.min(8, ...spaces.map((value) => value.length)));
+}
+
+/**
+ * The whitespace edits that lay JSON text out with `unit` (a tab or spaces) as the indentation (`{ offset, length, content }`, offsets in
+ * `source`): whitespace only, so values and numeric lexemes stay as written, the first line ending is kept and a final newline stays if there
+ * is one. jsonc-parser formats tokens, so a draft that does not parse is laid out too.
+ */
+export function jsonFormatEdits(source, unit = "  ") {
+  return format(source, undefined, {
+    insertSpaces: unit !== "\t",
+    tabSize: unit === "\t" ? 4 : unit.length,
+    eol: preferredLineEnding(source),
+    insertFinalNewline: /[\r\n]\s*$/.test(source),
+  });
+}
+
+/** `source` laid out by `jsonFormatEdits`. */
+export const formatJsonSource = (source, unit = "  ") => applyEdits(source, jsonFormatEdits(source, unit));
+
+const isSpace = (char) => char === " " || char === "\t" || char === "\n" || char === "\r";
+/**
+ * The edits (`{ from, to, insert }`, offsets in `source`) that turn `source` into `formatted` when the two differ in whitespace only, one per run
+ * of whitespace that changed, so a cursor between two tokens stays between them. Null when something other than whitespace differs.
+ */
+export function whitespaceEdits(source, formatted) {
+  const edits = [];
+  let i = 0, j = 0;
+  while (i < source.length || j < formatted.length) {
+    if (isSpace(source[i]) || isSpace(formatted[j])) {
+      let endSource = i, endFormatted = j;
+      while (isSpace(source[endSource])) endSource++;
+      while (isSpace(formatted[endFormatted])) endFormatted++;
+      const before = source.slice(i, endSource), after = formatted.slice(j, endFormatted);
+      if (before !== after) edits.push({ from: i, to: endSource, insert: after });
+      i = endSource;
+      j = endFormatted;
+    } else if (source[i] === formatted[j] && i < source.length) {
+      i++;
+      j++;
+    } else return null;
+  }
+  return edits;
+}

package/dist/json-menu.js

@@ -7,7 +7,7 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   const context=getJsonFieldContext(source,selection[0],catalogs);
   if(!context)return null;
   const coordinates=api.coordinates();left??=coordinates.left;top??=coordinates.top;
-  const root=doc.createElement('div');root.className='json-field-menu';root.setAttribute('role','dialog');root.setAttribute('aria-label',`${context.label} options`);
+  const root=doc.createElement('div');root.className='json-field-menu';root.setAttribute('role','dialog');root.setAttribute('aria-modal','true');root.setAttribute('aria-label',`${context.label} options`);
   root.style.cssText='position:fixed;z-index:10000;width:380px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:12px;background:Canvas;color:CanvasText;border:1px solid GrayText;border-radius:8px;font:13px system-ui;box-shadow:0 8px 28px #0003';
   const add=(tag,text,className,container=root)=>{const node=doc.createElement(tag);if(text!==undefined)node.textContent=text;if(className)node.className=className;container.append(node);return node;};
   const heading=add('div',undefined,'json-field-heading');add('strong',context.label,undefined,heading);
@@ -59,6 +59,13 @@ export function mountJsonFieldMenu(parent,api,catalogs,left,top,onClose){
   search.addEventListener('input',()=>{selected=0;render();});
   root.addEventListener('keydown',event=>{
     if(event.key==='Escape'){event.preventDefault();event.stopPropagation();close(true);}
+    // Tab walks the dialog's two controls and wraps; the options are reached with the arrow keys from the search field. Focus never leaves
+    // the dialog by Tab, so it cannot be left open behind the page.
+    else if(event.key==='Tab'){
+      event.preventDefault();event.stopPropagation();
+      const stops=[closeButton,search],at=stops.indexOf(doc.activeElement);
+      stops[(at+(event.shiftKey?-1:1)+stops.length)%stops.length].focus();
+    }
     else if(event.target===search&&['ArrowDown','ArrowUp'].includes(event.key)){event.preventDefault();selected=Math.max(0,Math.min(choices.length-1,selected+(event.key==='ArrowDown'?1:-1)));highlight();}
     else if(event.target===search&&event.key==='Enter'&&choices[selected]){event.preventDefault();choose(choices[selected]);}
   });

package/dist/json-options.js

@@ -138,11 +138,13 @@ const WORD = /[A-Za-z0-9_.-]/;
 // The token being typed: inside a string (a quote opened earlier on this line) or a bare word. JSON strings never span lines.
 function tokenAt(text, position, explicit) {
     const lineStart = Math.max(text.lastIndexOf("\n", position - 1), text.lastIndexOf("\r", position - 1)) + 1;
-    let open = -1;
+    let open = -1, last = null;
     for (let index = lineStart; index < position; index++) {
-        if (open >= 0) { if (text[index] === "\\") index++; else if (text[index] === '"') open = -1; }
+        if (open >= 0) { if (text[index] === "\\") index++; else if (text[index] === '"') { last = { start: open, end: index }; open = -1; } }
         else if (text[index] === '"') open = index;
     }
+    // Asked for explicitly (Ctrl+Space) right after a closing quote: the string just ended is the token, as in VS Code.
+    if (open < 0 && explicit && last?.end === position - 1) return { quoted: true, closed: true, start: last.start, end: position, from: last.start + 1, to: position - 1 };
     if (open >= 0) {
         let close = -1;
         for (let index = position; index < text.length && text[index] !== "\n" && text[index] !== "\r"; index++) {

package/dist/presenter.js

@@ -19,6 +19,29 @@ const CLICK_GUARD_MS = 450;
 const NEXT_KEYS = new Set(["ArrowRight", " ", "PageDown", "Enter"]);
 const PREVIOUS_KEYS = new Set(["ArrowLeft", "PageUp", "Backspace"]);
 
+// Full screen belongs to the document, not to one presenter: the browser ends whatever is full screen when an exit it was asked for runs, and tells
+// every listener. A presenter that closed early asks for its exit late (when its pending full screen request resolves), possibly after a newer
+// presenter took full screen. So the exits the presenters asked for are counted per document, and any presenter reads a `fullscreenchange` that
+// answers one of them as ours, not as the user leaving full screen.
+const exitRequests = new WeakMap(); // Document -> Set of exits asked for and not yet reported
+const attributedEvents = new WeakMap(); // fullscreenchange Event -> whether it answered an exit a presenter asked for
+function noteExit(doc, win) {
+  let requests = exitRequests.get(doc);
+  if (!requests) exitRequests.set(doc, requests = new Set());
+  const request = {};
+  requests.add(request);
+  // The browser reports an exit with the event; when it does not (the exit was refused, or two exits became one event), stop counting it soon.
+  return { forget: () => requests.delete(request), forgetSoon: () => win.setTimeout(() => requests.delete(request), 500) };
+}
+function answersAnExit(doc, event) {
+  if (attributedEvents.has(event)) return attributedEvents.get(event);
+  const requests = exitRequests.get(doc);
+  const ours = Boolean(requests?.size) && !doc.fullscreenElement;
+  if (ours) requests.delete(requests.values().next().value);
+  attributedEvents.set(event, ours);
+  return ours;
+}
+
 const DEFAULT_LABELS = {
   /** The accessible name of the presenter dialog. */
   dialog: "Presentation",
@@ -69,7 +92,7 @@ export function createPresenter(container, options = {}) {
   // Drawn slides by deck index, for the deck object they were drawn from: a new snapshot (an edit) or a new start() draws again.
   let drawn = new Map(), drawnFor;
 
-  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, leaving = false, returnTo = null;
+  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, returnTo = null;
   let counterTimer, preloadTimer, renderToken = 0, swipe = null, clickGuardUntil = 0;
 
   // ---- the DOM ----------------------------------------------------------------------------------------------------------------------------
@@ -208,11 +231,12 @@ export function createPresenter(container, options = {}) {
       () => "overlay",
     );
   }
-  // Ask the browser to leave full screen; onFullscreenChange then sees `leaving` and does not read the exit as the user's. Focus goes back to the
-  // element that opened the presentation once the exit is done, because the page behind a full screen element takes no focus until then.
+  // Ask the browser to leave full screen; onFullscreenChange then sees that the event answers an exit asked for (by this presenter or an earlier
+  // one) and does not read it as the user's. Focus goes back to the element that opened the presentation once the exit is done, because the page
+  // behind a full screen element takes no focus until then.
   function leaveFullscreen() {
-    leaving = true;
-    Promise.resolve(doc.exitFullscreen?.()).then(restoreFocus, () => { leaving = false; });
+    const exit = noteExit(doc, win);
+    Promise.resolve(doc.exitFullscreen?.()).then(() => { exit.forgetSoon(); restoreFocus(); }, exit.forget);
   }
   // Only when nobody took focus since: the host may move it in `onExit`.
   function restoreFocus() {
@@ -220,11 +244,11 @@ export function createPresenter(container, options = {}) {
     if (returnTo?.isConnected && typeof returnTo.focus === "function" && (!now || now === doc.body || now === root)) returnTo.focus({ preventScroll: true });
   }
   // The browser takes full screen away with Esc (that key never reaches the page) or the host exits it: the presentation ends with it.
-  function onFullscreenChange() {
+  function onFullscreenChange(event) {
     if (doc.fullscreenElement === root) return;
-    if (leaving) {
-      // The exit that stop() asked for finished. If the host started again meanwhile, full screen is gone and the overlay carries on.
-      leaving = false;
+    if (answersAnExit(doc, event)) {
+      // An exit that a presenter asked for finished: ours from stop(), or an earlier presenter's that ran after this one took full screen. A
+      // presentation still running carries on as the overlay.
       if (active && enteredFullscreen) { enteredFullscreen = false; root.dataset.mode = "overlay"; }
       return;
     }

package/dist/source-format.js

@@ -0,0 +1,92 @@
+// Format document for the source pane (Shift+Alt+F, Cmd/Ctrl+Shift+F and the Format button): whitespace only, in every format, and nothing the
+// author wrote is dropped. JSON is laid out token by token (so a draft that does not parse is laid out too), YAML goes through the `yaml`
+// library's document round trip (comments, anchors, key order and scalar styles stay), and Markdown gets one blank line between blocks with its
+// front matter formatted as YAML. Plain functions, no DOM: `formatSource(format, text, { unit })` returns `{ text }` or `{ error }`.
+import { parseDocument } from "yaml";
+import { formatJsonSource } from "./json-format.js";
+
+const lineEnding = (source) => /\r\n|\r|\n/.exec(source)?.[0] ?? "\n";
+
+/** YAML text laid out with a 2-space indent, long lines kept whole; its comments, blank lines, scalar styles and key order stay as written. */
+export function formatYamlSource(source) {
+  if (source.trim() === "") return { text: source };
+  const bom = source.startsWith("\uFEFF") ? "\uFEFF" : "";
+  const eol = lineEnding(source);
+  const document = parseDocument(bom ? source.slice(1) : source, { prettyErrors: false, customTags: keepNumberSpelling });
+  if (document.errors.length) return { error: "The YAML has errors, so it cannot be formatted. Fix them first." };
+  // Only comments: there is no document to write, and writing one would add a `null`.
+  if (document.contents === null || document.contents === undefined) return { text: source };
+  let text = document.toString({ indent: 2, lineWidth: 0, flowCollectionPadding: false });
+  // The library ends every document with a newline; keep the author's choice.
+  if (!/[\r\n]\s*$/.test(source) && text.endsWith("\n")) text = text.slice(0, -1);
+  if (eol !== "\n") text = text.replaceAll("\n", eol);
+  return { text: bom + text };
+}
+
+// The library writes a number from its value (1e3 becomes 1e+3, 0x1F 0x1f, .5 0.5, +1 1); the author's spelling is kept instead.
+const NUMBER_TAGS = new Set(["tag:yaml.org,2002:int", "tag:yaml.org,2002:float"]);
+const keepNumberSpelling = (tags) => tags.map((tag) => (
+  typeof tag === "object" && tag && typeof tag.stringify === "function" && NUMBER_TAGS.has(tag.tag)
+    ? { ...tag, stringify: (item, context, onComment, onChompKeep) => (typeof item.source === "string" && item.source !== "" ? item.source : tag.stringify(item, context, onComment, onChompKeep)) }
+    : tag
+));
+
+const FENCE = /^ {0,3}(`{3,}|~{3,})/;
+const INDENTED = /^(?: {4}|\t)/;
+
+/**
+ * Markdown laid out with at most one blank line between blocks (code fences and runs inside an indented block are left as written), the front
+ * matter formatted as YAML, one line ending (the first one found) and one newline at the end.
+ */
+export function formatMarkdownSource(source) {
+  const eol = lineEnding(source);
+  const lines = source.split(/\r\n|\r|\n/);
+  let body = 0;
+  const out = [];
+  if (lines[0] === "---") {
+    const close = lines.findIndex((line, index) => index > 0 && (line === "---" || line === "..."));
+    if (close > 0) {
+      const front = formatYamlSource(lines.slice(1, close).join("\n"));
+      out.push("---", ...(front.error || front.text === "" ? lines.slice(1, close) : front.text.replace(/\n$/, "").split("\n")), lines[close]);
+      body = close + 1;
+    }
+  }
+  let fence = null, blanks = 0, lastIndented = false;
+  for (let index = body; index < lines.length; index++) {
+    const line = lines[index];
+    if (fence) {
+      out.push(line);
+      const marker = FENCE.exec(line)?.[1];
+      if (marker && marker[0] === fence[0] && marker.length >= fence.length && line.trim() === marker) fence = null;
+      continue;
+    }
+    if (line.trim() === "") { blanks++; continue; }
+    if (blanks) {
+      // A blank run inside an indented block (code) is content; elsewhere it is one blank line.
+      const keep = lastIndented && INDENTED.test(line) ? blanks : 1;
+      for (let count = 0; count < keep; count++) out.push("");
+    }
+    blanks = 0;
+    out.push(line);
+    lastIndented = INDENTED.test(line);
+    const opened = FENCE.exec(line)?.[1];
+    if (opened) fence = opened;
+  }
+  // A document that ends inside a fence keeps its last lines as written; otherwise it ends with one newline.
+  while (!fence && out.length && out[out.length - 1].trim() === "") out.pop();
+  return { text: out.length ? out.join(eol) + (fence ? "" : eol) : "" };
+}
+
+/**
+ * Format `text` as `format` ("json", "yaml" or "md"). `unit` is the editor's indentation unit for JSON (a tab or spaces). Returns `{ text }`
+ * (possibly the same text) or `{ error }` with a sentence for the author.
+ */
+export function formatSource(format, text, { unit } = {}) {
+  try {
+    if (format === "yaml") return formatYamlSource(text);
+    if (format === "md") return formatMarkdownSource(text);
+    return { text: formatJsonSource(text, unit) };
+  } catch (error) {
+    return { error: `Formatting failed: ${error instanceof Error ? error.message : String(error)}` };
+  }
+}

package/dist/source-pane.d.ts

@@ -59,7 +59,7 @@ export interface SourcePaneOptions {
   /** Accessible name of the code editor (default `OPF source`). */
   label?: string;
   catalogs?: JsonCatalogContext;
-  /** Live completions while typing JSON: property names and values (enums, booleans, catalog references) at the cursor's JSON path, from the same data as the field menu. YAML and Markdown keep the menu only. Default true. */
+  /** Live completions while typing JSON: property names and values (enums, booleans, catalog references) at the cursor's JSON path, from the same data as the field menu. Tab and Enter accept the selected item, Escape closes the list, Ctrl+Space (Cmd+I on macOS) opens it; the field menu is on Alt+Shift+O. YAML and Markdown have no completions yet. Default true. */
   completions?: boolean;
   onError?(error: unknown): void;
 }

package/dist/source-pane.js

@@ -5,6 +5,7 @@ import { mountJsonCodeEditor } from "./json-editor.js";
 import { MAX_EXACT_SOURCE_LENGTH, createSourceMemory, findDuplicateKey, updateJsonSource } from "./exact-source.js";
 import { lineForPath, lineOfOffset, offsetOfLine } from "./source-lines.js";
 import { errorText, normalizeFinding, rejectionFindings as findingsOfError } from "./source-findings.js";
+import { formatSource } from "./source-format.js";
 
 // The source pane (RR-98): the OPF document as JSON, YAML or Markdown, with the file name, the format menu, Format, Copy
 // and Download, and the findings under the code. JSON is canonical and keeps its authored bytes (exact-source); YAML and
@@ -170,6 +171,8 @@ export function createSourcePane(container, options = {}) {
     return button;
   };
   const formatAction = actionButton("Format (fix indentation)", "Braces", "format");
+  formatAction.title = "Format (fix indentation), Shift+Alt+F";
+  formatAction.setAttribute("aria-keyshortcuts", "Shift+Alt+F");
   const copyAction = actionButton("Copy source", "Copy", "copy");
   const downloadAction = actionButton("Download source", "Download", "download");
   bar.append(file, actions);
@@ -236,6 +239,7 @@ export function createSourcePane(container, options = {}) {
     catalogs: options.catalogs ?? editor.catalogs,
     describedBy: `${id}-findings`,
     onChange: () => schedule(),
+    onFormat: () => formatDocument(),
     historyFallback: { undo: () => stepReplace("undo"), redo: () => stepReplace("redo") },
     onError: (error) => options.onError?.(error),
   });
@@ -601,30 +605,30 @@ export function createSourcePane(container, options = {}) {
     const current = formatOf(format);
     return { name, filename: `${name}.opf.${current.extension}`, text: control.api.getValue(), format: current.id, mime: current.mime };
   }
-  formatAction.addEventListener("click", () => {
+  // Format document: the button and the keys (Shift+Alt+F, Cmd/Ctrl+Shift+F) do the same in every format. Whitespace only: JSON is laid out
+  // token by token (also while it does not parse), YAML keeps its comments, and a rewrite that would change the document is refused.
+  function formatDocument() {
     flush();
-    if (readOnly) return;
-    if (format === "json") { control.api.format(); control.api.focus(); return; }
-    const read = readText(format, control.api.getValue(), catalogs());
-    if (!read.deck) { renderFindings(); return; }
-    let written;
-    try { written = write(format, read.deck); }
-    catch (error) {
-      rejectionFindings = [normalizeFinding({ message: `Cannot rewrite the ${formatOf(format).label}: ${errorText(error)}`, kind: "rejected" })];
-      renderFindings();
-      return;
-    }
+    if (readOnly) return false;
     const before = control.api.getValue();
-    if (written.text !== before) {
-      const comments = format === "yaml" ? scanYamlComments(before).count : 0;
-      control.api.replace(0, before.length, written.text);
-      flush();
-      transientNotes = comments > 0 ? [normalizeFinding({ message: `${plural(comments, "comment")} in the YAML ${comments === 1 ? "was" : "were"} dropped when the text was rewritten.`, severity: "warning" }, "format")] : [];
-      renderedKey = "";
-      renderFindings();
-    }
+    const result = formatSource(format, before, { unit: control.api.indentUnit() });
     control.api.focus();
-  });
+    if (result.error) { announce(result.error); return false; }
+    if (result.text === before) { announce("Already formatted"); return true; }
+    if (format !== "json") {
+      let unchanged = true;
+      try {
+        const was = readText(format, before, catalogs()).deck;
+        unchanged = !was || same(was, readText(format, result.text, catalogs()).deck);
+      } catch { unchanged = false; }
+      if (!unchanged) { announce("Formatting would change the document, so the text was left as it is."); return false; }
+    }
+    control.api.replaceDiff(result.text);
+    flush();
+    announce("Formatted");
+    return true;
+  }
+  formatAction.addEventListener("click", () => { formatDocument(); });
   copyAction.addEventListener("click", async () => {
     const info = currentFile();
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -282,10 +282,11 @@
     "@codemirror/view": "6.43.14",
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
-    "@openpresentation/opf": "^0.26.0"
+    "yaml": "^2.9.1",
+    "@openpresentation/opf": "^0.26.1"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.0"
+    "@openpresentation/opf-render": "^0.26.1"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -344,9 +345,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/gallery": "0.26.0",
-    "@openpresentation/opf-pptx": "0.26.0",
-    "@openpresentation/opf-render": "0.26.0"
+    "@openpresentation/opf-render": "0.26.1",
+    "@openpresentation/opf-pptx": "0.26.1",
+    "@openpresentation/gallery": "0.26.1"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -383,6 +384,7 @@
     "test:review-panel-browser": "node test/review-panel-browser.mjs",
     "test:review-hook-browser": "node test/review-hook-browser.mjs",
     "test:source-pane-browser": "node test/source-pane-browser.mjs",
+    "test:source-keyboard-browser": "node test/source-keyboard-browser.mjs",
     "test:layout-editor-browser": "node test/layout-editor-browser.mjs",
     "test:export-license-browser": "node test/export-license-browser.mjs",
     "test:chart-options-browser": "node test/chart-options-browser.mjs",
@@ -392,5 +394,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "ae4ddd76e40b5778c1fdc255e4e3b24334748d7e"
+  "gitHead": "792e7c6d348011aa6f398989702fc8b8a80ec691"
 }