@blocklet/editor-lite 2.6.0

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

@@ -0,0 +1,438 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { $createCodeNode } from '@lexical/code';
+import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
+import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $wrapNodes } from '@lexical/selection';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
+import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, createCommand, $insertNodes, $createTextNode, COMMAND_PRIORITY_EDITOR, $setSelection, } from 'lexical';
+import { mergeRegister } from '@lexical/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '@mui/material';
+import { LexicalTypeaheadMenuPlugin, TypeaheadOption, useBasicTypeaheadTriggerMatch, } from '../LexicalTypeaheadMenuPlugin';
+import useHasNodes from '../../hooks/useHasNodes';
+import useModal from '../../hooks/useModal';
+import { EmbedConfigs } from '../AutoEmbedPlugin';
+import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
+import { INSERT_EXCALIDRAW_COMMAND } from '../ExcalidrawPlugin';
+import { INSERT_IMAGE_COMMAND, isImage } from '../ImagesPlugin';
+import { InsertTableDialog } from '../TablePlugin';
+import { useEditorConfig } from '../../../config';
+import createPortal from '../../../components/createPortal';
+import { $insertAlert } from '../../../ext/Alert/AlertPlugin';
+import { INSERT_VIDEO_COMMAND, isVideo } from '../../../ext/VideoPlugin';
+import { INSERT_FILE_COMMAND } from '../../../ext/FilePlugin';
+import { icons } from '../../icons';
+import { clearRecentUploads, preventDuplicateUploadSuccess } from '../../utils/prevent-duplicate-upload';
+class ComponentPickerOption extends TypeaheadOption {
+    // What shows up in the editor
+    title;
+    // Icon for display
+    icon;
+    // For extra searching.
+    keywords;
+    // TBD
+    keyboardShortcut;
+    // What happens when you select this option?
+    onSelect;
+    constructor(title, options) {
+        super(title);
+        this.title = title;
+        this.key = options.key || title;
+        this.keywords = options.keywords || [];
+        this.icon = options.icon;
+        this.keyboardShortcut = options.keyboardShortcut;
+        this.onSelect = options.onSelect.bind(this);
+    }
+}
+function ComponentPickerMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (_jsxs(Box, { component: "li", tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: `typeahead-item-${index}`, onMouseEnter: onMouseEnter, onClick: onClick, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            svg: {
+                width: '1em',
+                height: '1em',
+                fontSize: 20,
+                color: 'text.secondary',
+            },
+        }, children: [option.icon, _jsx("span", { className: "text", children: option.title })] }, option.key));
+}
+export const INSERT_COMPONENT_COMMAND = createCommand('INSERT_COMPONENT_COMMAND');
+export default function ComponentPickerMenuPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [modal, showModal] = useModal();
+    const [queryString, setQueryString] = useState(null);
+    const config = useEditorConfig();
+    const { minimalMode } = config;
+    const hasUploader = !!config.uploader;
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+        minLength: 0,
+    });
+    const getDynamicOptions = useCallback(() => {
+        const options = [];
+        if (queryString == null) {
+            return options;
+        }
+        const fullTableRegex = /^([1-9]|10)x([1-9]|10)$/;
+        const partialTableRegex = /^([1-9]|10)x?$/;
+        const fullTableMatch = fullTableRegex.exec(queryString);
+        const partialTableMatch = partialTableRegex.exec(queryString);
+        if (fullTableMatch) {
+            const [rows, columns] = fullTableMatch[0].split('x').map((n) => parseInt(n, 10));
+            options.push(new ComponentPickerOption(`${rows}x${columns} Table`, {
+                icon: _jsx("i", { className: "icon table" }),
+                keywords: ['table'],
+                onSelect: () => 
+                // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+                editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+            }));
+        }
+        else if (partialTableMatch) {
+            const rows = parseInt(partialTableMatch[0], 10);
+            options.push(...Array.from({ length: 5 }, (_, i) => i + 1).map((columns) => new ComponentPickerOption(`${rows}x${columns} Table`, {
+                icon: _jsx("i", { className: "icon table" }),
+                keywords: ['table'],
+                onSelect: () => 
+                // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+                editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+            })));
+        }
+        return options;
+    }, [editor, queryString]);
+    const hasNodes = useHasNodes();
+    const options = useMemo(() => {
+        const baseOptions = [
+            !minimalMode &&
+                new ComponentPickerOption('Paragraph', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.paragraph }),
+                    keywords: ['normal', 'paragraph', 'p', 'text'],
+                    onSelect: () => editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            $wrapNodes(selection, () => $createParagraphNode());
+                        }
+                    }),
+                }),
+            // isExistAiKit() &&
+            //   new ComponentPickerOption('AI Image', {
+            //     icon: <i className="iconify" data-icon="tabler:photo-ai" />,
+            //     keywords: ['ai image', 'image'],
+            //     onSelect: () => {
+            //       // @ts-ignore
+            //       if (window?.uploaderRef) {
+            //         // @ts-ignore
+            //         const uploader = window?.uploaderRef?.current?.getUploader();
+            //         // @ts-ignore
+            //         window?.uploaderRef?.current?.open('AI Image');
+            //         uploader.onceUploadSuccess(({ file, response }: any) => {
+            //           const { data } = response;
+            //           if (data?.filename) {
+            //             editor.dispatchCommand(INSERT_AI_IMAGE_COMMAND, [`/${data?.filename}`]);
+            //           }
+            //         });
+            //       } else {
+            //         showModal('AI Image', (onClose) => <AiImageModal onClose={onClose} />);
+            //       }
+            //     },
+            //   }),
+            ...(hasNodes('heading') && !minimalMode
+                ? Array.from({ length: 3 }, (_, i) => i + 1).map((n) => new ComponentPickerOption(`Heading ${n}`, {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons[`h${n}`] }),
+                    keywords: ['heading', 'header', `h${n}`],
+                    onSelect: () => editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            $wrapNodes(selection, () => 
+                            // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+                            $createHeadingNode(`h${n}`));
+                        }
+                    }),
+                }))
+                : []),
+            hasNodes('table') &&
+                !minimalMode &&
+                new ComponentPickerOption('Table', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.table }),
+                    keywords: ['table'],
+                    onSelect: () => showModal('Insert Table', (onClose) => _jsx(InsertTableDialog, { activeEditor: editor, onClose: onClose })),
+                }),
+            hasNodes('list', 'listitem') &&
+                !minimalMode &&
+                new ComponentPickerOption('Numbered List', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.number }),
+                    keywords: ['numbered list', 'ordered list', 'ol'],
+                    onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+                }),
+            hasNodes('list', 'listitem') &&
+                !minimalMode &&
+                new ComponentPickerOption('Bulleted List', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.bullet }),
+                    keywords: ['bulleted list', 'unordered list', 'ul'],
+                    onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+                }),
+            hasNodes('list', 'listitem') &&
+                !minimalMode &&
+                new ComponentPickerOption('Check List', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.check }),
+                    keywords: ['check list', 'todo list'],
+                    onSelect: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+                }),
+            !minimalMode &&
+                hasNodes('quote') &&
+                new ComponentPickerOption('Quote', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.quote }),
+                    keywords: ['block quote'],
+                    onSelect: () => editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            $wrapNodes(selection, () => $createQuoteNode());
+                        }
+                    }),
+                }),
+            !minimalMode &&
+                hasNodes('alert') &&
+                new ComponentPickerOption('Alert (Warning)', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
+                    keywords: ['alert', 'warning'],
+                    onSelect: () => $insertAlert(editor, 'warning'),
+                }),
+            !minimalMode &&
+                hasNodes('alert') &&
+                new ComponentPickerOption('Alert (Success)', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
+                    keywords: ['alert', 'success'],
+                    onSelect: () => $insertAlert(editor, 'success'),
+                }),
+            !minimalMode &&
+                hasNodes('alert') &&
+                new ComponentPickerOption('Alert (Info)', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
+                    keywords: ['alert', 'info'],
+                    onSelect: () => $insertAlert(editor, 'info'),
+                }),
+            !minimalMode &&
+                hasNodes('alert') &&
+                new ComponentPickerOption('Alert (Error)', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.alert }),
+                    keywords: ['alert', 'error'],
+                    onSelect: () => $insertAlert(editor, 'error'),
+                }),
+            hasNodes('code') &&
+                new ComponentPickerOption('Code', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.code }),
+                    keywords: ['javascript', 'python', 'js', 'codeblock'],
+                    onSelect: () => editor.update(() => {
+                        const selection = $getSelection();
+                        if ($isRangeSelection(selection)) {
+                            if (selection.isCollapsed()) {
+                                $wrapNodes(selection, () => $createCodeNode());
+                            }
+                            else {
+                                // Will this ever happen?
+                                const textContent = selection.getTextContent();
+                                const codeNode = $createCodeNode();
+                                selection.insertNodes([codeNode]);
+                                selection.insertRawText(textContent);
+                            }
+                        }
+                    }),
+                }),
+            !minimalMode &&
+                hasNodes('horizontalrule') &&
+                new ComponentPickerOption('Divider', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.divider }),
+                    keywords: ['horizontal rule', 'divider', 'hr'],
+                    onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+                }),
+            !minimalMode &&
+                hasNodes('excalidraw') &&
+                new ComponentPickerOption('Excalidraw', {
+                    icon: (_jsx(Box, { component: "span", className: "bg-excalidraw", sx: { display: 'inline-block', width: 20, height: 20 } })),
+                    keywords: ['excalidraw', 'diagram', 'drawing'],
+                    onSelect: () => editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined),
+                }),
+            ...(minimalMode
+                ? []
+                : EmbedConfigs.map((embedConfig) => hasNodes(embedConfig.type) &&
+                    new ComponentPickerOption(`Embed ${embedConfig.contentName}`, {
+                        icon: embedConfig.icon,
+                        keywords: [...embedConfig.keywords, 'embed'],
+                        onSelect: () => editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
+                    }))),
+            hasNodes('image') &&
+                hasUploader &&
+                new ComponentPickerOption('Media', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.media }),
+                    keywords: ['image', 'photo', 'picture', 'file', 'video', 'media', 'pdf'],
+                    onSelect: () => {
+                        uploadFile(editor);
+                    },
+                }),
+            // !minimalMode &&
+            //   new ComponentPickerOption('Templates', {
+            //     icon: <i className="iconify" data-icon={icons.template} />,
+            //     keywords: ['templates'],
+            //     onSelect: () => {
+            //       editor.dispatchCommand(INSERT_TEMPLATE_COMMAND, undefined);
+            //     },
+            //   }),
+            !minimalMode &&
+                hasNodes('collapsible-container') &&
+                new ComponentPickerOption('Collapsible', {
+                    icon: _jsx("i", { className: "iconify", "data-icon": icons.collapsible }),
+                    keywords: ['collapse', 'collapsible', 'toggle'],
+                    onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
+                }),
+            ...(minimalMode
+                ? []
+                : ['left', 'center', 'right', 'justify'].map((alignment) => new ComponentPickerOption(`Align ${alignment}`, {
+                    icon: (_jsx("i", { className: "iconify", "data-icon": icons[`align${alignment.charAt(0).toUpperCase() + alignment.slice(1)}`] })),
+                    keywords: ['align', 'justify', alignment],
+                    onSelect: () => 
+                    // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
+                }))),
+        ].filter(Boolean);
+        const dynamicOptions = getDynamicOptions();
+        return queryString
+            ? [
+                ...dynamicOptions,
+                ...baseOptions.filter((option) => {
+                    return new RegExp(queryString, 'gi').exec(option.title) || option.keywords != null
+                        ? option.keywords.some((keyword) => new RegExp(queryString, 'gi').exec(keyword))
+                        : false;
+                }),
+            ]
+            : baseOptions;
+    }, [editor, getDynamicOptions, queryString, showModal]);
+    const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
+        editor.update(() => {
+            if (nodeToRemove) {
+                nodeToRemove.remove();
+            }
+            selectedOption.onSelect(matchingString);
+            closeMenu();
+        });
+    }, [editor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(INSERT_COMPONENT_COMMAND, (payload) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                // if no selection, insert text node
+                if (!selection) {
+                    const textNode = $createTextNode(payload);
+                    $insertNodes([textNode]);
+                    return true;
+                }
+                // @ts-ignore
+                const anchorNode = selection?.anchor?.getNode();
+                const oldText = anchorNode?.getTextContent();
+                // check if has payload in current line
+                if (oldText?.endsWith(payload)) {
+                    // set selection to the end of the line
+                    anchorNode?.selectEnd();
+                }
+                else {
+                    // has content should add space before payload
+                    if (oldText.length > 0 && !oldText?.endsWith(' ')) {
+                        payload = ` ${payload}`;
+                    }
+                    const textNode = $createTextNode(payload);
+                    $insertNodes([textNode]);
+                }
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+                    return anchorElementRef.current && options.length
+                        ? createPortal(_jsx(Box, { className: "typeahead-popover component-picker-menu", sx: {
+                                border: 1,
+                                borderColor: 'divider',
+                                color: 'text.primary',
+                                bgcolor: 'background.default',
+                                'li.selected': {
+                                    bgcolor: 'action.selected',
+                                },
+                                'li:hover': {
+                                    bgcolor: 'action.hover',
+                                },
+                            }, children: _jsx("ul", { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                                        setHighlightedIndex(i);
+                                        selectOptionAndCleanUp(option);
+                                    }, onMouseEnter: () => {
+                                        setHighlightedIndex(i);
+                                    }, option: option }, option.key))) }) }), anchorElementRef.current)
+                        : null;
+                } })] }));
+}
+export const uploadFile = (editor) => {
+    // @ts-ignore
+    if (window?.uploaderRef) {
+        // @ts-ignore
+        const uploader = window?.uploaderRef?.current?.getUploader();
+        clearRecentUploads();
+        uploader.open();
+        // fix safari 下焦点问题. 相关: https://github.com/blocklet/media-kit/pull/412
+        editor.blur();
+        let selection = null;
+        // listen to all upload success
+        const handleUploadSuccess = ({ file, response }) => {
+            // missing the source: function-upload-file
+            if (file.source !== 'function-upload-file') {
+                const { data } = response;
+                if (data?.filename) {
+                    if (isVideo(data.filename) || isVideo(data.originalname)) {
+                        editor.dispatchCommand(INSERT_VIDEO_COMMAND, {
+                            src: `/${data.filename}`,
+                        });
+                    }
+                    else if (isImage(data.filename) || isImage(data.originalname)) {
+                        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                            src: `/${data.filename}`,
+                            altText: data.originalname,
+                        });
+                    }
+                    else {
+                        editor.dispatchCommand(INSERT_FILE_COMMAND, {
+                            src: `/${data.filename}`,
+                            name: data.originalname,
+                            mimetype: data.mimetype,
+                        });
+                    }
+                    // 上传图片成功后 -> 插入图片结点 -> 记住 selection (便于点击 Uploader 中的 Done 后恢复 selection)
+                    setTimeout(() => {
+                        selection = editor.getEditorState().read($getSelection);
+                    }, 10);
+                }
+            }
+        };
+        uploader.onUploadSuccess(preventDuplicateUploadSuccess(handleUploadSuccess));
+        // 点击 Uploader 中的 Done 后恢复 selection
+        uploader.onClose(() => {
+            uploader.removeFiles(uploader.getFiles().map((x) => x.id));
+            if (selection) {
+                editor.update(() => {
+                    $setSelection(selection.clone());
+                });
+            }
+        });
+    }
+    else {
+        throw new Error('Missing required `window.uploaderRef`');
+    }
+};

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

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ *
+ */
+export default function DragDropPaste(): null;

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { DRAG_DROP_PASTE } from '@lexical/rich-text';
+import { COMMAND_PRIORITY_LOW } from 'lexical';
+import { useEffect } from 'react';
+import { isMimeType } from '../../../lexical-utils';
+import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
+const ACCEPTABLE_IMAGE_TYPES = ['image/', 'image/heic', 'image/heif', 'image/gif', 'image/webp'];
+export default function DragDropPaste() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(DRAG_DROP_PASTE, (files) => {
+            (() => {
+                files = files.filter((i) => isMimeType(i, ACCEPTABLE_IMAGE_TYPES));
+                for (const file of files) {
+                    editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                        altText: file.name,
+                        file,
+                    });
+                }
+            })();
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/DraggableBlockPlugin/index.css

@@ -0,0 +1,36 @@
+.draggable-block-menu {
+  border-radius: 4px;
+  padding: 2px 1px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+}
+
+.draggable-block-menu .icon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.3;
+  background-image: url(../../images/icons/draggable-block-menu.svg);
+}
+
+.draggable-block-menu:active {
+  cursor: grabbing;
+}
+
+.draggable-block-menu:hover {
+  background-color: #efefef;
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * 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 './index.css';
+import { type JSX } from 'react';
+export default function DraggableBlockPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): JSX.Element;