@byline/richtext-lexical 0.9.3

package/dist/field/plugins/toolbar-plugin/index.js

@@ -0,0 +1,837 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment, useCallback, useEffect, useState } from "react";
+import { $createCodeNode, $isCodeNode, CODE_LANGUAGE_FRIENDLY_NAME_MAP, CODE_LANGUAGE_MAP, getLanguageFriendlyName } from "@lexical/code";
+import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND } from "@lexical/list";
+import { INSERT_EMBED_COMMAND } from "@lexical/react/LexicalAutoEmbedPlugin";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $isTableNode } from "@lexical/table";
+import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_NORMAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, INDENT_CONTENT_COMMAND, KEY_MODIFIER_COMMAND, OUTDENT_CONTENT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
+import { useEditorConfig } from "../../config/editor-config-context.js";
+import { $isLinkNode, OPEN_LINK_MODAL_COMMAND, TOGGLE_LINK_COMMAND } from "../../nodes/link-nodes/index.js";
+import { IS_APPLE } from "../../shared/environment.js";
+import { useToolbarExtensions } from "../../toolbar-extensions.js";
+import { DropDown, DropDownItem } from "../../ui/dropdown.js";
+import { getSelectedNode } from "../../utils/getSelectedNode.js";
+import { sanitizeUrl } from "../../utils/url.js";
+import { OPEN_ADMONITION_MODAL_COMMAND } from "../admonition-plugin/index.js";
+import { EmbedConfigs } from "../auto-embed-plugin/index.js";
+import { OPEN_INLINE_IMAGE_MODAL_COMMAND } from "../inline-image-plugin/index.js";
+import { OPEN_INSERT_LAYOUT_MODAL_COMMAND } from "../layout-plugin/layout-plugin.js";
+import { OPEN_TABLE_MODAL_COMMAND } from "../table-plugin/index.js";
+const blockTypeToBlockName = {
+    bullet: 'Bulleted List',
+    check: 'Check List',
+    code: 'Code Block',
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    h5: 'Heading 5',
+    h6: 'Heading 6',
+    number: 'Numbered List',
+    paragraph: 'Normal',
+    quote: 'Quote'
+};
+function getCodeLanguageOptions() {
+    const options = [];
+    for (const [lang, friendlyName] of Object.entries(CODE_LANGUAGE_FRIENDLY_NAME_MAP))options.push([
+        lang,
+        friendlyName
+    ]);
+    return options;
+}
+const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();
+function dropDownActiveClass(active) {
+    if (active) return 'active dropdown-item-active';
+    return '';
+}
+function BlockFormatDropDown({ editor, blockType, rootType, disabled = false }) {
+    const { config: { options: { checkListPlugin, listPlugin, codeHighlightPlugin } } } = useEditorConfig();
+    const formatParagraph = ()=>{
+        editor.update(()=>{
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) $setBlocksType(selection, ()=>$createParagraphNode());
+        });
+    };
+    const formatHeading = (headingSize)=>{
+        if (blockType !== headingSize) editor.update(()=>{
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) $setBlocksType(selection, ()=>$createHeadingNode(headingSize));
+        });
+    };
+    const formatBulletList = ()=>{
+        if ('bullet' !== blockType) editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+    };
+    const formatCheckList = ()=>{
+        if ('check' !== blockType) editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+    };
+    const formatNumberedList = ()=>{
+        if ('number' !== blockType) editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+        else editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+    };
+    const formatQuote = ()=>{
+        if ('quote' !== blockType) editor.update(()=>{
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) $setBlocksType(selection, ()=>$createQuoteNode());
+        });
+    };
+    const formatCode = ()=>{
+        if ('code' !== blockType) editor.update(()=>{
+            let selection = $getSelection();
+            if ($isRangeSelection(selection)) if (selection.isCollapsed()) $setBlocksType(selection, ()=>$createCodeNode());
+            else {
+                const textContent = selection.getTextContent();
+                const codeNode = $createCodeNode();
+                selection.insertNodes([
+                    codeNode
+                ]);
+                selection = $getSelection();
+                if ($isRangeSelection(selection)) selection.insertRawText(textContent);
+            }
+        });
+    };
+    return /*#__PURE__*/ jsxs(DropDown, {
+        disabled: disabled,
+        buttonClassName: "toolbar-item block-controls",
+        buttonIconClassName: `icon block-type ${blockType}`,
+        buttonLabel: blockTypeToBlockName[blockType],
+        buttonAriaLabel: "Formatting options for text style",
+        children: [
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('paragraph' === blockType)}`,
+                onClick: formatParagraph,
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon paragraph"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Normal"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('h1' === blockType)}`,
+                onClick: ()=>{
+                    formatHeading('h1');
+                },
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon h1"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Heading 1"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('h2' === blockType)}`,
+                onClick: ()=>{
+                    formatHeading('h2');
+                },
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon h2"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Heading 2"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('h3' === blockType)}`,
+                onClick: ()=>{
+                    formatHeading('h3');
+                },
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon h3"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Heading 3"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('h4' === blockType)}`,
+                onClick: ()=>{
+                    formatHeading('h4');
+                },
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon h4"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Heading 4"
+                    })
+                ]
+            }),
+            listPlugin && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs(DropDownItem, {
+                        className: `item ${dropDownActiveClass('bullet' === blockType)}`,
+                        onClick: formatBulletList,
+                        children: [
+                            /*#__PURE__*/ jsx("i", {
+                                className: "icon bullet-list"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text",
+                                children: "Bullet List"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(DropDownItem, {
+                        className: `item ${dropDownActiveClass('number' === blockType)}`,
+                        onClick: formatNumberedList,
+                        children: [
+                            /*#__PURE__*/ jsx("i", {
+                                className: "icon numbered-list"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text",
+                                children: "Numbered List"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            checkListPlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('check' === blockType)}`,
+                onClick: formatCheckList,
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon check-list"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Check List"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('quote' === blockType)}`,
+                onClick: formatQuote,
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon quote"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Quote"
+                    })
+                ]
+            }),
+            codeHighlightPlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                className: `item ${dropDownActiveClass('code' === blockType)}`,
+                onClick: formatCode,
+                children: [
+                    /*#__PURE__*/ jsx("i", {
+                        className: "icon code"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text",
+                        children: "Code Block"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function Divider() {
+    return /*#__PURE__*/ jsx("div", {
+        className: "divider"
+    });
+}
+function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [rootType, setRootType] = useState('root');
+    const [selectedElementKey, setSelectedElementKey] = useState(null);
+    const [_toggleAiDrawerCommand, _setToggleAiDrawerCommand] = useState(null);
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+    const [isSubscript, setIsSubscript] = useState(false);
+    const [isSuperscript, setIsSuperscript] = useState(false);
+    const [isCode, setIsCode] = useState(false);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [isRTL, _setIsRTL] = useState(false);
+    const [codeLanguage, setCodeLanguage] = useState('');
+    const [isEditable, setIsEditable] = useState(()=>editor.isEditable());
+    const { items: toolbarExtensionItems } = useToolbarExtensions();
+    const { uuid, config: { options: { textAlignment, tablePlugin, inlineImagePlugin, admonitionPlugin, horizontalRulePlugin, layoutPlugin, autoEmbedPlugin, undoRedo, textStyle, inlineCode, links } } } = useEditorConfig();
+    const $updateToolbar = useCallback(()=>{
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            let element = 'root' === anchorNode.getKey() ? anchorNode : $findMatchingParent(anchorNode, (e)=>{
+                const parent = e.getParent();
+                return null !== parent && $isRootOrShadowRoot(parent);
+            });
+            if (null === element) element = anchorNode.getTopLevelElementOrThrow();
+            const elementKey = element.getKey();
+            const elementDOM = activeEditor.getElementByKey(elementKey);
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+            setIsSubscript(selection.hasFormat("subscript"));
+            setIsSuperscript(selection.hasFormat("superscript"));
+            setIsCode(selection.hasFormat('code'));
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            $isLinkNode(parent) || $isLinkNode(node) ? setIsLink(true) : setIsLink(false);
+            const tableNode = $findMatchingParent(node, $isTableNode);
+            $isTableNode(tableNode) ? setRootType('table') : setRootType('root');
+            if (null !== elementDOM) {
+                setSelectedElementKey(elementKey);
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = null != parentList ? parentList.getListType() : element.getListType();
+                    setBlockType(type);
+                } else {
+                    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+                    if (type in blockTypeToBlockName) setBlockType(type);
+                    if ($isCodeNode(element)) {
+                        const language = element.getLanguage();
+                        setCodeLanguage(null != language ? CODE_LANGUAGE_MAP[language] ?? language : '');
+                    }
+                }
+            }
+        }
+    }, [
+        activeEditor
+    ]);
+    useEffect(()=>editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor)=>{
+            $updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), [
+        editor,
+        $updateToolbar
+    ]);
+    useEffect(()=>mergeRegister(editor.registerEditableListener((editable)=>{
+            setIsEditable(editable);
+        }), activeEditor.registerUpdateListener(({ editorState })=>{
+            editorState.read(()=>{
+                $updateToolbar();
+            });
+        }), activeEditor.registerCommand(CAN_UNDO_COMMAND, (payload)=>{
+            setCanUndo(payload);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), activeEditor.registerCommand(CAN_REDO_COMMAND, (payload)=>{
+            setCanRedo(payload);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL)), [
+        $updateToolbar,
+        activeEditor,
+        editor
+    ]);
+    useEffect(()=>activeEditor.registerCommand(KEY_MODIFIER_COMMAND, (payload)=>{
+            const event = payload;
+            const { code, ctrlKey, metaKey } = event;
+            if ('KeyK' === code && (ctrlKey || metaKey)) {
+                event.preventDefault();
+                return activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
+            }
+            return false;
+        }, COMMAND_PRIORITY_NORMAL), [
+        activeEditor
+    ]);
+    const clearFormatting = useCallback(()=>{
+        activeEditor.update(()=>{
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                const focus = selection.focus;
+                const nodes = selection.getNodes();
+                if (anchor.key === focus.key && anchor.offset === focus.offset) return;
+                nodes.forEach((node, idx)=>{
+                    if ($isTextNode(node)) {
+                        let textNode = node;
+                        if (0 === idx && 0 !== anchor.offset) textNode = textNode.splitText(anchor.offset)[1] ?? textNode;
+                        if (idx === nodes.length - 1) textNode = textNode.splitText(focus.offset)[0] ?? textNode;
+                        if ('' !== textNode.__style) textNode.setStyle('');
+                        if (0 !== textNode.__format) {
+                            textNode.setFormat(0);
+                            $getNearestBlockElementAncestorOrThrow(textNode).setFormat('');
+                        }
+                    } else if ($isHeadingNode(node) || $isQuoteNode(node)) node.replace($createParagraphNode(), true);
+                    else if ($isDecoratorBlockNode(node)) node.setFormat('');
+                });
+            }
+        });
+    }, [
+        activeEditor
+    ]);
+    const insertLink = useCallback(()=>{
+        if (isLink) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        else {
+            const editorState = activeEditor.getEditorState();
+            editorState.read(()=>{
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    if (selection.focus.offset !== selection.anchor.offset) {
+                        const linkAttributes = {
+                            linkType: 'custom',
+                            url: 'https://'
+                        };
+                        editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkAttributes);
+                        editor.dispatchCommand(OPEN_LINK_MODAL_COMMAND, void 0);
+                    }
+                }
+            });
+        }
+    }, [
+        editor,
+        isLink,
+        activeEditor
+    ]);
+    const onCodeLanguageSelect = useCallback((value)=>{
+        activeEditor.update(()=>{
+            if (null !== selectedElementKey) {
+                const node = $getNodeByKey(selectedElementKey);
+                if ($isCodeNode(node)) node.setLanguage(value);
+            }
+        });
+    }, [
+        activeEditor,
+        selectedElementKey
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "toolbar",
+        children: [
+            undoRedo && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: !canUndo || !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(UNDO_COMMAND, void 0);
+                        },
+                        title: IS_APPLE ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)',
+                        type: "button",
+                        className: "toolbar-item spaced",
+                        "aria-label": "Undo",
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format undo"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: !canRedo || !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(REDO_COMMAND, void 0);
+                        },
+                        title: IS_APPLE ? 'Redo (⌘Y)' : 'Redo (Ctrl+Y)',
+                        type: "button",
+                        className: "toolbar-item",
+                        "aria-label": "Redo",
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format redo"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Divider, {})
+                ]
+            }),
+            blockType in blockTypeToBlockName && activeEditor === editor && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    textStyle && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(BlockFormatDropDown, {
+                                disabled: !isEditable,
+                                blockType: blockType,
+                                rootType: rootType,
+                                editor: editor
+                            }),
+                            /*#__PURE__*/ jsx(Divider, {})
+                        ]
+                    }),
+                    textAlignment && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxs(DropDown, {
+                                disabled: !isEditable,
+                                buttonLabel: "Align",
+                                buttonIconClassName: "icon left-align",
+                                buttonClassName: "toolbar-item spaced alignment",
+                                buttonAriaLabel: "Formatting options for text alignment",
+                                children: [
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon left-align"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Left Align"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon center-align"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Center Align"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon right-align"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Right Align"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon justify-align"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Justify Align"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Divider, {}),
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, void 0);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: `icon ${isRTL ? 'indent' : 'outdent'}`
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Outdent"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, void 0);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: `icon ${isRTL ? 'outdent' : 'indent'}`
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Indent"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Divider, {})
+                        ]
+                    })
+                ]
+            }),
+            'code' === blockType ? /*#__PURE__*/ jsx(DropDown, {
+                disabled: !isEditable,
+                buttonClassName: "toolbar-item code-language",
+                buttonLabel: getLanguageFriendlyName(codeLanguage),
+                buttonAriaLabel: "Select language",
+                children: CODE_LANGUAGE_OPTIONS.map(([value, name])=>/*#__PURE__*/ jsx(DropDownItem, {
+                        className: `item ${dropDownActiveClass(value === codeLanguage)}`,
+                        onClick: ()=>{
+                            onCodeLanguageSelect(value);
+                        },
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "text",
+                            children: name
+                        })
+                    }, value))
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                        },
+                        className: `toolbar-item spaced ${isBold ? 'active' : ''}`,
+                        title: IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)',
+                        type: "button",
+                        "aria-label": `Format text as bold. Shortcut: ${IS_APPLE ? '⌘B' : 'Ctrl+B'}`,
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format bold"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                        },
+                        className: `toolbar-item spaced ${isItalic ? 'active' : ''}`,
+                        title: IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)',
+                        type: "button",
+                        "aria-label": `Format text as italics. Shortcut: ${IS_APPLE ? '⌘I' : 'Ctrl+I'}`,
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format italic"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        disabled: !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                        },
+                        className: `toolbar-item spaced ${isUnderline ? 'active' : ''}`,
+                        title: IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)',
+                        type: "button",
+                        "aria-label": `Format text to underlined. Shortcut: ${IS_APPLE ? '⌘U' : 'Ctrl+U'}`,
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format underline"
+                        })
+                    }),
+                    inlineCode && /*#__PURE__*/ jsx("button", {
+                        disabled: !isEditable,
+                        onClick: ()=>{
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                        },
+                        className: `toolbar-item spaced ${isCode ? 'active' : ''}`,
+                        title: "Insert code block",
+                        type: "button",
+                        "aria-label": "Insert code block",
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format code"
+                        })
+                    }),
+                    links && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: !isEditable,
+                        onClick: insertLink,
+                        className: `toolbar-item spaced ${isLink ? 'active' : ''}`,
+                        "aria-label": "Insert link",
+                        title: "Insert link",
+                        children: /*#__PURE__*/ jsx("i", {
+                            className: "format link"
+                        })
+                    }, "link"),
+                    /*#__PURE__*/ jsxs(DropDown, {
+                        disabled: !isEditable,
+                        buttonClassName: "toolbar-item spaced",
+                        buttonLabel: "",
+                        buttonAriaLabel: "Formatting options for additional text styles",
+                        buttonIconClassName: "icon dropdown-more",
+                        children: [
+                            /*#__PURE__*/ jsxs(DropDownItem, {
+                                onClick: ()=>{
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                                },
+                                className: `item ${dropDownActiveClass(isStrikethrough)}`,
+                                title: "Strikethrough",
+                                "aria-label": "Format text with a strikethrough",
+                                children: [
+                                    /*#__PURE__*/ jsx("i", {
+                                        className: "icon strikethrough"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text",
+                                        children: "Strikethrough"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropDownItem, {
+                                onClick: ()=>{
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+                                },
+                                className: `item ${dropDownActiveClass(isSubscript)}`,
+                                title: "Subscript",
+                                "aria-label": "Format text with a subscript",
+                                children: [
+                                    /*#__PURE__*/ jsx("i", {
+                                        className: "icon subscript"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text",
+                                        children: "Subscript"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropDownItem, {
+                                onClick: ()=>{
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+                                },
+                                className: `item ${dropDownActiveClass(isSuperscript)}`,
+                                title: "Superscript",
+                                "aria-label": "Format text with a superscript",
+                                children: [
+                                    /*#__PURE__*/ jsx("i", {
+                                        className: "icon superscript"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text",
+                                        children: "Superscript"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(DropDownItem, {
+                                onClick: clearFormatting,
+                                className: "item",
+                                title: "Clear text formatting",
+                                "aria-label": "Clear all text formatting",
+                                children: [
+                                    /*#__PURE__*/ jsx("i", {
+                                        className: "icon clear"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "text",
+                                        children: "Clear Formatting"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    activeEditor === editor && (horizontalRulePlugin || inlineImagePlugin || tablePlugin || admonitionPlugin) && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Divider, {}),
+                            /*#__PURE__*/ jsxs(DropDown, {
+                                disabled: !isEditable,
+                                buttonClassName: "toolbar-item spaced",
+                                buttonLabel: "Insert",
+                                buttonAriaLabel: "Insert specialized editor node",
+                                buttonIconClassName: "icon plus",
+                                children: [
+                                    horizontalRulePlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon horizontal-rule"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Horizontal Rule"
+                                            })
+                                        ]
+                                    }),
+                                    layoutPlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(OPEN_INSERT_LAYOUT_MODAL_COMMAND, null);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon columns"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Columns Layout"
+                                            })
+                                        ]
+                                    }),
+                                    admonitionPlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(OPEN_ADMONITION_MODAL_COMMAND, null);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon admonition"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Admonition"
+                                            })
+                                        ]
+                                    }),
+                                    inlineImagePlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(OPEN_INLINE_IMAGE_MODAL_COMMAND, null);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon image"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Inline Image"
+                                            })
+                                        ]
+                                    }),
+                                    tablePlugin && /*#__PURE__*/ jsxs(DropDownItem, {
+                                        onClick: ()=>{
+                                            activeEditor.dispatchCommand(OPEN_TABLE_MODAL_COMMAND, null);
+                                        },
+                                        className: "item",
+                                        children: [
+                                            /*#__PURE__*/ jsx("i", {
+                                                className: "icon table"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "text",
+                                                children: "Table"
+                                            })
+                                        ]
+                                    }),
+                                    autoEmbedPlugin && EmbedConfigs.map((embedConfig)=>/*#__PURE__*/ jsxs(DropDownItem, {
+                                            onClick: ()=>{
+                                                activeEditor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type);
+                                            },
+                                            className: "item",
+                                            children: [
+                                                embedConfig.icon,
+                                                /*#__PURE__*/ jsx("span", {
+                                                    className: "text",
+                                                    children: embedConfig.contentName
+                                                })
+                                            ]
+                                        }, embedConfig.type))
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            toolbarExtensionItems.slice().sort((a, b)=>(a.order ?? 0) - (b.order ?? 0)).map((item)=>/*#__PURE__*/ jsx(external_react_Fragment, {
+                    children: item.node
+                }, item.id))
+        ]
+    });
+}
+export { ToolbarPlugin };