smartrte-react 0.3.5 → 1.0.0-beta.10

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # Changelog
 
+## 1.0.0-beta.10
+
+- Fix a table row resize regression: dragging a row boundary back to where it started (after an earlier drag hit a row's natural content floor) inflated the neighboring row instead of restoring the original layout — the only way back was Undo. Reversing a boundary drag now correctly shrinks the table's total height instead of growing a neighbor that never actually had slack to give.
+
+- Fix a horizontal line/page break appearing to be "not selectable": clicking one already set real node selection, but right-clicking showed no UI at all, unlike every other atom (image/video/audio/formula). Right-click now shows the same Delete-only action menu formula already gets (never Edit — neither atom has an editable field, and neither ever gets resize handles).
+- Add a "Line spacing" toolbar dropdown (Paragraph group) with presets (1, 1.15, 1.5, 2, 2.5), a "Default" entry that clears the override, and a custom numeric value entry, matching Google Docs' own line-spacing picker shape. Shows a checkmark on the current value, or no checkmark at all when the selection spans blocks with differing values. New `tools.lineHeight` visibility flag (default visible). Depends on `smartrte-core@1.0.0-beta.5`.
+- Add "Horizontal line" and "Page break" toolbar tools (in the "More to insert" group, plus wide-viewport-promoted standalone copies), and matching `tools.horizontalLine`/`tools.pageBreak` visibility flags. A page break renders as a dashed, labeled marker in the live editor — distinct from a horizontal line — and produces real pagination in both the exported HTML and this package's "Save as PDF" (a real browser print of that same HTML). Depends on `smartrte-core@1.0.0-beta.5`.
+- Fix formulas rendering invisible in "Save as PDF" output (see `smartrte-core@1.0.0-beta.5`'s own changelog entry for the root cause).
+- Rename the "Save as PDF" toolbar entry to "Print / Save as PDF" — it opens the browser's print dialog rather than triggering a direct file download like its "Save as ..." siblings; the new label sets the correct expectation instead of implying a one-click download.
+
+## 1.0.0-beta.9
+
+- Fix toolbar dropdowns, the mobile "More tools" kebab menu, and the text/background colour and table-border popovers rendering far from their own trigger when the editor is embedded inside a host container that has its own CSS `transform` on an ancestor - e.g. a Radix/shadcn `Dialog`'s own centering transform. These overlays now correctly account for the resulting change of containing block instead of assuming it's always the viewport.
+
+## 1.0.0-beta.8
+
+- Add a `tools` prop (`ClassicEditor`, `CanonicalAuthorityEditor`, and the standalone embed) letting a host hide any individual toolbar tool — Bold, Video, Version history, Review, and around 40 others — without wrapping or restyling the component. Every tool is visible by default; composes with existing gates (a required provider or capability must still be present). See the README's "Hiding individual toolbar tools" section for the full list and usage.
+- Retire the never-shipped `showVersionHistory`/`showReview` props in favor of `tools.versionHistory`/`tools.comments`/`tools.suggestions`.
+- Also export `EditorCapabilityPreset` from the package's public entry point (previously only reachable indirectly through `CanonicalAuthorityEditorProps`).
+
+## 1.0.0-beta.7
+
+- Fix the mobile "More tools" overflow menu getting clipped almost entirely off-screen when the editor is embedded inside a host container with `overflow: hidden` — the same fix already applied to the desktop toolbar dropdowns, now also covering this menu (the only overflow affordance on narrow viewports).
+- Add the "List preset" control (decimal/lower-alpha/upper-alpha/roman-numeral/outline numbering styles, plus bullet-glyph presets) to the mobile "More tools" menu — previously only reachable from the desktop toolbar's "More list tools" dropdown, leaving narrow-viewport users with no way to use anything beyond plain bulleted/numbered/checklist lists.
+
+## 1.0.0-beta.6
+
+- Replace the media Edit overlay's plain alt-text prompt with a full "Media details" panel: link (with open-in-new-tab), corner radius, alignment, and license fields (description, source URL, type, version, attribution), matching the pre-canonical editor's own edit-panel field set. A library-picked image's existing license metadata is now carried onto the inserted atom instead of being discarded. Depends on `smartrte-core@1.0.0-beta.3`.
+
+## 1.0.0-beta.5
+
+- Add an opt-in `renderFormulaHtml` prop (on `ClassicEditor`/`CanonicalAuthorityEditor`) that bakes real KaTeX-rendered HTML into the formula elements of `onChange`'s exported HTML, instead of an empty placeholder — for hosts that display saved content directly (e.g. a read-only preview panel) without also running KaTeX against it. Depends on `smartrte-core@1.0.0-beta.2`.
+
+## 1.0.0-beta.4
+
+- Fix blockquote, table header, and dialog (media library, comments, suggestions, version history) backgrounds/text staying in their light-mode colors even when the host page is in dark mode — these now follow the host's own dark-mode CSS variables directly, the same way the rest of the editor's colors already did, instead of depending solely on the `.srte-dark` class reaching the editor correctly.
+
+## 1.0.0-beta.3
+
+- Fix toolbar dropdown menus (e.g. "More text styles", "More paragraph tools") getting visually clipped to unusable fragments when the editor is embedded inside a host container with `overflow: hidden` (e.g. a rounded card or a clipped split-pane panel) — the menu now positions itself relative to the viewport instead of the nearest ancestor, so it can never be clipped regardless of host layout.
+
+## 1.0.0-beta.2
+
+- Fix the toolbar promoting extra buttons based on the browser window's width instead of the editor's own rendered width — broke embedding the editor in a split pane or any container narrower than the window, causing overlapping/mashed toolbar labels and misdirected clicks that looked like an unresponsive toolbar.
+
+## 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,136 @@ 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 |
+| `tools` | `Partial<ToolbarTools>` | every tool `true` | Hide individual toolbar tools (Bold, Video, Version history, etc.) — see [Hiding individual toolbar tools](#hiding-individual-toolbar-tools) below |
 
 ### 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,
+  }}
+/>
+```
+
+#### Hiding individual toolbar tools
+
+The `table`/`media`/`formula` props above turn off a whole *capability* — no
+tables anywhere, or media/formulas removed from the schema entirely. If you
+just want a **smaller toolbar** while keeping every capability intact (e.g.
+hide Video, Audio, Version history, and Review for a specific product
+surface, without touching what content the editor can actually store), use
+`tools` instead. It's a plain object: name the tools you want off, everything
+else stays on by default. No wrapping, no CSS overrides, no forking the
+component.
+
+```tsx
+import { ClassicEditor } from 'smartrte-react';
+
+<ClassicEditor
+  tools={{
+    video: false,
+    audio: false,
+    versionHistory: false,
+    comments: false,
+    suggestions: false,
+  }}
+/>
+```
+
+**How it composes with everything else:** a tool only ever needs *both*
+things to be true to show up — your `tools` flag says yes, *and* whatever
+that tool actually depends on is present. So:
+
+- `tools.video`/`tools.audio`/`tools.image` also need a `mediaProvider` (or
+  `mediaManager`) to be configured at all — turning the flag on can't make
+  media insertion appear out of nowhere if you never wired up a provider.
+- `tools.versionHistory` also needs a `versionProvider`; `tools.comments`
+  needs a `commentProvider`; `tools.suggestions` needs a `suggestionProvider`.
+- `tools.insertTable` also needs the table capability to actually be enabled
+  (i.e. you haven't set `table={false}`) — you can't use `tools` to bring
+  back a capability you turned off elsewhere.
+
+In other words: `tools` can only ever hide something, never force something
+into existence that isn't otherwise configured. This means it's always safe
+to leave `tools` unset — every consumer who doesn't pass it sees the exact
+toolbar they see today.
+
+**Every toggleable key**, grouped the way they appear in the toolbar:
+
+```ts
+interface ToolbarTools {
+  // Text formatting
+  bold, italic, underline, strikethrough, code,
+  superscript, subscript, textColor, backgroundColor, fontSize, fontFamily,
+
+  // Paragraph
+  blockType,   // the Paragraph/Heading/Code block dropdown
+  alignLeft, alignCenter, alignRight, alignJustify,
+  lineHeight,  // the line-spacing dropdown (1/1.15/1.5/2/2.5 presets plus a custom value)
+  quote,
+
+  // Lists
+  bulletedList, numberedList, checklist,
+  listPreset,  // the numbered-list style picker (1,2,3 / a,b,c / i,ii,iii / A,B,C / I,II,III)
+
+  // Insert
+  link, removeLink, image, video, audio, insertFormula, specialCharacters,
+  horizontalLine,  // inserts a divider (<hr>)
+  pageBreak,       // inserts a print/export pagination marker - distinct from horizontalLine
+  insertTable,
+
+  // Document
+  import,
+  saveAsHtml, saveAsMarkdown, saveAsWord, saveAsPdf, saveAsSmartRte,
+  versionHistory, comments, suggestions,
+
+  // History
+  undo, redo,
+}
+```
+
+A few notes on what's *not* in this list, on purpose: actions that only ever
+apply to something you already have selected — moving a block up/down,
+indenting a list item, adding/removing a table row or column, resizing a
+selected image — aren't individually toggleable. They only make sense as
+part of using the tool that created them (a table, a list, an image), so
+they follow that tool's own visibility rather than needing a separate flag
+each. If you turn off `insertTable`, its row/column tools go with it
+automatically — there's no separate flag to remember.
+
+If you're using the exported `CanonicalAuthorityEditor` directly instead of
+`ClassicEditor`, `tools` works exactly the same way. And if you're using the
+standalone embed (`window.SmartRTE.ClassicEditor.init(...)`), pass `tools`
+in the same options object you pass `target`/`value`/etc.
+
+```ts
+window.SmartRTE.ClassicEditor.init({
+  target: document.getElementById('editor'),
+  tools: { video: false, audio: false },
+});
+```
+
 #### Complete Example with All Features
 
 ```tsx
@@ -314,23 +440,87 @@ const myMediaManager: MediaManagerAdapter = {
 };
 ```
 
-## 🎨 Styling
+## 🎨 Theming & Dark Mode
 
-The editor comes with built-in styles. You can customize the appearance by wrapping it in a container:
+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
+
+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 +816,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;