@openpresentation/opf-editor 0.26.0 → 0.26.2

package/dist/json-editor.js

@@ -1,16 +1,19 @@
-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, activateHover, closeHoverTooltips, crosshairCursor, drawSelection, hasHoverTooltips, hoverTooltip, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
+import { defaultKeymap, deleteCharBackward, toggleTabFocusMode, 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 { json } 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, currentCompletions, deleteBracketPair, hasNextSnippetField, hasPrevSnippetField, moveCompletionSelection, nextSnippetField, prevSnippetField, 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';
+import {a11yExtension,createAnnouncer} from './source-a11y.js';
+import { forEachDiagnostic } from "@codemirror/lint";
+import {createDiagnostics,editsTransaction} from './source-diagnostics.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) });
@@ -68,26 +71,117 @@ const markdownLanguage = StreamLanguage.define({
 function languageExtension(name, completions) {
   if (name === "yaml") return yaml();
   if (name === "markdown") return markdownLanguage;
-  return [json(), linter(jsonParseLinter(), { delay: 500 }), fieldDecorations, completions ?? []];
+  return [json(), 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)));
-// 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.
-function completionApply(found, option) {
-  return (view, completion, from, to) => {
-    const start = found.quoted ? from - 1 : from;
-    const end = found.closed ? 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)));
-    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);
+// 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 fallback(view);
+    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;
   };
 }
-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);
+// The documentation panel beside the selected item is shown by default (VS Code's `suggest.showInlineDetails`); Ctrl+Space with the list open
+// hides or shows it (`toggleSuggestionDetails`). The choice is the editor's, not the list's, so it stays across lists.
+function toggleDocs(view) {
+  const hidden = view.dom.classList.toggle("opf-docs-off");
+  view.dom.dataset.opfDocs = hidden ? "off" : "on";
+  return true;
+}
+const listIsOpen = (state) => completionStatus(state) === "active" && currentCompletions(state).length > 0;
+// Left and Right inside the word being completed move the caret and keep the list, which then filters by the text before the caret (VS Code).
+// A move that leaves the word (or the line) is the plain move, which closes the list. The move is dispatched as typing without a change, which
+// is the one transaction the completion state keeps its result for.
+function moveInToken(forward, tokenOf) {
+  return (view) => {
+    const { state } = view, range = state.selection.main;
+    if (!listIsOpen(state) || state.selection.ranges.length !== 1 || !range.empty) return false;
+    const target = view.moveByChar(range, forward);
+    if (target.head === range.head) return false;
+    const text = state.doc.toString(), here = tokenOf(text, range.head), there = tokenOf(text, target.head);
+    if (!here || !there || here.start !== there.start) return false;
+    view.dispatch({ selection: { anchor: target.head }, userEvent: "input.type", scrollIntoView: true });
+    // Ask again at the new caret, so the list filters by the text before it.
+    startCompletion(view);
+    return true;
+  };
+}
+// Backspace with the list open deletes and asks again, so the list widens as the word shrinks (the completion state alone closes the list
+// when the caret goes back past the place it was opened).
+function backspaceInToken(tokenOf) {
+  return (view) => {
+    if (!listIsOpen(view.state) || view.state.selection.ranges.length !== 1 || !view.state.selection.main.empty) return false;
+    if (!(deleteBracketPair(view) || deleteCharBackward(view))) return false;
+    const { state } = view;
+    if (tokenOf(state.doc.toString(), state.selection.main.head)) startCompletion(view);
+    return true;
+  };
+}
+// Completion keys, as in VS Code: Tab and Enter accept the selected suggestion (Shift+Tab and Shift+Enter accept it too: in a JSON string the
+// accepted item always replaces the whole token), Escape closes the list, Ctrl+Space (and Cmd+I on macOS) opens it wherever the schema has
+// something to offer and, with the list open, shows or hides its documentation, 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 (or walks the stops of a snippet) and Enter inserts
+// a line.
+function completionKeys(isReady, tokenOf, onStep) {
+  // Tab and Shift+Tab walk the tab stops of a snippet; the engine says which stop it is and opens the list at a stop that is a choice.
+  const walk = (forward, fallback) => (view) => {
+    if (forward ? hasNextSnippetField(view.state) && nextSnippetField(view) : hasPrevSnippetField(view.state) && prevSnippetField(view)) { onStep(view, forward); return true; }
+    return fallback(view);
+  };
+  const enter = (view) => nextStringItem(view) || insertNewlineAndIndent(view);
+  return Prec.highest(keymap.of([
+    ...completionKeymap.filter((binding) => binding.key !== "Enter" && binding.key !== "Ctrl-Space"),
+    { key: "Ctrl-Space", run: (view) => (listIsOpen(view.state) ? toggleDocs(view) : startCompletion(view)) },
+    { key: "Enter", run: acceptOrFallBack(isReady, enter) },
+    { key: "Shift-Enter", run: acceptOrFallBack(isReady, insertNewlineAndIndent) },
+    { key: "Tab", run: acceptOrFallBack(isReady, walk(true, tabCommand)) },
+    { key: "Shift-Tab", run: acceptOrFallBack(isReady, walk(false, indentLess)) },
+    { key: "ArrowLeft", run: moveInToken(false, tokenOf) },
+    { key: "ArrowRight", run: moveInToken(true, tokenOf) },
+    { key: "Backspace", run: backspaceInToken(tokenOf) },
+    { mac: "Mod-i", run: startCompletion },
+    { mac: "Ctrl-n", run: moveCompletionSelection(true) },
+    { mac: "Ctrl-p", run: moveCompletionSelection(false) },
+  ]));
+}
+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 +233,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 +265,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 +282,117 @@ 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 schema and the catalogs, with
+  // templates and snippets (source-completions.js). The engine loads 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('./source-completions.js').then((module) => (optionsModule = module), (error) => { optionsLoading = null; throw error; }));
+  const applyOption = (target, completion, from, to) => optionsModule.applyCompletion(target, completion, from, to, say);
+  // Hover: the schema's words over a key, the record's over a catalog id. A problem under the pointer is the lint tooltip's (message, next, fixes).
+  const problemAt = (state, position) => { let hit = false; forEachDiagnostic(state, (_diagnostic, from, to) => { if (position >= from && position <= to) hit = true; }); return hit; };
+  const hoverExtension = options.hover === false ? [] : hoverTooltip(async (target, position) => {
+    if (disposed || languageName !== "json" || problemAt(target.state, position)) return null;
+    if (!optionsModule) { try { await loadOptions(); } catch { return null; } }
+    return optionsModule.hoverAt(target.state, position, { catalogs });
+  }, { hoverTime: 300 });
+  // Cmd/Ctrl+K Cmd/Ctrl+I shows the hover at the caret (VS Code), and says what it holds.
+  let chordStartedAt = 0;
+  const showHoverAtCaret = (target) => {
+    if (languageName !== "json" || options.hover === false) return false;
+    const run = () => {
+      const position = target.state.selection.main.head;
+      const found = optionsModule.hoverModelAt(target.state, position, { catalogs });
+      if (!found) { say("No hover information here"); return; }
+      activateHover(target, found.from, 1, { tooltip: hoverExtension, until: (tr) => tr.docChanged || (tr.selection !== undefined && tr.newSelection.main.head !== position) });
+      say(optionsModule.docText(found.model));
+    };
+    if (optionsModule) run(); else loadOptions().then(run, () => {});
+    return true;
+  };
+  function completionResult(context) {
+    const found = optionsModule.completionResult(context.state, context.pos, { explicit: context.explicit, catalogs });
     if (!found) return null;
-    return { from: found.from, to: found.to, filter: true, 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),
-    })) };
+    for (const option of found.options) option.apply = applyOption;
+    return found;
+  }
+  function completionSource(context) {
+    if (disposed || languageName !== "json" || context.state.readOnly) 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.
+  // 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).
+  // Screen reader announcements and the problems drawn in the text (squiggles, F8, Cmd/Ctrl+.). The pane supplies the problems.
+  const announcer = createAnnouncer(parent, options.announce);
+  const say = (message) => announcer.say(message);
+  const applyProblemFix = (fix, problem) => {
+    if (disposed || view.state.readOnly) return;
+    if (typeof fix.run === "function") { fix.run(api, problem); return; }
+    if (fix.edits?.length) {
+      view.dispatch(editsTransaction(view.state, api.getValue(), fix.edits, { caret: fix.caret, select: fix.select }));
+      view.focus();
+      say(`${fix.title} applied`);
+    }
+  };
+  const diagnostics = createDiagnostics({ getSource: () => view.state.field(jsonSource), say, applyFix: applyProblemFix });
+  // On its own (no source pane to supply the problems) the editor underlines the syntax errors of JSON: one per cause, 300 ms after the last key.
+  let syntaxTimer = null;
+  function scheduleSyntax() {
+    if (options.syntaxProblems === false) return;
+    clearTimeout(syntaxTimer);
+    syntaxTimer = setTimeout(async () => {
+      if (disposed || languageName !== "json") return;
+      try {
+        const { analyzeSyntax } = await import('./source-syntax.js');
+        if (disposed || languageName !== "json") return;
+        const source = api.getValue();
+        diagnostics.draw(view, analyzeSyntax(source).map((problem) => ({ from: problem.range.from, to: problem.range.to, severity: "error", message: problem.message, next: problem.next, rule: problem.ruleId,
+          fixes: (problem.editFixes ?? []).filter((fix) => !fix.action).map((fix) => ({ id: fix.id, title: fix.title, safe: fix.safe, edits: fix.edits, caret: fix.caret })) })));
+      } catch (error) { options.onError?.(error); }
+    }, 300);
+  }
+  const completionExtension = options.completions ? [autocompletion({ override: [completionSource], defaultKeymap: false, icons: false, maxRenderedOptions: 60, interactionDelay: 0, activateOnTypingDelay: 0 }), completionKeys(() => optionsModule !== null, (text, position) => optionsModule?.tokenAt(text, position, false), (target, forward) => optionsModule?.snippetStep(target, forward, { say }))] : 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 F8 Shift+F8 Control+Period Alt+Shift+F" : "Control+Space Alt+Shift+O Alt+Shift+F",
+    "aria-description": options.completions ? "Press Control+Space for suggestions. Press F8 for the next problem. Press Escape then Tab to leave the editor." : "Press Escape then Tab to leave the editor.",
     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: [
+    // The problem menu's keys come before the list's: the two are never open together, and Enter must reach whichever is.
+    diagnostics.extension,
     language.of(languageExtension(languageName, completionExtension)),
+    hoverExtension,
+    Prec.high(keymap.of([
+      { key: "Escape", run: (target) => (hasHoverTooltips(target.state) ? (target.dispatch({ effects: closeHoverTooltips }), true) : false) },
+    ])),
+    a11yExtension(announcer, (completion) => completion.opfDoc ?? (typeof completion.info === "string" ? completion.info : "")),
     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 +414,24 @@ function mountJsonCodeEditor(parent, options) {
         redoCommand(view);
         return true;
       }
-      if ((event.metaKey || event.ctrlKey) && event.shiftKey && !event.altKey && event.key.toLowerCase() === "f") {
+      // Cmd/Ctrl+K then Cmd/Ctrl+I (within two seconds) shows the hover at the caret. It is read here, not as a CodeMirror chord, because a chord
+      // that starts with Mod+K would also swallow Mod+Shift+K (delete line).
+      const mod = /Mac|iPhone|iPad/.test(navigator.platform) ? event.metaKey : event.ctrlKey;
+      if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "k") { chordStartedAt = Date.now(); event.preventDefault(); return true; }
+      else if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "i" && Date.now() - chordStartedAt < 2000) {
+        chordStartedAt = 0;
+        if (showHoverAtCaret(view)) { event.preventDefault(); return true; }
+      }
+      // The problems panel: Cmd+Shift+M on macOS, Ctrl+Shift+M elsewhere (read from the physical key, as the format chord is).
+      if (mod && event.shiftKey && !event.altKey && event.code === "KeyM" && options.onFocusProblems?.()) { event.preventDefault(); return true; }
+      if (isFormatKey(event)) {
         event.preventDefault();
-        api.format();
+        runFormat();
+        return true;
+      }
+      if (languageName === "json" && isOptionsKey(event)) {
+        event.preventDefault();
+        void openOptions();
         return true;
       }
       return false;
@@ -252,19 +440,14 @@ 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 },
+      // The problems panel (VS Code: Cmd+Shift+M on macOS, Ctrl+Shift+M elsewhere); Ctrl+M (Ctrl+Shift+M on macOS) is VS Code's switch for Tab leaving the editor.
+      // JSON has no comments: say so instead of doing nothing (YAML and Markdown comment their lines out).
+      { key: "Mod-/", run: () => { if (languageName !== "json") return false; say("JSON has no comments. Use YAML or Markdown for notes."); return true; } },
+      { key: "Ctrl-m", mac: "Ctrl-Shift-m", run: toggleTabFocusMode },
       ...closeBracketsKeymap,
       ...defaultKeymap,
       ...historyBindings,
@@ -272,16 +455,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,7 +474,11 @@ 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));
+      if (update.docChanged) scheduleSyntax();
     })
   ] }) });
   const api = {
@@ -302,39 +487,90 @@ 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),
+    /** Say `message` in the editor's live region. */
+    say,
+    /**
+     * Apply several edits as one undoable change. `edits` are `{ from, to, insert }` in source offsets of the text as it is now; `caret` (or
+     * `select: [from, to]`) is a position in the text after the edits.
+     */
+    applyEdits(edits, { caret, select, userEvent } = {}) {
+      view.dispatch(editsTransaction(view.state, api.getValue(), edits, { caret, select, userEvent }));
     },
     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 {
     api,
     openOptions,
     setCatalogs(value){catalogs=value??[];closeOptions();},
+    /**
+     * Draw the problems in the text: `{ from, to, severity, message, next?, rule?, fixes? }` with source offsets into the current text. A fix is
+     * `{ id, title, safe?, edits?, caret?, select?, run? }`.
+     */
+    setProblems(problems){if(!disposed)diagnostics.draw(view,problems??[]);},
+    /** The problems drawn now, in position order, at their current source offsets. */
+    getProblems:()=>diagnostics.problems(view).map(({diagnostic,...problem})=>problem),
+    nextProblem:()=>diagnostics.next(view),
+    previousProblem:()=>diagnostics.previous(view),
+    /** Open the quick fix list for the problems at the caret (Cmd/Ctrl+.). */
+    triggerQuickFix:()=>diagnostics.openMenu(view),
+    /** Open the suggestion list at the caret (Ctrl+Space). */
+    triggerCompletion:()=>startCompletion(view),
+    /** Whether a suggestion list is open or being asked for. */
+    isCompleting:()=>completionStatus(view.state)!==null,
+    /** Perform a fix (its edits as one undoable change, or its own action). */
+    applyFix:(fix,problem)=>applyProblemFix(fix,problem),
     /** Switch the highlighting between "json" (with its parse linter, field highlights and option menu), "yaml" and "markdown". */
     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 +586,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 });
@@ -371,7 +611,7 @@ function mountJsonCodeEditor(parent, options) {
         annotations: [external.of(true), Transaction.addToHistory.of(false)]
       });
     },
-    destroy: () => {if(disposed)return;disposed=true;closeOptions();view.destroy();}
+    destroy: () => {if(disposed)return;disposed=true;clearTimeout(syntaxTimer);closeOptions();announcer.destroy();view.destroy();}
   };
 }
 export {

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]);}
   });