@alpaca-editor/core 1.0.3996 → 1.0.4000

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

@@ -1,33 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState, forwardRef, useRef, useEffect } from 'react';
-import { createEditor, Editor, Element, Transforms } from 'slate';
-import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
-import { withHistory } from 'slate-history';
-import isEqual from 'lodash/isEqual';
-import './ReactSlate.css';
-import { SLATE_MARKS, SLATE_BLOCKS, SLATE_ALIGNMENTS } from '../types';
-import EditorDropdown from './EditorDropdown';
-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 React, { useCallback, useMemo, useState, forwardRef, useRef, useEffect, } from "react";
+import { createEditor, Editor, Element, Transforms } from "slate";
+import { Slate, Editable, withReact, ReactEditor } from "slate-react";
+import { withHistory } from "slate-history";
+import isEqual from "lodash/isEqual";
+import "./ReactSlate.css";
+import { SLATE_MARKS, SLATE_BLOCKS, SLATE_ALIGNMENTS, } from "../types";
+import EditorDropdown from "./EditorDropdown";
+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";
 // Helper function to normalize HTML for comparison
 const normalizeHtmlForComparison = (html) => {
     if (!html)
-        return '';
+        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;
 };
@@ -49,13 +51,13 @@ const isHtmlConversionStable = (originalHtml, slateValue, profile) => {
         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((props, ref) => {
-    const { value = '', onChange, onFocus, onBlur, readOnly = false, placeholder = 'Enter some text...', profile } = props;
+    const { value = "", onChange, onFocus, onBlur, readOnly = false, placeholder = "Enter some text...", profile, } = props;
     // Create the Slate editor with plugins
     const editor = useMemo(() => {
         // Start with base editor
@@ -68,8 +70,8 @@ export const ReactSlate = forwardRef((props, ref) => {
     }, []);
     const editorProfile = profile || {
         toolbar: {
-            groups: []
-        }
+            groups: [],
+        },
     };
     // Convert to simplified profile for the conversion functions (with caching)
     const simplifiedProfile = useCachedSimplifiedProfile(editorProfile);
@@ -93,7 +95,7 @@ export const ReactSlate = forwardRef((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
@@ -125,66 +127,72 @@ export const ReactSlate = forwardRef((props, ref) => {
     }, [onChange, simplifiedProfile]);
     const getOption = (type, id) => {
         switch (type) {
-            case 'mark':
+            case "mark":
                 const markConfig = SLATE_MARKS[id];
-                return markConfig ? {
-                    id,
-                    label: markConfig.label,
-                    icon: markConfig.icon,
-                    isActive: (editor) => editor.isMarkActive(id),
-                    toggle: (editor, event) => {
-                        event.preventDefault();
-                        editor.toggleMark(id);
+                return markConfig
+                    ? {
+                        id,
+                        label: markConfig.label,
+                        icon: markConfig.icon,
+                        isActive: (editor) => editor.isMarkActive(id),
+                        toggle: (editor, event) => {
+                            event.preventDefault();
+                            editor.toggleMark(id);
+                        },
                     }
-                } : undefined;
-            case 'block':
+                    : undefined;
+            case "block":
                 const blockConfig = SLATE_BLOCKS[id];
-                return blockConfig ? {
-                    id,
-                    label: blockConfig.label,
-                    icon: blockConfig.icon,
-                    isActive: (editor) => editor.isBlockActive(id),
-                    toggle: (editor, event) => {
-                        event.preventDefault();
-                        editor.toggleBlock(id);
+                return blockConfig
+                    ? {
+                        id,
+                        label: blockConfig.label,
+                        icon: blockConfig.icon,
+                        isActive: (editor) => editor.isBlockActive(id),
+                        toggle: (editor, event) => {
+                            event.preventDefault();
+                            editor.toggleBlock(id);
+                        },
                     }
-                } : undefined;
-            case 'alignment':
+                    : undefined;
+            case "alignment":
                 const alignConfig = SLATE_ALIGNMENTS[id];
-                return alignConfig ? {
-                    id,
-                    label: alignConfig.label,
-                    icon: alignConfig.icon,
-                    isActive: (editor) => editor.isAlignActive(alignConfig.value),
-                    toggle: (editor, event) => {
-                        event.preventDefault();
-                        editor.toggleAlign(alignConfig.value);
+                return alignConfig
+                    ? {
+                        id,
+                        label: alignConfig.label,
+                        icon: alignConfig.icon,
+                        isActive: (editor) => editor.isAlignActive(alignConfig.value),
+                        toggle: (editor, event) => {
+                            event.preventDefault();
+                            editor.toggleAlign(alignConfig.value);
+                        },
                     }
-                } : undefined;
-            case 'link':
+                    : undefined;
+            case "link":
                 return {
-                    id: 'link',
-                    label: 'Link',
-                    icon: '🔗',
+                    id: "link",
+                    label: "Link",
+                    icon: "🔗",
                     isActive: (editor) => editor.isLinkActive(),
                     toggle: (editor, event) => {
                         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.isListActive(id === 'unordered-list' ? 'unordered' : 'ordered'),
+                    label: id === "unordered-list" ? "Bulleted List" : "Numbered List",
+                    icon: id === "unordered-list" ? "•" : "1.",
+                    isActive: (editor) => editor.isListActive(id === "unordered-list" ? "unordered" : "ordered"),
                     toggle: (editor, event) => {
                         event.preventDefault();
-                        editor.toggleList(id === 'unordered-list' ? 'unordered' : 'ordered');
-                    }
+                        editor.toggleList(id === "unordered-list" ? "unordered" : "ordered");
+                    },
                 };
-            case 'divider':
-                return { id: 'divider', label: 'Divider' };
+            case "divider":
+                return { id: "divider", label: "Divider" };
             default:
                 return undefined;
         }
@@ -192,11 +200,11 @@ export const ReactSlate = forwardRef((props, ref) => {
     const optionHandlers = {
         mark: {
             isActive: (id) => editor.isMarkActive(id),
-            toggle: (id) => editor.toggleMark(id)
+            toggle: (id) => editor.toggleMark(id),
         },
         block: {
             isActive: (id) => editor.isBlockActive(id),
-            toggle: (id) => editor.toggleBlock(id)
+            toggle: (id) => editor.toggleBlock(id),
         },
         alignment: {
             isActive: (id) => {
@@ -208,22 +216,22 @@ export const ReactSlate = forwardRef((props, ref) => {
                 if (alignConfig) {
                     editor.toggleAlign(alignConfig.value);
                 }
-            }
+            },
         },
         link: {
             isActive: () => editor.isLinkActive(),
-            toggle: () => handleLinkButtonClick()
+            toggle: () => handleLinkButtonClick(),
         },
         list: {
             isActive: (id) => {
-                const listType = id === 'unordered-list' ? 'unordered' : 'ordered';
+                const listType = id === "unordered-list" ? "unordered" : "ordered";
                 return editor.isListActive(listType);
             },
             toggle: (id, event) => {
-                const listType = id === 'unordered-list' ? 'unordered' : 'ordered';
+                const listType = id === "unordered-list" ? "unordered" : "ordered";
                 editor.toggleList(listType);
-            }
-        }
+            },
+        },
     };
     const isOptionActive = (type, id) => {
         const handler = optionHandlers[type];
@@ -239,7 +247,7 @@ export const ReactSlate = forwardRef((props, ref) => {
     };
     const createDropdownOptions = (options) => {
         return options
-            .map(option => {
+            .map((option) => {
             const optionObj = getOption(option.type, option.id);
             if (!optionObj)
                 return null;
@@ -249,7 +257,7 @@ export const ReactSlate = forwardRef((props, ref) => {
                 icon: optionObj.icon,
                 style: optionObj.style,
                 isActive: (editor) => isOptionActive(option.type, option.id),
-                onSelect: (editor, event) => handleOptionSelect(option.type, option.id)(event)
+                onSelect: (editor, event) => handleOptionSelect(option.type, option.id)(event),
             };
         })
             .filter(Boolean);
@@ -258,8 +266,8 @@ export const ReactSlate = forwardRef((props, ref) => {
     const splitOptionsByDividers = (options) => {
         const subGroups = [];
         let currentGroup = [];
-        options.forEach(option => {
-            if (option.type === 'divider') {
+        options.forEach((option) => {
+            if (option.type === "divider") {
                 if (currentGroup.length > 0) {
                     subGroups.push(currentGroup);
                     currentGroup = [];
@@ -276,66 +284,72 @@ export const ReactSlate = forwardRef((props, ref) => {
         return subGroups;
     };
     const renderToolbarGroup = (group, index) => {
-        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 = {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            flexWrap: 'wrap'
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            flexWrap: "wrap",
         };
-        return (_jsx("div", { style: groupStyle, children: group.display === 'buttons' ? ((() => {
-                const subGroups = splitOptionsByDividers(validOptions);
-                return subGroups.map((subGroup, subGroupIndex) => (_jsx("div", { className: "toolbar-button-group", children: subGroup.map((option, optionIndex) => {
-                        const optionObj = getOption(option.type, option.id);
-                        if (!optionObj)
-                            return null;
-                        return (_jsx(ToolbarButton, { icon: optionObj.icon, active: isOptionActive(option.type, option.id), onMouseDown: handleOptionSelect(option.type, option.id) }, `${option.type}-${option.id}`));
-                    }) }, `subgroup-${subGroupIndex}`)));
-            })()) : ((() => {
-                const dropdownOptions = createDropdownOptions(validOptions);
-                const blockOptions = validOptions.filter(option => option.type === 'block');
-                // If there's only one block option, render it as a disabled-style button
-                if (blockOptions.length === 1) {
-                    const singleOption = dropdownOptions.find(opt => blockOptions.some(blockOpt => blockOpt.type === 'block' &&
-                        getOption(blockOpt.type, blockOpt.id) === opt.value));
-                    return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx("button", { className: "toolbar-dropdown-button", disabled: true, children: group.label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [group.label, ": ", singleOption?.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : group.showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption?.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [singleOption?.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: singleOption?.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }) }));
-                }
-                // Multiple options - render normally wrapped in grey container
-                const isActive = dropdownOptions.some(option => option.isActive(editor));
-                return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx(EditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: {
-                            padding: '5px 10px',
-                            margin: '0',
-                            background: isActive ? '#ffffff' : 'transparent',
-                            border: 'none',
-                            borderRadius: '3px',
-                            cursor: 'pointer',
-                            boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'
-                        } }) }));
-            })()) }, `group-${group.id || index}`));
+        return (_jsx("div", { style: groupStyle, children: group.display === "buttons"
+                ? (() => {
+                    const subGroups = splitOptionsByDividers(validOptions);
+                    return subGroups.map((subGroup, subGroupIndex) => (_jsx("div", { className: "toolbar-button-group", children: subGroup.map((option, optionIndex) => {
+                            const optionObj = getOption(option.type, option.id);
+                            if (!optionObj)
+                                return null;
+                            return (_jsx(ToolbarButton, { icon: optionObj.icon, active: isOptionActive(option.type, option.id), onMouseDown: handleOptionSelect(option.type, option.id) }, `${option.type}-${option.id}`));
+                        }) }, `subgroup-${subGroupIndex}`)));
+                })()
+                : (() => {
+                    const dropdownOptions = createDropdownOptions(validOptions);
+                    const blockOptions = validOptions.filter((option) => option.type === "block");
+                    // If there's only one block option, render it as a disabled-style button
+                    if (blockOptions.length === 1) {
+                        const singleOption = dropdownOptions.find((opt) => blockOptions.some((blockOpt) => blockOpt.type === "block" &&
+                            getOption(blockOpt.type, blockOpt.id) === opt.value));
+                        return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx("button", { className: "toolbar-dropdown-button", disabled: true, children: group.label ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-content", children: [group.label, ": ", singleOption?.label] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : group.showIconsOnly ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption?.icon }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "toolbar-dropdown-icon", children: [singleOption?.icon && (_jsx("span", { className: "toolbar-dropdown-icon", children: singleOption.icon })), _jsx("span", { className: "toolbar-dropdown-content", children: singleOption?.label })] }), _jsx("span", { className: "toolbar-dropdown-arrow", children: "\u25BC" })] })) }) }));
+                    }
+                    // Multiple options - render normally wrapped in grey container
+                    const isActive = dropdownOptions.some((option) => option.isActive(editor));
+                    return (_jsx("div", { className: "toolbar-dropdown-container", children: _jsx(EditorDropdown, { options: dropdownOptions, editor: editor, label: group.label, buttonStyle: {
+                                padding: "5px 10px",
+                                margin: "0",
+                                background: isActive ? "#ffffff" : "transparent",
+                                border: "none",
+                                borderRadius: "3px",
+                                cursor: "pointer",
+                                boxShadow: isActive
+                                    ? "0 1px 2px rgba(0,0,0,0.1)"
+                                    : "none",
+                            } }) }));
+                })() }, `group-${group.id || index}`));
     };
     const [showLinkDialog, setShowLinkDialog] = useState(false);
     const [selectedLink, setSelectedLink] = useState(null);
     const [linkDialogCallback, setLinkDialogCallback] = useState(null);
     const editLink = useCallback((element) => {
-        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);
@@ -348,32 +362,32 @@ export const ReactSlate = forwardRef((props, ref) => {
         }
         else {
             const [linkNode] = Editor.nodes(editor, {
-                match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link'
+                match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "link",
             });
             if (linkNode) {
                 const [node, path] = linkNode;
                 let newProperties;
-                if (link.type === 'internal') {
+                if (link.type === "internal") {
                     newProperties = {
-                        url: '',
+                        url: "",
                         link: {
-                            type: 'internal',
+                            type: "internal",
                             targetItemLongId: link.targetItemLongId,
                             itemId: link.itemId,
                             target: link.target,
-                            queryString: link.queryString
-                        }
+                            queryString: link.queryString,
+                        },
                     };
                 }
                 else {
                     newProperties = {
                         url: link.url,
                         link: {
-                            type: 'external',
+                            type: "external",
                             url: link.url,
                             target: link.target,
-                            queryString: link.queryString
-                        }
+                            queryString: link.queryString,
+                        },
                     };
                 }
                 Transforms.setNodes(editor, newProperties, { at: path });
@@ -392,32 +406,34 @@ export const ReactSlate = forwardRef((props, ref) => {
         editor.insertLink({
             onOpenLinkDialog: (callback) => {
                 setSelectedLink({
-                    type: 'external',
-                    url: '',
-                    target: '_blank'
+                    type: "external",
+                    url: "",
+                    target: "_blank",
                 });
                 setShowLinkDialog(true);
                 setLinkDialogCallback(() => callback);
-            }
+            },
         });
     }, [editor]);
     const handleKeyDown = useCallback((event) => {
-        if (event.key === 'Enter' && event.shiftKey) {
+        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>');
+                editor.insertText("<br>");
             }
         }
-        else if (event.key === 'Tab') {
+        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'
+                    match: (n) => !Editor.isEditor(n) &&
+                        Element.isElement(n) &&
+                        n.type === "list-item",
                 });
                 if (listItem) {
                     if (event.shiftKey) {
@@ -431,23 +447,28 @@ export const ReactSlate = forwardRef((props, ref) => {
                 }
             }
         }
-        else if (event.key === 'Backspace' || event.key === 'Delete') {
+        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'
+                    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())) {
+                    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
+                        Transforms.setNodes(editor, { type: "paragraph", listType: undefined, indent: undefined }, {
+                            match: (n) => !Editor.isEditor(n) &&
+                                Element.isElement(n) &&
+                                n.type === "list-item",
+                            split: true,
                         });
                     }
                 }
@@ -466,43 +487,45 @@ export const ReactSlate = forwardRef((props, ref) => {
                             // Render each row
                             return Object.entries(groupsByRow)
                                 .sort(([a], [b]) => parseInt(a) - parseInt(b))
-                                .map(([rowIndex, rowGroups]) => (_jsx("div", { className: "toolbar-row", children: rowGroups.map(group => renderToolbarGroup(group, parseInt(rowIndex))) }, `row-${rowIndex}`)));
-                        })() })), _jsx(Editable, { className: classNames(readOnly ? "bg-gray-4" : "bg-gray-5", "focus-shadow"), readOnly: readOnly, placeholder: placeholder, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, renderElement: ({ attributes, children, element }) => {
+                                .map(([rowIndex, rowGroups]) => (_jsx("div", { className: "toolbar-row", children: rowGroups.map((group) => renderToolbarGroup(group, parseInt(rowIndex))) }, `row-${rowIndex}`)));
+                        })() })), _jsx(Editable, { className: classNames(readOnly ? "bg-gray-4" : "bg-gray-5", "focus-shadow p-2"), readOnly: readOnly, placeholder: placeholder, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, renderElement: ({ attributes, children, element }) => {
                             const style = {
-                                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 || '#');
-                                return (_jsx("a", { ...attributes, href: url, style: style, className: `slate-link ${isInternal ? 'internal-link' : 'external-link'}`, onClick: (e) => {
+                            if (element.type === "link") {
+                                const isInternal = element.link?.type === "internal";
+                                const url = isInternal
+                                    ? "#"
+                                    : element.url || element.link?.url || "#";
+                                return (_jsx("a", { ...attributes, href: url, style: style, className: `slate-link ${isInternal ? "internal-link" : "external-link"}`, onClick: (e) => {
                                         if (!readOnly) {
                                             e.preventDefault();
                                             editLink(element);
                                         }
                                     }, children: children }));
                             }
-                            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;
-                                    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.type === "list-item" &&
+                                            prevElement.listType === "ordered" &&
                                             (prevElement.indent || 0) === indent) {
                                             count++;
                                         }
                                         else if (prevElement &&
-                                            prevElement.type === 'list-item' &&
+                                            prevElement.type === "list-item" &&
                                             (prevElement.indent || 0) < indent) {
                                             // Reset count when we encounter a parent-level item
                                             count = 0;
@@ -512,17 +535,17 @@ export const ReactSlate = forwardRef((props, ref) => {
                                 }
                                 const listStyle = {
                                     ...style,
-                                    position: 'relative',
-                                    listStyleType: 'none',
+                                    position: "relative",
+                                    listStyleType: "none",
                                 };
-                                const bulletContent = isOrdered ? `${listNumber}.` : '';
+                                const bulletContent = isOrdered ? `${listNumber}.` : "";
                                 return (_jsxs("div", { ...attributes, style: listStyle, className: `slate-list-item slate-list-${listType}`, "data-indent": indent, children: [_jsx("span", { className: "slate-list-bullet", children: bulletContent }), _jsx("div", { className: "slate-list-content", children: children })] }));
                             }
                             // 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 _jsx("span", { ...attributes, style: style, children: children });
+                                return (_jsx("span", { ...attributes, style: style, children: children }));
                             }
                             // For standard blocks, use the appropriate HTML tag
                             if (blockConfig) {
@@ -530,17 +553,17 @@ export const ReactSlate = forwardRef((props, ref) => {
                                 return React.createElement(tagName, { ...attributes, style }, children);
                             }
                             // Default fallback to paragraph
-                            return _jsx("p", { ...attributes, style: style, children: children });
+                            return (_jsx("p", { ...attributes, style: style, children: children }));
                         }, renderLeaf: ({ attributes, children, leaf }) => {
                             let el = _jsx("span", { ...attributes, children: children });
                             // Apply marks using the built-in SLATE_MARKS configuration
-                            simplifiedProfile.marks.forEach(markId => {
+                            simplifiedProfile.marks.forEach((markId) => {
                                 if (leaf[markId]) {
                                     const markConfig = SLATE_MARKS[markId];
                                     if (markConfig) {
-                                        if (markId === 'extrabold') {
+                                        if (markId === "extrabold") {
                                             // Special handling for extrabold with CSS class
-                                            el = (_jsx("span", { className: "extrabold", children: el }));
+                                            el = _jsx("span", { className: "extrabold", children: el });
                                         }
                                         else {
                                             // Standard HTML tag rendering
@@ -557,6 +580,6 @@ export const ReactSlate = forwardRef((props, ref) => {
                     setLinkDialogCallback(null);
                 } }))] }));
 });
-ReactSlate.displayName = 'ReactSlate';
+ReactSlate.displayName = "ReactSlate";
 export default ReactSlate;
 //# sourceMappingURL=ReactSlate.js.map