smartrte-react 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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.
+- Make long mobile action menus independently scrollable with touch-friendly overscroll behavior.
+
 ## 0.3.2
 
 - Preserve paragraph and heading blocks when creating, restyling, or removing lists.

package/dist/components/ClassicEditor.js

@@ -121,6 +121,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [formulaInput, setFormulaInput] = useState("E=mc^2");
     const [tableMenu, setTableMenu] = useState(null);
     const selectionRef = useRef(null);
+    const tableFillTargetsRef = useRef(null);
     const selectingRef = useRef(null);
     const [imageMenu, setImageMenu] = useState(null);
     const [linkMenu, setLinkMenu] = useState(null);
@@ -140,6 +141,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [currentFont, setCurrentFont] = useState("");
     const [currentBlockType, setCurrentBlockType] = useState("p");
     const [currentAlignment, setCurrentAlignment] = useState("left");
+    const [currentTextColor, setCurrentTextColor] = useState("#000000");
+    const [currentBackgroundColor, setCurrentBackgroundColor] = useState("#ffffff");
     const [activeState, setActiveState] = useState({
         bold: false,
         italic: false,
@@ -312,6 +315,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 setCurrentBlockType(/^h[1-6]$/.test(tag || "") ? tag : "p");
             }
             setCurrentFontSize(resolveFontSizeForRange(range));
+            const colorTarget = getRangeStartElement(range) || editor;
+            setCurrentTextColor(cssColorToHex(window.getComputedStyle(colorTarget).color) || "#000000");
+            setCurrentBackgroundColor(getEffectiveBackgroundHex(colorTarget) || "#ffffff");
             const alignmentTargets = getAlignmentTargets(range);
             const alignments = new Set(alignmentTargets.map(readTextAlignment));
             setCurrentAlignment(alignments.size > 1 ? "mixed" : Array.from(alignments)[0] || "left");
@@ -2457,9 +2463,6 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             console.error('Error applying font family:', error);
         }
     };
-    const applyTextColor = (color) => {
-        exec("foreColor", color);
-    };
     const parseCssColor = (value) => {
         const normalized = value.trim().toLowerCase();
         if (!normalized || normalized === "transparent")
@@ -2508,13 +2511,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             node = node.parentElement;
         return node instanceof HTMLElement && editor.contains(node) ? node : null;
     };
-    const getInlineBackgroundHex = (element) => {
+    const getEffectiveBackgroundHex = (element) => {
         const editor = editableRef.current;
         let current = element;
-        while (current && current !== editor) {
-            const inlineHex = cssColorToHex(current.style.backgroundColor || current.style.background);
-            if (inlineHex)
-                return inlineHex;
+        while (current) {
+            const inline = cssColorToHex(current.style.backgroundColor || current.style.background);
+            if (inline)
+                return inline;
+            const computed = typeof window !== "undefined"
+                ? cssColorToHex(window.getComputedStyle(current).backgroundColor)
+                : "";
+            if (computed)
+                return computed;
+            if (current === editor)
+                break;
             current = current.parentElement;
         }
         return "";
@@ -2525,9 +2535,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const editor = editableRef.current;
         if (!editor)
             return colorPickerType === "text" ? "#000000" : "#ffffff";
-        const element = getRangeStartElement(getSelectionRangeInEditor());
+        const element = getRangeStartElement(getSelectionRangeInEditor() || savedRangeRef.current);
         if (colorPickerType === "background") {
-            return getInlineBackgroundHex(element) || "#ffffff";
+            return getEffectiveBackgroundHex(element) || "#ffffff";
         }
         const target = element || editor;
         return cssColorToHex(window.getComputedStyle(target).color) || "#000000";
@@ -2556,7 +2566,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }))
             .sort((a, b) => b.ratio - a.ratio)[0]?.color || "";
     };
-    const applyBackgroundColor = (color) => {
+    const applyInlineColor = (type, color) => {
         try {
             const editor = editableRef.current;
             if (!editor)
@@ -2564,13 +2574,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             if (!restoreSavedSelection())
                 safeSelectRange(getSelectionRangeInEditor());
             const range = getSelectionRangeInEditor();
-            const readableColor = readableTextColorForBackground(color);
             if (!range)
                 return;
+            pushEditorHistory();
             const applyToElement = (element) => {
-                element.style.backgroundColor = color;
-                if (readableColor)
-                    element.style.color = readableColor;
+                if (type === "text")
+                    element.style.color = color;
+                else
+                    element.style.backgroundColor = color;
             };
             if (range.collapsed) {
                 const span = document.createElement("span");
@@ -2585,34 +2596,46 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 handleInput();
                 return;
             }
-            const selectedCells = Array.from(editor.querySelectorAll("td,th"))
-                .filter((cell) => {
-                try {
-                    return range.intersectsNode(cell);
-                }
-                catch {
-                    return false;
+            const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT);
+            const selected = [];
+            let current = walker.nextNode();
+            while (current) {
+                const node = current;
+                if (node.data && range.intersectsNode(node)) {
+                    const start = node === range.startContainer ? range.startOffset : 0;
+                    const end = node === range.endContainer ? range.endOffset : node.data.length;
+                    if (end > start)
+                        selected.push({ node, start, end });
                 }
+                current = walker.nextNode();
+            }
+            const styledRuns = [];
+            [...selected].reverse().forEach(({ node, start, end }) => {
+                const runRange = document.createRange();
+                runRange.setStart(node, start);
+                runRange.setEnd(node, end);
+                const span = document.createElement("span");
+                applyToElement(span);
+                span.appendChild(runRange.extractContents());
+                runRange.insertNode(span);
+                styledRuns.unshift(span);
             });
-            if (selectedCells.length > 0) {
-                selectedCells.forEach(applyToElement);
-                handleInput();
-                return;
+            if (styledRuns.length) {
+                const nextRange = document.createRange();
+                nextRange.setStart(styledRuns[0], 0);
+                nextRange.setEnd(styledRuns[styledRuns.length - 1], styledRuns[styledRuns.length - 1].childNodes.length);
+                safeSelectRange(nextRange);
+                savedRangeRef.current = nextRange.cloneRange();
             }
-            const span = document.createElement("span");
-            applyToElement(span);
-            const fragment = range.extractContents();
-            span.appendChild(fragment);
-            range.insertNode(span);
-            range.selectNodeContents(span);
-            safeSelectRange(range);
-            savedRangeRef.current = range.cloneRange();
             handleInput();
+            requestAnimationFrame(updateActiveState);
         }
         catch {
-            exec("hiliteColor", color);
+            exec(type === "text" ? "foreColor" : "hiliteColor", color);
         }
     };
+    const applyTextColor = (color) => applyInlineColor("text", color);
+    const applyBackgroundColor = (color) => applyInlineColor("background", color);
     const insertImage = () => {
         if (!media)
             return;
@@ -4514,13 +4537,17 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
         handleInput();
     };
-    const applyBgToSelection = (hex, fallbackCell) => {
+    const applyBgToSelection = (hex, fallbackCell, explicitCells) => {
         const readableColor = readableTextColorForBackground(hex);
         const applyFill = (cell) => {
             cell.style.background = hex;
             if (readableColor)
                 cell.style.color = readableColor;
         };
+        if (explicitCells?.length) {
+            explicitCells.forEach(applyFill);
+            return;
+        }
         const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
         if (sel) {
             const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
@@ -5288,7 +5315,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             maxWidth: 100,
-                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Text color", title: "Text Color", onClick: () => {
+                        }, children: [_jsx("option", { value: "", disabled: true, children: "Font" }), fonts.map((f) => (_jsx("option", { value: f.value, children: f.name }, f.value)))] })), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Text color", title: "Text Color", onMouseDown: preserveEditorSelection, onClick: () => {
                             setColorPickerType('text');
                             setShowColorPicker(true);
                         }, style: {
@@ -5300,7 +5327,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
                             position: "relative",
-                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: "3px solid currentColor", lineHeight: 1 }, children: "A" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Background color", title: "Background Color", onClick: () => {
+                        }, children: _jsx("span", { style: { fontWeight: 700, borderBottom: `3px solid ${currentTextColor}`, lineHeight: 1 }, children: "A" }) }), _jsx("button", { type: "button", className: "srte-tool-button", "aria-label": "Background color", title: "Background Color", onMouseDown: preserveEditorSelection, onClick: () => {
                             setColorPickerType('background');
                             setShowColorPicker(true);
                         }, style: {
@@ -5311,7 +5338,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             borderRadius: 6,
                             background: "var(--srte-input-bg)",
                             color: "var(--srte-input-text)",
-                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.subscript ? " srte-active" : ""}`, title: "Subscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.superscript ? " srte-active" : ""}`, title: "Superscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), [
+                        }, children: _jsx("span", { style: { fontWeight: 700, padding: "1px 4px", background: currentBackgroundColor, color: readableTextColorForBackground(currentBackgroundColor) || "currentColor", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.subscript ? " srte-active" : ""}`, title: "Subscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { type: "button", className: `srte-tool-button${activeState.superscript ? " srte-active" : ""}`, title: "Superscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), [
                         {
                             key: "check",
                             icon: "checklist",
@@ -6258,8 +6285,19 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                         alignItems: "center",
                                         padding: "4px 6px",
                                         fontSize: 12,
-                                    }, children: [_jsx("span", { children: "Fill:" }), _jsx("input", { type: "color", value: tableMenuFillHex(tableMenu.cell), onChange: (e) => {
-                                                runTableCellAction(tableMenu.cell, (cell) => applyBgToSelection(e.target.value, cell));
+                                    }, children: [_jsx("span", { children: "Fill:" }), _jsx("input", { type: "color", value: tableMenuFillHex(tableMenu.cell), onPointerDown: () => {
+                                                const selection = shouldUseTableSelection(tableMenu.cell) ? selectionRef.current : null;
+                                                tableFillTargetsRef.current = selection
+                                                    ? getCellsInGridRect(selection.tbody, selection.sr, selection.sc, selection.er, selection.ec)
+                                                    : [tableMenu.cell];
+                                                pushEditorHistory();
+                                                clearSelectionDecor();
+                                            }, onClick: (e) => e.stopPropagation(), onInput: (e) => {
+                                                applyBgToSelection(e.currentTarget.value, tableMenu.cell, tableFillTargetsRef.current);
+                                                handleInput();
+                                            }, onChange: (e) => {
+                                                applyBgToSelection(e.currentTarget.value, tableMenu.cell, tableFillTargetsRef.current);
+                                                handleInput();
                                             }, style: {
                                                 width: 28,
                                                 height: 18,

package/dist/theme.d.ts

@@ -1,3 +1,3 @@
 export type SrteTheme = 'light' | 'dark';
-export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: #ffffff;\n  --srte-modal-text: #000000;\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  --srte-surface-subtle: #f3f4f6;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: #1e293b;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-surface-subtle: #333333;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  color: var(--srte-primary);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n@media (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"] { display: none; }\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  .srte-menu-item { height: 40px; }\n}\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  .srte-menu-item { height: 40px; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  background: var(--srte-surface-subtle);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-surface-subtle);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor.srte-dark [contenteditable] [style*=\"color\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),\n.srte-editor.srte-dark [contenteditable] [style*=\"background\"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *) {\n  color: var(--srte-text) !important;\n  background: transparent !important;\n  background-color: transparent !important;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
+export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: #ffffff;\n  --srte-modal-text: #000000;\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  --srte-surface-subtle: #f3f4f6;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: #1e293b;\n  --srte-modal-text: #e0e0e0;\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-surface-subtle: #333333;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  color: var(--srte-primary);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n@media (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"] { display: none; }\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  .srte-mobile-more .srte-menu {\n    left: auto;\n    right: 0;\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  .srte-mobile-more .srte-menu {\n    left: auto;\n    right: 0;\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  background: var(--srte-surface-subtle);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-surface-subtle);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
 export declare function ensureStyleSheet(): void;

package/dist/theme.js

@@ -285,6 +285,17 @@ export const SRTE_DEFAULT_CSS = `
   .srte-toolbar-group[data-srte-priority="3"] { display: none; }
   .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
   .srte-mobile-more { display: block; }
+  .srte-mobile-more .srte-menu {
+    left: auto;
+    right: 0;
+    width: min(280px, calc(100vw - 16px));
+    min-width: 0;
+    max-height: min(70dvh, 480px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
   .srte-menu-item { height: 40px; }
 }
 @container srte-editor (max-width: 639px) {
@@ -293,6 +304,17 @@ export const SRTE_DEFAULT_CSS = `
   .srte-toolbar-group[data-srte-priority="3"],
   .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
   .srte-mobile-more { display: block; }
+  .srte-mobile-more .srte-menu {
+    left: auto;
+    right: 0;
+    width: min(280px, calc(100vw - 16px));
+    min-width: 0;
+    max-height: min(70dvh, 480px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
   .srte-menu-item { height: 40px; }
 }
 .srte-editor [contenteditable] blockquote {
@@ -427,12 +449,6 @@ export const SRTE_DEFAULT_CSS = `
   outline: 2px solid var(--srte-accent);
   outline-offset: 2px;
 }
-.srte-editor.srte-dark [contenteditable] [style*="color"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *),
-.srte-editor.srte-dark [contenteditable] [style*="background"]:not(td):not(th):not(.srte-preserve-colors):not(.srte-preserve-colors *) {
-  color: var(--srte-text) !important;
-  background: transparent !important;
-  background-color: transparent !important;
-}
 .srte-editor [contenteditable] sub,
 .srte-editor [contenteditable] sup {
   line-height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",