@dotcms/uve 1.5.1-next.1919 → 1.5.1-next.1965
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.
- package/README.md +5 -1010
- package/index.cjs.js +1 -621
- package/index.esm.js +2 -624
- package/internal.cjs.js +301 -1
- package/internal.esm.js +300 -3
- package/package.json +1 -1
- package/src/index.d.ts +0 -2
- package/src/internal.d.ts +3 -0
- package/src/lib/style-editor/internal.d.ts +18 -1
- package/src/lib/style-editor/public.d.ts +3 -341
- package/src/lib/style-editor/types.d.ts +6 -620
package/internal.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _public = require('./public.cjs.js');
|
|
4
|
-
require('@dotcms/types');
|
|
4
|
+
var types = require('@dotcms/types');
|
|
5
5
|
require('@dotcms/types/internal');
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -74,6 +74,302 @@ const __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = {
|
|
|
74
74
|
*/
|
|
75
75
|
const __TINYMCE_PATH_ON_DOTCMS__ = '/ext/tinymcev7/tinymce.min.js';
|
|
76
76
|
|
|
77
|
+
/**
|
|
78
|
+
* Normalizes a field definition into the schema format expected by UVE.
|
|
79
|
+
*
|
|
80
|
+
* Converts developer-friendly field definitions into a normalized structure where
|
|
81
|
+
* all type-specific configuration properties are moved into a `config` object.
|
|
82
|
+
* This transformation ensures consistency in the schema format sent to UVE.
|
|
83
|
+
*
|
|
84
|
+
* **Field Type Handling:**
|
|
85
|
+
* - **Input fields**: Extracts `inputType` and `placeholder` into config
|
|
86
|
+
* - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects)
|
|
87
|
+
* - **Radio fields**: Normalizes options (preserves image properties like `imageURL`, `width`, `height`),
|
|
88
|
+
* extracts `columns` into config
|
|
89
|
+
* - **Checkbox group fields**: Normalizes options (converts to format expected by UVE)
|
|
90
|
+
*
|
|
91
|
+
* @experimental This method is experimental and may be subject to change.
|
|
92
|
+
*
|
|
93
|
+
* @param field - The field definition to normalize. Must be one of: input, dropdown, radio, or checkboxGroup
|
|
94
|
+
* @returns The normalized field schema with type, label, and config properties ready to be sent to UVE
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```typescript
|
|
98
|
+
* // Input field normalization
|
|
99
|
+
* normalizeField({
|
|
100
|
+
* type: 'input',
|
|
101
|
+
* id: 'font-size',
|
|
102
|
+
* label: 'Font Size',
|
|
103
|
+
* inputType: 'number',
|
|
104
|
+
* placeholder: 'Enter size'
|
|
105
|
+
* })
|
|
106
|
+
* // Returns: {
|
|
107
|
+
* // type: 'input',
|
|
108
|
+
* // id: 'font-size',
|
|
109
|
+
* // label: 'Font Size',
|
|
110
|
+
* // config: { inputType: 'number', placeholder: 'Enter size' }
|
|
111
|
+
* // }
|
|
112
|
+
*
|
|
113
|
+
* // Dropdown field with string options normalization
|
|
114
|
+
* normalizeField({
|
|
115
|
+
* type: 'dropdown',
|
|
116
|
+
* label: 'Font Family',
|
|
117
|
+
* options: ['Arial', 'Helvetica']
|
|
118
|
+
* })
|
|
119
|
+
* // Returns: {
|
|
120
|
+
* // type: 'dropdown',
|
|
121
|
+
* // label: 'Font Family',
|
|
122
|
+
* // config: { options: [{ label: 'Arial', value: 'Arial' }, { label: 'Helvetica', value: 'Helvetica' }] }
|
|
123
|
+
* // }
|
|
124
|
+
* ```
|
|
125
|
+
*/
|
|
126
|
+
function normalizeField(field) {
|
|
127
|
+
const base = {
|
|
128
|
+
type: field.type,
|
|
129
|
+
label: field.label,
|
|
130
|
+
id: field.id
|
|
131
|
+
};
|
|
132
|
+
const config = {};
|
|
133
|
+
// Handle type-specific properties
|
|
134
|
+
if (field.type === 'input') {
|
|
135
|
+
config.inputType = field.inputType;
|
|
136
|
+
config.placeholder = field.placeholder;
|
|
137
|
+
}
|
|
138
|
+
if (field.type === 'dropdown' || field.type === 'radio') {
|
|
139
|
+
// Normalize options to consistent format
|
|
140
|
+
config.options = field.options.map(opt => typeof opt === 'string' ? {
|
|
141
|
+
label: opt,
|
|
142
|
+
value: opt
|
|
143
|
+
} : opt);
|
|
144
|
+
// Handle radio-specific properties
|
|
145
|
+
if (field.type === 'radio') {
|
|
146
|
+
config.columns = field.columns;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
if (field.type === 'checkboxGroup') {
|
|
150
|
+
// Normalize checkbox options - convert to format expected by UVE
|
|
151
|
+
// Options have label and key - convert key to 'value' for UVE format
|
|
152
|
+
config.options = field.options.map(opt => ({
|
|
153
|
+
label: opt.label,
|
|
154
|
+
value: opt.key // UVE expects 'value' to be the key identifier
|
|
155
|
+
}));
|
|
156
|
+
}
|
|
157
|
+
return {
|
|
158
|
+
...base,
|
|
159
|
+
config
|
|
160
|
+
};
|
|
161
|
+
}
|
|
162
|
+
/**
|
|
163
|
+
* Normalizes a section definition into the schema format expected by UVE.
|
|
164
|
+
*
|
|
165
|
+
* Converts a section with a flat array of fields into the normalized schema format
|
|
166
|
+
* where fields are organized as a multi-dimensional array (array of column arrays).
|
|
167
|
+
* Currently, all sections are normalized to a single-column layout structure.
|
|
168
|
+
*
|
|
169
|
+
* **Normalization Process:**
|
|
170
|
+
* 1. Normalizes each field in the section using `normalizeField`
|
|
171
|
+
* 2. Wraps the normalized fields array in an outer array to create the column structure
|
|
172
|
+
* 3. Preserves the section title
|
|
173
|
+
*
|
|
174
|
+
* The output format always uses a multi-dimensional array structure (`fields: StyleEditorFieldSchema[][]`),
|
|
175
|
+
* even for single-column layouts, ensuring consistency in the UVE schema format.
|
|
176
|
+
*
|
|
177
|
+
* @experimental This method is experimental and may be subject to change.
|
|
178
|
+
*
|
|
179
|
+
* @param section - The section definition to normalize, containing a title and array of fields
|
|
180
|
+
* @param section.title - The section title displayed to users
|
|
181
|
+
* @param section.fields - Array of field definitions to normalize
|
|
182
|
+
* @returns The normalized section schema with fields organized as a single-column array structure
|
|
183
|
+
*
|
|
184
|
+
* @example
|
|
185
|
+
* ```typescript
|
|
186
|
+
* normalizeSection({
|
|
187
|
+
* title: 'Typography',
|
|
188
|
+
* fields: [
|
|
189
|
+
* { type: 'input', label: 'Font Size', inputType: 'number' },
|
|
190
|
+
* { type: 'dropdown', label: 'Font Family', options: ['Arial'] }
|
|
191
|
+
* ]
|
|
192
|
+
* })
|
|
193
|
+
* // Returns: {
|
|
194
|
+
* // title: 'Typography',
|
|
195
|
+
* // fields: [
|
|
196
|
+
* // [
|
|
197
|
+
* // { type: 'input', label: 'Font Size', config: { inputType: 'number' } },
|
|
198
|
+
* // { type: 'dropdown', label: 'Font Family', config: { options: [...] } }
|
|
199
|
+
* // ]
|
|
200
|
+
* // ]
|
|
201
|
+
* // }
|
|
202
|
+
* ```
|
|
203
|
+
*/
|
|
204
|
+
function normalizeSection(section) {
|
|
205
|
+
// Determine if fields is multi-column or single column
|
|
206
|
+
const normalizedFields = section.fields.map(normalizeField);
|
|
207
|
+
return {
|
|
208
|
+
title: section.title,
|
|
209
|
+
fields: normalizedFields
|
|
210
|
+
};
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* Normalizes a complete form definition into the schema format expected by UVE.
|
|
214
|
+
*
|
|
215
|
+
* This is the main entry point for converting a developer-friendly form definition
|
|
216
|
+
* into the normalized schema structure that UVE (Universal Visual Editor) can consume.
|
|
217
|
+
* The normalization process transforms the entire form hierarchy:
|
|
218
|
+
*
|
|
219
|
+
* **Normalization Process:**
|
|
220
|
+
* 1. Preserves the `contentType` identifier
|
|
221
|
+
* 2. Processes each section using `normalizeSection`, which:
|
|
222
|
+
* - Normalizes all fields in the section using `normalizeField`
|
|
223
|
+
* - Organizes fields into the required multi-dimensional array structure
|
|
224
|
+
* 3. Returns a fully normalized schema with consistent structure across all sections
|
|
225
|
+
*
|
|
226
|
+
* The resulting schema has all field-specific properties moved into `config` objects
|
|
227
|
+
* and all sections using the consistent single-column array structure, regardless
|
|
228
|
+
* of the input format.
|
|
229
|
+
*
|
|
230
|
+
* @experimental This method is experimental and may be subject to change.
|
|
231
|
+
*
|
|
232
|
+
* @param form - The complete form definition to normalize
|
|
233
|
+
* @param form.contentType - The content type identifier this form is associated with
|
|
234
|
+
* @param form.sections - Array of section definitions, each containing a title and fields
|
|
235
|
+
* @returns The normalized form schema ready to be sent to UVE, with all fields and sections normalized
|
|
236
|
+
*
|
|
237
|
+
* @example
|
|
238
|
+
* ```typescript
|
|
239
|
+
* const schema = normalizeForm({
|
|
240
|
+
* contentType: 'my-content-type',
|
|
241
|
+
* sections: [
|
|
242
|
+
* {
|
|
243
|
+
* title: 'Typography',
|
|
244
|
+
* fields: [
|
|
245
|
+
* { type: 'input', id: 'font-size', label: 'Font Size', inputType: 'number' },
|
|
246
|
+
* { type: 'dropdown', id: 'font-family', label: 'Font Family', options: ['Arial', 'Helvetica'] }
|
|
247
|
+
* ]
|
|
248
|
+
* },
|
|
249
|
+
* {
|
|
250
|
+
* title: 'Colors',
|
|
251
|
+
* fields: [
|
|
252
|
+
* { type: 'input', id: 'primary-color', label: 'Primary Color', inputType: 'text' }
|
|
253
|
+
* ]
|
|
254
|
+
* }
|
|
255
|
+
* ]
|
|
256
|
+
* });
|
|
257
|
+
* // Returns: {
|
|
258
|
+
* // contentType: 'my-content-type',
|
|
259
|
+
* // sections: [
|
|
260
|
+
* // {
|
|
261
|
+
* // title: 'Typography',
|
|
262
|
+
* // fields: [
|
|
263
|
+
* // [
|
|
264
|
+
* // { type: 'input', id: 'font-size', label: 'Font Size', config: { inputType: 'number' } },
|
|
265
|
+
* // { type: 'dropdown', id: 'font-family', label: 'Font Family', config: { options: [...] } }
|
|
266
|
+
* // ]
|
|
267
|
+
* // ]
|
|
268
|
+
* // },
|
|
269
|
+
* // {
|
|
270
|
+
* // title: 'Colors',
|
|
271
|
+
* // fields: [
|
|
272
|
+
* // [
|
|
273
|
+
* // { type: 'input', id: 'primary-color', label: 'Primary Color', config: { inputType: 'text' } }
|
|
274
|
+
* // ]
|
|
275
|
+
* // ]
|
|
276
|
+
* // }
|
|
277
|
+
* // ]
|
|
278
|
+
* // }
|
|
279
|
+
* ```
|
|
280
|
+
*/
|
|
281
|
+
function normalizeForm(form) {
|
|
282
|
+
return {
|
|
283
|
+
contentType: form.contentType,
|
|
284
|
+
sections: form.sections.map(normalizeSection)
|
|
285
|
+
};
|
|
286
|
+
}
|
|
287
|
+
/**
|
|
288
|
+
* Normalizes and validates a style editor form definition into the schema format
|
|
289
|
+
* expected by UVE. Used internally by the schema builder.
|
|
290
|
+
*
|
|
291
|
+
* @internal
|
|
292
|
+
*/
|
|
293
|
+
function defineStyleEditorSchema(form) {
|
|
294
|
+
return normalizeForm(form);
|
|
295
|
+
}
|
|
296
|
+
/**
|
|
297
|
+
* Registers style editor form schemas with the UVE editor.
|
|
298
|
+
*
|
|
299
|
+
* Sends normalized style editor schemas to UVE for registration.
|
|
300
|
+
* Only registers schemas when UVE is in EDIT mode.
|
|
301
|
+
*
|
|
302
|
+
* @internal — called automatically by useEditableDotCMSPage and DotCMSEditablePageService
|
|
303
|
+
*/
|
|
304
|
+
function registerStyleEditorSchemas(schemas) {
|
|
305
|
+
const {
|
|
306
|
+
mode
|
|
307
|
+
} = _public.getUVEState() || {};
|
|
308
|
+
if (!mode || mode !== types.UVE_MODE.EDIT) {
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const validatedSchemas = schemas.filter((schema, index) => {
|
|
312
|
+
if (!schema.contentType) {
|
|
313
|
+
console.warn(`[registerStyleEditorSchemas] Skipping schema with index [${index}] for not having a contentType`);
|
|
314
|
+
return false;
|
|
315
|
+
}
|
|
316
|
+
return true;
|
|
317
|
+
});
|
|
318
|
+
_public.sendMessageToUVE({
|
|
319
|
+
action: types.DotCMSUVEAction.REGISTER_STYLE_SCHEMAS,
|
|
320
|
+
payload: {
|
|
321
|
+
schemas: validatedSchemas
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/**
|
|
327
|
+
* Helper functions for creating style editor field definitions.
|
|
328
|
+
* Used by the dotCMS schema builder UI.
|
|
329
|
+
*
|
|
330
|
+
* @experimental This API is experimental and may be subject to change.
|
|
331
|
+
*/
|
|
332
|
+
const styleEditorField = {
|
|
333
|
+
/**
|
|
334
|
+
* Creates an input field definition.
|
|
335
|
+
*
|
|
336
|
+
* @experimental This method is experimental and may be subject to change.
|
|
337
|
+
*/
|
|
338
|
+
input: config => ({
|
|
339
|
+
type: 'input',
|
|
340
|
+
...config
|
|
341
|
+
}),
|
|
342
|
+
/**
|
|
343
|
+
* Creates a dropdown field definition.
|
|
344
|
+
*
|
|
345
|
+
* @experimental This method is experimental and may be subject to change.
|
|
346
|
+
*/
|
|
347
|
+
dropdown: config => ({
|
|
348
|
+
type: 'dropdown',
|
|
349
|
+
...config,
|
|
350
|
+
options: config.options
|
|
351
|
+
}),
|
|
352
|
+
/**
|
|
353
|
+
* Creates a radio button field definition.
|
|
354
|
+
*
|
|
355
|
+
* @experimental This method is experimental and may be subject to change.
|
|
356
|
+
*/
|
|
357
|
+
radio: config => ({
|
|
358
|
+
type: 'radio',
|
|
359
|
+
...config,
|
|
360
|
+
options: config.options
|
|
361
|
+
}),
|
|
362
|
+
/**
|
|
363
|
+
* Creates a checkbox group field definition.
|
|
364
|
+
*
|
|
365
|
+
* @experimental This method is experimental and may be subject to change.
|
|
366
|
+
*/
|
|
367
|
+
checkboxGroup: config => ({
|
|
368
|
+
type: 'checkboxGroup',
|
|
369
|
+
...config
|
|
370
|
+
})
|
|
371
|
+
};
|
|
372
|
+
|
|
77
373
|
exports.CUSTOM_NO_COMPONENT = _public.CUSTOM_NO_COMPONENT;
|
|
78
374
|
exports.DEVELOPMENT_MODE = _public.DEVELOPMENT_MODE;
|
|
79
375
|
exports.DOT_SECTION_ID_PREFIX = _public.DOT_SECTION_ID_PREFIX;
|
|
@@ -105,3 +401,7 @@ exports.setBounds = _public.setBounds;
|
|
|
105
401
|
exports.__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__;
|
|
106
402
|
exports.__DEFAULT_TINYMCE_CONFIG__ = __DEFAULT_TINYMCE_CONFIG__;
|
|
107
403
|
exports.__TINYMCE_PATH_ON_DOTCMS__ = __TINYMCE_PATH_ON_DOTCMS__;
|
|
404
|
+
exports.defineStyleEditorSchema = defineStyleEditorSchema;
|
|
405
|
+
exports.normalizeForm = normalizeForm;
|
|
406
|
+
exports.registerStyleEditorSchemas = registerStyleEditorSchemas;
|
|
407
|
+
exports.styleEditorField = styleEditorField;
|
package/internal.esm.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { g as getUVEState, s as sendMessageToUVE } from './public.esm.js';
|
|
2
|
+
export { C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, f as DOT_SECTION_ID_PREFIX, E as EMPTY_CONTAINER_STYLE_ANGULAR, h as EMPTY_CONTAINER_STYLE_REACT, j as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, _ as __UVE_EVENTS__, k as __UVE_EVENT_ERROR_FALLBACK__, l as combineClasses, m as computeScrollIsInBottom, a as createUVESubscription, n as findDotCMSElement, o as findDotCMSVTLData, p as getClosestDotCMSContainerData, q as getColumnPositionClasses, t as getContainersData, v as getContentletsInContainer, w as getDotCMSContainerData, x as getDotCMSContentletsBound, y as getDotCMSPageBounds, z as getDotContainerAttributes, A as getDotContentletAttributes, B as isValidBlocks, F as observeDocumentHeight, G as setBounds } from './public.esm.js';
|
|
3
|
+
import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
|
|
3
4
|
import '@dotcms/types/internal';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -72,4 +73,300 @@ const __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = {
|
|
|
72
73
|
*/
|
|
73
74
|
const __TINYMCE_PATH_ON_DOTCMS__ = '/ext/tinymcev7/tinymce.min.js';
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
/**
|
|
77
|
+
* Normalizes a field definition into the schema format expected by UVE.
|
|
78
|
+
*
|
|
79
|
+
* Converts developer-friendly field definitions into a normalized structure where
|
|
80
|
+
* all type-specific configuration properties are moved into a `config` object.
|
|
81
|
+
* This transformation ensures consistency in the schema format sent to UVE.
|
|
82
|
+
*
|
|
83
|
+
* **Field Type Handling:**
|
|
84
|
+
* - **Input fields**: Extracts `inputType` and `placeholder` into config
|
|
85
|
+
* - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects)
|
|
86
|
+
* - **Radio fields**: Normalizes options (preserves image properties like `imageURL`, `width`, `height`),
|
|
87
|
+
* extracts `columns` into config
|
|
88
|
+
* - **Checkbox group fields**: Normalizes options (converts to format expected by UVE)
|
|
89
|
+
*
|
|
90
|
+
* @experimental This method is experimental and may be subject to change.
|
|
91
|
+
*
|
|
92
|
+
* @param field - The field definition to normalize. Must be one of: input, dropdown, radio, or checkboxGroup
|
|
93
|
+
* @returns The normalized field schema with type, label, and config properties ready to be sent to UVE
|
|
94
|
+
*
|
|
95
|
+
* @example
|
|
96
|
+
* ```typescript
|
|
97
|
+
* // Input field normalization
|
|
98
|
+
* normalizeField({
|
|
99
|
+
* type: 'input',
|
|
100
|
+
* id: 'font-size',
|
|
101
|
+
* label: 'Font Size',
|
|
102
|
+
* inputType: 'number',
|
|
103
|
+
* placeholder: 'Enter size'
|
|
104
|
+
* })
|
|
105
|
+
* // Returns: {
|
|
106
|
+
* // type: 'input',
|
|
107
|
+
* // id: 'font-size',
|
|
108
|
+
* // label: 'Font Size',
|
|
109
|
+
* // config: { inputType: 'number', placeholder: 'Enter size' }
|
|
110
|
+
* // }
|
|
111
|
+
*
|
|
112
|
+
* // Dropdown field with string options normalization
|
|
113
|
+
* normalizeField({
|
|
114
|
+
* type: 'dropdown',
|
|
115
|
+
* label: 'Font Family',
|
|
116
|
+
* options: ['Arial', 'Helvetica']
|
|
117
|
+
* })
|
|
118
|
+
* // Returns: {
|
|
119
|
+
* // type: 'dropdown',
|
|
120
|
+
* // label: 'Font Family',
|
|
121
|
+
* // config: { options: [{ label: 'Arial', value: 'Arial' }, { label: 'Helvetica', value: 'Helvetica' }] }
|
|
122
|
+
* // }
|
|
123
|
+
* ```
|
|
124
|
+
*/
|
|
125
|
+
function normalizeField(field) {
|
|
126
|
+
const base = {
|
|
127
|
+
type: field.type,
|
|
128
|
+
label: field.label,
|
|
129
|
+
id: field.id
|
|
130
|
+
};
|
|
131
|
+
const config = {};
|
|
132
|
+
// Handle type-specific properties
|
|
133
|
+
if (field.type === 'input') {
|
|
134
|
+
config.inputType = field.inputType;
|
|
135
|
+
config.placeholder = field.placeholder;
|
|
136
|
+
}
|
|
137
|
+
if (field.type === 'dropdown' || field.type === 'radio') {
|
|
138
|
+
// Normalize options to consistent format
|
|
139
|
+
config.options = field.options.map(opt => typeof opt === 'string' ? {
|
|
140
|
+
label: opt,
|
|
141
|
+
value: opt
|
|
142
|
+
} : opt);
|
|
143
|
+
// Handle radio-specific properties
|
|
144
|
+
if (field.type === 'radio') {
|
|
145
|
+
config.columns = field.columns;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
if (field.type === 'checkboxGroup') {
|
|
149
|
+
// Normalize checkbox options - convert to format expected by UVE
|
|
150
|
+
// Options have label and key - convert key to 'value' for UVE format
|
|
151
|
+
config.options = field.options.map(opt => ({
|
|
152
|
+
label: opt.label,
|
|
153
|
+
value: opt.key // UVE expects 'value' to be the key identifier
|
|
154
|
+
}));
|
|
155
|
+
}
|
|
156
|
+
return {
|
|
157
|
+
...base,
|
|
158
|
+
config
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Normalizes a section definition into the schema format expected by UVE.
|
|
163
|
+
*
|
|
164
|
+
* Converts a section with a flat array of fields into the normalized schema format
|
|
165
|
+
* where fields are organized as a multi-dimensional array (array of column arrays).
|
|
166
|
+
* Currently, all sections are normalized to a single-column layout structure.
|
|
167
|
+
*
|
|
168
|
+
* **Normalization Process:**
|
|
169
|
+
* 1. Normalizes each field in the section using `normalizeField`
|
|
170
|
+
* 2. Wraps the normalized fields array in an outer array to create the column structure
|
|
171
|
+
* 3. Preserves the section title
|
|
172
|
+
*
|
|
173
|
+
* The output format always uses a multi-dimensional array structure (`fields: StyleEditorFieldSchema[][]`),
|
|
174
|
+
* even for single-column layouts, ensuring consistency in the UVE schema format.
|
|
175
|
+
*
|
|
176
|
+
* @experimental This method is experimental and may be subject to change.
|
|
177
|
+
*
|
|
178
|
+
* @param section - The section definition to normalize, containing a title and array of fields
|
|
179
|
+
* @param section.title - The section title displayed to users
|
|
180
|
+
* @param section.fields - Array of field definitions to normalize
|
|
181
|
+
* @returns The normalized section schema with fields organized as a single-column array structure
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```typescript
|
|
185
|
+
* normalizeSection({
|
|
186
|
+
* title: 'Typography',
|
|
187
|
+
* fields: [
|
|
188
|
+
* { type: 'input', label: 'Font Size', inputType: 'number' },
|
|
189
|
+
* { type: 'dropdown', label: 'Font Family', options: ['Arial'] }
|
|
190
|
+
* ]
|
|
191
|
+
* })
|
|
192
|
+
* // Returns: {
|
|
193
|
+
* // title: 'Typography',
|
|
194
|
+
* // fields: [
|
|
195
|
+
* // [
|
|
196
|
+
* // { type: 'input', label: 'Font Size', config: { inputType: 'number' } },
|
|
197
|
+
* // { type: 'dropdown', label: 'Font Family', config: { options: [...] } }
|
|
198
|
+
* // ]
|
|
199
|
+
* // ]
|
|
200
|
+
* // }
|
|
201
|
+
* ```
|
|
202
|
+
*/
|
|
203
|
+
function normalizeSection(section) {
|
|
204
|
+
// Determine if fields is multi-column or single column
|
|
205
|
+
const normalizedFields = section.fields.map(normalizeField);
|
|
206
|
+
return {
|
|
207
|
+
title: section.title,
|
|
208
|
+
fields: normalizedFields
|
|
209
|
+
};
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
* Normalizes a complete form definition into the schema format expected by UVE.
|
|
213
|
+
*
|
|
214
|
+
* This is the main entry point for converting a developer-friendly form definition
|
|
215
|
+
* into the normalized schema structure that UVE (Universal Visual Editor) can consume.
|
|
216
|
+
* The normalization process transforms the entire form hierarchy:
|
|
217
|
+
*
|
|
218
|
+
* **Normalization Process:**
|
|
219
|
+
* 1. Preserves the `contentType` identifier
|
|
220
|
+
* 2. Processes each section using `normalizeSection`, which:
|
|
221
|
+
* - Normalizes all fields in the section using `normalizeField`
|
|
222
|
+
* - Organizes fields into the required multi-dimensional array structure
|
|
223
|
+
* 3. Returns a fully normalized schema with consistent structure across all sections
|
|
224
|
+
*
|
|
225
|
+
* The resulting schema has all field-specific properties moved into `config` objects
|
|
226
|
+
* and all sections using the consistent single-column array structure, regardless
|
|
227
|
+
* of the input format.
|
|
228
|
+
*
|
|
229
|
+
* @experimental This method is experimental and may be subject to change.
|
|
230
|
+
*
|
|
231
|
+
* @param form - The complete form definition to normalize
|
|
232
|
+
* @param form.contentType - The content type identifier this form is associated with
|
|
233
|
+
* @param form.sections - Array of section definitions, each containing a title and fields
|
|
234
|
+
* @returns The normalized form schema ready to be sent to UVE, with all fields and sections normalized
|
|
235
|
+
*
|
|
236
|
+
* @example
|
|
237
|
+
* ```typescript
|
|
238
|
+
* const schema = normalizeForm({
|
|
239
|
+
* contentType: 'my-content-type',
|
|
240
|
+
* sections: [
|
|
241
|
+
* {
|
|
242
|
+
* title: 'Typography',
|
|
243
|
+
* fields: [
|
|
244
|
+
* { type: 'input', id: 'font-size', label: 'Font Size', inputType: 'number' },
|
|
245
|
+
* { type: 'dropdown', id: 'font-family', label: 'Font Family', options: ['Arial', 'Helvetica'] }
|
|
246
|
+
* ]
|
|
247
|
+
* },
|
|
248
|
+
* {
|
|
249
|
+
* title: 'Colors',
|
|
250
|
+
* fields: [
|
|
251
|
+
* { type: 'input', id: 'primary-color', label: 'Primary Color', inputType: 'text' }
|
|
252
|
+
* ]
|
|
253
|
+
* }
|
|
254
|
+
* ]
|
|
255
|
+
* });
|
|
256
|
+
* // Returns: {
|
|
257
|
+
* // contentType: 'my-content-type',
|
|
258
|
+
* // sections: [
|
|
259
|
+
* // {
|
|
260
|
+
* // title: 'Typography',
|
|
261
|
+
* // fields: [
|
|
262
|
+
* // [
|
|
263
|
+
* // { type: 'input', id: 'font-size', label: 'Font Size', config: { inputType: 'number' } },
|
|
264
|
+
* // { type: 'dropdown', id: 'font-family', label: 'Font Family', config: { options: [...] } }
|
|
265
|
+
* // ]
|
|
266
|
+
* // ]
|
|
267
|
+
* // },
|
|
268
|
+
* // {
|
|
269
|
+
* // title: 'Colors',
|
|
270
|
+
* // fields: [
|
|
271
|
+
* // [
|
|
272
|
+
* // { type: 'input', id: 'primary-color', label: 'Primary Color', config: { inputType: 'text' } }
|
|
273
|
+
* // ]
|
|
274
|
+
* // ]
|
|
275
|
+
* // }
|
|
276
|
+
* // ]
|
|
277
|
+
* // }
|
|
278
|
+
* ```
|
|
279
|
+
*/
|
|
280
|
+
function normalizeForm(form) {
|
|
281
|
+
return {
|
|
282
|
+
contentType: form.contentType,
|
|
283
|
+
sections: form.sections.map(normalizeSection)
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
/**
|
|
287
|
+
* Normalizes and validates a style editor form definition into the schema format
|
|
288
|
+
* expected by UVE. Used internally by the schema builder.
|
|
289
|
+
*
|
|
290
|
+
* @internal
|
|
291
|
+
*/
|
|
292
|
+
function defineStyleEditorSchema(form) {
|
|
293
|
+
return normalizeForm(form);
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* Registers style editor form schemas with the UVE editor.
|
|
297
|
+
*
|
|
298
|
+
* Sends normalized style editor schemas to UVE for registration.
|
|
299
|
+
* Only registers schemas when UVE is in EDIT mode.
|
|
300
|
+
*
|
|
301
|
+
* @internal — called automatically by useEditableDotCMSPage and DotCMSEditablePageService
|
|
302
|
+
*/
|
|
303
|
+
function registerStyleEditorSchemas(schemas) {
|
|
304
|
+
const {
|
|
305
|
+
mode
|
|
306
|
+
} = getUVEState() || {};
|
|
307
|
+
if (!mode || mode !== UVE_MODE.EDIT) {
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
const validatedSchemas = schemas.filter((schema, index) => {
|
|
311
|
+
if (!schema.contentType) {
|
|
312
|
+
console.warn(`[registerStyleEditorSchemas] Skipping schema with index [${index}] for not having a contentType`);
|
|
313
|
+
return false;
|
|
314
|
+
}
|
|
315
|
+
return true;
|
|
316
|
+
});
|
|
317
|
+
sendMessageToUVE({
|
|
318
|
+
action: DotCMSUVEAction.REGISTER_STYLE_SCHEMAS,
|
|
319
|
+
payload: {
|
|
320
|
+
schemas: validatedSchemas
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* Helper functions for creating style editor field definitions.
|
|
327
|
+
* Used by the dotCMS schema builder UI.
|
|
328
|
+
*
|
|
329
|
+
* @experimental This API is experimental and may be subject to change.
|
|
330
|
+
*/
|
|
331
|
+
const styleEditorField = {
|
|
332
|
+
/**
|
|
333
|
+
* Creates an input field definition.
|
|
334
|
+
*
|
|
335
|
+
* @experimental This method is experimental and may be subject to change.
|
|
336
|
+
*/
|
|
337
|
+
input: config => ({
|
|
338
|
+
type: 'input',
|
|
339
|
+
...config
|
|
340
|
+
}),
|
|
341
|
+
/**
|
|
342
|
+
* Creates a dropdown field definition.
|
|
343
|
+
*
|
|
344
|
+
* @experimental This method is experimental and may be subject to change.
|
|
345
|
+
*/
|
|
346
|
+
dropdown: config => ({
|
|
347
|
+
type: 'dropdown',
|
|
348
|
+
...config,
|
|
349
|
+
options: config.options
|
|
350
|
+
}),
|
|
351
|
+
/**
|
|
352
|
+
* Creates a radio button field definition.
|
|
353
|
+
*
|
|
354
|
+
* @experimental This method is experimental and may be subject to change.
|
|
355
|
+
*/
|
|
356
|
+
radio: config => ({
|
|
357
|
+
type: 'radio',
|
|
358
|
+
...config,
|
|
359
|
+
options: config.options
|
|
360
|
+
}),
|
|
361
|
+
/**
|
|
362
|
+
* Creates a checkbox group field definition.
|
|
363
|
+
*
|
|
364
|
+
* @experimental This method is experimental and may be subject to change.
|
|
365
|
+
*/
|
|
366
|
+
checkboxGroup: config => ({
|
|
367
|
+
type: 'checkboxGroup',
|
|
368
|
+
...config
|
|
369
|
+
})
|
|
370
|
+
};
|
|
371
|
+
|
|
372
|
+
export { __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __DEFAULT_TINYMCE_CONFIG__, __TINYMCE_PATH_ON_DOTCMS__, defineStyleEditorSchema, getUVEState, normalizeForm, registerStyleEditorSchemas, styleEditorField };
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
package/src/internal.d.ts
CHANGED
|
@@ -3,3 +3,6 @@ export * from './lib/core/core.utils';
|
|
|
3
3
|
export * from './lib/dom/document-height-observer';
|
|
4
4
|
export * from './lib/dom/dom.utils';
|
|
5
5
|
export * from './lib/editor/internal';
|
|
6
|
+
export { defineStyleEditorSchema, normalizeForm, registerStyleEditorSchemas } from './lib/style-editor/internal';
|
|
7
|
+
export * from './lib/style-editor/public';
|
|
8
|
+
export * from './lib/style-editor/types';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { StyleEditorFormSchema } from '@dotcms/types/internal';
|
|
2
|
+
import { StyleEditorForm } from './types';
|
|
2
3
|
/**
|
|
3
4
|
* Normalizes a complete form definition into the schema format expected by UVE.
|
|
4
5
|
*
|
|
@@ -69,3 +70,19 @@ import { StyleEditorForm, StyleEditorFormSchema } from './types';
|
|
|
69
70
|
* ```
|
|
70
71
|
*/
|
|
71
72
|
export declare function normalizeForm(form: StyleEditorForm): StyleEditorFormSchema;
|
|
73
|
+
/**
|
|
74
|
+
* Normalizes and validates a style editor form definition into the schema format
|
|
75
|
+
* expected by UVE. Used internally by the schema builder.
|
|
76
|
+
*
|
|
77
|
+
* @internal
|
|
78
|
+
*/
|
|
79
|
+
export declare function defineStyleEditorSchema(form: StyleEditorForm): StyleEditorFormSchema;
|
|
80
|
+
/**
|
|
81
|
+
* Registers style editor form schemas with the UVE editor.
|
|
82
|
+
*
|
|
83
|
+
* Sends normalized style editor schemas to UVE for registration.
|
|
84
|
+
* Only registers schemas when UVE is in EDIT mode.
|
|
85
|
+
*
|
|
86
|
+
* @internal — called automatically by useEditableDotCMSPage and DotCMSEditablePageService
|
|
87
|
+
*/
|
|
88
|
+
export declare function registerStyleEditorSchemas(schemas: StyleEditorFormSchema[]): void;
|