@datalayer/lexical-loro 0.2.3 → 0.2.5

package/lib/plugins/ToolbarPlugin/index.js

@@ -0,0 +1,500 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { $isCodeNode, getCodeLanguageOptions as getCodeLanguageOptionsPrism, normalizeCodeLanguage as normalizeCodeLanguagePrism, } from '@lexical/code';
+import { getCodeLanguageOptions as getCodeLanguageOptionsShiki, getCodeThemeOptions as getCodeThemeOptionsShiki, normalizeCodeLanguage as normalizeCodeLanguageShiki, } from '@lexical/code-shiki';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, ListNode } from '@lexical/list';
+import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $getSelectionStyleValueForProperty, $isParentElementRTL, $patchStyleText, } from '@lexical/selection';
+import { $isTableNode, $isTableSelection } from '@lexical/table';
+import { $findMatchingParent, $getNearestNodeOfType, $isEditorIsNestedEditor, IS_APPLE, mergeRegister, } from '@lexical/utils';
+import { $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isNodeSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, HISTORIC_TAG, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { useSettings } from '../../context/SettingsContext';
+import { blockTypeToBlockName, useToolbarState, } from '../../context/ToolbarContext';
+import useModal from '../../hooks/useModal';
+import { $createStickyNode } from '../../nodes/StickyNode';
+import DropDown, { DropDownItem } from '../../ui/DropDown';
+import DropdownColorPicker from '../../ui/DropdownColorPicker';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { sanitizeUrl } from '../../utils/url';
+import { EmbedConfigs } from '../AutoEmbedPlugin';
+import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
+import { INSERT_COUNTER_COMMAND } from '../CounterPlugin';
+import { INSERT_DATETIME_COMMAND } from '../DateTimePlugin';
+import { InsertEquationDialog } from '../EquationsPlugin';
+import { INSERT_EXCALIDRAW_COMMAND } from '../ExcalidrawPlugin';
+import { INSERT_IMAGE_COMMAND, InsertImageDialog, } from '../ImagesPlugin';
+import { InsertInlineImageDialog } from '../InlineImagePlugin';
+import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog';
+import { INSERT_PAGE_BREAK } from '../PageBreakPlugin';
+import { InsertPollDialog } from '../PollPlugin';
+import { SHORTCUTS } from '../ShortcutsPlugin/shortcuts';
+import { InsertTableDialog } from '../TablePlugin';
+import FontSize, { parseFontSizeForToolbar } from './fontSize';
+import { clearFormatting, formatBulletList, formatCheckList, formatCode, formatHeading, formatNumberedList, formatParagraph, formatQuote, } from './utils';
+import catTypingGif from '../../images/cat-typing.gif';
+const rootTypeToRootName = {
+    root: 'Root',
+    table: 'Table',
+};
+const CODE_LANGUAGE_OPTIONS_PRISM = getCodeLanguageOptionsPrism().filter((option) => [
+    'c',
+    'clike',
+    'cpp',
+    'css',
+    'html',
+    'java',
+    'js',
+    'javascript',
+    'markdown',
+    'objc',
+    'objective-c',
+    'plain',
+    'powershell',
+    'py',
+    'python',
+    'rust',
+    'sql',
+    'swift',
+    'typescript',
+    'xml',
+].includes(option[0]));
+const CODE_LANGUAGE_OPTIONS_SHIKI = getCodeLanguageOptionsShiki().filter((option) => [
+    'c',
+    'clike',
+    'cpp',
+    'css',
+    'html',
+    'java',
+    'js',
+    'javascript',
+    'markdown',
+    'objc',
+    'objective-c',
+    'plain',
+    'powershell',
+    'py',
+    'python',
+    'rust',
+    'sql',
+    'typescript',
+    'xml',
+].includes(option[0]));
+const CODE_THEME_OPTIONS_SHIKI = getCodeThemeOptionsShiki().filter((option) => [
+    'catppuccin-latte',
+    'everforest-light',
+    'github-light',
+    'gruvbox-light-medium',
+    'kanagawa-lotus',
+    'dark-plus',
+    'light-plus',
+    'material-theme-lighter',
+    'min-light',
+    'one-light',
+    'rose-pine-dawn',
+    'slack-ochin',
+    'snazzy-light',
+    'solarized-light',
+    'vitesse-light',
+].includes(option[0]));
+const FONT_FAMILY_OPTIONS = [
+    ['Arial', 'Arial'],
+    ['Courier New', 'Courier New'],
+    ['Georgia', 'Georgia'],
+    ['Times New Roman', 'Times New Roman'],
+    ['Trebuchet MS', 'Trebuchet MS'],
+    ['Verdana', 'Verdana'],
+];
+const FONT_SIZE_OPTIONS = [
+    ['10px', '10px'],
+    ['11px', '11px'],
+    ['12px', '12px'],
+    ['13px', '13px'],
+    ['14px', '14px'],
+    ['15px', '15px'],
+    ['16px', '16px'],
+    ['17px', '17px'],
+    ['18px', '18px'],
+    ['19px', '19px'],
+    ['20px', '20px'],
+];
+const ELEMENT_FORMAT_OPTIONS = {
+    center: {
+        icon: 'center-align',
+        iconRTL: 'center-align',
+        name: 'Center Align',
+    },
+    end: {
+        icon: 'right-align',
+        iconRTL: 'left-align',
+        name: 'End Align',
+    },
+    justify: {
+        icon: 'justify-align',
+        iconRTL: 'justify-align',
+        name: 'Justify Align',
+    },
+    left: {
+        icon: 'left-align',
+        iconRTL: 'left-align',
+        name: 'Left Align',
+    },
+    right: {
+        icon: 'right-align',
+        iconRTL: 'right-align',
+        name: 'Right Align',
+    },
+    start: {
+        icon: 'left-align',
+        iconRTL: 'right-align',
+        name: 'Start Align',
+    },
+};
+function dropDownActiveClass(active) {
+    if (active) {
+        return 'active dropdown-item-active';
+    }
+    else {
+        return '';
+    }
+}
+function BlockFormatDropDown({ editor, blockType, rootType, disabled = false, }) {
+    return (_jsxs(DropDown, { disabled: disabled, buttonClassName: "toolbar-item block-controls", buttonIconClassName: 'icon block-type ' + blockType, buttonLabel: blockTypeToBlockName[blockType], buttonAriaLabel: "Formatting options for text style", children: [_jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'paragraph'), onClick: () => formatParagraph(editor), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon paragraph" }), _jsx("span", { className: "text", children: "Normal" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.NORMAL })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'h1'), onClick: () => formatHeading(editor, blockType, 'h1'), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon h1" }), _jsx("span", { className: "text", children: "Heading 1" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.HEADING1 })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'h2'), onClick: () => formatHeading(editor, blockType, 'h2'), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon h2" }), _jsx("span", { className: "text", children: "Heading 2" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.HEADING2 })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'h3'), onClick: () => formatHeading(editor, blockType, 'h3'), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon h3" }), _jsx("span", { className: "text", children: "Heading 3" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.HEADING3 })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'number'), onClick: () => formatNumberedList(editor, blockType), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon numbered-list" }), _jsx("span", { className: "text", children: "Numbered List" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.NUMBERED_LIST })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'bullet'), onClick: () => formatBulletList(editor, blockType), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon bullet-list" }), _jsx("span", { className: "text", children: "Bullet List" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.BULLET_LIST })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'check'), onClick: () => formatCheckList(editor, blockType), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon check-list" }), _jsx("span", { className: "text", children: "Check List" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.CHECK_LIST })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'quote'), onClick: () => formatQuote(editor, blockType), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon quote" }), _jsx("span", { className: "text", children: "Quote" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.QUOTE })] }), _jsxs(DropDownItem, { className: 'item wide ' + dropDownActiveClass(blockType === 'code'), onClick: () => formatCode(editor, blockType), children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon code" }), _jsx("span", { className: "text", children: "Code Block" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.CODE_BLOCK })] })] }));
+}
+function Divider() {
+    return _jsx("div", { className: "divider" });
+}
+function FontDropDown({ editor, value, style, disabled = false, }) {
+    const handleClick = useCallback((option) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (selection !== null) {
+                $patchStyleText(selection, {
+                    [style]: option,
+                });
+            }
+        });
+    }, [editor, style]);
+    const buttonAriaLabel = style === 'font-family'
+        ? 'Formatting options for font family'
+        : 'Formatting options for font size';
+    return (_jsx(DropDown, { disabled: disabled, buttonClassName: 'toolbar-item ' + style, buttonLabel: value, buttonIconClassName: style === 'font-family' ? 'icon block-type font-family' : '', buttonAriaLabel: buttonAriaLabel, children: (style === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === option)} ${style === 'font-size' ? 'fontsize-item' : ''}`, onClick: () => handleClick(option), children: _jsx("span", { className: "text", children: text }) }, option))) }));
+}
+function ElementFormatDropdown({ editor, value, isRTL, disabled = false, }) {
+    const formatOption = ELEMENT_FORMAT_OPTIONS[value || 'left'];
+    return (_jsxs(DropDown, { disabled: disabled, buttonLabel: formatOption.name, buttonIconClassName: `icon ${isRTL ? formatOption.iconRTL : formatOption.icon}`, buttonClassName: "toolbar-item spaced alignment", buttonAriaLabel: "Formatting options for text alignment", children: [_jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon left-align" }), _jsx("span", { className: "text", children: "Left Align" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.LEFT_ALIGN })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon center-align" }), _jsx("span", { className: "text", children: "Center Align" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.CENTER_ALIGN })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon right-align" }), _jsx("span", { className: "text", children: "Right Align" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.RIGHT_ALIGN })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon justify-align" }), _jsx("span", { className: "text", children: "Justify Align" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.JUSTIFY_ALIGN })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'start');
+                }, className: "item wide", children: [_jsx("i", { className: `icon ${isRTL
+                            ? ELEMENT_FORMAT_OPTIONS.start.iconRTL
+                            : ELEMENT_FORMAT_OPTIONS.start.icon}` }), _jsx("span", { className: "text", children: "Start Align" })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'end');
+                }, className: "item wide", children: [_jsx("i", { className: `icon ${isRTL
+                            ? ELEMENT_FORMAT_OPTIONS.end.iconRTL
+                            : ELEMENT_FORMAT_OPTIONS.end.icon}` }), _jsx("span", { className: "text", children: "End Align" })] }), _jsx(Divider, {}), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: 'icon ' + (isRTL ? 'indent' : 'outdent') }), _jsx("span", { className: "text", children: "Outdent" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.OUTDENT })] }), _jsxs(DropDownItem, { onClick: () => {
+                    editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+                }, className: "item wide", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: 'icon ' + (isRTL ? 'outdent' : 'indent') }), _jsx("span", { className: "text", children: "Indent" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.INDENT })] })] }));
+}
+function $findTopLevelElement(node) {
+    let topLevelElement = node.getKey() === 'root'
+        ? node
+        : $findMatchingParent(node, (e) => {
+            const parent = e.getParent();
+            return parent !== null && $isRootOrShadowRoot(parent);
+        });
+    if (topLevelElement === null) {
+        topLevelElement = node.getTopLevelElementOrThrow();
+    }
+    return topLevelElement;
+}
+export default function ToolbarPlugin({ editor, activeEditor, setActiveEditor, setIsLinkEditMode, }) {
+    const [selectedElementKey, setSelectedElementKey] = useState(null);
+    const [modal, showModal] = useModal();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const { toolbarState, updateToolbarState } = useToolbarState();
+    const $handleHeadingNode = useCallback((selectedElement) => {
+        const type = $isHeadingNode(selectedElement)
+            ? selectedElement.getTag()
+            : selectedElement.getType();
+        if (type in blockTypeToBlockName) {
+            updateToolbarState('blockType', type);
+        }
+    }, [updateToolbarState]);
+    const { settings: { isCodeHighlighted, isCodeShiki }, } = useSettings();
+    const $handleCodeNode = useCallback((element) => {
+        if ($isCodeNode(element)) {
+            const language = element.getLanguage();
+            updateToolbarState('codeLanguage', language
+                ? (isCodeHighlighted &&
+                    (isCodeShiki
+                        ? normalizeCodeLanguageShiki(language)
+                        : normalizeCodeLanguagePrism(language))) ||
+                    language
+                : '');
+            const theme = element.getTheme();
+            updateToolbarState('codeTheme', theme || '');
+            return;
+        }
+    }, [updateToolbarState, isCodeHighlighted, isCodeShiki]);
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            if (activeEditor !== editor && $isEditorIsNestedEditor(activeEditor)) {
+                const rootElement = activeEditor.getRootElement();
+                updateToolbarState('isImageCaption', !!rootElement?.parentElement?.classList.contains('image-caption-container'));
+            }
+            else {
+                updateToolbarState('isImageCaption', false);
+            }
+            const anchorNode = selection.anchor.getNode();
+            const element = $findTopLevelElement(anchorNode);
+            const elementKey = element.getKey();
+            const elementDOM = activeEditor.getElementByKey(elementKey);
+            updateToolbarState('isRTL', $isParentElementRTL(selection));
+            // Update links
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            const isLink = $isLinkNode(parent) || $isLinkNode(node);
+            updateToolbarState('isLink', isLink);
+            const tableNode = $findMatchingParent(node, $isTableNode);
+            if ($isTableNode(tableNode)) {
+                updateToolbarState('rootType', 'table');
+            }
+            else {
+                updateToolbarState('rootType', 'root');
+            }
+            if (elementDOM !== null) {
+                setSelectedElementKey(elementKey);
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = parentList
+                        ? parentList.getListType()
+                        : element.getListType();
+                    updateToolbarState('blockType', type);
+                }
+                else {
+                    $handleHeadingNode(element);
+                    $handleCodeNode(element);
+                }
+            }
+            // Handle buttons
+            updateToolbarState('fontColor', $getSelectionStyleValueForProperty(selection, 'color', '#000'));
+            updateToolbarState('bgColor', $getSelectionStyleValueForProperty(selection, 'background-color', '#fff'));
+            updateToolbarState('fontFamily', $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'));
+            let matchingParent;
+            if ($isLinkNode(parent)) {
+                // If node is a link, we need to fetch the parent paragraph node to set format
+                matchingParent = $findMatchingParent(node, (parentNode) => $isElementNode(parentNode) && !parentNode.isInline());
+            }
+            // If matchingParent is a valid node, pass it's format type
+            updateToolbarState('elementFormat', $isElementNode(matchingParent)
+                ? matchingParent.getFormatType()
+                : $isElementNode(node)
+                    ? node.getFormatType()
+                    : parent?.getFormatType() || 'left');
+        }
+        if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+            // Update text format
+            updateToolbarState('isBold', selection.hasFormat('bold'));
+            updateToolbarState('isItalic', selection.hasFormat('italic'));
+            updateToolbarState('isUnderline', selection.hasFormat('underline'));
+            updateToolbarState('isStrikethrough', selection.hasFormat('strikethrough'));
+            updateToolbarState('isSubscript', selection.hasFormat('subscript'));
+            updateToolbarState('isSuperscript', selection.hasFormat('superscript'));
+            updateToolbarState('isHighlight', selection.hasFormat('highlight'));
+            updateToolbarState('isCode', selection.hasFormat('code'));
+            updateToolbarState('fontSize', $getSelectionStyleValueForProperty(selection, 'font-size', '15px'));
+            updateToolbarState('isLowercase', selection.hasFormat('lowercase'));
+            updateToolbarState('isUppercase', selection.hasFormat('uppercase'));
+            updateToolbarState('isCapitalize', selection.hasFormat('capitalize'));
+        }
+        if ($isNodeSelection(selection)) {
+            const nodes = selection.getNodes();
+            for (const selectedNode of nodes) {
+                const parentList = $getNearestNodeOfType(selectedNode, ListNode);
+                if (parentList) {
+                    const type = parentList.getListType();
+                    updateToolbarState('blockType', type);
+                }
+                else {
+                    const selectedElement = $findTopLevelElement(selectedNode);
+                    $handleHeadingNode(selectedElement);
+                    $handleCodeNode(selectedElement);
+                    // Update elementFormat for node selection (e.g., images)
+                    if ($isElementNode(selectedElement)) {
+                        updateToolbarState('elementFormat', selectedElement.getFormatType());
+                    }
+                }
+            }
+        }
+    }, [
+        activeEditor,
+        editor,
+        updateToolbarState,
+        $handleHeadingNode,
+        $handleCodeNode,
+    ]);
+    useEffect(() => {
+        return editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            setActiveEditor(newEditor);
+            $updateToolbar();
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL);
+    }, [editor, $updateToolbar, setActiveEditor]);
+    useEffect(() => {
+        activeEditor.getEditorState().read(() => {
+            $updateToolbar();
+        }, { editor: activeEditor });
+    }, [activeEditor, $updateToolbar]);
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }), activeEditor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateToolbar();
+            }, { editor: activeEditor });
+        }), activeEditor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+            updateToolbarState('canUndo', payload);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), activeEditor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+            updateToolbarState('canRedo', payload);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL));
+    }, [$updateToolbar, activeEditor, editor, updateToolbarState]);
+    const applyStyleText = useCallback((styles, skipHistoryStack) => {
+        activeEditor.update(() => {
+            const selection = $getSelection();
+            if (selection !== null) {
+                $patchStyleText(selection, styles);
+            }
+        }, skipHistoryStack ? { tag: HISTORIC_TAG } : {});
+    }, [activeEditor]);
+    const onFontColorSelect = useCallback((value, skipHistoryStack) => {
+        applyStyleText({ color: value }, skipHistoryStack);
+    }, [applyStyleText]);
+    const onBgColorSelect = useCallback((value, skipHistoryStack) => {
+        applyStyleText({ 'background-color': value }, skipHistoryStack);
+    }, [applyStyleText]);
+    const insertLink = useCallback(() => {
+        if (!toolbarState.isLink) {
+            setIsLinkEditMode(true);
+            activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
+        }
+        else {
+            setIsLinkEditMode(false);
+            activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    }, [activeEditor, setIsLinkEditMode, toolbarState.isLink]);
+    const onCodeLanguageSelect = useCallback((value) => {
+        activeEditor.update(() => {
+            if (selectedElementKey !== null) {
+                const node = $getNodeByKey(selectedElementKey);
+                if ($isCodeNode(node)) {
+                    node.setLanguage(value);
+                }
+            }
+        });
+    }, [activeEditor, selectedElementKey]);
+    const onCodeThemeSelect = useCallback((value) => {
+        activeEditor.update(() => {
+            if (selectedElementKey !== null) {
+                const node = $getNodeByKey(selectedElementKey);
+                if ($isCodeNode(node)) {
+                    node.setTheme(value);
+                }
+            }
+        });
+    }, [activeEditor, selectedElementKey]);
+    const insertGifOnClick = (payload) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+    };
+    const canViewerSeeInsertDropdown = !toolbarState.isImageCaption;
+    const canViewerSeeInsertCodeButton = !toolbarState.isImageCaption;
+    return (_jsxs("div", { className: "toolbar", children: [_jsx("button", { disabled: !toolbarState.canUndo || !isEditable, onClick: () => {
+                    activeEditor.dispatchCommand(UNDO_COMMAND, undefined);
+                }, title: IS_APPLE ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)', type: "button", className: "toolbar-item spaced", "aria-label": "Undo", children: _jsx("i", { className: "format undo" }) }), _jsx("button", { disabled: !toolbarState.canRedo || !isEditable, onClick: () => {
+                    activeEditor.dispatchCommand(REDO_COMMAND, undefined);
+                }, title: IS_APPLE ? 'Redo (⇧⌘Z)' : 'Redo (Ctrl+Y)', type: "button", className: "toolbar-item", "aria-label": "Redo", children: _jsx("i", { className: "format redo" }) }), _jsx(Divider, {}), toolbarState.blockType in blockTypeToBlockName &&
+                activeEditor === editor && (_jsxs(_Fragment, { children: [_jsx(BlockFormatDropDown, { disabled: !isEditable, blockType: toolbarState.blockType, rootType: toolbarState.rootType, editor: activeEditor }), _jsx(Divider, {})] })), toolbarState.blockType === 'code' && isCodeHighlighted ? (_jsxs(_Fragment, { children: [!isCodeShiki && (_jsx(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item code-language", buttonLabel: (CODE_LANGUAGE_OPTIONS_PRISM.find((opt) => opt[0] ===
+                            normalizeCodeLanguagePrism(toolbarState.codeLanguage)) || ['', ''])[1], buttonAriaLabel: "Select language", children: CODE_LANGUAGE_OPTIONS_PRISM.map(([value, name]) => {
+                            return (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === toolbarState.codeLanguage)}`, onClick: () => onCodeLanguageSelect(value), children: _jsx("span", { className: "text", children: name }) }, value));
+                        }) })), isCodeShiki && (_jsxs(_Fragment, { children: [_jsx(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item code-language", buttonLabel: (CODE_LANGUAGE_OPTIONS_SHIKI.find((opt) => opt[0] ===
+                                    normalizeCodeLanguageShiki(toolbarState.codeLanguage)) || ['', ''])[1], buttonAriaLabel: "Select language", children: CODE_LANGUAGE_OPTIONS_SHIKI.map(([value, name]) => {
+                                    return (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === toolbarState.codeLanguage)}`, onClick: () => onCodeLanguageSelect(value), children: _jsx("span", { className: "text", children: name }) }, value));
+                                }) }), _jsx(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item code-language", buttonLabel: (CODE_THEME_OPTIONS_SHIKI.find((opt) => opt[0] === toolbarState.codeTheme) || ['', ''])[1], buttonAriaLabel: "Select theme", children: CODE_THEME_OPTIONS_SHIKI.map(([value, name]) => {
+                                    return (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === toolbarState.codeTheme)}`, onClick: () => onCodeThemeSelect(value), children: _jsx("span", { className: "text", children: name }) }, value));
+                                }) })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(FontDropDown, { disabled: !isEditable, style: 'font-family', value: toolbarState.fontFamily, editor: activeEditor }), _jsx(Divider, {}), _jsx(FontSize, { selectionFontSize: parseFontSizeForToolbar(toolbarState.fontSize).slice(0, -2), editor: activeEditor, disabled: !isEditable }), _jsx(Divider, {}), _jsx("button", { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                        }, className: 'toolbar-item spaced ' + (toolbarState.isBold ? 'active' : ''), title: `Bold (${SHORTCUTS.BOLD})`, type: "button", "aria-label": `Format text as bold. Shortcut: ${SHORTCUTS.BOLD}`, children: _jsx("i", { className: "format bold" }) }), _jsx("button", { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                        }, className: 'toolbar-item spaced ' + (toolbarState.isItalic ? 'active' : ''), title: `Italic (${SHORTCUTS.ITALIC})`, type: "button", "aria-label": `Format text as italics. Shortcut: ${SHORTCUTS.ITALIC}`, children: _jsx("i", { className: "format italic" }) }), _jsx("button", { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                        }, className: 'toolbar-item spaced ' +
+                            (toolbarState.isUnderline ? 'active' : ''), title: `Underline (${SHORTCUTS.UNDERLINE})`, type: "button", "aria-label": `Format text to underlined. Shortcut: ${SHORTCUTS.UNDERLINE}`, children: _jsx("i", { className: "format underline" }) }), canViewerSeeInsertCodeButton && (_jsx("button", { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                        }, className: 'toolbar-item spaced ' + (toolbarState.isCode ? 'active' : ''), title: `Insert code block (${SHORTCUTS.INSERT_CODE_BLOCK})`, type: "button", "aria-label": "Insert code block", children: _jsx("i", { className: "format code" }) })), _jsx("button", { disabled: !isEditable, onClick: insertLink, className: 'toolbar-item spaced ' + (toolbarState.isLink ? 'active' : ''), "aria-label": "Insert link", title: `Insert link (${SHORTCUTS.INSERT_LINK})`, type: "button", children: _jsx("i", { className: "format link" }) }), _jsx(DropdownColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting text color", buttonIconClassName: "icon font-color", color: toolbarState.fontColor, onChange: onFontColorSelect, title: "text color" }), _jsx(DropdownColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting background color", buttonIconClassName: "icon bg-color", color: toolbarState.bgColor, onChange: onBgColorSelect, title: "bg color" }), _jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconClassName: "icon dropdown-more", children: [_jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'lowercase');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isLowercase), title: "Lowercase", "aria-label": "Format text to lowercase", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon lowercase" }), _jsx("span", { className: "text", children: "Lowercase" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.LOWERCASE })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isUppercase), title: "Uppercase", "aria-label": "Format text to uppercase", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon uppercase" }), _jsx("span", { className: "text", children: "Uppercase" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.UPPERCASE })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isCapitalize), title: "Capitalize", "aria-label": "Format text to capitalize", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon capitalize" }), _jsx("span", { className: "text", children: "Capitalize" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.CAPITALIZE })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isStrikethrough), title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon strikethrough" }), _jsx("span", { className: "text", children: "Strikethrough" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.STRIKETHROUGH })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isSubscript), title: "Subscript", "aria-label": "Format text with a subscript", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon subscript" }), _jsx("span", { className: "text", children: "Subscript" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.SUBSCRIPT })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isSuperscript), title: "Superscript", "aria-label": "Format text with a superscript", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon superscript" }), _jsx("span", { className: "text", children: "Superscript" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.SUPERSCRIPT })] }), _jsx(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight');
+                                }, className: 'item wide ' + dropDownActiveClass(toolbarState.isHighlight), title: "Highlight", "aria-label": "Format text with a highlight", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon highlight" }), _jsx("span", { className: "text", children: "Highlight" })] }) }), _jsxs(DropDownItem, { onClick: () => clearFormatting(activeEditor), className: "item wide", title: "Clear text formatting", "aria-label": "Clear all text formatting", children: [_jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon clear" }), _jsx("span", { className: "text", children: "Clear Formatting" })] }), _jsx("span", { className: "shortcut", children: SHORTCUTS.CLEAR_FORMATTING })] })] }), canViewerSeeInsertDropdown && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced", buttonLabel: "Insert", buttonAriaLabel: "Insert specialized editor node", buttonIconClassName: "icon plus", children: [_jsxs(DropDownItem, { onClick: () => {
+                                            activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+                                        }, className: "item", children: [_jsx("i", { className: "icon horizontal-rule" }), _jsx("span", { className: "text", children: "Horizontal Rule" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            activeEditor.dispatchCommand(INSERT_COUNTER_COMMAND, 0);
+                                        }, className: "item", children: [_jsx("i", { className: "icon number" }), _jsx("span", { className: "text", children: "Counter" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
+                                        }, className: "item", children: [_jsx("i", { className: "icon page-break" }), _jsx("span", { className: "text", children: "Page Break" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Image', (onClose) => (_jsx(InsertImageDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon image" }), _jsx("span", { className: "text", children: "Image" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Inline Image', (onClose) => (_jsx(InsertInlineImageDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon image" }), _jsx("span", { className: "text", children: "Inline Image" })] }), _jsxs(DropDownItem, { onClick: () => insertGifOnClick({
+                                            altText: 'Cat typing on a laptop',
+                                            src: catTypingGif,
+                                        }), className: "item", children: [_jsx("i", { className: "icon gif" }), _jsx("span", { className: "text", children: "GIF" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            activeEditor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined);
+                                        }, className: "item", children: [_jsx("i", { className: "icon diagram-2" }), _jsx("span", { className: "text", children: "Excalidraw" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Table', (onClose) => (_jsx(InsertTableDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon table" }), _jsx("span", { className: "text", children: "Table" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Poll', (onClose) => (_jsx(InsertPollDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon poll" }), _jsx("span", { className: "text", children: "Poll" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Columns Layout', (onClose) => (_jsx(InsertLayoutDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon columns" }), _jsx("span", { className: "text", children: "Columns Layout" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            showModal('Insert Equation', (onClose) => (_jsx(InsertEquationDialog, { activeEditor: activeEditor, onClose: onClose })));
+                                        }, className: "item", children: [_jsx("i", { className: "icon equation" }), _jsx("span", { className: "text", children: "Equation" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            editor.update(() => {
+                                                const root = $getRoot();
+                                                const stickyNode = $createStickyNode(0, 0);
+                                                root.append(stickyNode);
+                                            });
+                                        }, className: "item", children: [_jsx("i", { className: "icon sticky" }), _jsx("span", { className: "text", children: "Sticky Note" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined);
+                                        }, className: "item", children: [_jsx("i", { className: "icon caret-right" }), _jsx("span", { className: "text", children: "Collapsible container" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                            const dateTime = new Date();
+                                            dateTime.setHours(0, 0, 0, 0);
+                                            activeEditor.dispatchCommand(INSERT_DATETIME_COMMAND, {
+                                                dateTime,
+                                            });
+                                        }, className: "item", children: [_jsx("i", { className: "icon calendar" }), _jsx("span", { className: "text", children: "Date" })] }), EmbedConfigs.map((embedConfig) => (_jsxs(DropDownItem, { onClick: () => {
+                                            activeEditor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type);
+                                        }, className: "item", children: [embedConfig.icon, _jsx("span", { className: "text", children: embedConfig.contentName })] }, embedConfig.type)))] })] }))] })), _jsx(Divider, {}), _jsx(ElementFormatDropdown, { disabled: !isEditable, value: toolbarState.elementFormat, editor: activeEditor, isRTL: toolbarState.isRTL }), modal] }));
+}

package/lib/plugins/ToolbarPlugin/utils.d.ts

@@ -0,0 +1,26 @@
+import { HeadingTagType } from '@lexical/rich-text';
+import { LexicalEditor } from 'lexical';
+export declare enum UpdateFontSizeType {
+    increment = 1,
+    decrement = 2
+}
+/**
+ * Calculates the new font size based on the update type.
+ * @param currentFontSize - The current font size
+ * @param updateType - The type of change, either increment or decrement
+ * @returns the next font size
+ */
+export declare const calculateNextFontSize: (currentFontSize: number, updateType: UpdateFontSizeType | null) => number;
+/**
+ * Patches the selection with the updated font size.
+ */
+export declare const updateFontSizeInSelection: (editor: LexicalEditor, newFontSize: string | null, updateType: UpdateFontSizeType | null) => void;
+export declare const updateFontSize: (editor: LexicalEditor, updateType: UpdateFontSizeType, inputValue: string) => void;
+export declare const formatParagraph: (editor: LexicalEditor) => void;
+export declare const formatHeading: (editor: LexicalEditor, blockType: string, headingSize: HeadingTagType) => void;
+export declare const formatBulletList: (editor: LexicalEditor, blockType: string) => void;
+export declare const formatCheckList: (editor: LexicalEditor, blockType: string) => void;
+export declare const formatNumberedList: (editor: LexicalEditor, blockType: string) => void;
+export declare const formatQuote: (editor: LexicalEditor, blockType: string) => void;
+export declare const formatCode: (editor: LexicalEditor, blockType: string) => void;
+export declare const clearFormatting: (editor: LexicalEditor) => void;