@alpaca-editor/core 1.0.4045 → 1.0.4048

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

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState, forwardRef, useRef, useEffect, } from "react";
+import React, { useCallback, useMemo, useState, forwardRef, useRef, useEffect, memo, } from "react";
 import { createEditor, Editor, Element, Transforms } from "slate";
 import { Slate, Editable, withReact, ReactEditor } from "slate-react";
 import { withHistory } from "slate-history";
-import isEqual from "lodash/isEqual";
 import "./ReactSlate.css";
 import { SLATE_MARKS, SLATE_BLOCKS, SLATE_ALIGNMENTS, } from "../types";
 import EditorDropdown from "./EditorDropdown";
@@ -11,63 +10,45 @@ import { ToolbarButton } from "./ToolbarButton";
 import { LinkEditorDialog } from "../../../LinkEditorDialog";
 import { htmlToSlate, slateToHtml } from "../utils/conversion";
 import { createPluginsFromConfig } from "../config/pluginFactory";
+import { createKeyboardHandler } from "../utils/plugins";
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
 import { classNames } from "primereact/utils";
-// Helper function to normalize HTML for comparison
-const normalizeHtmlForComparison = (html) => {
-    if (!html)
-        return "";
-    // Create a temporary DOM element to normalize the HTML
-    const temp = document.createElement("div");
-    temp.innerHTML = html;
-    // Remove extra whitespace and normalize structure
-    const normalizedHtml = temp.innerHTML
-        .replace(/\s+/g, " ") // Replace multiple spaces with single space
-        .replace(/>\s+</g, "><") // Remove spaces between tags
-        .trim();
-    // Handle common empty content patterns
-    if (normalizedHtml === "<p><br></p>" ||
-        normalizedHtml === "<br>" ||
-        normalizedHtml === "<p></p>") {
-        return "";
-    }
-    return normalizedHtml;
-};
-// Helper function to check if HTML conversion is stable
-const isHtmlConversionStable = (originalHtml, slateValue, profile) => {
-    try {
-        // Convert Slate back to HTML
-        const convertedHtml = slateToHtml(slateValue, profile);
-        // Normalize both HTML strings for comparison
-        const normalizedOriginal = normalizeHtmlForComparison(originalHtml);
-        const normalizedConverted = normalizeHtmlForComparison(convertedHtml);
-        // Debug logging (can be enabled for troubleshooting)
-        // console.log('HTML Stability Check:', {
-        //   original: normalizedOriginal,
-        //   converted: normalizedConverted,
-        //   stable: normalizedOriginal === normalizedConverted
-        // });
-        // Check if they're equivalent
-        return normalizedOriginal === normalizedConverted;
-    }
-    catch (error) {
-        console.warn("HTML conversion stability check failed:", error);
-        // If we can't check stability, assume it's not stable to be safe
-        return false;
+// Toolbar button component - not memoized to allow reactivity to editor state changes
+const ToolbarButtonWrapper = ({ option, icon, editor, onMouseDown }) => {
+    // Calculate active state on every render - this is lightweight and ensures reactivity
+    let isActive = false;
+    switch (option.type) {
+        case "mark":
+            isActive = editor.isMarkActive(option.id);
+            break;
+        case "block":
+            isActive = editor.isBlockActive(option.id);
+            break;
+        case "alignment":
+            isActive = editor.isAlignActive(SLATE_ALIGNMENTS[option.id].value);
+            break;
+        case "link":
+            isActive = editor.isLinkActive();
+            break;
+        case "list":
+            const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+            isActive = editor.isListActive(listType);
+            break;
+        case "insertion":
+            isActive = false; // Insertion buttons are never active
+            break;
+        default:
+            isActive = false;
     }
+    return (_jsx(ToolbarButton, { icon: icon, active: isActive, onMouseDown: onMouseDown }));
 };
+// 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 }));
+});
+MemoizedEditorDropdown.displayName = "MemoizedEditorDropdown";
 export const ReactSlate = forwardRef((props, ref) => {
     const { value = "", onChange, onFocus, onBlur, readOnly = false, placeholder = "Enter some text...", profile, } = props;
-    // Create the Slate editor with plugins
-    const editor = useMemo(() => {
-        // Start with base editor
-        let slateEditor = createEditor();
-        // Apply core plugins
-        slateEditor = withReact(slateEditor);
-        slateEditor = withHistory(slateEditor);
-        slateEditor = createPluginsFromConfig(slateEditor);
-        return slateEditor;
-    }, []);
     const editorProfile = profile || {
         toolbar: {
             groups: [],
@@ -75,180 +56,225 @@ export const ReactSlate = forwardRef((props, ref) => {
     };
     // Convert to simplified profile for the conversion functions (with caching)
     const simplifiedProfile = useCachedSimplifiedProfile(editorProfile);
-    // Store the original HTML value for comparison
-    const originalValueRef = useRef(value);
-    const isInitialLoadRef = useRef(true);
-    // Update original value when prop value changes
-    useMemo(() => {
-        if (value !== originalValueRef.current) {
-            originalValueRef.current = value;
-            isInitialLoadRef.current = true;
+    // Create the Slate editor with plugins - only once
+    const editor = useMemo(() => {
+        const baseEditor = createEditor();
+        // Apply plugins in correct order
+        const enhancedEditor = createPluginsFromConfig(withHistory(withReact(baseEditor)));
+        return enhancedEditor;
+    }, []);
+    // Initial value for Slate - capture initial props at mount time
+    const initialSlateValue = useMemo(() => {
+        try {
+            return htmlToSlate(value, simplifiedProfile);
         }
-    }, [value]);
-    // Convert the HTML value to Slate format
-    const [internalValue, setInternalValue] = useState(htmlToSlate(value, simplifiedProfile));
-    // Counter to force remount when value changes externally
-    const [remountKey, setRemountKey] = useState(0);
-    // Update internal value when prop value changes
-    useEffect(() => {
-        const newValue = htmlToSlate(value, simplifiedProfile);
-        if (!isEqual(newValue, internalValue)) {
-            setInternalValue(newValue);
-            // Force remount by incrementing the key
-            setRemountKey((prev) => prev + 1);
+        catch (error) {
+            console.warn("Failed to convert initial HTML to Slate:", error);
+            return [{ type: "paragraph", children: [{ text: "" }] }];
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Intentionally empty - we want initial value only
+    // Convert HTML to Slate format - memoized for performance
+    const slateValue = useMemo(() => {
+        try {
+            return htmlToSlate(value, simplifiedProfile);
+        }
+        catch (error) {
+            console.warn("Failed to convert HTML to Slate:", error);
+            return [{ type: "paragraph", children: [{ text: "" }] }];
         }
     }, [value, simplifiedProfile]);
-    // Handle value changes with round-trip validation
+    // Track previous value to detect external changes
+    const previousValueRef = useRef(value);
+    const isInternalChangeRef = useRef(false);
+    // Update editor when value changes from outside
+    useEffect(() => {
+        // Skip if this is an internal change (from our own onChange)
+        if (isInternalChangeRef.current) {
+            isInternalChangeRef.current = false;
+            previousValueRef.current = value;
+            return;
+        }
+        // Only update if value actually changed from outside
+        if (value !== previousValueRef.current) {
+            previousValueRef.current = value;
+            // Update editor children with new value
+            const newChildren = slateValue;
+            // Prevent infinite loops by temporarily removing selection
+            const currentSelection = editor.selection;
+            // Update the editor's children
+            editor.children = newChildren;
+            // Normalize the editor to ensure consistency
+            Editor.normalize(editor, { force: true });
+            // Restore selection if it was valid, otherwise set to end
+            if (currentSelection && Editor.hasPath(editor, currentSelection.anchor.path)) {
+                try {
+                    Transforms.select(editor, currentSelection);
+                }
+                catch {
+                    // If selection is invalid, move to end
+                    Transforms.select(editor, Editor.end(editor, []));
+                }
+            }
+            else {
+                // Move to end of document
+                Transforms.select(editor, Editor.end(editor, []));
+            }
+        }
+    }, [editor, slateValue, value]);
+    // Handle value changes with proper Slate patterns
     const handleChange = useCallback((newValue) => {
-        setInternalValue(newValue);
         if (onChange) {
-            const html = slateToHtml(newValue, simplifiedProfile);
-            // Check if this is the initial load or if the conversion is stable
-            if (isInitialLoadRef.current) {
-                // On initial load, check if the HTML conversion is stable
-                const isStable = isHtmlConversionStable(originalValueRef.current, newValue, simplifiedProfile);
-                if (isStable) {
-                    // If stable, don't trigger onChange on initial load
-                    isInitialLoadRef.current = false;
-                    return;
+            try {
+                const html = slateToHtml(newValue, simplifiedProfile);
+                // Only trigger onChange if content actually changed
+                if (html !== value) {
+                    // Mark this as an internal change
+                    isInternalChangeRef.current = true;
+                    onChange(html);
                 }
-                // If not stable, we still need to proceed, but mark as no longer initial load
-                isInitialLoadRef.current = false;
             }
-            // For subsequent changes, only trigger onChange if there's a meaningful difference
-            const normalizedNewHtml = normalizeHtmlForComparison(html);
-            const normalizedOriginalHtml = normalizeHtmlForComparison(originalValueRef.current);
-            if (normalizedNewHtml !== normalizedOriginalHtml) {
-                // Update the original value reference to the new HTML
-                originalValueRef.current = html;
-                onChange(html);
+            catch (error) {
+                console.warn("Failed to convert Slate to HTML:", error);
             }
         }
-    }, [onChange, simplifiedProfile]);
-    const getOption = (type, id) => {
-        switch (type) {
-            case "mark":
-                const markConfig = SLATE_MARKS[id];
-                return markConfig
-                    ? {
-                        id,
-                        label: markConfig.label,
-                        icon: markConfig.icon,
-                        isActive: (editor) => editor.isMarkActive(id),
-                        toggle: (editor, event) => {
-                            event.preventDefault();
-                            editor.toggleMark(id);
-                        },
+    }, [onChange, simplifiedProfile, value]);
+    // Link dialog state
+    const [showLinkDialog, setShowLinkDialog] = useState(false);
+    const [selectedLink, setSelectedLink] = useState(null);
+    const [linkDialogCallback, setLinkDialogCallback] = useState(null);
+    const handleLinkButtonClick = useCallback(() => {
+        editor.insertLink({
+            onOpenLinkDialog: (callback) => {
+                setSelectedLink({
+                    type: "external",
+                    url: "",
+                    target: "_blank",
+                });
+                setShowLinkDialog(true);
+                setLinkDialogCallback(() => callback);
+            },
+        });
+    }, [editor]);
+    // Memoize option handlers to prevent creating new functions on every render
+    const optionHandlers = useMemo(() => {
+        const handlers = {};
+        const handleOptionSelect = (option) => (editor, event) => {
+            event.preventDefault();
+            switch (option.type) {
+                case "mark":
+                    editor.toggleMark(option.id);
+                    break;
+                case "block":
+                    editor.toggleBlock(option.id);
+                    break;
+                case "alignment":
+                    const alignConfig = SLATE_ALIGNMENTS[option.id];
+                    editor.toggleAlign(alignConfig.value);
+                    break;
+                case "link":
+                    handleLinkButtonClick();
+                    break;
+                case "list":
+                    const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+                    editor.toggleList(listType);
+                    break;
+                case "insertion":
+                    if (option.id === "horizontal-rule") {
+                        editor.insertHorizontalRule();
                     }
-                    : undefined;
+                    break;
+                default:
+                    console.warn(`Unhandled option type: ${option.type}`);
+            }
+        };
+        // Pre-create handlers for all possible options
+        editorProfile.toolbar.groups.forEach(group => {
+            group.options.forEach(option => {
+                const key = `${option.type}-${option.id}`;
+                handlers[key] = handleOptionSelect(option);
+            });
+        });
+        return handlers;
+    }, [editor, editorProfile.toolbar.groups, handleLinkButtonClick]);
+    // Create button handlers that adapt the signature for toolbar buttons
+    const buttonHandlers = useMemo(() => {
+        const handlers = {};
+        Object.entries(optionHandlers).forEach(([key, handler]) => {
+            handlers[key] = (event) => {
+                handler(editor, event);
+            };
+        });
+        return handlers;
+    }, [optionHandlers, editor]);
+    const getOption = useCallback((option) => {
+        const handlerKey = `${option.type}-${option.id}`;
+        switch (option.type) {
+            case "mark":
+                const markConfig = SLATE_MARKS[option.id];
+                return {
+                    id: option.id,
+                    label: markConfig.label,
+                    icon: markConfig.icon,
+                    isActive: (editor) => editor.isMarkActive(option.id),
+                    toggle: optionHandlers[handlerKey],
+                };
             case "block":
-                const blockConfig = SLATE_BLOCKS[id];
-                return blockConfig
-                    ? {
-                        id,
-                        label: blockConfig.label,
-                        icon: blockConfig.icon,
-                        isActive: (editor) => editor.isBlockActive(id),
-                        toggle: (editor, event) => {
-                            event.preventDefault();
-                            editor.toggleBlock(id);
-                        },
-                    }
-                    : undefined;
+                const blockConfig = SLATE_BLOCKS[option.id];
+                return {
+                    id: option.id,
+                    label: blockConfig.label,
+                    icon: blockConfig.icon,
+                    isActive: (editor) => editor.isBlockActive(option.id),
+                    toggle: optionHandlers[handlerKey],
+                };
             case "alignment":
-                const alignConfig = SLATE_ALIGNMENTS[id];
-                return alignConfig
-                    ? {
-                        id,
-                        label: alignConfig.label,
-                        icon: alignConfig.icon,
-                        isActive: (editor) => editor.isAlignActive(alignConfig.value),
-                        toggle: (editor, event) => {
-                            event.preventDefault();
-                            editor.toggleAlign(alignConfig.value);
-                        },
-                    }
-                    : undefined;
+                const alignConfig = SLATE_ALIGNMENTS[option.id];
+                return {
+                    id: option.id,
+                    label: alignConfig.label,
+                    icon: alignConfig.icon,
+                    isActive: (editor) => editor.isAlignActive(alignConfig.value),
+                    toggle: optionHandlers[handlerKey],
+                };
             case "link":
                 return {
                     id: "link",
                     label: "Link",
                     icon: "🔗",
                     isActive: (editor) => editor.isLinkActive(),
-                    toggle: (editor, event) => {
-                        event.preventDefault();
-                        handleLinkButtonClick();
-                    },
+                    toggle: optionHandlers[handlerKey],
                 };
             case "list":
                 return {
-                    id,
-                    label: id === "unordered-list" ? "Bulleted List" : "Numbered List",
-                    icon: id === "unordered-list" ? "•" : "1.",
-                    isActive: (editor) => editor.isListActive(id === "unordered-list" ? "unordered" : "ordered"),
-                    toggle: (editor, event) => {
-                        event.preventDefault();
-                        editor.toggleList(id === "unordered-list" ? "unordered" : "ordered");
-                    },
+                    id: option.id,
+                    label: option.id === "unordered-list" ? "Bulleted List" : "Numbered List",
+                    icon: option.id === "unordered-list" ? "•" : "1.",
+                    isActive: (editor) => editor.isListActive(option.id === "unordered-list" ? "unordered" : "ordered"),
+                    toggle: optionHandlers[handlerKey],
                 };
             case "divider":
                 return { id: "divider", label: "Divider" };
+            case "insertion":
+                if (option.id === "horizontal-rule") {
+                    return {
+                        id: option.id,
+                        label: "Horizontal Rule",
+                        icon: "─",
+                        isActive: () => false, // Insertion buttons are never "active"
+                        toggle: optionHandlers[handlerKey],
+                    };
+                }
+                return undefined;
             default:
                 return undefined;
         }
-    };
-    const optionHandlers = {
-        mark: {
-            isActive: (id) => editor.isMarkActive(id),
-            toggle: (id) => editor.toggleMark(id),
-        },
-        block: {
-            isActive: (id) => editor.isBlockActive(id),
-            toggle: (id) => editor.toggleBlock(id),
-        },
-        alignment: {
-            isActive: (id) => {
-                const alignConfig = SLATE_ALIGNMENTS[id];
-                return alignConfig ? editor.isAlignActive(alignConfig.value) : false;
-            },
-            toggle: (id) => {
-                const alignConfig = SLATE_ALIGNMENTS[id];
-                if (alignConfig) {
-                    editor.toggleAlign(alignConfig.value);
-                }
-            },
-        },
-        link: {
-            isActive: () => editor.isLinkActive(),
-            toggle: () => handleLinkButtonClick(),
-        },
-        list: {
-            isActive: (id) => {
-                const listType = id === "unordered-list" ? "unordered" : "ordered";
-                return editor.isListActive(listType);
-            },
-            toggle: (id, event) => {
-                const listType = id === "unordered-list" ? "unordered" : "ordered";
-                editor.toggleList(listType);
-            },
-        },
-    };
-    const isOptionActive = (type, id) => {
-        const handler = optionHandlers[type];
-        return handler ? handler.isActive(id) : false;
-    };
-    const handleOptionSelect = (type, id) => (event) => {
-        event.preventDefault();
-        const handler = optionHandlers[type];
-        if (handler) {
-            return handler.toggle(id, event);
-        }
-        console.warn(`Unhandled option type: ${type}`);
-    };
-    const createDropdownOptions = (options) => {
+    }, [optionHandlers]);
+    // Memoize dropdown options creation with strict type safety
+    const createDropdownOptions = useCallback((options) => {
         return options
             .map((option) => {
-            const optionObj = getOption(option.type, option.id);
+            const optionObj = getOption(option);
             if (!optionObj)
                 return null;
             return {
@@ -256,14 +282,30 @@ export const ReactSlate = forwardRef((props, ref) => {
                 label: optionObj.label || option.id,
                 icon: optionObj.icon,
                 style: optionObj.style,
-                isActive: (editor) => isOptionActive(option.type, option.id),
-                onSelect: (editor, event) => handleOptionSelect(option.type, option.id)(event),
+                isActive: (editor) => {
+                    switch (option.type) {
+                        case "mark":
+                            return editor.isMarkActive(option.id);
+                        case "block":
+                            return editor.isBlockActive(option.id);
+                        case "alignment":
+                            return editor.isAlignActive(SLATE_ALIGNMENTS[option.id].value);
+                        case "link":
+                            return editor.isLinkActive();
+                        case "list":
+                            const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+                            return editor.isListActive(listType);
+                        default:
+                            return false;
+                    }
+                },
+                onSelect: optionHandlers[`${option.type}-${option.id}`],
             };
         })
             .filter(Boolean);
-    };
+    }, [getOption, optionHandlers]);
     // Helper function to split options by dividers into sub-groups
-    const splitOptionsByDividers = (options) => {
+    const splitOptionsByDividers = useCallback((options) => {
         const subGroups = [];
         let currentGroup = [];
         options.forEach((option) => {
@@ -282,11 +324,15 @@ export const ReactSlate = forwardRef((props, ref) => {
             subGroups.push(currentGroup);
         }
         return subGroups;
-    };
-    const renderToolbarGroup = (group, index) => {
-        const validOptions = group.options.filter((option) => getOption(option.type, option.id) || option.type === "divider");
+    }, []);
+    // Memoize toolbar group rendering
+    const renderToolbarGroup = useCallback((group, index) => {
+        const validOptions = group.options.filter((option) => getOption(option) || option.type === "divider");
         if (validOptions.length === 0)
             return null;
+        // Skip rendering dropdown groups with only one option
+        if (group.display === "dropdown" && validOptions.length === 1)
+            return null;
         const groupStyle = {
             display: "flex",
             alignItems: "center",
@@ -296,11 +342,12 @@ export const ReactSlate = forwardRef((props, ref) => {
         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, optionIndex) => {
-                            const optionObj = getOption(option.type, option.id);
-                            if (!optionObj)
+                    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(ToolbarButton, { icon: optionObj.icon, active: isOptionActive(option.type, option.id), onMouseDown: handleOptionSelect(option.type, option.id) }, `${option.type}-${option.id}`));
+                            return (_jsx(ToolbarButtonWrapper, { option: option, icon: optionObj.icon, editor: editor, onMouseDown: handler }, `${option.type}-${option.id}`));
                         }) }, `subgroup-${subGroupIndex}`)));
                 })()
                 : (() => {
@@ -309,27 +356,39 @@ export const ReactSlate = forwardRef((props, ref) => {
                     // 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.type, blockOpt.id) === opt.value));
+                            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));
-                    return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx(EditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: {
-                                padding: "5px 10px",
-                                margin: "0",
-                                background: isActive ? "#ffffff" : "transparent",
-                                border: "none",
-                                borderRadius: "3px",
-                                cursor: "pointer",
-                                boxShadow: isActive
-                                    ? "0 1px 2px rgba(0,0,0,0.1)"
-                                    : "none",
-                            } }) }));
+                    const buttonStyle = {
+                        padding: "5px 10px",
+                        margin: "0",
+                        background: isActive ? "#ffffff" : "transparent",
+                        border: "none",
+                        borderRadius: "3px",
+                        cursor: "pointer",
+                        boxShadow: isActive
+                            ? "0 1px 2px rgba(0,0,0,0.1)"
+                            : "none",
+                    };
+                    return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx(MemoizedEditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: buttonStyle }) }));
                 })() }, `group-${group.id || index}`));
-    };
-    const [showLinkDialog, setShowLinkDialog] = useState(false);
-    const [selectedLink, setSelectedLink] = useState(null);
-    const [linkDialogCallback, setLinkDialogCallback] = useState(null);
+    }, [getOption, splitOptionsByDividers, createDropdownOptions, 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]);
     const editLink = useCallback((element) => {
         const linkType = element.link?.type || "external";
         let linkData;
@@ -402,93 +461,9 @@ export const ReactSlate = forwardRef((props, ref) => {
         setShowLinkDialog(false);
         setSelectedLink(null);
     }, [editor, linkDialogCallback]);
-    const handleLinkButtonClick = useCallback(() => {
-        editor.insertLink({
-            onOpenLinkDialog: (callback) => {
-                setSelectedLink({
-                    type: "external",
-                    url: "",
-                    target: "_blank",
-                });
-                setShowLinkDialog(true);
-                setLinkDialogCallback(() => callback);
-            },
-        });
-    }, [editor]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Enter" && event.shiftKey) {
-            // Handle Shift+Enter for line breaks in all block types
-            event.preventDefault();
-            if (editor.selection) {
-                // Insert literal <br> text
-                editor.insertText("<br>");
-            }
-        }
-        else if (event.key === "Tab") {
-            event.preventDefault();
-            // Check if we're in a list item more explicitly
-            if (editor.selection) {
-                // Try to find the closest list item ancestor using Editor.above
-                const listItem = Editor.above(editor, {
-                    at: editor.selection,
-                    match: (n) => !Editor.isEditor(n) &&
-                        Element.isElement(n) &&
-                        n.type === "list-item",
-                });
-                if (listItem) {
-                    if (event.shiftKey) {
-                        // Shift+Tab: Outdent
-                        editor.outdentList();
-                    }
-                    else {
-                        // Tab: Indent
-                        editor.indentList();
-                    }
-                }
-            }
-        }
-        else if (event.key === "Backspace" || event.key === "Delete") {
-            // Handle empty list items
-            if (editor.selection) {
-                const listItem = Editor.above(editor, {
-                    at: editor.selection,
-                    match: (n) => !Editor.isEditor(n) &&
-                        Element.isElement(n) &&
-                        n.type === "list-item",
-                });
-                if (listItem) {
-                    const selectedText = Editor.string(editor, editor.selection);
-                    const [node, path] = listItem;
-                    const nodeText = Editor.string(editor, path);
-                    // If the list item is empty or only contains whitespace, convert to paragraph
-                    if (!nodeText.trim() ||
-                        (selectedText === nodeText && nodeText.trim())) {
-                        event.preventDefault();
-                        Transforms.setNodes(editor, { type: "paragraph", listType: undefined, indent: undefined }, {
-                            match: (n) => !Editor.isEditor(n) &&
-                                Element.isElement(n) &&
-                                n.type === "list-item",
-                            split: true,
-                        });
-                    }
-                }
-            }
-        }
-    }, [editor]);
-    return (_jsxs("div", { className: `slate-editor ${props.className}`, children: [_jsxs(Slate, { editor: editor, initialValue: internalValue, onChange: handleChange, children: [!readOnly && (_jsx("div", { className: "toolbar", children: (() => {
-                            // 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;
-                            }, {});
-                            // Render each row
-                            return Object.entries(groupsByRow)
-                                .sort(([a], [b]) => parseInt(a) - parseInt(b))
-                                .map(([rowIndex, rowGroups]) => (_jsx("div", { className: "toolbar-row", children: rowGroups.map((group) => renderToolbarGroup(group, parseInt(rowIndex))) }, `row-${rowIndex}`)));
-                        })() })), _jsx(Editable, { className: classNames(readOnly ? "bg-gray-4" : "bg-gray-5", "focus-shadow p-2"), readOnly: readOnly, placeholder: placeholder, renderPlaceholder: ({ attributes, children }) => (_jsx("span", { ...attributes, className: "p-2 text-gray-500", children: children })), onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, renderElement: ({ attributes, children, element }) => {
+    // Use the keyboard handler from plugins
+    const handleKeyDown = useMemo(() => createKeyboardHandler(editor), [editor]);
+    return (_jsxs("div", { className: `slate-editor ${props.className}`, children: [_jsxs(Slate, { editor: editor, initialValue: initialSlateValue, onChange: handleChange, children: [!readOnly && (_jsx("div", { className: "toolbar", children: toolbarStructure.map(([rowIndex, rowGroups]) => (_jsx("div", { className: "toolbar-row", children: rowGroups.map((group) => renderToolbarGroup(group, parseInt(rowIndex))) }, `row-${rowIndex}`))) })), _jsx(Editable, { className: classNames(readOnly ? "bg-gray-4" : "bg-gray-5", "focus-shadow p-2"), readOnly: readOnly, placeholder: placeholder, renderPlaceholder: ({ attributes, children }) => (_jsx("span", { ...attributes, className: "p-2 text-gray-500", children: children })), onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, renderElement: ({ attributes, children, element }) => {
                             const style = {
                                 textAlign: element.align || "left",
                             };
@@ -508,44 +483,27 @@ export const ReactSlate = forwardRef((props, ref) => {
                                 const indent = element.indent || 0;
                                 const listType = element.listType || "unordered";
                                 const isOrdered = listType === "ordered";
-                                // Calculate proper numbering for ordered lists
-                                let listNumber = 1;
-                                if (isOrdered) {
-                                    // Find the position of this item within its level
-                                    const allElements = editor.children;
-                                    const currentIndex = allElements.findIndex((el) => el === element);
-                                    // Count preceding list items at the same indent level and list type
-                                    let count = 0;
-                                    for (let i = 0; i < currentIndex; i++) {
-                                        const prevElement = allElements[i];
-                                        if (prevElement &&
-                                            prevElement.type === "list-item" &&
-                                            prevElement.listType === "ordered" &&
-                                            (prevElement.indent || 0) === indent) {
-                                            count++;
-                                        }
-                                        else if (prevElement &&
-                                            prevElement.type === "list-item" &&
-                                            (prevElement.indent || 0) < indent) {
-                                            // Reset count when we encounter a parent-level item
-                                            count = 0;
-                                        }
-                                    }
-                                    listNumber = count + 1;
-                                }
                                 const listStyle = {
                                     ...style,
                                     position: "relative",
                                     listStyleType: "none",
                                 };
-                                const bulletContent = isOrdered ? `${listNumber}.` : "";
-                                return (_jsxs("div", { ...attributes, style: listStyle, className: `slate-list-item slate-list-${listType}`, "data-indent": indent, children: [_jsx("span", { className: "slate-list-bullet", children: bulletContent }), _jsx("div", { className: "slate-list-content", children: children })] }));
+                                return (_jsxs("div", { ...attributes, style: listStyle, className: `slate-list-item slate-list-${listType}`, "data-indent": indent, 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: [_jsx("hr", { style: {
+                                                border: "none",
+                                                borderTop: "1px solid #ccc",
+                                                margin: "1em 0",
+                                                width: "100%"
+                                            } }), children] }));
                             }
                             // Handle different block types using built-in SLATE_BLOCKS configuration
-                            const blockConfig = SLATE_BLOCKS[element.type];
+                            const isValidBlockId = element.type in SLATE_BLOCKS;
+                            const blockConfig = isValidBlockId ? SLATE_BLOCKS[element.type] : undefined;
                             if (blockConfig && element.type === "no-tag") {
                                 // Special handling for no-tag blocks (plain text without wrapper)
-                                return (_jsx("span", { ...attributes, style: style, children: children }));
+                                return (_jsx("div", { ...attributes, style: style, children: children }));
                             }
                             // For standard blocks, use the appropriate HTML tag
                             if (blockConfig) {
@@ -574,7 +532,7 @@ export const ReactSlate = forwardRef((props, ref) => {
                                 }
                             });
                             return el;
-                        } })] }, remountKey), showLinkDialog && selectedLink && (_jsx(LinkEditorDialog, { linkValue: selectedLink, onOk: handleLinkUpdate, onCancel: () => {
+                        } })] }), showLinkDialog && selectedLink && (_jsx(LinkEditorDialog, { linkValue: selectedLink, onOk: handleLinkUpdate, onCancel: () => {
                     setShowLinkDialog(false);
                     setSelectedLink(null);
                     setLinkDialogCallback(null);