@blocklet/editor 2.4.75 → 2.4.76

package/lib/ext/CustomComponent/CustomComponent.d.ts

@@ -1,6 +1,8 @@
+import { type EditorThemeClasses } from 'lexical';
 interface CustomComponentProps {
     component: string;
     properties?: any;
+    editorTheme?: EditorThemeClasses;
 }
-export declare function CustomComponent({ component, properties }: CustomComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CustomComponent({ component, properties, editorTheme }: CustomComponentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/lib/ext/CustomComponent/CustomComponent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary } from 'react-error-boundary';
 import components from './components';
-export function CustomComponent({ component, properties }) {
+export function CustomComponent({ component, properties, editorTheme }) {
     const Component = components[component];
     if (!Component) {
         return null;
@@ -11,5 +11,5 @@ export function CustomComponent({ component, properties }) {
         console.error('CustomComponent error', component, properties, error);
         return null;
     };
-    return (_jsx(Box, { sx: { py: 1 }, children: _jsx(ErrorBoundary, { fallbackRender: fallbackRender, children: _jsx(Component, { ...properties }) }) }));
+    return (_jsx(Box, { sx: { py: 1 }, children: _jsx(ErrorBoundary, { fallbackRender: fallbackRender, children: _jsx(Component, { ...properties, editorTheme: editorTheme }) }) }));
 }

package/lib/ext/CustomComponent/CustomComponentNode.js

@@ -65,6 +65,7 @@ export class CustomComponentNode extends DecoratorBlockNode {
     }
     static importDOM() {
         return {
+            'x-code': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-card': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-cards': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-code-group': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
@@ -99,7 +100,7 @@ export class CustomComponentNode extends DecoratorBlockNode {
             base: customComponentTheme.base || '',
             focus: customComponentTheme.focus || '',
         };
-        return (_jsx(BlockWithAlignableContents, { className: className, format: this.__format, nodeKey: this.__key, children: _jsx(CustomComponent, { component: this.__data.component, properties: this.__data.properties }) }));
+        return (_jsx(BlockWithAlignableContents, { className: className, format: this.__format, nodeKey: this.__key, children: _jsx(CustomComponent, { component: this.__data.component, properties: this.__data.properties, editorTheme: config.theme }) }));
     }
 }
 export function $createCustomComponentNode(data) {

package/lib/ext/CustomComponent/components/Code.d.ts

@@ -0,0 +1,11 @@
+import { type EditorThemeClasses } from 'lexical';
+export interface CodeProps {
+    editorTheme: EditorThemeClasses;
+    language: string;
+    title: string;
+    body?: string;
+    icon?: string;
+    foldable?: string;
+    foldthreshold?: string;
+}
+export default function Code({ editorTheme, language, title, body, icon, foldable: _foldable, foldthreshold: _foldThreshold, }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/lib/ext/CustomComponent/components/Code.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { codeToHtml } from 'shiki';
+import { useEffect, useState } from 'react';
+import { Box, IconButton, styled, useTheme, Typography, Stack } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+const translations = {
+    en: {
+        seeAllLines: 'See all {lines} lines',
+        collapseCode: 'Collapse code',
+    },
+    zh: {
+        seeAllLines: '查看所有 {lines} 行',
+        collapseCode: '折叠代码',
+    },
+};
+const XCode = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    overflow: 'hidden',
+    pre: {
+        margin: 0,
+        borderRadius: 0,
+        code: {
+            margin: 0,
+            border: 0,
+            borderRadius: 0,
+            background: 'transparent',
+            color: 'inherit',
+            overflow: 'hidden',
+        },
+    },
+}));
+/** Header 组件 */
+function CodeHeader({ title, icon, actions }) {
+    if (!title && !icon)
+        return null;
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: 1.5,
+            borderBottom: 1,
+            borderColor: 'divider',
+            bgcolor: 'background.paper',
+            borderRadius: '8px 8px 0 0',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flex: 1 }, children: [icon && _jsx(Box, { component: Icon, icon: icon, sx: { fontSize: '1.2em', color: 'text.secondary' } }), title && (_jsx(Typography, { variant: "body2", sx: { color: 'text.secondary', fontWeight: 500 }, children: title }))] }), actions && _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: actions })] }));
+}
+/** 通用操作按钮 */
+function ActionButton({ className, icon, onClick, sx = {}, }) {
+    return (_jsx(IconButton, { className: className, size: "small", sx: {
+            color: 'text.secondary',
+            bgcolor: 'transparent',
+            '&:hover': {
+                color: 'text.primary',
+                bgcolor: 'action.hover',
+            },
+            ...sx,
+        }, onClick: onClick, children: _jsx(Box, { component: Icon, icon: icon, sx: { fontSize: '1em' } }) }));
+}
+/** 复制按钮 */
+function CopyButton({ content, sx = {} }) {
+    const [isCopied, setIsCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(content);
+            setIsCopied(true);
+            setTimeout(() => {
+                setIsCopied(false);
+            }, 1500);
+        }
+        catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    };
+    return (_jsx(ActionButton, { className: "copy-button", icon: isCopied ? 'tabler:check' : 'tabler:copy', onClick: handleCopy, sx: {
+            ...sx,
+            ...(isCopied && { color: 'success.main', '&:hover': { color: 'success.main' } }),
+        } }));
+}
+/** 折叠按钮 */
+function FoldButton({ isCollapsed, onToggle, sx = {} }) {
+    return (_jsx(ActionButton, { className: "fold-button", icon: isCollapsed ? 'tabler:chevron-down' : 'tabler:chevron-up', onClick: onToggle, sx: sx }));
+}
+/** 折叠 Footer */
+function FoldFooter({ remainingLines, isCollapsed, onToggle, }) {
+    const { locale = 'en' } = useLocaleContext();
+    const t = useMemoizedFn((key, data = {}) => translate(translations, key, locale, 'en', data));
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            p: 1.5,
+            borderTop: 1,
+            borderColor: 'divider',
+            bgcolor: 'background.paper',
+            borderRadius: '0 0 8px 8px',
+            cursor: 'pointer',
+            '&:hover': {
+                bgcolor: 'action.hover',
+            },
+        }, onClick: onToggle, children: _jsxs(Typography, { variant: "body2", sx: { color: 'text.secondary', fontWeight: 500, display: 'flex', alignItems: 'center' }, children: [_jsx(Box, { component: Icon, icon: "tabler:dots", sx: { fontSize: '1em', mr: 1 } }), isCollapsed ? t('seeAllLines', { lines: remainingLines }) : t('collapseCode', { lines: remainingLines })] }) }));
+}
+export default function Code({ editorTheme, language, title, body = '', icon = '', foldable: _foldable = 'true', foldthreshold: _foldThreshold = '25', // ps: dataset 会强制将 key 小写
+ }) {
+    const [highlightedCode, setHighlightedCode] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const muiTheme = useTheme();
+    // 参数类型转换(html dataset 只支持 string value)
+    const foldable = _foldable === 'true';
+    let foldThreshold = parseInt(_foldThreshold, 10);
+    if (Number.isNaN(foldThreshold)) {
+        foldThreshold = 25;
+    }
+    const lineCount = body ? body.split('\n').length : 0;
+    const showFoldButton = foldable && lineCount > foldThreshold;
+    // 初始折叠状态：启用折叠且超过阈值就折叠
+    const [isCollapsed, setIsCollapsed] = useState(foldable && lineCount > foldThreshold);
+    // 获取最终需要显示的内容
+    const getDisplayContent = () => {
+        if (!isCollapsed || lineCount <= foldThreshold) {
+            return body;
+        }
+        const lines = body.split('\n');
+        const previewLines = lines.slice(0, foldThreshold);
+        return previewLines.join('\n');
+    };
+    const displayLineCount = isCollapsed && lineCount > foldThreshold ? foldThreshold : lineCount;
+    const gutter = displayLineCount > 0 ? Array.from({ length: displayLineCount }, (_, i) => i + 1).join('\n') : '';
+    const remainingLines = isCollapsed && lineCount > foldThreshold ? lineCount - foldThreshold : 0;
+    // 选择高亮主题
+    const shikiTheme = muiTheme.palette.mode === 'dark' ? 'github-dark' : 'github-light';
+    // 使用 shiki 进行代码高亮
+    useEffect(() => {
+        const highlightCode = async () => {
+            const contentToHighlight = getDisplayContent();
+            if (!contentToHighlight) {
+                setHighlightedCode('');
+                return;
+            }
+            setIsLoading(true);
+            try {
+                const html = await codeToHtml(contentToHighlight, {
+                    lang: language,
+                    theme: shikiTheme,
+                });
+                setHighlightedCode(html.replace(/<code([^>]*)>/g, `<code$1 class="${editorTheme.code}" data-gutter="${gutter}" data-language="${language}">`));
+            }
+            catch (error) {
+                console.error('Code highlighting failed:', error);
+                setHighlightedCode(contentToHighlight);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        highlightCode();
+    }, [body, language, shikiTheme, isCollapsed, foldThreshold, gutter]);
+    const shouldShowHeader = title || icon;
+    const actions = (_jsxs(_Fragment, { children: [showFoldButton && _jsx(FoldButton, { isCollapsed: isCollapsed, onToggle: () => setIsCollapsed(!isCollapsed) }), _jsx(CopyButton, { content: body })] }));
+    return (_jsxs(XCode, { className: "x-code", children: [shouldShowHeader && (_jsx(CodeHeader, { title: title, icon: icon, actions: _jsx(Stack, { alignItems: "center", direction: "row", spacing: 0.5, children: actions }) })), !isLoading && highlightedCode ? (_jsxs(_Fragment, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: highlightedCode } }), !shouldShowHeader && (_jsx(Stack, { alignItems: "center", direction: "row", spacing: 0.5, sx: { position: 'absolute', right: '12px', top: '12px' }, children: actions }))] })) : (_jsx("pre", { children: _jsx("code", { className: editorTheme.code, "data-gutter": gutter, "data-language": language, style: {
+                        opacity: 0.15,
+                        filter: 'blur(0.5px)',
+                        pointerEvents: 'none',
+                        userSelect: 'none',
+                    }, children: getDisplayContent() }) })), showFoldButton && (_jsx(FoldFooter, { remainingLines: remainingLines, isCollapsed: isCollapsed, onToggle: () => setIsCollapsed(!isCollapsed) }))] }));
+}

package/lib/ext/CustomComponent/components/index.d.ts

@@ -1,6 +1,8 @@
 import Card from './Card';
 import Cards from './Cards';
+import Code from './Code';
 declare const components: {
+    code: typeof Code;
     card: typeof Card;
     cards: typeof Cards;
 };

package/lib/ext/CustomComponent/components/index.js

@@ -1,6 +1,8 @@
 import Card from './Card';
 import Cards from './Cards';
+import Code from './Code';
 const components = {
+    code: Code,
     card: Card,
     cards: Cards,
 };

package/lib/main/themes/customTheme.js

@@ -243,7 +243,7 @@ const createCustomTheme = (theme) => {
     /* white-space: pre; */
     overflow-x: auto;
     position: relative;
-    border-radius: 8px;
+    border-radius: ${theme.shape.borderRadius}px;
     border: 1px solid ${palette.divider};
 
     &:before {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.75",
+  "version": "2.4.76",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -66,11 +66,12 @@
     "react-error-boundary": "^3.1.4",
     "react-player": "^2.16.0",
     "react-popper": "^2.3.0",
+    "shiki": "1.14.1",
     "split-pane-react": "^0.1.3",
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.75"
+    "@blocklet/pdf": "2.4.76"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",