@blocklet/editor 2.4.101 → 2.4.103

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/ext/PagesKitComponent/PagesKitComponentNode.d.ts

@@ -1,6 +1,6 @@
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 import type { Properties } from './utils';
 export interface ComponentData {
     id: string;

package/lib/ext/PagesKitComponent/PagesKitComponentNode.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { PagesKitComponentRenderer } from './PagesKitComponentRenderer';
+import { lazy, Suspense } from 'react';
+const LazyPagesKitComponentRenderer = lazy(() => import('./PagesKitComponentRenderer').then((mod) => ({ default: mod.PagesKitComponentRenderer })));
 function PagesKitComponent({ className, format, nodeKey, data, onPropertiesChange }) {
-    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(PagesKitComponentRenderer, { id: data.id, name: data.name, properties: data.properties, onPropertiesChange: onPropertiesChange }) }));
+    return (_jsx(BlockWithAlignableContents, { className: className, format: format, nodeKey: nodeKey, children: _jsx(Suspense, { fallback: null, children: _jsx(LazyPagesKitComponentRenderer, { id: data.id, name: data.name, properties: data.properties, onPropertiesChange: onPropertiesChange }) }) }));
 }
 function convertPagesKitComponentElement(domNode) {
     const pagesKitComponentStr = domNode.getAttribute('data-lexical-pages-kit-component');

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/lib/main/nodes/MermaidNode.d.ts

@@ -1,6 +1,6 @@
 import type { DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
-import type { JSX } from 'react';
+import { type JSX } from 'react';
 export interface MermaidPayload {
     code: string;
     theme?: string;

package/lib/main/nodes/MermaidNode.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DecoratorNode } from 'lexical';
-import MermaidComponent from './MermaidComponent';
+import { lazy, Suspense } from 'react';
+const LazyMermaidComponent = lazy(() => import('./MermaidComponent'));
 function convertMermaidElement(domNode) {
     if (domNode && domNode.classList?.contains('mermaid')) {
         const code = domNode.textContent || '';
@@ -84,7 +85,7 @@ export class MermaidNode extends DecoratorNode {
         return false;
     }
     decorate() {
-        return _jsx(MermaidComponent, { code: this.__code, theme: this.__theme, mode: this.__mode });
+        return (_jsx(Suspense, { fallback: null, children: _jsx(LazyMermaidComponent, { code: this.__code, theme: this.__theme, mode: this.__mode }) }));
     }
 }
 export function $createMermaidNode({ code, theme, mode, key }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.4.101",
+  "version": "2.4.103",
   "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.101"
+    "@blocklet/pdf": "2.4.103"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",