@blocklet/editor 2.1.112 → 2.1.114
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.
|
@@ -84,7 +84,7 @@ export function PagesKitComponentRenderer({ id, name, properties, onPropertiesCh
|
|
|
84
84
|
}, 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) => {
|
|
85
85
|
// @ts-ignore
|
|
86
86
|
const multiline = !!x.multiline;
|
|
87
|
-
return (_jsx(Box, { sx: { mt: 2 }, children: _jsx(PropertyField, { label: getPropertyLabel({ locale, locales: x.locales }), type: x.type, value: pendingProperties[locale]?.[x.id] ??
|
|
87
|
+
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] ??
|
|
88
88
|
getLocalizedValue({ key: 'defaultValue', locale, data: x.locales }), onChange: (v) => setPendingProperties({
|
|
89
89
|
...pendingProperties,
|
|
90
90
|
[locale]: { ...pendingProperties[locale], [x.id]: v },
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { FormControlLabel, IconButton, InputAdornment, Switch, TextField } from '@mui/material';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, FormControlLabel, FormLabel, IconButton, InputAdornment, Stack, Switch, TextField } from '@mui/material';
|
|
3
3
|
import UploadIcon from '@mui/icons-material/Upload';
|
|
4
|
+
import { useRef } from 'react';
|
|
5
|
+
import { lazyRetry as lazy } from '@arcblock/ux/lib/Util';
|
|
6
|
+
import ColorPicker from '../../main/ui/ColorPicker';
|
|
7
|
+
const CodeEditor = lazy(() => import('@blocklet/code-editor').then((module) => ({
|
|
8
|
+
default: module.CodeEditor,
|
|
9
|
+
})));
|
|
4
10
|
function getVideoSize(url) {
|
|
5
11
|
return new Promise((resolve, reject) => {
|
|
6
12
|
const video = document.createElement('video');
|
|
@@ -38,6 +44,22 @@ export function UploaderButton({ onChange }) {
|
|
|
38
44
|
return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
|
|
39
45
|
}
|
|
40
46
|
export function PropertyField({ type, multiline, label, value, onChange, ...rest }) {
|
|
47
|
+
const codeEditorUploadCallback = useRef(null);
|
|
48
|
+
const handleOpen = () => {
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
const uploader = uploaderRef?.current?.getUploader();
|
|
51
|
+
uploader?.open();
|
|
52
|
+
if (codeEditorUploadCallback.current) {
|
|
53
|
+
// rewrite default emitter
|
|
54
|
+
uploader.onceUploadSuccess(({ response }) => {
|
|
55
|
+
let fileName = response?.data?.filename || '';
|
|
56
|
+
if (fileName) {
|
|
57
|
+
fileName = `mediakit://${fileName}`;
|
|
58
|
+
}
|
|
59
|
+
codeEditorUploadCallback.current?.(fileName);
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
41
63
|
const handleChange = (v) => {
|
|
42
64
|
if (type === 'json') {
|
|
43
65
|
try {
|
|
@@ -72,8 +94,61 @@ export function PropertyField({ type, multiline, label, value, onChange, ...rest
|
|
|
72
94
|
} }) })),
|
|
73
95
|
}, ...rest }));
|
|
74
96
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
97
|
+
if (type === 'color') {
|
|
98
|
+
return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), InputProps: {
|
|
99
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", sx: {
|
|
100
|
+
'.popup-item-color': {
|
|
101
|
+
width: 24,
|
|
102
|
+
height: 24,
|
|
103
|
+
borderRadius: '4px',
|
|
104
|
+
cursor: 'pointer',
|
|
105
|
+
backgroundColor: value || '#fff',
|
|
106
|
+
border: '1px solid rgba(0, 0, 0, 0.23)',
|
|
107
|
+
'&:hover': {
|
|
108
|
+
opacity: 0.8,
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
}, children: _jsx(ColorPicker, { color: value, onChange: handleChange, buttonClassName: "popup-item spaced popup-item-color" }) })),
|
|
112
|
+
}, ...rest }));
|
|
113
|
+
}
|
|
114
|
+
if (type === 'yaml' || type === 'json') {
|
|
115
|
+
let newValue = value;
|
|
116
|
+
if (type === 'json' && typeof value !== 'string') {
|
|
117
|
+
newValue = JSON.stringify(value, null, 2);
|
|
118
|
+
}
|
|
119
|
+
return (_jsxs(Stack, { sx: {
|
|
120
|
+
width: '100%',
|
|
121
|
+
position: 'relative',
|
|
122
|
+
pt: 1,
|
|
123
|
+
pb: '6px',
|
|
124
|
+
px: '1px',
|
|
125
|
+
minHeight: 50,
|
|
126
|
+
'.monaco-editor,.overflow-guard': { borderRadius: 1 },
|
|
127
|
+
}, children: [_jsx(FormLabel, { sx: {
|
|
128
|
+
position: 'absolute',
|
|
129
|
+
left: 0,
|
|
130
|
+
top: 0,
|
|
131
|
+
transform: 'translate(0px, -7px) scale(0.75)',
|
|
132
|
+
}, children: label }), _jsx(CodeEditor, { keyId: label, locale: "en", language: type === 'yaml' ? 'yaml' : 'json', value: newValue, onChange: (v) => {
|
|
133
|
+
return handleChange(v);
|
|
134
|
+
}, typeScriptNoValidation: false, onUpload: (callback) => {
|
|
135
|
+
codeEditorUploadCallback.current = callback;
|
|
136
|
+
handleOpen();
|
|
137
|
+
} }), _jsx(Box, { component: "fieldset", sx: {
|
|
138
|
+
pointerEvents: 'none',
|
|
139
|
+
position: 'absolute',
|
|
140
|
+
left: 0,
|
|
141
|
+
top: -5,
|
|
142
|
+
width: '100%',
|
|
143
|
+
height: '100%',
|
|
144
|
+
border: 1,
|
|
145
|
+
borderColor: 'rgba(0, 0, 0, 0.23)',
|
|
146
|
+
borderRadius: 1,
|
|
147
|
+
px: 1,
|
|
148
|
+
py: 0,
|
|
149
|
+
zIndex: 1,
|
|
150
|
+
m: 0,
|
|
151
|
+
} })] }));
|
|
152
|
+
}
|
|
153
|
+
return (_jsx(TextField, { sx: { width: 1 }, size: "small", label: label, value: value, onChange: (e) => handleChange(e.target.value), multiline: true, rows: 5, ...rest }));
|
|
79
154
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const mode: string;
|
|
2
|
-
export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url"];
|
|
2
|
+
export declare const propertyTypes: readonly ["string", "number", "boolean", "json", "url", "yaml", "color"];
|
|
3
3
|
export type PropertyType = (typeof propertyTypes)[number];
|
|
4
4
|
export type Properties = {
|
|
5
5
|
[locale: string]: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const mode = process.env.NODE_ENV === 'development' ? 'draft' : 'production';
|
|
2
|
-
export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url'];
|
|
2
|
+
export const propertyTypes = ['string', 'number', 'boolean', 'json', 'url', 'yaml', 'color'];
|
|
3
3
|
export const isValidPropertyType = (type) => {
|
|
4
4
|
return !type || propertyTypes.includes(type);
|
|
5
5
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.114",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -24,9 +24,10 @@
|
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@blocklet/
|
|
27
|
+
"@blocklet/code-editor": "^0.4.201",
|
|
28
|
+
"@blocklet/embed": "^0.2.2",
|
|
28
29
|
"@blocklet/js-sdk": "1.16.33",
|
|
29
|
-
"@blocklet/pages-kit": "^0.3.
|
|
30
|
+
"@blocklet/pages-kit": "^0.3.22",
|
|
30
31
|
"@excalidraw/excalidraw": "^0.14.2",
|
|
31
32
|
"@iconify/iconify": "^3.1.1",
|
|
32
33
|
"@iconify/icons-tabler": "^1.2.95",
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
"ufo": "^1.5.4",
|
|
66
67
|
"url-join": "^4.0.1",
|
|
67
68
|
"zustand": "^4.5.5",
|
|
68
|
-
"@blocklet/pdf": "^2.1.
|
|
69
|
+
"@blocklet/pdf": "^2.1.114"
|
|
69
70
|
},
|
|
70
71
|
"devDependencies": {
|
|
71
72
|
"@babel/core": "^7.25.2",
|