@aicayzer/inkkit 0.0.6 → 0.0.8

package/dist/images.d.ts

@@ -23,6 +23,7 @@ declare class ImageView implements NodeView {
     update(node: ProseNode): boolean;
     stopEvent(event: Event): boolean;
     ignoreMutation(): boolean;
+    private cancelResize;
     destroy(): void;
     private render;
     private startResize;

package/dist/images.js

@@ -30,6 +30,7 @@ class ImageView {
         this.adapter = adapter;
         this.dom = document.createElement('span');
         this.dom.className = 'image';
+        this.view.dom.addEventListener('inkkit-cancel-resize', this.cancelResize);
         this.render();
     }
     update(node) {
@@ -47,7 +48,13 @@ class ImageView {
     ignoreMutation() {
         return true;
     }
+    cancelResize = () => {
+        this.stopResize?.();
+        this.stopResize = undefined;
+        this.render();
+    };
     destroy() {
+        this.view.dom.removeEventListener('inkkit-cancel-resize', this.cancelResize);
         this.stopResize?.();
         this.stopResize = undefined;
     }
@@ -91,6 +98,10 @@ class ImageView {
         const limit = this.view.dom.clientWidth;
         handle.setPointerCapture?.(event.pointerId);
         const move = (moved) => {
+            if (!this.view.editable) {
+                this.cancelResize();
+                return;
+            }
             const next = Math.round(Math.min(limit, Math.max(minimumWidth, startWidth + (moved.clientX - startX))));
             this.width = next;
             image.style.width = `${next}px`;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { InkKitEditor } from './editor.js';
-export type { EditorEvents, CaretState, Mark, Block, FormatCommand, Keymap, } from './editor.js';
+export type { EditorEvents, EditorOptions, TextInputPreferences, CommandState, EditingMode, CaretState, Mark, Block, FormatCommand, Keymap, } from './editor.js';
 export type { TableCommand, TableOptions } from './tables.js';
+export type { Heading } from './outline.js';
 export { InkKitError } from './types.js';
 export type { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, ClipboardDiagram, PrintableDocument, PrintableWarning, } from './types.js';
+export type { EditorLabels } from './labels.js';

package/dist/labels.d.ts

@@ -0,0 +1,28 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+/** Built-in editor text. Hosts can override individual labels at mount time. */
+export interface EditorLabels {
+    formattedEditor: string;
+    plainTextEditor: string;
+    sourceEditor: string;
+    placeholder: string;
+    copyCode: string;
+    expandCallout: string;
+    collapseCallout: string;
+    diagramRendering: string;
+    /** Prefix shown before the renderer's diagnostic message. */
+    diagramUnavailable: string;
+    /** Prefix followed by the authored footnote label. */
+    footnote: string;
+    tableAddRow: string;
+    tableAddColumn: string;
+    tableDeleteRow: string;
+    tableDeleteColumn: string;
+    tableAlignLeft: string;
+    tableAlignCenter: string;
+    tableAlignRight: string;
+    tableMoveColumn: string;
+    tableMoveRow: string;
+}
+export declare const defaultLabels: Readonly<EditorLabels>;
+export declare const labelsCtx: import("@milkdown/kit/utils").$Ctx<Readonly<EditorLabels>, "inkkitLabels">;
+export declare function editorLabels(ctx: Ctx): Readonly<EditorLabels>;

package/dist/labels.js

@@ -0,0 +1,26 @@
+import { $ctx } from '@milkdown/kit/utils';
+export const defaultLabels = {
+    formattedEditor: 'Formatted Markdown editor',
+    plainTextEditor: 'Plain text editor',
+    sourceEditor: 'Markdown source editor',
+    placeholder: 'Start typing…',
+    copyCode: 'Copy',
+    expandCallout: 'Expand',
+    collapseCallout: 'Collapse',
+    diagramRendering: 'Rendering diagram…',
+    diagramUnavailable: 'Diagram unavailable:',
+    footnote: 'Footnote',
+    tableAddRow: 'Add row',
+    tableAddColumn: 'Add column',
+    tableDeleteRow: 'Delete row',
+    tableDeleteColumn: 'Delete column',
+    tableAlignLeft: 'Align left',
+    tableAlignCenter: 'Align center',
+    tableAlignRight: 'Align right',
+    tableMoveColumn: 'Move column',
+    tableMoveRow: 'Move row',
+};
+export const labelsCtx = $ctx(defaultLabels, 'inkkitLabels');
+export function editorLabels(ctx) {
+    return ctx.isInjected(labelsCtx.key) ? ctx.get(labelsCtx.key) : defaultLabels;
+}

package/dist/mermaid.js

@@ -1,3 +1,4 @@
+import { editorLabels } from './labels.js';
 import mermaid from 'mermaid';
 import DOMPurify from 'dompurify';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
@@ -166,7 +167,7 @@ export async function diagramImage(source) {
     }
 }
 export function mermaidPreview(onError) {
-    return $prose(() => new Plugin({
+    return $prose((ctx) => new Plugin({
         key: new PluginKey('mermaidPreview'),
         props: {
             decorations(state) {
@@ -179,7 +180,9 @@ export function mermaidPreview(onError) {
                         const preview = document.createElement('div');
                         preview.className = 'inkkit-mermaid-preview';
                         preview.contentEditable = 'false';
-                        preview.textContent = 'Rendering diagram…';
+                        preview.textContent = editorLabels(ctx).diagramRendering;
+                        preview.setAttribute('role', 'status');
+                        preview.setAttribute('aria-live', 'polite');
                         let active = true;
                         preview.cancel =
                             () => {
@@ -196,7 +199,7 @@ export function mermaidPreview(onError) {
                             const message = error instanceof Error
                                 ? error.message
                                 : 'The diagram could not be rendered.';
-                            preview.textContent = `Diagram unavailable: ${message}`;
+                            preview.textContent = `${editorLabels(ctx).diagramUnavailable} ${message}`;
                             preview.dataset.state = 'error';
                             onError(new InkKitError('diagram-unavailable', message));
                         });

package/dist/outline.d.ts

@@ -0,0 +1,22 @@
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+export interface Heading {
+    readonly id: string;
+    readonly level: number;
+    readonly text: string;
+    readonly documentId: string;
+    readonly generation: number;
+    readonly revision: number;
+}
+export interface OutlineContext {
+    documentId: string;
+    generation: number;
+    revision: number;
+    epoch: number;
+    mode: 'source' | 'formatted';
+}
+export declare function collectFormattedHeadings(doc: ProseNode, context: OutlineContext): readonly Heading[];
+export declare function collectSourceHeadings(ctx: Ctx, source: string, context: OutlineContext): readonly Heading[];
+export declare function sourceHeadingPosition(ctx: Ctx, source: string, requested: Heading, context: OutlineContext): number;
+export declare function navigateFormattedHeading(view: EditorView, requested: Heading, context: OutlineContext): boolean;

package/dist/outline.js

@@ -0,0 +1,79 @@
+import { parserCtx, remarkCtx } from '@milkdown/kit/core';
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { clipboardText } from './clipboard.js';
+import { revealCalloutAncestors } from './callouts.js';
+import { InkKitError } from './types.js';
+function formattedLocations(doc) {
+    const headings = [];
+    doc.descendants((node, position) => {
+        if (node.type.name === 'heading')
+            headings.push({ node, position });
+    });
+    return headings;
+}
+function sourceLocations(ctx, source) {
+    const processor = ctx.get(remarkCtx);
+    const tree = processor.runSync(processor.parse(source), {
+        value: source,
+    });
+    const positions = [];
+    const bom = source.startsWith('\uFEFF') ? 1 : 0;
+    const visit = (node) => {
+        if (node.type === 'heading' && node.position?.start.offset != null)
+            positions.push({
+                position: node.position.start.offset + bom,
+                level: node.depth,
+            });
+        node.children?.forEach(visit);
+    };
+    visit(tree);
+    const parsed = formattedLocations(ctx.get(parserCtx)(source));
+    if (positions.length !== parsed.length ||
+        positions.some((item, index) => item.level !== parsed[index].node.attrs.level))
+        throw new InkKitError('preservation', 'The current Markdown headings cannot be located safely');
+    return parsed.map((heading, index) => ({
+        ...heading,
+        position: positions[index].position,
+    }));
+}
+function entry(heading, context) {
+    return Object.freeze({
+        id: `heading:${context.epoch}:${context.mode}:${context.generation}:${context.revision}:${heading.position}`,
+        level: Number(heading.node.attrs.level),
+        text: clipboardText(heading.node.content),
+        documentId: context.documentId,
+        generation: context.generation,
+        revision: context.revision,
+    });
+}
+export function collectFormattedHeadings(doc, context) {
+    return Object.freeze(formattedLocations(doc).map((item) => entry(item, context)));
+}
+export function collectSourceHeadings(ctx, source, context) {
+    return Object.freeze(sourceLocations(ctx, source).map((item) => entry(item, context)));
+}
+function currentLocation(locations, requested, context) {
+    for (const location of locations) {
+        const current = entry(location, context);
+        if (current.id === requested.id &&
+            current.documentId === requested.documentId &&
+            current.generation === requested.generation &&
+            current.revision === requested.revision &&
+            current.level === requested.level &&
+            current.text === requested.text)
+            return location.position;
+    }
+    throw new InkKitError('stale-document', 'The heading is no longer current');
+}
+export function sourceHeadingPosition(ctx, source, requested, context) {
+    return currentLocation(sourceLocations(ctx, source), requested, context);
+}
+export function navigateFormattedHeading(view, requested, context) {
+    const position = currentLocation(formattedLocations(view.state.doc), requested, context);
+    revealCalloutAncestors(view, position + 1);
+    view.dispatch(view.state.tr
+        .setSelection(TextSelection.create(view.state.doc, position + 1))
+        .scrollIntoView());
+    view.focus();
+    return true;
+}

package/dist/paste.d.ts

@@ -5,6 +5,7 @@ export interface PasteControllerOptions {
     context: () => DocumentContext;
     adapter?: ImageAdapter;
     onError?: (error: unknown) => void;
+    onPendingChanged?: () => void;
     editable?: () => boolean;
     literalText?: () => boolean;
 }

package/dist/paste.js

@@ -70,6 +70,7 @@ export class PasteController {
     }
     cancelPending() {
         this.active = undefined;
+        this.options.onPendingChanged?.();
     }
     destroy() {
         this.dead = true;
@@ -101,6 +102,7 @@ export class PasteController {
             to: view.state.selection.to,
         };
         this.active = operation;
+        this.options.onPendingChanged?.();
         try {
             const images = [...(input.images ?? [])];
             for (const file of files)
@@ -428,8 +430,10 @@ export class PasteController {
                     .scrollIntoView());
         }
         finally {
-            if (this.active === operation)
+            if (this.active === operation) {
                 this.active = undefined;
+                this.options.onPendingChanged?.();
+            }
         }
     }
 }

package/dist/references.js

@@ -1,3 +1,4 @@
+import { editorLabels } from './labels.js';
 import { $node, $remark, $prose } from '@milkdown/kit/utils';
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
 import { linkSchema } from '@milkdown/kit/preset/commonmark';
@@ -247,7 +248,7 @@ export const referenceDefinition = $node('reference_definition', () => ({
         },
     },
 }));
-export const footnoteReference = $node('footnote_reference', () => ({
+export const footnoteReference = $node('footnote_reference', (ctx) => ({
     inline: true,
     group: 'inline',
     atom: true,
@@ -268,7 +269,7 @@ export const footnoteReference = $node('footnote_reference', () => ({
             class: 'inkkit-footnote-reference',
             tabindex: '0',
             role: 'button',
-            'aria-label': `Footnote ${node.attrs.label}`,
+            'aria-label': `${editorLabels(ctx).footnote} ${node.attrs.label}`,
             'data-inkkit-footnote-reference': node.attrs.identifier,
             'data-inkkit-label': node.attrs.label,
         },
@@ -292,7 +293,7 @@ export const footnoteReference = $node('footnote_reference', () => ({
         },
     },
 }));
-export const footnoteDefinition = $node('footnote_definition', () => ({
+export const footnoteDefinition = $node('footnote_definition', (ctx) => ({
     group: 'block',
     content: 'block+',
     defining: true,
@@ -310,7 +311,7 @@ export const footnoteDefinition = $node('footnote_definition', () => ({
         'div',
         {
             class: 'inkkit-footnote-definition',
-            'aria-label': `Footnote ${node.attrs.label}`,
+            'aria-label': `${editorLabels(ctx).footnote} ${node.attrs.label}`,
             'data-inkkit-footnote-definition': node.attrs.identifier,
             'data-inkkit-label': node.attrs.label,
         },

package/dist/search.d.ts

@@ -0,0 +1,14 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+export interface TextMatch {
+    from: number;
+    to: number;
+}
+export interface LiteralReplacement extends TextMatch {
+    text: string;
+    count: number;
+}
+export declare function findLiteral(text: string, search: string, from?: number): TextMatch | undefined;
+export declare function replaceLiteral(text: string, search: string, replacement: string, selection: TextMatch, all?: boolean): LiteralReplacement;
+export declare function findFormatted(view: EditorView, text: string): void;
+export declare function replaceFormatted(view: EditorView, search: string, replacement: string, preflight: (doc: ProseNode) => void, all?: boolean): number;

package/dist/search.js

@@ -0,0 +1,171 @@
+import { Fragment, Slice } from '@milkdown/kit/prose/model';
+import { closeHistory } from '@milkdown/kit/prose/history';
+import { Selection, TextSelection } from '@milkdown/kit/prose/state';
+import { SearchQuery, setSearchState, getSearchState } from 'prosemirror-search';
+import { InkKitError } from './types.js';
+function escapedPattern(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function literalMatches(text, search) {
+    if (!search)
+        return [];
+    const pattern = new RegExp(escapedPattern(search), 'giu');
+    return [...text.matchAll(pattern)].map((match) => ({
+        from: match.index,
+        to: match.index + match[0].length,
+    }));
+}
+export function findLiteral(text, search, from = 0) {
+    const matches = literalMatches(text, search);
+    return matches.find((match) => match.from >= from) ?? matches[0];
+}
+export function replaceLiteral(text, search, replacement, selection, all = false) {
+    const matches = literalMatches(text, search);
+    const selected = matches.find((match) => match.from === selection.from && match.to === selection.to) ??
+        matches.find((match) => match.from >= selection.to) ??
+        matches[0];
+    const changed = (all ? matches : selected ? [selected] : []).filter((match) => text.slice(match.from, match.to) !== replacement);
+    if (!changed.length)
+        return { ...selection, text, count: 0 };
+    let output = text;
+    for (const match of [...changed].reverse())
+        output = output.slice(0, match.from) + replacement + output.slice(match.to);
+    if (!all)
+        return {
+            text: output,
+            count: 1,
+            from: changed[0].from,
+            to: changed[0].from + replacement.length,
+        };
+    const map = (position) => {
+        let difference = 0;
+        for (const match of changed) {
+            if (position < match.from)
+                break;
+            if (position <= match.to)
+                return (match.from +
+                    difference +
+                    (position === match.from ? 0 : replacement.length));
+            difference += replacement.length - (match.to - match.from);
+        }
+        return position + difference;
+    };
+    return {
+        text: output,
+        count: changed.length,
+        from: map(selection.from),
+        to: map(selection.to),
+    };
+}
+function formattedQuery(text) {
+    // Unicode regexp matching retains offsets when lowercasing would expand a character.
+    return new SearchQuery({
+        search: escapedPattern(text),
+        regexp: true,
+        literal: true,
+        filter: (state, match) => {
+            const from = state.doc.resolve(match.from);
+            const to = state.doc.resolve(match.to);
+            if (from.parent !== to.parent || !from.parent.inlineContent)
+                return false;
+            const content = state.doc.slice(match.from, match.to).content;
+            let textOnly = true;
+            content.forEach((node) => {
+                if (!node.isText)
+                    textOnly = false;
+            });
+            return textOnly;
+        },
+    });
+}
+export function findFormatted(view, text) {
+    const query = formattedQuery(text);
+    const previous = getSearchState(view.state)?.query.search;
+    let tr = setSearchState(view.state.tr, query);
+    if (text) {
+        const start = previous === query.search
+            ? view.state.selection.to
+            : view.state.selection.from;
+        const match = query.findNext(view.state, start) ?? query.findNext(view.state, 0);
+        if (match)
+            tr = tr
+                .setSelection(TextSelection.create(tr.doc, match.from, match.to))
+                .scrollIntoView();
+        else
+            tr = tr.setSelection(Selection.near(view.state.selection.$to));
+    }
+    else if (previous)
+        tr = tr.setSelection(Selection.near(view.state.selection.$to));
+    view.dispatch(tr);
+}
+export function replaceFormatted(view, search, replacement, preflight, all = false) {
+    if (!search)
+        return 0;
+    const state = view.state;
+    const query = formattedQuery(search);
+    if (!query.valid)
+        return 0;
+    const matches = [];
+    if (all) {
+        for (let position = 0;;) {
+            const match = query.findNext(state, position);
+            if (!match)
+                break;
+            matches.push(match);
+            position = match.to;
+        }
+    }
+    else {
+        const selection = state.selection;
+        const current = query.findNext(state, selection.from, selection.to);
+        const match = (current?.from === selection.from && current.to === selection.to
+            ? current
+            : undefined) ??
+            query.findNext(state, selection.to) ??
+            query.findNext(state, 0);
+        if (match)
+            matches.push(match);
+    }
+    const value = replacement.replace(/\r\n?/g, '\n');
+    const changed = matches.filter((match) => state.doc.textBetween(match.from, match.to) !== value);
+    if (!changed.length)
+        return 0;
+    let tr = setSearchState(state.tr, query);
+    for (const match of [...changed].reverse()) {
+        const from = state.doc.resolve(match.from);
+        const to = state.doc.resolve(match.to);
+        const marks = from.marksAcross(to) ?? from.marks();
+        let content = Fragment.empty;
+        if (from.parent.type.spec.code) {
+            if (value)
+                content = Fragment.from(state.schema.text(value, marks));
+        }
+        else {
+            const nodes = [];
+            const lines = value.split('\n');
+            lines.forEach((line, index) => {
+                if (index)
+                    nodes.push(state.schema.nodes.hardbreak.create({ isHTML: index === lines.length - 1 && line === '' }, null, marks));
+                if (line)
+                    nodes.push(state.schema.text(line, marks));
+            });
+            content = Fragment.fromArray(nodes);
+        }
+        tr.replace(match.from, match.to, new Slice(content, 0, 0));
+    }
+    if (!all) {
+        const match = changed[0];
+        tr = tr.setSelection(TextSelection.create(tr.doc, match.from, tr.mapping.map(match.to, 1)));
+    }
+    try {
+        preflight(tr.doc);
+    }
+    catch (error) {
+        if (error instanceof InkKitError)
+            throw error;
+        throw new InkKitError('preservation', error instanceof Error ? error.message : 'Cannot preserve replacement');
+    }
+    view.dispatch(closeHistory(tr).scrollIntoView());
+    view.dispatch(closeHistory(view.state.tr).setMeta('addToHistory', false));
+    return changed.length;
+}

package/dist/selection.js

@@ -1,7 +1,8 @@
 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';
+const name = 'inkkit-selection';
+const ranges = new Map();
 /** The selected text within each block. */
 function covered(state) {
     const { from, to, empty, visible } = state.selection;
@@ -27,21 +28,32 @@ function domRange(view, span) {
     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));
+function paint(view) {
+    ranges.set(view, (covered(view.state) ?? []).map((span) => domRange(view, span)));
+    refresh();
+}
+function refresh() {
+    if (ranges.size === 0) {
+        CSS.highlights.delete(name);
+        return;
+    }
+    const highlight = new Highlight();
+    for (const selection of ranges.values())
+        for (const range of selection)
+            highlight.add(range);
+    CSS.highlights.set(name, highlight);
 }
 // 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);
+        paint(view);
         return {
-            update: (view) => paint(view, highlight),
-            destroy: () => CSS.highlights.delete(name),
+            update: (view) => paint(view),
+            destroy: () => {
+                ranges.delete(view);
+                refresh();
+            },
         };
     },
 }));

package/dist/source.d.ts

@@ -0,0 +1,17 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+export declare const sourceAttribute = "inkkitSource";
+export interface SourceProvenance {
+    readonly text: string;
+    readonly format: 'md' | 'txt';
+    readonly from: number;
+    readonly to: number;
+}
+export declare function cleanSourceDoc(doc: ProseNode): ProseNode;
+export declare function rawOffset(source: string, normalized: number): number;
+export declare function normalizedOffset(source: string, raw: number): number;
+export declare function editedPlainSource(previous: string, value: string): string;
+export declare function sourceSelection(source: string, start: number, end: number): {
+    markdown: string;
+    shareable: string;
+};
+export declare function revealSourceCaret(plain: HTMLTextAreaElement): void;