smartrte-react 0.3.3 → 0.3.5

package/dist/canonicalClipboardRuntime.js

@@ -0,0 +1,76 @@
+import { parseClipboardPayload, reportParsedClipboard, reportRejectedClipboard, serializeCanonicalListHtml, } from "smartrte-core/foundation";
+const payloadFromTransfer = (transfer) => {
+    const representations = Object.fromEntries(Array.from(transfer.types)
+        .filter((type) => type !== "Files")
+        .map((type) => [type, transfer.getData(type)]));
+    return {
+        html: representations["text/html"], plainText: representations["text/plain"],
+        native: representations["application/x-smart-rte+json"], types: Array.from(transfer.types), representations,
+    };
+};
+/**
+ * ROLLBACK_ADAPTER: canonical-clipboard-dom-insert; unreachable from canonical authority.
+ * Legacy rollback-only DOM insertion. The canonical product path never imports this module.
+ */
+export const insertCanonicalClipboardData = (transfer, ownerDocument, onDiagnostic) => {
+    if (!transfer.types.length)
+        return false;
+    const payload = payloadFromTransfer(transfer);
+    try {
+        const fragment = parseClipboardPayload(payload, { ownerDocument });
+        onDiagnostic?.(reportParsedClipboard(payload, fragment));
+        const cleanHtml = serializeCanonicalListHtml(fragment.document, { clean: true });
+        if (!cleanHtml)
+            return false;
+        const selection = ownerDocument.getSelection();
+        if (!selection?.rangeCount)
+            return false;
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        const startElement = range.startContainer.nodeType === Node.ELEMENT_NODE
+            ? range.startContainer : range.startContainer.parentElement;
+        const inlineOwner = startElement?.closest("p,h1,h2,h3,h4,h5,h6,pre,li,td,th");
+        const only = fragment.document.children.length === 1 ? fragment.document.children[0] : null;
+        let insertionHtml = cleanHtml;
+        if (inlineOwner && only && only.type !== "text" && ["paragraph", "heading"].includes(only.type)) {
+            const container = ownerDocument.createElement("div");
+            container.innerHTML = cleanHtml;
+            insertionHtml = container.firstElementChild?.innerHTML || cleanHtml;
+        }
+        const fragmentNode = range.createContextualFragment(insertionHtml);
+        const last = fragmentNode.lastChild;
+        range.insertNode(fragmentNode);
+        if (last) {
+            range.setStartAfter(last);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        return true;
+    }
+    catch (error) {
+        onDiagnostic?.(reportRejectedClipboard(payload, error));
+        return false;
+    }
+};
+/** Owns the product paste listener outside ClassicEditor. */
+export const installCanonicalClipboardRuntime = (root, options) => {
+    const onPaste = (event) => {
+        const transfer = event.clipboardData;
+        if (!transfer)
+            return;
+        const files = Array.from(transfer.files || []);
+        if (files.length && options.onFiles?.(files)) {
+            event.preventDefault();
+            return;
+        }
+        if (!transfer.types.length)
+            return;
+        event.preventDefault();
+        options.beforeInsert?.();
+        if (insertCanonicalClipboardData(transfer, options.ownerDocument, options.onDiagnostic))
+            options.afterInsert?.();
+    };
+    root.addEventListener("paste", onPaste);
+    return () => root.removeEventListener("paste", onPaste);
+};

package/dist/canonicalEditorRuntime.d.ts

@@ -0,0 +1,77 @@
+import { type CanonicalInputPipeline, type ClipboardDiagnosticReport, type CanonicalSubtreeRenderer, type FoundationEditor, type PersistedEditorDocument, type SmartMark, type SmartOperation, type SmartSelection, type SmartTransaction } from "smartrte-core/foundation";
+export interface SmartEditorCheckpoint {
+    envelope: PersistedEditorDocument;
+    selection: SmartSelection;
+    storedMarks?: SmartMark[];
+    savedRevision: number;
+}
+export interface SmartEditorChange {
+    revision: number;
+    documentChanged: boolean;
+    transaction: SmartTransaction;
+}
+export interface SmartEditorHandle {
+    getValue(): PersistedEditorDocument;
+    replaceValue(doc: PersistedEditorDocument, opts?: {
+        keepSelection?: boolean;
+    }): void;
+    isDirty(): boolean;
+    markSaved(revision: number): void;
+    getRevision(): number;
+    focus(): void;
+    executeOperations(operations: readonly SmartOperation[], opts?: ExecuteOperationsOptions): void;
+    createCheckpoint(): SmartEditorCheckpoint;
+    restoreCheckpoint(checkpoint: SmartEditorCheckpoint): void;
+}
+export interface ExecuteOperationsOptions {
+    historyGroup?: string;
+    addToHistory?: boolean;
+    /** Keep structural commands anchored to the same stable inline-owner IDs. */
+    preserveSelectionById?: boolean;
+    /** Put the caret in a newly-created inline owner after the operation. */
+    selectionOwnerId?: string;
+    selectionOffset?: number;
+}
+export interface CanonicalEditorRuntimeOptions {
+    initialValue?: string | PersistedEditorDocument;
+    onChange?: (change: SmartEditorChange) => void;
+    onHtmlChange?: (html: string) => void;
+    onClipboardDiagnostic?: (report: ClipboardDiagnosticReport) => void;
+}
+/** Persistent, React-independent owner for one product editor instance. */
+export declare class CanonicalEditorRuntime implements SmartEditorHandle {
+    readonly editor: FoundationEditor;
+    private root;
+    private renderer;
+    private pipeline;
+    private unsubscribe;
+    private savedRevision;
+    private onChange?;
+    private onHtmlChange?;
+    private readonly onClipboardDiagnostic?;
+    private htmlChangeTimer;
+    private pendingHtmlDocument;
+    constructor(options?: CanonicalEditorRuntimeOptions);
+    setCallbacks(onChange?: (change: SmartEditorChange) => void, onHtmlChange?: (html: string) => void): void;
+    private scheduleHtmlChange;
+    mount(root: HTMLElement): void;
+    unmount(): void;
+    getValue(): PersistedEditorDocument;
+    replaceValue(doc: PersistedEditorDocument, opts?: {
+        keepSelection?: boolean;
+    }): void;
+    isDirty(): boolean;
+    markSaved(revision: number): void;
+    getRevision(): number;
+    focus(): void;
+    executeOperations(operations: readonly SmartOperation[], opts?: ExecuteOperationsOptions): void;
+    createCheckpoint(): SmartEditorCheckpoint;
+    restoreCheckpoint(checkpoint: SmartEditorCheckpoint): void;
+    /** Instrumentation for product-path composition and takeover tests. */
+    get surface(): {
+        root: HTMLElement;
+        renderer: CanonicalSubtreeRenderer;
+        pipeline: CanonicalInputPipeline;
+    };
+}
+export declare const createCanonicalEditorRuntime: (options?: CanonicalEditorRuntimeOptions) => CanonicalEditorRuntime;

package/dist/canonicalEditorRuntime.js

@@ -0,0 +1,274 @@
+import { createFoundationEditor, applyOperations, createInputPipeline, createSubtreeRenderer, createTransactionMap, foundationSchema, isTextNode, parseCanonicalListHtml, serializeCanonicalListHtml, } from "smartrte-core/foundation";
+const nodeAtPath = (root, path) => {
+    let node = root;
+    for (const index of path) {
+        if (isTextNode(node) || !node.children?.[index])
+            return null;
+        node = node.children[index];
+    }
+    return node;
+};
+const pathOfNode = (root, nodeId, path = []) => {
+    if (!isTextNode(root) && root.id === nodeId)
+        return path;
+    if (isTextNode(root))
+        return null;
+    for (let index = 0; index < (root.children?.length || 0); index += 1) {
+        const found = pathOfNode(root.children[index], nodeId, [...path, index]);
+        if (found)
+            return found;
+    }
+    return null;
+};
+const inlineWidth = (node) => isTextNode(node)
+    ? node.text.length
+    : node.children?.reduce((width, child) => width + (isTextNode(child) ? child.text.length : 1), 0) ?? 0;
+const firstTextSelection = (document) => {
+    const visit = (node, path) => {
+        if (isTextNode(node))
+            return null;
+        const spec = foundationSchema.nodes[node.type];
+        const children = node.children || [];
+        if (spec?.group === "block" && (children.length === 0 || children.every((child) => isTextNode(child) || foundationSchema.nodes[child.type]?.group === "inline")))
+            return { path, offset: 0 };
+        for (let index = 0; index < children.length; index += 1) {
+            const found = visit(children[index], [...path, index]);
+            if (found)
+                return found;
+        }
+        return null;
+    };
+    const pos = visit(document, []) || { path: [], offset: 0 };
+    return { type: "text", anchor: pos, head: pos };
+};
+const envelopeFrom = (value) => {
+    if (typeof value === "object" && value)
+        return structuredClone(value);
+    const document = parseCanonicalListHtml(typeof value === "string" ? value : "<p></p>");
+    return { schemaVersion: foundationSchema.version, revision: 0, document };
+};
+const sameOperations = (transaction) => transaction.operations.length > 0;
+const cellIdAt = (document, position) => {
+    const node = nodeAtPath(document, position.path);
+    return node && !isTextNode(node) && node.type === "table_cell" ? node.id : null;
+};
+const cellSelectionIn = (document, anchorId, headId) => {
+    const anchorPath = pathOfNode(document, anchorId) || pathOfNode(document, headId);
+    const headPath = pathOfNode(document, headId) || anchorPath;
+    if (!anchorPath || !headPath)
+        return null;
+    const anchor = nodeAtPath(document, anchorPath);
+    const head = nodeAtPath(document, headPath);
+    if (!anchor || isTextNode(anchor) || anchor.type !== "table_cell"
+        || !head || isTextNode(head) || head.type !== "table_cell")
+        return null;
+    return {
+        type: "cell",
+        anchor: { path: anchorPath, offset: 0 },
+        head: { path: headPath, offset: head.children?.length || 0 },
+    };
+};
+/** Persistent, React-independent owner for one product editor instance. */
+export class CanonicalEditorRuntime {
+    constructor(options = {}) {
+        this.root = null;
+        this.renderer = null;
+        this.pipeline = null;
+        this.unsubscribe = null;
+        this.htmlChangeTimer = null;
+        this.pendingHtmlDocument = null;
+        const envelope = envelopeFrom(options.initialValue);
+        this.editor = createFoundationEditor({
+            document: envelope.document,
+            revision: envelope.revision,
+            selection: firstTextSelection(envelope.document),
+        });
+        this.savedRevision = envelope.revision;
+        this.onChange = options.onChange;
+        this.onHtmlChange = options.onHtmlChange;
+        this.onClipboardDiagnostic = options.onClipboardDiagnostic;
+    }
+    setCallbacks(onChange, onHtmlChange) {
+        this.onChange = onChange;
+        this.onHtmlChange = onHtmlChange;
+    }
+    scheduleHtmlChange(document) {
+        if (!this.onHtmlChange)
+            return;
+        this.pendingHtmlDocument = document;
+        const view = this.root?.ownerDocument.defaultView;
+        if (this.htmlChangeTimer !== null) {
+            if (view)
+                view.clearTimeout(this.htmlChangeTimer);
+            else
+                globalThis.clearTimeout(this.htmlChangeTimer);
+        }
+        const flush = () => {
+            this.htmlChangeTimer = null;
+            const pending = this.pendingHtmlDocument;
+            this.pendingHtmlDocument = null;
+            if (pending && this.onHtmlChange)
+                this.onHtmlChange(serializeCanonicalListHtml(pending, { clean: true }));
+        };
+        if (view) {
+            // Transitional HTML serialization is intentionally debounced outside the
+            // typing frame. The canonical onChange contract remains per transaction.
+            this.htmlChangeTimer = view.setTimeout(flush, 250);
+        }
+        else {
+            this.htmlChangeTimer = setTimeout(flush, 250);
+        }
+    }
+    mount(root) {
+        if (this.root === root && this.pipeline && this.renderer)
+            return;
+        this.unmount();
+        this.root = root;
+        this.renderer = createSubtreeRenderer(root);
+        this.pipeline = createInputPipeline(this.editor, this.renderer, root, { onClipboardDiagnostic: this.onClipboardDiagnostic });
+        this.unsubscribe = this.editor.subscribe((transaction, state) => {
+            this.renderer?.render(this.editor.document, this.editor.selection);
+            this.onChange?.({ revision: state.revision, documentChanged: sameOperations(transaction), transaction });
+            if (sameOperations(transaction))
+                this.scheduleHtmlChange(state.document);
+        });
+    }
+    unmount() {
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        this.pipeline?.destroy();
+        this.pipeline = null;
+        this.renderer?.destroy();
+        this.renderer = null;
+        const view = this.root?.ownerDocument.defaultView;
+        if (this.htmlChangeTimer !== null) {
+            if (view)
+                view.clearTimeout(this.htmlChangeTimer);
+            else
+                globalThis.clearTimeout(this.htmlChangeTimer);
+        }
+        this.htmlChangeTimer = null;
+        this.pendingHtmlDocument = null;
+        this.root?.replaceChildren();
+        this.root = null;
+    }
+    getValue() {
+        const state = this.editor.state;
+        return { schemaVersion: state.schemaVersion, revision: state.revision, document: state.document };
+    }
+    replaceValue(doc, opts = {}) {
+        let selection = firstTextSelection(doc.document);
+        if (opts.keepSelection) {
+            const current = this.editor.selection;
+            const owner = nodeAtPath(this.editor.document, current.head.path);
+            if (owner && !isTextNode(owner)) {
+                const find = (node, path) => {
+                    if (!isTextNode(node) && node.id === owner.id)
+                        return path;
+                    if (isTextNode(node))
+                        return null;
+                    for (let index = 0; index < (node.children?.length || 0); index += 1) {
+                        const found = find(node.children[index], [...path, index]);
+                        if (found)
+                            return found;
+                    }
+                    return null;
+                };
+                const path = find(doc.document, []);
+                if (path) {
+                    const replacementOwner = nodeAtPath(doc.document, path);
+                    const offset = Math.min(current.head.offset, inlineWidth(replacementOwner));
+                    const pos = { path, offset };
+                    selection = { type: "text", anchor: pos, head: pos };
+                }
+            }
+        }
+        this.editor.replaceState(doc, { selection });
+    }
+    isDirty() { return this.editor.state.revision !== this.savedRevision; }
+    markSaved(revision) {
+        if (revision > this.editor.state.revision)
+            throw new Error("Cannot mark a future revision as saved.");
+        this.savedRevision = revision;
+    }
+    getRevision() { return this.editor.state.revision; }
+    focus() { this.root?.focus(); }
+    executeOperations(operations, opts = {}) {
+        if (!operations.length)
+            return;
+        const beforeSelection = this.editor.selection;
+        let selection = createTransactionMap(operations).mapSelection(beforeSelection);
+        if (opts.selectionOwnerId || opts.preserveSelectionById) {
+            const beforeDocument = this.editor.document;
+            const preview = applyOperations(beforeDocument, operations);
+            const beforeCellAnchor = beforeSelection.type === "cell" ? cellIdAt(beforeDocument, beforeSelection.anchor) : null;
+            const beforeCellHead = beforeSelection.type === "cell" ? cellIdAt(beforeDocument, beforeSelection.head) : null;
+            let preservedCellSelection = false;
+            if (opts.preserveSelectionById && beforeCellAnchor && beforeCellHead) {
+                // Structural table commands may retire the head cell (merge) while
+                // preserving the anchor. Keep the selection on the surviving cell so
+                // the next table command still has an unambiguous scope.
+                const mappedCells = cellSelectionIn(preview, beforeCellAnchor, beforeCellHead);
+                if (mappedCells) {
+                    selection = mappedCells;
+                    preservedCellSelection = true;
+                }
+            }
+            const point = (pos, forcedId) => {
+                const beforeOwner = nodeAtPath(beforeDocument, pos.path);
+                const ownerId = forcedId || (!beforeOwner || isTextNode(beforeOwner) ? undefined : beforeOwner.id);
+                if (!ownerId)
+                    return null;
+                const path = pathOfNode(preview, ownerId);
+                if (!path)
+                    return null;
+                const owner = nodeAtPath(preview, path);
+                if (!owner)
+                    return null;
+                return { path, offset: Math.min(forcedId ? opts.selectionOffset ?? 0 : pos.offset, inlineWidth(owner)) };
+            };
+            if (preservedCellSelection) {
+                // The cell selection was mapped above; do not reinterpret its
+                // structural endpoints as a text selection.
+            }
+            else if (opts.selectionOwnerId) {
+                const caret = point(beforeSelection.head, opts.selectionOwnerId);
+                if (caret)
+                    selection = { type: "text", anchor: caret, head: caret };
+            }
+            else {
+                const anchor = point(beforeSelection.anchor);
+                const head = point(beforeSelection.head);
+                if (anchor && head)
+                    selection = { ...beforeSelection, anchor, head };
+            }
+        }
+        this.editor.transact((builder) => {
+            builder.operations.push(...operations);
+            builder.setSelection(selection);
+        }, {
+            source: "toolbar",
+            addToHistory: opts.addToHistory ?? true,
+            ...(opts.historyGroup ? { historyGroup: opts.historyGroup } : {}),
+        });
+        this.focus();
+    }
+    createCheckpoint() {
+        return {
+            envelope: this.getValue(),
+            selection: this.editor.selection,
+            ...(this.editor.storedMarks?.length ? { storedMarks: [...structuredClone(this.editor.storedMarks)] } : {}),
+            savedRevision: this.savedRevision,
+        };
+    }
+    restoreCheckpoint(checkpoint) {
+        this.editor.replaceState(checkpoint.envelope, {
+            selection: checkpoint.selection,
+            storedMarks: checkpoint.storedMarks,
+        });
+        this.savedRevision = checkpoint.savedRevision;
+    }
+    /** Instrumentation for product-path composition and takeover tests. */
+    get surface() { return { root: this.root, renderer: this.renderer, pipeline: this.pipeline }; }
+}
+export const createCanonicalEditorRuntime = (options = {}) => new CanonicalEditorRuntime(options);

package/dist/components/CanonicalAuthorityEditor.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type PersistedEditorDocument, type ClipboardDiagnosticReport } from "smartrte-core/foundation";
+import type { MediaProvider } from "../mediaProvider.js";
+import { type MediaPickerComponent } from "./MediaPicker.js";
+import { CanonicalEditorRuntime, type SmartEditorChange, type SmartEditorHandle } from "../canonicalEditorRuntime.js";
+export interface CanonicalAuthorityEditorProps {
+    /** Initial value only. Later replacements must use SmartEditorHandle.replaceValue. */
+    defaultValue?: string | PersistedEditorDocument;
+    onChange?: (change: SmartEditorChange) => void;
+    /** Transitional serialization callback for hosts that still persist HTML. */
+    onHtmlChange?: (html: string) => void;
+    onClipboardDiagnostic?: (report: ClipboardDiagnosticReport) => void;
+    /** Host-owned upload/search/remove boundary for canonical media insertion. */
+    mediaProvider?: MediaProvider;
+    /** Replaceable picker; the default only selects a local file. */
+    mediaPicker?: MediaPickerComponent;
+    placeholder?: string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    readOnly?: boolean;
+    className?: string;
+    /** Test/diagnostic hook; not part of the editing contract. */
+    onRuntime?: (runtime: CanonicalEditorRuntime) => void;
+}
+export declare const CanonicalAuthorityEditor: React.ForwardRefExoticComponent<CanonicalAuthorityEditorProps & React.RefAttributes<SmartEditorHandle>>;