@blocklet/editor 2.4.15 → 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/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(`
@@ -235,8 +236,8 @@ 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;
@@ -251,12 +252,11 @@ const createCustomTheme = (theme) => {
     overflow-x: auto;
     position: relative;
     border-radius: 8px;
-    border: 1px solid #27272;
+    border: 1px solid ${palette.divider};
 
     &:before {
       content: attr(data-gutter);
       position: absolute;
-      background-color: #18181b;
       left: 0;
       top: 0;
       // border-right: 1px solid #ccc;
@@ -296,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.15",
+  "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.15"
+    "@blocklet/pdf": "^2.4.16"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",