@alpaca-editor/core 1.0.4045 → 1.0.4047

package/src/editor/field-types/richtext/components/ReactSlate.tsx

@@ -5,11 +5,11 @@ import React, {
   forwardRef,
   useRef,
   useEffect,
+  memo,
 } from "react";
 import { createEditor, Descendant, 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 {
@@ -23,6 +23,9 @@ import {
   SLATE_MARKS,
   SLATE_BLOCKS,
   SLATE_ALIGNMENTS,
+  MarkId,
+  BlockId,
+  AlignmentId,
 } from "../types";
 
 import EditorDropdown from "./EditorDropdown";
@@ -31,64 +34,70 @@ 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: string): string => {
-  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 "";
+// Toolbar button component - not memoized to allow reactivity to editor state changes
+const ToolbarButtonWrapper: React.FC<{
+  option: ToolbarOptionConfig;
+  icon: React.ReactNode;
+  editor: Editor;
+  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}> = ({ 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 normalizedHtml;
+  return (
+    <ToolbarButton
+      icon={icon}
+      active={isActive}
+      onMouseDown={onMouseDown}
+    />
+  );
 };
 
-// Helper function to check if HTML conversion is stable
-const isHtmlConversionStable = (
-  originalHtml: string,
-  slateValue: Descendant[],
-  profile: SimplifiedProfile,
-): boolean => {
-  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;
-  }
-};
+// Memoized dropdown component to prevent unnecessary re-renders
+const MemoizedEditorDropdown = memo<{
+  options: DropdownOption<any>[];
+  editor: Editor;
+  label?: string;
+  buttonStyle: React.CSSProperties;
+}>(({ options, editor, label, buttonStyle }) => {
+  return (
+    <EditorDropdown
+      options={options}
+      editor={editor}
+      label={label}
+      buttonStyle={buttonStyle}
+    />
+  );
+});
+
+MemoizedEditorDropdown.displayName = "MemoizedEditorDropdown";
 
 export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   const {
@@ -101,20 +110,6 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     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: [],
@@ -124,217 +119,260 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((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<string>(value);
-  const isInitialLoadRef = useRef<boolean>(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;
+  }, []);
 
-  // Update original value when prop value changes
-  useMemo(() => {
-    if (value !== originalValueRef.current) {
-      originalValueRef.current = value;
-      isInitialLoadRef.current = true;
+  // Initial value for Slate - capture initial props at mount time
+  const initialSlateValue = useMemo(() => {
+    try {
+      return htmlToSlate(value, simplifiedProfile);
+    } catch (error) {
+      console.warn("Failed to convert initial HTML to Slate:", error);
+      return [{ type: "paragraph", children: [{ text: "" }] }];
     }
-  }, [value]);
-
-  // Convert the HTML value to Slate format
-  const [internalValue, setInternalValue] = useState<Descendant[]>(
-    htmlToSlate(value, simplifiedProfile),
-  );
+    // 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]);
 
-  // Counter to force remount when value changes externally
-  const [remountKey, setRemountKey] = useState(0);
+  // Track previous value to detect external changes
+  const previousValueRef = useRef(value);
+  const isInternalChangeRef = useRef(false);
 
-  // Update internal value when prop value changes
+  // Update editor when value changes from outside
   useEffect(() => {
-    const newValue = htmlToSlate(value, simplifiedProfile);
-    if (!isEqual(newValue, internalValue)) {
-      setInternalValue(newValue);
-      // Force remount by incrementing the key
-      setRemountKey((prev) => prev + 1);
+    // Skip if this is an internal change (from our own onChange)
+    if (isInternalChangeRef.current) {
+      isInternalChangeRef.current = false;
+      previousValueRef.current = value;
+      return;
     }
-  }, [value, simplifiedProfile]);
 
-  // Handle value changes with round-trip validation
+    // 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: Descendant[]) => {
-      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],
+    [onChange, simplifiedProfile, value],
   );
 
-  const getOption = (type: string, id: string): CustomOption | undefined => {
-    switch (type) {
-      case "mark":
-        const markConfig = SLATE_MARKS[id];
-        return markConfig
-          ? {
-              id,
-              label: markConfig.label,
-              icon: markConfig.icon,
-              isActive: (editor: Editor) => editor.isMarkActive(id),
-              toggle: (editor: Editor, event: React.MouseEvent) => {
-                event.preventDefault();
-                editor.toggleMark(id);
-              },
+  // Link dialog state
+  const [showLinkDialog, setShowLinkDialog] = useState(false);
+  const [selectedLink, setSelectedLink] = useState<any>(null);
+  const [linkDialogCallback, setLinkDialogCallback] = useState<
+    ((link: any) => void) | null
+  >(null);
+
+  const handleLinkButtonClick = useCallback(() => {
+    editor.insertLink({
+      onOpenLinkDialog: (callback: (link: any) => void) => {
+        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: Record<string, (editor: Editor, event: React.MouseEvent) => void> = {};
+    
+    const handleOptionSelect = (option: ToolbarOptionConfig) => 
+      (editor: Editor, event: React.MouseEvent) => {
+        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: Record<string, (event: React.MouseEvent<HTMLButtonElement>) => void> = {};
+    
+    Object.entries(optionHandlers).forEach(([key, handler]) => {
+      handlers[key] = (event: React.MouseEvent<HTMLButtonElement>) => {
+        handler(editor, event);
+      };
+    });
+
+    return handlers;
+  }, [optionHandlers, editor]);
+
+  const getOption = useCallback((option: ToolbarOptionConfig): CustomOption | undefined => {
+    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) => 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) => editor.isBlockActive(id),
-              toggle: (editor: Editor, event: React.MouseEvent) => {
-                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) => 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) =>
-                editor.isAlignActive(alignConfig.value),
-              toggle: (editor: Editor, event: React.MouseEvent) => {
-                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) => editor.isAlignActive(alignConfig.value),
+          toggle: optionHandlers[handlerKey],
+        };
       case "link":
         return {
           id: "link",
           label: "Link",
           icon: "🔗",
           isActive: (editor: Editor) => editor.isLinkActive(),
-          toggle: (editor: Editor, event: React.MouseEvent) => {
-            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) =>
-            editor.isListActive(
-              id === "unordered-list" ? "unordered" : "ordered",
-            ),
-          toggle: (editor: Editor, event: React.MouseEvent) => {
-            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) => 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;
     }
-  };
+  }, [optionHandlers]);
 
-  const optionHandlers = {
-    mark: {
-      isActive: (id: string) => editor.isMarkActive(id),
-      toggle: (id: string) => editor.toggleMark(id),
-    },
-    block: {
-      isActive: (id: string) => editor.isBlockActive(id),
-      toggle: (id: string) => editor.toggleBlock(id),
-    },
-    alignment: {
-      isActive: (id: string) => {
-        const alignConfig = SLATE_ALIGNMENTS[id];
-        return alignConfig ? editor.isAlignActive(alignConfig.value) : false;
-      },
-      toggle: (id: string) => {
-        const alignConfig = SLATE_ALIGNMENTS[id];
-        if (alignConfig) {
-          editor.toggleAlign(alignConfig.value);
-        }
-      },
-    },
-    link: {
-      isActive: () => editor.isLinkActive(),
-      toggle: () => handleLinkButtonClick(),
-    },
-    list: {
-      isActive: (id: string) => {
-        const listType = id === "unordered-list" ? "unordered" : "ordered";
-        return editor.isListActive(listType);
-      },
-      toggle: (id: string, event: React.MouseEvent<HTMLButtonElement>) => {
-        const listType = id === "unordered-list" ? "unordered" : "ordered";
-        editor.toggleList(listType);
-      },
-    },
-  };
-
-  const isOptionActive = (type: string, id: string): boolean => {
-    const handler = optionHandlers[type as keyof typeof optionHandlers];
-    return handler ? handler.isActive(id) : false;
-  };
-
-  const handleOptionSelect =
-    (type: string, id: string) =>
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      const handler = optionHandlers[type as keyof typeof optionHandlers];
-      if (handler) {
-        return handler.toggle(id, event);
-      }
-      console.warn(`Unhandled option type: ${type}`);
-    };
-
-  const createDropdownOptions = (
-    options: ToolbarOptionConfig[],
+  // Memoize dropdown options creation with strict type safety
+  const createDropdownOptions = useCallback((
+    options: readonly ToolbarOptionConfig[],
   ): DropdownOption<any>[] => {
     return options
       .map((option) => {
-        const optionObj = getOption(option.type, option.id);
+        const optionObj = getOption(option);
         if (!optionObj) return null;
 
         return {
@@ -342,19 +380,31 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           label: optionObj.label || option.id,
           icon: optionObj.icon,
           style: (optionObj as any).style,
-          isActive: (editor: Editor) => isOptionActive(option.type, option.id),
-          onSelect: (editor: Editor, event: React.MouseEvent) =>
-            handleOptionSelect(
-              option.type,
-              option.id,
-            )(event as React.MouseEvent<HTMLButtonElement>),
+          isActive: (editor: 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) as DropdownOption<any>[];
-  };
+  }, [getOption, optionHandlers]);
 
   // Helper function to split options by dividers into sub-groups
-  const splitOptionsByDividers = (
+  const splitOptionsByDividers = useCallback((
     options: ToolbarOptionConfig[],
   ): ToolbarOptionConfig[][] => {
     const subGroups: ToolbarOptionConfig[][] = [];
@@ -377,12 +427,13 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     }
 
     return subGroups;
-  };
+  }, []);
 
-  const renderToolbarGroup = (group: ToolbarGroupConfig, index: number) => {
+  // Memoize toolbar group rendering
+  const renderToolbarGroup = useCallback((group: ToolbarGroupConfig, index: number) => {
     const validOptions = group.options.filter(
       (option) =>
-        getOption(option.type, option.id) || option.type === "divider",
+        getOption(option) || option.type === "divider",
     );
 
     if (validOptions.length === 0) return null;
@@ -404,16 +455,18 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                   key={`subgroup-${subGroupIndex}`}
                   className="toolbar-button-group"
                 >
-                  {subGroup.map((option, optionIndex) => {
-                    const optionObj = getOption(option.type, option.id);
-                    if (!optionObj) return null;
+                  {subGroup.map((option) => {
+                    const optionObj = getOption(option);
+                    const handler = buttonHandlers[`${option.type}-${option.id}`];
+                    if (!optionObj || !handler) return null;
 
                     return (
-                      <ToolbarButton
+                      <ToolbarButtonWrapper
                         key={`${option.type}-${option.id}`}
+                        option={option}
                         icon={optionObj.icon}
-                        active={isOptionActive(option.type, option.id)}
-                        onMouseDown={handleOptionSelect(option.type, option.id)}
+                        editor={editor}
+                        onMouseDown={handler}
                       />
                     );
                   })}
@@ -432,7 +485,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                   blockOptions.some(
                     (blockOpt) =>
                       blockOpt.type === "block" &&
-                      getOption(blockOpt.type, blockOpt.id) === opt.value,
+                      getOption(blockOpt) === opt.value,
                   ),
                 );
 
@@ -477,36 +530,51 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
               const isActive = dropdownOptions.some((option) =>
                 option.isActive(editor),
               );
+              
+              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 (
                 <div className="toolbar-dropdown-container">
-                  <EditorDropdown
+                  <MemoizedEditorDropdown
                     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",
-                    }}
+                    buttonStyle={buttonStyle}
                   />
                 </div>
               );
             })()}
       </div>
     );
-  };
+  }, [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;
+      },
+      {} as Record<number, ToolbarGroupConfig[]>,
+    );
 
-  const [showLinkDialog, setShowLinkDialog] = useState(false);
-  const [selectedLink, setSelectedLink] = useState<any>(null);
-  const [linkDialogCallback, setLinkDialogCallback] = useState<
-    ((link: any) => void) | null
-  >(null);
+    // Return sorted entries for consistent rendering
+    return Object.entries(groupsByRow)
+      .sort(([a], [b]) => parseInt(a) - parseInt(b));
+  }, [editorProfile.toolbar.groups]);
 
   const editLink = useCallback((element: any) => {
     const linkType = element.link?.type || "external";
@@ -592,129 +660,25 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     [editor, linkDialogCallback],
   );
 
-  const handleLinkButtonClick = useCallback(() => {
-    editor.insertLink({
-      onOpenLinkDialog: (callback: (link: any) => void) => {
-        setSelectedLink({
-          type: "external",
-          url: "",
-          target: "_blank",
-        });
-        setShowLinkDialog(true);
-
-        setLinkDialogCallback(() => callback);
-      },
-    });
-  }, [editor]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      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],
-  );
+  // Use the keyboard handler from plugins
+  const handleKeyDown = useMemo(() => createKeyboardHandler(editor), [editor]);
 
   return (
     <div className={`slate-editor ${props.className}`}>
       <Slate
-        key={remountKey}
         editor={editor}
-        initialValue={internalValue}
+        initialValue={initialSlateValue}
         onChange={handleChange}
       >
         {!readOnly && (
           <div className="toolbar">
-            {(() => {
-              // 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;
-                },
-                {} as Record<number, typeof editorProfile.toolbar.groups>,
-              );
-
-              // Render each row
-              return Object.entries(groupsByRow)
-                .sort(([a], [b]) => parseInt(a) - parseInt(b))
-                .map(([rowIndex, rowGroups]) => (
-                  <div key={`row-${rowIndex}`} className="toolbar-row">
-                    {rowGroups.map((group) =>
-                      renderToolbarGroup(group, parseInt(rowIndex)),
-                    )}
-                  </div>
-                ));
-            })()}
+            {toolbarStructure.map(([rowIndex, rowGroups]) => (
+              <div key={`row-${rowIndex}`} className="toolbar-row">
+                {rowGroups.map((group) =>
+                  renderToolbarGroup(group, parseInt(rowIndex)),
+                )}
+              </div>
+            ))}
           </div>
         )}
         <Editable
@@ -766,46 +730,12 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
               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 as CustomElement[];
-                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: React.CSSProperties = {
                 ...style,
                 position: "relative",
                 listStyleType: "none",
               };
 
-              const bulletContent = isOrdered ? `${listNumber}.` : "";
-
               return (
                 <div
                   {...attributes}
@@ -813,20 +743,35 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                   className={`slate-list-item slate-list-${listType}`}
                   data-indent={indent}
                 >
-                  <span className="slate-list-bullet">{bulletContent}</span>
+                  <span className="slate-list-bullet"></span>
                   <div className="slate-list-content">{children}</div>
                 </div>
               );
             }
 
+            if (element.type === "horizontal-rule") {
+              return (
+                <div {...attributes} contentEditable={false} style={{ ...style, userSelect: "none" }}>
+                  <hr style={{ 
+                    border: "none", 
+                    borderTop: "1px solid #ccc", 
+                    margin: "1em 0",
+                    width: "100%"
+                  }} />
+                  {children}
+                </div>
+              );
+            }
+
             // 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 as BlockId] : undefined;
             if (blockConfig && element.type === "no-tag") {
               // Special handling for no-tag blocks (plain text without wrapper)
               return (
-                <span {...attributes} style={style}>
+                <div {...attributes} style={style}>
                   {children}
-                </span>
+                </div>
               );
             }