@aicayzer/inkkit 0.0.7 → 0.0.8

package/dist/editor.js

@@ -1,25 +1,27 @@
-import { Editor, defaultValueCtx, editorViewCtx, parserCtx, editorViewOptionsCtx, remarkCtx, remarkStringifyOptionsCtx, rootCtx, } from '@milkdown/kit/core';
+import { Editor, commandsCtx, defaultValueCtx, editorViewCtx, parserCtx, editorViewOptionsCtx, remarkCtx, remarkStringifyOptionsCtx, rootCtx, } from '@milkdown/kit/core';
 import { visibleClipboard, portableClipboard, clipboardText, clipboardContent, } from './clipboard.js';
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
-import { history } from '@milkdown/kit/plugin/history';
+import { history, historyKeymap } from '@milkdown/kit/plugin/history';
 import { closeHistory, undo as undoHistory, redo as redoHistory, } from '@milkdown/kit/prose/history';
 import { cursor } from '@milkdown/kit/plugin/cursor';
 import { blockquoteKeymap, blockquoteSchema, bulletListKeymap, codeBlockKeymap, createCodeBlockCommand, emphasisKeymap, headingKeymap, inlineCodeKeymap, inlineCodeSchema, linkSchema, listItemKeymap, orderedListKeymap, paragraphKeymap, strongKeymap, toggleEmphasisCommand, toggleInlineCodeCommand, toggleLinkCommand, toggleStrongCommand, turnIntoTextCommand, wrapInBulletListCommand, wrapInHeadingCommand, wrapInOrderedListCommand, } from '@milkdown/kit/preset/commonmark';
-import { strikethroughKeymap, toggleStrikethroughCommand, } from '@milkdown/kit/preset/gfm';
+import { strikethroughKeymap, tableKeymap, toggleStrikethroughCommand, } from '@milkdown/kit/preset/gfm';
 import { NodeRange, Fragment, Slice, } from '@milkdown/kit/prose/model';
 import { keydownHandler, keymap } from '@milkdown/kit/prose/keymap';
+import { goToNextCell } from '@milkdown/kit/prose/tables';
 import { liftListItem } from '@milkdown/kit/prose/schema-list';
 import { findWrapping, liftTarget } from '@milkdown/kit/prose/transform';
 import { AllSelection, NodeSelection, Plugin, PluginKey, Selection, TextSelection, } from '@milkdown/kit/prose/state';
 import { $prose, callCommand, replaceAll, } from '@milkdown/kit/utils';
 import { codeCopyPlugin, placeholderPlugin } from './decorations.js';
+import { labelsCtx, defaultLabels } from './labels.js';
 import { createDialect, stringifyOptions } from './dialect.js';
 import { Preservation } from './preserve.js';
 import { sourceAttribute, cleanSourceDoc, editedPlainSource, sourceSelection, revealSourceCaret, rawOffset, normalizedOffset, } from './source.js';
 import { normaliseLabel, referenceDefinitions, footnoteDefinitions, } from './references.js';
 import { selectionMarkdown, selectionContent, referenceMetadata, withReferenceMetadata, } from './reference-clipboard.js';
 import { imageView } from './images.js';
-import { tablePlugins, tableCommand, configureTableMovement, } from './tables.js';
+import { tablePlugins, tableCommand, tableCommands, tableAvailability, tableContext, configureTableMovement, } from './tables.js';
 import { InkKitError, } from './types.js';
 import { highlightPlugin } from './highlight.js';
 import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
@@ -36,6 +38,9 @@ const shortcutCommands = {
     heading1: ['heading', 1],
     heading2: ['heading', 2],
     heading3: ['heading', 3],
+    heading4: ['heading', 4],
+    heading5: ['heading', 5],
+    heading6: ['heading', 6],
     paragraph: ['paragraph'],
     bold: ['bold'],
     italic: ['italic'],
@@ -257,12 +262,20 @@ export class InkKitEditor {
     pasteController;
     plain;
     root;
+    ownsRootClass = false;
     clickHandler;
     footnoteKeyHandler;
     copyHandler;
     originalSource = '';
     generation = 0;
+    reportingSuppressed = false;
     loading = false;
+    writable = true;
+    inputPreferences = {};
+    policyEpoch = 0;
+    literalKeys = () => false;
+    configuredKeys = {};
+    readOnlyKeys = () => false;
     changePlugin = $prose(() => new Plugin({
         key: new PluginKey('documentChanges'),
         view: () => ({
@@ -301,6 +314,8 @@ export class InkKitEditor {
     constructor(events, options) {
         this.events = events;
         this.options = options;
+        this.writable = options.editable ?? true;
+        this.inputPreferences = { ...options.textInput };
     }
     context() {
         return {
@@ -326,6 +341,212 @@ export class InkKitEditor {
         if (this.pasteController.pending)
             throw new InkKitError('operation-pending', 'An image import is in progress');
     }
+    assertMutation(generation = this.generation) {
+        this.assertCurrent(generation);
+        if (!this.writable)
+            throw new InkKitError('read-only', 'The editor is read-only');
+    }
+    get composing() {
+        return this.literalSurface
+            ? this.plainComposing
+            : this.editor.ctx.get(editorViewCtx).composing;
+    }
+    get editable() {
+        this.assertAlive();
+        return this.writable;
+    }
+    setEditable(editable) {
+        this.assertAlive();
+        if (this.composing)
+            throw new InkKitError('composition', 'Text composition is in progress');
+        if (this.writable === editable)
+            return;
+        const suppressed = this.reportingSuppressed;
+        this.reportingSuppressed = true;
+        try {
+            this.writable = editable;
+            this.policyEpoch += 1;
+            if (!editable)
+                this.pasteController.cancelPending();
+            this.editor.ctx
+                .get(editorViewCtx)
+                .dom.dispatchEvent(new Event('inkkit-cancel-resize'));
+            this.applyInputPolicy();
+        }
+        finally {
+            this.reportingSuppressed = suppressed;
+        }
+        this.publishCommandState();
+    }
+    setTextInputPreferences(preferences) {
+        this.assertAlive();
+        if (this.composing)
+            throw new InkKitError('composition', 'Text composition is in progress');
+        const suppressed = this.reportingSuppressed;
+        this.reportingSuppressed = true;
+        try {
+            this.inputPreferences = { ...preferences };
+            this.applyInputPolicy();
+        }
+        finally {
+            this.reportingSuppressed = suppressed;
+        }
+        this.publishCommandState();
+    }
+    applyInputPolicy() {
+        const view = this.editor.ctx.get(editorViewCtx);
+        const attributes = typeof view.props.attributes === 'function'
+            ? view.props.attributes(view.state)
+            : view.props.attributes;
+        view.setProps({
+            editable: () => this.writable && !this.literalSurface,
+            attributes: {
+                ...attributes,
+                role: 'textbox',
+                'aria-multiline': 'true',
+                'aria-label': this.options.labels?.formattedEditor ?? defaultLabels.formattedEditor,
+            },
+        });
+        this.plain.readOnly = !this.writable;
+        for (const surface of [view.dom, this.plain]) {
+            for (const name of [
+                'spellcheck',
+                'autocorrect',
+                'autocapitalize',
+            ]) {
+                const value = this.inputPreferences[name];
+                if (value == null)
+                    surface.removeAttribute(name);
+                else
+                    surface.setAttribute(name, name === 'autocorrect' ? (value ? 'on' : 'off') : String(value));
+            }
+        }
+    }
+    publishCommandState() {
+        if (!this.ready ||
+            this.loading ||
+            this.reportingSuppressed ||
+            this.destroyed)
+            return;
+        this.events.commandStateChanged?.(this.commandState());
+    }
+    commandState(expectedGeneration = this.generation) {
+        this.assertAlive();
+        if (!this.ready)
+            throw new InkKitError('not-ready', 'No document has been loaded');
+        if (expectedGeneration !== this.generation)
+            throw new InkKitError('stale-document', 'Document changed');
+        const view = this.editor.ctx.get(editorViewCtx);
+        const { state } = view;
+        const mutable = this.writable && !this.composing && !this.pasteController.pending;
+        const formatted = mutable && !this.literalSurface;
+        const manager = this.editor.ctx.get(commandsCtx);
+        const check = (key, payload) => formatted && manager.get(key)(payload)(state);
+        const format = {
+            heading: check(wrapInHeadingCommand.key, 1) || check(turnIntoTextCommand.key),
+            paragraph: check(turnIntoTextCommand.key),
+            bold: check(toggleStrongCommand.key),
+            italic: check(toggleEmphasisCommand.key),
+            strikethrough: check(toggleStrikethroughCommand.key),
+            highlight: check(toggleHighlightCommand.key),
+            code: formatted &&
+                (state.selection.empty
+                    ? state.selection.$from.parent.inlineContent &&
+                        state.selection.$from.parent.type.allowsMarkType(inlineCodeSchema.type(this.editor.ctx))
+                    : check(toggleInlineCodeCommand.key)),
+            codeBlock: check(createCodeBlockCommand.key, '') || check(turnIntoTextCommand.key),
+            quote: formatted && this.canQuote(state),
+            bulletList: formatted &&
+                (innermostListDepth(textBounds(state).$from) != null ||
+                    check(wrapInBulletListCommand.key)),
+            orderedList: formatted &&
+                (innermostListDepth(textBounds(state).$from) != null ||
+                    check(wrapInOrderedListCommand.key)),
+            taskList: formatted &&
+                (innermostListDepth(textBounds(state).$from) != null ||
+                    check(wrapInBulletListCommand.key)),
+            link: check(toggleLinkCommand.key, {}),
+        };
+        const tables = formatted
+            ? tableAvailability(this.editor.ctx)
+            : Object.fromEntries(tableCommands.map((name) => [name, false]));
+        return {
+            documentId: this.documentId,
+            generation: this.generation,
+            revision: this.revision,
+            format: this.formatType,
+            mode: this.editingMode,
+            editable: this.writable,
+            composing: this.composing,
+            pending: this.pasteController.pending,
+            caret: this.literalSurface
+                ? { marks: [], block: { type: 'paragraph' }, quoted: false }
+                : caretState(state),
+            table: this.literalSurface ? undefined : tableContext(state),
+            commands: {
+                undo: mutable && undoHistory(state),
+                redo: mutable && redoHistory(state),
+                insertText: mutable,
+                paste: mutable,
+                replace: mutable,
+                replaceSource: mutable,
+                insertImages: formatted && !!this.options.images,
+                insertPaths: mutable,
+                insertFootnote: formatted,
+                editReferenceDefinition: formatted && referenceDefinitions(state.doc).size > 0,
+                format,
+                table: tables,
+            },
+        };
+    }
+    canQuote(state) {
+        const { $from, $to } = textBounds(state);
+        if (quoted($from, $to)) {
+            const range = $from.blockRange($to, (node) => node.type.name === 'blockquote');
+            return !!range && liftTarget(range) != null;
+        }
+        const type = blockquoteSchema.type(this.editor.ctx);
+        let range = $from.blockRange($to);
+        if (range && findWrapping(range, type))
+            return true;
+        const depth = outermostListDepth($from);
+        if (depth == null)
+            return false;
+        range = new NodeRange(state.doc.resolve($from.before(depth)), state.doc.resolve($from.after(depth)), depth - 1);
+        return !!findWrapping(range, type);
+    }
+    policyPlugin = $prose(() => new Plugin({
+        key: new PluginKey('inkkitInputPolicy'),
+        filterTransaction: (tr) => this.loading ||
+            this.writable ||
+            (!tr.docChanged && !tr.storedMarksSet),
+        props: {
+            editable: () => this.writable && !this.literalSurface,
+            handleDOMEvents: {
+                compositionstart: () => {
+                    queueMicrotask(() => this.publishCommandState());
+                    return false;
+                },
+                compositionend: () => {
+                    queueMicrotask(() => this.publishCommandState());
+                    return false;
+                },
+                beforeinput: (_view, event) => {
+                    if (this.writable)
+                        return false;
+                    event.preventDefault();
+                    return true;
+                },
+                drop: (_view, event) => {
+                    if (this.writable)
+                        return false;
+                    event.preventDefault();
+                    return true;
+                },
+            },
+        },
+        view: () => ({ update: () => this.publishCommandState() }),
+    }));
     get literalSurface() {
         return this.formatType === 'txt' || this.mode === 'source';
     }
@@ -362,23 +583,37 @@ export class InkKitEditor {
             this.plain.value = text;
             this.plain.setSelectionRange(this.plain.value.length, this.plain.value.length);
         }
-        this.updateSurface();
+        const suppressed = this.reportingSuppressed;
+        this.reportingSuppressed = true;
+        try {
+            this.updateSurface();
+        }
+        finally {
+            this.reportingSuppressed = suppressed;
+        }
         this.events.stateChanged(this.literalSurface
             ? { marks: [], block: { type: 'paragraph' }, quoted: false }
             : caretState(this.editor.ctx.get(editorViewCtx).state));
+        this.publishCommandState();
         return true;
     }
     updateSurface() {
         this.plain.hidden = !this.literalSurface;
-        this.plain.setAttribute('aria-label', this.formatType === 'txt' ? 'Plain text editor' : 'Markdown source');
+        this.applyInputPolicy();
+        this.plain.setAttribute('aria-label', this.formatType === 'txt'
+            ? (this.options.labels?.plainTextEditor ??
+                defaultLabels.plainTextEditor)
+            : (this.options.labels?.sourceEditor ?? defaultLabels.sourceEditor));
         this.editor.ctx.get(editorViewCtx).dom.parentElement.hidden =
             this.literalSurface;
     }
     replaceSource(text, expectedGeneration) {
-        this.assertCurrent(expectedGeneration);
+        this.assertMutation(expectedGeneration);
         return this.applySource(text, true);
     }
     applySource(text, isolated, from, to) {
+        if (!this.writable)
+            throw new InkKitError('read-only', 'The editor is read-only');
         if (typeof text !== 'string')
             throw new TypeError('Source must be a string');
         if (text === this.currentText())
@@ -433,12 +668,12 @@ export class InkKitEditor {
         return true;
     }
     undo(expectedGeneration) {
-        this.assertCurrent(expectedGeneration);
+        this.assertMutation(expectedGeneration);
         const view = this.editor.ctx.get(editorViewCtx);
         return undoHistory(view.state, view.dispatch);
     }
     redo(expectedGeneration) {
-        this.assertCurrent(expectedGeneration);
+        this.assertMutation(expectedGeneration);
         const view = this.editor.ctx.get(editorViewCtx);
         return redoHistory(view.state, view.dispatch);
     }
@@ -583,7 +818,7 @@ export class InkKitEditor {
         return result;
     }
     async paste(input) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface || input.plainText) {
             this.pasteAsPlainText(this.mode === 'source' && this.formatType === 'md'
                 ? (input.markdown ?? input.text)
@@ -597,7 +832,7 @@ export class InkKitEditor {
         setCommentVisibility(this.editor.ctx.get(editorViewCtx), visible);
     }
     pasteAsPlainText(text) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface) {
             this.replaceLiteralSelection(text, true, this.formatType === 'md');
         }
@@ -636,7 +871,7 @@ export class InkKitEditor {
         }
     }
     table(command, options) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface)
             return false;
         return tableCommand(this.editor.ctx, command, options);
@@ -657,6 +892,8 @@ export class InkKitEditor {
         }
         this.plain.remove();
         await this.editor.destroy();
+        if (this.ownsRootClass)
+            this.root.classList.remove('inkkit-root');
     }
     // The app's bindings, replaced whole whenever they change; the plugin stays.
     keymapPlugin = $prose(() => new Plugin({
@@ -683,7 +920,8 @@ export class InkKitEditor {
                 if (node.type.name === 'image' || isMermaid(node))
                     portable = true;
             });
-            const cut = event.type === 'cut';
+            const cut = event.type === 'cut' && this.writable;
+            const policyEpoch = this.policyEpoch;
             const epoch = this.documentEpoch;
             if (portable && this.events.clipboard) {
                 void this.clipboardSnapshot(false)
@@ -694,8 +932,9 @@ export class InkKitEditor {
                         throw new InkKitError('image-unavailable', 'The selected content could not be cut safely');
                     await this.events.clipboard(content);
                     if (cut) {
-                        this.assertCurrent(snapshot.generation);
+                        this.assertMutation(snapshot.generation);
                         if (epoch !== this.documentEpoch ||
+                            policyEpoch !== this.policyEpoch ||
                             snapshot.revision !== this.revision)
                             throw new InkKitError('stale-document', 'Document changed before cutting');
                         this.plain.setSelectionRange(from, to);
@@ -725,17 +964,24 @@ export class InkKitEditor {
     static async mount(root, events, options = {}) {
         const instance = new InkKitEditor(events, options);
         instance.root = root;
+        instance.ownsRootClass = !root.classList.contains('inkkit-root');
+        root.classList.add('inkkit-root');
         instance.pasteController = new PasteController({
             ctx: () => instance.editor.ctx,
             context: () => instance.context(),
             adapter: options.images,
             onError: (error) => events.error?.(error instanceof Error ? error : new Error(String(error))),
             literalText: () => instance.literalSurface,
-            editable: () => !instance.literalSurface,
+            editable: () => instance.writable && !instance.literalSurface,
+            onPendingChanged: () => instance.publishCommandState(),
         });
         instance.editor = await Editor.make()
             .config((ctx) => {
             ctx.set(rootCtx, root);
+            ctx.update(labelsCtx.key, () => ({
+                ...defaultLabels,
+                ...options.labels,
+            }));
             ctx.set(defaultValueCtx, '');
             ctx.set(remarkStringifyOptionsCtx, stringifyOptions);
             // The preset also binds Mod-[ and Mod-] here; the app uses those for back and forward.
@@ -754,6 +1000,8 @@ export class InkKitEditor {
                 }
                 return cleared;
             });
+            unbind(tableKeymap, ['NextCell', 'PrevCell']);
+            unbind(historyKeymap);
             unbind(strongKeymap);
             unbind(emphasisKeymap);
             unbind(inlineCodeKeymap);
@@ -772,7 +1020,8 @@ export class InkKitEditor {
                 scrollMargin: { top: 8, right: 0, bottom: 24, left: 0 },
             }));
         })
-            .use(caretStatePlugin(events, () => !instance.literalSurface))
+            .use(labelsCtx)
+            .use(caretStatePlugin(events, () => !instance.loading && !instance.literalSurface))
             .use(instance.pasteController.plugin)
             .use(visibleClipboard)
             .use(instance.keymapPlugin)
@@ -793,12 +1042,13 @@ export class InkKitEditor {
             .use(mermaidPreview((error) => events.error?.(error)))
             .use(selectionPlugin)
             .use($prose(() => search()))
+            .use(instance.policyPlugin)
             .use(options.images ? imageView(options.images) : [])
             .create();
         configureTableMovement(instance.editor.ctx, () => {
             try {
                 instance.assertCurrent();
-                return !instance.literalSurface;
+                return instance.writable && !instance.literalSurface;
             }
             catch {
                 return false;
@@ -809,7 +1059,11 @@ export class InkKitEditor {
         instance.plain.setAttribute('aria-label', 'Plain text editor');
         instance.plain.hidden = true;
         root.append(instance.plain);
-        instance.plain.addEventListener('beforeinput', () => {
+        instance.plain.addEventListener('beforeinput', (event) => {
+            if (!instance.writable) {
+                event.preventDefault();
+                return;
+            }
             if (instance.ready && instance.literalSurface)
                 instance.beforePlainInput = {
                     from: instance.plain.selectionStart,
@@ -819,6 +1073,10 @@ export class InkKitEditor {
         instance.plain.addEventListener('input', () => {
             if (!instance.ready || !instance.literalSurface)
                 return;
+            if (!instance.writable) {
+                instance.plain.value = instance.currentText();
+                return;
+            }
             try {
                 instance.applySource(editedPlainSource(instance.currentText(), instance.plain.value), false, instance.plain.selectionStart, instance.plain.selectionEnd);
             }
@@ -830,22 +1088,18 @@ export class InkKitEditor {
             }
         });
         instance.plain.addEventListener('keydown', (event) => {
-            if (instance.plainComposing || !(event.metaKey || event.ctrlKey))
+            if (instance.plainComposing)
                 return;
-            if (event.key.toLowerCase() !== 'z' && event.key.toLowerCase() !== 'y')
-                return;
-            event.preventDefault();
-            try {
-                if (event.key.toLowerCase() === 'y' || event.shiftKey)
-                    instance.redo();
-                else
-                    instance.undo();
-            }
-            catch (error) {
-                events.error?.(error instanceof Error ? error : new Error(String(error)));
-            }
+            if (instance.literalKeys(instance.editor.ctx.get(editorViewCtx), event))
+                event.preventDefault();
         });
+        for (const event of ['select', 'keyup', 'click'])
+            instance.plain.addEventListener(event, () => instance.publishCommandState());
         instance.plain.addEventListener('paste', (event) => {
+            if (!instance.writable) {
+                event.preventDefault();
+                return;
+            }
             if (!event.clipboardData)
                 return;
             event.preventDefault();
@@ -858,9 +1112,11 @@ export class InkKitEditor {
         });
         instance.plain.addEventListener('compositionstart', () => {
             instance.plainComposing = true;
+            instance.publishCommandState();
         });
         instance.plain.addEventListener('compositionend', () => {
             instance.plainComposing = false;
+            instance.publishCommandState();
         });
         const activateFootnote = (event) => {
             const element = event.target.closest('[data-inkkit-footnote-reference]');
@@ -936,7 +1192,7 @@ export class InkKitEditor {
                     event.clipboardData.setData('text/html', metadata != null
                         ? withReferenceMetadata(output.html, metadata)
                         : output.html);
-                    if (event.type === 'cut')
+                    if (event.type === 'cut' && instance.writable)
                         view.dispatch(view.state.tr.deleteSelection().scrollIntoView());
                 }
                 catch (error) {
@@ -949,7 +1205,8 @@ export class InkKitEditor {
             if (events.clipboard) {
                 const epoch = instance.documentEpoch, revision = instance.revision;
                 const { from, to } = view.state.selection;
-                const cut = event.type === 'cut';
+                const cut = event.type === 'cut' && instance.writable;
+                const policyEpoch = instance.policyEpoch;
                 void instance
                     .clipboardSnapshot(false)
                     .then(async (content) => {
@@ -959,8 +1216,9 @@ export class InkKitEditor {
                         throw new InkKitError('image-unavailable', 'The selected content could not be cut safely');
                     await events.clipboard(content);
                     if (cut) {
-                        instance.assertCurrent();
+                        instance.assertMutation();
                         if (epoch !== instance.documentEpoch ||
+                            policyEpoch !== instance.policyEpoch ||
                             revision !== instance.revision)
                             throw new InkKitError('stale-document', 'Document changed before cutting');
                         view.dispatch(view.state.tr.deleteRange(from, to).scrollIntoView());
@@ -978,10 +1236,13 @@ export class InkKitEditor {
         };
         root.addEventListener('copy', instance.copyHandler, true);
         root.addEventListener('cut', instance.copyHandler, true);
+        instance.applyInputPolicy();
+        instance.setKeymap(options.keymap ?? {});
         return instance;
     }
     loadDocument(input) {
         this.assertAlive();
+        this.ready = false;
         this.pasteController.cancelPending();
         this.documentEpoch += 1;
         this.outlineEpoch += 1;
@@ -998,8 +1259,12 @@ export class InkKitEditor {
         this.load(input.format === 'txt' ? '' : input.text, input.generation);
         this.originalSource = input.text;
         this.lastMarkdown = input.text;
-        this.ready = true;
         this.updateSurface();
+        this.ready = true;
+        this.events.stateChanged(this.literalSurface
+            ? { marks: [], block: { type: 'paragraph' }, quoted: false }
+            : caretState(this.editor.ctx.get(editorViewCtx).state));
+        this.publishCommandState();
     }
     reloadDocument(input) {
         this.assertAlive();
@@ -1013,19 +1278,26 @@ export class InkKitEditor {
         const end = wasLiteral ? this.plain.selectionEnd : at;
         const top = this.root.scrollTop;
         const plainTop = this.plain.scrollTop, plainLeft = this.plain.scrollLeft;
-        this.loadDocument(input);
-        if (previousFormat === 'md' &&
-            input.format === 'md' &&
-            previousMode === 'source')
-            this.setEditingMode('source', input.generation);
-        if (this.literalSurface)
-            this.plain.setSelectionRange(Math.min(at, this.plain.value.length), Math.min(end, this.plain.value.length));
-        else
-            view.dispatch(view.state.tr.setSelection(Selection.near(view.state.doc.resolve(Math.min(at, view.state.doc.content.size)))));
-        this.root.scrollTop = top;
-        if (wasLiteral && this.literalSurface) {
-            this.plain.scrollTop = plainTop;
-            this.plain.scrollLeft = plainLeft;
+        this.reportingSuppressed = true;
+        try {
+            this.loadDocument(input);
+            if (previousFormat === 'md' &&
+                input.format === 'md' &&
+                previousMode === 'source')
+                this.setEditingMode('source', input.generation);
+            if (this.literalSurface)
+                this.plain.setSelectionRange(Math.min(at, this.plain.value.length), Math.min(end, this.plain.value.length));
+            else
+                view.dispatch(view.state.tr.setSelection(Selection.near(view.state.doc.resolve(Math.min(at, view.state.doc.content.size)))));
+            this.root.scrollTop = top;
+            if (wasLiteral && this.literalSurface) {
+                this.plain.scrollTop = plainTop;
+                this.plain.scrollLeft = plainLeft;
+            }
+        }
+        finally {
+            this.reportingSuppressed = false;
+            this.publishCommandState();
         }
     }
     load(markdown, generation) {
@@ -1048,7 +1320,6 @@ export class InkKitEditor {
         const end = Selection.findFrom(doc.resolve(doc.content.size), -1, true) ??
             Selection.atEnd(doc);
         view.dispatch(setSearchState(view.state.tr.setSelection(end).scrollIntoView(), new SearchQuery({ search: '' })));
-        this.events.stateChanged(caretState(view.state));
     }
     find(text, expectedGeneration) {
         this.assertCurrent(expectedGeneration);
@@ -1084,11 +1355,11 @@ export class InkKitEditor {
         findFormatted(this.editor.ctx.get(editorViewCtx), text);
     }
     replace(search, replacement, expectedGeneration) {
-        this.assertCurrent(expectedGeneration);
+        this.assertMutation(expectedGeneration);
         return this.replaceMatches(search, replacement, false) > 0;
     }
     replaceAll(search, replacement, expectedGeneration) {
-        this.assertCurrent(expectedGeneration);
+        this.assertMutation(expectedGeneration);
         return this.replaceMatches(search, replacement, true);
     }
     replaceMatches(search, replacement, all) {
@@ -1159,7 +1430,7 @@ export class InkKitEditor {
             : this.editor.ctx.get(editorViewCtx).composing) &&
             generation === this.generation)
             return false;
-        this.assertCurrent(generation);
+        this.assertMutation(generation);
         if (this.literalSurface) {
             this.replaceLiteralSelection(text, false);
             return true;
@@ -1183,11 +1454,38 @@ export class InkKitEditor {
             generation === this.generation)
             return false;
         this.assertCurrent(generation);
+        const configuredEvent = new KeyboardEvent('keydown', {
+            key,
+            code,
+            metaKey,
+            ctrlKey,
+            altKey,
+            shiftKey,
+            bubbles: true,
+            cancelable: true,
+        });
+        if (!this.literalSurface && altKey && key === 'Enter')
+            return this.navigateFootnote(shiftKey ? 'reference' : 'definition');
+        if (!this.writable &&
+            !this.literalSurface &&
+            key === 'Tab' &&
+            !metaKey &&
+            !ctrlKey &&
+            !altKey) {
+            const view = this.editor.ctx.get(editorViewCtx);
+            return goToNextCell(shiftKey ? -1 : 1)(view.state, view.dispatch);
+        }
+        if (!this.writable) {
+            if (['Enter', 'Tab', 'Backspace', 'Delete'].includes(key))
+                this.assertMutation(generation);
+            this.readOnlyKeys(this.editor.ctx.get(editorViewCtx), configuredEvent);
+        }
         if (this.literalSurface) {
-            if ((metaKey || ctrlKey) && key.toLowerCase() === 'z')
-                return shiftKey ? this.redo(generation) : this.undo(generation);
-            if ((metaKey || ctrlKey) && key.toLowerCase() === 'y')
-                return this.redo(generation);
+            if (this.literalKeys(this.editor.ctx.get(editorViewCtx), configuredEvent))
+                return true;
+            if (!this.writable &&
+                ['Enter', 'Tab', 'Backspace', 'Delete'].includes(key))
+                throw new InkKitError('read-only', 'The editor is read-only');
             if (metaKey || ctrlKey || altKey)
                 return false;
             if (key === 'Enter' || key === 'Tab') {
@@ -1237,21 +1535,58 @@ export class InkKitEditor {
      *  order, so a key given to two shortcuts lands the same way every time. */
     setKeymap(keymap) {
         this.assertAlive();
+        this.configuredKeys = {
+            undo: ['Mod-z'],
+            redo: ['Mod-y', 'Shift-Mod-z'],
+            tableExit: ['Mod-Enter', 'Enter'],
+            ...keymap,
+        };
         const bindings = {};
+        // Consuming unbound history keys prevents the browser's separate undo stack
+        // from changing source/TXT outside the shared document history.
+        const historyBindings = Object.fromEntries(['Mod-z', 'Mod-y', 'Shift-Mod-z'].map((key) => [key, () => true]));
+        for (const name of ['undo', 'redo']) {
+            for (const key of this.configuredKeys[name] ?? []) {
+                historyBindings[key] = () => {
+                    if (!this.ready || !this.commandState().commands[name])
+                        return true;
+                    return this[name]();
+                };
+            }
+        }
+        Object.assign(bindings, historyBindings);
         for (const [name, command] of Object.entries(shortcutCommands)) {
             for (const key of keymap[name] ?? []) {
                 bindings[key] = () => {
+                    if (!this.ready || !this.commandState().commands.format[command[0]])
+                        return true;
                     this.format(...command);
                     return true;
                 };
             }
         }
+        for (const command of tableCommands) {
+            const name = 'table' + command[0].toUpperCase() + command.slice(1);
+            for (const key of this.configuredKeys[name] ?? [])
+                bindings[key] = () => {
+                    if (!this.ready || !this.commandState().commands.table[command])
+                        return false;
+                    return this.table(command);
+                };
+        }
+        this.readOnlyKeys = keydownHandler(Object.fromEntries(Object.keys(bindings).map((key) => [
+            key,
+            () => {
+                throw new InkKitError('read-only', 'The editor is read-only');
+            },
+        ])));
         this.keys = keydownHandler(bindings);
+        this.literalKeys = keydownHandler(historyBindings);
     }
     /** Dropped files land as one paragraph per path at the drop point: in place of an empty block, after
      *  the top-level block otherwise, so a list or quote is not opened up by them. */
     insertPaths(paths, x, y) {
-        this.assertCurrent();
+        this.assertMutation();
         if (paths.length === 0)
             return;
         if (this.literalSurface) {
@@ -1262,7 +1597,7 @@ export class InkKitEditor {
         this.insertBlocks(paths.map((path) => schema.nodes.paragraph.create(null, schema.text(path))), x, y);
     }
     insertImages(images, x, y) {
-        this.assertCurrent();
+        this.assertMutation();
         if (!images.length)
             return;
         if (!this.options.images || this.literalSurface)
@@ -1420,7 +1755,7 @@ export class InkKitEditor {
         view.dispatch(view.state.tr.lift(range, target));
     }
     format(command, arg) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface)
             return;
         const run = (cmd, payload) => this.editor.action(callCommand(cmd, payload));
@@ -1494,7 +1829,7 @@ export class InkKitEditor {
         this.focus();
     }
     editReferenceDefinition(label, destination, title) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface)
             return false;
         const view = this.editor.ctx.get(editorViewCtx);
@@ -1511,7 +1846,7 @@ export class InkKitEditor {
         return true;
     }
     insertFootnote(label) {
-        this.assertCurrent();
+        this.assertMutation();
         if (this.literalSurface)
             return;
         const view = this.editor.ctx.get(editorViewCtx);