@aicayzer/inkkit 0.0.0-stage → 0.0.1

package/dist/paste.js

@@ -0,0 +1,362 @@
+import { editorViewCtx, parserCtx } from '@milkdown/kit/core';
+import { DOMParser as ProseParser, Fragment, Slice, } from '@milkdown/kit/prose/model';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { $prose } from '@milkdown/kit/utils';
+import { InkKitError, } from './types.js';
+export class PasteController {
+    options;
+    active;
+    dead = false;
+    get pending() {
+        return this.active != null;
+    }
+    plugin;
+    constructor(options) {
+        this.options = options;
+        this.plugin = $prose(() => new Plugin({
+            key: new PluginKey('inkkitPaste'),
+            state: {
+                init: () => null,
+                apply: (transaction) => {
+                    if (this.active) {
+                        const empty = this.active.from === this.active.to;
+                        this.active.from = transaction.mapping.map(this.active.from, 1);
+                        this.active.to = transaction.mapping.map(this.active.to, empty ? 1 : -1);
+                    }
+                    return null;
+                },
+            },
+            props: {
+                handlePaste: (view, event) => {
+                    const data = event.clipboardData;
+                    if (!data || !view.editable)
+                        return false;
+                    if (view.state.selection.$from.parent.type.spec.code)
+                        return false;
+                    const text = data.getData('text/plain');
+                    const html = data.getData('text/html');
+                    const metadata = data.getData('vscode-editor-data');
+                    if (metadata) {
+                        try {
+                            const value = JSON.parse(metadata);
+                            if (!value ||
+                                typeof value !== 'object' ||
+                                !('mode' in value) ||
+                                typeof value.mode !== 'string')
+                                throw new Error('Invalid VS Code clipboard metadata');
+                            // Retain the provider's code-language behaviour for valid metadata.
+                            return false;
+                        }
+                        catch {
+                            void this.paste({ text, plainText: true }).catch((error) => options.onError?.(error));
+                            return true;
+                        }
+                    }
+                    const files = [...data.files].filter((file) => file.type.startsWith('image/'));
+                    void this.run({
+                        text,
+                        html,
+                        plainText: this.options.literalText?.() ?? false,
+                    }, files).catch((error) => options.onError?.(error));
+                    return true;
+                },
+            },
+        }));
+    }
+    paste(input) {
+        return this.run(input);
+    }
+    cancelPending() {
+        this.active = undefined;
+    }
+    destroy() {
+        this.dead = true;
+        this.cancelPending();
+    }
+    assertContext(context, operation) {
+        if (this.dead)
+            throw new InkKitError('destroyed', 'The editor was destroyed.');
+        const current = this.options.context();
+        if (this.active !== operation ||
+            current.documentId !== context.documentId ||
+            current.generation !== context.generation)
+            throw new InkKitError('stale-document', 'The document changed while images were importing.');
+    }
+    async run(input, files = []) {
+        if (this.dead)
+            throw new InkKitError('destroyed', 'The editor was destroyed.');
+        if (this.pending)
+            throw new InkKitError('operation-pending', 'An image paste is still pending.');
+        const context = { ...this.options.context() };
+        const ctx = this.options.ctx();
+        const view = ctx.get(editorViewCtx);
+        if (!view.editable || this.options.editable?.() === false)
+            return;
+        if (view.composing)
+            throw new InkKitError('composition', 'Finish composing text before pasting.');
+        const operation = {
+            from: view.state.selection.from,
+            to: view.state.selection.to,
+        };
+        this.active = operation;
+        try {
+            const images = [...(input.images ?? [])];
+            for (const file of files)
+                images.push({
+                    bytes: new Uint8Array(await file.arrayBuffer()),
+                    mimeType: file.type,
+                    filename: file.name,
+                });
+            this.assertContext(context, operation);
+            const schema = view.state.schema;
+            let slice;
+            const plainText = input.plainText ||
+                this.options.literalText?.() ||
+                view.state.selection.$from.parent.type.spec.code;
+            if (plainText) {
+                if (view.state.selection.$from.parent.type.spec.code) {
+                    const anchor = operation;
+                    view.dispatch(view.state.tr.insertText(input.text, anchor.from, anchor.to));
+                    return;
+                }
+                const paragraphs = input.text
+                    .replace(/\r\n?/g, '\n')
+                    .split('\n')
+                    .map((line) => schema.nodes.paragraph.create(null, line ? schema.text(line) : undefined));
+                slice = new Slice(Fragment.fromArray(paragraphs), 1, 1);
+            }
+            else if (input.html) {
+                // Template contents remain inert while unsupported source is replaced
+                // and managed image references are imported.
+                const template = document.createElement('template');
+                template.innerHTML = input.html;
+                const container = template.content;
+                // Native HTML clipboards add encoding metadata. Obsidian's reading
+                // view also copies its title and collapse controls with document HTML.
+                for (const metadata of container.querySelectorAll('meta[charset]'))
+                    metadata.remove();
+                for (const control of container.querySelectorAll('div.mod-header.mod-ui,div.mod-footer.mod-ui')) {
+                    if (control.querySelector('.inline-title[contenteditable],.embedded-backlinks'))
+                        control.remove();
+                }
+                for (const heading of container.querySelectorAll('h1[data-heading],h2[data-heading],h3[data-heading],h4[data-heading],h5[data-heading],h6[data-heading]')) {
+                    for (const control of heading.querySelectorAll(':scope > span.heading-collapse-indicator.collapse-indicator.collapse-icon')) {
+                        if (control.querySelector(':scope > svg.svg-icon.right-triangle') &&
+                            !control.textContent?.trim())
+                            control.remove();
+                    }
+                }
+                for (const control of container.querySelectorAll('pre > button.copy-code-button')) {
+                    if (control.querySelector('svg.svg-icon'))
+                        control.remove();
+                }
+                const supported = new Set([
+                    'P',
+                    'H1',
+                    'H2',
+                    'H3',
+                    'H4',
+                    'H5',
+                    'H6',
+                    'STRONG',
+                    'B',
+                    'EM',
+                    'I',
+                    'S',
+                    'DEL',
+                    'STRIKE',
+                    'CODE',
+                    'PRE',
+                    'BLOCKQUOTE',
+                    'A',
+                    'BR',
+                    'HR',
+                    'UL',
+                    'OL',
+                    'LI',
+                    'TABLE',
+                    'THEAD',
+                    'TBODY',
+                    'TFOOT',
+                    'TR',
+                    'TH',
+                    'TD',
+                    'IMG',
+                    'SPAN',
+                    'DIV',
+                    'FONT',
+                    'SECTION',
+                    'ARTICLE',
+                    'MAIN',
+                    'HEADER',
+                    'FOOTER',
+                ]);
+                for (const element of [...container.querySelectorAll('*')]) {
+                    if (!container.contains(element) || supported.has(element.tagName))
+                        continue;
+                    const literal = document.createElement('pre');
+                    literal.className = 'literal-markdown';
+                    literal.textContent = element.outerHTML;
+                    element.replaceWith(literal);
+                }
+                const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT);
+                const comments = [];
+                while (walker.nextNode())
+                    comments.push(walker.currentNode);
+                for (const comment of comments) {
+                    const literal = document.createElement('pre');
+                    literal.className = 'literal-markdown';
+                    literal.textContent = `<!--${comment.data}-->`;
+                    comment.replaceWith(literal);
+                }
+                for (const table of [...container.querySelectorAll('table')]) {
+                    if (table.parentElement?.closest('table'))
+                        continue;
+                    const rows = [...table.querySelectorAll('tr')];
+                    const widths = rows.map((row) => row.querySelectorAll(':scope > th,:scope > td').length);
+                    const unsupported = !schema.nodes.table ||
+                        widths.length === 0 ||
+                        widths.some((width) => !width || width !== widths[0]) ||
+                        table.querySelector('table,[rowspan]:not([rowspan="1"]),[colspan]:not([colspan="1"]),td > p ~ p,th > p ~ p,td > div,th > div,td > ul,td > ol,td > pre,td > blockquote,th > ul,th > ol,th > pre,th > blockquote');
+                    if (!unsupported && !table.querySelector('th')) {
+                        for (const cell of rows[0]?.querySelectorAll(':scope > td') ?? []) {
+                            const heading = document.createElement('th');
+                            for (const attribute of [...cell.attributes])
+                                heading.setAttribute(attribute.name, attribute.value);
+                            heading.append(...cell.childNodes);
+                            cell.replaceWith(heading);
+                        }
+                    }
+                    if (unsupported) {
+                        const literal = document.createElement('pre');
+                        literal.className = 'literal-markdown';
+                        literal.textContent = table.outerHTML;
+                        table.replaceWith(literal);
+                    }
+                }
+                const imported = new Map();
+                const elements = [...container.querySelectorAll('img')];
+                const uniqueSources = new Set(elements.map((element) => element.getAttribute('src') ?? ''));
+                // A host-supplied array explicitly associates unnamed bytes by unique
+                // preview order. A browser FileList has no such association, except the
+                // unambiguous single-file/single-source case.
+                const positional = (files.length === 0 || (files.length === 1 && uniqueSources.size === 1)
+                    ? images
+                    : (input.images ?? [])).filter((image) => !image.source);
+                let index = 0;
+                for (const element of elements) {
+                    const source = element.getAttribute('src') ?? '';
+                    const alt = element.getAttribute('alt') ?? 'Image';
+                    try {
+                        let reference = imported.get(source);
+                        if (!reference) {
+                            const matched = images.find((image) => image.source ===
+                                source);
+                            const captured = matched ?? dataImage(source) ?? positional[index++];
+                            if (!captured || !this.options.adapter)
+                                throw new Error('The pasted image is unavailable.');
+                            reference = (await this.options.adapter.importImage(captured, { ...context })).reference;
+                            this.assertContext(context, operation);
+                            imported.set(source, reference);
+                        }
+                        element.setAttribute('src', reference);
+                        element.removeAttribute('srcset');
+                    }
+                    catch (error) {
+                        if (error instanceof InkKitError)
+                            throw error;
+                        element.replaceWith(document.createTextNode(`[${alt}: image unavailable]`));
+                        this.options.onError?.(new InkKitError('image-unavailable', error instanceof Error
+                            ? error.message
+                            : 'The pasted image is unavailable.'));
+                    }
+                }
+                slice = ProseParser.fromSchema(schema).parseSlice(container, {
+                    preserveWhitespace: true,
+                });
+            }
+            else if (images.length) {
+                const nodes = [];
+                if (input.text)
+                    nodes.push(schema.nodes.paragraph.create(null, schema.text(input.text)));
+                for (const image of images) {
+                    try {
+                        if (!this.options.adapter)
+                            throw new InkKitError('image-unavailable', 'No image adapter is configured.');
+                        const imported = await this.options.adapter.importImage(image, {
+                            ...context,
+                        });
+                        this.assertContext(context, operation);
+                        const imageNode = schema.nodes.image?.create({
+                            src: imported.reference,
+                            alt: image.filename ?? 'Image',
+                        });
+                        if (!imageNode)
+                            throw new InkKitError('image-unavailable', 'Images are disabled for this document.');
+                        nodes.push(schema.nodes.paragraph.create(null, imageNode));
+                    }
+                    catch (error) {
+                        if (error instanceof InkKitError &&
+                            error.code !== 'image-unavailable')
+                            throw error;
+                        nodes.push(schema.nodes.paragraph.create(null, schema.text(`[${image.filename ?? 'Image'}: image unavailable]`)));
+                        this.options.onError?.(new InkKitError('image-unavailable', error instanceof Error
+                            ? error.message
+                            : 'The pasted image is unavailable.'));
+                    }
+                }
+                slice = new Slice(Fragment.fromArray(nodes), 1, 1);
+            }
+            else {
+                const selection = view.state.selection;
+                const text = input.text.trim();
+                if (!selection.empty &&
+                    /^https?:\/\/\S+$/.test(text) &&
+                    schema.marks.link) {
+                    const anchor = operation;
+                    const mark = schema.marks.link.create({ href: text, title: '' });
+                    view.dispatch(view.state.tr
+                        .addMark(anchor.from, anchor.to, mark)
+                        .removeStoredMark(mark));
+                    return;
+                }
+                const doc = ctx.get(parserCtx)(input.text);
+                slice = new Slice(doc.content, 0, 0);
+            }
+            this.assertContext(context, operation);
+            if (!view.editable || this.options.editable?.() === false)
+                return;
+            const anchor = operation;
+            const insertion = view.state.doc.resolve(anchor.from);
+            // An isolated block such as a table cannot fit inside an empty paragraph.
+            // Replace that empty block rather than retaining a spurious spacer.
+            if (anchor.from === anchor.to &&
+                insertion.parent.type.name === 'paragraph' &&
+                insertion.parent.content.size === 0 &&
+                slice.content.firstChild?.isBlock &&
+                slice.content.firstChild.type.spec.isolating) {
+                view.dispatch(view.state.tr
+                    .replaceRange(insertion.before(), insertion.after(), new Slice(slice.content, 0, 0))
+                    .scrollIntoView());
+            }
+            else
+                view.dispatch(view.state.tr
+                    .replaceRange(anchor.from, anchor.to, slice)
+                    .scrollIntoView());
+        }
+        finally {
+            if (this.active === operation)
+                this.active = undefined;
+        }
+    }
+}
+function dataImage(source) {
+    const match = /^data:(image\/(?:png|jpeg|gif|webp|avif|bmp|tiff));base64,([A-Za-z0-9+/=\s]+)$/.exec(source);
+    if (!match)
+        return undefined;
+    const binary = atob(match[2]);
+    return {
+        mimeType: match[1],
+        bytes: Uint8Array.from(binary, (character) => character.charCodeAt(0)),
+    };
+}

package/dist/preserve.d.ts

@@ -0,0 +1,16 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+export declare class PreservationError extends Error {
+    constructor(message: string, options?: ErrorOptions);
+}
+/** Retains the loaded source of blocks the edit leaves alone. */
+export declare class Preservation {
+    private readonly ctx;
+    private readonly source;
+    private readonly baseline;
+    private readonly blocks;
+    private readonly lineEnding;
+    private readonly forms;
+    constructor(ctx: Ctx, source: string);
+    serialize(doc: ProseNode): string;
+}

package/dist/preserve.js

@@ -0,0 +1,177 @@
+import { parserCtx, remarkCtx } from '@milkdown/kit/core';
+import { serialize } from './dialect.js';
+export class PreservationError extends Error {
+    constructor(message, options) {
+        super(message, options);
+        this.name = 'PreservationError';
+    }
+}
+function form(text) {
+    return text.replace(/\n+$/, '');
+}
+function blockForm(ctx, node) {
+    // An empty document is empty Markdown, but an empty block inside a document
+    // is authored spacing and must remain a real block when read again.
+    if (node.type.name === 'paragraph' && node.content.size === 0)
+        return '<br />';
+    return form(serialize(ctx, node.type.schema.topNodeType.create(null, [node])));
+}
+// Edit distance distinguishes replacements from insertions, so replacing a block
+// retains its surrounding whitespace without assigning it a neighbour's source.
+function correspondence(before, after) {
+    const result = new Array(after.length);
+    let head = 0;
+    while (head < before.length &&
+        head < after.length &&
+        before[head] === after[head]) {
+        result[head] = head;
+        head++;
+    }
+    let endBefore = before.length;
+    let endAfter = after.length;
+    while (endBefore > head &&
+        endAfter > head &&
+        before[endBefore - 1] === after[endAfter - 1]) {
+        result[--endAfter] = --endBefore;
+    }
+    const rows = endBefore - head + 1;
+    const columns = endAfter - head + 1;
+    if (rows * columns > 1_000_000)
+        throw new PreservationError('The edit changes too many blocks to preserve safely');
+    const costs = Array.from({ length: rows }, () => new Uint32Array(columns));
+    for (let i = 0; i < rows; i++)
+        costs[i][0] = i;
+    for (let j = 0; j < columns; j++)
+        costs[0][j] = j;
+    for (let i = 1; i < rows; i++) {
+        for (let j = 1; j < columns; j++) {
+            const change = before[head + i - 1] === after[head + j - 1] ? 0 : 1;
+            costs[i][j] = Math.min(costs[i - 1][j] + 1, costs[i][j - 1] + 1, costs[i - 1][j - 1] + change);
+        }
+    }
+    let i = rows - 1;
+    let j = columns - 1;
+    while (i || j) {
+        const change = i && j && before[head + i - 1] === after[head + j - 1] ? 0 : 1;
+        if (i && j && costs[i][j] === costs[i - 1][j - 1] + change) {
+            result[head + j - 1] = head + i - 1;
+            i--;
+            j--;
+        }
+        else if (i && costs[i][j] === costs[i - 1][j] + 1)
+            i--;
+        else
+            j--;
+    }
+    return result;
+}
+/** Retains the loaded source of blocks the edit leaves alone. */
+export class Preservation {
+    ctx;
+    source;
+    baseline;
+    blocks = [];
+    lineEnding;
+    forms = new WeakMap();
+    constructor(ctx, source) {
+        this.ctx = ctx;
+        this.source = source;
+        try {
+            const parse = ctx.get(parserCtx);
+            this.baseline = parse(source);
+            this.lineEnding =
+                source.includes('\r\n') && !source.replaceAll('\r\n', '').includes('\n')
+                    ? '\r\n'
+                    : '\n';
+            const processor = ctx.get(remarkCtx);
+            const offset = source.startsWith('\uFEFF') ? 1 : 0;
+            const body = source.slice(offset);
+            const tree = processor.runSync(processor.parse(source), {
+                value: body,
+            });
+            for (const node of tree.children) {
+                let start = node.position?.start.offset;
+                const end = node.position?.end.offset;
+                if (start == null || end == null)
+                    throw new PreservationError('A source block has no location');
+                start += offset;
+                const sourceEnd = end + offset;
+                const firstColumn = source.lastIndexOf('\n', start - 1) + 1;
+                if (/^[ \t]*$/.test(source.slice(firstColumn, start)))
+                    start = firstColumn;
+                const text = source.slice(start, sourceEnd);
+                const parsed = parse(text);
+                this.blocks.push({
+                    start,
+                    end: sourceEnd,
+                    form: parsed.childCount === 1
+                        ? blockForm(ctx, parsed.firstChild)
+                        : form(serialize(ctx, parsed)),
+                });
+            }
+        }
+        catch (cause) {
+            if (cause instanceof PreservationError)
+                throw cause;
+            throw new PreservationError('Cannot read Markdown for preservation', {
+                cause,
+            });
+        }
+    }
+    serialize(doc) {
+        if (doc.eq(this.baseline))
+            return this.source;
+        try {
+            const canonical = serialize(this.ctx, doc);
+            if (canonical === '')
+                return this.source.startsWith('\uFEFF') ? '\uFEFF' : '';
+            const current = [];
+            doc.forEach((node) => {
+                let fingerprint = this.forms.get(node);
+                if (fingerprint == null) {
+                    fingerprint = blockForm(this.ctx, node);
+                    this.forms.set(node, fingerprint);
+                }
+                current.push(fingerprint);
+            });
+            const positions = correspondence(this.blocks.map((block) => block.form), current);
+            let output = '';
+            let previous;
+            current.forEach((text, index) => {
+                const position = positions[index];
+                const block = position == null ? undefined : this.blocks[position];
+                if (index === 0) {
+                    if (position === 0 && block)
+                        output += this.source.slice(0, block.start);
+                    else if (this.source.startsWith('\uFEFF'))
+                        output += '\uFEFF';
+                }
+                else if (previous != null && position === previous + 1 && block) {
+                    output += this.source.slice(this.blocks[previous].end, block.start);
+                }
+                else
+                    output += this.lineEnding.repeat(2);
+                output +=
+                    block && block.form === text
+                        ? this.source.slice(block.start, block.end)
+                        : text.replaceAll('\n', this.lineEnding);
+                previous = position;
+            });
+            if (previous === this.blocks.length - 1 && this.blocks.length)
+                output += this.source.slice(this.blocks[previous].end);
+            else if (output)
+                output += this.lineEnding;
+            const parse = this.ctx.get(parserCtx);
+            if (serialize(this.ctx, parse(output)) === canonical)
+                return output;
+            throw new PreservationError('The edited Markdown cannot be reopened without changing its content');
+        }
+        catch (cause) {
+            if (cause instanceof PreservationError)
+                throw cause;
+            throw new PreservationError('Cannot preserve the edited Markdown', {
+                cause,
+            });
+        }
+    }
+}

package/dist/selection.d.ts

@@ -0,0 +1 @@
+export declare const selectionPlugin: import("@milkdown/kit/utils").$Prose;

package/dist/selection.js

@@ -0,0 +1,47 @@
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { $prose } from '@milkdown/kit/utils';
+/** The stylesheet paints the selection under this name. */
+const name = 'selection';
+/** The selected text within each block. */
+function covered(state) {
+    const { from, to, empty, visible } = state.selection;
+    if (empty || !visible)
+        return null;
+    const text = [];
+    state.doc.nodesBetween(from, to, (node, pos) => {
+        if (!node.isTextblock)
+            return true;
+        const start = Math.max(from, pos + 1);
+        const end = Math.min(to, pos + node.nodeSize - 1);
+        if (end > start)
+            text.push({ from: start, to: end });
+        return false;
+    });
+    return text;
+}
+function domRange(view, span) {
+    const start = view.domAtPos(span.from);
+    const end = view.domAtPos(span.to);
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    return range;
+}
+function paint(view, highlight) {
+    highlight.clear();
+    for (const span of covered(view.state) ?? [])
+        highlight.add(domRange(view, span));
+}
+// Paint only selected text, without WebKit filling the surrounding margins.
+export const selectionPlugin = $prose(() => new Plugin({
+    key: new PluginKey('selection'),
+    view(view) {
+        const highlight = new Highlight();
+        CSS.highlights.set(name, highlight);
+        paint(view, highlight);
+        return {
+            update: (view) => paint(view, highlight),
+            destroy: () => CSS.highlights.delete(name),
+        };
+    },
+}));