@parhelia/core 0.4.12818 → 0.4.12871

package/dist/editor/field-types/richtext/components/ReactSlate.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import React, { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Link2Off } from "lucide-react";
 import { createEditor, Editor, Element, Text, Transforms, Range, } from "slate";
 import { withHistory } from "slate-history";
@@ -15,9 +15,13 @@ import { htmlToSlate, slateToHtml } from "../utils/conversion";
 import { createKeyboardHandler, generateInternalLinkUrl, isHotkey, } from "../utils/plugins";
 import { cn } from "../../../../lib/utils";
 import { agentAddedTextClass, agentWholeFieldClass, computeTextHighlight, } from "../../../agent-changes/agentChangeTextHighlight";
-import { CHANGED_TEXT_LEAF, collectTextNodeStarts, decorateChangedText, getNodesText, } from "../utils/changeHighlight";
+import { CHANGED_TEXT_LEAF, MISSPELLED_LEAF, collectTextNodeStarts, decorateChangedText, decorateRanges, getNodesText, } from "../utils/changeHighlight";
+import { buildSpellCheckText, commonPrefixLength, pointAtSpellTextOffset, } from "../utils/spellCheckText";
+import { useSpellCheck } from "../../../spellcheck/useSpellCheck";
+import { misspelledTextClass } from "../../../spellcheck/spellCheckStyles";
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
 import { getRichTextAlignmentIcon, getRichTextHorizontalRuleIcon, getRichTextLinkIcon, getRichTextListIcon, getRichTextMarkIcon, getRichTextStripFormattingIcon, } from "../richTextToolbarIcons";
+import { fieldBoxClassName, fieldFocusWithinClassName, } from "../../fieldStyles";
 // Dashed whole-field outline for an agent change that has no added text to
 // mark (deletion-only, or no baseline captured). Lives inside <Slate> and
 // subscribes to the editor so it follows external value updates, which never
@@ -55,15 +59,24 @@ const ToolbarButtonWrapper = memo(({ option, icon, onMouseDown }) => {
             return false;
         return !editor.selection || Range.isCollapsed(editor.selection);
     });
+    // Adding and removing a link both act on the selected text
+    const disabledTooltip = option.type !== "link"
+        ? undefined
+        : isActive
+            ? "Select the link text to remove the link"
+            : "Select text to add a link";
     const renderedIcon = option.type === "link" && isActive ? (_jsx(Link2Off, { className: "text-neutral-grey-100 h-4 w-4", strokeWidth: 1, "aria-hidden": "true" })) : (icon);
-    return (_jsx(ToolbarButton, { icon: renderedIcon, active: isActive, disabled: isDisabled, onMouseDown: onMouseDown, type: `${option.type}-${option.id}` }));
+    return (_jsx(ToolbarButton, { icon: renderedIcon, active: isActive, disabled: isDisabled, disabledTooltip: disabledTooltip, onMouseDown: onMouseDown, type: `${option.type}-${option.id}` }));
 });
 ToolbarButtonWrapper.displayName = "ToolbarButtonWrapper";
 // Memoized dropdown component to prevent unnecessary re-renders
-const MemoizedEditorDropdown = memo(({ options, editor, label, buttonStyle }) => {
-    return (_jsx(EditorDropdown, { options: options, editor: editor, label: label, buttonStyle: buttonStyle }));
+const MemoizedEditorDropdown = memo(({ options, editor, label, buttonStyle, iconOnly }) => {
+    return (_jsx(EditorDropdown, { options: options, editor: editor, label: label, buttonStyle: buttonStyle, iconOnly: iconOnly }));
 });
 MemoizedEditorDropdown.displayName = "MemoizedEditorDropdown";
+// Handler keys for the "Style" (ApplyClass) dropdown entries
+const CSS_CLASS_NONE_KEY = "css-class-none";
+const CSS_CLASS_KEY_PREFIX = "css-class-";
 function getPointAtTextOffset(editor, requestedOffset) {
     const offset = Math.max(0, requestedOffset);
     let traversed = 0;
@@ -142,7 +155,7 @@ function resolveSnapshotSelection(editor, selection, snapshot) {
     }
 }
 export const ReactSlate = forwardRef((props, ref) => {
-    const { value = "", onChange, onFocus, onBlur, onMouseUp, onKeyUp, onContextMenu, readOnly = false, placeholder = "Enter some text...", profile, showControls, changeBaseline, } = props;
+    const { value = "", onChange, onFocus, onBlur, onMouseUp, onKeyUp, onContextMenu, readOnly = false, placeholder = "Enter some text...", profile, changeBaseline, spellCheck, } = props;
     const editorProfile = profile || {
         toolbar: {
             groups: [],
@@ -193,12 +206,58 @@ export const ReactSlate = forwardRef((props, ref) => {
         changeHighlightCacheRef.current = next;
         return next;
     }, [baselineText, editor]);
+    // Spell checking: the document's spell text (block-separated, see
+    // spellCheckText.ts) is tracked per content change and checked through
+    // the shared client. Misspelling offsets are mapped onto text nodes via
+    // the `starts` of the current children; while a re-check is pending after
+    // typing, only the ranges before the first changed character are kept.
+    const [spellText, setSpellText] = useState(() => buildSpellCheckText(editor.children).text);
+    const lastSpellChildrenRef = useRef(editor.children);
+    const spell = useSpellCheck({
+        key: spellCheck?.key ?? "",
+        language: spellCheck?.language,
+        text: spellText,
+        enabled: !!spellCheck?.enabled && !!spellCheck?.key && !readOnly,
+    });
+    const spellRangesCacheRef = useRef(null);
+    const getSpellRanges = useCallback(() => {
+        if (spell.misspellings.length === 0)
+            return null;
+        const cached = spellRangesCacheRef.current;
+        if (cached &&
+            cached.children === editor.children &&
+            cached.misspellings === spell.misspellings &&
+            cached.checkedText === spell.checkedText) {
+            return cached;
+        }
+        const current = buildSpellCheckText(editor.children);
+        const checkedText = spell.checkedText ?? "";
+        const stable = commonPrefixLength(checkedText, current.text);
+        const ranges = current.text === checkedText
+            ? spell.misspellings
+            : spell.misspellings.filter((m) => m.end <= stable);
+        const next = {
+            children: editor.children,
+            misspellings: spell.misspellings,
+            checkedText: spell.checkedText,
+            starts: current.starts,
+            ranges,
+        };
+        spellRangesCacheRef.current = next;
+        return next;
+    }, [editor, spell.misspellings, spell.checkedText]);
     const decorate = useCallback((entry) => {
+        const decorations = [];
         const state = getChangeHighlight();
-        if (!state?.highlight)
-            return [];
-        return decorateChangedText(entry, state.starts, state.highlight.ranges);
-    }, [getChangeHighlight]);
+        if (state?.highlight) {
+            decorations.push(...decorateChangedText(entry, state.starts, state.highlight.ranges));
+        }
+        const spellState = getSpellRanges();
+        if (spellState) {
+            decorations.push(...decorateRanges(entry, spellState.starts, spellState.ranges, MISSPELLED_LEAF));
+        }
+        return decorations;
+    }, [getChangeHighlight, getSpellRanges]);
     // Track previous value to detect external changes
     const previousValueRef = useRef(value);
     const isInternalChangeRef = useRef(false);
@@ -269,7 +328,65 @@ export const ReactSlate = forwardRef((props, ref) => {
                 },
             });
         },
-    }), [editor, onChange, simplifiedProfile, value]);
+        getSpellText: () => buildSpellCheckText(editor.children).text,
+        getTextOffsetAtPoint: (clientX, clientY) => {
+            let domRange = null;
+            try {
+                const doc = ReactEditor.toDOMNode(editor, editor).ownerDocument;
+                const caretDocument = doc;
+                if (caretDocument.caretPositionFromPoint) {
+                    const position = caretDocument.caretPositionFromPoint(clientX, clientY);
+                    if (position) {
+                        domRange = doc.createRange();
+                        domRange.setStart(position.offsetNode, position.offset);
+                        domRange.collapse(true);
+                    }
+                }
+                else if (caretDocument.caretRangeFromPoint) {
+                    domRange = caretDocument.caretRangeFromPoint(clientX, clientY);
+                }
+                if (!domRange)
+                    return null;
+                const slateRange = ReactEditor.toSlateRange(editor, domRange, {
+                    exactMatch: false,
+                    suppressThrow: true,
+                });
+                if (!slateRange)
+                    return null;
+                const { starts } = buildSpellCheckText(editor.children);
+                const start = starts.get(slateRange.anchor.path.join("."));
+                return start === undefined ? null : start + slateRange.anchor.offset;
+            }
+            catch {
+                return null;
+            }
+        },
+        getMisspellingAtOffset: (offset) => getSpellRanges()?.ranges.find((m) => m.start <= offset && offset <= m.end),
+        replaceTextAtOffsets: (start, end, newText) => {
+            const { starts } = buildSpellCheckText(editor.children);
+            const anchor = pointAtSpellTextOffset(editor, starts, start);
+            const focus = pointAtSpellTextOffset(editor, starts, end);
+            Transforms.select(editor, { anchor, focus });
+            if (editor.selection &&
+                Range.isRange(editor.selection) &&
+                !Range.isCollapsed(editor.selection)) {
+                Transforms.delete(editor);
+            }
+            Transforms.insertText(editor, newText);
+            if (onChange) {
+                try {
+                    const html = slateToHtml(editor.children, simplifiedProfile);
+                    if (html !== value) {
+                        isInternalChangeRef.current = true;
+                        onChange(html);
+                    }
+                }
+                catch (error) {
+                    console.warn("Failed to convert Slate to HTML in replaceTextAtOffsets:", error);
+                }
+            }
+        },
+    }), [editor, getSpellRanges, onChange, simplifiedProfile, value]);
     // Initial value for Slate - capture initial props at mount time
     const initialSlateValue = useMemo(() => {
         try {
@@ -291,17 +408,14 @@ export const ReactSlate = forwardRef((props, ref) => {
             return [{ type: "paragraph", children: [{ text: "" }] }];
         }
     }, [value, simplifiedProfile]);
-    // Track if user-initiated focus should be restored after toolbar renders
-    const pendingFocusRestoreRef = useRef(false);
-    const previousShowControlsRef = useRef(showControls);
     // The caret position the user clicked, captured at mousedown as a *logical*
-    // Slate range. When an unfocused field is clicked, the toolbar appears and
-    // steals focus, which clears both editor.selection and the DOM selection by
-    // the time we re-focus - so neither can be read back. Capturing from the
-    // click coordinates up front, before any of that, is the only reliable
-    // source. A logical range also survives the layout shift when the toolbar
-    // pushes the content down.
+    // Slate range. When an unfocused field is clicked, Slate still holds its
+    // pre-blur selection at focus time and the renders triggered by focusing
+    // can re-apply it, so the click coordinates captured up front are the only
+    // reliable source for where the caret belongs.
     const pendingClickRangeRef = useRef(null);
+    const pendingCharacterDragRef = useRef(null);
+    const pendingSelectionCollapseRef = useRef(null);
     // Keep the last deliberate expanded selection in Slate coordinates. A
     // toolbar interaction can make the browser collapse or discard its DOM
     // selection before React handles the button event; the logical range is the
@@ -343,6 +457,16 @@ export const ReactSlate = forwardRef((props, ref) => {
     }, [editor]);
     // Capture the click target before focus/toolbar can disrupt the selection.
     const handleMouseDown = useCallback((event) => {
+        pendingCharacterDragRef.current =
+            event.button === 0 &&
+                event.detail === 1 &&
+                !event.shiftKey &&
+                !event.ctrlKey &&
+                !event.metaKey &&
+                !event.altKey
+                ? { x: event.clientX, y: event.clientY, moved: false }
+                : null;
+        pendingSelectionCollapseRef.current = null;
         // Multi-clicks (double = word, triple = paragraph) expand the selection
         // natively. Capturing a collapsed point here would let the delayed
         // caret-restore logic collapse that expansion again.
@@ -352,7 +476,30 @@ export const ReactSlate = forwardRef((props, ref) => {
         }
         lastExpandedSelectionRef.current = null;
         pendingClickRangeRef.current = slateRangeFromPoint(event.clientX, event.clientY);
-    }, [slateRangeFromPoint]);
+        const clickedRange = pendingClickRangeRef.current;
+        const domSelection = window.getSelection();
+        if (event.button === 0 &&
+            !event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey &&
+            clickedRange &&
+            domSelection &&
+            !domSelection.isCollapsed) {
+            const selectedRange = ReactEditor.toSlateRange(editor, domSelection, {
+                exactMatch: false,
+                suppressThrow: true,
+            });
+            if (selectedRange &&
+                Range.includes(selectedRange, clickedRange.anchor)) {
+                pendingSelectionCollapseRef.current = {
+                    range: clickedRange,
+                    x: event.clientX,
+                    y: event.clientY,
+                };
+            }
+        }
+    }, [editor, slateRangeFromPoint]);
     const selectPendingClickRangeIfStaleCollapsed = useCallback(() => {
         const clickedRange = pendingClickRangeRef.current;
         const currentSelection = editor.selection;
@@ -383,60 +530,6 @@ export const ReactSlate = forwardRef((props, ref) => {
             return false;
         }
     }, [editor]);
-    // Re-focus the editor after the toolbar mounts and put the caret back where
-    // the user clicked. If Slate kept a selection (e.g. a drag-select), trust it
-    // and leave it alone; only fall back to the captured click point - or the end
-    // of the content - when the selection was lost.
-    const restoreClickedCaret = useCallback(() => {
-        if (selectPendingClickRangeIfStaleCollapsed()) {
-            return;
-        }
-        // An expanded DOM selection (double-click word selection, drag-select)
-        // is newer than Slate's internal state — don't replace it with a caret.
-        const domSelection = window.getSelection();
-        if (domSelection && !domSelection.isCollapsed) {
-            return;
-        }
-        if (editor.selection) {
-            try {
-                ReactEditor.focus(editor);
-            }
-            catch {
-                // Silently fail if editor is not ready
-            }
-            return;
-        }
-        const clickedRange = pendingClickRangeRef.current;
-        pendingClickRangeRef.current = null;
-        try {
-            ReactEditor.focus(editor);
-            if (clickedRange) {
-                Transforms.select(editor, clickedRange);
-            }
-            else if (editor.children.length > 0) {
-                Transforms.select(editor, Editor.end(editor, []));
-            }
-        }
-        catch {
-            // Silently fail - focus is set, Slate will place the caret on keystroke
-        }
-    }, [editor, selectPendingClickRangeIfStaleCollapsed]);
-    // Restore focus after toolbar appears (only when user-initiated via pendingFocusRestoreRef)
-    useEffect(() => {
-        const wasShowingControls = previousShowControlsRef.current;
-        previousShowControlsRef.current = showControls;
-        // If showControls just became true and we have a pending focus restore
-        if (showControls &&
-            !wasShowingControls &&
-            pendingFocusRestoreRef.current) {
-            pendingFocusRestoreRef.current = false;
-            // Use a short timeout to let the toolbar render complete
-            const timeoutId = setTimeout(() => {
-                restoreClickedCaret();
-            }, 50);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [showControls, editor, restoreClickedCaret]);
     // Update editor when value changes from outside
     useEffect(() => {
         // Skip if this is an internal change (from our own onChange)
@@ -460,6 +553,8 @@ export const ReactSlate = forwardRef((props, ref) => {
             editor.children = newChildren;
             // Normalize the editor to ensure consistency
             Editor.normalize(editor, { force: true });
+            lastSpellChildrenRef.current = editor.children;
+            setSpellText(buildSpellCheckText(editor.children).text);
             // Restore selection if it was valid, otherwise set to end
             if (currentSelection &&
                 Editor.hasPath(editor, currentSelection.anchor.path)) {
@@ -485,6 +580,12 @@ export const ReactSlate = forwardRef((props, ref) => {
     }, [editor, slateValue, value]);
     // Handle value changes with proper Slate patterns
     const handleChange = useCallback((newValue) => {
+        // Slate calls onChange for selection changes too; only rebuild the
+        // spell text when the content actually changed.
+        if (newValue !== lastSpellChildrenRef.current) {
+            lastSpellChildrenRef.current = newValue;
+            setSpellText(buildSpellCheckText(newValue).text);
+        }
         // If this change was caused by applying an external `value` prop (and normalization),
         // do not echo it back to the parent.
         if (isApplyingExternalValueRef.current) {
@@ -539,7 +640,9 @@ export const ReactSlate = forwardRef((props, ref) => {
             const domRange = domSelection.getRangeAt(0);
             if (!editableEl.contains(domRange.commonAncestorContainer))
                 return null;
-            const slateRange = ReactEditor.toSlateRange(editor, domRange, {
+            // A DOM Range is always ordered start-to-end. Pass the Selection so
+            // backwards drags retain their anchor/focus when extended by keyboard.
+            const slateRange = ReactEditor.toSlateRange(editor, domSelection, {
                 exactMatch: false,
                 suppressThrow: true,
             });
@@ -603,7 +706,9 @@ export const ReactSlate = forwardRef((props, ref) => {
     // Memoize option handlers to prevent creating new functions on every render
     const optionHandlers = useMemo(() => {
         const handlers = {};
-        const handleOptionSelect = (option) => (editor, event) => {
+        // Shared toolbar click handling: restore the selection, run the command,
+        // remember an expanded selection for the next toolbar click.
+        const runToolbarCommand = (editor, event, command) => {
             event.preventDefault();
             // A toolbar click is an explicit user edit. It can arrive immediately
             // after a new value is synchronized into Slate, before the deferred
@@ -616,9 +721,21 @@ export const ReactSlate = forwardRef((props, ref) => {
             if (!editor.selection && editor.children.length > 0) {
                 Transforms.select(editor, Editor.end(editor, []));
             }
+            if (command() === false) {
+                return;
+            }
+            if (editor.selection && !Range.isCollapsed(editor.selection)) {
+                lastExpandedSelectionRef.current = {
+                    anchor: { ...editor.selection.anchor },
+                    focus: { ...editor.selection.focus },
+                };
+            }
+        };
+        // Returns false when the option cannot run on the current selection
+        const applyOption = (editor, option) => {
             if (option.type === "link" &&
                 (!editor.selection || Range.isCollapsed(editor.selection))) {
-                return;
+                return false;
             }
             switch (option.type) {
                 case "mark":
@@ -643,16 +760,16 @@ export const ReactSlate = forwardRef((props, ref) => {
                         editor.insertHorizontalRule();
                     }
                     break;
+                case "class":
+                    // Applied through the per-class handlers below
+                    break;
                 default:
                     console.warn(`Unhandled option type: ${option.type}`);
             }
-            if (editor.selection && !Range.isCollapsed(editor.selection)) {
-                lastExpandedSelectionRef.current = {
-                    anchor: { ...editor.selection.anchor },
-                    focus: { ...editor.selection.focus },
-                };
-            }
         };
+        const handleOptionSelect = (option) => (editor, event) => runToolbarCommand(editor, event, () => applyOption(editor, option));
+        // Classes from the profile's Classes folder (ApplyClass dropdown)
+        const handleCssClassSelect = (cssClass) => (editor, event) => runToolbarCommand(editor, event, () => editor.applyCssClass(cssClass, editorProfile.classes ?? []));
         // Pre-create handlers for all possible options
         editorProfile.toolbar.groups.forEach((group) => {
             group.options.forEach((option) => {
@@ -660,10 +777,16 @@ export const ReactSlate = forwardRef((props, ref) => {
                 handlers[key] = handleOptionSelect(option);
             });
         });
+        handlers[CSS_CLASS_NONE_KEY] = handleCssClassSelect(null);
+        (editorProfile.classes ?? []).forEach((cssClass, index) => {
+            handlers[`${CSS_CLASS_KEY_PREFIX}${index}`] =
+                handleCssClassSelect(cssClass);
+        });
         return handlers;
     }, [
         editor,
         editorProfile.toolbar.groups,
+        editorProfile.classes,
         handleLinkButtonClick,
         restoreLastExpandedSelection,
         syncDomSelectionToEditor,
@@ -694,7 +817,7 @@ export const ReactSlate = forwardRef((props, ref) => {
                 const blockConfig = SLATE_BLOCKS[option.id];
                 return {
                     id: option.id,
-                    label: blockConfig.label,
+                    label: option.label || blockConfig.label,
                     icon: blockConfig.icon,
                     isActive: (editor) => editor.isBlockActive(option.id),
                     toggle: optionHandlers[handlerKey],
@@ -798,76 +921,102 @@ export const ReactSlate = forwardRef((props, ref) => {
         }
         return subGroups;
     }, []);
-    // Memoize toolbar group rendering
+    // "Style" dropdown: "No style" plus the profile's Classes folder entries
+    const cssClassDropdownOptions = useMemo(() => {
+        const classes = editorProfile.classes ?? [];
+        const noneHandler = optionHandlers[CSS_CLASS_NONE_KEY];
+        if (classes.length === 0 || !noneHandler)
+            return [];
+        const options = [
+            {
+                value: null,
+                label: "No style",
+                isActive: (editor) => !editor.getActiveCssClass(classes),
+                onSelect: noneHandler,
+            },
+        ];
+        classes.forEach((cssClass, index) => {
+            const handler = optionHandlers[`${CSS_CLASS_KEY_PREFIX}${index}`];
+            if (!handler)
+                return;
+            options.push({
+                value: cssClass,
+                label: cssClass.label,
+                isActive: (editor) => editor.getActiveCssClass(classes) === cssClass,
+                onSelect: handler,
+            });
+        });
+        return options;
+    }, [editorProfile.classes, optionHandlers]);
+    // Render a profile group as toolbar segments: one per run of buttons
+    // between dividers, or a single dropdown. The toolbar separates segments.
     const renderToolbarGroup = useCallback((group, index) => {
+        if (group.options.some((option) => option.type === "class")) {
+            if (cssClassDropdownOptions.length === 0)
+                return [];
+            return [
+                _jsx("div", { className: "toolbar-dropdown-container", title: "Apply CSS class", children: _jsx(MemoizedEditorDropdown, { options: cssClassDropdownOptions, editor: editor, buttonStyle: {
+                            padding: "4px 8px",
+                            margin: "0",
+                            background: "transparent",
+                            border: "none",
+                            borderRadius: "3px",
+                            cursor: "pointer",
+                        } }) }, `group-${group.id || index}`),
+            ];
+        }
         const validOptions = group.options.filter((option) => getOption(option) || option.type === "divider");
         if (validOptions.length === 0)
-            return null;
+            return [];
         // Skip rendering dropdown groups with only one option
         if (group.display === "dropdown" && validOptions.length === 1)
-            return null;
-        const groupStyle = {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            flexWrap: "wrap",
+            return [];
+        const groupKey = `group-${group.id || index}`;
+        if (group.display === "buttons") {
+            return splitOptionsByDividers(validOptions).map((subGroup, subGroupIndex) => (_jsx("div", { className: "toolbar-button-group", children: subGroup.map((option) => {
+                    const optionObj = getOption(option);
+                    const handler = buttonHandlers[`${option.type}-${option.id}`];
+                    if (!optionObj || !handler)
+                        return null;
+                    return (_jsx(ToolbarButtonWrapper, { option: option, icon: optionObj.icon, onMouseDown: handler }, `${option.type}-${option.id}`));
+                }) }, `${groupKey}-${subGroupIndex}`)));
+        }
+        const dropdownOptions = createDropdownOptions(validOptions);
+        const blockOptions = validOptions.filter((option) => option.type === "block");
+        // If there's only one block option, render it as a disabled-style button
+        if (blockOptions.length === 1) {
+            const singleOption = dropdownOptions.find((opt) => blockOptions.some((blockOpt) => blockOpt.type === "block" && getOption(blockOpt) === opt.value));
+            return [
+                _jsx("div", { className: "toolbar-dropdown-container", children: _jsx("button", { className: "toolbar-dropdown-button", disabled: true, children: group.label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [group.label, ": ", singleOption?.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : group.showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption?.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [singleOption?.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: singleOption?.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }) }, groupKey),
+            ];
+        }
+        const isActive = dropdownOptions.some((option) => option.isActive(editor));
+        const buttonStyle = {
+            padding: group.showIconsOnly ? "4px" : "4px 8px",
+            margin: "0",
+            background: isActive ? "var(--color-neutral-grey-10)" : "transparent",
+            border: "none",
+            borderRadius: "3px",
+            cursor: "pointer",
         };
-        return (_jsx("div", { style: groupStyle, children: group.display === "buttons"
-                ? (() => {
-                    const subGroups = splitOptionsByDividers(validOptions);
-                    return subGroups.map((subGroup, subGroupIndex) => (_jsx("div", { className: "toolbar-button-group", children: subGroup.map((option) => {
-                            const optionObj = getOption(option);
-                            const handler = buttonHandlers[`${option.type}-${option.id}`];
-                            if (!optionObj || !handler)
-                                return null;
-                            return (_jsx(ToolbarButtonWrapper, { option: option, icon: optionObj.icon, onMouseDown: handler }, `${option.type}-${option.id}`));
-                        }) }, `subgroup-${subGroupIndex}`)));
-                })()
-                : (() => {
-                    const dropdownOptions = createDropdownOptions(validOptions);
-                    const blockOptions = validOptions.filter((option) => option.type === "block");
-                    // If there's only one block option, render it as a disabled-style button
-                    if (blockOptions.length === 1) {
-                        const singleOption = dropdownOptions.find((opt) => blockOptions.some((blockOpt) => blockOpt.type === "block" &&
-                            getOption(blockOpt) === opt.value));
-                        return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx("button", { className: "toolbar-dropdown-button", disabled: true, children: group.label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [group.label, ": ", singleOption?.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : group.showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption?.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [singleOption?.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: singleOption?.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }) }));
-                    }
-                    // Multiple options - render normally wrapped in grey container
-                    const isActive = dropdownOptions.some((option) => option.isActive(editor));
-                    const buttonStyle = {
-                        padding: "5px 10px",
-                        margin: "0",
-                        background: isActive ? "var(--color-white)" : "transparent",
-                        border: "none",
-                        borderRadius: "3px",
-                        cursor: "pointer",
-                        boxShadow: isActive
-                            ? "0 1px 2px color-mix(in srgb, var(--color-neutral-grey-100) 10%, transparent)"
-                            : "none",
-                    };
-                    return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx(MemoizedEditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: buttonStyle }) }));
-                })() }, `group-${group.id || index}`));
+        return [
+            _jsx("div", { className: "toolbar-dropdown-container", children: _jsx(MemoizedEditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: buttonStyle, iconOnly: group.showIconsOnly }) }, groupKey),
+        ];
     }, [
         getOption,
         splitOptionsByDividers,
         createDropdownOptions,
+        cssClassDropdownOptions,
         optionHandlers,
         buttonHandlers,
         editor,
     ]);
-    // Memoize toolbar structure (expensive grouping operation)
-    const toolbarStructure = useMemo(() => {
-        // Group toolbar items by row
-        const groupsByRow = editorProfile.toolbar.groups.reduce((acc, group, index) => {
-            const row = group.row !== undefined ? group.row : index;
-            if (!acc[row])
-                acc[row] = [];
-            acc[row].push(group);
-            return acc;
-        }, {});
-        // Return sorted entries for consistent rendering
-        return Object.entries(groupsByRow).sort(([a], [b]) => parseInt(a) - parseInt(b));
-    }, [editorProfile.toolbar.groups]);
+    // Profile rows (Sitecore's toolbars) only order the groups; the toolbar
+    // itself is one line that wraps when the field is too narrow.
+    const orderedToolbarGroups = useMemo(() => editorProfile.toolbar.groups
+        .map((group, index) => ({ group, row: group.row ?? index }))
+        .sort((a, b) => a.row - b.row)
+        .map(({ group }) => group), [editorProfile.toolbar.groups]);
     const editLink = useCallback((element) => {
         const linkType = element.link?.type || "external";
         let linkData;
@@ -960,43 +1109,77 @@ export const ReactSlate = forwardRef((props, ref) => {
         }
         baseKeyboardHandler(event);
     }, [baseKeyboardHandler, handleLinkButtonClick]);
-    // Handle focus - restore focus if toolbar just appeared and stole it
     const handleFocus = useCallback(() => {
-        // If controls are not showing yet, mark that we need to restore focus after they appear
-        if (!showControls && !readOnly) {
-            pendingFocusRestoreRef.current = true;
-        }
-        else if (showControls && !readOnly) {
-            // Controls are already showing - user clicked but toolbar render may have stolen focus
-            // Use setTimeout to allow editor to fully initialize after re-render
-            setTimeout(() => {
-                restoreClickedCaret();
-            }, 100);
-        }
         selectPendingClickRangeIfStaleCollapsed();
-        // Call the original onFocus handler
         onFocus?.();
-    }, [
-        showControls,
-        readOnly,
-        onFocus,
-        restoreClickedCaret,
-        selectPendingClickRangeIfStaleCollapsed,
-    ]);
+    }, [onFocus, selectPendingClickRangeIfStaleCollapsed]);
     // Handle blur
     const handleBlur = useCallback(() => {
         onBlur?.();
     }, [onBlur]);
-    const handleMouseUp = useCallback(() => {
-        syncDomSelectionToEditor();
+    const handleMouseUp = useCallback((event) => {
+        const nativeRange = syncDomSelectionToEditor();
         onMouseUp?.();
-    }, [onMouseUp, syncDomSelectionToEditor]);
+        const drag = pendingCharacterDragRef.current;
+        pendingCharacterDragRef.current = null;
+        if (drag?.moved && nativeRange) {
+            // Slate's throttled selection update can render between the final
+            // mousemove and mouseup, restoring the penultimate native endpoint.
+            // At gesture end the pointer is authoritative for character drags;
+            // keep the native anchor (including backwards drags) and commit its
+            // final focus after the parent's selection publication.
+            const endpoint = slateRangeFromPoint(event.clientX, event.clientY);
+            if (endpoint) {
+                const finalRange = {
+                    anchor: nativeRange.anchor,
+                    focus: endpoint.focus,
+                };
+                Transforms.select(editor, finalRange);
+                pendingClickRangeRef.current = null;
+                lastExpandedSelectionRef.current = Range.isCollapsed(finalRange)
+                    ? null
+                    : finalRange;
+            }
+        }
+    }, [editor, onMouseUp, slateRangeFromPoint, syncDomSelectionToEditor]);
+    const handleMouseMove = useCallback((event) => {
+        const drag = pendingCharacterDragRef.current;
+        if (drag && (event.clientX !== drag.x || event.clientY !== drag.y)) {
+            drag.moved = true;
+        }
+        const collapse = pendingSelectionCollapseRef.current;
+        if (collapse &&
+            (event.clientX !== collapse.x || event.clientY !== collapse.y)) {
+            pendingSelectionCollapseRef.current = null;
+        }
+    }, []);
+    const handleClick = useCallback((event) => {
+        const collapse = pendingSelectionCollapseRef.current;
+        pendingSelectionCollapseRef.current = null;
+        // Chromium collapses a click inside highlighted text after mouseup.
+        // A render caused by mouseup/focus can restore Slate's expanded range
+        // before its throttled selection listener sees that native collapse.
+        // Commit the captured point at click, after the gesture is complete.
+        // Movement and multi-clicks retain their native expanded selection.
+        if (collapse &&
+            event.detail === 1 &&
+            event.clientX === collapse.x &&
+            event.clientY === collapse.y) {
+            Transforms.select(editor, collapse.range);
+            pendingClickRangeRef.current = null;
+            lastExpandedSelectionRef.current = null;
+        }
+    }, [editor]);
     const handleDoubleClick = useCallback(() => {
         syncDomSelectionToEditor();
     }, [syncDomSelectionToEditor]);
     const handleKeyUp = useCallback(() => {
+        // The parent publishes the range synchronously and may re-render us.
+        // Commit native Shift+Arrow changes before that render can restore the
+        // previous Slate selection over the new DOM selection.
+        syncDomSelectionToEditor();
         onKeyUp?.();
-    }, [onKeyUp]);
+    }, [onKeyUp, syncDomSelectionToEditor]);
     // Calculate proper list numbering for ordered lists
     const calculateListNumbers = useCallback((elements) => {
         const numberMap = new Map();
@@ -1043,6 +1226,11 @@ export const ReactSlate = forwardRef((props, ref) => {
         const style = {
             textAlign: element.align || "left",
         };
+        // Content classes are styled by the site frontend; in the editor they
+        // are only marked (applying them could clash with editor classes).
+        const classAttributes = element.className
+            ? { "data-rte-class": element.className, title: element.className }
+            : {};
         if (element.type === "link") {
             const isInternal = element.link?.type === "internal";
             const url = isInternal
@@ -1066,7 +1254,7 @@ export const ReactSlate = forwardRef((props, ref) => {
             // Find the element's index in the editor children to get the correct number
             const elementIndex = editor.children.findIndex((child) => child === element);
             const listNumber = listNumbers.get(`${elementIndex}`) || "";
-            return (_jsxs("div", { ...attributes, style: listStyle, className: `slate-list-item slate-list-${listType}`, "data-indent": indent, "data-list-number": listNumber, children: [_jsx("span", { className: "slate-list-bullet" }), _jsx("div", { className: "slate-list-content", children: children })] }));
+            return (_jsxs("div", { ...attributes, style: listStyle, className: `slate-list-item slate-list-${listType}`, ...classAttributes, "data-indent": indent, "data-list-number": listNumber, children: [_jsx("span", { className: "slate-list-bullet" }), _jsx("div", { className: "slate-list-content", children: children })] }));
         }
         if (element.type === "horizontal-rule") {
             return (_jsxs("div", { ...attributes, contentEditable: false, style: { ...style, userSelect: "none" }, children: [children, _jsx("hr", { style: {
@@ -1091,15 +1279,17 @@ export const ReactSlate = forwardRef((props, ref) => {
         // For standard blocks, use the appropriate HTML tag
         if (blockConfig) {
             const tagName = blockConfig.htmlTag;
-            return React.createElement(tagName, { ...attributes, style }, children);
+            return React.createElement(tagName, { ...attributes, ...classAttributes, style }, children);
         }
         // Default fallback to paragraph
-        return (_jsx("p", { ...attributes, style: style, children: children }));
+        return (_jsx("p", { ...attributes, ...classAttributes, style: style, children: children }));
     }, [readOnly, editLink, editor.children, listNumbers]);
     // Memoize renderLeaf to prevent unnecessary re-renders as per Slate performance docs
     const renderLeaf = useCallback(({ attributes, children, leaf }) => {
         const changed = !!leaf[CHANGED_TEXT_LEAF];
-        let el = (_jsx("span", { ...attributes, className: changed ? agentAddedTextClass : undefined, "data-changed-text": changed ? "true" : undefined, children: children }));
+        const misspelled = !!leaf[MISSPELLED_LEAF];
+        let el = (_jsx("span", { ...attributes, className: cn(changed && agentAddedTextClass, misspelled && misspelledTextClass) ||
+                undefined, "data-changed-text": changed ? "true" : undefined, "data-misspelled": misspelled ? "true" : undefined, "data-rte-class": leaf.className || undefined, title: leaf.className || undefined, children: children }));
         // Apply marks using the built-in SLATE_MARKS configuration
         // Iterate over all possible marks to preserve existing formatting
         Object.keys(SLATE_MARKS).forEach((markId) => {
@@ -1122,11 +1312,20 @@ export const ReactSlate = forwardRef((props, ref) => {
     }, []);
     // Memoize renderPlaceholder for consistency
     const renderPlaceholder = useCallback(({ attributes, children }) => (_jsx("span", { ...attributes, className: "text-neutral-grey-50 p-2", children: children })), []);
-    return (_jsxs("div", { className: `slate-editor ${props.className && props.className}`, children: [_jsxs(Slate, { editor: editor, initialValue: initialSlateValue, onChange: handleChange, children: [!readOnly && showControls && (_jsx("div", { className: "rte-toolbar-reveal", children: _jsxs("div", { className: "rte-toolbar flex flex-col gap-2 pb-4", children: [toolbarStructure.map(([rowIndex, rowGroups], mapIndex) => (_jsxs("div", { className: "toolbar-row", "data-testid": `rte-toolbar-row-${rowGroups[0]?.options?.[0]?.id || "unknown"}`, children: [rowGroups.map((group) => renderToolbarGroup(group, parseInt(rowIndex))), mapIndex === toolbarStructure.length - 1 && (_jsx("div", { className: "toolbar-button-group", children: _jsx(ToolbarButton, { icon: getRichTextStripFormattingIcon(), active: false, onMouseDown: handleStripFormattingClick, type: "strip-formatting" }) }))] }, `row-${rowIndex}`))), toolbarStructure.length === 0 && (_jsx("div", { className: "toolbar-row", children: _jsx("div", { className: "toolbar-button-group", children: _jsx(ToolbarButton, { icon: getRichTextStripFormattingIcon(), active: false, onMouseDown: handleStripFormattingClick, type: "strip-formatting" }) }) }))] }) })), _jsxs("div", { className: "relative", children: [_jsx(Editable, { "aria-label": props.ariaLabel || "Rich text", "data-testid": "rte-editable", className: cn("border-border-default min-h-7 rounded-[4px] border p-1.5", "focus:border-neutral-grey-100", readOnly ? "bg-neutral-grey-5" : "bg-neutral-grey-5", "focus-shadow", "slate-editable", 
-                                // MainLayout disables text selection app-wide (select-none);
-                                // contenteditable content must re-enable it for mouse selection
-                                // (double-click word select, drag select) to work.
-                                "select-text"), decorate: decorate, readOnly: readOnly, renderPlaceholder: renderPlaceholder, onFocus: handleFocus, onBlur: handleBlur, onBeforeInputCapture: markUserInput, onInputCapture: markUserInput, onPasteCapture: markUserInput, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onDoubleClick: handleDoubleClick, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, onKeyDown: handleKeyDown, renderElement: renderElement, renderLeaf: renderLeaf }), _jsx(ChangedTextOutline, { getChangeHighlight: getChangeHighlight })] })] }), showLinkDialog && selectedLink && (_jsx(LinkEditorDialog, { linkValue: selectedLink, onOk: handleLinkUpdate, onCancel: () => {
+    const toolbarSegments = [
+        ...orderedToolbarGroups.flatMap((group, index) => renderToolbarGroup(group, index)),
+        _jsx("div", { className: "toolbar-button-group", children: _jsx(ToolbarButton, { icon: getRichTextStripFormattingIcon(), active: false, onMouseDown: handleStripFormattingClick, type: "strip-formatting" }) }, "strip-formatting"),
+    ];
+    return (_jsxs("div", { className: `slate-editor ${props.className && props.className}`, children: [_jsx(Slate, { editor: editor, initialValue: initialSlateValue, onChange: handleChange, children: _jsxs("div", { className: cn("relative", fieldBoxClassName, fieldFocusWithinClassName, "focus-shadow"), children: [!readOnly && (_jsx("div", { role: "toolbar", "aria-label": "Formatting", "data-testid": "rte-toolbar", className: "rte-toolbar border-neutral-grey-15 bg-neutral-grey-5 flex flex-wrap items-center gap-1 rounded-t-[5px] border-b p-1", children: toolbarSegments.map((segment, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "toolbar-separator" })), segment] }, segment.key))) })), _jsx(Editable, { "aria-label": props.ariaLabel || "Rich text", "data-testid": "rte-editable", className: cn("min-h-10 px-3 py-2.5 focus:outline-none", "slate-editable", 
+                            // MainLayout disables text selection app-wide (select-none);
+                            // contenteditable content must re-enable it for mouse selection
+                            // (double-click word select, drag select) to work.
+                            "select-text"), decorate: decorate, readOnly: readOnly, spellCheck: false, renderPlaceholder: renderPlaceholder, onFocus: handleFocus, onBlur: handleBlur, onBeforeInputCapture: markUserInput, onInputCapture: markUserInput, onPasteCapture: markUserInput, onMouseDown: handleMouseDown, onClick: handleClick, onMouseMove: handleMouseMove, onDragStart: () => {
+                                // Moving selected content is a native drag-and-drop operation,
+                                // not a character-selection gesture.
+                                pendingCharacterDragRef.current = null;
+                                pendingSelectionCollapseRef.current = null;
+                            }, onMouseUp: handleMouseUp, onDoubleClick: handleDoubleClick, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, onKeyDown: handleKeyDown, renderElement: renderElement, renderLeaf: renderLeaf }), _jsx(ChangedTextOutline, { getChangeHighlight: getChangeHighlight })] }) }), showLinkDialog && selectedLink && (_jsx(LinkEditorDialog, { linkValue: selectedLink, onOk: handleLinkUpdate, onCancel: () => {
                     setShowLinkDialog(false);
                     setSelectedLink(null);
                     setLinkDialogCallback(null);