@blocklet/editor 2.4.14 → 2.4.16

package/lib/ext/CodeCopyPlugin/CodeCopyPlugin.d.ts

@@ -0,0 +1,2 @@
+import './style.css';
+export declare function CodeCopyPlugin(): import("react/jsx-runtime").JSX.Element;

package/lib/ext/CodeCopyPlugin/CodeCopyPlugin.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { CodeNode } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Box, IconButton } from '@mui/material';
+import { $getNodeByKey } from 'lexical';
+import { useEffect, useMemo, useState } from 'react';
+import { Icon } from '@iconify/react';
+import { usePopper } from 'react-popper';
+import './style.css';
+function isPointInsideElement(point, element) {
+    if (!element) {
+        return false;
+    }
+    const rect = element.getBoundingClientRect();
+    return point.x > rect.left && point.x < rect.right && point.y > rect.top && point.y < rect.bottom;
+}
+export function CodeCopyPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [codeNodes, setCodeNodes] = useState([]);
+    useEffect(() => {
+        return editor.registerMutationListener(CodeNode, (mutatedNodes) => {
+            const nodes = Array.from(mutatedNodes.keys())
+                .map((key) => $getNodeByKey(key, editor.getEditorState()))
+                .filter(Boolean);
+            setCodeNodes(nodes);
+        }, { skipInitialization: false });
+    }, [editor]);
+    return (_jsx(_Fragment, { children: codeNodes.map((codeNode) => (_jsx(CodeCopyButton, { editor: editor, codeNode: codeNode }, codeNode.getKey()))) }));
+}
+function CodeCopyButton({ editor, codeNode }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const [buttonElement, setButtonElement] = useState(null);
+    const codeElement = useMemo(() => editor.getElementByKey(codeNode.getKey()), [editor, codeNode]);
+    const [isActivated, setIsActivated] = useState(false);
+    const popper = usePopper(codeElement, buttonElement, {
+        placement: 'right-start',
+        modifiers: [
+            { name: 'flip', enabled: false },
+            {
+                name: 'offset',
+                options: {
+                    offset: [8, -36],
+                },
+            },
+        ],
+    });
+    useEffect(() => {
+        const handleMouseEnter = () => setIsActivated(true);
+        const handleMouseLeave = (e) => {
+            if (!isPointInsideElement(e, codeElement)) {
+                setIsActivated(false);
+            }
+        };
+        if (codeElement) {
+            codeElement.addEventListener('mouseenter', handleMouseEnter);
+            codeElement.addEventListener('mouseleave', handleMouseLeave);
+            return () => {
+                codeElement.removeEventListener('mouseenter', handleMouseEnter);
+                codeElement.removeEventListener('mouseleave', handleMouseLeave);
+            };
+        }
+    }, [codeElement]);
+    if (!isActivated && !isCopied) {
+        return null;
+    }
+    return (_jsx(IconButton, { ref: setButtonElement, style: popper.styles.popper, ...popper.attributes.popper, sx: {
+            color: 'text.secondary',
+            fontSize: 18,
+            bgcolor: 'background.paper',
+            '&:hover': {
+                color: 'text.primary',
+                bgcolor: 'background.paper',
+            },
+        }, onClick: async () => {
+            let content = '';
+            editor.update(() => {
+                content = codeNode.getTextContent();
+            });
+            try {
+                await navigator.clipboard.writeText(content);
+                setIsCopied(true);
+                setTimeout(() => {
+                    setIsCopied(false);
+                }, 1500);
+            }
+            catch (err) {
+                console.error('Failed to copy: ', err);
+            }
+        }, children: isCopied ? (_jsx(Box, { component: Icon, icon: "tabler:check", sx: { color: 'success.main' } })) : (_jsx(Icon, { icon: "tabler:copy" })) }));
+}

package/lib/ext/CodeCopyPlugin/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE --><g fill="none" stroke="#888888" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"/><path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"/></g></svg>

package/lib/ext/CodeCopyPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeCopyPlugin';

package/lib/ext/CodeCopyPlugin/index.js

@@ -0,0 +1 @@
+export * from './CodeCopyPlugin';

package/lib/ext/CodeCopyPlugin/style.css

@@ -0,0 +1,12 @@
+.be-editable > code:after {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+
+  display: block;
+  content: ' ';
+  background-image: url('./copy.svg');
+  background-size: 18px 18px;
+  height: 18px;
+  width: 18px;
+}

package/lib/ext/SubpageListingPlugin/SubpageListingComponent.js

@@ -8,6 +8,7 @@ import { useRequest } from 'ahooks';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { getBlockletMountPointInfo } from '../utils';
 const discussKitMountPoint = getBlockletMountPointInfo('did-comments')?.mountPoint;
+const { enableDocFullWidthMode = true } = window.blocklet.preferences;
 const fetchSubpages = async ({ id, mode, locale }) => {
     try {
         const result = await fetch(joinURL(discussKitMountPoint, `/api/docs/${id}/subpages?${new URLSearchParams({ mode, locale })}`)).then((res) => res.json());
@@ -26,7 +27,7 @@ function Icon({ icon, sx }) {
     const mergedSx = [
         {
             flex: '0 0 auto',
-            fontSize: 44,
+            fontSize: 24,
             lineHeight: 1,
         },
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -63,33 +64,38 @@ export default function SubpageListingComponent({ docPostId, mode, onModeChange,
                 const link = window.blocklet.pageGroup === 'doc'
                     ? joinURL(window.blocklet.prefix || '/', x.boardId, locale, x.slug)
                     : joinURL(discussKitMountPoint, '/docs', x.boardId, locale, x.slug);
-                return (_jsx(Box, { sx: { width: { xs: 1, lg: 1 / 2, xl: 1 / 3 }, p: 1 }, children: _jsxs(Box, { component: "a", href: link, sx: {
+                return (_jsx(Box, { sx: {
+                        boxSizing: 'border-box',
+                        width: { xs: 1, lg: 1 / 2, xl: enableDocFullWidthMode ? 1 / 3 : 1 / 2 },
+                        height: 120,
+                        p: 1,
+                    }, children: _jsxs(Box, { component: "a", href: link, sx: {
                             display: 'flex',
-                            flexDirection: 'column',
+                            alignItems: 'center',
                             gap: 1,
                             height: 1,
-                            p: 2,
+                            px: 3,
+                            py: 2.5,
                             color: 'inherit',
                             textDecoration: 'none',
                             border: 1,
-                            borderColor: 'grey.300',
-                            borderRadius: '4px',
-                            boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                            borderColor: 'divider',
+                            borderRadius: 2,
                             cursor: 'pointer',
                             ':hover': {
-                                borderColor: 'grey.400',
-                                // boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+                                borderColor: 'primary.main',
                                 boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
                             },
-                        }, children: [_jsxs(Box, { sx: {}, children: [_jsx(Icon, { icon: x.icon }), _jsxs(Box, { sx: { mt: 1.5 }, children: [_jsx(Typography, { variant: "h4", children: x.title }), _jsx(Typography, { variant: "body2", sx: {
-                                                    mt: 1,
-                                                    color: 'text.secondary',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    wordBreak: 'break-word',
-                                                    display: '-webkit-box',
-                                                    WebkitLineClamp: 3,
-                                                    WebkitBoxOrient: 'vertical',
-                                                }, children: x.excerpt })] })] }), _jsx(Box, { sx: { mt: 'auto' }, children: _jsx(Typography, { variant: "body2", sx: { mt: 2, fontSize: 13, color: 'text.secondary' }, children: new Date(x.updatedAt).toLocaleDateString() }) })] }) }, x.id));
+                        }, children: [_jsx(Icon, { icon: x.icon }), _jsxs(Box, { sx: { ml: 1 }, children: [_jsx(Typography, { variant: "body2", component: "h2", sx: { fontWeight: 'bold' }, children: x.title }), x.excerpt && (_jsx(Typography, { variant: "body2", sx: {
+                                            mt: 1,
+                                            fontSize: 14,
+                                            color: 'text.secondary',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            wordBreak: 'break-word',
+                                            display: '-webkit-box',
+                                            WebkitLineClamp: 2,
+                                            WebkitBoxOrient: 'vertical',
+                                        }, children: x.excerpt }))] })] }) }, x.id));
             })] }));
 }

package/lib/main/editor.js

@@ -28,7 +28,6 @@ import useHasNodes from './hooks/useHasNodes';
 import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
 import ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
-import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import CollapsiblePlugin from './plugins/CollapsiblePlugin';
 import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
@@ -77,6 +76,7 @@ import { useTranslationListener } from './hooks/useTranslationListener';
 import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
 import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
 import { StyledEditorContent } from './styled-editor-content';
+import { CodeCopyPlugin } from '../ext/CodeCopyPlugin';
 export default function Editor({ children, prepend, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -106,7 +106,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
         }
     }, [hasNodes('image'), hasUploader]);
     if (minimalMode) {
-        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { 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 }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), !!characterLimitConfig?.maxLength && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
+        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { 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 }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('code') && _jsx(CodeCopyPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && hasNodes('link') && (_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })), !!characterLimitConfig?.maxLength && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { 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('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), !!characterLimitConfig?.maxLength && (_jsx(CharacterLimitPlugin, { maxLength: characterLimitConfig.maxLength, charLimitIndicatorStyle: characterLimitConfig.indicatorStyle, alignLeft: characterLimitConfig.alignLeft })), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && !!editable && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { 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('code') && _jsx(CodeCopyPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }

package/lib/main/themes/code-highlight/index.d.ts

@@ -0,0 +1,62 @@
+export declare const codeHighlightDark: {
+    atrule: string;
+    attr: string;
+    boolean: string;
+    builtin: string;
+    cdata: string;
+    char: string;
+    class: string;
+    comment: string;
+    constant: string;
+    deleted: string;
+    doctype: string;
+    entity: string;
+    function: string;
+    important: string;
+    inserted: string;
+    keyword: string;
+    namespace: string;
+    number: string;
+    operator: string;
+    prolog: string;
+    property: string;
+    punctuation: string;
+    regex: string;
+    selector: string;
+    string: string;
+    symbol: string;
+    tag: string;
+    url: string;
+    variable: string;
+};
+export declare const codeHighlightLight: {
+    atrule: string;
+    attr: string;
+    boolean: string;
+    builtin: string;
+    cdata: string;
+    char: string;
+    class: string;
+    comment: string;
+    constant: string;
+    deleted: string;
+    doctype: string;
+    entity: string;
+    function: string;
+    important: string;
+    inserted: string;
+    keyword: string;
+    namespace: string;
+    number: string;
+    operator: string;
+    prolog: string;
+    property: string;
+    punctuation: string;
+    regex: string;
+    selector: string;
+    string: string;
+    symbol: string;
+    tag: string;
+    url: string;
+    variable: string;
+};

package/lib/main/themes/code-highlight/index.js

@@ -0,0 +1,113 @@
+import { css } from '@emotion/css';
+// Dark theme tokens
+const tokenComment = css `
+  color: #6a9955;
+`;
+const tokenPunctuation = css `
+  color: #d4d4d4;
+`;
+const tokenProperty = css `
+  color: #9cdcfe;
+`;
+const tokenSelector = css `
+  color: #d7ba7d;
+`;
+const tokenOperator = css `
+  color: #d4d4d4;
+`;
+const tokenAttr = css `
+  color: #9cdcfe;
+`;
+const tokenVariable = css `
+  color: #9cdcfe;
+`;
+const tokenFunction = css `
+  color: #dcdcaa;
+`;
+// Light theme tokens - 更有活力和年轻化的配色，优化对比度
+const tokenCommentLight = css `
+  color: #1e8449;
+`;
+const tokenPunctuationLight = css `
+  color: #2c3e50;
+`;
+const tokenPropertyLight = css `
+  color: #e67e22;
+`;
+const tokenSelectorLight = css `
+  color: #c0392b;
+`;
+const tokenOperatorLight = css `
+  color: #8e44ad;
+`;
+const tokenAttrLight = css `
+  color: #2980b9;
+`;
+const tokenVariableLight = css `
+  color: #27ae60;
+`;
+const tokenFunctionLight = css `
+  color: #f39c12;
+`;
+export const codeHighlightDark = {
+    atrule: tokenAttr,
+    attr: tokenAttr,
+    boolean: tokenProperty,
+    builtin: tokenSelector,
+    cdata: tokenComment,
+    char: tokenSelector,
+    class: tokenFunction,
+    comment: tokenComment,
+    constant: tokenProperty,
+    deleted: tokenProperty,
+    doctype: tokenComment,
+    entity: tokenOperator,
+    function: tokenFunction,
+    important: tokenVariable,
+    inserted: tokenSelector,
+    keyword: tokenAttr,
+    namespace: tokenVariable,
+    number: tokenProperty,
+    operator: tokenOperator,
+    prolog: tokenComment,
+    property: tokenProperty,
+    punctuation: tokenPunctuation,
+    regex: tokenVariable,
+    selector: tokenSelector,
+    string: tokenSelector,
+    symbol: tokenProperty,
+    tag: tokenProperty,
+    url: tokenOperator,
+    variable: tokenVariable,
+};
+export const codeHighlightLight = {
+    atrule: tokenAttrLight,
+    attr: tokenAttrLight,
+    boolean: tokenPropertyLight,
+    builtin: tokenSelectorLight,
+    cdata: tokenCommentLight,
+    char: tokenSelectorLight,
+    class: tokenFunctionLight,
+    comment: tokenCommentLight,
+    constant: tokenPropertyLight,
+    deleted: tokenPropertyLight,
+    doctype: tokenCommentLight,
+    entity: tokenOperatorLight,
+    function: tokenFunctionLight,
+    important: tokenVariableLight,
+    inserted: tokenSelectorLight,
+    keyword: tokenAttrLight,
+    namespace: tokenVariableLight,
+    number: tokenPropertyLight,
+    operator: tokenOperatorLight,
+    prolog: tokenCommentLight,
+    property: tokenPropertyLight,
+    punctuation: tokenPunctuationLight,
+    regex: tokenVariableLight,
+    selector: tokenSelectorLight,
+    string: tokenSelectorLight,
+    symbol: tokenPropertyLight,
+    tag: tokenPropertyLight,
+    url: tokenOperatorLight,
+    variable: tokenVariableLight,
+};

package/lib/main/themes/customTheme.js

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import { useTheme } from '@mui/material';
 import defaultTheme from './defaultTheme';
+import { codeHighlightLight, codeHighlightDark } from './code-highlight';
 const createCustomTheme = (theme) => {
     const { palette } = theme;
     const noMarginTopStyle = css(`
@@ -11,7 +12,18 @@ const createCustomTheme = (theme) => {
     `);
     const paragraph = css(
     // use default theme's paragraph style
-    defaultTheme.paragraph, 
+    defaultTheme.paragraph, `
+      margin-bottom: 20px;
+      &:has(img) {
+        display: flex;
+        margin: 32px 0;
+        line-height: 1;
+        div {
+          display: flex;
+        }
+      }
+      line-height: 1.75;
+    `, 
     // 兼容旧 table 水平滚动条问题 (与 useResponsiveTable 配合使用)
     `
       &:has(table) {
@@ -68,7 +80,7 @@ const createCustomTheme = (theme) => {
     const link = css(`
       color: inherit;
       text-decoration: none;
-      border-bottom: 1px solid ${palette.primary.light};
+      border-bottom: 1px solid ${palette.primary.main};
       &:hover {
         border-bottom-width: 2px;
       }
@@ -99,12 +111,12 @@ const createCustomTheme = (theme) => {
     const textCode = css(theme.typography.body1, {
         fontSize: '.875em',
         fontWeight: 500,
-        borderRadius: '.375rem',
-        border: `1px solid ${palette.grey[300]}`,
+        borderRadius: '.25rem',
+        border: `1px solid ${palette.grey[200]}`,
         padding: '1px .375rem',
         fontFamily: 'Menlo, Consolas, Monaco, monospace',
         fontVariantLigatures: 'none',
-        backgroundColor: palette.grey[100],
+        backgroundColor: palette.grey[50],
         ...(palette.mode === 'dark' && { color: palette.grey[800] }),
     });
     const olCommon = {
@@ -224,11 +236,12 @@ const createCustomTheme = (theme) => {
     }
   `;
     const code = css `
-    background-color: #18181b;
-    color: #fff;
+    background-color: ${palette.background.paper};
+    color: ${palette.text.primary};
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
-    padding: 16px;
+    // padding: 16px;
+    padding: 16px 16px 16px 52px;
     line-height: 1.53;
     font-size: 13px;
     margin: 0;
@@ -239,10 +252,19 @@ const createCustomTheme = (theme) => {
     overflow-x: auto;
     position: relative;
     border-radius: 8px;
-    border: 1px solid #27272;
+    border: 1px solid ${palette.divider};
 
     &:before {
-      display: none;
+      content: attr(data-gutter);
+      position: absolute;
+      left: 0;
+      top: 0;
+      // border-right: 1px solid #ccc;
+      padding: 16px 8px;
+      color: #777;
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: 25px;
     }
   `;
     /**
@@ -274,6 +296,7 @@ const createCustomTheme = (theme) => {
             olDepth: [ol1, ol2, ol3, ol4, ol5],
             ul,
         },
+        codeHighlight: palette.mode === 'dark' ? codeHighlightDark : codeHighlightLight,
         embedBlock: {
             base: embedBlock,
             focus: embedBlockFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.14",
+  "version": "2.4.16",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -32,6 +32,7 @@
     "@excalidraw/excalidraw": "^0.18.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
+    "@iconify/react": "^4.1.1",
     "@lexical/clipboard": "^0.30.0",
     "@lexical/code": "^0.30.0",
     "@lexical/file": "^0.30.0",
@@ -68,7 +69,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.4.14"
+    "@blocklet/pdf": "^2.4.16"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",