@alpaca-editor/core 1.0.4083 → 1.0.4085

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

@@ -8,7 +8,13 @@ import React, {
   memo,
 } from "react";
 import { createEditor, Descendant, Editor, Element, Transforms } from "slate";
-import { Slate, Editable, withReact, ReactEditor, useSlateSelector } from "slate-react";
+import {
+  Slate,
+  Editable,
+  withReact,
+  ReactEditor,
+  useSlateSelector,
+} from "slate-react";
 import { withHistory } from "slate-history";
 import "./ReactSlate.css";
 
@@ -34,7 +40,9 @@ import { LinkEditorDialog } from "../../../LinkEditorDialog";
 
 import { htmlToSlate, slateToHtml } from "../utils/conversion";
 import { createPluginsFromConfig } from "../config/pluginFactory";
-import { createKeyboardHandler } from "../utils/plugins";
+import { createKeyboardHandler, generateInternalLinkUrl } from "../utils/plugins";
+import { normalizeUrl } from "../../../utils/urlUtils";
+
 import { useCachedSimplifiedProfile } from "../hooks/useProfileCache";
 import { classNames } from "primereact/utils";
 
@@ -56,7 +64,8 @@ const ToolbarButtonWrapper: React.FC<{
       case "link":
         return editor.isLinkActive();
       case "list":
-        const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+        const listType =
+          option.id === "unordered-list" ? "unordered" : "ordered";
         return editor.isListActive(listType);
       case "insertion":
         return false; // Insertion buttons are never active
@@ -66,11 +75,7 @@ const ToolbarButtonWrapper: React.FC<{
   });
 
   return (
-    <ToolbarButton
-      icon={icon}
-      active={isActive}
-      onMouseDown={onMouseDown}
-    />
+    <ToolbarButton icon={icon} active={isActive} onMouseDown={onMouseDown} />
   );
 });
 
@@ -104,6 +109,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     readOnly = false,
     placeholder = "Enter some text...",
     profile,
+    showControls,
   } = props;
 
   const editorProfile = profile || {
@@ -118,12 +124,12 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   // 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))
+      withHistory(withReact(baseEditor)),
     );
-    
+
     return enhancedEditor;
   }, []);
 
@@ -164,21 +170,24 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     // 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)) {
+      if (
+        currentSelection &&
+        Editor.hasPath(editor, currentSelection.anchor.path)
+      ) {
         try {
           Transforms.select(editor, currentSelection);
         } catch {
@@ -198,7 +207,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
       if (onChange) {
         try {
           const html = slateToHtml(newValue, simplifiedProfile);
-          
+
           // Only trigger onChange if content actually changed
           if (html !== value) {
             // Mark this as an internal change
@@ -235,19 +244,26 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     });
   }, [editor]);
 
-  const handleStripFormattingClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    editor.stripFormatting();
-  }, [editor]);
+  const handleStripFormattingClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      editor.stripFormatting();
+    },
+    [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) => 
+    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);
@@ -263,7 +279,8 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
             handleLinkButtonClick();
             break;
           case "list":
-            const listType = option.id === "unordered-list" ? "unordered" : "ordered";
+            const listType =
+              option.id === "unordered-list" ? "unordered" : "ordered";
             editor.toggleList(listType);
             break;
           case "insertion":
@@ -277,8 +294,8 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
       };
 
     // Pre-create handlers for all possible options
-    editorProfile.toolbar.groups.forEach(group => {
-      group.options.forEach(option => {
+    editorProfile.toolbar.groups.forEach((group) => {
+      group.options.forEach((option) => {
         const key = `${option.type}-${option.id}`;
         handlers[key] = handleOptionSelect(option);
       });
@@ -289,8 +306,11 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
 
   // Create button handlers that adapt the signature for toolbar buttons
   const buttonHandlers = useMemo(() => {
-    const handlers: Record<string, (event: React.MouseEvent<HTMLButtonElement>) => void> = {};
-    
+    const handlers: Record<
+      string,
+      (event: React.MouseEvent<HTMLButtonElement>) => void
+    > = {};
+
     Object.entries(optionHandlers).forEach(([key, handler]) => {
       handlers[key] = (event: React.MouseEvent<HTMLButtonElement>) => {
         handler(editor, event);
@@ -300,266 +320,288 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     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[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[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: optionHandlers[handlerKey],
-        };
-      case "list":
-        return {
-          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") {
+  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: "Horizontal Rule",
-            icon: "─",
-            isActive: () => false, // Insertion buttons are never "active"
+            label: markConfig.label,
+            icon: markConfig.icon,
+            isActive: (editor: Editor) => editor.isMarkActive(option.id),
             toggle: optionHandlers[handlerKey],
           };
-        }
-        return undefined;
-      default:
-        return undefined;
-    }
-  }, [optionHandlers]);
+        case "block":
+          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[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: optionHandlers[handlerKey],
+          };
+        case "list":
+          return {
+            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],
+  );
 
   // Memoize dropdown options creation with strict type safety
-  const createDropdownOptions = useCallback((
-    options: readonly ToolbarOptionConfig[],
-  ): DropdownOption<any>[] => {
-    return options
-      .map((option) => {
-        const optionObj = getOption(option);
-        if (!optionObj) return null;
-
-        return {
-          value: optionObj,
-          label: optionObj.label || option.id,
-          icon: optionObj.icon,
-          style: (optionObj as any).style,
-          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]);
+  const createDropdownOptions = useCallback(
+    (options: readonly ToolbarOptionConfig[]): DropdownOption<any>[] => {
+      return options
+        .map((option) => {
+          const optionObj = getOption(option);
+          if (!optionObj) return null;
+
+          return {
+            value: optionObj,
+            label: optionObj.label || option.id,
+            icon: optionObj.icon,
+            style: (optionObj as any).style,
+            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 = useCallback((
-    options: ToolbarOptionConfig[],
-  ): ToolbarOptionConfig[][] => {
-    const subGroups: ToolbarOptionConfig[][] = [];
-    let currentGroup: ToolbarOptionConfig[] = [];
-
-    options.forEach((option) => {
-      if (option.type === "divider") {
-        if (currentGroup.length > 0) {
-          subGroups.push(currentGroup);
-          currentGroup = [];
+  const splitOptionsByDividers = useCallback(
+    (options: ToolbarOptionConfig[]): ToolbarOptionConfig[][] => {
+      const subGroups: ToolbarOptionConfig[][] = [];
+      let currentGroup: ToolbarOptionConfig[] = [];
+
+      options.forEach((option) => {
+        if (option.type === "divider") {
+          if (currentGroup.length > 0) {
+            subGroups.push(currentGroup);
+            currentGroup = [];
+          }
+        } else {
+          currentGroup.push(option);
         }
-      } else {
-        currentGroup.push(option);
-      }
-    });
+      });
 
-    // Add the last group if it has options
-    if (currentGroup.length > 0) {
-      subGroups.push(currentGroup);
-    }
+      // Add the last group if it has options
+      if (currentGroup.length > 0) {
+        subGroups.push(currentGroup);
+      }
 
-    return subGroups;
-  }, []);
+      return subGroups;
+    },
+    [],
+  );
 
   // Memoize toolbar group rendering
-  const renderToolbarGroup = useCallback((group: ToolbarGroupConfig, index: number) => {
-    const validOptions = group.options.filter(
-      (option) =>
-        getOption(option) || option.type === "divider",
-    );
+  const renderToolbarGroup = useCallback(
+    (group: ToolbarGroupConfig, index: number) => {
+      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: React.CSSProperties = {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      flexWrap: "wrap",
-    };
-
-    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) => {
-                    const optionObj = getOption(option);
-                    const handler = buttonHandlers[`${option.type}-${option.id}`];
-                    if (!optionObj || !handler) return null;
-
-                    return (
-                      <ToolbarButtonWrapper
-                        key={`${option.type}-${option.id}`}
-                        option={option}
-                        icon={optionObj.icon}
-                        onMouseDown={handler}
-                      />
-                    );
-                  })}
-                </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) === opt.value,
-                  ),
+      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: React.CSSProperties = {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        flexWrap: "wrap",
+      };
+
+      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) => {
+                      const optionObj = getOption(option);
+                      const handler =
+                        buttonHandlers[`${option.type}-${option.id}`];
+                      if (!optionObj || !handler) return null;
+
+                      return (
+                        <ToolbarButtonWrapper
+                          key={`${option.type}-${option.id}`}
+                          option={option}
+                          icon={optionObj.icon}
+                          onMouseDown={handler}
+                        />
+                      );
+                    })}
+                  </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) === 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>
-                  </div>
+                            <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),
                 );
-              }
 
-              // Multiple options - render normally wrapped in grey container
-              const isActive = dropdownOptions.some((option) =>
-                option.isActive(editor),
-              );
-              
-              const buttonStyle = {
-                padding: "5px 10px",
-                margin: "0",
-                background: isActive ? "#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">
-                  <MemoizedEditorDropdown
-                    options={dropdownOptions}
-                    editor={editor}
-                    label={group.label}
-                    buttonStyle={buttonStyle}
-                  />
-                </div>
-              );
-            })()}
-      </div>
-    );
-  }, [getOption, splitOptionsByDividers, createDropdownOptions, optionHandlers, buttonHandlers, 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">
+                    <MemoizedEditorDropdown
+                      options={dropdownOptions}
+                      editor={editor}
+                      label={group.label}
+                      buttonStyle={buttonStyle}
+                    />
+                  </div>
+                );
+              })()}
+        </div>
+      );
+    },
+    [
+      getOption,
+      splitOptionsByDividers,
+      createDropdownOptions,
+      optionHandlers,
+      buttonHandlers,
+      editor,
+    ],
+  );
 
   // Memoize toolbar structure (expensive grouping operation)
   const toolbarStructure = useMemo(() => {
@@ -575,8 +617,9 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
     );
 
     // Return sorted entries for consistent rendering
-    return Object.entries(groupsByRow)
-      .sort(([a], [b]) => parseInt(a) - parseInt(b));
+    return Object.entries(groupsByRow).sort(
+      ([a], [b]) => parseInt(a) - parseInt(b),
+    );
   }, [editorProfile.toolbar.groups]);
 
   const editLink = useCallback((element: any) => {
@@ -634,11 +677,12 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
               },
             };
           } else {
+            const normalizedUrl = normalizeUrl(link.url || "");
             newProperties = {
-              url: link.url,
+              url: normalizedUrl,
               link: {
                 type: "external",
-                url: link.url,
+                url: normalizedUrl,
                 target: link.target,
                 queryString: link.queryString,
               },
@@ -664,51 +708,59 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   );
 
   // Use the keyboard handler from plugins
-  const handleKeyDown = useMemo(() => createKeyboardHandler(editor, simplifiedProfile), [editor, simplifiedProfile]);
+  const handleKeyDown = useMemo(
+    () => createKeyboardHandler(editor, simplifiedProfile),
+    [editor, simplifiedProfile],
+  );
 
   // Calculate proper list numbering for ordered lists
-  const calculateListNumbers = useCallback((elements: Descendant[]): Map<string, string> => {
-    const numberMap = new Map<string, string>();
-    const counters: number[] = [0, 0, 0, 0, 0, 0]; // Support up to 6 levels
-    let wasInList = false; // Track if previous element was a list item
-    
-    elements.forEach((element, index) => {
-      if (Element.isElement(element) && 
-          element.type === 'list-item' && 
-          (element as any).listType === 'ordered') {
-        const indent = ((element as any).indent || 0);
-        
-        // Ensure indent is within bounds
-        if (indent < 0 || indent >= counters.length) return;
-        
-        // If we weren't in a list before, this is a new list - reset all counters
-        if (!wasInList) {
-          for (let i = 0; i < counters.length; i++) {
+  const calculateListNumbers = useCallback(
+    (elements: Descendant[]): Map<string, string> => {
+      const numberMap = new Map<string, string>();
+      const counters: number[] = [0, 0, 0, 0, 0, 0]; // Support up to 6 levels
+      let wasInList = false; // Track if previous element was a list item
+
+      elements.forEach((element, index) => {
+        if (
+          Element.isElement(element) &&
+          element.type === "list-item" &&
+          (element as any).listType === "ordered"
+        ) {
+          const indent = (element as any).indent || 0;
+
+          // Ensure indent is within bounds
+          if (indent < 0 || indent >= counters.length) return;
+
+          // If we weren't in a list before, this is a new list - reset all counters
+          if (!wasInList) {
+            for (let i = 0; i < counters.length; i++) {
+              counters[i] = 0;
+            }
+          }
+
+          // Increment counter for current level
+          counters[indent] = (counters[indent] || 0) + 1;
+
+          // Reset all deeper level counters
+          for (let i = indent + 1; i < counters.length; i++) {
             counters[i] = 0;
           }
+
+          // Build number string for current level only (e.g., "3.")
+          const numberString = counters[indent] + ".";
+          numberMap.set(`${index}`, numberString);
+
+          wasInList = true;
+        } else {
+          // Not a list item, so we're no longer in a list
+          wasInList = false;
         }
-        
-        // Increment counter for current level
-        counters[indent] = (counters[indent] || 0) + 1;
-        
-        // Reset all deeper level counters
-        for (let i = indent + 1; i < counters.length; i++) {
-          counters[i] = 0;
-        }
-        
-        // Build number string for current level only (e.g., "3.")
-        const numberString = counters[indent] + '.';
-        numberMap.set(`${index}`, numberString);
-        
-        wasInList = true;
-      } else {
-        // Not a list item, so we're no longer in a list
-        wasInList = false;
-      }
-    });
-    
-    return numberMap;
-  }, []);
+      });
+
+      return numberMap;
+    },
+    [],
+  );
 
   // Calculate list numbers for the entire editor content (memoized for performance)
   const listNumbers = useMemo(() => {
@@ -716,146 +768,160 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
   }, [editor.children, calculateListNumbers]);
 
   // Memoize renderElement to prevent unnecessary re-renders as per Slate performance docs
-  const renderElement = useCallback(({ attributes, children, element }: any) => {
-    const style: React.CSSProperties = {
-      textAlign: element.align || "left",
-    };
+  const renderElement = useCallback(
+    ({ attributes, children, element }: any) => {
+      const style: React.CSSProperties = {
+        textAlign: element.align || "left",
+      };
 
     if (element.type === "link") {
       const isInternal = element.link?.type === "internal";
       const url = isInternal
-        ? "#"
-        : element.url || element.link?.url || "#";
-
-      return (
-        <a
-          {...attributes}
-          href={url}
-          style={style}
-          className={`slate-link ${isInternal ? "internal-link" : "external-link"}`}
-          onClick={(e) => {
-            if (!readOnly) {
-              e.preventDefault();
-              editLink(element);
-            }
-          }}
-        >
-          {children}
-        </a>
-      );
-    }
+        ? generateInternalLinkUrl(element.link?.itemId, element.link?.targetItemLongId, element.link?.queryString)
+        : normalizeUrl(element.url || element.link?.url || "#");
+
+        return (
+          <a
+            {...attributes}
+            href={url}
+            style={style}
+            className={`slate-link ${isInternal ? "internal-link" : "external-link"}`}
+            onClick={(e) => {
+              if (!readOnly) {
+                e.preventDefault();
+                editLink(element);
+              }
+            }}
+          >
+            {children}
+          </a>
+        );
+      }
 
-    if (element.type === "list-item") {
-      const indent = element.indent || 0;
-      const listType = element.listType || "unordered";
+      if (element.type === "list-item") {
+        const indent = element.indent || 0;
+        const listType = element.listType || "unordered";
 
-      const listStyle: React.CSSProperties = {
-        ...style,
-        position: "relative",
-        listStyleType: "none",
-      };
+        const listStyle: React.CSSProperties = {
+          ...style,
+          position: "relative",
+          listStyleType: "none",
+        };
 
-      // Find the element's index in the editor children to get the correct number
-      const elementIndex = editor.children.findIndex((child: any) => child === element);
-      const listNumber = listNumbers.get(`${elementIndex}`) || '';
+        // Find the element's index in the editor children to get the correct number
+        const elementIndex = editor.children.findIndex(
+          (child: any) => child === element,
+        );
+        const listNumber = listNumbers.get(`${elementIndex}`) || "";
+
+        return (
+          <div
+            {...attributes}
+            style={listStyle}
+            className={`slate-list-item slate-list-${listType}`}
+            data-indent={indent}
+            data-list-number={listNumber}
+          >
+            <span className="slate-list-bullet"></span>
+            <div className="slate-list-content">{children}</div>
+          </div>
+        );
+      }
 
-      return (
-        <div
-          {...attributes}
-          style={listStyle}
-          className={`slate-list-item slate-list-${listType}`}
-          data-indent={indent}
-          data-list-number={listNumber}
-        >
-          <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" }}
+          >
+            {children}
+            <hr
+              style={{
+                border: "none",
+                borderTop: "1px solid #ccc",
+                margin: "1em 0",
+                width: "100%",
+              }}
+            />
+          </div>
+        );
+      }
 
-    if (element.type === "horizontal-rule") {
-      return (
-        <div {...attributes} contentEditable={false} style={{ ...style, userSelect: "none" }}>
-          {children}
-          <hr style={{ 
-            border: "none", 
-            borderTop: "1px solid #ccc", 
-            margin: "1em 0",
-            width: "100%"
-          }} />
-        </div>
-      );
-    }
+      if (element.type === "line-break") {
+        return (
+          <span {...attributes} contentEditable={false}>
+            {children}
+            <br />
+          </span>
+        );
+      }
 
-    if (element.type === "line-break") {
-      return (
-        <span {...attributes} contentEditable={false}>
-          {children}
-          <br />
-        </span>
-      );
-    }
+      // Handle different block types using built-in SLATE_BLOCKS configuration
+      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 (
+          <div {...attributes} style={style}>
+            {children}
+          </div>
+        );
+      }
 
-    // Handle different block types using built-in SLATE_BLOCKS configuration
-    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)
+      // For standard blocks, use the appropriate HTML tag
+      if (blockConfig) {
+        const tagName = blockConfig.htmlTag;
+        return React.createElement(tagName, { ...attributes, style }, children);
+      }
+      // Default fallback to paragraph
       return (
-        <div {...attributes} style={style}>
+        <p {...attributes} style={style}>
           {children}
-        </div>
+        </p>
       );
-    }
-
-    // For standard blocks, use the appropriate HTML tag
-    if (blockConfig) {
-      const tagName = blockConfig.htmlTag;
-      return React.createElement(
-        tagName,
-        { ...attributes, style },
-        children,
-      );
-    }
-    // Default fallback to paragraph
-    return (
-      <p {...attributes} style={style}>
-        {children}
-      </p>
-    );
-  }, [readOnly, editLink, editor.children, listNumbers]);
+    },
+    [readOnly, editLink, editor.children, listNumbers],
+  );
 
   // Memoize renderLeaf to prevent unnecessary re-renders as per Slate performance docs
-  const renderLeaf = useCallback(({ attributes, children, leaf }: any) => {
-
-    let el = <span {...attributes}>{children}</span>;
-
-    // Apply marks using the built-in SLATE_MARKS configuration
-    simplifiedProfile.marks.forEach((markId) => {
-      if ((leaf as any)[markId]) {
-        const markConfig = SLATE_MARKS[markId];
-        if (markConfig) {
-          if (markId === "extrabold") {
-            // Special handling for extrabold with CSS class
-            el = <span className="extrabold">{el}</span>;
-          } else {
-            // Standard HTML tag rendering
-            const tagName = markConfig.htmlTag;
-            el = React.createElement(tagName, {}, el);
+  const renderLeaf = useCallback(
+    ({ attributes, children, leaf }: any) => {
+      let el = <span {...attributes}>{children}</span>;
+
+      // Apply marks using the built-in SLATE_MARKS configuration
+      simplifiedProfile.marks.forEach((markId) => {
+        if ((leaf as any)[markId]) {
+          const markConfig = SLATE_MARKS[markId];
+          if (markConfig) {
+            if (markId === "extrabold") {
+              // Special handling for extrabold with CSS class
+              el = <span className="extrabold">{el}</span>;
+            } else {
+              // Standard HTML tag rendering
+              const tagName = markConfig.htmlTag;
+              el = React.createElement(tagName, {}, el);
+            }
           }
         }
-      }
-    });
+      });
 
-    return el;
-  }, [simplifiedProfile.marks]);
+      return el;
+    },
+    [simplifiedProfile.marks],
+  );
 
   // Memoize renderPlaceholder for consistency
-  const renderPlaceholder = useCallback(({ attributes, children }: any) => (
-    <span {...attributes} className="p-2 text-gray-500">
-      {children}
-    </span>
-  ), []);
+  const renderPlaceholder = useCallback(
+    ({ attributes, children }: any) => (
+      <span {...attributes} className="p-2 text-gray-500">
+        {children}
+      </span>
+    ),
+    [],
+  );
 
   return (
     <div className={`slate-editor ${props.className}`}>
@@ -864,8 +930,8 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
         initialValue={initialSlateValue}
         onChange={handleChange}
       >
-        {!readOnly && (
-          <div className="toolbar">
+        {!readOnly && showControls && (
+          <div className="mb-4 flex flex-col gap-2">
             {toolbarStructure.map(([rowIndex, rowGroups], mapIndex) => (
               <div key={`row-${rowIndex}`} className="toolbar-row">
                 {rowGroups.map((group) =>
@@ -901,7 +967,7 @@ export const ReactSlate = forwardRef<any, ReactSlateProps>((props, ref) => {
           className={classNames(
             readOnly ? "bg-gray-4" : "bg-gray-5",
             "focus-shadow p-2",
-            "slate-editable"
+            "slate-editable",
           )}
           readOnly={readOnly}
           placeholder={placeholder}