@aicayzer/inkkit 0.0.7 → 0.0.9

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,6 +1,7 @@
 export { InkKitEditor } from './editor.js';
-export type { EditorEvents, EditingMode, 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 { DocumentFormat, DocumentContext, DocumentInput, DocumentSnapshot, EditorErrorCode, ImageAdapter, CapturedImage, PortableImage, ClipboardInput, ClipboardOutput, ClipboardImage, ClipboardDiagram, PrintableDocument, PrintableWarning, TextRange, ReadableTextSnapshot, TextRect, ViewportInsets, ViewportOptions, ViewportSnapshot, } 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/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

@@ -10,5 +10,6 @@ export interface LiteralReplacement extends TextMatch {
 }
 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 findFormatted(view: EditorView, text: string): boolean;
 export declare function replaceFormatted(view: EditorView, search: string, replacement: string, preflight: (doc: ProseNode) => void, all?: boolean): number;
+export declare function replaceFormattedRange(view: EditorView, from: number, to: number, replacement: string, preflight: (doc: ProseNode) => void): boolean;

package/dist/search.js

@@ -1,6 +1,6 @@
 import { Fragment, Slice } from '@milkdown/kit/prose/model';
 import { closeHistory } from '@milkdown/kit/prose/history';
-import { Selection, TextSelection } from '@milkdown/kit/prose/state';
+import { Selection, TextSelection, } from '@milkdown/kit/prose/state';
 import { SearchQuery, setSearchState, getSearchState } from 'prosemirror-search';
 import { InkKitError } from './types.js';
 function escapedPattern(text) {
@@ -82,21 +82,44 @@ export function findFormatted(view, text) {
     const query = formattedQuery(text);
     const previous = getSearchState(view.state)?.query.search;
     let tr = setSearchState(view.state.tr, query);
+    let found = false;
     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)
+        if (match) {
+            found = true;
             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);
+    return found;
+}
+function replacementSlice(state, from, to, value) {
+    const start = state.doc.resolve(from), end = state.doc.resolve(to);
+    const marks = start.marksAcross(end) ?? start.marks();
+    const nodes = [];
+    if (start.parent.type.spec.code) {
+        if (value)
+            nodes.push(state.schema.text(value, marks));
+    }
+    else {
+        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));
+        });
+    }
+    return new Slice(Fragment.fromArray(nodes), 0, 0);
 }
 export function replaceFormatted(view, search, replacement, preflight, all = false) {
     if (!search)
@@ -132,26 +155,7 @@ export function replaceFormatted(view, search, replacement, preflight, all = fal
         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));
+        tr.replace(match.from, match.to, replacementSlice(state, match.from, match.to, value));
     }
     if (!all) {
         const match = changed[0];
@@ -169,3 +173,30 @@ export function replaceFormatted(view, search, replacement, preflight, all = fal
     view.dispatch(closeHistory(view.state.tr).setMeta('addToHistory', false));
     return changed.length;
 }
+export function replaceFormattedRange(view, from, to, replacement, preflight) {
+    const start = view.state.doc.resolve(from);
+    const end = view.state.doc.resolve(to);
+    let textOnly = start.parent === end.parent && start.parent.inlineContent;
+    view.state.doc.nodesBetween(from, to, (node) => {
+        if (!node.isText && !node.isTextblock)
+            textOnly = false;
+    });
+    if (!textOnly)
+        throw new InkKitError('invalid-range', 'Replacement requires literal text within one block');
+    const value = replacement.replace(/\r\n?/g, '\n');
+    if (view.state.doc.textBetween(from, to) === value)
+        return false;
+    const tr = closeHistory(view.state.tr.replace(from, to, replacementSlice(view.state, from, to, value)));
+    tr.setSelection(TextSelection.create(tr.doc, from, tr.mapping.map(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(tr);
+    view.dispatch(closeHistory(view.state.tr).setMeta('addToHistory', false));
+    return true;
+}

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

@@ -14,4 +14,3 @@ export declare function sourceSelection(source: string, start: number, end: numb
     markdown: string;
     shareable: string;
 };
-export declare function revealSourceCaret(plain: HTMLTextAreaElement): void;

package/dist/source.js

@@ -55,63 +55,3 @@ export function sourceSelection(source, start, end) {
     shareable += source.slice(cursor, to);
     return { markdown: source.slice(from, to), shareable };
 }
-export function revealSourceCaret(plain) {
-    if (!plain.clientWidth || !plain.clientHeight)
-        return;
-    const document = plain.ownerDocument;
-    const style = document.defaultView.getComputedStyle(plain);
-    const mirror = document.createElement('div');
-    for (const property of [
-        'font',
-        'font-family',
-        'font-size',
-        'font-weight',
-        'font-style',
-        'font-stretch',
-        'font-variant',
-        'line-height',
-        'letter-spacing',
-        'word-spacing',
-        'tab-size',
-        'padding',
-        'text-indent',
-        'text-transform',
-        'direction',
-        'word-break',
-    ])
-        mirror.style.setProperty(property, style.getPropertyValue(property));
-    Object.assign(mirror.style, {
-        position: 'fixed',
-        visibility: 'hidden',
-        left: '-10000px',
-        top: '0',
-        width: `${plain.clientWidth}px`,
-        boxSizing: 'border-box',
-        whiteSpace: plain.wrap === 'off' ? 'pre' : 'pre-wrap',
-        overflowWrap: plain.wrap === 'off' ? 'normal' : 'break-word',
-    });
-    mirror.setAttribute('aria-hidden', 'true');
-    const caret = document.createElement('span');
-    caret.setAttribute('data-inkkit-source-caret', '');
-    caret.textContent = plain.value.slice(plain.selectionStart) || '\u200b';
-    mirror.append(document.createTextNode(plain.value.slice(0, plain.selectionStart)), caret);
-    document.body.append(mirror);
-    try {
-        // Textareas expose selection offsets but no caret geometry; matching their layout also accounts for wrapped lines.
-        const rect = caret.getClientRects()[0] ?? caret.getBoundingClientRect();
-        const top = rect.top - mirror.getBoundingClientRect().top;
-        const lineHeight = Math.max(rect.height, Number.parseFloat(style.lineHeight) || rect.height);
-        const insetTop = Number.parseFloat(style.paddingTop) || 0;
-        const insetBottom = Number.parseFloat(style.paddingBottom) || 0;
-        if (plain.selectionStart === 0)
-            plain.scrollTop = 0;
-        else if (top < plain.scrollTop + insetTop)
-            plain.scrollTop = Math.max(0, top - insetTop);
-        else if (top + lineHeight >
-            plain.scrollTop + plain.clientHeight - insetBottom)
-            plain.scrollTop = Math.max(0, top + lineHeight - plain.clientHeight + insetBottom);
-    }
-    finally {
-        mirror.remove();
-    }
-}