@aicayzer/inkkit 0.0.0-stage → 0.0.1

package/dist/highlight.d.ts

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

package/dist/highlight.js

@@ -0,0 +1,49 @@
+import { common, createLowlight } from 'lowlight';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { $prose } from '@milkdown/kit/utils';
+const lowlight = createLowlight(common);
+// Colors are decorations over the plain text, so the markdown is untouched;
+// a block without a known language stays plain.
+function decorations(doc) {
+    const found = [];
+    doc.descendants((node, pos) => {
+        if (node.type.name !== 'code_block')
+            return true;
+        const language = String(node.attrs.language ?? '').toLowerCase();
+        if (!language || !lowlight.registered(language))
+            return false;
+        let offset = pos + 1;
+        const walk = (children, classes) => {
+            for (const child of children) {
+                if (child.type === 'text') {
+                    const end = offset + child.value.length;
+                    if (classes.length > 0)
+                        found.push(Decoration.inline(offset, end, { class: classes.join(' ') }));
+                    offset = end;
+                }
+                else if (child.type === 'element') {
+                    const own = child.properties?.className ?? [];
+                    walk(child.children, [...classes, ...own]);
+                }
+            }
+        };
+        walk(lowlight.highlight(language, node.textContent).children, []);
+        return false;
+    });
+    return DecorationSet.create(doc, found);
+}
+export const highlightPlugin = $prose(() => new Plugin({
+    key: new PluginKey('highlight'),
+    state: {
+        init: (_, state) => decorations(state.doc),
+        apply: (tr, previous) => tr.docChanged
+            ? decorations(tr.doc)
+            : previous.map(tr.mapping, tr.doc),
+    },
+    props: {
+        decorations(state) {
+            return this.getState(state);
+        },
+    },
+}));

package/dist/images.d.ts

@@ -0,0 +1,32 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView, NodeView } from '@milkdown/kit/prose/view';
+import type { ImageAdapter } from './types.js';
+/** A width rides in the alt text, as `![a picture|400](images/….png)`. Other Markdown readers
+ *  show the picture and keep the number without requiring a private extension. */
+export declare function splitAlt(alt: string): {
+    alt: string;
+    width: number | null;
+};
+export declare function joinAlt(alt: string, width: number | null): string;
+/** Draws the image and the handle that sizes it. The width is kept in the alt text, so the schema is the
+ *  one commonmark gives us; a picture is never wider than its editor, whatever number the alt text holds. */
+declare class ImageView implements NodeView {
+    private node;
+    private readonly view;
+    private readonly getPos;
+    private readonly adapter;
+    dom: HTMLElement;
+    private image?;
+    private width;
+    private stopResize?;
+    constructor(node: ProseNode, view: EditorView, getPos: () => number | undefined, adapter: ImageAdapter | undefined);
+    update(node: ProseNode): boolean;
+    stopEvent(event: Event): boolean;
+    ignoreMutation(): boolean;
+    destroy(): void;
+    private render;
+    private startResize;
+    private commit;
+}
+export declare function imageView(adapter?: ImageAdapter): import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (node: ProseNode, view: EditorView, getPos: () => number | undefined) => ImageView>;
+export {};

package/dist/images.js

@@ -0,0 +1,129 @@
+import { imageSchema } from '@milkdown/kit/preset/commonmark';
+import { $view } from '@milkdown/kit/utils';
+/** A width rides in the alt text, as `![a picture|400](images/….png)`. Other Markdown readers
+ *  show the picture and keep the number without requiring a private extension. */
+export function splitAlt(alt) {
+    const match = /^([\s\S]*)\|(\d{1,5})$/.exec(alt);
+    if (!match)
+        return { alt, width: null };
+    return { alt: match[1] ?? '', width: Number(match[2]) };
+}
+export function joinAlt(alt, width) {
+    return width == null ? alt : `${alt}|${width}`;
+}
+const minimumWidth = 48;
+/** Draws the image and the handle that sizes it. The width is kept in the alt text, so the schema is the
+ *  one commonmark gives us; a picture is never wider than its editor, whatever number the alt text holds. */
+class ImageView {
+    node;
+    view;
+    getPos;
+    adapter;
+    dom;
+    image;
+    width = null;
+    stopResize;
+    constructor(node, view, getPos, adapter) {
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.adapter = adapter;
+        this.dom = document.createElement('span');
+        this.dom.className = 'image';
+        this.render();
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        this.node = node;
+        this.render();
+        return true;
+    }
+    /// The handle's own events are the view's business, not the document's.
+    stopEvent(event) {
+        return (event.target instanceof HTMLElement &&
+            event.target.classList.contains('image-handle'));
+    }
+    ignoreMutation() {
+        return true;
+    }
+    destroy() {
+        this.stopResize?.();
+        this.stopResize = undefined;
+    }
+    render() {
+        this.stopResize?.();
+        this.stopResize = undefined;
+        const src = String(this.node.attrs.src ?? '');
+        const { alt, width } = splitAlt(String(this.node.attrs.alt ?? ''));
+        this.width = width;
+        this.dom.textContent = '';
+        this.image = undefined;
+        // Only the host adapter decides which authored references can be presented.
+        const presentation = this.adapter?.presentation(src);
+        if (!presentation) {
+            this.dom.classList.add('image-absent');
+            this.dom.textContent = alt || src;
+            return;
+        }
+        this.dom.classList.remove('image-absent');
+        const image = document.createElement('img');
+        image.src = presentation.url;
+        image.alt = alt;
+        if (this.node.attrs.title)
+            image.title = String(this.node.attrs.title);
+        if (width != null)
+            image.style.width = `${width}px`;
+        this.image = image;
+        const handle = document.createElement('span');
+        handle.className = 'image-handle';
+        handle.addEventListener('pointerdown', this.startResize);
+        this.dom.append(image, handle);
+    }
+    startResize = (event) => {
+        const image = this.image;
+        if (!image || !this.view.editable)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        const startX = event.clientX;
+        const startWidth = image.getBoundingClientRect().width;
+        const limit = this.view.dom.clientWidth;
+        handle.setPointerCapture?.(event.pointerId);
+        const move = (moved) => {
+            const next = Math.round(Math.min(limit, Math.max(minimumWidth, startWidth + (moved.clientX - startX))));
+            this.width = next;
+            image.style.width = `${next}px`;
+        };
+        const cleanup = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', done);
+            handle.removeEventListener('pointercancel', done);
+        };
+        const done = () => {
+            cleanup();
+            this.stopResize = undefined;
+            this.commit();
+        };
+        this.stopResize = cleanup;
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', done);
+        handle.addEventListener('pointercancel', done);
+    };
+    commit() {
+        if (!this.view.editable)
+            return;
+        const pos = this.getPos();
+        if (pos == null)
+            return;
+        const { alt } = splitAlt(String(this.node.attrs.alt ?? ''));
+        const next = joinAlt(alt, this.width);
+        if (next === this.node.attrs.alt)
+            return;
+        const { state } = this.view;
+        this.view.dispatch(state.tr.setNodeMarkup(pos, undefined, { ...this.node.attrs, alt: next }));
+    }
+}
+export function imageView(adapter) {
+    return $view(imageSchema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { InkKitEditor } from './editor.js';
+export type { EditorEvents, CaretState, Mark, Block, FormatCommand, Keymap, } from './editor.js';
+export type { TableCommand } from './tables.js';
+export { InkKitError } from './types.js';
+export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, } from './types.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { InkKitEditor } from './editor.js';
+export { InkKitError } from './types.js';

package/dist/literals.d.ts

@@ -0,0 +1,13 @@
+import type { Literal } from 'mdast';
+interface InkKitLiteral extends Literal {
+    type: 'inkkitLiteral';
+}
+declare module 'mdast' {
+    interface RootContentMap {
+        inkkitLiteral: InkKitLiteral;
+    }
+}
+export declare function createLiteralPreservation(images: boolean): import("@milkdown/kit/utils").$Remark<"preserveLiterals", unknown>;
+export declare const preserveLiterals: import("@milkdown/kit/utils").$Remark<"preserveLiterals", unknown>;
+export declare const literalBlock: import("@milkdown/kit/utils").$Node;
+export {};

package/dist/literals.js

@@ -0,0 +1,127 @@
+import { $node, $remark } from '@milkdown/kit/utils';
+const unsupported = new Set([
+    'html',
+    'image',
+    'imageReference',
+    'definition',
+    'linkReference',
+]);
+function restoreInlineBreaks(node) {
+    if ((node.type === 'paragraph' || node.type === 'heading') &&
+        node.children.length > 1) {
+        node.children = node.children.map((child) => child.type === 'html' &&
+            ['<br />', '<br>', '<br >', '<br/>'].includes(child.value.trim())
+            ? {
+                type: 'break',
+                data: { inkkitHTMLBreak: true },
+                position: child.position,
+            }
+            : child);
+    }
+    if ('children' in node)
+        node.children.forEach(restoreInlineBreaks);
+}
+function containsUnsupported(node, images, inline = false) {
+    // Only a standalone break represents a spacer; inline HTML must remain literal.
+    if (!inline &&
+        node.type === 'html' &&
+        ['<br />', '<br>', '<br >', '<br/>'].includes(node.value.trim()))
+        return false;
+    if (node.type === 'paragraph' && node.children.length === 1) {
+        const child = node.children[0];
+        if (child?.type === 'html' &&
+            ['<br />', '<br>', '<br >', '<br/>'].includes(child.value.trim()))
+            return false;
+    }
+    return ((unsupported.has(node.type) && !(images && node.type === 'image')) ||
+        ('children' in node &&
+            node.children.some((child) => containsUnsupported(child, images, inline || node.type === 'paragraph' || node.type === 'heading'))));
+}
+// Keep syntax we cannot faithfully edit as literal text, without making the rest
+// of the document a source editor or allowing HTML and image network requests.
+export function createLiteralPreservation(images) {
+    return $remark('preserveLiterals', () => () => (tree, file) => {
+        restoreInlineBreaks(tree);
+        // Micromark's positions exclude an initial byte-order mark.
+        const source = String(file.value).replace(/^\uFEFF/, '');
+        const frontmatter = /^(---|\+\+\+)\r?\n[\s\S]*?\r?\n\1(?:\r?\n|$)/.exec(source);
+        const frontmatterEnd = frontmatter?.[0].length ?? 0;
+        const blocks = [];
+        if (frontmatter)
+            blocks.push({
+                type: 'inkkitLiteral',
+                value: frontmatter[0].trimEnd(),
+                position: {
+                    start: { line: 1, column: 1, offset: 0 },
+                    end: {
+                        line: 1,
+                        column: 1,
+                        offset: frontmatter[0].trimEnd().length,
+                    },
+                },
+            });
+        for (const node of tree.children) {
+            const start = node.position?.start.offset;
+            const end = node.position?.end.offset;
+            if (start == null || end == null) {
+                blocks.push(node);
+                continue;
+            }
+            if (start < frontmatterEnd) {
+                // TOML delimiters are ordinary paragraph text to CommonMark, so a
+                // paragraph may also contain body text immediately after the header.
+                if (end > frontmatterEnd)
+                    blocks.push({
+                        type: 'inkkitLiteral',
+                        value: source.slice(frontmatterEnd, end),
+                        position: {
+                            start: { line: 1, column: 1, offset: frontmatterEnd },
+                            end: node.position.end,
+                        },
+                    });
+                continue;
+            }
+            const raw = source.slice(start, end);
+            const footnote = node.type !== 'code' && /\[\^[^\]]+\]/.test(raw);
+            if (containsUnsupported(node, images) || footnote)
+                blocks.push({
+                    type: 'inkkitLiteral',
+                    value: raw,
+                    position: node.position,
+                });
+            else
+                blocks.push(node);
+        }
+        tree.children = blocks;
+    });
+}
+export const preserveLiterals = createLiteralPreservation(false);
+export const literalBlock = $node('literal_markdown', () => ({
+    group: 'block',
+    content: 'text*',
+    marks: '',
+    code: true,
+    defining: true,
+    parseDOM: [
+        { tag: 'pre.literal-markdown', preserveWhitespace: 'full', priority: 100 },
+    ],
+    toDOM: () => [
+        'pre',
+        { class: 'literal-markdown', 'aria-label': 'Preserved Markdown' },
+        0,
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === 'inkkitLiteral',
+        runner: (state, node, type) => {
+            state.openNode(type);
+            state.addText(String(node.value ?? ''));
+            state.closeNode();
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'literal_markdown',
+        runner: (state, node) => {
+            state.addNode('html', undefined, node.textContent);
+        },
+    },
+}));

package/dist/paste.d.ts

@@ -0,0 +1,23 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+import { type ClipboardInput, type DocumentContext, type ImageAdapter } from './types.js';
+export interface PasteControllerOptions {
+    ctx: () => Ctx;
+    context: () => DocumentContext;
+    adapter?: ImageAdapter;
+    onError?: (error: unknown) => void;
+    editable?: () => boolean;
+    literalText?: () => boolean;
+}
+export declare class PasteController {
+    private readonly options;
+    private active?;
+    private dead;
+    get pending(): boolean;
+    readonly plugin: import("@milkdown/kit/utils").$Prose;
+    constructor(options: PasteControllerOptions);
+    paste(input: ClipboardInput): Promise<void>;
+    cancelPending(): void;
+    destroy(): void;
+    private assertContext;
+    private run;
+}