@blocklet/editor 2.0.6 → 2.0.9

package/lib/main/markdown-editor/editor.d.ts

@@ -0,0 +1,14 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { LexicalEditor } from 'lexical';
+export interface EditorProps {
+    children?: ReactNode;
+    placeholder?: ReactNode;
+    onChange?: (markdown: string) => void;
+    autoFocus?: boolean;
+    showToolbar?: boolean;
+    editorRef?: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+    onReady?: () => void;
+    enableHeadingsIdPlugin?: boolean;
+    mediaUrlPrefix?: string;
+}
+export default function Editor({ children, placeholder, onChange, autoFocus, showToolbar, editorRef, onReady, enableHeadingsIdPlugin, mediaUrlPrefix, }: EditorProps): JSX.Element;

package/lib/main/markdown-editor/editor.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import styled from '@emotion/styled';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
+import { useEffect, useState } from 'react';
+import { $convertToMarkdownString } from '@lexical/markdown';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import useHasNodes from '../hooks/useHasNodes';
+import AutoLinkPlugin from '../plugins/AutoLinkPlugin';
+import ClickableLinkPlugin from '../plugins/ClickableLinkPlugin';
+import CodeActionMenuPlugin from '../plugins/CodeActionMenuPlugin';
+import CodeHighlightPlugin from '../plugins/CodeHighlightPlugin';
+import DragDropPaste from '../plugins/DragDropPastePlugin';
+import DraggableBlockPlugin from '../plugins/DraggableBlockPlugin';
+import FloatingLinkEditorPlugin from '../plugins/FloatingLinkEditorPlugin';
+import FloatingTextFormatToolbarPlugin from '../plugins/FloatingTextFormatToolbarPlugin';
+import HorizontalRulePlugin from '../plugins/HorizontalRulePlugin';
+import ImagesPlugin from '../plugins/ImagesPlugin';
+import ListMaxIndentLevelPlugin from '../plugins/ListMaxIndentLevelPlugin';
+import MarkdownShortcutPlugin from '../plugins/MarkdownShortcutPlugin';
+import TabFocusPlugin from '../plugins/TabFocusPlugin';
+import ContentEditable from '../ui/ContentEditable';
+import Placeholder from '../ui/Placeholder';
+import { useEditorConfig } from '../../config';
+import SelectBlockPlugin from '../../ext/SelectBlockPlugin';
+import RemoveListPlugin from '../../ext/RemoveListPlugin';
+import MarkdownHeadTextPlugin from '../../ext/HeadTextPlugin';
+import { EditorRefPlugin } from '../../ext/LexicalEditorRefPlugin';
+import { HeadingsIdPlugin } from '../../ext/HeadingsIdPlugin';
+import { EditorReadyPlugin } from '../../ext/EditorReadyPlugin';
+import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { TRANSFORMERS, IMAGE } from './transformers';
+import { MediaUrlFixerPlugin } from './plugins/MediaUrlFixerPlugin';
+export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, mediaUrlPrefix, }) {
+    const [editor] = useLexicalComposerContext();
+    const [editable, setEditable] = useState(false);
+    const config = useEditorConfig();
+    const hasUploader = !!config.uploader;
+    useEffect(() => {
+        setEditable(editor.isEditable());
+        return editor.registerEditableListener((e) => {
+            setEditable(e);
+        });
+    }, [editor]);
+    const hasNodes = useHasNodes();
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    useEffect(() => {
+        if (hasNodes('image') && !hasUploader) {
+            console.warn('You need to configure uploader to use ImagesPlugin');
+        }
+    }, [hasNodes('image'), hasUploader]);
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const handleOnChange = (editorState, editor) => {
+        if (onChange) {
+            editor.update(() => {
+                const markdown = $convertToMarkdownString(TRANSFORMERS);
+                onChange(markdown);
+            });
+        }
+    };
+    return (_jsxs(_Fragment, { children: [editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: handleOnChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), mediaUrlPrefix && _jsx(MediaUrlFixerPlugin, { mediaUrlPrefix: mediaUrlPrefix, transformers: [IMAGE] }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), hasNodes('table', 'tablerow', 'tablecell') && editable && _jsx(TablePlugin, {}), children] }));
+}
+const EditorContent = styled.div `
+  position: relative;
+  .be-editable {
+    code {
+      white-space: pre-wrap;
+    }
+  }
+
+  &.editable {
+    > .be-editable {
+      padding: 8px 24px;
+    }
+  }
+
+  > .be-editable {
+    hr {
+      padding: 2px 2px;
+      border: none;
+      margin: 1em 0;
+      cursor: pointer;
+    }
+
+    hr:after {
+      content: '';
+      display: block;
+      height: 2px;
+      background-color: #ccc;
+      line-height: 2px;
+    }
+
+    hr.selected {
+      outline: 2px solid rgb(60, 132, 244);
+      user-select: none;
+    }
+
+    // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
+    > ol > li,
+    > ul > li {
+      margin-left: 32px;
+    }
+  }
+`;

package/lib/main/markdown-editor/index.d.ts

@@ -0,0 +1,17 @@
+import { LexicalEditor } from 'lexical';
+import React, { MutableRefObject, ReactNode } from 'react';
+export interface MarkdownEditorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'placeholder' | 'onChange'> {
+    placeholder?: ReactNode;
+    editable?: boolean;
+    editorState?: string;
+    initialContent?: string;
+    children?: ReactNode;
+    onChange?: (markdown: string) => void;
+    autoFocus?: boolean;
+    showToolbar?: boolean;
+    editorRef?: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+    onReady?: () => void;
+    enableHeadingsIdPlugin?: boolean;
+    mediaUrlPrefix?: string;
+}
+export declare function MarkdownEditor({ editorState, editable, ...props }: MarkdownEditorProps): JSX.Element;

package/lib/main/markdown-editor/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '@emotion/css';
+import styled from '@emotion/styled';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useEffect, useRef } from 'react';
+import { $convertFromMarkdownString } from '@lexical/markdown';
+import Editor from './editor';
+import nodes from './nodes';
+import { useCustomTheme } from '../themes/customTheme';
+import { MarkdownEditorThemeProvider } from './theme';
+import { TRANSFORMERS } from './transformers';
+export function MarkdownEditor({ editorState, editable = true, ...props }) {
+    const theme = useCustomTheme();
+    const initialConfig = {
+        namespace: 'MarkdownEditor',
+        editorState: editorState ? () => $convertFromMarkdownString(editorState, TRANSFORMERS) : undefined,
+        nodes,
+        editable,
+        onError: (error) => {
+            throw error;
+        },
+        theme,
+    };
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }));
+}
+function EditorShell({ placeholder, children, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, mediaUrlPrefix, ...props }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.setEditable(editable ?? true);
+    }, [editable]);
+    const shellRef = useRef(null);
+    const onShellClick = useCallback((e) => {
+        if (e.target === shellRef.current) {
+            editor.focus();
+        }
+    }, []);
+    return (_jsx(MarkdownEditorThemeProvider, { children: _jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, mediaUrlPrefix: mediaUrlPrefix, children: children }) }) }));
+}
+const EditorRoot = styled.div `
+  margin: 0 auto;
+  border-radius: 4px;
+  position: relative;
+  line-height: 1.7;
+  font-weight: 400;
+  text-align: left;
+`;

package/lib/main/markdown-editor/nodes.d.ts

@@ -0,0 +1,3 @@
+import { Klass, LexicalNode } from 'lexical';
+declare const MarkdownEditorNodes: Array<Klass<LexicalNode>>;
+export default MarkdownEditorNodes;

package/lib/main/markdown-editor/nodes.js

@@ -0,0 +1,27 @@
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
+import { OverflowNode } from '@lexical/overflow';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { ImageNode } from '../nodes/ImageNode';
+const MarkdownEditorNodes = [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    CodeHighlightNode,
+    AutoLinkNode,
+    LinkNode,
+    OverflowNode,
+    ImageNode,
+    HorizontalRuleNode,
+    MarkNode,
+];
+export default MarkdownEditorNodes;

package/lib/main/markdown-editor/plugins/MediaUrlFixerPlugin.d.ts

@@ -0,0 +1,5 @@
+import type { TextMatchTransformer } from '@lexical/markdown';
+export declare function MediaUrlFixerPlugin({ mediaUrlPrefix, transformers, }: {
+    mediaUrlPrefix: string;
+    transformers?: Array<TextMatchTransformer>;
+}): null;

package/lib/main/markdown-editor/plugins/MediaUrlFixerPlugin.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import joinUrl from 'url-join';
+import { $isImageNode, ImageNode } from '../../nodes/ImageNode';
+export function MediaUrlFixerPlugin({ mediaUrlPrefix, transformers, }) {
+    const [editor] = useLexicalComposerContext();
+    const ensureLeadingSlash = (str) => (str.startsWith('/') ? str : `/${str}`);
+    useEffect(() => {
+        transformers?.forEach((transformer) => {
+            // @ts-ignore
+            transformer.export = (node) => {
+                if (!$isImageNode(node)) {
+                    return null;
+                }
+                let src = node.getSrc();
+                if (src?.startsWith(mediaUrlPrefix)) {
+                    src = ensureLeadingSlash(src.replace(mediaUrlPrefix, ''));
+                }
+                return `![${node.getAltText()}](${src})`;
+            };
+        });
+    }, []);
+    useEffect(() => {
+        function imageNodeTransform(node) {
+            const targetNode = node;
+            const src = targetNode.getSrc();
+            // 仅处理以 "/" 为前缀的 image src, 并且避免重复处理
+            if (src?.startsWith('/') && !src.startsWith(mediaUrlPrefix)) {
+                targetNode.setSrc(joinUrl(mediaUrlPrefix, src));
+            }
+        }
+        return editor.registerNodeTransform(ImageNode, imageNodeTransform);
+    }, [editor]);
+    return null;
+}

package/lib/main/markdown-editor/plugins/ToolbarPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { LexicalEditor } from 'lexical';
+export declare const uploadFile: (editor: LexicalEditor) => void;
+export default function ToolbarPlugin(): import("react/jsx-runtime").JSX.Element | null;

package/lib/main/markdown-editor/plugins/ToolbarPlugin.js

@@ -0,0 +1,358 @@
+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 { $createHeadingNode, $createQuoteNode, $isHeadingNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { IS_APPLE } from '../../../shared/environment';
+import useHasNodes from '../../hooks/useHasNodes';
+import useModal from '../../hooks/useModal';
+import DropDown, { DropDownItem } from '../../ui/DropDown';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { sanitizeUrl } from '../../utils/sanitizeUrl';
+import { INSERT_COMPONENT_COMMAND } from '../../plugins/ComponentPickerPlugin';
+import { INSERT_IMAGE_COMMAND, isImage } from '../../plugins/ImagesPlugin';
+import { InsertTableDialog } from '../../plugins/TablePlugin';
+export const uploadFile = (editor) => {
+    if (window?.uploaderRef) {
+        // @ts-ignore
+        const uploader = window?.uploaderRef?.current?.getUploader();
+        uploader.open();
+        uploader.onUploadSuccess(({ file, response }) => {
+            // missing the source: function-upload-file
+            if (file.source !== 'function-upload-file') {
+                const { data } = response;
+                if (data?.filename) {
+                    if (isImage(data.filename) || isImage(data.originalname)) {
+                        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                            src: data.url,
+                            altText: data.originalname,
+                        });
+                    }
+                }
+            }
+        });
+    }
+    else {
+        throw new Error('Missing required `window.uploaderRef`');
+    }
+};
+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:align-justified',
+        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" })] }))] }));
+}
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [selectedElementKey, setSelectedElementKey] = useState(null);
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = 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'));
+            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 : '');
+                    }
+                }
+            }
+        }
+    }, [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(({ 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));
+    }, [activeEditor, editor, updateToolbar]);
+    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 items = [
+        // 'component',
+        'block',
+        'bold',
+        'italic',
+        'media',
+        'table',
+        'code',
+        'link',
+    ];
+    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': {
+                if (blockType in blockTypeToBlockName && activeEditor === editor) {
+                    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 'code': {
+                if (blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                        }, className: `toolbar-item 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 toolbar-item-link ${isLink ? 'active' : ''}`, "aria-label": "Insert link", title: "Insert link", children: _jsx("i", { className: "iconify", "data-icon": "tabler:link" }) }, 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;
+            }
+            case 'table': {
+                if (hasNodes('link') && blockType !== 'code') {
+                    menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
+                            // eslint-disable-next-line react/no-unstable-nested-components
+                            showModal('Insert Table', (onClose) => _jsx(InsertTableDialog, { activeEditor: editor, onClose: onClose }));
+                        }, className: "toolbar-item spaced toolbar-item-table", "aria-label": "Insert table", title: "Insert table", children: _jsx("i", { className: "iconify", "data-icon": "tabler:table" }) }, item));
+                }
+                break;
+            }
+            default:
+                console.warn(`Unsupported toolbar item ${item}`);
+        }
+    }
+    if (menus.length === 0) {
+        return null;
+    }
+    return (_jsxs(Toolbar, { className: "toolbar", children: [menus, modal] }));
+}
+const Toolbar = styled.div `
+  z-index: 10;
+  position: sticky;
+  top: 0;
+  height: auto;
+`;
+const FormatButton = styled.button `
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  .iconify {
+    opacity: 0.6;
+  }
+`;

package/lib/main/markdown-editor/theme.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function MarkdownEditorThemeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/main/markdown-editor/theme.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { create } from '@arcblock/ux/lib/Theme';
+const typography = {
+    h1: {
+        fontSize: '1.875rem',
+        lineHeight: 1.2,
+        fontWeight: 800,
+        letterSpacing: '-.025em',
+    },
+    h2: {
+        fontSize: '1.5rem',
+        lineHeight: 1.3333333,
+        fontWeight: 700,
+        letterSpacing: '-.025em',
+    },
+    h3: {
+        fontSize: '1.25rem',
+        lineHeight: 1.4,
+        fontWeight: 600,
+        letterSpacing: '-.025em',
+    },
+    h4: {
+        fontSize: '1.125rem',
+        lineHeight: 1.5,
+        fontWeight: 600,
+    },
+    h5: {
+        fontSize: '1rem',
+        lineHeight: 1.75,
+        fontWeight: 400,
+    },
+    h6: {
+        fontSize: '1rem',
+        lineHeight: 1.75,
+        fontWeight: 400,
+    },
+    subtitle1: {
+        fontSize: '1rem',
+        lineHeight: 1.75,
+        fontWeight: 400,
+    },
+    subtitle2: {
+        fontSize: '1rem',
+        lineHeight: 1.75,
+        fontWeight: 400,
+    },
+    body1: {
+        fontSize: '1rem',
+        lineHeight: 1.75,
+    },
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+};
+export function MarkdownEditorThemeProvider({ children }) {
+    const theme = useTheme();
+    const merged = create({ ...theme, typography });
+    return _jsx(ThemeProvider, { theme: merged, children: children });
+}

package/lib/main/markdown-editor/transformers.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 { ElementTransformer, TextMatchTransformer, Transformer } from '@lexical/markdown';
+export declare const HR: ElementTransformer;
+export declare const IMAGE: TextMatchTransformer;
+export declare const TABLE: ElementTransformer;
+export declare const TRANSFORMERS: Array<Transformer>;

package/lib/main/markdown-editor/transformers.js

@@ -0,0 +1,184 @@
+/**
+ * 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 { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, } from '@lexical/markdown';
+import { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
+import { $isParagraphNode, $isTextNode } from 'lexical';
+import { $createImageNode, $isImageNode, ImageNode } from '../nodes/ImageNode';
+export const HR = {
+    dependencies: [HorizontalRuleNode],
+    export: (node) => {
+        return $isHorizontalRuleNode(node) ? '***' : null;
+    },
+    regExp: /^(---|\*\*\*|___)\s?$/,
+    replace: (parentNode, _1, _2, isImport) => {
+        const line = $createHorizontalRuleNode();
+        // TODO: Get rid of isImport flag
+        if (isImport || parentNode.getNextSibling() != null) {
+            parentNode.replace(line);
+        }
+        else {
+            parentNode.insertBefore(line);
+        }
+        line.selectNext();
+    },
+    type: 'element',
+};
+export const IMAGE = {
+    dependencies: [ImageNode],
+    export: (node) => {
+        if (!$isImageNode(node)) {
+            return null;
+        }
+        return `![${node.getAltText()}](${node.getSrc()})`;
+    },
+    importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
+    regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
+    replace: (textNode, match) => {
+        const [, altText, src] = match;
+        const imageNode = $createImageNode({
+            altText,
+            maxWidth: 800,
+            src,
+        });
+        textNode.replace(imageNode);
+    },
+    trigger: ')',
+    type: 'text-match',
+};
+// Very primitive table setup
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+export const TABLE = {
+    dependencies: [TableNode, TableRowNode, TableCellNode],
+    export: (node) => {
+        if (!$isTableNode(node)) {
+            return null;
+        }
+        const output = [];
+        for (const row of node.getChildren()) {
+            const rowOutput = [];
+            if (!$isTableRowNode(row)) {
+                // eslint-disable-next-line no-continue
+                continue;
+            }
+            let isHeaderRow = false;
+            for (const cell of row.getChildren()) {
+                // It's TableCellNode so it's just to make flow happy
+                if ($isTableCellNode(cell)) {
+                    rowOutput.push($convertToMarkdownString(TRANSFORMERS, cell).replace(/\n/g, '\\n'));
+                    if (cell.__headerState === TableCellHeaderStates.ROW) {
+                        isHeaderRow = true;
+                    }
+                }
+            }
+            output.push(`| ${rowOutput.join(' | ')} |`);
+            if (isHeaderRow) {
+                output.push(`| ${rowOutput.map((_) => '---').join(' | ')} |`);
+            }
+        }
+        return output.join('\n');
+    },
+    regExp: TABLE_ROW_REG_EXP,
+    replace: (parentNode, _1, match) => {
+        // Header row
+        if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
+            const table = parentNode.getPreviousSibling();
+            if (!table || !$isTableNode(table)) {
+                return;
+            }
+            const rows = table.getChildren();
+            const lastRow = rows[rows.length - 1];
+            if (!lastRow || !$isTableRowNode(lastRow)) {
+                return;
+            }
+            // Add header state to row cells
+            lastRow.getChildren().forEach((cell) => {
+                if (!$isTableCellNode(cell)) {
+                    return;
+                }
+                cell.toggleHeaderStyle(TableCellHeaderStates.ROW);
+            });
+            // Remove line
+            parentNode.remove();
+            return;
+        }
+        const matchCells = mapToTableCells(match[0]);
+        if (matchCells == null) {
+            return;
+        }
+        const rows = [matchCells];
+        let sibling = parentNode.getPreviousSibling();
+        let maxCells = matchCells.length;
+        while (sibling) {
+            if (!$isParagraphNode(sibling)) {
+                break;
+            }
+            if (sibling.getChildrenSize() !== 1) {
+                break;
+            }
+            const firstChild = sibling.getFirstChild();
+            if (!$isTextNode(firstChild)) {
+                break;
+            }
+            const cells = mapToTableCells(firstChild.getTextContent());
+            if (cells == null) {
+                break;
+            }
+            maxCells = Math.max(maxCells, cells.length);
+            rows.unshift(cells);
+            const previousSibling = sibling.getPreviousSibling();
+            sibling.remove();
+            sibling = previousSibling;
+        }
+        const table = $createTableNode();
+        for (const cells of rows) {
+            const tableRow = $createTableRowNode();
+            table.append(tableRow);
+            for (let i = 0; i < maxCells; i++) {
+                tableRow.append(i < cells.length ? cells[i] : createTableCell(''));
+            }
+        }
+        const previousSibling = parentNode.getPreviousSibling();
+        if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+            previousSibling.append(...table.getChildren());
+            parentNode.remove();
+        }
+        else {
+            parentNode.replace(table);
+        }
+        table.selectEnd();
+    },
+    type: 'element',
+};
+function getTableColumnsSize(table) {
+    const row = table.getFirstChild();
+    return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+const createTableCell = (textContent) => {
+    textContent = textContent.replace(/\\n/g, '\n');
+    const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+    $convertFromMarkdownString(textContent, TRANSFORMERS, cell);
+    return cell;
+};
+const mapToTableCells = (textContent) => {
+    const match = textContent.match(TABLE_ROW_REG_EXP);
+    if (!match || !match[1]) {
+        return null;
+    }
+    return match[1].split('|').map((text) => createTableCell(text));
+};
+export const TRANSFORMERS = [
+    TABLE,
+    HR,
+    IMAGE,
+    CHECK_LIST,
+    ...ELEMENT_TRANSFORMERS,
+    ...TEXT_FORMAT_TRANSFORMERS,
+    ...TEXT_MATCH_TRANSFORMERS,
+];

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

@@ -15,7 +15,7 @@ import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontal
 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, } from 'lexical';
+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';
@@ -385,6 +385,7 @@ export const uploadFile = (editor) => {
         // @ts-ignore
         const uploader = window?.uploaderRef?.current?.getUploader();
         uploader.open();
+        let selection = null;
         // listen to all upload success
         uploader.onUploadSuccess(({ file, response }) => {
             // missing the source: function-upload-file
@@ -414,9 +415,21 @@ export const uploadFile = (editor) => {
                             mimetype: data.mimetype,
                         });
                     }
+                    // 上传图片成功后 -> 插入图片结点 -> 记住 selection (便于点击 Uploader 中的 Done 后恢复 selection)
+                    setTimeout(() => {
+                        selection = editor.getEditorState().read($getSelection);
+                    }, 10);
                 }
             }
         });
+        // 点击 Uploader 中的 Done 后恢复 selection
+        uploader.onClose(() => {
+            if (selection) {
+                editor.update(() => {
+                    $setSelection(selection.clone());
+                });
+            }
+        });
     }
     else {
         throw new Error('Missing required `window.uploaderRef`');

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

@@ -7,7 +7,7 @@
  */
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { mergeRegister } from '@lexical/utils';
-import { $createParagraphNode, $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { $createParagraphNode, $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
 import { useEffect } from 'react';
 import { $createImageNode, ImageNode } from '../../nodes/ImageNode';
 export const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
@@ -21,7 +21,7 @@ export default function ImagesPlugin({ captionsEnabled }) {
             const imageNode = $createImageNode(payload);
             // 插入段落再插入图片, 确保图片独自占一行 (#2505)
             const p = $createParagraphNode();
-            $insertNodes([p, imageNode]);
+            $insertNodes([p, imageNode, $createParagraphNode()]);
             p.remove();
             return true;
         }, COMMAND_PRIORITY_EDITOR));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.6",
+  "version": "2.0.9",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -40,7 +40,7 @@
     "@arcblock/ux": "^2.9.77",
     "@blocklet/embed": "^0.1.11",
     "@blocklet/pages-kit": "^0.2.302",
-    "@blocklet/pdf": "2.0.6",
+    "@blocklet/pdf": "2.0.9",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "06a854759aa8326ba20e3a12a107d1824e9321bc"
+  "gitHead": "07328b8eb9afa61b68261bb604d3e50f7cca6eba"
 }