@blocklet/editor-lite 2.6.0

package/lib/main/plugins/ToolbarPlugin/index.js

@@ -0,0 +1,467 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { $createCodeNode, $isCodeNode, CODE_LANGUAGE_FRIENDLY_NAME_MAP, CODE_LANGUAGE_MAP, getLanguageFriendlyName, } from '@lexical/code';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from '@lexical/rich-text';
+import { $getSelectionStyleValueForProperty, $patchStyleText, $selectAll, $setBlocksType, } from '@lexical/selection';
+import { $findMatchingParent, $getNearestBlockElementAncestorOrThrow, $getNearestNodeOfType, mergeRegister, } from '@lexical/utils';
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isTextNode, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import { useEditorConfig } from '../../../config';
+import { IS_APPLE } from '../../../shared/environment';
+import useHasNodes from '../../hooks/useHasNodes';
+import useModal from '../../hooks/useModal';
+// import catTypingGif from "../../images/cat-typing.gif";
+import ColorPicker from '../../ui/ColorPicker';
+import DropDown, { DropDownItem } from '../../ui/DropDown';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { sanitizeUrl } from '../../utils/sanitizeUrl';
+// import { EmbedConfigs } from "../AutoEmbedPlugin";
+// import { INSERT_COLLAPSIBLE_COMMAND } from "../CollapsiblePlugin";
+// import { INSERT_EXCALIDRAW_COMMAND } from "../ExcalidrawPlugin";
+import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
+import { uploadFile, INSERT_COMPONENT_COMMAND } from '../ComponentPickerPlugin';
+// import { InsertNewTableDialog, InsertTableDialog } from "../TablePlugin";
+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, disabled = false, }) {
+    const hasNodes = useHasNodes();
+    const formatParagraph = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            $setBlocksType(selection, () => $createParagraphNode());
+        });
+    };
+    const formatHeading = (headingSize) => {
+        if (blockType !== headingSize) {
+            editor.update(() => {
+                const selection = $getSelection();
+                $setBlocksType(selection, () => $createHeadingNode(headingSize));
+            });
+        }
+    };
+    const formatBulletList = () => {
+        if (blockType !== 'bullet') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatCheckList = () => {
+        if (blockType !== 'check') {
+            editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatNumberedList = () => {
+        if (blockType !== 'number') {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatQuote = () => {
+        if (blockType !== 'quote') {
+            editor.update(() => {
+                const selection = $getSelection();
+                $setBlocksType(selection, () => $createQuoteNode());
+            });
+        }
+    };
+    const formatCode = () => {
+        if (blockType !== 'code') {
+            editor.update(() => {
+                let selection = $getSelection();
+                if (selection !== null) {
+                    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);
+                    }
+                }
+            });
+        }
+    };
+    const icons = {
+        paragraph: 'tabler:letter-case',
+        h1: 'tabler:h-1',
+        h2: 'tabler:h-2',
+        h3: 'tabler:h-3',
+        bullet: 'tabler:list',
+        number: 'tabler:list-numbers',
+        check: 'tabler:list-details',
+        quote: 'tabler:quote',
+        code: 'tabler:code',
+    };
+    return (_jsxs(DropDown, { disabled: disabled, buttonClassName: "toolbar-item", buttonIconClassName: "iconify", buttonIconData: icons[blockType], buttonLabel: blockTypeToBlockName[blockType], buttonAriaLabel: "Formatting options for text style", children: [_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'paragraph')}`, onClick: formatParagraph, children: [_jsx("i", { className: "iconify", "data-icon": icons.paragraph }), _jsx("span", { className: "text", children: "Normal" })] }), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h1')}`, onClick: () => formatHeading('h1'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h1 }), _jsx("span", { className: "text", children: "Heading 1" })] })), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h2')}`, onClick: () => formatHeading('h2'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h2 }), _jsx("span", { className: "text", children: "Heading 2" })] })), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h3')}`, onClick: () => formatHeading('h3'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h3 }), _jsx("span", { className: "text", children: "Heading 3" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'bullet')}`, onClick: formatBulletList, children: [_jsx("i", { className: "iconify", "data-icon": icons.bullet }), _jsx("span", { className: "text", children: "Bullet List" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'number')}`, onClick: formatNumberedList, children: [_jsx("i", { className: "iconify", "data-icon": icons.number }), _jsx("span", { className: "text", children: "Numbered List" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'check')}`, onClick: formatCheckList, children: [_jsx("i", { className: "iconify", "data-icon": icons.check }), _jsx("span", { className: "text", children: "Check List" })] })), hasNodes('quote') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'quote')}`, onClick: formatQuote, children: [_jsx("i", { className: "iconify", "data-icon": icons.quote }), _jsx("span", { className: "text", children: "Quote" })] })), hasNodes('code') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'code')}`, onClick: formatCode, children: [_jsx("i", { className: "iconify", "data-icon": icons.code }), _jsx("span", { className: "text", children: "Code Block" })] }))] }));
+}
+function Divider() {
+    const theme = useTheme();
+    return _jsx("div", { className: "divider", style: { backgroundColor: theme.palette.divider } });
+}
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [selectedElementKey, setSelectedElementKey] = useState(null);
+    const [fontColor, setFontColor] = useState('#000');
+    const [bgColor, setBgColor] = useState('#fff');
+    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 [modal, showModal] = useModal();
+    const [codeLanguage, setCodeLanguage] = useState('');
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const hasNodes = useHasNodes();
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            let element = anchorNode.getKey() === 'root'
+                ? anchorNode
+                : $findMatchingParent(anchorNode, (e) => {
+                    const parent = e.getParent();
+                    return parent !== null && $isRootOrShadowRoot(parent);
+                });
+            if (element === null) {
+                element = anchorNode.getTopLevelElementOrThrow();
+            }
+            const elementKey = element.getKey();
+            const elementDOM = activeEditor.getElementByKey(elementKey);
+            // Update text format
+            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'));
+            // Update links
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            if ($isLinkNode(parent) || $isLinkNode(node)) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+            if (elementDOM !== null) {
+                setSelectedElementKey(elementKey);
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = 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(language ? CODE_LANGUAGE_MAP[language] || language : '');
+                        return;
+                    }
+                }
+            }
+            // Handle buttons
+            if ($getSelectionStyleValueForProperty(selection, 'color', '#000')) {
+                setFontColor($getSelectionStyleValueForProperty(selection, 'color', '#000'));
+            }
+            if ($getSelectionStyleValueForProperty(selection, 'background-color', '#fff')) {
+                setBgColor($getSelectionStyleValueForProperty(selection, 'background-color', '#fff'));
+            }
+        }
+    }, [activeEditor]);
+    useEffect(() => {
+        return editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL);
+    }, [editor, updateToolbar]);
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }), activeEditor.registerUpdateListener((payload) => {
+            if (!payload)
+                return;
+            const { editorState } = payload;
+            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));
+    }, [activeEditor, editor, updateToolbar]);
+    const applyStyleText = useCallback((styles) => {
+        activeEditor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $patchStyleText(selection, styles);
+            }
+        });
+    }, [activeEditor]);
+    const clearFormatting = useCallback(() => {
+        activeEditor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $selectAll(selection);
+                selection.getNodes().forEach((node) => {
+                    if ($isTextNode(node)) {
+                        node.setFormat(0);
+                        node.setStyle('');
+                        $getNearestBlockElementAncestorOrThrow(node).setFormat('');
+                    }
+                    if ($isDecoratorBlockNode(node)) {
+                        node.setFormat('');
+                    }
+                });
+            }
+        });
+    }, [activeEditor]);
+    const onFontColorSelect = useCallback((value) => {
+        applyStyleText({ color: value });
+    }, [applyStyleText]);
+    const onBgColorSelect = useCallback((value) => {
+        applyStyleText({ 'background-color': value });
+    }, [applyStyleText]);
+    const insertLink = useCallback(() => {
+        if (!isLink) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
+        }
+        else {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    }, [editor, isLink]);
+    const onCodeLanguageSelect = useCallback((value) => {
+        activeEditor.update(() => {
+            if (selectedElementKey !== null) {
+                const node = $getNodeByKey(selectedElementKey);
+                if ($isCodeNode(node)) {
+                    node.setLanguage(value);
+                }
+            }
+        });
+    }, [activeEditor, selectedElementKey]);
+    const insertGifOnClick = (payload) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+    };
+    const { toolbar: toolbarConfig, minimalMode } = useEditorConfig();
+    const defaultItems = minimalMode
+        ? ['component', 'block', 'bold', 'italic', 'underline', 'media', 'code', 'link']
+        : [
+            'component',
+            'block',
+            'align',
+            'bold',
+            'italic',
+            'underline',
+            'media',
+            'code',
+            'link',
+            'color',
+            'bgcolor',
+            'strikethrough',
+        ];
+    const items = toolbarConfig?.items ?? defaultItems;
+    const menus = [];
+    for (const item of items) {
+        switch (item) {
+            case 'component': {
+                menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                        // add '/' to editor
+                        editor.dispatchCommand(INSERT_COMPONENT_COMMAND, '/');
+                    }, className: "toolbar-item spaced", title: "Component Picker", "aria-label": "Open component picker", children: _jsx("i", { className: "iconify", "data-icon": "tabler:circle-plus" }) }, item));
+                break;
+            }
+            case 'block': {
+                // minimalMode 不需要 'block', 但需要 'code (block)'
+                if (blockType in blockTypeToBlockName && activeEditor === editor && !minimalMode) {
+                    menus.push(_jsx(BlockFormatDropDown, { disabled: !isEditable, blockType: blockType, editor: editor }, "block")
+                    // <Divider key="block-divider" />
+                    );
+                }
+                if (blockType === 'code') {
+                    menus.push(_jsx(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item code-language", buttonLabel: getLanguageFriendlyName(codeLanguage), buttonAriaLabel: "Select language", children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
+                            return (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === codeLanguage)}`, onClick: () => onCodeLanguageSelect(value), children: _jsx("span", { className: "text", children: name }) }, value));
+                        }) }, "block-code"));
+                }
+                break;
+            }
+            case 'bold': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                        }, className: `toolbar-item spaced ${isBold ? 'active' : ''}`, title: IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)', "aria-label": `Format text as bold. Shortcut: ${IS_APPLE ? '⌘B' : 'Ctrl+B'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:bold" }) }, item));
+                }
+                break;
+            }
+            case 'italic': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                        }, className: `toolbar-item spaced ${isItalic ? 'active' : ''}`, title: IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)', "aria-label": `Format text as italics. Shortcut: ${IS_APPLE ? '⌘I' : 'Ctrl+I'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:italic" }) }, item));
+                }
+                break;
+            }
+            case 'underline': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                        }, className: `toolbar-item spaced ${isUnderline ? 'active' : ''}`, title: IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)', "aria-label": `Format text to underlined. Shortcut: ${IS_APPLE ? '⌘U' : 'Ctrl+U'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:underline" }) }, item));
+                }
+                break;
+            }
+            case 'code': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                        }, className: `toolbar-item code ${isCode ? 'active' : ''}`, title: "Insert code block", "aria-label": "Insert code block", children: _jsx("i", { className: "iconify", "data-icon": "tabler:code" }) }, item));
+                }
+                break;
+            }
+            case 'link': {
+                if (hasNodes('link') && blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: insertLink, className: `toolbar-item spaced link ${isLink ? 'active' : ''}`, "aria-label": "Insert link", title: "Insert link", children: _jsx("i", { className: "iconify", "data-icon": "tabler:link" }) }, item));
+                }
+                break;
+            }
+            case 'color': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting text color", buttonIconClassName: "iconify", buttonIconData: "tabler:text-color", color: fontColor, onChange: onFontColorSelect, title: "text color" }, item));
+                }
+                break;
+            }
+            case 'bgcolor': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting background color", buttonIconClassName: "iconify", buttonIconData: "tabler:bucket-droplet", color: bgColor, onChange: onBgColorSelect, title: "bg color" }, item));
+                }
+                break;
+            }
+            case 'strikethrough': {
+                if (blockType !== 'code') {
+                    menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced text-format-additional", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconData: "tabler:adjustments", buttonIconClassName: "iconify", children: [_jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                                }, className: `item ${dropDownActiveClass(isStrikethrough)}`, title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:strikethrough" }), _jsx("span", { className: "text", children: "Strikethrough" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+                                }, className: `item ${dropDownActiveClass(isSubscript)}`, title: "Subscript", "aria-label": "Format text with a subscript", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:subscript" }), _jsx("span", { className: "text", children: "Subscript" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+                                }, className: `item ${dropDownActiveClass(isSuperscript)}`, title: "Superscript", "aria-label": "Format text with a superscript", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:superscript" }), _jsx("span", { className: "text", children: "Superscript" })] }), _jsxs(DropDownItem, { onClick: clearFormatting, className: "item", title: "Clear text formatting", "aria-label": "Clear all text formatting", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:clear-formatting" }), _jsx("span", { className: "text", children: "Clear Formatting" })] })] }, item));
+                }
+                break;
+            }
+            case 'align': {
+                const icons = {
+                    left: 'tabler:align-left',
+                    center: 'tabler:align-center',
+                    right: 'tabler:align-right',
+                    justify: 'tabler:align-justified',
+                    outdent: 'tabler:indent-decrease',
+                    indent: 'tabler:indent-increase',
+                };
+                menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonIconClassName: "iconify", buttonIconData: icons.left, buttonClassName: "toolbar-item spaced alignment", buttonAriaLabel: "Formatting options for text alignment", children: [_jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.left }), _jsx("span", { className: "text", children: "Left Align" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.center }), _jsx("span", { className: "text", children: "Center Align" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.right }), _jsx("span", { className: "text", children: "Right Align" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.justify }), _jsx("span", { className: "text", children: "Justify Align" })] }), _jsx(Divider, {}), _jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.outdent }), _jsx("span", { className: "text", children: "Outdent" })] }), _jsxs(DropDownItem, { onClick: () => {
+                                activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+                            }, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.indent }), _jsx("span", { className: "text", children: "Indent" })] })] }, item));
+                break;
+            }
+            case 'media': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            uploadFile(editor);
+                        }, className: `toolbar-item spaced ${isCode ? 'active' : ''}`, title: "Upload Image", "aria-label": "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "tabler:photo" }) }, item));
+                }
+                break;
+            }
+            default:
+                console.warn(`Unsupported toolbar item ${item}`);
+        }
+    }
+    if (menus.length === 0) {
+        return null;
+    }
+    return (_jsxs(Box, { className: "toolbar", sx: {
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+            height: 'auto',
+            bgcolor: 'background.paper',
+            '& button.toolbar-item, & button.toolbar-item .text': {
+                color: 'text.primary',
+            },
+            '& button.toolbar-item.active': {
+                backgroundColor: 'action.selected',
+            },
+            '& .toolbar-item:hover:not([disabled])': {
+                backgroundColor: 'action.hover',
+            },
+        }, children: [menus, modal] }));
+}
+const FormatButton = styled.button `
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  .iconify {
+    opacity: 0.6;
+  }
+`;

package/lib/main/plugins/TreeViewPlugin/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+export default function TreeViewPlugin(): JSX.Element;

package/lib/main/plugins/TreeViewPlugin/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { TreeView } from '@lexical/react/LexicalTreeView';
+export default function TreeViewPlugin() {
+    const [editor] = useLexicalComposerContext();
+    return (_jsx(TreeView, { viewClassName: "tree-view-output", treeTypeButtonClassName: "debug-treetype-button", timeTravelPanelClassName: "debug-timetravel-panel", timeTravelButtonClassName: "debug-timetravel-button", timeTravelPanelSliderClassName: "debug-timetravel-panel-slider", timeTravelPanelButtonClassName: "debug-timetravel-panel-button", editor: editor }));
+}

package/lib/main/plugins/TwitterPlugin/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+export declare const INSERT_TWEET_COMMAND: LexicalCommand<string>;
+export default function TwitterPlugin(): JSX.Element | null;

package/lib/main/plugins/TwitterPlugin/index.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { $createTweetNode, TweetNode } from '../../nodes/TweetNode';
+export const INSERT_TWEET_COMMAND = createCommand('INSERT_TWEET_COMMAND');
+export default function TwitterPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([TweetNode])) {
+            throw new Error('TwitterPlugin: TweetNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_TWEET_COMMAND, (payload) => {
+            const tweetNode = $createTweetNode(payload);
+            $insertNodeToNearestRoot(tweetNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/TypingPerfPlugin/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { type JSX } from 'react';
+export default function TypingPerfPlugin(): JSX.Element | null;

package/lib/main/plugins/TypingPerfPlugin/index.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useEffect } from 'react';
+import useReport from '../../hooks/useReport';
+const validInputTypes = new Set([
+    'insertText',
+    'insertCompositionText',
+    'insertFromComposition',
+    'insertLineBreak',
+    'insertParagraph',
+    'deleteCompositionText',
+    'deleteContentBackward',
+    'deleteByComposition',
+    'deleteContent',
+    'deleteContentForward',
+    'deleteWordBackward',
+    'deleteWordForward',
+    'deleteHardLineBackward',
+    'deleteSoftLineBackward',
+    'deleteHardLineForward',
+    'deleteSoftLineForward',
+]);
+export default function TypingPerfPlugin() {
+    const report = useReport();
+    useEffect(() => {
+        let start = 0;
+        let timerId;
+        let keyPressTimerId;
+        let log = [];
+        let invalidatingEvent = false;
+        const measureEventEnd = function logKeyPress() {
+            if (keyPressTimerId != null) {
+                if (invalidatingEvent) {
+                    invalidatingEvent = false;
+                }
+                else {
+                    log.push(performance.now() - start);
+                }
+                clearTimeout(keyPressTimerId);
+                keyPressTimerId = null;
+            }
+        };
+        const measureEventStart = function measureEvent() {
+            if (timerId != null) {
+                clearTimeout(timerId);
+                timerId = null;
+            }
+            // We use a setTimeout(0) instead of requestAnimationFrame, due to
+            // inconsistencies between the sequencing of rAF in different browsers.
+            keyPressTimerId = setTimeout(measureEventEnd, 0);
+            // Schedule a timer to report the results.
+            timerId = setTimeout(() => {
+                const total = log.reduce((a, b) => a + b, 0);
+                const reportedText = `Typing Perf: ${Math.round((total / log.length) * 100) / 100}ms`;
+                report(reportedText);
+                log = [];
+            }, 2000);
+            // Make the time after we do the previous logic, so we don't measure the overhead
+            // for it all.
+            start = performance.now();
+        };
+        const beforeInputHandler = function beforeInputHandler(event) {
+            if (!validInputTypes.has(event.inputType) || invalidatingEvent) {
+                invalidatingEvent = false;
+                return;
+            }
+            measureEventStart();
+        };
+        const keyDownHandler = function keyDownHandler(event) {
+            const { keyCode } = event;
+            if (keyCode === 8 || keyCode === 13) {
+                measureEventStart();
+            }
+        };
+        const pasteHandler = function pasteHandler() {
+            invalidatingEvent = true;
+        };
+        const cutHandler = function cutHandler() {
+            invalidatingEvent = true;
+        };
+        window.addEventListener('keydown', keyDownHandler, true);
+        window.addEventListener('selectionchange', measureEventEnd, true);
+        window.addEventListener('beforeinput', beforeInputHandler, true);
+        window.addEventListener('paste', pasteHandler, true);
+        window.addEventListener('cut', cutHandler, true);
+        return () => {
+            window.removeEventListener('keydown', keyDownHandler, true);
+            window.removeEventListener('selectionchange', measureEventEnd, true);
+            window.removeEventListener('beforeinput', beforeInputHandler, true);
+            window.removeEventListener('paste', pasteHandler, true);
+            window.removeEventListener('cut', cutHandler, true);
+        };
+    }, [report]);
+    return null;
+}

package/lib/main/plugins/YouTubePlugin/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+export declare const INSERT_YOUTUBE_COMMAND: LexicalCommand<string>;
+export default function YouTubePlugin(): JSX.Element | null;