smartrte-react 0.3.5 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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.

package/README.md

@@ -41,7 +41,7 @@ pnpm add smartrte-react
 ## 🚀 Quick Start
 
 ### 🎮 Live Demo
-
+ 
 Try the editor instantly in your browser:
 
 - **[Live Demo](https://playground-k9l44ah7t-ayush1852017s-projects.vercel.app/)** (Deployed Version)
@@ -87,10 +87,37 @@ 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 |
+| `theme` | `"light" \| "dark"` | `"light"` | Built-in theme mode |
+| `className` | `string` | `undefined` | Custom CSS class for theming via CSS variable overrides |
 
 ### 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
@@ -314,23 +341,87 @@ const myMediaManager: MediaManagerAdapter = {
 };
 ```
 
-## 🎨 Styling
+## 🎨 Theming & Dark Mode
+
+The editor uses CSS custom properties (CSS variables) for all colors, making it fully customizable. No hardcoded colors — everything can be themed.
+
+### Quick Start: Dark Mode
+
+```tsx
+<ClassicEditor theme="dark" onChange={handleChange} />
+```
+
+### Custom Themes via CSS
 
-The editor comes with built-in styles. You can customize the appearance by wrapping it in a container:
+Apply a custom class and override any CSS variables:
 
 ```tsx
-<div style={{
-  border: '1px solid #ddd',
-  borderRadius: '8px',
-  overflow: 'hidden',
-}}>
-  <ClassicEditor
-    value={content}
-    onChange={setContent}
-  />
-</div>
+<ClassicEditor className="my-theme" onChange={handleChange} />
 ```
 
+```css
+.my-theme {
+  --srte-bg: #1a1a2e;
+  --srte-text: #eaeaea;
+  --srte-border: #3a3a5c;
+  /* Override only the variables you need */
+}
+```
+
+### Responding to System Preference
+
+```tsx
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+<ClassicEditor theme={prefersDark ? 'dark' : 'light'} />
+```
+
+Or purely via CSS (without the `theme` prop):
+
+```css
+@media (prefers-color-scheme: dark) {
+  .srte-editor {
+    --srte-bg: #1e1e1e;
+    --srte-text: #e0e0e0;
+    --srte-border: #3a3a3a;
+    /* ... */
+  }
+}
+```
+
+### Available CSS Custom Properties
+
+| Variable | Default (Light) | Description |
+|---|---|---|
+| `--srte-bg` | `#ffffff` | Editor container & content background |
+| `--srte-text` | `#111111` | Primary UI text color |
+| `--srte-text-muted` | `#4b5563` | Secondary/subtle text |
+| `--srte-border` | `#dddddd` | Standard border color |
+| `--srte-border-light` | `#eeeeee` | Light separator borders |
+| `--srte-toolbar-bg` | `#ffffff` | Toolbar background |
+| `--srte-input-bg` | `#ffffff` | Button, input, select backgrounds |
+| `--srte-input-text` | `#111111` | Button, input, select text |
+| `--srte-input-border` | `#e5e7eb` | Button, input, select borders |
+| `--srte-modal-backdrop` | `rgba(0,0,0,0.35)` | Modal overlay background |
+| `--srte-modal-bg` | `#ffffff` | Modal/dialog background |
+| `--srte-modal-text` | `#000000` | Modal text color |
+| `--srte-menu-bg` | `#ffffff` | Context menu background |
+| `--srte-menu-text` | `#111111` | Context menu text |
+| `--srte-menu-shadow` | `0 8px 24px rgba(0,0,0,0.18)` | Menu box-shadow |
+| `--srte-accent` | `#1e90ff` | Accent/selection color |
+| `--srte-accent-bg` | `rgba(30,144,255,0.15)` | Accent background (translucent) |
+| `--srte-danger` | `#dc2626` | Destructive action color |
+| `--srte-primary` | `#2563eb` | Primary action button color |
+| `--srte-surface-subtle` | `#f3f4f6` | Subtle surface (dropzone, preset buttons) |
+| `--srte-on-primary` | `#ffffff` | Text on primary/danger buttons |
+| `--srte-cancel-bg` | `#f3f4f6` | Cancel button background |
+
+### Important Notes
+
+- **User content colors are preserved** — colors set via the color picker (text/background) are inline styles on content elements and are not affected by theming.
+- **Color picker swatches are not themed** — they display actual color values regardless of theme.
+- **The theme only affects editor chrome** — toolbar, dialogs, menus, and container. User content remains unchanged.
+
 ## 🛠️ Development
 
 ### Prerequisites
@@ -626,13 +717,14 @@ See the list of [contributors](https://github.com/ayush1852017/smart-rte/contrib
 
 ## 🗺️ Roadmap
 
-### Current Version (0.1.x)
+### Current Version (0.2.x)
 
 - ✅ Rich text editing
 - ✅ Table support
 - ✅ Formula support (LaTeX/KaTeX)
 - ✅ Media management
 - ✅ TypeScript support
+- ✅ Dark mode & theming (CSS custom properties)
 
 ### Upcoming Features
 

package/dist/adapters/domChecklistCommandBridge.js

@@ -1,4 +1,4 @@
-import { checklistPlugin, createSmartEditor, listPlugin } from "smartrte-core";
+import { checklistPlugin, createSmartEditor, listPlugin } from "smartrte-core/legacy";
 import { smartDocumentFromHtml } from "./domSmartDocument.js";
 /**
  * Validates and executes a checklist mutation through core, then projects the

package/dist/adapters/domCommandBridge.d.ts

@@ -1,7 +1,7 @@
-import { type SmartRtePlugin, type SmartSelection } from "smartrte-core";
+import { type SmartRtePlugin, type LegacySmartSelection } from "smartrte-core/legacy";
 export interface DomCommandResult {
     html: string;
-    selection: SmartSelection;
+    selection: LegacySmartSelection;
 }
 /**
  * Executes one model command against the live editor boundary.

package/dist/adapters/domCommandBridge.js

@@ -1,4 +1,4 @@
-import { createSmartEditor, } from "smartrte-core";
+import { createSmartEditor, } from "smartrte-core/legacy";
 import { restoreSelectionToDom, selectionFromDom } from "./domSelectionBridge.js";
 import { serializeSmartDocument, smartDocumentFromEditorRoot, } from "./domSmartDocument.js";
 /**
@@ -9,7 +9,7 @@ import { serializeSmartDocument, smartDocumentFromEditorRoot, } from "./domSmart
  * the React host until the complete editor runtime is migrated.
  */
 export const executeDomCommand = (args) => {
-    // These nodes are not represented by SmartDocument yet. Falling back is
+    // 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;

package/dist/adapters/domInlineAtomCommandBridge.d.ts

@@ -1,14 +1,15 @@
-import { type Path } from "smartrte-core";
-export declare const inlineAtomPathFromDom: (root: HTMLElement, atom: HTMLElement) => Path | null;
-/**
- * Runs deletion through the owning feature plugin and removes only the
- * validated live atom. Caret placement remains a DOM-host responsibility.
- */
-export declare const executeDomInlineAtomDelete: (root: HTMLElement, atom: HTMLElement) => boolean;
+import { type Attrs } from "smartrte-core/foundation";
+export declare const inlineAtomPathFromDom: (root: HTMLElement, atom: HTMLElement) => number[] | null;
 export interface DomFormulaInput {
     value: string;
     displayText?: string;
 }
-/** Validates formula insertion through core, then projects only the new atom. */
-export declare const executeDomFormulaInsert: (root: HTMLElement, input: DomFormulaInput, domSelection?: Selection | null) => HTMLElement | null;
+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

@@ -1,10 +1,10 @@
-import { createSmartEditor, formulaPlugin, getNodeAtPath, mediaPlugin, } from "smartrte-core";
-import { isEditorOnlyElement, pathForDomElement, selectionFromDom } from "./domSelectionBridge.js";
-import { smartDocumentFromEditorRoot } from "./domSmartDocument.js";
+import { applyOperations, atomDeclarations, createNodeId, createScopeIndex, deleteAtom, foundationSchema, insertAtom, parseCanonicalListHtml, renderDocumentNaively, updateAtom, } from "smartrte-core/foundation";
+import { isEditorOnlyElement, pathForDomElement } from "./domSelectionBridge.js";
 const atomType = (element) => {
-    if (element.tagName.toLowerCase() === "img")
-        return "inlineImage";
-    if (element.hasAttribute("data-formula"))
+    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;
 };
@@ -35,61 +35,165 @@ export const inlineAtomPathFromDom = (root, atom) => {
     const index = inlineUnits(leaf).indexOf(atom);
     return leafPath && index >= 0 ? [...leafPath, index] : null;
 };
-/**
- * Runs deletion through the owning feature plugin and removes only the
- * validated live atom. Caret placement remains a DOM-host responsibility.
- */
-export const executeDomInlineAtomDelete = (root, atom) => {
-    const type = atomType(atom);
-    const path = type && inlineAtomPathFromDom(root, atom);
-    if (!type || !path)
-        return false;
-    const selection = selectionFromDom(root, root.ownerDocument.defaultView?.getSelection() || null) || { type: "node", path };
-    const { document } = smartDocumentFromEditorRoot(root);
-    const editor = createSmartEditor({
-        state: { document, selection },
-        plugins: type === "formula" ? [formulaPlugin] : [mediaPlugin],
+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 command = type === "formula" ? "formula.delete" : "image.delete-inline";
-    if (!editor.execute(command, { path }))
+};
+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;
-    atom.remove();
+    owner.replaceChildren(...Array.from(replacement.childNodes));
     return true;
 };
-/** Validates formula insertion through core, then projects only the new atom. */
-export const executeDomFormulaInsert = (root, input, domSelection = root.ownerDocument.defaultView?.getSelection() || null) => {
+export const executeDomCanonicalAtomInsert = (root, input, domSelection = root.ownerDocument.defaultView?.getSelection() || null) => {
     if (!domSelection?.rangeCount || !domSelection.isCollapsed)
         return null;
-    const modelSelection = selectionFromDom(root, domSelection);
-    if (!modelSelection)
+    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 { document } = smartDocumentFromEditorRoot(root);
-    const editor = createSmartEditor({
-        state: { document, selection: modelSelection },
-        plugins: [formulaPlugin],
-    });
-    if (!editor.execute("formula.insert", input))
+    const offset = caretOffset(owner, range);
+    if (offset === null)
         return null;
-    const selectionAfter = editor.state.selection;
-    if (selectionAfter.type !== "text")
+    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 formulaPath = [
-        ...selectionAfter.anchor.path.slice(0, -1),
-        selectionAfter.anchor.path[selectionAfter.anchor.path.length - 1] - 1,
-    ];
-    const atom = getNodeAtPath(editor.state.document, formulaPath);
-    if (atom?.type !== "formula")
+    const atom = Array.from(owner.querySelectorAll("[data-smart-id]"))
+        .find((element) => element.dataset.smartId === nodeId) || null;
+    if (!atom)
         return null;
-    const range = domSelection.getRangeAt(0);
-    const span = root.ownerDocument.createElement("span");
-    span.dataset.formula = atom.value;
-    span.textContent = atom.displayText ?? atom.value;
-    range.insertNode(span);
-    range.setStartAfter(span);
-    range.collapse(true);
+    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(range);
-    return span;
+    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)

package/dist/adapters/domInlineImageCommandBridge.d.ts

@@ -1,14 +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;
 }
-/**
- * Executes inline image insertion through core and projects only the resulting
- * atom into the existing DOM range. Unrelated DOM and metadata stay untouched.
- */
-export declare const executeDomInlineImageCommand: (root: HTMLElement, input: DomInlineImageInput, domSelection?: Selection | null) => HTMLImageElement | null;
-/** Validates an inline image attribute update through core, then mutates it in place. */
-export declare const executeDomInlineImageUpdate: (root: HTMLElement, image: HTMLImageElement, input: Omit<DomInlineImageInput, "src">) => boolean;
+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

@@ -1,72 +1,6 @@
-import { createSmartEditor, getNodeAtPath, mediaPlugin, } from "smartrte-core";
-import { selectionFromDom } from "./domSelectionBridge.js";
-import { smartDocumentFromEditorRoot } from "./domSmartDocument.js";
-import { inlineAtomPathFromDom } from "./domInlineAtomCommandBridge.js";
-/**
- * Executes inline image insertion through core and projects only the resulting
- * atom into the existing DOM range. Unrelated DOM and metadata stay untouched.
- */
-export const executeDomInlineImageCommand = (root, input, domSelection = root.ownerDocument.defaultView?.getSelection() || null) => {
-    if (!domSelection?.rangeCount || !domSelection.isCollapsed)
-        return null;
-    const modelSelection = selectionFromDom(root, domSelection);
-    if (!modelSelection)
-        return null;
-    const { document } = smartDocumentFromEditorRoot(root);
-    const editor = createSmartEditor({
-        state: { document, selection: modelSelection },
-        plugins: [mediaPlugin],
-    });
-    if (!editor.execute("image.insert-inline", input))
-        return null;
-    const selectionAfter = editor.state.selection;
-    if (selectionAfter.type !== "text")
-        return null;
-    const imagePath = [
-        ...selectionAfter.anchor.path.slice(0, -1),
-        selectionAfter.anchor.path[selectionAfter.anchor.path.length - 1] - 1,
-    ];
-    const atom = getNodeAtPath(editor.state.document, imagePath);
-    if (atom?.type !== "inlineImage")
-        return null;
-    const range = domSelection.getRangeAt(0);
-    const image = root.ownerDocument.createElement("img");
-    image.src = atom.src;
-    image.alt = atom.alt || "";
-    if (atom.title)
-        image.title = atom.title;
-    if (atom.width)
-        image.width = atom.width;
-    if (atom.height)
-        image.height = atom.height;
-    image.dataset.srteInline = "true";
-    range.insertNode(image);
-    range.setStartAfter(image);
-    range.collapse(true);
-    domSelection.removeAllRanges();
-    domSelection.addRange(range);
-    return image;
-};
-/** Validates an inline image attribute update through core, then mutates it in place. */
-export const executeDomInlineImageUpdate = (root, image, input) => {
-    const path = inlineAtomPathFromDom(root, image);
-    if (!path)
-        return false;
-    const selection = selectionFromDom(root, root.ownerDocument.defaultView?.getSelection() || null) || { type: "node", path };
-    const { document } = smartDocumentFromEditorRoot(root);
-    const editor = createSmartEditor({
-        state: { document, selection },
-        plugins: [mediaPlugin],
-    });
-    if (!editor.execute("image.update-inline", { path, ...input }))
-        return false;
-    if (input.alt !== undefined)
-        image.alt = input.alt;
-    if (input.title !== undefined)
-        image.title = input.title;
-    if (input.width !== undefined)
-        image.width = input.width;
-    if (input.height !== undefined)
-        image.height = input.height;
-    return true;
-};
+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.js

@@ -1,4 +1,4 @@
-import { createSmartEditor, movePlugin } from "smartrte-core";
+import { createSmartEditor, movePlugin } from "smartrte-core/legacy";
 import { smartDocumentFromHtml } from "./domSmartDocument.js";
 /**
  * Executes model move/indent commands while preserving the existing DOM nodes.

package/dist/adapters/domSelectionBridge.d.ts

@@ -1,8 +1,8 @@
-import type { Path, 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;

package/dist/adapters/domSmartDocument.d.ts

@@ -1,10 +1,10 @@
-import { type SmartDocument } from "smartrte-core";
+import { type LegacySmartDocument } from "smartrte-core/legacy";
 /** Removes editor UI before handing the document to the core parser boundary. */
 export declare const cleanEditorHtml: (root: HTMLElement) => string;
-export declare const smartDocumentFromHtml: (html: string, ownerDocument: Document) => SmartDocument;
+export declare const smartDocumentFromHtml: (html: string, ownerDocument: Document) => LegacySmartDocument;
 export declare const smartDocumentFromEditorRoot: (root: HTMLElement) => {
-    document: SmartDocument;
+    document: LegacySmartDocument;
     html: string;
 };
 /** Serializes the shadow-only model. It is not used for persisted editor HTML. */
-export declare const serializeSmartDocument: (document: SmartDocument) => string;
+export declare const serializeSmartDocument: (document: LegacySmartDocument) => string;

package/dist/adapters/domSmartDocument.js

@@ -1,5 +1,5 @@
-import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core";
-import { isSmartListPreset } from "smartrte-core";
+import { normalizeCompatibilityHtml, sanitizeLinkAttrs, } from "smartrte-core/legacy";
+import { isSmartListPreset } from "smartrte-core/legacy";
 import { isEditorOnlyElement } from "./domSelectionBridge.js";
 const blockTags = new Set(["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "blockquote", "pre", "table", "img", "video", "audio"]);
 const unwrap = (element) => {