@silexlabs/silex 3.0.0-alpha.151 → 3.0.0-alpha.152
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/dist/client/client/grapesjs/project-bar.d.ts +3 -0
- package/dist/client/css/admin.css +74 -6
- package/dist/client/js/main.js +105 -104
- package/dist/plugins/server/plugins/server/GitlabConnector.d.ts +1 -0
- package/dist/plugins/server/plugins/server/GitlabConnector.js +7 -5
- package/dist/plugins/server/plugins/server/GitlabConnector.js.map +1 -1
- package/package.json +2 -1
- package/src/css/grapesjs-plugins.scss +34 -0
- package/src/css/grapesjs.scss +31 -0
- package/src/css/project-bar.scss +5 -7
- package/src/ts/client/grapesjs/css-props.ts +608 -257
- package/src/ts/client/grapesjs/index.ts +61 -11
- package/src/ts/client/grapesjs/internal-links.ts +11 -1
- package/src/ts/client/grapesjs/project-bar.ts +12 -3
- package/src/ts/client/grapesjs/settings.ts +44 -20
- package/src/ts/plugins/server/GitlabConnector.ts +8 -5
|
@@ -23,6 +23,142 @@ import { Editor } from 'grapesjs'
|
|
|
23
23
|
|
|
24
24
|
export default (editor: Editor, opts) => {
|
|
25
25
|
editor.on('load', () => {
|
|
26
|
+
/***************/
|
|
27
|
+
/* General */
|
|
28
|
+
/***************/
|
|
29
|
+
/** remove default module et add custom one */
|
|
30
|
+
editor.StyleManager.removeProperty('general', 'display')
|
|
31
|
+
editor.StyleManager.addProperty('general', {
|
|
32
|
+
name: 'Display',
|
|
33
|
+
property: 'display',
|
|
34
|
+
type: 'select',
|
|
35
|
+
defaults: '',
|
|
36
|
+
options: [
|
|
37
|
+
/* @ts-ignore */
|
|
38
|
+
{ value: '', name: '' },
|
|
39
|
+
/* @ts-ignore */
|
|
40
|
+
{ value: 'block', name: 'block' },
|
|
41
|
+
/* @ts-ignore */
|
|
42
|
+
{ value: 'inline', name: 'inline' },
|
|
43
|
+
/* @ts-ignore */
|
|
44
|
+
{ value: 'inline-block', name: 'inline-block' },
|
|
45
|
+
/* @ts-ignore */
|
|
46
|
+
{ value: 'flex', name: 'flex' },
|
|
47
|
+
/* @ts-ignore */
|
|
48
|
+
{ value: 'none', name: 'none' },
|
|
49
|
+
],
|
|
50
|
+
info: '',
|
|
51
|
+
})
|
|
52
|
+
editor.StyleManager.addProperty('general', {
|
|
53
|
+
name: 'Visibility',
|
|
54
|
+
property: 'visibility',
|
|
55
|
+
type: 'select',
|
|
56
|
+
defaults: '',
|
|
57
|
+
options: [
|
|
58
|
+
/* @ts-ignore */
|
|
59
|
+
{ value: '', name: '' },
|
|
60
|
+
/* @ts-ignore */
|
|
61
|
+
{ value: 'visible', name: 'visible' },
|
|
62
|
+
/* @ts-ignore */
|
|
63
|
+
{ value: 'hidden', name: 'hidden' },
|
|
64
|
+
/* @ts-ignore */
|
|
65
|
+
{ value: 'collapse', name: 'collapse' },
|
|
66
|
+
],
|
|
67
|
+
info: 'The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.',
|
|
68
|
+
})
|
|
69
|
+
/** remove float no more used (best practices) */
|
|
70
|
+
editor.StyleManager.removeProperty('general', 'float')
|
|
71
|
+
/** remove default property et add custom one */
|
|
72
|
+
editor.StyleManager.removeProperty('general', 'position')
|
|
73
|
+
editor.StyleManager.addProperty('general', {
|
|
74
|
+
name: 'Position',
|
|
75
|
+
property: 'position',
|
|
76
|
+
type: 'select',
|
|
77
|
+
defaults: '',
|
|
78
|
+
full: true,
|
|
79
|
+
options: [
|
|
80
|
+
/* @ts-ignore */
|
|
81
|
+
{ value: '', name: '' },
|
|
82
|
+
/* @ts-ignore */
|
|
83
|
+
{ value: 'static', name: 'static' },
|
|
84
|
+
/* @ts-ignore */
|
|
85
|
+
{ value: 'relative', name: 'relative' },
|
|
86
|
+
/* @ts-ignore */
|
|
87
|
+
{ value: 'absolute', name: 'absolute' },
|
|
88
|
+
/* @ts-ignore */
|
|
89
|
+
{ value: 'fixed', name: 'fixed' },
|
|
90
|
+
],
|
|
91
|
+
info: '',
|
|
92
|
+
})
|
|
93
|
+
editor.StyleManager.removeProperty('general', 'top')
|
|
94
|
+
editor.StyleManager.addProperty('general', {
|
|
95
|
+
name: 'Top',
|
|
96
|
+
property: 'top',
|
|
97
|
+
type: 'number',
|
|
98
|
+
defaults: '',
|
|
99
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
100
|
+
info: '',
|
|
101
|
+
})
|
|
102
|
+
editor.StyleManager.removeProperty('general', 'bottom')
|
|
103
|
+
editor.StyleManager.addProperty('general', {
|
|
104
|
+
name: 'Bottom',
|
|
105
|
+
property: 'bottom',
|
|
106
|
+
type: 'number',
|
|
107
|
+
defaults: '',
|
|
108
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
109
|
+
info: '',
|
|
110
|
+
})
|
|
111
|
+
editor.StyleManager.removeProperty('general', 'right')
|
|
112
|
+
editor.StyleManager.addProperty('general', {
|
|
113
|
+
name: 'Right',
|
|
114
|
+
property: 'right',
|
|
115
|
+
type: 'number',
|
|
116
|
+
defaults: '',
|
|
117
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
118
|
+
info: '',
|
|
119
|
+
})
|
|
120
|
+
editor.StyleManager.removeProperty('general', 'left')
|
|
121
|
+
editor.StyleManager.addProperty('general', {
|
|
122
|
+
name: 'Left',
|
|
123
|
+
property: 'left',
|
|
124
|
+
type: 'number',
|
|
125
|
+
defaults: '',
|
|
126
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
127
|
+
info: '',
|
|
128
|
+
})
|
|
129
|
+
// Add content property, visible only when a pseudo element is selected
|
|
130
|
+
const contentProp = editor.StyleManager.addProperty('general', {
|
|
131
|
+
name: 'Content',
|
|
132
|
+
property: 'content',
|
|
133
|
+
type: 'text',
|
|
134
|
+
defaults: '',
|
|
135
|
+
info: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.',
|
|
136
|
+
full: true,
|
|
137
|
+
visible: false,
|
|
138
|
+
}, { at: 0 })
|
|
139
|
+
/***************/
|
|
140
|
+
/* Dimension */
|
|
141
|
+
/***************/
|
|
142
|
+
/** remove default property et add custom one */
|
|
143
|
+
editor.StyleManager.removeProperty('dimension', 'width')
|
|
144
|
+
editor.StyleManager.addProperty('dimension', {
|
|
145
|
+
name: 'Width',
|
|
146
|
+
property: 'width',
|
|
147
|
+
type: 'integer',
|
|
148
|
+
units: ['px', '%', 'em'],
|
|
149
|
+
default: '',
|
|
150
|
+
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
|
|
151
|
+
}, { at: 0 })
|
|
152
|
+
/** remove default property et add custom one */
|
|
153
|
+
editor.StyleManager.removeProperty('dimension', 'height')
|
|
154
|
+
editor.StyleManager.addProperty('dimension', {
|
|
155
|
+
name: 'Height',
|
|
156
|
+
property: 'height',
|
|
157
|
+
type: 'integer',
|
|
158
|
+
units: ['px', '%', 'em'],
|
|
159
|
+
default: '',
|
|
160
|
+
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
|
|
161
|
+
}, { at: 1 })
|
|
26
162
|
editor.StyleManager.addProperty('dimension', {
|
|
27
163
|
name: 'Min width',
|
|
28
164
|
property: 'min-width',
|
|
@@ -31,6 +167,26 @@ export default (editor: Editor, opts) => {
|
|
|
31
167
|
default: '',
|
|
32
168
|
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
|
|
33
169
|
}, { at: 2 })
|
|
170
|
+
/** remove default property et add custom one */
|
|
171
|
+
editor.StyleManager.removeProperty('dimension', 'max-width')
|
|
172
|
+
editor.StyleManager.addProperty('dimension', {
|
|
173
|
+
name: 'Max width',
|
|
174
|
+
property: 'max-width',
|
|
175
|
+
type: 'integer',
|
|
176
|
+
units: ['px', '%', 'em'],
|
|
177
|
+
default: '',
|
|
178
|
+
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
|
|
179
|
+
}, { at: 3 })
|
|
180
|
+
/** remove default property et add custom one */
|
|
181
|
+
editor.StyleManager.removeProperty('dimension', 'min-height')
|
|
182
|
+
editor.StyleManager.addProperty('dimension', {
|
|
183
|
+
name: 'Min height',
|
|
184
|
+
property: 'min-height',
|
|
185
|
+
type: 'integer',
|
|
186
|
+
units: ['px', '%', 'em'],
|
|
187
|
+
default: '',
|
|
188
|
+
fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'],
|
|
189
|
+
}, { at: 4 })
|
|
34
190
|
editor.StyleManager.addProperty('dimension', {
|
|
35
191
|
name: 'Max height',
|
|
36
192
|
property: 'max-height',
|
|
@@ -45,8 +201,11 @@ export default (editor: Editor, opts) => {
|
|
|
45
201
|
type: 'composite',
|
|
46
202
|
properties: [{
|
|
47
203
|
name: 'Overflow X',
|
|
48
|
-
type: '
|
|
204
|
+
type: 'select',
|
|
205
|
+
defaults: '',
|
|
49
206
|
options: [
|
|
207
|
+
/* @ts-ignore */
|
|
208
|
+
{ value: '', name: '' },
|
|
50
209
|
/* @ts-ignore */
|
|
51
210
|
{ value: 'auto', name: 'auto' },
|
|
52
211
|
/* @ts-ignore */
|
|
@@ -58,8 +217,11 @@ export default (editor: Editor, opts) => {
|
|
|
58
217
|
],
|
|
59
218
|
}, {
|
|
60
219
|
name: 'Overflow Y',
|
|
61
|
-
type: '
|
|
220
|
+
type: 'select',
|
|
221
|
+
defaults: '',
|
|
62
222
|
options: [
|
|
223
|
+
/* @ts-ignore */
|
|
224
|
+
{ value: '', name: '' },
|
|
63
225
|
/* @ts-ignore */
|
|
64
226
|
{ value: 'auto', name: 'auto' },
|
|
65
227
|
/* @ts-ignore */
|
|
@@ -72,6 +234,450 @@ export default (editor: Editor, opts) => {
|
|
|
72
234
|
}],
|
|
73
235
|
info: 'The overflow CSS property sets what to do when an element\'s content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y.',
|
|
74
236
|
}, { at: 6 })
|
|
237
|
+
/** remove default property et add custom one */
|
|
238
|
+
editor.StyleManager.removeProperty('dimension', 'margin')
|
|
239
|
+
editor.StyleManager.addProperty('dimension', {
|
|
240
|
+
name: 'Margin',
|
|
241
|
+
property: 'margin',
|
|
242
|
+
type: 'composite',
|
|
243
|
+
defaults: '',
|
|
244
|
+
fixedValues: [ 'initial', 'inherit' ],
|
|
245
|
+
full: true,
|
|
246
|
+
properties: [{
|
|
247
|
+
property: 'margin-top',
|
|
248
|
+
name: 'Margin top',
|
|
249
|
+
type: 'number',
|
|
250
|
+
default: '',
|
|
251
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
252
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
253
|
+
}, {
|
|
254
|
+
property: 'margin-right',
|
|
255
|
+
name: 'Margin right',
|
|
256
|
+
type: 'number',
|
|
257
|
+
default: '',
|
|
258
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
259
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
260
|
+
}, {
|
|
261
|
+
property: 'margin-bottom',
|
|
262
|
+
name: 'Margin bottom',
|
|
263
|
+
type: 'number',
|
|
264
|
+
default: '',
|
|
265
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
266
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
267
|
+
}, {
|
|
268
|
+
property: 'margin-left',
|
|
269
|
+
name: 'Margin left',
|
|
270
|
+
type: 'number',
|
|
271
|
+
default: '',
|
|
272
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
273
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
274
|
+
}],
|
|
275
|
+
}, { at: 7 })
|
|
276
|
+
/** remove default property et add custom one */
|
|
277
|
+
editor.StyleManager.removeProperty('dimension', 'padding')
|
|
278
|
+
editor.StyleManager.addProperty('dimension', {
|
|
279
|
+
name: 'Padding',
|
|
280
|
+
property: 'padding',
|
|
281
|
+
type: 'composite',
|
|
282
|
+
fixedValues: [ 'initial', 'inherit' ],
|
|
283
|
+
full: true,
|
|
284
|
+
properties: [{
|
|
285
|
+
property: 'padding-top',
|
|
286
|
+
name: 'Padding top',
|
|
287
|
+
type: 'number',
|
|
288
|
+
default: '',
|
|
289
|
+
value: '10',
|
|
290
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
291
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
292
|
+
}, {
|
|
293
|
+
property: 'padding-right',
|
|
294
|
+
name: 'Padding right',
|
|
295
|
+
type: 'number',
|
|
296
|
+
default: '',
|
|
297
|
+
value: '10',
|
|
298
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
299
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
300
|
+
}, {
|
|
301
|
+
property: 'padding-bottom',
|
|
302
|
+
name: 'Padding bottom',
|
|
303
|
+
type: 'number',
|
|
304
|
+
default: '',
|
|
305
|
+
value: '10',
|
|
306
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
307
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
308
|
+
}, {
|
|
309
|
+
property: 'padding-left',
|
|
310
|
+
name: 'Padding left',
|
|
311
|
+
type: 'number',
|
|
312
|
+
default: '',
|
|
313
|
+
value: '10',
|
|
314
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
315
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
316
|
+
}],
|
|
317
|
+
}, { at: 8 })
|
|
318
|
+
/***************/
|
|
319
|
+
/* Typography */
|
|
320
|
+
/***************/
|
|
321
|
+
/* doesn't work ?
|
|
322
|
+
editor.StyleManager.getProperty('typography', 'font-family').set({ default: ' ' });*/
|
|
323
|
+
/** remove default property et add custom one (doesn't work ?)
|
|
324
|
+
editor.StyleManager.removeProperty('typography', 'font-family')
|
|
325
|
+
editor.StyleManager.addProperty('typography', {
|
|
326
|
+
property: 'font-family',
|
|
327
|
+
name: 'Font family',
|
|
328
|
+
type: 'select',
|
|
329
|
+
default: '',
|
|
330
|
+
fixedValues: ['inherit', 'initial'],
|
|
331
|
+
options: [
|
|
332
|
+
{ id: '', label: '' },
|
|
333
|
+
{ id: 'Arial, Helvetica, sans-serif', label: 'Arial' },
|
|
334
|
+
{ id: 'Arial Black, Gadget, sans-serif', label: 'Arial Black' },
|
|
335
|
+
{ id: 'Brush Script MT, sans-serif', label: 'Brush Script MT' },
|
|
336
|
+
{ id: 'Comic Sans MS, cursive, sans-serif', label: 'Comic Sans MS' },
|
|
337
|
+
{ id: 'Courier New, Courier, monospace', label: 'Courier New' },
|
|
338
|
+
{ id: 'Georgia, serif', label: 'Georgia' },
|
|
339
|
+
{ id: 'Helvetica, sans-serif', label: 'Helvetica' },
|
|
340
|
+
{ id: 'Impact, Charcoal, sans-serif', label: 'Impact' },
|
|
341
|
+
{ id: 'Lucida Sans Unicode, Lucida Grande, sans-serif', label: 'Lucida Sans Unicode' },
|
|
342
|
+
{ id: 'Tahoma, Geneva, sans-serif', label: 'Tahoma' },
|
|
343
|
+
{ id: 'Times New Roman, Times, serif', label: 'Times New Roman' },
|
|
344
|
+
{ id: 'Trebuchet MS, Helvetica, sans-serif', label: 'Trebuchet MS' },
|
|
345
|
+
{ id: 'Verdana, Geneva, sans-serif', label: 'Verdana' }
|
|
346
|
+
]
|
|
347
|
+
}, { at: 0 })*/
|
|
348
|
+
/** remove default property et add custom one */
|
|
349
|
+
editor.StyleManager.removeProperty('typography', 'font-size')
|
|
350
|
+
editor.StyleManager.addProperty('typography', {
|
|
351
|
+
name: 'Font size',
|
|
352
|
+
property: 'font-size',
|
|
353
|
+
type: 'number',
|
|
354
|
+
default: '',
|
|
355
|
+
fixedValues: [ 'medium', 'xx-small', 'x-small', 'small', 'large', 'x-large', 'xx-large', 'smaller', 'larger', 'length', 'initial', 'inherit' ],
|
|
356
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
357
|
+
}, { at: 1 })
|
|
358
|
+
/** remove default property et add custom one */
|
|
359
|
+
editor.StyleManager.removeProperty('typography', 'font-weight')
|
|
360
|
+
editor.StyleManager.addProperty('typography', {
|
|
361
|
+
name: 'Font weight',
|
|
362
|
+
property: 'font-weight',
|
|
363
|
+
type: 'select',
|
|
364
|
+
default: '',
|
|
365
|
+
fixedValues: ['inherit', 'initial'],
|
|
366
|
+
options: [
|
|
367
|
+
{ id: '', label: '' },
|
|
368
|
+
{ id: '100', label: 'Thin' },
|
|
369
|
+
{ id: '200', label: 'Extra-Light' },
|
|
370
|
+
{ id: '300', label: 'Light' },
|
|
371
|
+
{ id: '400', label: 'Normal' },
|
|
372
|
+
{ id: '500', label: 'Medium' },
|
|
373
|
+
{ id: '600', label: 'Semi-Bold' },
|
|
374
|
+
{ id: '700', label: 'Bold' },
|
|
375
|
+
{ id: '800', label: 'Extra-Bold' },
|
|
376
|
+
{ id: '900', label: 'Ultra-Bold' }
|
|
377
|
+
]
|
|
378
|
+
}, { at: 2 })
|
|
379
|
+
/** remove default property et add custom one */
|
|
380
|
+
editor.StyleManager.removeProperty('typography', 'letter-spacing')
|
|
381
|
+
editor.StyleManager.addProperty('typography', {
|
|
382
|
+
name: 'Letter spacing',
|
|
383
|
+
property: 'letter-spacing',
|
|
384
|
+
type: 'number',
|
|
385
|
+
default: '',
|
|
386
|
+
fixedValues: [ 'normal', 'initial', 'inherit' ],
|
|
387
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
388
|
+
}, { at: 3 })
|
|
389
|
+
/** remove default property et add custom one */
|
|
390
|
+
editor.StyleManager.removeProperty('typography', 'color')
|
|
391
|
+
editor.StyleManager.addProperty('typography', {
|
|
392
|
+
name: 'Color',
|
|
393
|
+
property: 'color',
|
|
394
|
+
type: 'color',
|
|
395
|
+
default: '',
|
|
396
|
+
full: true,
|
|
397
|
+
}, { at: 4 })
|
|
398
|
+
/** remove default property et add custom one */
|
|
399
|
+
editor.StyleManager.removeProperty('typography', 'line-height')
|
|
400
|
+
editor.StyleManager.addProperty('typography', {
|
|
401
|
+
name: 'Line height',
|
|
402
|
+
property: 'line-height',
|
|
403
|
+
type: 'number',
|
|
404
|
+
default: '',
|
|
405
|
+
fixedValues: [ 'normal', 'initial', 'inherit' ],
|
|
406
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
407
|
+
}, { at: 5 })
|
|
408
|
+
/** remove default property et add custom one */
|
|
409
|
+
editor.StyleManager.removeProperty('typography', 'text-align')
|
|
410
|
+
editor.StyleManager.addProperty('typography', {
|
|
411
|
+
name: 'Text align',
|
|
412
|
+
property: 'text-align',
|
|
413
|
+
type: 'select',
|
|
414
|
+
defaults: '',
|
|
415
|
+
options: [
|
|
416
|
+
{ id: '', label: '' },
|
|
417
|
+
{ id: 'left', label: 'left' },
|
|
418
|
+
{ id: 'center', label: 'center' },
|
|
419
|
+
{ id: 'right', label: 'right' },
|
|
420
|
+
{ id: 'justified', label: 'justified' },
|
|
421
|
+
],
|
|
422
|
+
}, { at: 6 })
|
|
423
|
+
editor.StyleManager.addProperty('typography', {
|
|
424
|
+
name: 'Word break',
|
|
425
|
+
property: 'word-break',
|
|
426
|
+
type: 'select',
|
|
427
|
+
defaults: '',
|
|
428
|
+
options: [
|
|
429
|
+
/* @ts-ignore */
|
|
430
|
+
{ value: '', name: '' },
|
|
431
|
+
/* @ts-ignore */
|
|
432
|
+
{ value: 'normal', name: 'normal' },
|
|
433
|
+
/* @ts-ignore */
|
|
434
|
+
{ value: 'break-all', name: 'break-all' },
|
|
435
|
+
/* @ts-ignore */
|
|
436
|
+
{ value: 'keep-all', name: 'keep-all' },
|
|
437
|
+
/* @ts-ignore */
|
|
438
|
+
{ value: 'break-word', name: 'break-word' },
|
|
439
|
+
],
|
|
440
|
+
info: 'The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.',
|
|
441
|
+
}, { at: 7 })
|
|
442
|
+
editor.StyleManager.addProperty('typography', {
|
|
443
|
+
name: 'Word wrap',
|
|
444
|
+
property: 'word-wrap',
|
|
445
|
+
type: 'select',
|
|
446
|
+
defaults: '',
|
|
447
|
+
options: [
|
|
448
|
+
/* @ts-ignore */
|
|
449
|
+
{ value: '', name: '' },
|
|
450
|
+
/* @ts-ignore */
|
|
451
|
+
{ value: 'normal', name: 'normal' },
|
|
452
|
+
/* @ts-ignore */
|
|
453
|
+
{ value: 'break-word', name: 'break-word' },
|
|
454
|
+
],
|
|
455
|
+
info: 'The word-wrap CSS property sets whether the line may be broken within a word in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.',
|
|
456
|
+
}, { at: 8 })
|
|
457
|
+
editor.StyleManager.addProperty('typography', {
|
|
458
|
+
name: 'White space',
|
|
459
|
+
property: 'white-space',
|
|
460
|
+
type: 'select',
|
|
461
|
+
defaults: '',
|
|
462
|
+
options: [
|
|
463
|
+
/* @ts-ignore */
|
|
464
|
+
{ value: '', name: '' },
|
|
465
|
+
/* @ts-ignore */
|
|
466
|
+
{ value: 'normal', name: 'normal' },
|
|
467
|
+
/* @ts-ignore */
|
|
468
|
+
{ value: 'nowrap', name: 'nowrap' },
|
|
469
|
+
/* @ts-ignore */
|
|
470
|
+
{ value: 'pre', name: 'pre' },
|
|
471
|
+
/* @ts-ignore */
|
|
472
|
+
{ value: 'pre-wrap', name: 'pre-wrap' },
|
|
473
|
+
/* @ts-ignore */
|
|
474
|
+
{ value: 'pre-line', name: 'pre-line' },
|
|
475
|
+
/* @ts-ignore */
|
|
476
|
+
{ value: 'break-spaces', name: 'break-spaces' },
|
|
477
|
+
],
|
|
478
|
+
info: 'The white-space CSS property sets how white space inside an element is handled.',
|
|
479
|
+
}, { at: 9 })
|
|
480
|
+
editor.StyleManager.addProperty('typography', {
|
|
481
|
+
name: 'Text decoration',
|
|
482
|
+
property: 'text-decoration',
|
|
483
|
+
type: 'composite',
|
|
484
|
+
properties: [{
|
|
485
|
+
name: 'Text decoration line',
|
|
486
|
+
property: 'text-decoration-line',
|
|
487
|
+
type: 'select',
|
|
488
|
+
defaults: '',
|
|
489
|
+
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
|
|
490
|
+
options: [
|
|
491
|
+
/* @ts-ignore */
|
|
492
|
+
{ value: '', name: '' },
|
|
493
|
+
/* @ts-ignore */
|
|
494
|
+
{ value: 'none', name: 'none' },
|
|
495
|
+
/* @ts-ignore */
|
|
496
|
+
{ value: 'underline', name: 'underline' },
|
|
497
|
+
/* @ts-ignore */
|
|
498
|
+
{ value: 'overline', name: 'overline' },
|
|
499
|
+
/* @ts-ignore */
|
|
500
|
+
{ value: 'line-through', name: 'line-through' },
|
|
501
|
+
/* @ts-ignore */
|
|
502
|
+
{ value: 'blink', name: 'blink' },
|
|
503
|
+
],
|
|
504
|
+
info: 'The text-decoration CSS property sets the appearance of decorative lines on text.',
|
|
505
|
+
}, {
|
|
506
|
+
name: 'Text decoration style',
|
|
507
|
+
property: 'text-decoration-style',
|
|
508
|
+
type: 'select',
|
|
509
|
+
defaults: '',
|
|
510
|
+
options: [
|
|
511
|
+
/* @ts-ignore */
|
|
512
|
+
{ value: '', name: '' },
|
|
513
|
+
/* @ts-ignore */
|
|
514
|
+
{ value: 'solid', name: 'solid' },
|
|
515
|
+
/* @ts-ignore */
|
|
516
|
+
{ value: 'double', name: 'double' },
|
|
517
|
+
/* @ts-ignore */
|
|
518
|
+
{ value: 'dotted', name: 'dotted' },
|
|
519
|
+
/* @ts-ignore */
|
|
520
|
+
{ value: 'dashed', name: 'dashed' },
|
|
521
|
+
/* @ts-ignore */
|
|
522
|
+
{ value: 'wavy', name: 'wavy' },
|
|
523
|
+
],
|
|
524
|
+
info: 'The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different styles for each of the lines.',
|
|
525
|
+
}, {
|
|
526
|
+
name: 'Text decoration color',
|
|
527
|
+
property: 'text-decoration-color',
|
|
528
|
+
type: 'color',
|
|
529
|
+
defaults: '',
|
|
530
|
+
fixedValues: ['inherit', 'initial', 'revert', 'unset'],
|
|
531
|
+
info: 'The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.',
|
|
532
|
+
}, {
|
|
533
|
+
name: 'Text decoration thickness',
|
|
534
|
+
property: 'text-decoration-thickness',
|
|
535
|
+
type: 'integer',
|
|
536
|
+
units: ['px', '%', 'em'],
|
|
537
|
+
info: 'The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.',
|
|
538
|
+
default: '',
|
|
539
|
+
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
|
|
540
|
+
}],
|
|
541
|
+
}, { at: 10 })
|
|
542
|
+
editor.StyleManager.addProperty('typography', {
|
|
543
|
+
name: 'Text transform',
|
|
544
|
+
property: 'text-transform',
|
|
545
|
+
type: 'select',
|
|
546
|
+
defaults: '',
|
|
547
|
+
options: [
|
|
548
|
+
/* @ts-ignore */
|
|
549
|
+
{ value: '', name: '' },
|
|
550
|
+
/* @ts-ignore */
|
|
551
|
+
{ value: 'none', name: 'none' },
|
|
552
|
+
/* @ts-ignore */
|
|
553
|
+
{ value: 'capitalize', name: 'capitalize' },
|
|
554
|
+
/* @ts-ignore */
|
|
555
|
+
{ value: 'uppercase', name: 'uppercase' },
|
|
556
|
+
/* @ts-ignore */
|
|
557
|
+
{ value: 'lowercase', name: 'lowercase' },
|
|
558
|
+
],
|
|
559
|
+
info: 'The text-transform CSS property sets how to capitalize an element\'s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.',
|
|
560
|
+
}, { at: 11 })
|
|
561
|
+
editor.StyleManager.addProperty('typography', {
|
|
562
|
+
name: 'Text overflow',
|
|
563
|
+
property: 'text-overflow',
|
|
564
|
+
type: 'select',
|
|
565
|
+
defaults: '',
|
|
566
|
+
options: [
|
|
567
|
+
/* @ts-ignore */
|
|
568
|
+
{ value: '', name: '' },
|
|
569
|
+
/* @ts-ignore */
|
|
570
|
+
{ value: 'clip', name: 'clip' },
|
|
571
|
+
/* @ts-ignore */
|
|
572
|
+
{ value: 'ellipsis', name: 'ellipsis' },
|
|
573
|
+
],
|
|
574
|
+
info: 'The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (\'…\', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-clip and text-overflow-string.',
|
|
575
|
+
}, { at: 12 })
|
|
576
|
+
/***************/
|
|
577
|
+
/* Decorations */
|
|
578
|
+
/***************/
|
|
579
|
+
/** remove default property et add custom one */
|
|
580
|
+
editor.StyleManager.removeProperty('decorations', 'background-color')
|
|
581
|
+
editor.StyleManager.addProperty('decorations', {
|
|
582
|
+
name: 'Background color',
|
|
583
|
+
property: 'background-color',
|
|
584
|
+
type: 'color',
|
|
585
|
+
default: '',
|
|
586
|
+
full: true,
|
|
587
|
+
}, { at: 0 })
|
|
588
|
+
/** remove default property et add custom one */
|
|
589
|
+
editor.StyleManager.removeProperty('decorations', 'border-radius')
|
|
590
|
+
editor.StyleManager.addProperty('decorations', {
|
|
591
|
+
name: 'Border radius',
|
|
592
|
+
property: 'border-radius',
|
|
593
|
+
type: 'composite',
|
|
594
|
+
defaults: '',
|
|
595
|
+
fixedValues: [ 'initial', 'inherit' ],
|
|
596
|
+
full: true,
|
|
597
|
+
properties: [{
|
|
598
|
+
property: 'border-top-left-radius',
|
|
599
|
+
name: 'Top left',
|
|
600
|
+
type: 'number',
|
|
601
|
+
default: '',
|
|
602
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
603
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
604
|
+
}, {
|
|
605
|
+
property: 'border-top-right-radius',
|
|
606
|
+
name: 'Top right',
|
|
607
|
+
type: 'number',
|
|
608
|
+
default: '',
|
|
609
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
610
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
611
|
+
}, {
|
|
612
|
+
property: 'border-bottom-right-radius',
|
|
613
|
+
name: 'Bottom right',
|
|
614
|
+
type: 'number',
|
|
615
|
+
default: '',
|
|
616
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
617
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
618
|
+
}, {
|
|
619
|
+
property: 'border-bottom-left-radius',
|
|
620
|
+
name: 'Botton left',
|
|
621
|
+
type: 'number',
|
|
622
|
+
default: '',
|
|
623
|
+
fixedValues: [ 'initial', 'inherit', 'auto' ],
|
|
624
|
+
units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ],
|
|
625
|
+
}],
|
|
626
|
+
}, { at: 2 })
|
|
627
|
+
|
|
628
|
+
editor.StyleManager.addProperty('decorations', {
|
|
629
|
+
name: 'Outline',
|
|
630
|
+
property: 'outline',
|
|
631
|
+
type: 'composite',
|
|
632
|
+
properties: [{
|
|
633
|
+
name: 'Outline width',
|
|
634
|
+
property: 'outline-width',
|
|
635
|
+
type: 'integer',
|
|
636
|
+
units: ['px', '%', 'em'],
|
|
637
|
+
info: 'The outline-width CSS property sets the thickness of an element\'s outline. An outline is a line that is drawn around an element, outside the border.',
|
|
638
|
+
default: '',
|
|
639
|
+
fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'],
|
|
640
|
+
}, {
|
|
641
|
+
name: 'Outline style',
|
|
642
|
+
property: 'outline-style',
|
|
643
|
+
type: 'select',
|
|
644
|
+
defaults: '',
|
|
645
|
+
options: [
|
|
646
|
+
/* @ts-ignore */
|
|
647
|
+
{ value: '', name: '' },
|
|
648
|
+
/* @ts-ignore */
|
|
649
|
+
{ value: 'none', name: 'none' },
|
|
650
|
+
/* @ts-ignore */
|
|
651
|
+
{ value: 'hidden', name: 'hidden' },
|
|
652
|
+
/* @ts-ignore */
|
|
653
|
+
{ value: 'dotted', name: 'dotted' },
|
|
654
|
+
/* @ts-ignore */
|
|
655
|
+
{ value: 'dashed', name: 'dashed' },
|
|
656
|
+
/* @ts-ignore */
|
|
657
|
+
{ value: 'solid', name: 'solid' },
|
|
658
|
+
/* @ts-ignore */
|
|
659
|
+
{ value: 'double', name: 'double' },
|
|
660
|
+
/* @ts-ignore */
|
|
661
|
+
{ value: 'groove', name: 'groove' },
|
|
662
|
+
/* @ts-ignore */
|
|
663
|
+
{ value: 'ridge', name: 'ridge' },
|
|
664
|
+
/* @ts-ignore */
|
|
665
|
+
{ value: 'inset', name: 'inset' },
|
|
666
|
+
/* @ts-ignore */
|
|
667
|
+
{ value: 'outset', name: 'outset' },
|
|
668
|
+
],
|
|
669
|
+
info: 'The outline-style CSS property sets the style of an element\'s outline. An outline is a line that is drawn around an element, outside the border.',
|
|
670
|
+
}, {
|
|
671
|
+
name: 'Outline color',
|
|
672
|
+
property: 'outline-color',
|
|
673
|
+
type: 'color',
|
|
674
|
+
defaults: '',
|
|
675
|
+
info: 'The outline-color CSS property sets the color of an element\'s outline.',
|
|
676
|
+
}],
|
|
677
|
+
}, { at: 8 })
|
|
678
|
+
/***************/
|
|
679
|
+
/* Extra */
|
|
680
|
+
/***************/
|
|
75
681
|
editor.StyleManager.addProperty('extra', {
|
|
76
682
|
name: 'Z index',
|
|
77
683
|
property: 'z-index',
|
|
@@ -293,260 +899,6 @@ export default (editor: Editor, opts) => {
|
|
|
293
899
|
],
|
|
294
900
|
info: 'The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.',
|
|
295
901
|
}, { at: 7 })
|
|
296
|
-
|
|
297
|
-
editor.StyleManager.addProperty('decorations', {
|
|
298
|
-
name: 'Outline',
|
|
299
|
-
property: 'outline',
|
|
300
|
-
type: 'composite',
|
|
301
|
-
properties: [{
|
|
302
|
-
name: 'Outline width',
|
|
303
|
-
property: 'outline-width',
|
|
304
|
-
type: 'integer',
|
|
305
|
-
units: ['px', '%', 'em'],
|
|
306
|
-
info: 'The outline-width CSS property sets the thickness of an element\'s outline. An outline is a line that is drawn around an element, outside the border.',
|
|
307
|
-
default: '',
|
|
308
|
-
fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'],
|
|
309
|
-
}, {
|
|
310
|
-
name: 'Outline style',
|
|
311
|
-
property: 'outline-style',
|
|
312
|
-
type: 'select',
|
|
313
|
-
defaults: '',
|
|
314
|
-
options: [
|
|
315
|
-
/* @ts-ignore */
|
|
316
|
-
{ value: '', name: '' },
|
|
317
|
-
/* @ts-ignore */
|
|
318
|
-
{ value: 'none', name: 'none' },
|
|
319
|
-
/* @ts-ignore */
|
|
320
|
-
{ value: 'hidden', name: 'hidden' },
|
|
321
|
-
/* @ts-ignore */
|
|
322
|
-
{ value: 'dotted', name: 'dotted' },
|
|
323
|
-
/* @ts-ignore */
|
|
324
|
-
{ value: 'dashed', name: 'dashed' },
|
|
325
|
-
/* @ts-ignore */
|
|
326
|
-
{ value: 'solid', name: 'solid' },
|
|
327
|
-
/* @ts-ignore */
|
|
328
|
-
{ value: 'double', name: 'double' },
|
|
329
|
-
/* @ts-ignore */
|
|
330
|
-
{ value: 'groove', name: 'groove' },
|
|
331
|
-
/* @ts-ignore */
|
|
332
|
-
{ value: 'ridge', name: 'ridge' },
|
|
333
|
-
/* @ts-ignore */
|
|
334
|
-
{ value: 'inset', name: 'inset' },
|
|
335
|
-
/* @ts-ignore */
|
|
336
|
-
{ value: 'outset', name: 'outset' },
|
|
337
|
-
],
|
|
338
|
-
info: 'The outline-style CSS property sets the style of an element\'s outline. An outline is a line that is drawn around an element, outside the border.',
|
|
339
|
-
}, {
|
|
340
|
-
name: 'Outline color',
|
|
341
|
-
property: 'outline-color',
|
|
342
|
-
type: 'color',
|
|
343
|
-
defaults: '',
|
|
344
|
-
info: 'The outline-color CSS property sets the color of an element\'s outline.',
|
|
345
|
-
}],
|
|
346
|
-
}, { at: 8 })
|
|
347
|
-
editor.StyleManager.addProperty('typography', {
|
|
348
|
-
name: 'Word break',
|
|
349
|
-
property: 'word-break',
|
|
350
|
-
type: 'select',
|
|
351
|
-
defaults: '',
|
|
352
|
-
options: [
|
|
353
|
-
/* @ts-ignore */
|
|
354
|
-
{ value: '', name: '' },
|
|
355
|
-
/* @ts-ignore */
|
|
356
|
-
{ value: 'normal', name: 'normal' },
|
|
357
|
-
/* @ts-ignore */
|
|
358
|
-
{ value: 'break-all', name: 'break-all' },
|
|
359
|
-
/* @ts-ignore */
|
|
360
|
-
{ value: 'keep-all', name: 'keep-all' },
|
|
361
|
-
/* @ts-ignore */
|
|
362
|
-
{ value: 'break-word', name: 'break-word' },
|
|
363
|
-
],
|
|
364
|
-
info: 'The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.',
|
|
365
|
-
}, { at: 7 })
|
|
366
|
-
editor.StyleManager.addProperty('typography', {
|
|
367
|
-
name: 'Word wrap',
|
|
368
|
-
property: 'word-wrap',
|
|
369
|
-
type: 'radio',
|
|
370
|
-
defaults: '',
|
|
371
|
-
options: [
|
|
372
|
-
/* @ts-ignore */
|
|
373
|
-
{ value: 'normal', name: 'normal' },
|
|
374
|
-
/* @ts-ignore */
|
|
375
|
-
{ value: 'break-word', name: 'break-word' },
|
|
376
|
-
],
|
|
377
|
-
info: 'The word-wrap CSS property sets whether the line may be broken within a word in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.',
|
|
378
|
-
}, { at: 8 })
|
|
379
|
-
editor.StyleManager.addProperty('typography', {
|
|
380
|
-
name: 'White space',
|
|
381
|
-
property: 'white-space',
|
|
382
|
-
type: 'select',
|
|
383
|
-
defaults: '',
|
|
384
|
-
options: [
|
|
385
|
-
/* @ts-ignore */
|
|
386
|
-
{ value: '', name: '' },
|
|
387
|
-
/* @ts-ignore */
|
|
388
|
-
{ value: 'normal', name: 'normal' },
|
|
389
|
-
/* @ts-ignore */
|
|
390
|
-
{ value: 'nowrap', name: 'nowrap' },
|
|
391
|
-
/* @ts-ignore */
|
|
392
|
-
{ value: 'pre', name: 'pre' },
|
|
393
|
-
/* @ts-ignore */
|
|
394
|
-
{ value: 'pre-wrap', name: 'pre-wrap' },
|
|
395
|
-
/* @ts-ignore */
|
|
396
|
-
{ value: 'pre-line', name: 'pre-line' },
|
|
397
|
-
/* @ts-ignore */
|
|
398
|
-
{ value: 'break-spaces', name: 'break-spaces' },
|
|
399
|
-
],
|
|
400
|
-
info: 'The white-space CSS property sets how white space inside an element is handled.',
|
|
401
|
-
}, { at: 9 })
|
|
402
|
-
editor.StyleManager.addProperty('typography', {
|
|
403
|
-
name: 'Text decoration',
|
|
404
|
-
property: 'text-decoration',
|
|
405
|
-
type: 'composite',
|
|
406
|
-
properties: [{
|
|
407
|
-
name: 'Text decoration line',
|
|
408
|
-
property: 'text-decoration-line',
|
|
409
|
-
type: 'select',
|
|
410
|
-
defaults: '',
|
|
411
|
-
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
|
|
412
|
-
options: [
|
|
413
|
-
/* @ts-ignore */
|
|
414
|
-
{ value: '', name: '' },
|
|
415
|
-
/* @ts-ignore */
|
|
416
|
-
{ value: 'none', name: 'none' },
|
|
417
|
-
/* @ts-ignore */
|
|
418
|
-
{ value: 'underline', name: 'underline' },
|
|
419
|
-
/* @ts-ignore */
|
|
420
|
-
{ value: 'overline', name: 'overline' },
|
|
421
|
-
/* @ts-ignore */
|
|
422
|
-
{ value: 'line-through', name: 'line-through' },
|
|
423
|
-
/* @ts-ignore */
|
|
424
|
-
{ value: 'blink', name: 'blink' },
|
|
425
|
-
],
|
|
426
|
-
info: 'The text-decoration CSS property sets the appearance of decorative lines on text.',
|
|
427
|
-
}, {
|
|
428
|
-
name: 'Text decoration style',
|
|
429
|
-
property: 'text-decoration-style',
|
|
430
|
-
type: 'select',
|
|
431
|
-
defaults: '',
|
|
432
|
-
options: [
|
|
433
|
-
/* @ts-ignore */
|
|
434
|
-
{ value: '', name: '' },
|
|
435
|
-
/* @ts-ignore */
|
|
436
|
-
{ value: 'solid', name: 'solid' },
|
|
437
|
-
/* @ts-ignore */
|
|
438
|
-
{ value: 'double', name: 'double' },
|
|
439
|
-
/* @ts-ignore */
|
|
440
|
-
{ value: 'dotted', name: 'dotted' },
|
|
441
|
-
/* @ts-ignore */
|
|
442
|
-
{ value: 'dashed', name: 'dashed' },
|
|
443
|
-
/* @ts-ignore */
|
|
444
|
-
{ value: 'wavy', name: 'wavy' },
|
|
445
|
-
],
|
|
446
|
-
info: 'The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different styles for each of the lines.',
|
|
447
|
-
}, {
|
|
448
|
-
name: 'Text decoration color',
|
|
449
|
-
property: 'text-decoration-color',
|
|
450
|
-
type: 'color',
|
|
451
|
-
defaults: '',
|
|
452
|
-
fixedValues: ['inherit', 'initial', 'revert', 'unset'],
|
|
453
|
-
info: 'The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.',
|
|
454
|
-
}, {
|
|
455
|
-
name: 'Text decoration thickness',
|
|
456
|
-
property: 'text-decoration-thickness',
|
|
457
|
-
type: 'integer',
|
|
458
|
-
units: ['px', '%', 'em'],
|
|
459
|
-
info: 'The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.',
|
|
460
|
-
default: '',
|
|
461
|
-
fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'],
|
|
462
|
-
}],
|
|
463
|
-
}, { at: 10 })
|
|
464
|
-
editor.StyleManager.addProperty('typography', {
|
|
465
|
-
name: 'Text transform',
|
|
466
|
-
|
|
467
|
-
property: 'text-transform',
|
|
468
|
-
type: 'select',
|
|
469
|
-
defaults: '',
|
|
470
|
-
options: [
|
|
471
|
-
/* @ts-ignore */
|
|
472
|
-
{ value: '', name: '' },
|
|
473
|
-
/* @ts-ignore */
|
|
474
|
-
{ value: 'none', name: 'none' },
|
|
475
|
-
/* @ts-ignore */
|
|
476
|
-
{ value: 'capitalize', name: 'capitalize' },
|
|
477
|
-
/* @ts-ignore */
|
|
478
|
-
{ value: 'uppercase', name: 'uppercase' },
|
|
479
|
-
/* @ts-ignore */
|
|
480
|
-
{ value: 'lowercase', name: 'lowercase' },
|
|
481
|
-
],
|
|
482
|
-
info: 'The text-transform CSS property sets how to capitalize an element\'s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.',
|
|
483
|
-
}, { at: 11 })
|
|
484
|
-
editor.StyleManager.addProperty('typography', {
|
|
485
|
-
name: 'Text overflow',
|
|
486
|
-
property: 'text-overflow',
|
|
487
|
-
type: 'select',
|
|
488
|
-
defaults: '',
|
|
489
|
-
options: [
|
|
490
|
-
/* @ts-ignore */
|
|
491
|
-
{ value: '', name: '' },
|
|
492
|
-
/* @ts-ignore */
|
|
493
|
-
{ value: 'clip', name: 'clip' },
|
|
494
|
-
/* @ts-ignore */
|
|
495
|
-
{ value: 'ellipsis', name: 'ellipsis' },
|
|
496
|
-
],
|
|
497
|
-
info: 'The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (\'…\', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties text-overflow-clip and text-overflow-string.',
|
|
498
|
-
}, { at: 12 })
|
|
499
|
-
/** remove default module et add custom one */
|
|
500
|
-
editor.StyleManager.removeProperty('general', 'display')
|
|
501
|
-
editor.StyleManager.addProperty('general', {
|
|
502
|
-
name: 'Display',
|
|
503
|
-
property: 'display',
|
|
504
|
-
type: 'select',
|
|
505
|
-
defaults: '',
|
|
506
|
-
options: [
|
|
507
|
-
/* @ts-ignore */
|
|
508
|
-
{ value: '', name: '' },
|
|
509
|
-
/* @ts-ignore */
|
|
510
|
-
{ value: 'block', name: 'block' },
|
|
511
|
-
/* @ts-ignore */
|
|
512
|
-
{ value: 'inline', name: 'inline' },
|
|
513
|
-
/* @ts-ignore */
|
|
514
|
-
{ value: 'inline-block', name: 'inline-block' },
|
|
515
|
-
/* @ts-ignore */
|
|
516
|
-
{ value: 'flex', name: 'flex' },
|
|
517
|
-
/* @ts-ignore */
|
|
518
|
-
{ value: 'none', name: 'none' },
|
|
519
|
-
],
|
|
520
|
-
info: '',
|
|
521
|
-
}, { at: 0 })
|
|
522
|
-
editor.StyleManager.addProperty('general', {
|
|
523
|
-
name: 'Visibility',
|
|
524
|
-
property: 'visibility',
|
|
525
|
-
type: 'select',
|
|
526
|
-
defaults: '',
|
|
527
|
-
options: [
|
|
528
|
-
/* @ts-ignore */
|
|
529
|
-
{ value: '', name: '' },
|
|
530
|
-
/* @ts-ignore */
|
|
531
|
-
{ value: 'visible', name: 'visible' },
|
|
532
|
-
/* @ts-ignore */
|
|
533
|
-
{ value: 'hidden', name: 'hidden' },
|
|
534
|
-
/* @ts-ignore */
|
|
535
|
-
{ value: 'collapse', name: 'collapse' },
|
|
536
|
-
],
|
|
537
|
-
info: 'The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.',
|
|
538
|
-
}, { at: 1 })
|
|
539
|
-
|
|
540
|
-
// Add content property, visible only when a pseudo element is selected
|
|
541
|
-
const contentProp = editor.StyleManager.addProperty('general', {
|
|
542
|
-
name: 'Content',
|
|
543
|
-
property: 'content',
|
|
544
|
-
type: 'text',
|
|
545
|
-
defaults: '',
|
|
546
|
-
info: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.',
|
|
547
|
-
full: true,
|
|
548
|
-
visible: false,
|
|
549
|
-
}, { at: 0 })
|
|
550
902
|
function refreshContentProp() {
|
|
551
903
|
const state = editor.SelectorManager.getState()
|
|
552
904
|
if (['before', 'after'].includes(state)) {
|
|
@@ -557,7 +909,6 @@ export default (editor: Editor, opts) => {
|
|
|
557
909
|
}
|
|
558
910
|
editor.on('selector:state component:selected component:styleUpdate style:sector:update', (state, opts) => setTimeout(() => refreshContentProp()))
|
|
559
911
|
editor.StyleManager.getSector('general').on('change', () => refreshContentProp())
|
|
560
|
-
|
|
561
912
|
// Add pseudo elements
|
|
562
913
|
editor.SelectorManager.states.add({name: 'before', label: 'Before'})
|
|
563
914
|
editor.SelectorManager.states.add({name: 'after', label: 'After'})
|