@blocklet/editor 2.1.83 → 2.1.85

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -1,7 +1,7 @@
 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, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
 import { isBlockletRunning } from '../utils';
@@ -28,20 +28,38 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
         onPropertiesChange(pendingProperties);
         setAnchorEl(null);
     };
+    const instanceId = useMemo(() => `${id}-${hashCode(JSON.stringify(pendingProperties))}`, [id, pendingProperties]);
     useEffect(() => {
         const load = async () => {
             const state = customComponentStates().getState();
             await state.loadComponents({
                 mode,
                 locale,
-                instances: [{ id, component: { name } }],
+                instances: [
+                    {
+                        id: instanceId,
+                        component: { id },
+                        // TODO wait pages kit package update, remove this
+                        // @ts-ignore
+                        useCache: true,
+                        // @ts-ignore
+                        cacheDuration: 3600 * 2,
+                        properties: Object.entries(pendingProperties?.[locale] || {}).reduce((props, [key, value]) => {
+                            props[key] = { value };
+                            if (typeof value === 'object') {
+                                props[key].value = JSON.stringify(value);
+                            }
+                            return props;
+                        }, {}),
+                    },
+                ],
             });
             setLoading(false);
         };
         if (isBlockletRunning('pages-kit')) {
             load();
         }
-    }, [id, name]);
+    }, [id, name, pendingProperties]);
     const component = customComponentStates().getState()?.state?.components?.[id]?.component;
     if (loading || !component) {
         return null;
@@ -50,7 +68,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
     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, { componentId: id, locale: locale, dev: { mode }, props: properties?.[locale] }), 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: {
+    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: {
@@ -66,10 +84,19 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
                                         }, 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 }), type: x.type, value: pendingProperties[locale]?.[x.key] ??
+                                    return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }), type: x.type, value: pendingProperties[locale]?.[x.id] ??
                                                 getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
                                                 ...pendingProperties,
-                                                [locale]: { ...pendingProperties[locale], [x.key]: v },
-                                            }), multiline: multiline }) }, x.key));
+                                                [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" })] })] }) })] }))] }));
 }
+function hashCode(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash &= hash; // Convert to 32-bit integer
+    }
+    return Math.abs(hash).toString(36); // 转换为 36 进制，使 id 更短
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.1.83",
+  "version": "2.1.85",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
   "dependencies": {
     "@blocklet/embed": "^0.2.0",
     "@blocklet/js-sdk": "1.16.33",
-    "@blocklet/pages-kit": "^0.2.467",
+    "@blocklet/pages-kit": "^0.3.6",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -65,7 +65,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.1.83"
+    "@blocklet/pdf": "^2.1.85"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",