@blocklet/editor 2.4.94 → 2.4.96

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

@@ -4,7 +4,7 @@ export declare const LANGUAGE_ICON: Record<string, string | {
     light: string;
     dark: string;
 }>;
-export declare const XCODE_TRANSLATIONS: {
+export declare const X_CODE_TRANSLATIONS: {
     en: {
         seeAllLines: string;
         collapseCode: string;

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

@@ -82,7 +82,7 @@ export const LANGUAGE_ICON = {
     },
     awk: 'vscode-icons:file-type-awk',
     ballerina: 'material-icon-theme:ballerina',
-    bash: 'material-icon-theme:console',
+    bash: 'catppuccin:powershell',
     bat: 'catppuccin:batch',
     batch: 'catppuccin:batch',
     beancount: '',
@@ -141,7 +141,7 @@ export const LANGUAGE_ICON = {
     fennel: '',
     fish: '',
     fluent: '',
-    fsharp: 'vscode-icons:file-type-fsharp2',
+    fsharp: 'logos:fsharp',
     gdresource: '',
     gdscript: 'vscode-icons:file-type-gdscript',
     gdshader: '',
@@ -198,7 +198,7 @@ export const LANGUAGE_ICON = {
     less: 'catppuccin:less',
     liquid: 'logos:shopify',
     lit: 'logos:lit',
-    log: 'material-icon-theme:console',
+    log: 'catppuccin:powershell',
     logo: '',
     lua: 'logos:lua',
     luau: 'vscode-icons:file-type-luau',
@@ -263,11 +263,11 @@ export const LANGUAGE_ICON = {
     scala: 'logos:scala',
     scheme: '',
     scss: 'logos:sass',
-    sh: 'material-icon-theme:console',
+    sh: 'catppuccin:powershell',
     shaderlab: 'catppuccin:shader',
-    shell: 'material-icon-theme:console',
-    shellscript: 'material-icon-theme:console',
-    shellsession: 'material-icon-theme:console',
+    shell: 'catppuccin:powershell',
+    shellscript: 'catppuccin:powershell',
+    shellsession: 'catppuccin:powershell',
     smalltalk: '',
     solidity: {
         light: 'vscode-icons:file-type-light-solidity',
@@ -330,14 +330,14 @@ export const LANGUAGE_ICON = {
         dark: 'vscode-icons:file-type-yaml-official',
     },
     zenscript: '',
-    zig: 'vscode-icons:file-type-zig',
+    zig: 'devicon:zig',
     zsh: {
         light: 'devicon:zsh',
         dark: 'devicon-plain:zsh',
     },
 };
 // 多语言翻译
-export const XCODE_TRANSLATIONS = {
+export const X_CODE_TRANSLATIONS = {
     en: {
         seeAllLines: 'See all {lines} lines',
         collapseCode: 'Collapse code',
@@ -361,9 +361,9 @@ function CodeHeader({ title, icon, actions }) {
             bgcolor: 'grey.50',
             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: '24px',
-                            height: '24px',
-                            lineHeight: '24px',
+                            fontSize: '16px',
+                            height: '16px',
+                            lineHeight: '16px',
                             color: 'text.secondary',
                             fill: ({ palette }) => palette.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 })] }));
@@ -407,7 +407,7 @@ function FoldButton({ isCollapsed, onToggle, sx = {} }) {
 /** 折叠 Footer */
 function FoldFooter({ remainingLines, isCollapsed, onToggle, }) {
     const { locale = 'en' } = useLocaleContext();
-    const t = useMemoizedFn((key, data = {}) => translate(XCODE_TRANSLATIONS, key, locale, 'en', data));
+    const t = useMemoizedFn((key, data = {}) => translate(X_CODE_TRANSLATIONS, key, locale, 'en', data));
     return (_jsx(Box, { sx: {
             display: 'flex',
             alignItems: 'center',

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

@@ -1,9 +1,24 @@
+export declare const X_FIELD_TRANSLATIONS: {
+    en: {
+        required: string;
+        deprecated: string;
+        subfields: string;
+    };
+    zh: {
+        required: string;
+        deprecated: string;
+        subfields: string;
+    };
+};
 export interface FieldProps {
     name: string;
     type: string;
     default?: string;
     required?: 'false' | 'true';
     deprecated?: 'false' | 'true';
-    body?: string;
+    desc?: string;
+    children?: {
+        properties: FieldProps;
+    }[];
 }
-export default function Field({ name, type, default: defaultVal, required, deprecated, body }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }: FieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, Box, styled, alpha } from '@mui/material';
+import { Stack, Box, styled, alpha, Collapse } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { useState, useEffect } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
 import useMobile from '../../../main/hooks/use-mobile';
+// 多语言翻译
+export const X_FIELD_TRANSLATIONS = {
+    en: {
+        required: 'required',
+        deprecated: 'deprecated',
+        subfields: '{num} subfields',
+    },
+    zh: {
+        required: '必填',
+        deprecated: '废弃',
+        subfields: '{num} 个子属性',
+    },
+};
+// 利用栈管理高亮的 Field
+const highlightManager = (() => {
+    const highlightStack = [];
+    const listeners = new Set();
+    const removeFromStack = (fieldId) => {
+        const index = highlightStack.indexOf(fieldId);
+        if (index > -1) {
+            highlightStack.splice(index, 1);
+        }
+    };
+    const notifyListeners = () => {
+        const currentHighlight = highlightStack.length > 0 ? highlightStack[highlightStack.length - 1] : null;
+        listeners.forEach((listener) => listener(currentHighlight));
+    };
+    return {
+        enterField(fieldId) {
+            removeFromStack(fieldId);
+            highlightStack.push(fieldId);
+            notifyListeners();
+        },
+        leaveField(fieldId) {
+            removeFromStack(fieldId);
+            notifyListeners();
+        },
+        getHighlightedFieldId() {
+            return highlightStack.length > 0 ? highlightStack[highlightStack.length - 1] : null;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+})();
 const Tag = styled(Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius * 0.75,
     padding: theme.spacing(0.25, 1),
@@ -13,20 +64,71 @@ const Bar = styled(Box)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.spacing(1.25),
 }));
-export default function Field({ name, type, default: defaultVal, required, deprecated, body }) {
+export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }) {
+    const { locale = 'en' } = useLocaleContext();
+    const t = useMemoizedFn((key, data = {}) => translate(X_FIELD_TRANSLATIONS, key, locale, 'en', data));
     const isMobile = useMobile();
     const isRequired = required === 'true';
     const isDeprecated = deprecated === 'true';
-    const metaInfo = (_jsxs(_Fragment, { children: [_jsx(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: type }), isRequired && (_jsx(Tag, { sx: { color: 'error.main', background: ({ palette }) => alpha(palette.error.main, 0.1), fontWeight: 500 }, children: "required" })), isDeprecated && (_jsx(Tag, { sx: {
+    const [expanded, setExpanded] = useState(false);
+    const [highlightedFieldId, setHighlightedFieldId] = useState(null);
+    // 使用 name 作为 fieldId
+    const fieldId = name;
+    // 订阅全局高亮状态变化
+    useEffect(() => {
+        const unsubscribe = highlightManager.subscribe(setHighlightedFieldId);
+        return () => unsubscribe();
+    }, []);
+    const metaInfo = (_jsxs(_Fragment, { children: [_jsx(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: type }), isRequired && (_jsx(Tag, { sx: { color: 'error.main', background: ({ palette }) => alpha(palette.error.main, 0.1), fontWeight: 500 }, children: t('required') })), isDeprecated && (_jsx(Tag, { sx: {
                     color: 'warning.light',
                     background: ({ palette }) => alpha(palette.warning.light, 0.1),
                     fontWeight: 500,
-                }, children: "deprecated" })), defaultVal && (_jsxs(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: [_jsx(Box, { component: "span", sx: { color: 'text.secondary', mr: 0.5 }, children: "default:" }), defaultVal] }))] }));
+                }, children: t('deprecated') })), defaultVal && (_jsxs(Tag, { sx: { backgroundColor: ({ palette }) => alpha(palette.grey[100], 0.6) }, children: [_jsx(Box, { component: "span", sx: { color: 'text.secondary', mr: 0.5 }, children: "default:" }), defaultVal] }))] }));
+    // 渲染子 Field
+    const renderChildren = () => {
+        if (!children || children.length === 0)
+            return null;
+        return (_jsxs(Box, { sx: { mt: 1 }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        cursor: 'pointer',
+                        mb: 1,
+                        p: 0.5,
+                        borderRadius: 1,
+                        '&:hover': {
+                            backgroundColor: ({ palette }) => alpha(palette.action.hover, 0.04),
+                        },
+                    }, onClick: () => setExpanded(!expanded), children: [_jsx(Box, { sx: {
+                                color: 'text.secondary',
+                                fontSize: '16px',
+                                mr: 0.5,
+                                transform: expanded ? 'rotate(45deg)' : 'rotate(0deg)',
+                                transition: 'transform 0.2s ease-in-out',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsx(Add, {}) }), _jsx(Box, { sx: { color: 'text.secondary', fontSize: '14px', flex: 1 }, children: t('subfields', { num: children.length }) })] }), _jsx(Collapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: _jsx(Box, { sx: {
+                            pl: 1.5,
+                            borderLeft: '1px dashed',
+                            borderColor: highlightedFieldId === fieldId ? 'primary.main' : 'divider',
+                            transition: 'border-color 0.2s ease-in-out',
+                        }, onMouseEnter: () => {
+                            highlightManager.enterField(fieldId);
+                        }, onMouseLeave: () => {
+                            highlightManager.leaveField(fieldId);
+                        }, children: _jsx(Stack, { spacing: 1, children: children.map((child) => {
+                                const fullname = `${name}.${child.properties.name}`;
+                                return _jsx(Field, { ...child.properties, name: fullname }, fullname);
+                            }) }) }) })] }));
+    };
     return (_jsxs(Stack, { className: "x-param-field", sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
             pt: 1.25,
             pb: 2.5,
             my: 1.25,
-        }, children: [_jsxs(Bar, { children: [_jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), body && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: body })] }));
+            '& &:last-child': {
+                borderBottom: 'none',
+            },
+        }, children: [_jsxs(Bar, { children: [_jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), desc && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: desc }), renderChildren()] }));
 }

package/lib/main/viewer/index.js

@@ -22,5 +22,5 @@ export function BlockletEditorViewer({ editorState, markdown, ...props }) {
         },
         theme,
     };
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorRoot, { className: cx(props.className, 'be-shell'), "data-mode": muiTheme.palette.mode, children: _jsx(EditorViewer, { ...props }) }) }, muiTheme.palette.mode));
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorRoot, { className: cx(props.className, 'be-shell'), "data-mode": muiTheme.palette.mode, children: _jsx(EditorViewer, { ...props }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.94",
+  "version": "2.4.96",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.94"
+    "@blocklet/pdf": "2.4.96"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",