@aicayzer/inkkit 0.0.8 → 0.0.10

package/dist/files.d.ts

@@ -0,0 +1,40 @@
+import type { DocumentContext, FileAdapter, FileContext, FilePresentation, FileReference } from './types.js';
+import type { EditorLabels } from './labels.js';
+export interface FileViewRuntime {
+    adapter: FileAdapter;
+    capture(): {
+        context: DocumentContext;
+        isCurrent(): boolean;
+    };
+    active(): boolean;
+    labels: Readonly<EditorLabels>;
+    error?(error: Error): void;
+}
+export declare function withFileSignal<T>(operation: Promise<T>, signal: AbortSignal): Promise<T>;
+export declare function resolveFile(adapter: FileAdapter, reference: FileReference, context: FileContext): Promise<FilePresentation>;
+export type FileResolutionState = {
+    status: 'idle';
+} | {
+    status: 'loading';
+} | {
+    status: 'resolved';
+    presentation: FilePresentation;
+} | {
+    status: 'failed';
+    error: Error;
+};
+export declare class FileResolution {
+    private readonly runtime;
+    private readonly changed;
+    state: FileResolutionState;
+    private reference?;
+    private key;
+    private request?;
+    private dead;
+    constructor(runtime: FileViewRuntime, changed: () => void);
+    update(reference: FileReference): void;
+    retry(): void;
+    private current;
+    cancel(): void;
+    destroy(): void;
+}

package/dist/files.js

@@ -0,0 +1,133 @@
+function abort(signal) {
+    if (signal.aborted)
+        throw new DOMException('File resolution cancelled', 'AbortError');
+}
+export function withFileSignal(operation, signal) {
+    return new Promise((resolve, reject) => {
+        const cleanup = () => signal.removeEventListener('abort', cancelled);
+        const cancelled = () => {
+            cleanup();
+            reject(new DOMException('File operation cancelled', 'AbortError'));
+        };
+        if (signal.aborted)
+            cancelled();
+        else
+            signal.addEventListener('abort', cancelled, { once: true });
+        operation.then((result) => {
+            cleanup();
+            if (signal.aborted)
+                cancelled();
+            else
+                resolve(result);
+        }, (error) => {
+            cleanup();
+            reject(error);
+        });
+    });
+}
+export async function resolveFile(adapter, reference, context) {
+    abort(context.signal);
+    const presentation = await withFileSignal(adapter.resolve(Object.freeze({ ...reference }), context), context.signal);
+    abort(context.signal);
+    if (!presentation ||
+        typeof presentation !== 'object' ||
+        !['image', 'audio', 'video', 'pdf', 'file', 'missing', 'error'].includes(presentation.kind))
+        throw new TypeError('File adapter returned an unsupported presentation');
+    if (presentation.label !== undefined &&
+        typeof presentation.label !== 'string')
+        throw new TypeError('File presentation label must be text');
+    if (presentation.kind === 'error' && typeof presentation.message !== 'string')
+        throw new TypeError('File presentation error must include a message');
+    if ('url' in presentation) {
+        if (typeof presentation.url !== 'string' || !presentation.url.trim())
+            throw new TypeError('File presentation needs a resource URL');
+        const url = new URL(presentation.url, document.baseURI);
+        if (['javascript:', 'vbscript:'].includes(url.protocol))
+            throw new TypeError('Executable file presentation URLs are not supported');
+        const prefix = presentation.kind === 'pdf' ? 'application/pdf' : `${presentation.kind}/`;
+        const mime = presentation.mimeType?.toLowerCase().split(';')[0]?.trim();
+        if (mime &&
+            (presentation.kind === 'pdf' ? mime !== prefix : !mime.startsWith(prefix)))
+            throw new TypeError('File presentation MIME type does not match its kind');
+        const dataMime = url.pathname.toLowerCase().split(/[;,]/)[0] ?? '';
+        if (url.protocol === 'data:' &&
+            (presentation.kind === 'pdf'
+                ? dataMime !== prefix
+                : !dataMime.startsWith(prefix)))
+            throw new TypeError('File presentation data URL does not match its kind');
+    }
+    else if (['image', 'audio', 'video', 'pdf'].includes(presentation.kind)) {
+        throw new TypeError('File presentation needs a resource URL');
+    }
+    return Object.freeze({ ...presentation });
+}
+export class FileResolution {
+    runtime;
+    changed;
+    state = { status: 'idle' };
+    reference;
+    key = '';
+    request;
+    dead = false;
+    constructor(runtime, changed) {
+        this.runtime = runtime;
+        this.changed = changed;
+    }
+    update(reference) {
+        const key = JSON.stringify([
+            reference.reference,
+            reference.kind,
+            reference.fragment,
+        ]);
+        this.reference = Object.freeze({ ...reference });
+        if (this.key === key && this.request?.isCurrent())
+            return;
+        this.key = key;
+        this.retry();
+    }
+    retry() {
+        this.cancel();
+        if (this.dead || !this.reference || !this.runtime.active())
+            return;
+        const captured = this.runtime.capture();
+        const request = {
+            controller: new AbortController(),
+            isCurrent: captured.isCurrent,
+        };
+        this.request = request;
+        this.state = { status: 'loading' };
+        this.changed();
+        void resolveFile(this.runtime.adapter, this.reference, {
+            ...captured.context,
+            signal: request.controller.signal,
+        }).then((presentation) => {
+            if (!this.current(request))
+                return;
+            this.state = { status: 'resolved', presentation };
+            this.changed();
+        }, (failure) => {
+            if (!this.current(request))
+                return;
+            const error = failure instanceof Error ? failure : new Error(String(failure));
+            this.state = { status: 'failed', error };
+            this.changed();
+            this.runtime.error?.(error);
+        });
+    }
+    current(request) {
+        return (!this.dead &&
+            this.request === request &&
+            !request.controller.signal.aborted &&
+            this.runtime.active() &&
+            request.isCurrent());
+    }
+    cancel() {
+        this.request?.controller.abort();
+        this.request = undefined;
+        this.state = { status: 'idle' };
+    }
+    destroy() {
+        this.dead = true;
+        this.cancel();
+    }
+}

package/dist/images.d.ts

@@ -1,6 +1,7 @@
 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';
+import { type FileViewRuntime } from './files.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): {
@@ -8,26 +9,41 @@ export declare function splitAlt(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;
+    private readonly runtime?;
+    private readonly canMutate;
     dom: HTMLElement;
     private image?;
+    private media?;
+    private pdf?;
     private width;
     private stopResize?;
-    constructor(node: ProseNode, view: EditorView, getPos: () => number | undefined, adapter: ImageAdapter | undefined);
+    private resolution?;
+    private previewFailed;
+    constructor(node: ProseNode, view: EditorView, getPos: () => number | undefined, adapter: ImageAdapter | undefined, runtime?: FileViewRuntime | undefined, canMutate?: () => boolean);
+    private reference;
+    private active;
     update(node: ProseNode): boolean;
     stopEvent(event: Event): boolean;
     ignoreMutation(): boolean;
+    private mediaPolicy;
     private cancelResize;
+    private releaseMedia;
     destroy(): void;
+    private button;
+    private activate;
+    private report;
+    private card;
+    private failPreview;
     private render;
+    private renderImage;
     private startResize;
     private commit;
+    private canResize;
 }
-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 declare function imageView(adapter?: ImageAdapter, runtime?: FileViewRuntime, canMutate?: () => boolean): import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (node: ProseNode, view: EditorView, getPos: () => number | undefined) => ImageView>;
 export {};

package/dist/images.js

@@ -1,5 +1,8 @@
 import { imageSchema } from '@milkdown/kit/preset/commonmark';
+import { closeHistory } from '@milkdown/kit/prose/history';
 import { $view } from '@milkdown/kit/utils';
+import { FileResolution } from './files.js';
+import { fileReference } from './linked-syntax.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 function splitAlt(alt) {
@@ -12,75 +15,274 @@ 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;
+    runtime;
+    canMutate;
     dom;
     image;
+    media;
+    pdf;
     width = null;
     stopResize;
-    constructor(node, view, getPos, adapter) {
+    resolution;
+    previewFailed = false;
+    constructor(node, view, getPos, adapter, runtime, canMutate = () => true) {
         this.node = node;
         this.view = view;
         this.getPos = getPos;
         this.adapter = adapter;
+        this.runtime = runtime;
+        this.canMutate = canMutate;
         this.dom = document.createElement('span');
         this.dom.className = 'image';
         this.view.dom.addEventListener('inkkit-cancel-resize', this.cancelResize);
+        this.view.dom.addEventListener('inkkit-media-policy', this.mediaPolicy);
+        if (runtime) {
+            this.resolution = new FileResolution({ ...runtime, active: () => this.active() }, () => {
+                this.previewFailed = false;
+                this.render();
+            });
+            this.resolution.update(this.reference());
+        }
         this.render();
     }
+    reference() {
+        return fileReference(this.node);
+    }
+    active() {
+        return (!!this.runtime?.active() &&
+            !this.dom.closest('[data-inkkit-folded="true"], [hidden]'));
+    }
     update(node) {
         if (node.type !== this.node.type)
             return false;
+        if (node.sameMarkup(this.node)) {
+            this.node = node;
+            return true;
+        }
         this.node = node;
+        this.previewFailed = false;
+        this.resolution?.update(this.reference());
         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'));
+        return (event.target instanceof Element &&
+            !!event.target.closest('.image-handle, .inkkit-file-control, audio, video, iframe'));
     }
     ignoreMutation() {
         return true;
     }
+    mediaPolicy = () => {
+        if (!this.runtime)
+            return;
+        if (!this.active()) {
+            this.stopResize?.();
+            this.stopResize = undefined;
+            this.resolution?.cancel();
+            this.releaseMedia();
+            this.render();
+        }
+        else
+            this.resolution?.update(this.reference());
+    };
     cancelResize = () => {
+        if (!this.stopResize)
+            return;
         this.stopResize?.();
         this.stopResize = undefined;
         this.render();
     };
+    releaseMedia() {
+        const media = this.media;
+        this.media = undefined;
+        if (media) {
+            media.pause();
+            media.removeAttribute('src');
+            media.load();
+        }
+        this.pdf?.removeAttribute('src');
+        this.pdf = undefined;
+    }
     destroy() {
         this.view.dom.removeEventListener('inkkit-cancel-resize', this.cancelResize);
+        this.view.dom.removeEventListener('inkkit-media-policy', this.mediaPolicy);
         this.stopResize?.();
         this.stopResize = undefined;
+        this.resolution?.destroy();
+        this.releaseMedia();
+    }
+    button(label, action) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'inkkit-file-control';
+        button.textContent = label;
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            action();
+        });
+        return button;
+    }
+    activate = () => {
+        if (!this.runtime || !this.active())
+            return;
+        const captured = this.runtime.capture();
+        try {
+            if (captured.isCurrent())
+                this.runtime.adapter.open?.(this.reference(), captured.context);
+        }
+        catch (error) {
+            this.report(error);
+        }
+    };
+    report(error) {
+        this.runtime?.error?.(error instanceof Error ? error : new Error(String(error)));
+    }
+    card(label, status, retry = false) {
+        const text = document.createElement('span');
+        text.className = 'inkkit-file-label';
+        text.textContent = status ? `${label}: ${status}` : label;
+        if (status)
+            text.setAttribute('role', 'status');
+        this.dom.append(text);
+        if (retry && this.runtime)
+            this.dom.append(this.button(this.runtime.labels.fileRetry, () => this.resolution?.retry()));
+        if (this.runtime?.adapter.open) {
+            const open = this.button(this.runtime.labels.fileOpen, this.activate);
+            open.setAttribute('aria-label', `${this.runtime.labels.fileOpen} ${label}`);
+            this.dom.append(open);
+        }
+    }
+    failPreview() {
+        this.previewFailed = true;
+        this.runtime?.error?.(new Error(this.runtime.labels.filePreviewUnavailable));
+        this.render();
     }
     render() {
         this.stopResize?.();
         this.stopResize = undefined;
-        const src = String(this.node.attrs.src ?? '');
-        const { alt, width } = splitAlt(String(this.node.attrs.alt ?? ''));
+        this.releaseMedia();
+        const reference = this.reference();
+        const { alt, width } = this.node.attrs.inkkitFileRaw
+            ? {
+                alt: reference.label ?? reference.reference,
+                width: reference.width ?? null,
+            }
+            : 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 (this.runtime) {
+            this.dom.classList.add('inkkit-file');
+            this.dom.oncontextmenu = (event) => {
+                if (!this.runtime?.adapter.contextMenu || !this.active())
+                    return;
+                const captured = this.runtime.capture();
+                if (!captured.isCurrent())
+                    return;
+                event.preventDefault();
+                try {
+                    this.runtime.adapter.contextMenu(this.reference(), { clientX: event.clientX, clientY: event.clientY }, captured.context);
+                }
+                catch (error) {
+                    this.report(error);
+                }
+            };
+            const state = this.resolution.state;
+            const label = state.status === 'resolved'
+                ? state.presentation.label || alt || reference.reference
+                : alt || reference.reference;
+            this.dom.setAttribute('aria-label', label);
+            this.dom.dataset.inkkitFileState = this.previewFailed
+                ? 'error'
+                : state.status;
+            this.dom.dataset.inkkitFileKind =
+                state.status === 'resolved' ? state.presentation.kind : 'file';
+            if (this.previewFailed) {
+                this.card(label, this.runtime.labels.filePreviewUnavailable, true);
+                return;
+            }
+            if (state.status === 'loading' || state.status === 'idle') {
+                this.card(label, this.runtime.labels.fileLoading, true);
+                return;
+            }
+            if (state.status === 'failed') {
+                this.card(label, this.runtime.labels.fileError, true);
+                return;
+            }
+            const presentation = state.presentation;
+            if (presentation.kind === 'missing' || presentation.kind === 'error') {
+                this.card(label, presentation.kind === 'missing'
+                    ? this.runtime.labels.fileMissing
+                    : this.runtime.labels.fileError, true);
+            }
+            else if (presentation.kind === 'image') {
+                this.renderImage(presentation.url, label, width);
+                this.card(label);
+            }
+            else if (presentation.kind === 'audio' ||
+                presentation.kind === 'video') {
+                const media = document.createElement(presentation.kind);
+                media.controls = true;
+                media.preload = 'metadata';
+                if (width != null)
+                    media.style.width = `${width}px`;
+                media.setAttribute('aria-label', label);
+                media.addEventListener('error', () => {
+                    if (this.media === media)
+                        this.failPreview();
+                });
+                media.src = presentation.url;
+                this.media = media;
+                this.dom.append(media);
+                this.card(label);
+            }
+            else if (presentation.kind === 'pdf') {
+                const pdf = document.createElement('iframe');
+                pdf.title = label;
+                pdf.setAttribute('sandbox', '');
+                pdf.referrerPolicy = 'no-referrer';
+                if (width != null)
+                    pdf.style.width = `${width}px`;
+                pdf.addEventListener('error', () => {
+                    if (this.pdf === pdf)
+                        this.failPreview();
+                });
+                pdf.src = presentation.url;
+                this.pdf = pdf;
+                this.dom.append(pdf);
+                this.card(label, this.runtime.labels.filePDFPreview);
+            }
+            else
+                this.card(label);
+            return;
+        }
+        const presentation = this.adapter?.presentation(String(this.node.attrs.src ?? ''));
         if (!presentation) {
             this.dom.classList.add('image-absent');
-            this.dom.textContent = alt || src;
+            this.dom.textContent = alt || String(this.node.attrs.src ?? '');
             return;
         }
         this.dom.classList.remove('image-absent');
+        this.renderImage(presentation.url, alt, width);
+    }
+    renderImage(url, alt, width) {
         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`;
+        if (this.runtime)
+            image.addEventListener('error', () => {
+                if (this.image === image)
+                    this.failPreview();
+            });
+        image.src = url;
         this.image = image;
         const handle = document.createElement('span');
         handle.className = 'image-handle';
@@ -88,53 +290,68 @@ class ImageView {
         this.dom.append(image, handle);
     }
     startResize = (event) => {
+        event.preventDefault();
         const image = this.image;
-        if (!image || !this.view.editable)
+        if (!image || !this.canResize())
             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) => {
-            if (!this.view.editable) {
+            if (!this.canResize()) {
                 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`;
+            this.width = Math.round(Math.min(limit, Math.max(minimumWidth, startWidth + moved.clientX - startX)));
+            image.style.width = `${this.width}px`;
         };
         const cleanup = () => {
             handle.removeEventListener('pointermove', move);
             handle.removeEventListener('pointerup', done);
-            handle.removeEventListener('pointercancel', done);
+            handle.removeEventListener('pointercancel', cancel);
         };
         const done = () => {
             cleanup();
             this.stopResize = undefined;
             this.commit();
         };
+        const cancel = () => {
+            cleanup();
+            this.stopResize = undefined;
+            this.render();
+        };
         this.stopResize = cleanup;
         handle.addEventListener('pointermove', move);
         handle.addEventListener('pointerup', done);
-        handle.addEventListener('pointercancel', done);
+        handle.addEventListener('pointercancel', cancel);
     };
     commit() {
-        if (!this.view.editable)
+        if (!this.canResize()) {
+            this.render();
             return;
+        }
         const pos = this.getPos();
         if (pos == null)
             return;
-        const { alt } = splitAlt(String(this.node.attrs.alt ?? ''));
+        const alt = this.node.attrs.inkkitFileRaw
+            ? (this.reference().label ?? this.reference().reference)
+            : splitAlt(String(this.node.attrs.alt ?? '')).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 }));
+        this.view.dispatch(closeHistory(state.tr.setNodeMarkup(pos, undefined, {
+            ...this.node.attrs,
+            alt: next,
+        })));
+        this.view.dispatch(closeHistory(this.view.state.tr));
+    }
+    canResize() {
+        return this.view.editable && !this.view.composing && this.canMutate();
     }
 }
-export function imageView(adapter) {
-    return $view(imageSchema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter));
+export function imageView(adapter, runtime, canMutate = () => true) {
+    return $view(imageSchema.node, () => (node, view, getPos) => new ImageView(node, view, getPos, adapter, runtime, canMutate));
 }

package/dist/index.d.ts

@@ -3,5 +3,5 @@ export type { EditorEvents, EditorOptions, TextInputPreferences, CommandState, E
 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, WikiLinkReference, WikiLinkAdapter, FileReference, FileContext, FilePresentation, FileAdapter, 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

@@ -22,6 +22,14 @@ export interface EditorLabels {
     tableAlignRight: string;
     tableMoveColumn: string;
     tableMoveRow: string;
+    fileLoading: string;
+    fileMissing: string;
+    fileError: string;
+    fileRetry: string;
+    fileOpen: string;
+    filePreviewUnavailable: string;
+    filePDFPreview: string;
+    wikiMissing: string;
 }
 export declare const defaultLabels: Readonly<EditorLabels>;
 export declare const labelsCtx: import("@milkdown/kit/utils").$Ctx<Readonly<EditorLabels>, "inkkitLabels">;

package/dist/labels.js

@@ -19,6 +19,14 @@ export const defaultLabels = {
     tableAlignRight: 'Align right',
     tableMoveColumn: 'Move column',
     tableMoveRow: 'Move row',
+    fileLoading: 'Loading file…',
+    fileMissing: 'File unavailable',
+    fileError: 'File could not be loaded',
+    fileRetry: 'Retry',
+    fileOpen: 'Open',
+    filePreviewUnavailable: 'Preview unavailable',
+    filePDFPreview: 'Open to view this PDF',
+    wikiMissing: 'Link unavailable',
 };
 export const labelsCtx = $ctx(defaultLabels, 'inkkitLabels');
 export function editorLabels(ctx) {