@blocklet/editor 2.2.1 → 2.2.3

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -1,32 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { Box, Button, Divider, IconButton, Popover, useMediaQuery } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, useMediaQuery, Typography, Skeleton, } from '@mui/material';
+import { useEffect, useMemo, useState, lazy, Suspense } from 'react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
+// @ts-ignore
+import { translations } from '@blocklet/pages-kit-runtime/locales';
+import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import { isBlockletRunning } from '../utils';
-import { mode, isValidPropertyType, getLocalizedValue, getPropertyLabel } from './utils';
-import { PropertyField } from './PropertyField';
+import { mode, 
+// isValidPropertyType,
+getLocalizedValue, } from './utils';
+// @FIXME: 需要移除这些无用的代码，现在使用 Pages Kit 提供的 ParametersConfig 组件
+// import { PropertyField } from './PropertyField';
 import { useContentLocale } from '../ContentLocale';
+const ParametersConfigLazy = lazy(() => import('@blocklet/pages-kit-runtime/components').then((mod) => ({
+    // @ts-ignore
+    default: mod.ParametersConfig,
+})));
 export function PagesKitComponentRenderer({ id, name, properties, onPropertiesChange }) {
     const locale = useContentLocale();
     const [editor] = useLexicalComposerContext();
     const isEditable = editor.isEditable();
     const [loading, setLoading] = useState(true);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
+    const [open, setOpen] = useState(false);
     const upMd = useMediaQuery((theme) => theme.breakpoints.up('md'));
     const [pendingProperties, setPendingProperties] = useState(properties || {});
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleClick = () => {
+        setOpen(true);
     };
     const handleCancel = () => {
-        setAnchorEl(null);
+        setOpen(false);
         setPendingProperties(properties || {});
     };
     const handleSave = () => {
         onPropertiesChange(pendingProperties);
-        setAnchorEl(null);
+        setOpen(false);
     };
     const instanceId = useMemo(() => `${id}-${hashCode(JSON.stringify(pendingProperties))}`, [id, pendingProperties]);
     useEffect(() => {
@@ -60,36 +69,35 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
             load();
         }
     }, [id, name, pendingProperties]);
-    const component = customComponentStates().getState()?.state?.components?.[id]?.component;
+    const allComponents = customComponentStates().getState()?.state?.components;
+    const component = allComponents?.[id]?.component;
+    const mergedPropertiesValues = useMemo(() => Object.fromEntries(Object.values(component?.properties ?? {}).map(({ data }) => {
+        return [
+            data.id,
+            {
+                value: pendingProperties?.[locale]?.[data.id] ??
+                    getLocalizedValue({ key: 'defaultValue', locale, data: data.locales }),
+            },
+        ];
+    })), [component, locale, pendingProperties]);
+    const componentRenderer = useMemo(() => (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode }, properties: mergedPropertiesValues })), [instanceId, id, locale, mergedPropertiesValues]);
     if (loading || !component) {
         return null;
     }
-    // 暂时仅支持基础类型的组件参数配置
-    const propDefinitions = Object.values(component.properties || {})
-        .map((x) => x.data)
-        .filter((x) => !!x.key && isValidPropertyType(x.type));
-    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode } }), isEditable && !!propDefinitions.length && upMd && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                        }, transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'right',
-                        }, children: _jsxs(Box, { sx: { width: 440, maxHeight: 500, p: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 0.5,
-                                            color: 'text.secondary',
-                                            fontSize: 14,
-                                            fontWeight: 600,
-                                        }, children: [_jsx(Box, { component: "span", className: "iconify", "data-icon": "tabler:settings-2", sx: { fontSize: 20 } }), _jsx("span", { children: "Properties" })] }) }), _jsx(Divider, { sx: { mt: 0.75, mb: 2 } }), propDefinitions.map((x) => {
-                                    // @ts-ignore
-                                    const multiline = !!x.multiline;
-                                    return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }) || x.key || '', type: x.type, value: pendingProperties[locale]?.[x.id] ??
-                                                getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
-                                                ...pendingProperties,
-                                                [locale]: { ...pendingProperties[locale], [x.id]: v },
-                                            }), multiline: multiline }) }, x.id));
-                                }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, py: 2 }, children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] }) })] }))] }));
+    return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [componentRenderer, isEditable && !!Object.keys(component?.properties ?? {}).length && upMd && (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: { position: 'absolute', right: 0, top: -32 }, onClick: handleClick, children: _jsx(SettingsOutlinedIcon, {}) }), _jsxs(Dialog, { disableEnforceFocus: true, fullWidth: true, maxWidth: "lg", open: open, onClose: handleCancel, disableScrollLock: false, children: [_jsx(DialogTitle, { children: _jsxs(Typography, { variant: "h6", children: [name, " "] }) }), _jsx(DialogContent, { sx: {
+                                    zIndex: 1200,
+                                    maxHeight: '70vh',
+                                    overflow: 'hidden',
+                                }, children: _jsxs(Box, { sx: { display: 'flex', height: '70vh' }, children: [_jsx(Box, { sx: { flex: 1, p: 4, borderRight: '1px solid', borderColor: 'divider', overflow: 'auto' }, children: componentRenderer }), _jsx(Box, { sx: { width: 320, ml: 2, overflow: 'auto', overflowX: 'hidden' }, children: _jsx(LocaleProvider, { translations: translations, fallbackLocale: "en", children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", height: "100%" }), children: _jsx(ParametersConfigLazy
+                                                    // @ts-ignore
+                                                    , { 
+                                                        // @ts-ignore
+                                                        config: component, allComponents: allComponents, defaultLocale: "en", locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ id: propertyId, value }) => {
+                                                            setPendingProperties({
+                                                                ...pendingProperties,
+                                                                [locale]: { ...pendingProperties[locale], [propertyId]: value?.value },
+                                                            });
+                                                        } }) }) }) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] })] }))] }));
 }
 function hashCode(str) {
     let hash = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -28,6 +28,7 @@
     "@blocklet/embed": "^0.2.3",
     "@blocklet/js-sdk": "^1.16.41-beta-20250319-131732-1224cca5",
     "@blocklet/pages-kit": "^0.4.85",
+    "@blocklet/pages-kit-runtime": "^0.4.90",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -66,7 +67,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.2.1"
+    "@blocklet/pdf": "^2.2.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -95,14 +96,14 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "peerDependencies": {
+    "@arcblock/did-connect": "^2.10.36",
+    "@arcblock/ux": "^2.10.46",
     "@emotion/css": "*",
     "@emotion/react": "*",
     "@emotion/styled": "*",
     "@mui/material": "*",
     "react": "*",
-    "react-dom": "*",
-    "@arcblock/did-connect": "^2.10.36",
-    "@arcblock/ux": "^2.10.46"
+    "react-dom": "*"
   },
   "scripts": {
     "dev": "npm run storybook",