@blocklet/editor 2.2.18 → 2.2.19

package/lib/ext/PagesKitComponent/PagesKitComponentRenderer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Typography, Skeleton, styled, } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
-import { useLocalStorageState } from 'ahooks';
+import { useLocalStorageState, useDebounceFn } from 'ahooks';
 import { useEffect, useMemo, useState, lazy, Suspense } from 'react';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import SplitPane, { Pane } from 'split-pane-react';
@@ -44,6 +44,8 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
     const [loading, setLoading] = useState(true);
     const [open, setOpen] = useState(false);
     const [pendingProperties, setPendingProperties] = useState(properties || {});
+    const [isDragging, setIsDragging] = useState(false);
+    const [renderComponentTrigger, setRenderComponentTrigger] = useState(0);
     const handleClick = () => {
         setOpen(true);
     };
@@ -55,7 +57,8 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
         onPropertiesChange(pendingProperties);
         setOpen(false);
     };
-    const instanceId = useMemo(() => `${id}-${hashCode(JSON.stringify(pendingProperties))}`, [id, pendingProperties]);
+    // 直接用 properties 生成 instanceId，确保只生成一次
+    const instanceId = useMemo(() => `${id}-${hashCode(JSON.stringify(properties || {}))}`, [id, properties]);
     useEffect(() => {
         const load = async () => {
             const state = customComponentStates().getState();
@@ -87,16 +90,16 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
         if (isBlockletRunning('pages-kit')) {
             load();
         }
-    }, [id, name, pendingProperties, locale]);
-    const componentStates = customComponentStates().getState()?.state?.components;
+    }, [id, instanceId, locale]);
     // 组装所有组件数据，使其能被 ParametersConfig 组件使用，不能去掉，否则无法渲染 EditorComponent
     const allComponents = useMemo(() => {
+        // 不要修改这个逻辑，否则会导致组件无法渲染
         return mapValues(customComponentStates().getState()?.state?.components || {}, ({ component }) => ({
             blockletId: 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o',
             blockletTitle: 'Pages Kit',
             data: component,
         }));
-    }, [componentStates]);
+    }, [JSON.stringify(customComponentStates().getState()?.state?.components)]);
     const component = useMemo(() => allComponents?.[id]?.data, [allComponents, id]);
     const mergedPropertiesValues = useMemo(() => {
         const realLocale = getRealLocale(pendingProperties, locale);
@@ -110,7 +113,20 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
             ];
         }));
     }, [component, locale, pendingProperties]);
-    const componentRenderer = useMemo(() => (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode }, properties: mergedPropertiesValues })), [instanceId, id, locale, mergedPropertiesValues, mode, component]);
+    // 防抖触发重新渲染
+    const { run: triggerRerender } = useDebounceFn(() => {
+        setRenderComponentTrigger((prev) => prev + 1);
+    }, { wait: 300 });
+    // 当属性变化时，触发防抖渲染
+    useEffect(() => {
+        triggerRerender();
+    }, [mergedPropertiesValues]);
+    const componentRenderer = useMemo(() => {
+        return (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode, components: allComponents }, properties: mergedPropertiesValues }));
+    }, 
+    // 添加 renderComponentTrigger 依赖，确保组件延迟渲染
+    // 而 mergedPropertiesValues 变化时，组件不会立即重新渲染， 所以不需要添加 mergedPropertiesValues 依赖
+    [instanceId, id, locale, mode, allComponents, renderComponentTrigger]);
     if (loading || !component) {
         return null;
     }
@@ -135,7 +151,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
                                     '.full-screen-container': {
                                         zIndex: '1300 !important',
                                     },
-                                }, children: _jsxs(StyledSplitPane, { split: "vertical", sizes: splitSizes, onChange: setSplitSizes, sashRender: SashRender, children: [_jsx(Pane, { minSize: 200, children: _jsx(Box, { sx: { flex: 1, mr: 1, overflow: 'auto', height: '100%' }, children: componentRenderer }) }), _jsx(Pane, { minSize: 200, maxSize: "70%", style: {
+                                }, children: _jsxs(StyledSplitPane, { split: "vertical", sizes: splitSizes, onChange: setSplitSizes, sashRender: SashRender, className: isDragging ? 'dragging' : '', onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: [_jsx(Pane, { minSize: 200, children: _jsx(Box, { sx: { flex: 1, mr: 1, overflow: 'auto', height: '100%' }, children: componentRenderer }) }), _jsx(Pane, { minSize: 200, maxSize: "70%", style: {
                                                 overflow: 'auto',
                                             }, children: _jsx(Box, { sx: {
                                                     ml: 2,
@@ -157,9 +173,9 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
                                                              * 这确保了语言切换时数据不会丢失，且多语言共享未翻译的内容
                                                              */
                                                             onChange: ({ id: propertyId, value }) => {
+                                                                if (!locale || !propertyId)
+                                                                    return;
                                                                 setPendingProperties((prevProperties) => {
-                                                                    if (!locale || !propertyId || !value?.value)
-                                                                        return prevProperties;
                                                                     // 创建新的属性对象
                                                                     const updatedProperties = { ...prevProperties };
                                                                     const realLocale = getRealLocale(updatedProperties, locale);
@@ -203,6 +219,12 @@ const StyledSplitPane = styled(SplitPane) `
   .react-split__sash {
     z-index: 1000; // resolve the bug of uploader zIndex
   }
+
+  &.dragging {
+    * {
+      user-select: none !important;
+    }
+  }
 `;
 function SashRender() {
     return _jsx(DragHandle, {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.2.18",
+  "version": "2.2.19",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -24,11 +24,11 @@
     ]
   },
   "dependencies": {
-    "@blocklet/code-editor": "^0.4.255",
+    "@blocklet/code-editor": "^0.4.256",
     "@blocklet/embed": "^0.2.3",
     "@blocklet/js-sdk": "^1.16.41",
-    "@blocklet/pages-kit": "^0.4.102",
-    "@blocklet/pages-kit-runtime": "^0.4.104",
+    "@blocklet/pages-kit": "^0.4.105",
+    "@blocklet/pages-kit-runtime": "^0.4.105",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.1.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -67,7 +67,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.2.18"
+    "@blocklet/pdf": "^2.2.19"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",