@blocklet/editor 2.4.102 → 2.4.104

package/lib/ext/CustomComponent/CustomComponentNode.js

@@ -71,6 +71,8 @@ export class CustomComponentNode extends DecoratorBlockNode {
             'x-code-group': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-steps': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
             'x-field': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-field-group': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
+            'x-field-desc': () => ({ conversion: convertCustomComponentElement, priority: 1 }),
         };
     }
     static importJSON(serializedNode) {

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

@@ -1,3 +1,4 @@
+import { FieldDescProps } from './FieldDesc';
 export declare const X_FIELD_TRANSLATIONS: {
     en: {
         required: string;
@@ -10,6 +11,16 @@ export declare const X_FIELD_TRANSLATIONS: {
         subfields: string;
     };
 };
+type ChildMap = {
+    field: FieldProps;
+    'field-desc': FieldDescProps;
+};
+type Child = {
+    [K in keyof ChildMap]: {
+        component: K;
+        properties: ChildMap[K];
+    };
+}[keyof ChildMap];
 export interface FieldProps {
     name: string;
     type: string;
@@ -17,8 +28,7 @@ export interface FieldProps {
     required?: 'false' | 'true';
     deprecated?: 'false' | 'true';
     desc?: string;
-    children?: {
-        properties: FieldProps;
-    }[];
+    children?: Child[];
 }
-export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }: 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;
+export {};

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Stack, Box, styled, alpha, Collapse } from '@mui/material';
 import { Add } from '@mui/icons-material';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } 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';
+import FieldDesc from './FieldDesc';
 // 多语言翻译
 export const X_FIELD_TRANSLATIONS = {
     en: {
@@ -64,7 +65,7 @@ const Bar = styled(Box)(({ theme }) => ({
     flexWrap: 'wrap',
     gap: theme.spacing(1.25),
 }));
-export default function Field({ name, type, default: defaultVal, required, deprecated, desc, children }) {
+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();
@@ -84,10 +85,20 @@ export default function Field({ name, type, default: defaultVal, required, depre
                     background: ({ palette }) => alpha(palette.warning.light, 0.1),
                     fontWeight: 500,
                 }, 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] }))] }));
+    // desc 子节点
+    const childDesc = useMemo(() => {
+        const index = children.findIndex((v) => v.component === 'field-desc');
+        if (index >= 0) {
+            return children[index];
+        }
+        return undefined;
+    }, [children]);
     // 渲染子 Field
     const renderChildren = () => {
-        if (!children || children.length === 0)
+        const childFields = children.filter((v) => v.component === 'field');
+        if (childFields.length === 0) {
             return null;
+        }
         return (_jsxs(Box, { sx: { mt: 1 }, children: [_jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
@@ -107,7 +118,7 @@ export default function Field({ name, type, default: defaultVal, required, depre
                                 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: {
+                            }, children: _jsx(Add, {}) }), _jsx(Box, { sx: { color: 'text.secondary', fontSize: '14px', flex: 1 }, children: t('subfields', { num: childFields.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',
@@ -116,12 +127,13 @@ export default function Field({ name, type, default: defaultVal, required, depre
                             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);
+                        }, children: _jsx(Stack, { spacing: 1, children: childFields.map((child) => {
+                                const properties = child.properties;
+                                const fullname = `${name}.${properties.name}`;
+                                return _jsx(Field, { ...properties, name: fullname }, fullname);
                             }) }) }) })] }));
     };
-    return (_jsxs(Stack, { className: "x-param-field", sx: {
+    return (_jsxs(Stack, { className: "x-field", sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
             pt: 1.25,
@@ -130,5 +142,5 @@ export default function Field({ name, type, default: defaultVal, required, depre
             '& &:last-child': {
                 borderBottom: 'none',
             },
-        }, children: [_jsxs(Bar, { children: [name && _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()] }));
+        }, children: [_jsxs(Bar, { children: [name && _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 }), childDesc && _jsx(FieldDesc, { ...childDesc.properties }), renderChildren()] }));
 }

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

@@ -0,0 +1,5 @@
+import { type LexicalNode } from 'lexical';
+export interface FieldDescProps {
+    childNodes: LexicalNode[];
+}
+export default function FieldDesc({ childNodes }: FieldDescProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StaticEditor from './StaticEditor';
+export default function FieldDesc({ childNodes }) {
+    return (_jsx(StaticEditor, { childNodes: childNodes, sx: {
+            '&>p:first-child': {
+                color: 'text.secondary',
+                marginTop: (theme) => `${theme.spacing(2)} !important`,
+                marginLeft: 0,
+                marginRight: 0,
+                marginBottom: 0,
+            },
+        } }));
+}

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

@@ -0,0 +1,7 @@
+import { FieldProps } from './Field';
+export interface FieldGroupProps {
+    children?: {
+        properties: FieldProps;
+    }[];
+}
+export default function FieldGroup({ children }: FieldGroupProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import Field from './Field';
+export default function FieldGroup({ children = [] }) {
+    if (children.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { className: "x-field-group", sx: {
+            '& > .x-field:last-child': {
+                borderBottom: 'none',
+            },
+        }, children: children.map((child) => {
+            const { properties } = child;
+            return _jsx(Field, { ...properties });
+        }) }));
+}

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

@@ -0,0 +1,7 @@
+import { type LexicalNode } from 'lexical';
+import { SxProps, Theme } from '@mui/material';
+export interface StaticEditorProps {
+    childNodes: LexicalNode[];
+    sx?: SxProps<Theme>;
+}
+export default function StaticEditor({ childNodes, sx }: StaticEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import DOMPurify from 'dompurify';
+import { Box } from '@mui/material';
+export default function StaticEditor({ childNodes, sx }) {
+    const [editor] = useLexicalComposerContext();
+    const editorState = editor.parseEditorState(JSON.stringify({
+        root: {
+            children: [
+                {
+                    type: 'paragraph',
+                    children: childNodes,
+                },
+            ],
+            type: 'root',
+        },
+    }));
+    let html = '';
+    editorState.read(() => {
+        html = $generateHtmlFromNodes(editor);
+    });
+    return _jsx(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(html) }, sx: sx });
+}

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

@@ -2,10 +2,14 @@ import Card from './Card';
 import Cards from './Cards';
 import Code from './Code';
 import Field from './Field';
+import FieldDesc from './FieldDesc';
+import FieldGroup from './FieldGroup';
 declare const components: {
     code: typeof Code;
     card: typeof Card;
     cards: typeof Cards;
     field: typeof Field;
+    'field-desc': typeof FieldDesc;
+    'field-group': typeof FieldGroup;
 };
 export default components;

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

@@ -2,10 +2,15 @@ import Card from './Card';
 import Cards from './Cards';
 import Code from './Code';
 import Field from './Field';
+import FieldDesc from './FieldDesc';
+import FieldGroup from './FieldGroup';
+// key 为 '-' 分隔的 html tagName
 const components = {
     code: Code,
     card: Card,
     cards: Cards,
     field: Field,
+    'field-desc': FieldDesc,
+    'field-group': FieldGroup,
 };
 export default components;

package/lib/main/index.js

@@ -25,7 +25,6 @@ import { TableContext } from './plugins/TablePlugin';
 import { useCustomTheme } from './themes/customTheme';
 import { PLAYGROUND_TRANSFORMERS } from './plugins/MarkdownTransformers';
 export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, editable = true, markdown, ...props }) {
-    const muiTheme = useTheme();
     const theme = useCustomTheme();
     const initialConfig = {
         namespace: 'Playground',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.102",
+  "version": "2.4.104",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "@blocklet/code-editor": "^0.5.20",
     "@blocklet/embed": "^0.2.5",
-    "@blocklet/js-sdk": "^1.16.51",
+    "@blocklet/js-sdk": "^1.16.52-beta-20250918-114058-f5efc10b",
     "@blocklet/pages-kit": "^0.6.72",
     "@blocklet/pages-kit-runtime": "^0.6.72",
     "@excalidraw/excalidraw": "^0.18.0",
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.4.102"
+    "@blocklet/pdf": "2.4.104"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",