@blocklet/editor 1.6.188 → 1.6.191

package/lib/config.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AI, UserService } from './types';
-export type ToolbarConfigItem = 'block' | 'align' | 'font-family' | 'font-size' | 'bold' | 'italic' | 'underline' | 'code' | 'link' | 'image' | 'color' | 'bgcolor' | 'strikethrough' | 'media' | 'alert';
+export type ToolbarConfigItem = 'component' | 'block' | 'align' | 'font-family' | 'font-size' | 'bold' | 'italic' | 'underline' | 'code' | 'link' | 'image' | 'color' | 'bgcolor' | 'strikethrough' | 'media' | 'alert';
 export interface ToolbarConfig {
     items?: ToolbarConfigItem[];
 }

package/lib/ext/common.d.ts

@@ -11,7 +11,7 @@ export declare const MenuWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const GradientButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "children" | "style" | "className" | "tabIndex" | "disabled" | "sx" | "href" | "size" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "startIcon"> & {
+}, "color" | "children" | "style" | "className" | "tabIndex" | "disabled" | "sx" | "href" | "size" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare function NestedMenuItem({ children, subMenu, ...rest }: MenuItemProps & {

package/lib/main/index.css

@@ -711,8 +711,14 @@ i.prettier-error {
   margin-left: 5px;
   border-radius: 15px;
   color: #222;
-  display: inline-block;
   cursor: pointer;
+  display: flex;
+}
+
+.action-button .MuiLoadingButton-loadingIndicator {
+  position: relative;
+  left: 0;
+  margin-right: 8px;
 }
 
 .action-button:hover {
@@ -724,8 +730,6 @@ i.prettier-error {
   animation: mic-pulsate-color 3s infinite;
 }
 button.action-button:disabled {
-  opacity: 0.6;
-  background: #eee;
   cursor: not-allowed;
 }
 

package/lib/main/nodes/ExcalidrawNode/ExcalidrawComponent.js

@@ -8,6 +8,7 @@ import ImageResizer from '../../ui/ImageResizer';
 import { $isExcalidrawNode } from '.';
 import ExcalidrawImage from './ExcalidrawImage';
 import ExcalidrawModal from './ExcalidrawModal';
+import { covertImageWithMediaKitPath } from './utils';
 export default function ExcalidrawComponent({ nodeKey, data }) {
     const [editor] = useLexicalComposerContext();
     const [isModalOpen, setModalOpen] = useState(data === '[]' && editor.isEditable());
@@ -21,7 +22,9 @@ export default function ExcalidrawComponent({ nodeKey, data }) {
     // 兼容 excalidraw 旧版本数据 - 缺少 "elements" key, 并且是一个 array, 新版本数据是 object
     const parsed = useMemo(() => {
         try {
-            return JSON.parse(data);
+            const tempData = JSON.parse(data);
+            covertImageWithMediaKitPath(tempData.elements, tempData.files);
+            return tempData;
         }
         catch (e) {
             console.error(e);
@@ -89,6 +92,8 @@ export default function ExcalidrawComponent({ nodeKey, data }) {
             const node = $getNodeByKey(nodeKey);
             if ($isExcalidrawNode(node)) {
                 if (els.length > 0 || Object.keys(fls).length > 0) {
+                    // covert image with mediaKit path
+                    covertImageWithMediaKitPath(els, fls);
                     node.setData(JSON.stringify({
                         appState: aps,
                         elements: els,

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.css

@@ -35,7 +35,7 @@
 }
 .ExcalidrawModal__row {
   position: relative;
-  padding: 40px 5px 5px;
+  padding: 42px 5px 5px;
   width: 90vw;
   height: 90vh;
   border-radius: 8px;
@@ -46,7 +46,7 @@
 }
 .ExcalidrawModal__modal {
   position: relative;
-  z-index: 10;
+  z-index: 99999;
   top: 50px;
   width: auto;
   left: 0;
@@ -56,6 +56,7 @@
   border-radius: 8px;
   background-color: #eee;
 }
+
 .ExcalidrawModal__discardModal {
   margin-top: 60px;
   text-align: center;
@@ -68,3 +69,7 @@
   width: 100vw;
   height: 100vh;
 }
+
+body .excalidraw-modal-container {
+  z-index: 99999 !important;
+}

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.d.ts

@@ -1,4 +1,4 @@
-import { AppState, BinaryFiles } from '@excalidraw/excalidraw/types/types';
+import { AppState, BinaryFiles, LibraryItems } from '@excalidraw/excalidraw/types/types';
 import { ReactPortal } from 'react';
 export type ExcalidrawElementFragment = {
     isDeleted?: boolean;
@@ -14,9 +14,13 @@ type Props = {
      */
     initialAppState: AppState;
     /**
-     * The initial set of elements to draw into the scene
+     * The initial set of files to draw into the scene
      */
     initialFiles: BinaryFiles;
+    /**
+     * The initial set of library items to draw into the scene
+     */
+    initialLibraryItems?: LibraryItems;
     /**
      * Controls the visibility of the modal
      */
@@ -39,5 +43,5 @@ type Props = {
  * A component which renders a modal with Excalidraw (a painting app)
  * which can be used to export an editable image
  */
-export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, isShown, onDelete, onClose, }: Props): ReactPortal | null;
+export default function ExcalidrawModal({ closeOnClickOutside, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems, isShown, onDelete, onClose, }: Props): ReactPortal | null;
 export {};

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.js

@@ -6,29 +6,50 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { Excalidraw } from '@excalidraw/excalidraw';
+import { Excalidraw, useHandleLibrary, serializeLibraryAsJSON } from '@excalidraw/excalidraw';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import LoadingButton from '@mui/lab/LoadingButton';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
 import { useBeforeUnload } from '../../hooks/useBeforeUnload';
+import { uploadImageToMediaKit } from './utils';
+const safeParseJSON = (json) => {
+    try {
+        return JSON.parse(json);
+    }
+    catch (error) {
+        return null;
+    }
+};
+const LIBRARY_KEY = 'excalidraw-library';
 /**
  * @explorer-desc
  * A component which renders a modal with Excalidraw (a painting app)
  * which can be used to export an editable image
  */
-export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, isShown = false, onDelete, onClose, }) {
+export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, initialElements, initialAppState, initialFiles, initialLibraryItems = safeParseJSON(localStorage.getItem(LIBRARY_KEY))?.libraryItems, isShown = false, onDelete, onClose, }) {
     const excaliDrawModelRef = useRef(null);
     const excaliDrawSceneRef = useRef(null);
     const [discardModalOpen, setDiscardModalOpen] = useState(false);
     const [elements, setElements] = useState(initialElements);
     const [files, setFiles] = useState(initialFiles);
+    const [loading, setLoading] = useState(false);
+    const [saveText, setSaveText] = useState('Save');
     const [fullScreen, setFullScreen] = useState(false);
     useEffect(() => {
+        // @ts-ignore set window.name to add library target
+        window.name = window.location.href;
         if (excaliDrawModelRef.current !== null) {
             excaliDrawModelRef.current.focus();
         }
     }, []);
+    useHandleLibrary({
+        excalidrawAPI: excaliDrawSceneRef.current,
+        getInitialLibraryItems: () => {
+            return initialLibraryItems;
+        },
+    });
     useBeforeUnload(isShown);
     useEffect(() => {
         let modalOverlayElement = null;
@@ -68,30 +89,44 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
             }
         };
     }, [elements, files, onDelete]);
-    const save = () => {
-        if (elements.filter((el) => !el.isDeleted).length > 0) {
-            const appState = excaliDrawSceneRef?.current?.getAppState();
-            // We only need a subset of the state
-            const partialState = appState
-                ? {
-                    exportBackground: appState.exportBackground,
-                    exportScale: appState.exportScale,
-                    exportWithDarkMode: appState.theme === 'dark',
-                    isBindingEnabled: appState.isBindingEnabled,
-                    isLoading: appState.isLoading,
-                    name: appState.name,
-                    theme: appState.theme,
-                    viewBackgroundColor: appState.viewBackgroundColor,
-                    viewModeEnabled: appState.viewModeEnabled,
-                    zenModeEnabled: appState.zenModeEnabled,
-                    zoom: appState.zoom,
-                }
-                : {};
-            onSave(elements, partialState, files);
+    const save = async () => {
+        setLoading(true);
+        setSaveText('Saving...');
+        try {
+            if (elements.filter((el) => !el.isDeleted).length > 0) {
+                const appState = excaliDrawSceneRef?.current?.getAppState();
+                // We only need a subset of the state
+                const partialState = appState
+                    ? {
+                        exportBackground: appState.exportBackground,
+                        exportScale: appState.exportScale,
+                        exportWithDarkMode: appState.theme === 'dark',
+                        isBindingEnabled: appState.isBindingEnabled,
+                        isLoading: appState.isLoading,
+                        name: appState.name,
+                        theme: appState.theme,
+                        viewBackgroundColor: appState.viewBackgroundColor,
+                        viewModeEnabled: appState.viewModeEnabled,
+                        zenModeEnabled: appState.zenModeEnabled,
+                        zoom: appState.zoom,
+                    }
+                    : {};
+                setSaveText('Uploading...');
+                await uploadImageToMediaKit(elements, files);
+                setSaveText('Saving...');
+                await onSave(elements, partialState, files);
+            }
+            else {
+                // delete node if the scene is clear
+                await onDelete();
+            }
         }
-        else {
-            // delete node if the scene is clear
-            onDelete();
+        catch (error) {
+            console.error('Error saving Excalidraw', error);
+        }
+        finally {
+            setLoading(false);
+            setSaveText('Save');
         }
     };
     const discard = () => {
@@ -122,14 +157,18 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
         setElements(els);
         setFiles(fls);
     };
+    const onLibraryChange = (items) => {
+        const serializeJSON = serializeLibraryAsJSON(items);
+        localStorage.setItem(LIBRARY_KEY, serializeJSON);
+    };
     // This is a hacky work-around for Excalidraw + Vite.
     // In DEV, Vite pulls this in fine, in prod it doesn't. It seems
     // like a module resolution issue with ESM vs CJS?
     // @ts-ignore
     const _Excalidraw = Excalidraw.$$typeof != null ? Excalidraw : Excalidraw.default;
-    return createPortal(_jsx("div", { className: `ExcalidrawModal__overlay ${fullScreen ? 'ExcalidrawModal__fullscreen' : ''}`, role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(_Excalidraw, { onChange: onChange, ref: excaliDrawSceneRef, initialData: {
+    return createPortal(_jsx("div", { className: `ExcalidrawModal__overlay ${fullScreen ? 'ExcalidrawModal__fullscreen' : ''}`, role: "dialog", children: _jsx("div", { className: "ExcalidrawModal__modal", ref: excaliDrawModelRef, tabIndex: -1, children: _jsxs("div", { className: "ExcalidrawModal__row", children: [discardModalOpen && _jsx(ShowDiscardDialog, {}), _jsx(_Excalidraw, { onChange: onChange, onLibraryChange: onLibraryChange, ref: excaliDrawSceneRef, initialData: {
                             appState: initialAppState || { isLoading: false },
                             elements: initialElements,
                             files: initialFiles,
-                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [!fullScreen && (_jsx("button", { className: "action-button", style: { width: 32, padding: 0 }, onClick: () => setFullScreen(true), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen", "data-height": "18" }) })), fullScreen && (_jsx("button", { className: "action-button", style: { width: 32, padding: 0 }, onClick: () => setFullScreen(false), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen-exit", "data-height": "18" }) })), !initialAppState.viewModeEnabled && (_jsxs(_Fragment, { children: [_jsx("button", { className: "action-button", onClick: discard, children: "Discard" }), _jsx("button", { className: "action-button", onClick: save, children: "Save" })] })), initialAppState.viewModeEnabled && (_jsx("button", { className: "action-button", onClick: () => onClose(), children: "Close" }))] })] }) }) }), document.body);
+                        } }), _jsxs("div", { className: "ExcalidrawModal__actions", children: [!fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(true), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen", "data-height": "18" }) })), fullScreen && (_jsx(LoadingButton, { className: "action-button", style: { width: 32, padding: 0, display: 'flex', alignItems: 'center' }, onClick: () => setFullScreen(false), children: _jsx("i", { className: "iconify", "data-icon": "material-symbols:fullscreen-exit", "data-height": "18" }) })), !initialAppState.viewModeEnabled && (_jsxs(_Fragment, { children: [_jsx(LoadingButton, { loadingPosition: "start", disabled: loading, className: "action-button", onClick: discard, children: "Discard" }), _jsx(LoadingButton, { loadingPosition: "start", loading: loading, className: "action-button", onClick: save, children: saveText })] })), initialAppState.viewModeEnabled && (_jsx(LoadingButton, { className: "action-button", onClick: () => onClose(), children: "Close" }))] })] }) }) }), document.body);
 }

package/lib/main/nodes/ExcalidrawNode/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const getBlockletMountPointInfo: (name: string) => any;
+export declare function isLocalImage(src: string): boolean;
+export declare function joinImageUrl(src: string): string;
+export declare function uploadImageToMediaKit(elements: any, files: any): Promise<void>;
+export declare function covertImageWithMediaKitPath(elements: any, files: any): void;

package/lib/main/nodes/ExcalidrawNode/utils.js

@@ -0,0 +1,71 @@
+import { joinURL } from 'ufo';
+// chain promise
+const runPromiseInSequence = (list, fn) => {
+    return list.reduce((p, item) => {
+        return p.then(() => fn(item));
+    }, Promise.resolve()); // initial
+};
+export const getBlockletMountPointInfo = (name) => {
+    return window.blocklet?.componentMountPoints?.find((x) => x.name === name || x.did === name);
+};
+export function isLocalImage(src) {
+    return src.startsWith('data:image') || src.startsWith('blob:');
+}
+export function joinImageUrl(src) {
+    if (src?.startsWith('http')) {
+        return src;
+    }
+    // media kit
+    // const mountPoint = getBlockletMountPointInfo('z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9');
+    // discuss kit
+    const mountPoint = getBlockletMountPointInfo('did-comments')?.mountPoint;
+    if (mountPoint) {
+        const prefix = joinURL(window.location.origin, mountPoint, 'uploads');
+        // not add prefix
+        if (!src.startsWith(prefix)) {
+            return joinURL(prefix, src);
+        }
+    }
+    return src;
+}
+export async function uploadImageToMediaKit(elements, files) {
+    const filteredImages = elements?.filter((el) => el.type === 'image');
+    if (filteredImages.length > 0) {
+        // upload image to Media Kit
+        await runPromiseInSequence(filteredImages, async (el) => {
+            const fileItem = files[el.fileId];
+            // @ts-ignore
+            const uploader = window?.uploaderRef?.current?.getUploader?.();
+            const prefix = joinImageUrl('/');
+            // if not uploaded yet and is has uploader
+            if (isLocalImage(fileItem.dataURL) && !!uploader) {
+                // try to upload the image
+                const blobFile = await fetch(fileItem.dataURL).then((res) => res.blob());
+                const { data } = await uploader.uploadFile(blobFile).then((result) => {
+                    // https://uppy.io/docs/uppy/#options
+                    return result?.response;
+                });
+                // only save filename
+                files[el.fileId].dataURL = data.filename;
+            }
+            else if (fileItem.dataURL?.startsWith(prefix)) {
+                // remove the prefix
+                files[el.fileId].dataURL = fileItem.dataURL.replace(prefix, '');
+            }
+        });
+        // promise all to chain the upload
+    }
+}
+export function covertImageWithMediaKitPath(elements, files) {
+    const filteredImages = elements?.filter((el) => el.type === 'image') || [];
+    if (filteredImages?.length > 0) {
+        // upload image to Media Kit
+        filteredImages.forEach((el) => {
+            const fileItem = files[el.fileId];
+            if (!isLocalImage(fileItem.dataURL)) {
+                // replace dataURL with Media Kit URL
+                files[el.fileId].dataURL = joinImageUrl(fileItem.dataURL);
+            }
+        });
+    }
+}

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

@@ -7,5 +7,6 @@
  */
 /// <reference types="react" />
 import { LexicalEditor } from 'lexical';
+export declare const INSERT_COMPONENT_COMMAND: import("lexical").LexicalCommand<unknown>;
 export default function ComponentPickerMenuPlugin(): JSX.Element;
 export declare const uploadFile: (editor: LexicalEditor) => void;

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

@@ -15,8 +15,9 @@ 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, } from 'lexical';
-import { useCallback, useMemo, useState } from 'react';
+import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, createCommand, $insertNodes, $createTextNode, COMMAND_PRIORITY_EDITOR, } from 'lexical';
+import { mergeRegister } from '@lexical/utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LexicalTypeaheadMenuPlugin, TypeaheadOption, useBasicTypeaheadTriggerMatch, } from '../LexicalTypeaheadMenuPlugin';
 import useHasNodes from '../../hooks/useHasNodes';
 import useModal from '../../hooks/useModal';
@@ -61,6 +62,7 @@ function ComponentPickerMenuItem({ index, isSelected, onClick, onMouseEnter, opt
     }
     return (_jsxs("li", { tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: `typeahead-item-${index}`, onMouseEnter: onMouseEnter, onClick: onClick, 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();
@@ -310,6 +312,30 @@ export default function ComponentPickerMenuPlugin() {
             closeMenu();
         });
     }, [editor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(INSERT_COMPONENT_COMMAND, (payload) => {
+            editor.update(() => {
+                const selection = $getSelection();
+                // @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("div", { className: "typeahead-popover component-picker-menu", children: _jsx(List, { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {

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

@@ -27,7 +27,7 @@ import { sanitizeUrl } from '../../utils/sanitizeUrl';
 import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
 import { AideToolbarButton } from '../../../ext/AIPlugin';
 import { AITranslateToolbarButton } from '../../../ext/AITranslationPlugin';
-import { uploadFile } from '../ComponentPickerPlugin';
+import { uploadFile, INSERT_COMPONENT_COMMAND } from '../ComponentPickerPlugin';
 // import { InsertNewTableDialog, InsertTableDialog } from "../TablePlugin";
 const blockTypeToBlockName = {
     bullet: 'Bulleted List',
@@ -300,6 +300,7 @@ export default function ToolbarPlugin() {
     };
     const config = useEditorConfig().toolbar;
     const items = config?.items ?? [
+        'component',
         'block',
         'align',
         'bold',
@@ -315,9 +316,18 @@ export default function ToolbarPlugin() {
     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"), _jsx(Divider, {}, "block-divider"));
+                    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]) => {

package/lib/main/ui/Modal.css

@@ -58,5 +58,5 @@
   background-color: #ddd;
 }
 .Modal__content {
-  padding-top: 20px;
+  /* padding-top: 20px; */
 }

package/lib/stories/Editor.stories.js

@@ -101,7 +101,7 @@ import { HeadingNode } from '@lexical/rich-text';
 <EditorConfigProvider
   value={{
     toolbar: {
-      items: ['block', 'font-family', 'font-size', 'italic', 'bold', 'underline'],
+      items: ['component','block', 'font-family', 'font-size', 'italic', 'bold', 'underline'],
     },
   }}>
   <BlockletEditor />
@@ -113,7 +113,7 @@ import { HeadingNode } from '@lexical/rich-text';
 };
 CustomToolbar.args = {
     toolbar: {
-        items: ['block', 'font-family', 'font-size', 'italic', 'bold', 'underline'],
+        items: ['component', 'block', 'font-family', 'font-size', 'italic', 'bold', 'underline'],
     },
 };
 export const CustomPlaceholder = (props) => _jsx(BlockletEditor, { ...props });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "1.6.188",
+  "version": "1.6.191",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@arcblock/ux": "^2.9.58",
     "@blocklet/embed": "^0.1.11",
-    "@blocklet/pdf": "1.6.188",
+    "@blocklet/pdf": "1.6.191",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@lexical/clipboard": "0.13.1",
@@ -108,5 +108,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "7662e0b6e1a16e0129777feba8640acac2032a7b"
+  "gitHead": "e0bfe0bdc7ce8d39f4f3684f7170075025bbcb0a"
 }