@aicayzer/inkkit 0.0.16 → 0.0.18

package/dist/editor.d.ts

@@ -100,6 +100,12 @@ export declare class InkKitEditor {
     private plainSearch;
     private literalMatch?;
     private beforePlainInput?;
+    private pendingSource?;
+    private typedSteps;
+    private undoneSteps;
+    private formattedUndone;
+    private lastSourceInput;
+    private syncingSource;
     private mode;
     private sourcePreservations;
     private sourceTexts;
@@ -154,11 +160,33 @@ export declare class InkKitEditor {
     private updateSurface;
     replaceSource(text: string, expectedGeneration?: number): boolean;
     private applySource;
+    /**
+     * Takes typed source without parsing it. Parsing, preservation and replacing
+     * the formatted document cost as much as a document load, so they wait for
+     * the next thing that needs them.
+     */
+    private deferSource;
+    private rememberTypedStep;
+    private showTypedSource;
+    /**
+     * Undoes or redoes typed source that the formatted document has not taken
+     * in, on the text alone. Returns whether there was a step to take.
+     */
+    private stepTypedSource;
+    /** Brings the formatted document up to the source that was typed. */
+    private settleSource;
+    private commitSource;
     undo(expectedGeneration?: number): boolean;
     redo(expectedGeneration?: number): boolean;
     private replaceLiteralSelection;
     snapshot(expectedGeneration?: number): DocumentSnapshot;
     printableSnapshot(expectedGeneration?: number): Promise<PrintableDocument>;
+    /**
+     * The document to export. Source typed in the source editor has not reached
+     * the formatted document, which would merge its undo steps, so a document
+     * read from the text stands in without touching history.
+     */
+    private exportDocument;
     clipboardSnapshot(all?: boolean): Promise<ClipboardOutput>;
     paste(input: ClipboardInput): Promise<void>;
     setCommentsVisible(visible: boolean): void;
@@ -180,7 +208,9 @@ export declare class InkKitEditor {
         reveal?: boolean;
     }): void;
     /** Throws when a document reached by an edit, after every appended normalisation, cannot be
-     *  saved as preserved Markdown. Dispatch and the replacement commands share this check. */
+     *  saved as preserved Markdown. Dispatch and the replacement commands share this check.
+     *  `written` is false for history steps and source replacement, which restore or supply a
+     *  document that may hold comment text the formatted editor would refuse to accept typed. */
     private assertPreserved;
     replaceTextRange(range: TextRange, text: string): boolean;
     textRangeRects(range: TextRange): readonly TextRect[];
@@ -214,6 +244,7 @@ export declare class InkKitEditor {
         alt: string;
         title?: string;
     }[], x?: number, y?: number): void;
+    private insertInline;
     private insertBlocks;
     private withMarkRunSelected;
     private toggleInlineCode;

package/dist/editor.js

@@ -3,7 +3,8 @@ import { visibleClipboard, portableClipboard, clipboardText, clipboardContent, }
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 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 { cursor } from './cursor.js';
+import { blockDropRange } from './drop-placement.js';
 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, tableKeymap, toggleStrikethroughCommand, } from '@milkdown/kit/preset/gfm';
 import { NodeRange, Fragment, Slice, } from '@milkdown/kit/prose/model';
@@ -18,10 +19,10 @@ import { labelsCtx, defaultLabels } from './labels.js';
 import { createDialect, stringifyOptions } from './dialect.js';
 import { Preservation } from './preserve.js';
 import { sourceAttribute, cleanSourceDoc, editedPlainSource, sourceSelection, rawOffset, normalizedOffset, } from './source.js';
-import { normaliseLabel, referenceDefinitions, footnoteDefinitions, } from './references.js';
+import { normaliseLabel, referenceDefinitions, footnoteDefinitions, singleLine, } from './references.js';
 import { selectionMarkdown, selectionContent, referenceMetadata, withReferenceMetadata, } from './reference-clipboard.js';
 import { imageView } from './images.js';
-import { isImage, isImageBlock } from './image-blocks.js';
+import { imagePlacement, isImage, isImageBlock } from './image-blocks.js';
 import { GapCursor } from '@milkdown/kit/prose/gapcursor';
 import { wikiLinkView } from './wiki-view.js';
 import { withFileSignal } from './files.js';
@@ -29,14 +30,15 @@ import { tablePlugins, tableCommand, tableCommands, tableAvailability, tableCont
 import { InkKitError, } from './types.js';
 import { readableProjection, projectionPosition, projectionOffset, validateOffsets, formattedRects, literalRangesRects, literalVisibleRanges, intersectsViewport, textRect, } from './text-ranges.js';
 import { highlightKeymap, toggleHighlightCommand } from './inline-highlight.js';
-import { commentSelectionContent, setCommentVisibility } from './comments.js';
+import { assertCommentsEndWhereWritten, commentSelectionContent, isWrittenEdit, setCommentVisibility, sourceReplacement, } from './comments.js';
+import { scrollOutward, scrollWholePixels } from './scroll.js';
 import { PasteController } from './paste.js';
 import { selectionPlugin } from './selection.js';
 import { search, SearchQuery, setSearchState } from 'prosemirror-search';
 import { findFormatted, findLiteral, replaceFormatted, replaceLiteral, replaceFormattedRange, } from './search.js';
 import { collectFormattedHeadings, collectSourceHeadings, navigateFormattedHeading, sourceHeadingPosition, } from './outline.js';
 import { taskListPlugin, toggleTaskList } from './tasks.js';
-import { isMermaid, mermaidPreview } from './mermaid.js';
+import { diagramsAvailable, isMermaid, mermaidPreview } from './mermaid.js';
 import { hasAuthoredImagesInLiterals, printableMarkdown, printableText, } from './print.js';
 const shortcutCommands = {
     heading1: ['heading', 1],
@@ -244,6 +246,12 @@ function joinLists(tr, start, index) {
         tr.join($start.posAtIndex(index));
 }
 let editorSequence = 0;
+// A pause in source typing longer than this ends an undo step, as in the
+// formatted editor's history.
+const sourceGroupDelay = 500;
+// Earlier undo steps of typed source that the formatted document has not taken
+// in; the oldest merge into the next beyond this many.
+const sourceStepLimit = 100;
 export class InkKitEditor {
     events;
     options;
@@ -259,6 +267,21 @@ export class InkKitEditor {
     plainSearch = '';
     literalMatch;
     beforePlainInput;
+    // Source typed in the source editor that the hidden formatted document has
+    // not taken in yet. The text is already authoritative: snapshots, change
+    // events and the textarea use it, and anything that reads the formatted
+    // document first settles it. Undo steps taken inside it need no document,
+    // so they run on the text alone: `typedSteps` hold the states at the end of
+    // earlier typing, `pendingSource` the latest, and `undoneSteps` what undo
+    // set aside.
+    pendingSource;
+    typedSteps = [];
+    undoneSteps = [];
+    // Formatted-history undos taken while source steps were undone, which a
+    // redo replays before it reaches those steps.
+    formattedUndone = 0;
+    lastSourceInput = 0;
+    syncingSource = false;
     mode = 'formatted';
     sourcePreservations = new WeakMap();
     sourceTexts = new WeakMap();
@@ -298,6 +321,12 @@ export class InkKitEditor {
             update: (view, previous) => {
                 if (this.loading || view.state.doc.eq(previous.doc))
                     return;
+                // Settling typed source brings the document up to a revision and a
+                // change event that were already reported.
+                if (this.syncingSource) {
+                    this.mediaPolicy();
+                    return;
+                }
                 this.revision += 1;
                 this.cancelExports();
                 this.mediaPolicy();
@@ -533,8 +562,10 @@ export class InkKitEditor {
                 : caretState(state),
             table: this.literalSurface ? undefined : tableContext(state),
             commands: {
-                undo: mutable && undoHistory(state),
-                redo: mutable && redoHistory(state),
+                undo: mutable && (!!this.pendingSource || undoHistory(state)),
+                redo: mutable &&
+                    (this.undoneSteps.length > 0 ||
+                        (!this.pendingSource && redoHistory(state))),
                 insertText: mutable,
                 paste: mutable,
                 replace: mutable,
@@ -568,6 +599,8 @@ export class InkKitEditor {
         key: new PluginKey('inkkitInputPolicy'),
         filterTransaction: (tr) => this.loading ||
             this.writable ||
+            // Source that was typed while the editor was writable.
+            this.syncingSource ||
             (!tr.docChanged && !tr.storedMarksSet),
         props: {
             editable: () => this.writable && !this.literalSurface,
@@ -603,7 +636,10 @@ export class InkKitEditor {
         this.assertAlive();
         return this.literalSurface ? 'source' : 'formatted';
     }
-    currentText(doc = this.editor.ctx.get(editorViewCtx).state.doc) {
+    currentText(doc) {
+        if (!doc && this.pendingSource)
+            return this.pendingSource.text;
+        doc ??= this.editor.ctx.get(editorViewCtx).state.doc;
         const cached = this.sourceTexts.get(doc);
         if (cached !== undefined)
             return cached;
@@ -628,6 +664,10 @@ export class InkKitEditor {
             throw new RangeError('Editing mode must be source or formatted');
         if (this.formatType === 'txt' || this.mode === mode)
             return false;
+        this.settleSource();
+        // Source steps that were undone cannot be redone from the other mode.
+        this.undoneSteps = [];
+        this.formattedUndone = 0;
         const view = this.editor.ctx.get(editorViewCtx);
         const focused = this.literalSurface
             ? this.plain.ownerDocument.activeElement === this.plain
@@ -681,11 +721,142 @@ export class InkKitEditor {
         this.assertMutation(expectedGeneration);
         return this.applySource(text, true);
     }
-    applySource(text, isolated, from, to) {
+    applySource(text, isolated, from, to, native = false) {
         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');
+        // Source edits take the same steps whether typed or not; an edit that is
+        // not typing ends the typing step before it and is closed to the next.
+        if (this.literalSurface)
+            return this.deferSource(text, from, to, native, isolated);
+        return this.commitSource(text, isolated, from, to, this.beforePlainInput);
+    }
+    /**
+     * Takes typed source without parsing it. Parsing, preservation and replacing
+     * the formatted document cost as much as a document load, so they wait for
+     * the next thing that needs them.
+     */
+    deferSource(text, from, to, native, closed) {
+        if (text === this.currentText())
+            return false;
+        const length = from === undefined ? text.replace(/\r\n?/g, '\n').length : from;
+        const now = Date.now();
+        const previous = this.pendingSource;
+        const continuing = previous &&
+            !previous.closed &&
+            !closed &&
+            now - this.lastSourceInput <= sourceGroupDelay;
+        if (previous && !continuing)
+            this.rememberTypedStep(previous);
+        this.lastSourceInput = now;
+        this.undoneSteps = [];
+        this.formattedUndone = 0;
+        const pending = {
+            text,
+            from: length,
+            to: to ?? length,
+            before: (continuing ? previous.before : undefined) ??
+                this.beforePlainInput ?? {
+                from: this.plain.selectionStart,
+                to: this.plain.selectionEnd,
+            },
+            closed,
+        };
+        this.pendingSource = pending;
+        this.revision += 1;
+        this.cancelExports();
+        this.literalMatch = undefined;
+        // Text that did not come from the textarea is shown there.
+        if (!native)
+            this.showTypedSource(pending.text, pending.from, pending.to);
+        if (text !== this.lastMarkdown) {
+            this.lastMarkdown = text;
+            this.events.changed(text, this.generation);
+        }
+        this.publishCommandState();
+        return true;
+    }
+    rememberTypedStep(step) {
+        this.typedSteps.push(step);
+        if (this.typedSteps.length > sourceStepLimit)
+            this.typedSteps.shift();
+    }
+    showTypedSource(text, from, to) {
+        this.plain.value = text;
+        this.plain.setSelectionRange(Math.min(from, this.plain.value.length), Math.min(to, this.plain.value.length));
+        this.revealLiteralSelection();
+    }
+    /**
+     * Undoes or redoes typed source that the formatted document has not taken
+     * in, on the text alone. Returns whether there was a step to take.
+     */
+    stepTypedSource(direction) {
+        const current = this.pendingSource;
+        let text, from, to;
+        if (direction === 'undo') {
+            if (!current)
+                return false;
+            this.undoneSteps.push(current);
+            this.pendingSource = this.typedSteps.pop();
+            text = this.pendingSource?.text ?? this.currentText();
+            ({ from, to } = current.before);
+        }
+        else {
+            const next = this.undoneSteps.pop();
+            if (!next)
+                return false;
+            if (current)
+                this.rememberTypedStep(current);
+            this.pendingSource = next;
+            text = next.text;
+            ({ from, to } = next);
+        }
+        this.lastSourceInput = 0;
+        this.revision += 1;
+        this.cancelExports();
+        this.literalMatch = undefined;
+        this.showTypedSource(text, from, to);
+        if (text !== this.lastMarkdown) {
+            this.lastMarkdown = text;
+            this.events.changed(text, this.generation);
+        }
+        this.publishCommandState();
+        return true;
+    }
+    /** Brings the formatted document up to the source that was typed. */
+    settleSource() {
+        const pending = this.pendingSource;
+        if (!pending)
+            return;
+        const steps = this.typedSteps, undone = this.undoneSteps;
+        this.pendingSource = undefined;
+        this.typedSteps = [];
+        this.undoneSteps = [];
+        this.syncingSource = true;
+        try {
+            if (this.commitSource(pending.text, 
+            // A step of its own, whatever edit follows within the group delay.
+            true, pending.from, pending.to, steps[0]?.before ?? pending.before)) {
+                const { doc } = this.editor.ctx.get(editorViewCtx).state;
+                const applied = doc.attrs[sourceAttribute];
+                // A plugin that refuses the change must not lose what was typed.
+                if (applied?.text !== pending.text)
+                    throw new InkKitError('preservation', 'The typed source could not be applied');
+                this.sourceTexts.set(doc, pending.text);
+            }
+        }
+        catch (error) {
+            this.pendingSource = pending;
+            this.typedSteps = steps;
+            this.undoneSteps = undone;
+            throw error;
+        }
+        finally {
+            this.syncingSource = false;
+        }
+    }
+    commitSource(text, isolated, from, to, before) {
         if (text === this.currentText())
             return false;
         const view = this.editor.ctx.get(editorViewCtx);
@@ -712,8 +883,8 @@ export class InkKitEditor {
             const previous = Object.freeze({
                 text: this.currentText(),
                 format: this.formatType,
-                from: this.beforePlainInput?.from ?? this.plain.selectionStart,
-                to: this.beforePlainInput?.to ?? this.plain.selectionEnd,
+                from: before?.from ?? this.plain.selectionStart,
+                to: before?.to ?? this.plain.selectionEnd,
             });
             // History must retain the source caret even when the formatted document has no corresponding position.
             this.loading = true;
@@ -728,7 +899,8 @@ export class InkKitEditor {
         }
         let tr = view.state.tr
             .replaceWith(0, view.state.doc.content.size, parsed.content)
-            .setDocAttribute(sourceAttribute, provenance);
+            .setDocAttribute(sourceAttribute, provenance)
+            .setMeta(sourceReplacement, true);
         tr.setSelection(Selection.atEnd(tr.doc));
         if (isolated)
             tr = closeHistory(tr);
@@ -739,12 +911,35 @@ export class InkKitEditor {
     }
     undo(expectedGeneration) {
         this.assertMutation(expectedGeneration);
+        if (this.literalSurface && this.stepTypedSource('undo'))
+            return true;
         const view = this.editor.ctx.get(editorViewCtx);
-        return undoHistory(view.state, view.dispatch);
+        const undone = undoHistory(view.state, view.dispatch);
+        if (undone) {
+            // Source steps that were undone come back after the formatted ones.
+            if (this.literalSurface && this.undoneSteps.length)
+                this.formattedUndone++;
+            else
+                this.undoneSteps = [];
+        }
+        return undone;
     }
     redo(expectedGeneration) {
         this.assertMutation(expectedGeneration);
         const view = this.editor.ctx.get(editorViewCtx);
+        if (this.literalSurface) {
+            if (this.formattedUndone > 0) {
+                this.formattedUndone--;
+                if (redoHistory(view.state, view.dispatch))
+                    return true;
+                this.formattedUndone = 0;
+            }
+            if (this.stepTypedSource('redo'))
+                return true;
+            // Typing after an undo ended the formatted history's redo steps.
+            if (this.pendingSource)
+                return false;
+        }
         return redoHistory(view.state, view.dispatch);
     }
     replaceLiteralSelection(text, isolated = true, retainEndings = false) {
@@ -781,15 +976,16 @@ export class InkKitEditor {
     async printableSnapshot(expectedGeneration) {
         const snapshot = this.snapshot(expectedGeneration);
         const state = this.editor.ctx.get(editorViewCtx).state;
+        const doc = this.exportDocument(snapshot.text);
         const output = await this.exportContent(snapshot, async (signal) => {
             if (snapshot.format === 'md' &&
                 !this.options.images &&
                 !this.options.files &&
-                hasAuthoredImagesInLiterals(state.doc.content, (source) => this.editor.ctx.get(remarkCtx).parse(source)))
+                hasAuthoredImagesInLiterals(doc.content, (source) => this.editor.ctx.get(remarkCtx).parse(source)))
                 throw new InkKitError('image-unavailable', 'No image adapter is configured for the authored images.');
             return snapshot.format === 'txt'
                 ? printableText(snapshot.text)
-                : printableMarkdown(state.doc.content, state.schema, this.options.images, this.context(), this.options.files, signal);
+                : printableMarkdown(doc.content, state.schema, this.options.images, this.context(), this.options.files, signal);
         });
         return Object.freeze({
             documentId: snapshot.documentId,
@@ -805,6 +1001,17 @@ export class InkKitEditor {
             warnings: Object.freeze(output.warnings.map((warning) => Object.freeze({ ...warning }))),
         });
     }
+    /**
+     * The document to export. Source typed in the source editor has not reached
+     * the formatted document, which would merge its undo steps, so a document
+     * read from the text stands in without touching history.
+     */
+    exportDocument(text) {
+        const { doc } = this.editor.ctx.get(editorViewCtx).state;
+        return this.pendingSource && this.formatType === 'md'
+            ? this.editor.ctx.get(parserCtx)(text)
+            : doc;
+    }
     async clipboardSnapshot(all = true) {
         const snapshot = this.snapshot();
         const epoch = this.documentEpoch;
@@ -822,7 +1029,11 @@ export class InkKitEditor {
                 diagrams: [],
             };
         }
-        const { doc, schema, selection } = this.editor.ctx.get(editorViewCtx).state;
+        const { schema, selection } = this.editor.ctx.get(editorViewCtx).state;
+        // A partial copy in the source editor reads only the selected source.
+        const doc = all || this.mode !== 'source'
+            ? this.exportDocument(snapshot.text)
+            : this.editor.ctx.get(editorViewCtx).state.doc;
         const selectedSource = !all && this.mode === 'source'
             ? sourceSelection(snapshot.text, this.plain.selectionStart, this.plain.selectionEnd)
             : undefined;
@@ -874,7 +1085,9 @@ export class InkKitEditor {
             throw new InkKitError('stale-document', 'Document changed');
         if (result.images.some((image) => image.error))
             this.events.error?.(new InkKitError('image-unavailable', 'Some copied images were unavailable; their descriptions were retained'));
-        if (result.diagrams?.some((diagram) => diagram.error))
+        // A host built without Mermaid chose not to render diagrams.
+        if (diagramsAvailable() &&
+            result.diagrams?.some((diagram) => diagram.error))
             this.events.error?.(new InkKitError('diagram-unavailable', 'Some diagrams could not be exported; their source was retained'));
         return result;
     }
@@ -955,6 +1168,10 @@ export class InkKitEditor {
             return;
         this.destroyed = true;
         this.ready = false;
+        this.pendingSource = undefined;
+        this.typedSteps = [];
+        this.undoneSteps = [];
+        this.formattedUndone = 0;
         this.cancelExports();
         this.mediaPolicy();
         this.pasteController.destroy();
@@ -1095,7 +1312,7 @@ export class InkKitEditor {
                     const next = this.state.apply(tr);
                     if (!instance.loading) {
                         try {
-                            instance.assertPreserved(this.state.doc, next.doc);
+                            instance.assertPreserved(this.state.doc, next.doc, isWrittenEdit(tr));
                         }
                         catch (error) {
                             this.updateState(this.state);
@@ -1132,8 +1349,8 @@ export class InkKitEditor {
             .use(placeholderPlugin)
             .use(options.rendering?.codeHighlighting === false
             ? []
-            : (await import('./highlight')).highlightPlugin)
-            .use(options.rendering?.diagramPreview === false
+            : (await import('./highlight.js')).highlightPlugin)
+            .use(options.rendering?.diagramPreview === false || !diagramsAvailable()
             ? []
             : mermaidPreview((error) => events.error?.(error)))
             .use(selectionPlugin)
@@ -1224,7 +1441,7 @@ export class InkKitEditor {
                 return;
             }
             try {
-                instance.applySource(editedPlainSource(instance.currentText(), instance.plain.value), false, instance.plain.selectionStart, instance.plain.selectionEnd);
+                instance.applySource(editedPlainSource(instance.currentText(), instance.plain.value), false, instance.plain.selectionStart, instance.plain.selectionEnd, true);
             }
             catch (error) {
                 events.error?.(error instanceof Error ? error : new Error(String(error)));
@@ -1402,6 +1619,10 @@ export class InkKitEditor {
         this.outlineEpoch += 1;
         this.sourcePreservations = new WeakMap();
         this.sourceTexts = new WeakMap();
+        this.pendingSource = undefined;
+        this.typedSteps = [];
+        this.undoneSteps = [];
+        this.formattedUndone = 0;
         this.mode = 'formatted';
         this.plainComposing = false;
         this.beforePlainInput = undefined;
@@ -1605,9 +1826,15 @@ export class InkKitEditor {
         this.publishCommandState();
     }
     /** Throws when a document reached by an edit, after every appended normalisation, cannot be
-     *  saved as preserved Markdown. Dispatch and the replacement commands share this check. */
-    assertPreserved(before, after) {
-        if (this.preservation && !this.literalSurface && !after.eq(before))
+     *  saved as preserved Markdown. Dispatch and the replacement commands share this check.
+     *  `written` is false for history steps and source replacement, which restore or supply a
+     *  document that may hold comment text the formatted editor would refuse to accept typed. */
+    assertPreserved(before, after, written = true) {
+        if (this.literalSurface || after.eq(before))
+            return;
+        if (written)
+            assertCommentsEndWhereWritten(before, after);
+        if (this.preservation)
             this.currentText(after);
     }
     replaceTextRange(range, text) {
@@ -1742,26 +1969,30 @@ export class InkKitEditor {
                     : 0;
         let remainingTop = vertical, remainingLeft = horizontal;
         if (this.literalSurface) {
-            const top = this.plain.scrollTop, left = this.plain.scrollLeft;
-            this.plain.scrollTop += vertical;
-            this.plain.scrollLeft += horizontal;
-            remainingTop -= this.plain.scrollTop - top;
-            remainingLeft -= this.plain.scrollLeft - left;
+            const style = this.root.ownerDocument.defaultView.getComputedStyle(this.plain);
+            // The first or last line sits within the padding plus its own leading,
+            // under half the height of its first rect, so a reveal that ends there
+            // shows the edge. A range of many lines does not count as one line.
+            const halfCaret = (leading.bottom - leading.top) / 2;
+            const remaining = scrollWholePixels(this.plain, vertical, horizontal, {
+                top: (Number.parseFloat(style.paddingTop) || 0) + halfCaret,
+                bottom: (Number.parseFloat(style.paddingBottom) || 0) + halfCaret,
+            });
+            remainingTop = remaining.vertical;
+            remainingLeft = remaining.horizontal;
         }
         let container = this.viewportContainer ?? this.root;
         const document = this.root.ownerDocument;
         while (container &&
             container !== document.body &&
             container !== document.documentElement) {
-            const top = container.scrollTop, left = container.scrollLeft;
-            container.scrollTop += remainingTop;
-            container.scrollLeft += remainingLeft;
-            remainingTop -= container.scrollTop - top;
-            remainingLeft -= container.scrollLeft - left;
+            ;
+            ({ vertical: remainingTop, horizontal: remainingLeft } =
+                scrollWholePixels(container, remainingTop, remainingLeft));
             container = container.parentElement;
         }
         if (remainingTop || remainingLeft)
-            document.defaultView.scrollBy(remainingLeft, remainingTop);
+            document.defaultView.scrollBy(scrollOutward(remainingLeft), scrollOutward(remainingTop));
     }
     revealCurrentSelection() {
         if (this.loading || !this.ready)
@@ -2102,6 +2333,11 @@ export class InkKitEditor {
             throw new InkKitError('image-unavailable', 'This editor has no image adapter');
         const view = this.editor.ctx.get(editorViewCtx);
         const { schema } = view.state;
+        const placement = x != null && y != null ? undefined : imagePlacement(view.state);
+        if (placement?.kind === 'inline') {
+            this.insertInline(images);
+            return;
+        }
         // One paragraph per image: each is read back as a standalone image block where one fits.
         const blocks = images.map((image) => schema.nodes.paragraph.create(null, schema.nodes.image.create({
             src: image.path,
@@ -2112,7 +2348,9 @@ export class InkKitEditor {
             this.insertBlocks(blocks, x, y);
             return;
         }
-        const tr = view.state.tr.replaceSelection(new Slice(Fragment.fromArray(blocks), 0, 0));
+        const tr = placement?.kind === 'after'
+            ? view.state.tr.insert(placement.pos, blocks)
+            : view.state.tr.replaceSelection(new Slice(Fragment.fromArray(blocks), 0, 0));
         // After the last image, so typing continues below it rather than in the block that follows.
         const last = blocks.at(-1).firstChild;
         let after;
@@ -2125,32 +2363,26 @@ export class InkKitEditor {
             tr.setSelection(TextSelection.create(tr.doc, after));
         view.dispatch(tr.scrollIntoView());
     }
-    insertBlocks(blocks, x, y) {
+    // A table cell holds one line, so the images sit side by side where the selection was, with no
+    // space between them: a space beside an image in a cell is saved as `&#x20;`.
+    insertInline(images) {
         const view = this.editor.ctx.get(editorViewCtx);
         const { state } = view;
-        const hit = view.posAtCoords({ left: x, top: y });
-        const $pos = state.doc.resolve(hit?.pos ?? state.selection.from);
-        const tr = state.tr;
-        let at;
-        if ($pos.depth === 1 &&
-            $pos.parent.isTextblock &&
-            $pos.parent.content.size === 0) {
-            at = $pos.before(1);
-            tr.replaceWith(at, $pos.after(1), blocks);
-        }
-        else {
-            // A point over a top-level leaf, such as an image, resolves beside it rather than inside.
-            const leaf = $pos.depth === 0 && hit && hit.inside >= 0
-                ? state.doc.resolve(hit.inside)
-                : undefined;
-            at =
-                $pos.depth > 0
-                    ? $pos.after(1)
-                    : leaf?.depth === 0
-                        ? hit.inside + state.doc.nodeAt(hit.inside).nodeSize
-                        : $pos.pos;
-            tr.insert(at, blocks);
-        }
+        const oneLine = (text) => text.replace(/\s*[\r\n]+\s*/g, ' ');
+        const nodes = images.map((image) => state.schema.nodes.image.create({
+            src: image.path,
+            alt: oneLine(image.alt),
+            title: oneLine(image.title ?? ''),
+        }));
+        const { from, to } = state.selection;
+        const tr = state.tr.replaceWith(from, to, nodes);
+        tr.setSelection(TextSelection.create(tr.doc, from + nodes.length));
+        view.dispatch(tr.scrollIntoView());
+    }
+    insertBlocks(blocks, x, y) {
+        const view = this.editor.ctx.get(editorViewCtx);
+        const { from: at, to } = blockDropRange(view, x, y);
+        const tr = view.state.tr.replaceWith(at, to, blocks);
         const end = at + blocks.reduce((size, node) => size + node.nodeSize, 0) - 1;
         view.dispatch(tr.setSelection(TextSelection.create(tr.doc, end)).scrollIntoView());
         this.focus();
@@ -2360,7 +2592,7 @@ export class InkKitEditor {
         view.dispatch(view.state.tr.setNodeMarkup(definition.pos, undefined, {
             ...definition.node.attrs,
             url: destination,
-            title: title ?? definition.node.attrs.title,
+            title: title == null ? definition.node.attrs.title : singleLine(title),
         }));
         return true;
     }

package/dist/html-import.d.ts

@@ -0,0 +1,13 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+import { Fragment, Slice, type Node, type Schema } from '@milkdown/kit/prose/model';
+/**
+ * The slice's nodes as blocks a document holds, wrapped as insertion would
+ * wrap them: inline nodes in a paragraph and list items in a list.
+ */
+export declare function topLevel(schema: Schema, content: Fragment): Node[];
+/**
+ * Returns the slice with every part whose Markdown would read back as
+ * different structure replaced by a form that reads back the same, keeping as
+ * much of its text and formatting as possible.
+ */
+export declare function importableSlice(ctx: Ctx, slice: Slice): Slice;