@aicayzer/inkkit 0.0.8 → 0.0.10

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/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();
-    }
-}

package/dist/style.css

@@ -235,6 +235,45 @@
   background: var(--_inkkit-accent);
 }
 
+.inkkit-root .ProseMirror .inkkit-file {
+  vertical-align: middle;
+  border: 1px solid var(--_inkkit-rule);
+  border-radius: 4px;
+  padding: 4px;
+  white-space: normal;
+}
+
+.inkkit-root .ProseMirror .inkkit-file audio,
+.inkkit-root .ProseMirror .inkkit-file video,
+.inkkit-root .ProseMirror .inkkit-file iframe {
+  display: block;
+  max-width: 100%;
+}
+
+.inkkit-root .ProseMirror .inkkit-file video {
+  max-height: 480px;
+}
+
+.inkkit-root .ProseMirror .inkkit-file iframe {
+  width: min(600px, 100%);
+  height: 360px;
+  border: 0;
+}
+
+.inkkit-root .ProseMirror .inkkit-file-label {
+  overflow-wrap: anywhere;
+}
+
+.inkkit-root .ProseMirror .inkkit-file-control {
+  margin-inline-start: 0.5em;
+  font: inherit;
+  color: var(--_inkkit-text);
+  background: var(--_inkkit-code-bg);
+  border: 1px solid var(--_inkkit-rule);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
 .inkkit-root .ProseMirror {
   /* The viewport, not the wrapper Milkdown adds, so a click below the text still places the caret. */
   min-height: var(--inkkit-min-height, 100%);

package/dist/text-ranges.d.ts

@@ -0,0 +1,26 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import { type TextRect } from './types.js';
+export interface TextSpan {
+    from: number;
+    to: number;
+    start: number;
+    end: number;
+    kind: 'text' | 'break' | 'embed' | 'separator';
+}
+export interface TextProjection {
+    text: string;
+    spans: TextSpan[];
+}
+export declare function readableProjection(doc: ProseNode): TextProjection;
+export declare function projectionPosition(projection: TextProjection, offset: number, side: -1 | 1): number;
+export declare function projectionOffset(projection: TextProjection, position: number): number;
+export declare function validateOffsets(text: string, from: number, to: number): void;
+export declare function textRect(rect: Pick<TextRect, 'left' | 'top' | 'right' | 'bottom'>): TextRect;
+export declare function formattedRects(view: EditorView, projection: TextProjection, from: number, to: number): TextRect[];
+export declare function literalRects(plain: HTMLTextAreaElement, from: number, to: number): TextRect[];
+export declare function intersectsViewport(rect: Pick<TextRect, 'top' | 'right' | 'bottom' | 'left'>, viewport: TextRect): boolean;
+export declare function literalVisibleRanges(plain: HTMLTextAreaElement, viewport: TextRect): {
+    from: number;
+    to: number;
+}[];

package/dist/text-ranges.js

@@ -0,0 +1,233 @@
+import { InkKitError } from './types.js';
+import { fileReference } from './linked-syntax.js';
+export function readableProjection(doc) {
+    const result = { text: '', spans: [] };
+    let blocks = 0;
+    const append = (text, start, end, kind) => {
+        const from = result.text.length;
+        result.text += text;
+        result.spans.push({ from, to: result.text.length, start, end, kind });
+    };
+    const block = (start) => {
+        if (blocks++)
+            append('\n', result.spans.at(-1)?.end ?? start, start, 'separator');
+    };
+    doc.descendants((node, position) => {
+        const name = node.type.name;
+        if (name === 'comment_inline' ||
+            name === 'comment_block' ||
+            name === 'reference_definition')
+            return false;
+        if (name === 'inkkit_callout') {
+            block(position);
+            append(node.attrs.title ||
+                String(node.attrs.kind).replace(/^./, (value) => value.toUpperCase()), position, position + 1, 'embed');
+            return true;
+        }
+        if (node.isTextblock) {
+            block(position + 1);
+            if (!node.content.size)
+                append('', position + 1, position + 1, 'text');
+            return true;
+        }
+        if (node.isText) {
+            append(node.text ?? '', position, position + node.nodeSize, 'text');
+            return false;
+        }
+        if (name === 'hardbreak' || name === 'hard_break') {
+            append('\n', position, position + node.nodeSize, 'break');
+            return false;
+        }
+        if (name === 'image' ||
+            name === 'footnote_reference' ||
+            name === 'inkkit_wiki_link') {
+            append(name === 'image'
+                ? fileReference(node).label || 'Image'
+                : name === 'inkkit_wiki_link'
+                    ? String(node.attrs.label || node.attrs.target || 'Link')
+                    : `[${node.attrs.label}]`, position, position + node.nodeSize, 'embed');
+            return false;
+        }
+        return true;
+    });
+    return result;
+}
+export function projectionPosition(projection, offset, side) {
+    const spans = projection.spans;
+    const span = spans.find((span) => (offset > span.from && offset < span.to) ||
+        (side > 0 ? offset === span.from : offset === span.to)) ?? (side > 0 ? spans.at(-1) : spans[0]);
+    if (!span)
+        return 0;
+    if (span.kind === 'text')
+        return (span.start +
+            Math.max(0, Math.min(offset - span.from, span.to - span.from)));
+    return offset <= span.from ? span.start : span.end;
+}
+export function projectionOffset(projection, position) {
+    for (const span of projection.spans) {
+        if (position < span.start)
+            return span.from;
+        if (position <= span.end)
+            return span.kind === 'text'
+                ? span.from + Math.max(0, position - span.start)
+                : position === span.start
+                    ? span.from
+                    : span.to;
+    }
+    return projection.text.length;
+}
+export function validateOffsets(text, from, to) {
+    const split = (offset) => offset > 0 &&
+        offset < text.length &&
+        /[\uD800-\uDBFF]/.test(text[offset - 1]) &&
+        /[\uDC00-\uDFFF]/.test(text[offset]);
+    if (!Number.isInteger(from) ||
+        !Number.isInteger(to) ||
+        from < 0 ||
+        to < from ||
+        to > text.length ||
+        split(from) ||
+        split(to))
+        throw new InkKitError('invalid-range', 'Range must use valid UTF-16 boundaries in the text snapshot');
+}
+export function textRect(rect) {
+    return {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        width: Math.max(0, rect.right - rect.left),
+        height: Math.max(0, rect.bottom - rect.top),
+    };
+}
+export function formattedRects(view, projection, from, to) {
+    if (from === to) {
+        const position = projectionPosition(projection, from, 1);
+        const dom = view.domAtPos(position);
+        const element = dom.node.nodeType === 1 ? dom.node : dom.node.parentElement;
+        if (!element?.getClientRects().length)
+            return [];
+        return [textRect(view.coordsAtPos(position))];
+    }
+    const rects = [];
+    for (const span of projection.spans) {
+        if (span.to <= from || span.from >= to || span.kind === 'separator')
+            continue;
+        if (span.kind === 'embed' || span.kind === 'break') {
+            const node = view.nodeDOM(span.start);
+            if (node instanceof Element) {
+                const label = node.matches('.inkkit-callout')
+                    ? (node.querySelector(':scope > .inkkit-callout-header > .inkkit-callout-title') ?? node)
+                    : node;
+                rects.push(...Array.from(label.getClientRects(), textRect));
+            }
+            continue;
+        }
+        const start = view.domAtPos(span.start + Math.max(0, from - span.from), 1);
+        const end = view.domAtPos(span.start + Math.min(span.to - span.from, to - span.from), -1);
+        const range = view.dom.ownerDocument.createRange();
+        range.setStart(start.node, start.offset);
+        range.setEnd(end.node, end.offset);
+        rects.push(...Array.from(range.getClientRects(), textRect));
+    }
+    return rects.filter((rect) => rect.height > 0 && rect.width >= 0);
+}
+function withLiteralLayout(plain, measure) {
+    if (!plain.clientWidth || !plain.clientHeight)
+        return undefined;
+    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));
+    const origin = plain.getBoundingClientRect();
+    Object.assign(mirror.style, {
+        position: 'fixed',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        left: `${origin.left + plain.clientLeft - plain.scrollLeft}px`,
+        top: `${origin.top + plain.clientTop - plain.scrollTop}px`,
+        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 text = document.createTextNode(plain.value + '\u200b');
+    mirror.append(text);
+    document.body.append(mirror);
+    try {
+        return measure(text);
+    }
+    finally {
+        mirror.remove();
+    }
+}
+export function literalRects(plain, from, to) {
+    return (withLiteralLayout(plain, (text) => {
+        const range = plain.ownerDocument.createRange();
+        range.setStart(text, from);
+        range.setEnd(text, from === to ? Math.min(to + 1, text.length) : to);
+        return Array.from(range.getClientRects(), (rect) => textRect({
+            left: rect.left,
+            right: from === to ? rect.left : rect.right,
+            top: rect.top,
+            bottom: rect.bottom,
+        }));
+    }) ?? []);
+}
+export function intersectsViewport(rect, viewport) {
+    return (viewport.width > 0 &&
+        viewport.height > 0 &&
+        rect.bottom > viewport.top &&
+        rect.top < viewport.bottom &&
+        rect.right >= viewport.left &&
+        rect.left < viewport.right);
+}
+export function literalVisibleRanges(plain, viewport) {
+    return (withLiteralLayout(plain, (text) => {
+        const range = plain.ownerDocument.createRange();
+        const ranges = [];
+        const visible = (from, to) => {
+            range.setStart(text, from);
+            range.setEnd(text, to);
+            return Array.from(range.getClientRects()).some((rect) => intersectsViewport(rect, viewport));
+        };
+        for (let start = 0; start < plain.value.length;) {
+            const newline = plain.value.indexOf('\n', start);
+            const end = newline < 0 ? plain.value.length : newline + 1;
+            if (visible(start, end)) {
+                for (let from = start; from < end;) {
+                    const to = from + (plain.value.codePointAt(from) > 0xffff ? 2 : 1);
+                    if (visible(from, to)) {
+                        const previous = ranges.at(-1);
+                        if (previous?.to === from)
+                            previous.to = to;
+                        else
+                            ranges.push({ from, to });
+                    }
+                    from = to;
+                }
+            }
+            start = end;
+        }
+        return ranges;
+    }) ?? []);
+}

package/dist/types.d.ts

@@ -14,7 +14,7 @@ export interface DocumentSnapshot extends DocumentInput {
     revision: number;
     dirty: boolean;
 }
-export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'read-only' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable' | 'diagram-unavailable';
+export type EditorErrorCode = 'not-ready' | 'stale-document' | 'composition' | 'read-only' | 'operation-pending' | 'destroyed' | 'preservation' | 'image-unavailable' | 'diagram-unavailable' | 'invalid-range';
 export declare class InkKitError extends Error {
     readonly code: EditorErrorCode;
     constructor(code: EditorErrorCode, message: string);
@@ -39,6 +39,49 @@ export interface ImageAdapter {
     }>;
     exportImage(reference: string, context: DocumentContext): Promise<PortableImage>;
 }
+export interface WikiLinkReference {
+    target: string;
+    fragment?: string;
+    label: string;
+}
+export interface WikiLinkAdapter {
+    resolve?(reference: WikiLinkReference, context: DocumentContext): {
+        missing?: boolean;
+    } | undefined;
+    open(reference: WikiLinkReference, context: DocumentContext): void;
+}
+export interface FileReference {
+    reference: string;
+    kind: 'path' | 'wiki';
+    fragment?: string;
+    label?: string;
+    width?: number;
+}
+export interface FileContext extends DocumentContext {
+    signal: AbortSignal;
+}
+export type FilePresentation = {
+    kind: 'image' | 'audio' | 'video' | 'pdf';
+    url: string;
+    label?: string;
+    mimeType?: string;
+} | {
+    kind: 'file' | 'missing';
+    label?: string;
+} | {
+    kind: 'error';
+    label?: string;
+    message: string;
+};
+export interface FileAdapter {
+    resolve(reference: FileReference, context: FileContext): Promise<FilePresentation>;
+    exportImage?(reference: FileReference, context: FileContext): Promise<PortableImage>;
+    open?(reference: FileReference, context: DocumentContext): void;
+    contextMenu?(reference: FileReference, point: {
+        clientX: number;
+        clientY: number;
+    }, context: DocumentContext): void;
+}
 export interface ClipboardInput {
     text: string;
     markdown?: string;
@@ -65,7 +108,7 @@ export interface ClipboardDiagram {
     error?: string;
 }
 export interface PrintableWarning {
-    code: 'diagram-unavailable';
+    code: 'diagram-unavailable' | 'attachment-fallback' | 'attachment-unavailable';
     message: string;
 }
 export interface PrintableDocument {
@@ -78,3 +121,42 @@ export interface PrintableDocument {
     assets: readonly PortableImage[];
     warnings: readonly PrintableWarning[];
 }
+export interface TextRange {
+    snapshotId: string;
+    from: number;
+    to: number;
+}
+export interface ReadableTextSnapshot {
+    snapshotId: string;
+    documentId: string;
+    generation: number;
+    revision: number;
+    format: DocumentFormat;
+    mode: 'source' | 'formatted';
+    text: string;
+    selection: TextRange;
+}
+export interface TextRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface ViewportInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ViewportOptions {
+    scrollContainer?: HTMLElement;
+    insets?: Partial<ViewportInsets>;
+}
+export interface ViewportSnapshot {
+    rect: TextRect;
+    insets: ViewportInsets;
+    scrollTop: number;
+    scrollLeft: number;
+}

package/dist/wiki-view.d.ts

@@ -0,0 +1,21 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { DocumentContext, WikiLinkAdapter } from './types.js';
+import type { EditorLabels } from './labels.js';
+interface WikiRuntime {
+    capture(): {
+        context: DocumentContext;
+        isCurrent(): boolean;
+    };
+    active(): boolean;
+    labels: Readonly<EditorLabels>;
+    error?(error: Error): void;
+}
+export declare function wikiLinkView(adapter: WikiLinkAdapter, runtime: WikiRuntime): import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (node: ProseNode, view: EditorView) => {
+    dom: HTMLSpanElement;
+    update(next: ProseNode): boolean;
+    stopEvent(event: Event): boolean;
+    ignoreMutation: () => true;
+    destroy(): void;
+}>;
+export {};