smartrte-react 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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.
+- Preserve foreground colour when highlighting text and render authored colours correctly in dark mode.
+- Show the effective foreground and background colours at the caret in the toolbar and picker.
+- Keep the table-cell fill picker and context menu open during live colour dragging, including multi-cell selections.
+
 ## 0.3.3
 
 - Keep the responsive More-actions menu inside narrow viewports and above the editor canvas.

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)
@@ -88,10 +88,6 @@ export default App;
 | `media` | `boolean` | `true` | Enable/disable media/image functionality |
 | `formula` | `boolean` | `true` | Enable/disable formula/LaTeX functionality |
 | `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
 
@@ -318,87 +314,23 @@ const myMediaManager: MediaManagerAdapter = {
 };
 ```
 
-## 🎨 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
-
-Apply a custom class and override any CSS variables:
-
-```tsx
-<ClassicEditor className="my-theme" onChange={handleChange} />
-```
-
-```css
-.my-theme {
-  --srte-bg: #1a1a2e;
-  --srte-text: #eaeaea;
-  --srte-border: #3a3a5c;
-  /* Override only the variables you need */
-}
-```
+## 🎨 Styling
 
-### Responding to System Preference
+The editor comes with built-in styles. You can customize the appearance by wrapping it in a container:
 
 ```tsx
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-<ClassicEditor theme={prefersDark ? 'dark' : 'light'} />
+<div style={{
+  border: '1px solid #ddd',
+  borderRadius: '8px',
+  overflow: 'hidden',
+}}>
+  <ClassicEditor
+    value={content}
+    onChange={setContent}
+  />
+</div>
 ```
 
-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
@@ -694,14 +626,13 @@ See the list of [contributors](https://github.com/ayush1852017/smart-rte/contrib
 
 ## 🗺️ Roadmap
 
-### Current Version (0.2.x)
+### Current Version (0.1.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/canonicalInlineCommandBridge.d.ts

@@ -0,0 +1,15 @@
+import { inlineToolDeclarations, type Attrs, type SmartMark } from "smartrte-core";
+export type CanonicalInlineToolId = typeof inlineToolDeclarations[number]["id"];
+export type CanonicalInlineIntent = "apply" | "remove" | "toggle" | "setAttrs" | "clearAll" | "editLink";
+export interface CanonicalInlineExecution {
+    readonly changed: boolean;
+    readonly operations: number;
+    readonly coverage: "all" | "partial" | "none";
+}
+export declare const executeCanonicalInlineTool: (root: HTMLElement, id: CanonicalInlineToolId, intent?: CanonicalInlineIntent, attrs?: Attrs) => CanonicalInlineExecution;
+/** Consumes adapter stored marks for ordinary text input. Composition remains
+ * owned by the canonical surface; atom-aware composition is explicitly Phase 7. */
+export declare const installCanonicalInlineStoredMarkInput: (root: HTMLElement) => (() => void);
+export declare const canonicalInlineStoredMarks: (root: HTMLElement) => readonly SmartMark[];
+export declare const hasCanonicalInlineStoredMarkOverride: (root: HTMLElement) => boolean;
+export declare const describeCanonicalInlineCoverage: (root: HTMLElement) => Readonly<Record<string, "all" | "partial">>;

package/dist/adapters/canonicalInlineCommandBridge.js

@@ -0,0 +1,269 @@
+import { applyMarkCommand, applyOperations, clearAllMarksCommand, createFoundationEditor, createNodeId, createScopeIndex, editLinkCommand, executeMarkTool, foundationSchema, inlineToolDeclarations, parseCanonicalListHtml, removeLinkCommand, removeMarkCommand, serializeCanonicalListHtml, toggleMarkCommand, } from "smartrte-core";
+const storedMarks = new WeakMap();
+const ownerSelector = "p,h1,h2,h3,h4,h5,h6";
+const ownerId = (owner) => {
+    var _a;
+    (_a = owner.dataset).smartId || (_a.smartId = createNodeId());
+    return owner.dataset.smartId;
+};
+const contentWidth = (node) => {
+    if (node.nodeType === node.TEXT_NODE)
+        return node.nodeValue?.length || 0;
+    if (!(node instanceof HTMLElement))
+        return [...node.childNodes].reduce((sum, child) => sum + contentWidth(child), 0);
+    if (node.closest("[data-smart-ui]"))
+        return 0;
+    if (node.matches("br,[data-smart-atomic='true']"))
+        return 1;
+    return [...node.childNodes].reduce((sum, child) => sum + contentWidth(child), 0);
+};
+const pointInOwner = (root, node, offset) => {
+    const element = node instanceof HTMLElement ? node : node?.parentElement;
+    const owner = element?.closest(ownerSelector);
+    if (!owner || !root.contains(owner) || !node)
+        return null;
+    const range = root.ownerDocument.createRange();
+    range.selectNodeContents(owner);
+    try {
+        range.setEnd(node, offset);
+    }
+    catch {
+        return null;
+    }
+    return { ownerId: ownerId(owner), offset: contentWidth(range.cloneContents()) };
+};
+const captureSelection = (root) => {
+    const native = root.ownerDocument.defaultView?.getSelection();
+    if (!native?.anchorNode || !native.focusNode)
+        return null;
+    const anchor = pointInOwner(root, native.anchorNode, native.anchorOffset);
+    const head = pointInOwner(root, native.focusNode, native.focusOffset);
+    return anchor && head ? { anchor, head } : null;
+};
+const domPointAt = (owner, requested) => {
+    let remaining = Math.max(0, requested);
+    const visit = (parent) => {
+        for (let index = 0; index < parent.childNodes.length; index += 1) {
+            const child = parent.childNodes[index];
+            if (child.nodeType === child.TEXT_NODE) {
+                const length = child.nodeValue?.length || 0;
+                if (remaining <= length)
+                    return { node: child, offset: remaining };
+                remaining -= length;
+            }
+            else if (child instanceof HTMLElement && child.matches("br,[data-smart-atomic='true']")) {
+                if (remaining === 0)
+                    return { node: parent, offset: index };
+                if (remaining === 1)
+                    return { node: parent, offset: index + 1 };
+                remaining -= 1;
+            }
+            else if (!(child instanceof HTMLElement && child.closest("[data-smart-ui]"))) {
+                const found = visit(child);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    return visit(owner) || { node: owner, offset: owner.childNodes.length };
+};
+const restoreSelection = (root, snapshot) => {
+    const byId = (id) => Array.from(root.querySelectorAll("[data-smart-id]"))
+        .find((node) => node.matches(ownerSelector) && node.dataset.smartId === id) || null;
+    const anchorOwner = byId(snapshot.anchor.ownerId);
+    const headOwner = byId(snapshot.head.ownerId);
+    const native = root.ownerDocument.defaultView?.getSelection();
+    if (!anchorOwner || !headOwner || !native)
+        return;
+    const anchor = domPointAt(anchorOwner, snapshot.anchor.offset);
+    const head = domPointAt(headOwner, snapshot.head.offset);
+    native.setBaseAndExtent(anchor.node, anchor.offset, head.node, head.offset);
+};
+const selectedOwners = (root, snapshot) => {
+    const owners = Array.from(root.querySelectorAll(ownerSelector));
+    const indexes = [snapshot.anchor.ownerId, snapshot.head.ownerId].map((id) => owners.findIndex((owner) => ownerId(owner) === id));
+    if (indexes.some((index) => index < 0))
+        return [];
+    const [from, to] = [Math.min(...indexes), Math.max(...indexes)];
+    return owners.slice(from, to + 1);
+};
+const modelSelection = (document, snapshot) => {
+    const positions = createScopeIndex().positions(document, foundationSchema);
+    const point = (value) => {
+        const content = positions.contentRangeOf(value.ownerId);
+        return content ? { path: [...content.from.path], offset: value.offset } : null;
+    };
+    const anchor = point(snapshot.anchor);
+    const head = point(snapshot.head);
+    return anchor && head ? { type: "text", anchor, head } : null;
+};
+const parseOwners = (owners) => parseCanonicalListHtml(owners.map((owner) => owner.outerHTML).join(""));
+const renderOwners = (root, owners, document, preserveEditedLink = false) => {
+    const template = root.ownerDocument.createElement("template");
+    template.innerHTML = serializeCanonicalListHtml(document, { fragment: true });
+    owners.forEach((owner) => {
+        const id = ownerId(owner);
+        const replacement = Array.from(template.content.querySelectorAll("[data-smart-id]"))
+            .find((candidate) => candidate.dataset.smartId === id);
+        if (replacement) {
+            const existingLinks = owner.querySelectorAll("a");
+            const replacementLinks = replacement.querySelectorAll("a");
+            if (preserveEditedLink && existingLinks.length === 1 && replacementLinks.length === 1
+                && existingLinks[0].textContent === replacementLinks[0].textContent
+                && owner.textContent === replacement.textContent) {
+                const next = replacementLinks[0];
+                existingLinks[0].setAttribute("href", next.getAttribute("href") || "");
+                if (next.target) {
+                    existingLinks[0].target = next.target;
+                    existingLinks[0].rel = "noopener noreferrer";
+                }
+                else {
+                    existingLinks[0].removeAttribute("target");
+                    existingLinks[0].removeAttribute("rel");
+                }
+                return;
+            }
+            owner.innerHTML = replacement.innerHTML;
+            owner.querySelectorAll("span[style]").forEach((span) => {
+                const color = span.style.color;
+                const background = span.style.backgroundColor;
+                const size = span.style.fontSize;
+                const family = span.style.fontFamily;
+                span.removeAttribute("style");
+                if (color)
+                    span.style.color = color;
+                if (background)
+                    span.style.backgroundColor = background;
+                if (size)
+                    span.style.fontSize = size;
+                if (family)
+                    span.style.fontFamily = family;
+            });
+        }
+    });
+};
+const declarationFor = (id) => {
+    const declaration = inlineToolDeclarations.find((tool) => tool.id === id);
+    if (!declaration)
+        throw new Error(`Unknown inline tool "${id}".`);
+    return declaration;
+};
+export const executeCanonicalInlineTool = (root, id, intent = "toggle", attrs) => {
+    const ownerElements = Array.from(root.querySelectorAll(ownerSelector));
+    const ownersWithPersistedIds = new Set(ownerElements.filter((owner) => owner.hasAttribute("data-smart-id")));
+    const cleanupTemporaryIds = () => ownerElements.forEach((owner) => {
+        if (!ownersWithPersistedIds.has(owner))
+            owner.removeAttribute("data-smart-id");
+    });
+    const snapshot = captureSelection(root);
+    if (!snapshot)
+        return { changed: false, operations: 0, coverage: "none" };
+    const owners = selectedOwners(root, snapshot);
+    if (!owners.length)
+        return { changed: false, operations: 0, coverage: "none" };
+    const document = parseOwners(owners);
+    const selection = modelSelection(document, snapshot);
+    if (!selection)
+        return { changed: false, operations: 0, coverage: "none" };
+    const declaration = declarationFor(id);
+    const index = createScopeIndex();
+    const scope = index.resolve(document, selection, { want: "inline-range" }, foundationSchema);
+    const description = index.resolve(document, selection, { want: "describe" }, foundationSchema);
+    const coverage = description.marks.some((entry) => entry.mark.type === declaration.markType && entry.coverage === "all")
+        ? "all" : description.marks.some((entry) => entry.mark.type === declaration.markType) ? "partial" : "none";
+    if (scope.collapsed && !(declaration.markType === "link" && (intent === "remove" || intent === "editLink"))) {
+        const editor = createFoundationEditor({ document, selection, storedMarks: storedMarks.get(root) });
+        executeMarkTool(editor, declaration, intent, attrs);
+        storedMarks.set(root, [...(editor.storedMarks || [])]);
+        cleanupTemporaryIds();
+        return { changed: false, operations: 0, coverage };
+    }
+    const ctx = { schema: foundationSchema, positions: index.positions(document, foundationSchema) };
+    const operations = intent === "clearAll" ? clearAllMarksCommand(document, scope, {}, ctx)
+        : intent === "remove" && declaration.markType === "link" ? removeLinkCommand(document, scope, { markType: "link" }, ctx)
+            : intent === "editLink" && declaration.markType === "link" ? editLinkCommand(document, scope, attrs, ctx)
+                : intent === "remove" ? removeMarkCommand(document, scope, { markType: declaration.markType }, ctx)
+                    : intent === "toggle" ? toggleMarkCommand(document, scope, { markType: declaration.markType, attrs, coverage }, ctx)
+                        : applyMarkCommand(document, scope, { markType: declaration.markType, attrs }, ctx);
+    if (!operations.length)
+        return { changed: false, operations: 0, coverage };
+    const output = applyOperations(document, operations);
+    renderOwners(root, owners, output, intent === "editLink");
+    restoreSelection(root, snapshot);
+    cleanupTemporaryIds();
+    storedMarks.delete(root);
+    return { changed: true, operations: operations.length, coverage };
+};
+/** Consumes adapter stored marks for ordinary text input. Composition remains
+ * owned by the canonical surface; atom-aware composition is explicitly Phase 7. */
+export const installCanonicalInlineStoredMarkInput = (root) => {
+    const beforeInput = (event) => {
+        if (!storedMarks.has(root) || event.inputType !== "insertText" || !event.data)
+            return;
+        const marks = storedMarks.get(root) || [];
+        const ownerElements = Array.from(root.querySelectorAll(ownerSelector));
+        const ownersWithPersistedIds = new Set(ownerElements.filter((owner) => owner.hasAttribute("data-smart-id")));
+        const snapshot = captureSelection(root);
+        if (!snapshot || snapshot.anchor.ownerId !== snapshot.head.ownerId || snapshot.anchor.offset !== snapshot.head.offset)
+            return;
+        event.preventDefault();
+        const owners = selectedOwners(root, snapshot);
+        const document = parseOwners(owners);
+        const selection = modelSelection(document, snapshot);
+        if (!selection)
+            return;
+        const editor = createFoundationEditor({ document, selection, storedMarks: marks });
+        if (marks.length)
+            editor.typeText(event.data, { timestamp: Date.now() });
+        else
+            editor.transact((builder) => {
+                builder.operations.push({ type: "insertText", pos: selection.head, text: event.data });
+                const next = { path: [...selection.head.path], offset: selection.head.offset + event.data.length };
+                builder.setSelection({ type: "text", anchor: next, head: next });
+                builder.setStoredMarks([]);
+            }, { source: "input", timestamp: Date.now(), addToHistory: true });
+        renderOwners(root, owners, editor.document);
+        const next = { anchor: { ...snapshot.anchor, offset: snapshot.anchor.offset + event.data.length }, head: { ...snapshot.head, offset: snapshot.head.offset + event.data.length } };
+        restoreSelection(root, next);
+        ownerElements.forEach((owner) => { if (!ownersWithPersistedIds.has(owner))
+            owner.removeAttribute("data-smart-id"); });
+        storedMarks.set(root, [...(editor.storedMarks || [])]);
+    };
+    const selectionChange = () => {
+        const ownerElements = Array.from(root.querySelectorAll(ownerSelector));
+        const ownersWithPersistedIds = new Set(ownerElements.filter((owner) => owner.hasAttribute("data-smart-id")));
+        const snapshot = captureSelection(root);
+        if (!snapshot || snapshot.anchor.ownerId !== snapshot.head.ownerId || snapshot.anchor.offset !== snapshot.head.offset)
+            storedMarks.delete(root);
+        ownerElements.forEach((owner) => { if (!ownersWithPersistedIds.has(owner))
+            owner.removeAttribute("data-smart-id"); });
+    };
+    root.addEventListener("beforeinput", beforeInput);
+    root.ownerDocument.addEventListener("selectionchange", selectionChange);
+    return () => {
+        root.removeEventListener("beforeinput", beforeInput);
+        root.ownerDocument.removeEventListener("selectionchange", selectionChange);
+        storedMarks.delete(root);
+    };
+};
+export const canonicalInlineStoredMarks = (root) => storedMarks.get(root) || [];
+export const hasCanonicalInlineStoredMarkOverride = (root) => storedMarks.has(root);
+export const describeCanonicalInlineCoverage = (root) => {
+    if (storedMarks.has(root))
+        return Object.fromEntries((storedMarks.get(root) || []).map((mark) => [mark.type, "all"]));
+    const ownerElements = Array.from(root.querySelectorAll(ownerSelector));
+    const ownersWithPersistedIds = new Set(ownerElements.filter((owner) => owner.hasAttribute("data-smart-id")));
+    const snapshot = captureSelection(root);
+    if (!snapshot)
+        return {};
+    const owners = selectedOwners(root, snapshot);
+    const document = parseOwners(owners);
+    const selection = modelSelection(document, snapshot);
+    const description = selection
+        ? createScopeIndex().resolve(document, selection, { want: "describe" }, foundationSchema)
+        : null;
+    ownerElements.forEach((owner) => { if (!ownersWithPersistedIds.has(owner))
+        owner.removeAttribute("data-smart-id"); });
+    return Object.fromEntries((description?.marks || []).map((entry) => [entry.mark.type, entry.coverage]));
+};

package/dist/adapters/canonicalListCommandBridge.d.ts

@@ -0,0 +1,26 @@
+import { type SmartSelection } from "smartrte-core";
+export declare const executeCanonicalListDepth: (root: HTMLElement, items: readonly HTMLElement[], direction: "indent" | "outdent") => boolean;
+export declare const executeCanonicalListMove: (root: HTMLElement, items: readonly HTMLElement[], direction: "up" | "down") => boolean;
+export declare const executeCanonicalListStyle: (args: {
+    root: HTMLElement;
+    items: readonly HTMLElement[];
+    style?: string;
+    preset?: string;
+    checkable?: boolean;
+}) => boolean;
+export declare const executeCanonicalListCheck: (root: HTMLElement, item: HTMLElement, checked: boolean) => boolean;
+export declare const executeCanonicalListToggle: (args: {
+    root: HTMLElement;
+    items: readonly HTMLElement[];
+    blocks: readonly HTMLElement[];
+    listTag: "ul" | "ol";
+    range?: Range;
+    style?: string;
+    preset?: string;
+    checkable?: boolean;
+}) => boolean;
+export interface CanonicalListBridgeResult {
+    readonly changed: boolean;
+    readonly selection: SmartSelection | null;
+}
+export declare const executeCanonicalListStructuralInput: (root: HTMLElement, input: "enter" | "backspace" | "delete") => boolean;