smartrte-react 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.3.1
+
+- Make caret-based superscript and subscript toggling deterministic in controlled React applications.
+- Preserve normal text before and after script spans and prevent nested superscript/subscript markup.
+
 ## 0.3.0
 
 - Rebuild list selection and conversion behavior for checklists, bullets, numbers, alphabetic lists, and Roman numerals.

package/dist/components/ClassicEditor.js

@@ -254,12 +254,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 italic: queryState("italic"),
                 underline: queryState("underline"),
                 strikeThrough: queryState("strikeThrough"),
-                subscript: overrideApplies && scriptOverride?.command === "subscript"
-                    ? false
-                    : subscriptActive,
-                superscript: overrideApplies && scriptOverride?.command === "superscript"
-                    ? false
-                    : superscriptActive,
+                subscript: overrideApplies ? scriptOverride?.command === "subscript" : subscriptActive,
+                superscript: overrideApplies ? scriptOverride?.command === "superscript" : superscriptActive,
                 checklist: Boolean(element?.closest('[data-srte-checklist="true"]')),
                 unorderedList: Boolean(element?.closest("ul:not([data-srte-checklist=\"true\"])")),
                 orderedList: Boolean(element?.closest("ol")),
@@ -398,55 +394,121 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const range = getSelectionRangeInEditor();
             if (!editor || !range)
                 return;
-            const tagName = command === "subscript" ? "sub" : "sup";
-            const script = range.collapsed
-                ? getScriptAncestor(range.startContainer, tagName)
-                : null;
-            if (range.collapsed && document.queryCommandState(command)) {
-                document.execCommand(command, false);
-                const currentRange = getSelectionRangeInEditor();
-                savedRangeRef.current = currentRange?.cloneRange() || null;
-                inlineScriptCaretOverrideRef.current = currentRange?.collapsed
-                    ? {
-                        command,
-                        container: currentRange.startContainer,
-                        offset: currentRange.startOffset,
-                    }
-                    : null;
-                setActiveState((current) => ({
-                    ...current,
-                    subscript: command === "subscript" ? false : current.subscript,
-                    superscript: command === "superscript" ? false : current.superscript,
-                }));
-                handleInput();
-                requestAnimationFrame(updateActiveState);
-                return;
-            }
-            if (script) {
-                const nextRange = document.createRange();
-                nextRange.setStartAfter(script);
-                nextRange.collapse(true);
-                safeSelectRange(nextRange);
-                savedRangeRef.current = nextRange.cloneRange();
+            if (range.collapsed) {
+                const tagName = command === "subscript" ? "sub" : "sup";
+                const pending = inlineScriptCaretOverrideRef.current;
+                const pendingApplies = pending &&
+                    pending.container === range.startContainer && pending.offset === range.startOffset;
+                const active = pendingApplies
+                    ? pending.command === command
+                    : Boolean(getScriptAncestor(range.startContainer, tagName));
+                const nextCommand = active ? "normal" : command;
                 inlineScriptCaretOverrideRef.current = {
-                    command,
-                    container: nextRange.startContainer,
-                    offset: nextRange.startOffset,
+                    command: nextCommand,
+                    container: range.startContainer,
+                    offset: range.startOffset,
                 };
                 setActiveState((current) => ({
                     ...current,
-                    subscript: command === "subscript" ? false : current.subscript,
-                    superscript: command === "superscript" ? false : current.superscript,
+                    subscript: nextCommand === "subscript",
+                    superscript: nextCommand === "superscript",
                 }));
-                requestAnimationFrame(updateActiveState);
+                savedRangeRef.current = range.cloneRange();
                 return;
             }
             inlineScriptCaretOverrideRef.current = null;
-            exec(command);
+            pushEditorHistory();
+            const result = getCoreInlineMarkResult(editor, command);
+            if (result) {
+                editor.innerHTML = result.html;
+                ensureTableWrappers(editor);
+                addTableResizeHandles();
+                restoreSelectionToDom(editor, result.selectionAfter);
+                handleInput();
+            }
+            else {
+                exec(command);
+            }
             requestAnimationFrame(updateActiveState);
         }
         catch { }
     };
+    useEffect(() => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        const splitScriptAtRange = (script, range) => {
+            const rightRange = document.createRange();
+            rightRange.selectNodeContents(script);
+            rightRange.setStart(range.startContainer, range.startOffset);
+            const rightContent = rightRange.extractContents();
+            const rightScript = script.cloneNode(false);
+            rightScript.appendChild(rightContent);
+            script.parentNode?.insertBefore(rightScript, script.nextSibling);
+            const insertion = document.createRange();
+            insertion.setStartAfter(script);
+            insertion.collapse(true);
+            if (!script.textContent)
+                script.remove();
+            if (!rightScript.textContent)
+                rightScript.remove();
+            return insertion;
+        };
+        const applyPendingInlineScript = (event) => {
+            const pending = inlineScriptCaretOverrideRef.current;
+            if (!pending || event.inputType !== "insertText" || !event.data)
+                return;
+            const range = getSelectionRangeInEditor();
+            if (!range?.collapsed || range.startContainer !== pending.container || range.startOffset !== pending.offset)
+                return;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            pushEditorHistory();
+            const currentScript = getScriptAncestor(range.startContainer, "sub") ||
+                getScriptAncestor(range.startContainer, "sup");
+            const desiredTag = pending.command === "normal"
+                ? null
+                : pending.command === "subscript" ? "sub" : "sup";
+            let insertion = range;
+            if (currentScript && currentScript.tagName.toLowerCase() !== desiredTag) {
+                insertion = splitScriptAtRange(currentScript, range);
+            }
+            const text = document.createTextNode(event.data);
+            let inserted = text;
+            if (desiredTag && currentScript?.tagName.toLowerCase() !== desiredTag) {
+                const script = document.createElement(desiredTag);
+                script.appendChild(text);
+                inserted = script;
+            }
+            const pendingSize = pendingFontSizeRef.current;
+            if (pendingSize) {
+                const span = document.createElement("span");
+                span.style.fontSize = `${pendingSize.valuePx}px`;
+                span.appendChild(inserted);
+                inserted = span;
+            }
+            insertion.insertNode(inserted);
+            const nextRange = document.createRange();
+            nextRange.setStartAfter(text);
+            nextRange.collapse(true);
+            safeSelectRange(nextRange);
+            inlineScriptCaretOverrideRef.current = {
+                command: pending.command,
+                container: nextRange.startContainer,
+                offset: nextRange.startOffset,
+            };
+            if (pendingSize)
+                pendingFontSizeRef.current = {
+                    valuePx: pendingSize.valuePx,
+                    container: nextRange.startContainer,
+                    offset: nextRange.startOffset,
+                };
+            savedRangeRef.current = nextRange.cloneRange();
+            handleInput();
+        };
+        editor.addEventListener("beforeinput", applyPendingInlineScript);
+        return () => editor.removeEventListener("beforeinput", applyPendingInlineScript);
+    }, []);
     const applyFormatBlock = (blockName) => {
         try {
             if (!restoreSavedSelection()) {
@@ -4967,7 +5029,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", { title: "Subscript", onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", 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: "var(--srte-accent-bg)", borderRadius: 3 }, children: "A" }) }), _jsxs("button", { title: "Subscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("subscript"), "aria-pressed": activeState.subscript, style: activeButtonStyle(activeState.subscript), children: ["X", _jsx("sub", { children: "2" })] }), _jsxs("button", { title: "Superscript", onMouseDown: preserveEditorSelection, onClick: () => toggleInlineScript("superscript"), "aria-pressed": activeState.superscript, style: activeButtonStyle(activeState.superscript), children: ["X", _jsx("sup", { children: "2" })] }), [
                         {
                             key: "check",
                             label: "☐",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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",
@@ -79,6 +79,6 @@
     "jszip": "^3.10.1",
     "mammoth": "^1.11.0",
     "pdfjs-dist": "^5.4.530",
-    "smartrte-core": "^0.2.0"
+    "smartrte-core": "^0.2.1"
   }
 }