@blocklet/editor 2.2.10 → 2.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
-
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, useMediaQuery, Typography, Skeleton, } from '@mui/material';
|
|
3
|
+
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, useMediaQuery, Typography, Skeleton, Divider, } from '@mui/material';
|
|
4
4
|
import { useEffect, useMemo, useState, lazy, Suspense } from 'react';
|
|
5
5
|
import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
|
|
6
6
|
import { CustomComponentRenderer, customComponentStates } from '@blocklet/pages-kit/components';
|
|
7
7
|
// @ts-ignore
|
|
8
8
|
import { translations } from '@blocklet/pages-kit-runtime/locales';
|
|
9
9
|
import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
|
|
10
|
+
import mapValues from 'lodash/mapValues';
|
|
10
11
|
import { isBlockletRunning } from '../utils';
|
|
11
12
|
import { mode,
|
|
12
13
|
// isValidPropertyType,
|
|
@@ -69,8 +70,16 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
|
|
|
69
70
|
load();
|
|
70
71
|
}
|
|
71
72
|
}, [id, name, pendingProperties]);
|
|
72
|
-
const
|
|
73
|
-
|
|
73
|
+
const componentStates = customComponentStates().getState()?.state?.components;
|
|
74
|
+
// 组装所有组件数据，使其能被 ParametersConfig 组件使用，不能去掉，否则无法渲染 EditorComponent
|
|
75
|
+
const allComponents = useMemo(() => {
|
|
76
|
+
return mapValues(customComponentStates().getState()?.state?.components || {}, ({ component }) => ({
|
|
77
|
+
blockletId: 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o',
|
|
78
|
+
blockletTitle: 'Pages Kit',
|
|
79
|
+
data: component,
|
|
80
|
+
}));
|
|
81
|
+
}, [componentStates]);
|
|
82
|
+
const component = useMemo(() => allComponents?.[id]?.data, [allComponents, id]);
|
|
74
83
|
const mergedPropertiesValues = useMemo(() => Object.fromEntries(Object.values(component?.properties ?? {}).map(({ data }) => {
|
|
75
84
|
return [
|
|
76
85
|
data.id,
|
|
@@ -80,22 +89,35 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
|
|
|
80
89
|
},
|
|
81
90
|
];
|
|
82
91
|
})), [component, locale, pendingProperties]);
|
|
83
|
-
const componentRenderer = useMemo(() => (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode }, properties: mergedPropertiesValues })), [instanceId, id, locale, mergedPropertiesValues]);
|
|
92
|
+
const componentRenderer = useMemo(() => (_jsx(CustomComponentRenderer, { instanceId: instanceId, componentId: id, locale: locale, dev: { mode }, properties: mergedPropertiesValues })), [instanceId, id, locale, mergedPropertiesValues, mode, component]);
|
|
84
93
|
if (loading || !component) {
|
|
85
94
|
return null;
|
|
86
95
|
}
|
|
87
|
-
return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [componentRenderer, isEditable && !!Object.keys(component?.properties ?? {}).length &&
|
|
88
|
-
|
|
89
|
-
|
|
96
|
+
return (_jsxs(Box, { sx: { position: 'relative', ...(isEditable && { mt: 2 }) }, children: [componentRenderer, isEditable && !!Object.keys(component?.properties ?? {}).length && (_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: (event, reason) => {
|
|
97
|
+
const shouldClose = !['backdropClick', 'escapeKeyDown'].includes(reason);
|
|
98
|
+
if (shouldClose) {
|
|
99
|
+
handleCancel();
|
|
100
|
+
}
|
|
101
|
+
}, disableEscapeKeyDown: true, disableScrollLock: false, children: [_jsx(DialogTitle, { children: _jsxs(Typography, { variant: "h6", children: [name, " "] }) }), _jsx(DialogContent, { sx: {
|
|
102
|
+
zIndex: 1000,
|
|
90
103
|
overflow: 'hidden',
|
|
91
|
-
|
|
104
|
+
pr: 0,
|
|
105
|
+
position: 'relative',
|
|
106
|
+
'& [aria-label*="getMediaKitAbsoluteUrl"]': {
|
|
107
|
+
display: 'none',
|
|
108
|
+
},
|
|
109
|
+
}, children: _jsxs(Box, { sx: { display: 'flex', height: '65vh' }, children: [_jsx(Box, { sx: { flex: 1, pr: 1, mr: 1, overflow: 'auto' }, children: componentRenderer }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(Box, { sx: { width: 400, ml: 2, pr: 2, pb: 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
|
|
92
110
|
// @ts-ignore
|
|
93
111
|
, {
|
|
94
112
|
// @ts-ignore
|
|
95
113
|
config: component, allComponents: allComponents, defaultLocale: "en", locale: locale, propertiesValue: mergedPropertiesValues, onChange: ({ id: propertyId, value }) => {
|
|
96
|
-
setPendingProperties({
|
|
97
|
-
|
|
98
|
-
|
|
114
|
+
setPendingProperties((prevProperties) => {
|
|
115
|
+
if (!locale || !propertyId || !value?.value)
|
|
116
|
+
return prevProperties;
|
|
117
|
+
return {
|
|
118
|
+
...prevProperties,
|
|
119
|
+
[locale]: { ...(prevProperties[locale] || {}), [propertyId]: value?.value },
|
|
120
|
+
};
|
|
99
121
|
});
|
|
100
122
|
} }) }) }) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "inherit", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { color: "primary", variant: "contained", onClick: handleSave, children: "Save" })] })] })] }))] }));
|
|
101
123
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.12",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"@blocklet/code-editor": "^0.4.254",
|
|
28
28
|
"@blocklet/embed": "^0.2.3",
|
|
29
29
|
"@blocklet/js-sdk": "^1.16.41",
|
|
30
|
-
"@blocklet/pages-kit": "^0.4.
|
|
31
|
-
"@blocklet/pages-kit-runtime": "^0.4.
|
|
30
|
+
"@blocklet/pages-kit": "^0.4.97",
|
|
31
|
+
"@blocklet/pages-kit-runtime": "^0.4.97",
|
|
32
32
|
"@excalidraw/excalidraw": "^0.14.2",
|
|
33
33
|
"@iconify/iconify": "^3.1.1",
|
|
34
34
|
"@iconify/icons-tabler": "^1.2.95",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"ufo": "^1.5.4",
|
|
68
68
|
"url-join": "^4.0.1",
|
|
69
69
|
"zustand": "^4.5.5",
|
|
70
|
-
"@blocklet/pdf": "^2.2.
|
|
70
|
+
"@blocklet/pdf": "^2.2.12"
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@babel/core": "^7.25.2",
|