@alpaca-editor/core 1.0.3996 → 1.0.4000

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

@@ -1,11 +1,18 @@
-import React, { useCallback, useMemo, useState, forwardRef, useRef, useEffect } 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 { 
+import React, {
+  useCallback,
+  useMemo,
+  useState,
+  forwardRef,
+  useRef,
+  useEffect,
+} 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 {
   ReactSlateProps,
   CustomElement,
   ToolbarGroupConfig,
@@ -15,37 +22,41 @@ import {
   SimplifiedProfile,
   SLATE_MARKS,
   SLATE_BLOCKS,
-  SLATE_ALIGNMENTS
-} from '../types';
+  SLATE_ALIGNMENTS,
+} from "../types";
 
-import EditorDropdown from './EditorDropdown';
-import {ToolbarButton} from './ToolbarButton';
-import { LinkEditorDialog } from '../../../LinkEditorDialog';
+import EditorDropdown from "./EditorDropdown";
+import { ToolbarButton } from "./ToolbarButton";
+import { LinkEditorDialog } from "../../../LinkEditorDialog";
 
-import { htmlToSlate, slateToHtml } from '../utils/conversion';
-import { createPluginsFromConfig } from '../config/pluginFactory';
-import { useCachedSimplifiedProfile } from '../hooks/useProfileCache';
-import { classNames } from 'primereact/utils';
+import { htmlToSlate, slateToHtml } from "../utils/conversion";
+import { createPluginsFromConfig } from "../config/pluginFactory";
+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 '';
-  
+  if (!html) return "";
+
   // Create a temporary DOM element to normalize the HTML
-  const temp = document.createElement('div');
+  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
+    .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 '';
+  if (
+    normalizedHtml === "<p><br></p>" ||
+    normalizedHtml === "<br>" ||
+    normalizedHtml === "<p></p>"
+  ) {
+    return "";
   }
-  
+
   return normalizedHtml;
 };
 
@@ -53,72 +64,70 @@ const normalizeHtmlForComparison = (html: string): string => {
 const isHtmlConversionStable = (
   originalHtml: string,
   slateValue: Descendant[],
-  profile: SimplifiedProfile
+  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);
+    console.warn("HTML conversion stability check failed:", error);
     // If we can't check stability, assume it's not stable to be safe
     return false;
   }
 };
 
-
-
 export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
-  const { 
-    value = '', 
-    onChange, 
-    onFocus, 
-    onBlur, 
+  const {
+    value = "",
+    onChange,
+    onFocus,
+    onBlur,
     readOnly = false,
-    placeholder = 'Enter some text...',
-    profile 
+    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: []
-    }
+      groups: [],
+    },
   };
-  
+
   // 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);
-  
+
   // Update original value when prop value changes
   useMemo(() => {
     if (value !== originalValueRef.current) {
@@ -126,12 +135,12 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
       isInitialLoadRef.current = true;
     }
   }, [value]);
-  
+
   // Convert the HTML value to Slate format
   const [internalValue, setInternalValue] = useState<Descendant[]>(
-    htmlToSlate(value, simplifiedProfile)
+    htmlToSlate(value, simplifiedProfile),
   );
-  
+
   // Counter to force remount when value changes externally
   const [remountKey, setRemountKey] = useState(0);
 
@@ -141,110 +150,127 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     if (!isEqual(newValue, internalValue)) {
       setInternalValue(newValue);
       // Force remount by incrementing the key
-      setRemountKey(prev => prev + 1);
+      setRemountKey((prev) => prev + 1);
     }
   }, [value, simplifiedProfile]);
 
   // Handle value changes with round-trip validation
-  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(
+  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;
+          }
+
+          // 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,
-          newValue,
-          simplifiedProfile
         );
-        
-        if (isStable) {
-          // If stable, don't trigger onChange on initial load
-          isInitialLoadRef.current = false;
-          return;
+
+        if (normalizedNewHtml !== normalizedOriginalHtml) {
+          // Update the original value reference to the new HTML
+          originalValueRef.current = html;
+          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);
       }
-    }
-  }, [onChange, simplifiedProfile]);
+    },
+    [onChange, simplifiedProfile],
+  );
 
   const getOption = (type: string, id: string): CustomOption | undefined => {
     switch (type) {
-      case 'mark':
+      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);
-          }
-        } : undefined;
-      case 'block':
+        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);
+              },
+            }
+          : undefined;
+      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;
-      case 'alignment':
+        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;
+      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;
-      case 'link':
+        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;
+      case "link":
         return {
-          id: 'link',
-          label: 'Link',
-          icon: '🔗',
+          id: "link",
+          label: "Link",
+          icon: "🔗",
           isActive: (editor: Editor) => editor.isLinkActive(),
           toggle: (editor: Editor, event: React.MouseEvent) => {
             event.preventDefault();
             handleLinkButtonClick();
-          }
+          },
         };
-      case 'list':
+      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'),
+          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');
-          }
+            editor.toggleList(
+              id === "unordered-list" ? "unordered" : "ordered",
+            );
+          },
         };
-      case 'divider':
-        return { id: 'divider', label: 'Divider' };
+      case "divider":
+        return { id: "divider", label: "Divider" };
       default:
         return undefined;
     }
@@ -253,11 +279,11 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   const optionHandlers = {
     mark: {
       isActive: (id: string) => editor.isMarkActive(id),
-      toggle: (id: string) => editor.toggleMark(id)
+      toggle: (id: string) => editor.toggleMark(id),
     },
     block: {
       isActive: (id: string) => editor.isBlockActive(id),
-      toggle: (id: string) => editor.toggleBlock(id)
+      toggle: (id: string) => editor.toggleBlock(id),
     },
     alignment: {
       isActive: (id: string) => {
@@ -269,22 +295,22 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
         if (alignConfig) {
           editor.toggleAlign(alignConfig.value);
         }
-      }
+      },
     },
     link: {
       isActive: () => editor.isLinkActive(),
-      toggle: () => handleLinkButtonClick()
+      toggle: () => handleLinkButtonClick(),
     },
     list: {
       isActive: (id: string) => {
-        const listType = id === 'unordered-list' ? 'unordered' : 'ordered';
+        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';
+        const listType = id === "unordered-list" ? "unordered" : "ordered";
         editor.toggleList(listType);
-      }
-    }
+      },
+    },
   };
 
   const isOptionActive = (type: string, id: string): boolean => {
@@ -292,18 +318,22 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     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 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[]): DropdownOption<any>[] => {
+  const createDropdownOptions = (
+    options: ToolbarOptionConfig[],
+  ): DropdownOption<any>[] => {
     return options
-      .map(option => {
+      .map((option) => {
         const optionObj = getOption(option.type, option.id);
         if (!optionObj) return null;
 
@@ -313,20 +343,25 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           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>)
+          onSelect: (editor: Editor, event: React.MouseEvent) =>
+            handleOptionSelect(
+              option.type,
+              option.id,
+            )(event as React.MouseEvent<HTMLButtonElement>),
         };
       })
       .filter(Boolean) as DropdownOption<any>[];
   };
 
   // Helper function to split options by dividers into sub-groups
-  const splitOptionsByDividers = (options: ToolbarOptionConfig[]): ToolbarOptionConfig[][] => {
+  const splitOptionsByDividers = (
+    options: ToolbarOptionConfig[],
+  ): ToolbarOptionConfig[][] => {
     const subGroups: ToolbarOptionConfig[][] = [];
     let currentGroup: ToolbarOptionConfig[] = [];
-    
-    options.forEach(option => {
-      if (option.type === 'divider') {
+
+    options.forEach((option) => {
+      if (option.type === "divider") {
         if (currentGroup.length > 0) {
           subGroups.push(currentGroup);
           currentGroup = [];
@@ -335,319 +370,358 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
         currentGroup.push(option);
       }
     });
-    
+
     // Add the last group if it has options
     if (currentGroup.length > 0) {
       subGroups.push(currentGroup);
     }
-    
+
     return subGroups;
   };
 
   const renderToolbarGroup = (group: ToolbarGroupConfig, index: number) => {
-    const validOptions = group.options.filter(option => getOption(option.type, option.id) || option.type === 'divider');
-    
+    const validOptions = group.options.filter(
+      (option) =>
+        getOption(option.type, option.id) || option.type === "divider",
+    );
+
     if (validOptions.length === 0) return null;
 
     const groupStyle: React.CSSProperties = {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px',
-      flexWrap: 'wrap'
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      flexWrap: "wrap",
     };
 
-    return (    
+    return (
       <div key={`group-${group.id || index}`} style={groupStyle}>
-        {group.display === 'buttons' ? (
-          (() => {
-            const subGroups = splitOptionsByDividers(validOptions);
-            return subGroups.map((subGroup, subGroupIndex) => (
-              <div 
-                key={`subgroup-${subGroupIndex}`}
-                className="toolbar-button-group"
-              >
-                {subGroup.map((option, optionIndex) => {
-                  const optionObj = getOption(option.type, option.id);
-                  if (!optionObj) return null;
-
-                  return (
-                    <ToolbarButton 
-                      key={`${option.type}-${option.id}`}
-                      icon={optionObj.icon} 
-                      active={isOptionActive(option.type, option.id)} 
-                      onMouseDown={handleOptionSelect(option.type, option.id)} 
-                    />
-                  );
-                })}
-              </div>
-            ));
-          })()
-        ) : (
-          (() => {
-            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.type, blockOpt.id) === opt.value
-                )
+        {group.display === "buttons"
+          ? (() => {
+              const subGroups = splitOptionsByDividers(validOptions);
+              return subGroups.map((subGroup, subGroupIndex) => (
+                <div
+                  key={`subgroup-${subGroupIndex}`}
+                  className="toolbar-button-group"
+                >
+                  {subGroup.map((option, optionIndex) => {
+                    const optionObj = getOption(option.type, option.id);
+                    if (!optionObj) return null;
+
+                    return (
+                      <ToolbarButton
+                        key={`${option.type}-${option.id}`}
+                        icon={optionObj.icon}
+                        active={isOptionActive(option.type, option.id)}
+                        onMouseDown={handleOptionSelect(option.type, option.id)}
+                      />
+                    );
+                  })}
+                </div>
+              ));
+            })()
+          : (() => {
+              const dropdownOptions = createDropdownOptions(validOptions);
+              const blockOptions = validOptions.filter(
+                (option) => option.type === "block",
               );
-              
-              return (
-                <div className="toolbar-dropdown-container">
-                  <button
-                    className="toolbar-dropdown-button"
-                    disabled
-                  >
-                    {group.label ? (
-                      <>
-                        <span className="toolbar-dropdown-content">
-                          {group.label}: {singleOption?.label}
-                        </span>
-                        <span className="toolbar-dropdown-arrow">▼</span>
-                      </>
-                    ) : group.showIconsOnly ? (
-                      <>
-                        <span className="toolbar-dropdown-icon">
-                          {singleOption?.icon}
-                        </span>
-                        <span className="toolbar-dropdown-arrow">▼</span>
-                      </>
-                    ) : (
-                      <>
-                        <span className="toolbar-dropdown-icon">
-                          {singleOption?.icon && (
-                            <span className="toolbar-dropdown-icon">{singleOption.icon}</span>
-                          )}
+
+              // 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,
+                  ),
+                );
+
+                return (
+                  <div className="toolbar-dropdown-container">
+                    <button className="toolbar-dropdown-button" disabled>
+                      {group.label ? (
+                        <>
                           <span className="toolbar-dropdown-content">
-                            {singleOption?.label}
+                            {group.label}: {singleOption?.label}
                           </span>
-                        </span>
-                        <span className="toolbar-dropdown-arrow">▼</span>
-                      </>
-                    )}
-                  </button>
+                          <span className="toolbar-dropdown-arrow">▼</span>
+                        </>
+                      ) : group.showIconsOnly ? (
+                        <>
+                          <span className="toolbar-dropdown-icon">
+                            {singleOption?.icon}
+                          </span>
+                          <span className="toolbar-dropdown-arrow">▼</span>
+                        </>
+                      ) : (
+                        <>
+                          <span className="toolbar-dropdown-icon">
+                            {singleOption?.icon && (
+                              <span className="toolbar-dropdown-icon">
+                                {singleOption.icon}
+                              </span>
+                            )}
+                            <span className="toolbar-dropdown-content">
+                              {singleOption?.label}
+                            </span>
+                          </span>
+                          <span className="toolbar-dropdown-arrow">▼</span>
+                        </>
+                      )}
+                    </button>
+                  </div>
+                );
+              }
+
+              // Multiple options - render normally wrapped in grey container
+              const isActive = dropdownOptions.some((option) =>
+                option.isActive(editor),
+              );
+              return (
+                <div className="toolbar-dropdown-container">
+                  <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",
+                    }}
+                  />
                 </div>
               );
-            }
-            
-            // Multiple options - render normally wrapped in grey container
-            const isActive = dropdownOptions.some(option => option.isActive(editor));
-            return (
-              <div className="toolbar-dropdown-container">
-                <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'
-                  }}
-                />
-              </div>
-            );
-          })()
-        )}
+            })()}
       </div>
     );
   };
 
   const [showLinkDialog, setShowLinkDialog] = useState(false);
   const [selectedLink, setSelectedLink] = useState<any>(null);
-  const [linkDialogCallback, setLinkDialogCallback] = useState<((link: any) => void) | null>(null);
+  const [linkDialogCallback, setLinkDialogCallback] = useState<
+    ((link: any) => void) | null
+  >(null);
 
   const editLink = useCallback((element: any) => {
-    const linkType = element.link?.type || 'external';
+    const linkType = element.link?.type || "external";
     let linkData;
-    
-    if (linkType === 'internal') {
+
+    if (linkType === "internal") {
       linkData = {
-        type: 'internal',
-        itemId: element.link?.itemId || element.link?.targetItemLongId?.split("/").pop() || '',
-        targetItemLongId: element.link?.targetItemLongId || '',
-        target: element.link?.target || '',
-        queryString: element.link?.queryString || ''
+        type: "internal",
+        itemId:
+          element.link?.itemId ||
+          element.link?.targetItemLongId?.split("/").pop() ||
+          "",
+        targetItemLongId: element.link?.targetItemLongId || "",
+        target: element.link?.target || "",
+        queryString: element.link?.queryString || "",
       };
     } else {
       linkData = {
-        type: 'external',
-        url: element.url || element.link?.url || '',
-        target: element.link?.target || '_blank',
-        queryString: element.link?.queryString || ''
+        type: "external",
+        url: element.url || element.link?.url || "",
+        target: element.link?.target || "_blank",
+        queryString: element.link?.queryString || "",
       };
     }
-    
+
     setSelectedLink(linkData);
     setShowLinkDialog(true);
   }, []);
 
-  const handleLinkUpdate = useCallback((link: any) => {
-    if (linkDialogCallback) {
-      linkDialogCallback(link);
-      setLinkDialogCallback(null);
-    } else {
-      const [linkNode] = Editor.nodes(editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link'
-      });
-      
-      if (linkNode) {
-        const [node, path] = linkNode;        
-        let newProperties: Partial<CustomElement>;
-        
-        if (link.type === 'internal') {
-          newProperties = {
-            url: '',
-            link: {
-              type: 'internal',
-              targetItemLongId: link.targetItemLongId,
-              itemId: link.itemId,
-              target: link.target,
-              queryString: link.queryString
-            }
-          };
-        } else {
-          newProperties = {
-            url: link.url,
-            link: {
-              type: 'external',
+  const handleLinkUpdate = useCallback(
+    (link: any) => {
+      if (linkDialogCallback) {
+        linkDialogCallback(link);
+        setLinkDialogCallback(null);
+      } else {
+        const [linkNode] = Editor.nodes(editor, {
+          match: (n) =>
+            !Editor.isEditor(n) && Element.isElement(n) && n.type === "link",
+        });
+
+        if (linkNode) {
+          const [node, path] = linkNode;
+          let newProperties: Partial<CustomElement>;
+
+          if (link.type === "internal") {
+            newProperties = {
+              url: "",
+              link: {
+                type: "internal",
+                targetItemLongId: link.targetItemLongId,
+                itemId: link.itemId,
+                target: link.target,
+                queryString: link.queryString,
+              },
+            };
+          } else {
+            newProperties = {
               url: link.url,
-              target: link.target,
-              queryString: link.queryString
-            }
-          };
-        }
-        
-        Transforms.setNodes(editor, newProperties, { at: path });
-        
-        // Move cursor after the link
-        const after = Editor.after(editor, path);
-        if (after) {
-          Transforms.select(editor, after);
+              link: {
+                type: "external",
+                url: link.url,
+                target: link.target,
+                queryString: link.queryString,
+              },
+            };
+          }
+
+          Transforms.setNodes(editor, newProperties, { at: path });
+
+          // Move cursor after the link
+          const after = Editor.after(editor, path);
+          if (after) {
+            Transforms.select(editor, after);
+          }
+
+          ReactEditor.focus(editor);
         }
-        
-        ReactEditor.focus(editor);
       }
-    }
-    
-    setShowLinkDialog(false);
-    setSelectedLink(null);
-  }, [editor, linkDialogCallback]);
+
+      setShowLinkDialog(false);
+      setSelectedLink(null);
+    },
+    [editor, linkDialogCallback],
+  );
 
   const handleLinkButtonClick = useCallback(() => {
     editor.insertLink({
       onOpenLinkDialog: (callback: (link: any) => void) => {
-        setSelectedLink({ 
-          type: 'external',
-          url: '',
-          target: '_blank'
+        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();
+  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
-              }
-            );
+      } 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]);
+    },
+    [editor],
+  );
 
   return (
     <div className={`slate-editor ${props.className}`}>
-      <Slate 
-        key={remountKey} 
-        editor={editor} 
-        initialValue={internalValue} 
+      <Slate
+        key={remountKey}
+        editor={editor}
+        initialValue={internalValue}
         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>);
-              
+              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)))}
+                    {rowGroups.map((group) =>
+                      renderToolbarGroup(group, parseInt(rowIndex)),
+                    )}
                   </div>
                 ));
             })()}
           </div>
         )}
         <Editable
-          className={classNames(readOnly ? "bg-gray-4" : "bg-gray-5", "focus-shadow")}
+          className={classNames(
+            readOnly ? "bg-gray-4" : "bg-gray-5",
+            "focus-shadow p-2",
+          )}
           readOnly={readOnly}
           placeholder={placeholder}
           onFocus={onFocus}
@@ -655,19 +729,21 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           onKeyDown={handleKeyDown}
           renderElement={({ attributes, children, element }) => {
             const style: React.CSSProperties = {
-              textAlign: element.align || 'left',
+              textAlign: element.align || "left",
             };
-            
-            if (element.type === 'link') {              
-              const isInternal = element.link?.type === 'internal';
-              const url = isInternal ? '#' : (element.url || element.link?.url || '#');
-              
+
+            if (element.type === "link") {
+              const isInternal = element.link?.type === "internal";
+              const url = isInternal
+                ? "#"
+                : element.url || element.link?.url || "#";
+
               return (
-                <a 
-                  {...attributes} 
+                <a
+                  {...attributes}
                   href={url}
                   style={style}
-                  className={`slate-link ${isInternal ? 'internal-link' : 'external-link'}`}
+                  className={`slate-link ${isInternal ? "internal-link" : "external-link"}`}
                   onClick={(e) => {
                     if (!readOnly) {
                       e.preventDefault();
@@ -679,94 +755,104 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                 </a>
               );
             }
-            
-            if (element.type === 'list-item') {
+
+            if (element.type === "list-item") {
               const indent = element.indent || 0;
-              const listType = element.listType || 'unordered';
-              const isOrdered = listType === 'ordered';
-              
+              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);
-                
+                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) {
+                  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) {
+                  } 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',
+                position: "relative",
+                listStyleType: "none",
               };
-              
-              const bulletContent = isOrdered ? `${listNumber}.` : '';
-              
+
+              const bulletContent = isOrdered ? `${listNumber}.` : "";
+
               return (
-                <div 
-                  {...attributes} 
+                <div
+                  {...attributes}
                   style={listStyle}
                   className={`slate-list-item slate-list-${listType}`}
                   data-indent={indent}
                 >
-                  <span className="slate-list-bullet">
-                    {bulletContent}
-                  </span>
-                  <div className="slate-list-content">
-                    {children}
-                  </div>
+                  <span className="slate-list-bullet">{bulletContent}</span>
+                  <div className="slate-list-content">{children}</div>
                 </div>
               );
             }
-            
+
             // Handle different block types using built-in SLATE_BLOCKS configuration
             const blockConfig = SLATE_BLOCKS[element.type];
-            if (blockConfig && element.type === 'no-tag') {
+            if (blockConfig && element.type === "no-tag") {
               // Special handling for no-tag blocks (plain text without wrapper)
-              return <span {...attributes} style={style}>{children}</span>;
+              return (
+                <span {...attributes} style={style}>
+                  {children}
+                </span>
+              );
             }
-            
+
             // 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, style },
+                children,
+              );
             }
-            
+
             // Default fallback to paragraph
-            return <p {...attributes} style={style}>{children}</p>;
+            return (
+              <p {...attributes} style={style}>
+                {children}
+              </p>
+            );
           }}
           renderLeaf={({ attributes, children, leaf }) => {
             let el = <span {...attributes}>{children}</span>;
-            
+
             // Apply marks using the built-in SLATE_MARKS configuration
-            simplifiedProfile.marks.forEach(markId => {
+            simplifiedProfile.marks.forEach((markId) => {
               if ((leaf as any)[markId]) {
                 const markConfig = SLATE_MARKS[markId];
                 if (markConfig) {
-                  if (markId === 'extrabold') {
+                  if (markId === "extrabold") {
                     // Special handling for extrabold with CSS class
-                    el = (
-                      <span className="extrabold">
-                        {el}
-                      </span>
-                    );
+                    el = <span className="extrabold">{el}</span>;
                   } else {
                     // Standard HTML tag rendering
                     const tagName = markConfig.htmlTag;
@@ -775,12 +861,12 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
                 }
               }
             });
-            
+
             return el;
           }}
         />
       </Slate>
-      
+
       {showLinkDialog && selectedLink && (
         <LinkEditorDialog
           linkValue={selectedLink}
@@ -796,6 +882,6 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   );
 });
 
-ReactSlate.displayName = 'ReactSlate';
+ReactSlate.displayName = "ReactSlate";
 
 export default ReactSlate;