@aicayzer/inkkit 0.0.7 → 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,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 { 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/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();
+            },
         };
     },
 }));