smartrte-react 0.3.4 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 1.0.0-beta.1
+
+**BREAKING CHANGE.** `ClassicEditor` is now unconditionally the canonical, schema-driven editor (`CanonicalAuthorityEditor` underneath). The DOM-authoritative legacy editor and its rollback path have been fully removed; every published version through 0.3.4 defaulted to the DOM-authoritative implementation, so this changes real runtime behavior for every existing consumer, not just internals.
+
+- Promote the canonical editing engine to sole production authority. Removed `LegacyClassicEditor` (the previous default), the runtime rollback flag, and all four of its DOM-authoritative command bridges.
+- Add a documented, tested headless facade: `CanonicalEditorRuntime` / `SmartEditorHandle` (`createCanonicalEditorRuntime`) has zero React dependency and can drive a full editing session — mount, edit, checkpoint/restore, get/replace value — against a plain DOM element with no React runtime involved.
+- Wire DOCX, PDF, and Markdown import/export to `smartrte-core`'s new format codecs, replacing the previous ad hoc, partially DOM-dependent adapters.
+- Add live KaTeX rendering for formula content, including accessible MathML output.
+- Depends on `smartrte-core@1.0.0-beta.1`.
+
+## 0.3.5
+
+- Remove the always-on drag handle that appeared next to every line, list item, and table.
+- Keep list-style and blockquote changes scoped to the selection instead of bleeding into unrelated parts of the document.
+- Fix blockquote and code block corrupting each other, or losing content, when toggled in sequence without reselecting text in between.
+- Preserve code blocks and blockquotes nested inside each other, including on list items, instead of one silently stripping the other.
+- Fix the toolbar's active-state indicators (and the code block toggle itself) going stale on list items after removing an enclosing blockquote.
+- Stop pasted or existing blockquotes/code blocks from losing their border and internal spacing when the source HTML carries conflicting inline styles.
+
 ## 0.3.4
 
 - Make foreground and background colours deterministic across paragraphs, lists, and table-cell text selections.

package/README.md

@@ -87,6 +87,10 @@ export default App;
 | `table` | `boolean` | `true` | Enable/disable table functionality |
 | `media` | `boolean` | `true` | Enable/disable media/image functionality |
 | `formula` | `boolean` | `true` | Enable/disable formula/LaTeX functionality |
+| `features` | `CoreFeatureConfig` | standard preset | Enable or disable individual core plugins |
+| `plugins` | `ReactEditorPlugin[]` | standard preset | Use an exact custom plugin set; replaces the standard preset |
+| `formats` | `EditorFormatConfig` | all built-ins | Enable or disable HTML, Markdown, DOCX, and PDF adapters |
+| `formatDefinitions` | `EditorFormatDefinition[]` | built-ins | Add or replace import/export adapters |
 | `mediaManager` | `MediaManagerAdapter` | `undefined` | Custom media manager for handling images |
 | `fonts` | `{ name: string; value: string }[]` | Default web-safe fonts | Custom font list for the toolbar |
 | `defaultFont` | `string` | `undefined` | Default font family for the editor content |
@@ -95,6 +99,25 @@ export default App;
 
 ### Advanced Examples
 
+#### Feature plugins
+
+The editor uses the same plugin registry for core commands and React toolbar
+state. For the architecture and custom plugin API, see
+[`docs/PLUGIN_ARCHITECTURE.md`](../../docs/PLUGIN_ARCHITECTURE.md).
+
+```tsx
+import { ClassicEditor } from 'smartrte-react';
+
+<ClassicEditor
+  features={{
+    table: false,
+    media: false,
+    formula: false,
+    checklist: true,
+  }}
+/>
+```
+
 #### Complete Example with All Features
 
 ```tsx

package/dist/adapters/domChecklistCommandBridge.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Validates and executes a checklist mutation through core, then projects the
+ * changed attribute onto the existing DOM item. Keeping the subtree in place
+ * preserves focus, selection, event targets, and framework-owned DOM identity.
+ */
+export declare const executeDomChecklistItemCommand: (list: HTMLElement, item: HTMLElement, checked?: boolean) => HTMLElement | null;

package/dist/adapters/domChecklistCommandBridge.js

@@ -0,0 +1,33 @@
+import { checklistPlugin, createSmartEditor, listPlugin } from "smartrte-core/legacy";
+import { smartDocumentFromHtml } from "./domSmartDocument.js";
+/**
+ * Validates and executes a checklist mutation through core, then projects the
+ * changed attribute onto the existing DOM item. Keeping the subtree in place
+ * preserves focus, selection, event targets, and framework-owned DOM identity.
+ */
+export const executeDomChecklistItemCommand = (list, item, checked) => {
+    if (list.dataset.srteChecklist !== "true" || item.parentElement !== list)
+        return null;
+    const items = Array.from(list.children).filter((child) => child instanceof HTMLElement && child.tagName === "LI");
+    const index = items.indexOf(item);
+    if (index < 0)
+        return null;
+    const document = smartDocumentFromHtml(list.outerHTML, list.ownerDocument);
+    if (document.children.length !== 1 || document.children[0].type !== "list")
+        return null;
+    const editor = createSmartEditor({
+        state: { document, selection: { type: "node", path: [0, index] } },
+        plugins: [listPlugin, checklistPlugin],
+    });
+    if (!editor.execute("checklist.set-checked", { path: [0, index], checked }))
+        return null;
+    const nextList = editor.state.document.children[0];
+    if (nextList.type !== "list")
+        return null;
+    const nextItem = nextList.children[index];
+    if (!nextItem || nextItem.type !== "listItem")
+        return null;
+    item.dataset.checked = nextItem.checked ? "true" : "false";
+    item.removeAttribute("data-srte-checked");
+    return list;
+};

package/dist/adapters/domCommandBridge.d.ts

@@ -0,0 +1,19 @@
+import { type SmartRtePlugin, type LegacySmartSelection } from "smartrte-core/legacy";
+export interface DomCommandResult {
+    html: string;
+    selection: LegacySmartSelection;
+}
+/**
+ * Executes one model command against the live editor boundary.
+ *
+ * The DOM is parsed once, the command runs entirely in core, and the resulting
+ * document replaces the DOM once. History and change emission remain owned by
+ * the React host until the complete editor runtime is migrated.
+ */
+export declare const executeDomCommand: <Input>(args: {
+    root: HTMLElement;
+    plugins: SmartRtePlugin[];
+    commandId: string;
+    input?: Input;
+    selection?: Selection | null;
+}) => DomCommandResult | null;

package/dist/adapters/domCommandBridge.js

@@ -0,0 +1,33 @@
+import { createSmartEditor, } from "smartrte-core/legacy";
+import { restoreSelectionToDom, selectionFromDom } from "./domSelectionBridge.js";
+import { serializeSmartDocument, smartDocumentFromEditorRoot, } from "./domSmartDocument.js";
+/**
+ * Executes one model command against the live editor boundary.
+ *
+ * The DOM is parsed once, the command runs entirely in core, and the resulting
+ * document replaces the DOM once. History and change emission remain owned by
+ * the React host until the complete editor runtime is migrated.
+ */
+export const executeDomCommand = (args) => {
+    // These nodes are not represented by LegacySmartDocument yet. Falling back is
+    // mandatory so a supported command can never erase unsupported content.
+    if (args.root.querySelector("img,video,audio,iframe")) {
+        return null;
+    }
+    const selection = selectionFromDom(args.root, args.selection === undefined
+        ? args.root.ownerDocument.defaultView?.getSelection() || null
+        : args.selection);
+    if (!selection)
+        return null;
+    const { document } = smartDocumentFromEditorRoot(args.root);
+    const editor = createSmartEditor({
+        state: { document, selection },
+        plugins: args.plugins,
+    });
+    if (!editor.execute(args.commandId, args.input))
+        return null;
+    const html = serializeSmartDocument(editor.state.document);
+    args.root.innerHTML = html;
+    restoreSelectionToDom(args.root, editor.state.selection);
+    return { html, selection: editor.state.selection };
+};

package/dist/adapters/domInlineAtomCommandBridge.d.ts

@@ -0,0 +1,15 @@
+import { type Attrs } from "smartrte-core/foundation";
+export declare const inlineAtomPathFromDom: (root: HTMLElement, atom: HTMLElement) => number[] | null;
+export interface DomFormulaInput {
+    value: string;
+    displayText?: string;
+}
+export interface DomCanonicalAtomInput {
+    type: "image" | "formula";
+    attrs: Attrs;
+}
+export declare const executeDomCanonicalAtomInsert: (root: HTMLElement, input: DomCanonicalAtomInput, domSelection?: Selection | null) => HTMLElement | null;
+export declare const executeDomFormulaInsert: (root: HTMLElement, input: DomFormulaInput, selection?: Selection | null) => HTMLElement | null;
+export declare const executeDomInlineAtomDelete: (root: HTMLElement, atom: HTMLElement) => boolean;
+export declare const executeDomCanonicalAtomUpdate: (root: HTMLElement, atom: HTMLElement, attrs: Attrs) => boolean;
+export declare const adjacentInlineAtom: (range: Range, direction: "backward" | "forward") => HTMLElement | null;

package/dist/adapters/domInlineAtomCommandBridge.js

@@ -0,0 +1,205 @@
+import { applyOperations, atomDeclarations, createNodeId, createScopeIndex, deleteAtom, foundationSchema, insertAtom, parseCanonicalListHtml, renderDocumentNaively, updateAtom, } from "smartrte-core/foundation";
+import { isEditorOnlyElement, pathForDomElement } from "./domSelectionBridge.js";
+const atomType = (element) => {
+    const declared = element.getAttribute("data-smart-type");
+    if (declared === "image" || element.tagName.toLowerCase() === "img")
+        return "image";
+    if (declared === "formula" || element.hasAttribute("data-formula") || element.hasAttribute("data-smart-formula"))
+        return "formula";
+    return null;
+};
+const inlineUnits = (root) => {
+    const units = [];
+    const visit = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            if (node.textContent)
+                units.push(node);
+            return;
+        }
+        if (!(node instanceof Element) || isEditorOnlyElement(node))
+            return;
+        if (atomType(node)) {
+            units.push(node);
+            return;
+        }
+        Array.from(node.childNodes).forEach(visit);
+    };
+    Array.from(root.childNodes).forEach(visit);
+    return units;
+};
+export const inlineAtomPathFromDom = (root, atom) => {
+    const leaf = atom.closest("p,h1,h2,h3,h4,h5,h6");
+    if (!leaf || !root.contains(leaf))
+        return null;
+    const leafPath = pathForDomElement(leaf, root);
+    const index = inlineUnits(leaf).indexOf(atom);
+    return leafPath && index >= 0 ? [...leafPath, index] : null;
+};
+const ownerSelector = "p,h1,h2,h3,h4,h5,h6";
+const prepareOwner = (owner) => {
+    var _a;
+    (_a = owner.dataset).smartId || (_a.smartId = createNodeId());
+    owner.querySelectorAll("img,[data-formula],[data-smart-formula]").forEach((atom) => {
+        var _a, _b, _c;
+        (_a = atom.dataset).smartId || (_a.smartId = createNodeId());
+        if (atomType(atom) === "formula") {
+            atom.dataset.smartType = "formula";
+            atom.dataset.smartFormula = atom.dataset.smartFormula || atom.dataset.formula || atom.textContent || "";
+            (_b = atom.dataset).smartNotation || (_b.smartNotation = "latex");
+            atom.dataset.smartAtomic = "true";
+        }
+        else {
+            atom.dataset.smartType = "image";
+            (_c = atom.dataset).smartStatus || (_c.smartStatus = "ready");
+            atom.dataset.smartAtomic = "true";
+        }
+    });
+};
+const parseOwner = (owner) => {
+    prepareOwner(owner);
+    return parseCanonicalListHtml(owner.outerHTML);
+};
+const contentWidth = (node) => {
+    if (node.nodeType === node.TEXT_NODE)
+        return node.nodeValue?.length || 0;
+    if (node instanceof HTMLElement && atomType(node))
+        return 1;
+    if (node instanceof HTMLElement && isEditorOnlyElement(node))
+        return 0;
+    return [...node.childNodes].reduce((sum, child) => sum + contentWidth(child), 0);
+};
+const caretOffset = (owner, range) => {
+    const before = owner.ownerDocument.createRange();
+    before.selectNodeContents(owner);
+    try {
+        before.setEnd(range.startContainer, range.startOffset);
+    }
+    catch {
+        return null;
+    }
+    return contentWidth(before.cloneContents());
+};
+const renderOwner = (owner, document) => {
+    const projection = owner.ownerDocument.createElement("div");
+    renderDocumentNaively(projection, document);
+    const replacement = Array.from(projection.querySelectorAll("[data-smart-id]"))
+        .find((element) => element.dataset.smartId === owner.dataset.smartId);
+    if (!replacement)
+        return false;
+    owner.replaceChildren(...Array.from(replacement.childNodes));
+    return true;
+};
+export const executeDomCanonicalAtomInsert = (root, input, domSelection = root.ownerDocument.defaultView?.getSelection() || null) => {
+    if (!domSelection?.rangeCount || !domSelection.isCollapsed)
+        return null;
+    const range = domSelection.getRangeAt(0);
+    const element = range.startContainer instanceof Element ? range.startContainer : range.startContainer.parentElement;
+    const owner = element?.closest(ownerSelector);
+    if (!owner || !root.contains(owner))
+        return null;
+    const offset = caretOffset(owner, range);
+    if (offset === null)
+        return null;
+    const document = parseOwner(owner);
+    const declaration = atomDeclarations.find((entry) => entry.type === input.type);
+    const nodeId = createNodeId();
+    const index = createScopeIndex();
+    const operations = insertAtom(document, { kind: "empty", range: { from: { path: [0], offset }, to: { path: [0], offset } }, isolatingAncestorId: null, clamped: false }, {
+        declaration, nodeId, attrs: input.attrs, ownerId: owner.dataset.smartId, offset,
+    }, { schema: foundationSchema, positions: index.positions(document, foundationSchema) });
+    if (!operations.length || !renderOwner(owner, applyOperations(document, operations)))
+        return null;
+    const atom = Array.from(owner.querySelectorAll("[data-smart-id]"))
+        .find((element) => element.dataset.smartId === nodeId) || null;
+    if (!atom)
+        return null;
+    if (input.type === "formula") {
+        atom.dataset.formula = String(input.attrs.source || "");
+        atom.textContent = String(input.attrs.displayText || input.attrs.source || "");
+    }
+    else
+        atom.dataset.srteInline = "true";
+    const next = root.ownerDocument.createRange();
+    next.setStartAfter(atom);
+    next.collapse(true);
+    domSelection.removeAllRanges();
+    domSelection.addRange(next);
+    return atom;
+};
+export const executeDomFormulaInsert = (root, input, selection) => executeDomCanonicalAtomInsert(root, { type: "formula", attrs: { source: input.value.trim(), notation: "latex", ...(input.displayText ? { displayText: input.displayText } : {}) } }, selection);
+export const executeDomInlineAtomDelete = (root, atom) => {
+    const owner = atom.closest(ownerSelector);
+    if (!owner || !root.contains(owner) || !atomType(atom))
+        return false;
+    prepareOwner(owner);
+    const id = atom.dataset.smartId;
+    const document = parseOwner(owner);
+    const index = createScopeIndex();
+    const positions = index.positions(document, foundationSchema);
+    const range = positions.rangeOf(id);
+    if (!range)
+        return false;
+    const scope = { kind: "atomic-node", nodeId: id, inline: true, range, isolatingAncestorId: null, clamped: false };
+    const operations = deleteAtom(document, scope, {}, { schema: foundationSchema, positions });
+    return operations.length > 0 && renderOwner(owner, applyOperations(document, operations));
+};
+export const executeDomCanonicalAtomUpdate = (root, atom, attrs) => {
+    const owner = atom.closest(ownerSelector);
+    if (!owner || !root.contains(owner) || !atomType(atom))
+        return false;
+    prepareOwner(owner);
+    const id = atom.dataset.smartId;
+    const document = parseOwner(owner);
+    const index = createScopeIndex();
+    const positions = index.positions(document, foundationSchema);
+    const range = positions.rangeOf(id);
+    if (!range)
+        return false;
+    const scope = { kind: "atomic-node", nodeId: id, inline: true, range, isolatingAncestorId: null, clamped: false };
+    const operations = updateAtom(document, scope, { attrs }, { schema: foundationSchema, positions });
+    if (!operations.length)
+        return false;
+    const output = applyOperations(document, operations);
+    const nextPositions = createScopeIndex().positions(output, foundationSchema);
+    const resolved = nextPositions.positionOf(id);
+    const next = resolved?.parent.children?.find((child) => child.type !== "text" && "id" in child && child.id === id);
+    if (!next || next.type === "text")
+        return false;
+    if (atom instanceof HTMLImageElement) {
+        if (typeof next.attrs?.src === "string")
+            atom.src = next.attrs.src;
+        if (typeof next.attrs?.alt === "string")
+            atom.alt = next.attrs.alt;
+        if (typeof next.attrs?.title === "string")
+            atom.title = next.attrs.title;
+        if (Number(next.attrs?.width) > 0)
+            atom.width = Number(next.attrs?.width);
+        if (Number(next.attrs?.height) > 0)
+            atom.height = Number(next.attrs?.height);
+        const align = next.attrs?.align;
+        if (align === "center") {
+            atom.style.display = "block";
+            atom.style.margin = "0 auto";
+            atom.style.float = "none";
+        }
+        else if (align === "left" || align === "right") {
+            atom.style.display = "inline";
+            atom.style.float = align;
+            atom.style.margin = align === "left" ? "0 8px 8px 0" : "0 0 8px 8px";
+        }
+        atom.dataset.smartStatus = String(next.attrs?.status || "ready");
+        if (typeof next.attrs?.error === "string")
+            atom.dataset.smartError = next.attrs.error;
+        else
+            delete atom.dataset.smartError;
+    }
+    return true;
+};
+export const adjacentInlineAtom = (range, direction) => {
+    if (!range.collapsed || range.startContainer.nodeType !== Node.ELEMENT_NODE)
+        return null;
+    const container = range.startContainer;
+    const index = direction === "backward" ? range.startOffset - 1 : range.startOffset;
+    const candidate = container.childNodes[index];
+    return candidate instanceof HTMLElement && atomType(candidate) ? candidate : null;
+};

package/dist/adapters/domInlineImageCommandBridge.d.ts

@@ -0,0 +1,14 @@
+export interface DomInlineImageInput {
+    src: string;
+    alt?: string;
+    decorative?: boolean;
+    title?: string;
+    width?: number;
+    height?: number;
+    align?: "center" | "left" | "right";
+    status?: "pending" | "ready" | "error";
+    uploadId?: string;
+    error?: string;
+}
+export declare const executeDomInlineImageCommand: (root: HTMLElement, input: DomInlineImageInput, selection?: Selection | null) => HTMLImageElement | null;
+export declare const executeDomInlineImageUpdate: (root: HTMLElement, image: HTMLImageElement, input: Partial<DomInlineImageInput>) => boolean;

package/dist/adapters/domInlineImageCommandBridge.js

@@ -0,0 +1,6 @@
+import { executeDomCanonicalAtomInsert, executeDomCanonicalAtomUpdate } from "./domInlineAtomCommandBridge.js";
+export const executeDomInlineImageCommand = (root, input, selection = root.ownerDocument.defaultView?.getSelection() || null) => executeDomCanonicalAtomInsert(root, {
+    type: "image",
+    attrs: { src: input.src, alt: input.alt ?? "", decorative: input.decorative === true, status: input.status || "ready", ...(input.uploadId ? { uploadId: input.uploadId } : {}), ...(input.error ? { error: input.error } : {}), ...(input.title ? { title: input.title } : {}), ...(input.width ? { width: input.width } : {}), ...(input.height ? { height: input.height } : {}) },
+}, selection);
+export const executeDomInlineImageUpdate = (root, image, input) => executeDomCanonicalAtomUpdate(root, image, input);

package/dist/adapters/domMoveCommandBridge.d.ts

@@ -0,0 +1,7 @@
+export type DomMoveDirection = "up" | "down" | "left" | "right";
+/**
+ * Executes model move/indent commands while preserving the existing DOM nodes.
+ * Null means the DOM shape is outside this adapter; false means a valid command
+ * was disabled at a boundary.
+ */
+export declare const executeDomMoveCommand: (blocks: readonly HTMLElement[], direction: DomMoveDirection, beforeMutation?: () => void) => HTMLElement[] | false | null;

package/dist/adapters/domMoveCommandBridge.js

@@ -0,0 +1,54 @@
+import { createSmartEditor, movePlugin } from "smartrte-core/legacy";
+import { smartDocumentFromHtml } from "./domSmartDocument.js";
+/**
+ * Executes model move/indent commands while preserving the existing DOM nodes.
+ * Null means the DOM shape is outside this adapter; false means a valid command
+ * was disabled at a boundary.
+ */
+export const executeDomMoveCommand = (blocks, direction, beforeMutation) => {
+    if (!blocks.length || !blocks[0].parentElement)
+        return null;
+    const parent = blocks[0].parentElement;
+    if (!blocks.every((block) => block.parentElement === parent))
+        return null;
+    const siblings = Array.from(parent.children);
+    const indexes = blocks.map((block) => siblings.indexOf(block));
+    if (indexes.some((index, position) => index < 0 || (position > 0 && index !== indexes[position - 1] + 1))) {
+        return null;
+    }
+    const document = smartDocumentFromHtml(siblings.map((sibling) => sibling.outerHTML).join(""), parent.ownerDocument);
+    if (document.children.length !== siblings.length)
+        return null;
+    const editor = createSmartEditor({
+        state: { document, selection: { type: "all" } },
+        plugins: [movePlugin],
+    });
+    const commandId = direction === "up" || direction === "down" ? "block.move" : "block.indent";
+    const input = {
+        parentPath: [],
+        blockIndexes: indexes,
+        direction: direction === "left" ? "outdent" : direction === "right" ? "indent" : direction,
+    };
+    if (!editor.execute(commandId, input))
+        return false;
+    beforeMutation?.();
+    if (direction === "left" || direction === "right") {
+        indexes.forEach((index, position) => {
+            const indent = editor.state.document.children[index].indent || 0;
+            blocks[position].style.marginLeft = indent ? `${indent * 24}px` : "";
+            if (!blocks[position].getAttribute("style"))
+                blocks[position].removeAttribute("style");
+        });
+        return [...blocks];
+    }
+    if (direction === "up") {
+        const previous = siblings[indexes[0] - 1];
+        blocks.forEach((block) => parent.insertBefore(block, previous));
+    }
+    else {
+        const next = siblings[indexes[indexes.length - 1] + 1];
+        const reference = next.nextSibling;
+        blocks.forEach((block) => parent.insertBefore(block, reference));
+    }
+    return [...blocks];
+};

package/dist/adapters/domSelectionBridge.d.ts

@@ -1,6 +1,8 @@
-import type { SmartSelection } from "smartrte-core";
+import type { Path, LegacySmartSelection } from "smartrte-core/legacy";
 export declare const isEditorOnlyElement: (node: Element) => boolean;
+/** Returns the semantic model path for a DOM element at the adapter boundary. */
+export declare const pathForDomElement: (element: Element, editor: HTMLElement) => Path | null;
 /** Converts browser selection into a core selection without exposing editor UI nodes. */
-export declare const selectionFromDom: (editor: HTMLElement, selection: Selection | null) => SmartSelection | null;
+export declare const selectionFromDom: (editor: HTMLElement, selection: Selection | null) => LegacySmartSelection | null;
 /** Restores a text selection from core paths after the editor DOM is rebuilt. */
-export declare const restoreSelectionToDom: (editor: HTMLElement, smartSelection: SmartSelection) => boolean;
+export declare const restoreSelectionToDom: (editor: HTMLElement, smartSelection: LegacySmartSelection) => boolean;