@aicayzer/inkkit 0.0.9 → 0.0.11

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, TextRange, ReadableTextSnapshot, TextRect, ViewportInsets, ViewportOptions, ViewportSnapshot, } 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) {

package/dist/linked-syntax.d.ts

@@ -0,0 +1,48 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { Literal } from 'mdast';
+import type { FileReference, WikiLinkReference } from './types.js';
+interface WikiLink extends Literal {
+    type: 'inkkitWikiLink';
+    raw: string;
+    target: string;
+    fragment: string | null;
+    label: string;
+    inTable: boolean;
+}
+declare module 'mdast' {
+    interface PhrasingContentMap {
+        inkkitWikiLink: WikiLink;
+    }
+    interface RootContentMap {
+        inkkitWikiLink: WikiLink;
+    }
+    interface Image {
+        inkkitFileRaw?: string;
+        inkkitFileTarget?: string;
+        inkkitFileFragment?: string | null;
+        inkkitFileWidth?: number | null;
+        inkkitFileInTable?: boolean;
+    }
+}
+declare module 'micromark-util-types' {
+    interface TokenTypeMap {
+        inkkitLinkedSyntax: 'inkkitLinkedSyntax';
+    }
+}
+export interface LinkedSyntax {
+    raw: string;
+    target: string;
+    fragment: string | null;
+    label: string;
+    width: number | null;
+    embed: boolean;
+    inTable: boolean;
+}
+export declare function parseLinkedSyntax(raw: string, inTable?: boolean): LinkedSyntax | undefined;
+export declare function wikiMarkdown(node: ProseNode, inTable?: boolean): string;
+export declare function wikiReference(node: ProseNode): WikiLinkReference;
+export declare function fileReference(node: ProseNode): FileReference;
+export declare function namedFileMarkdown(node: ProseNode, inTable?: boolean): string | undefined;
+export declare const wikiLinkSchema: import("@milkdown/kit/utils").$Node;
+export declare function linkedSyntax(wikiLinks: boolean, files: boolean): import("@milkdown/kit/utils").$Remark<"inkkitLinkedSyntax", unknown>;
+export {};