From cbeb11f6a2a2c34ccef8440cff592051e9078737 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Fri, 12 Apr 2024 09:19:09 +0000 Subject: [PATCH] Empty initial properties. Fix:#1543 (continued) --- src/ts/client/grapesjs/css-props.ts | 865 +++++++++++++++++++--------- 1 file changed, 608 insertions(+), 257 deletions(-) diff --git a/src/ts/client/grapesjs/css-props.ts b/src/ts/client/grapesjs/css-props.ts index 90681fd2d..a7e2662ea 100644 --- a/src/ts/client/grapesjs/css-props.ts +++ b/src/ts/client/grapesjs/css-props.ts @@ -23,6 +23,142 @@ import { Editor } from 'grapesjs' export default (editor: Editor, opts) => { editor.on('load', () => { + /***************/ + /* General */ + /***************/ + /** remove default module et add custom one */ + editor.StyleManager.removeProperty('general', 'display') + editor.StyleManager.addProperty('general', { + name: 'Display', + property: 'display', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'block', name: 'block' }, + /* @ts-ignore */ + { value: 'inline', name: 'inline' }, + /* @ts-ignore */ + { value: 'inline-block', name: 'inline-block' }, + /* @ts-ignore */ + { value: 'flex', name: 'flex' }, + /* @ts-ignore */ + { value: 'none', name: 'none' }, + ], + info: '', + }) + editor.StyleManager.addProperty('general', { + name: 'Visibility', + property: 'visibility', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'visible', name: 'visible' }, + /* @ts-ignore */ + { value: 'hidden', name: 'hidden' }, + /* @ts-ignore */ + { value: 'collapse', name: 'collapse' }, + ], + 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 .', + }) + /** remove float no more used (best practices) */ + editor.StyleManager.removeProperty('general', 'float') + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('general', 'position') + editor.StyleManager.addProperty('general', { + name: 'Position', + property: 'position', + type: 'select', + defaults: '', + full: true, + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'static', name: 'static' }, + /* @ts-ignore */ + { value: 'relative', name: 'relative' }, + /* @ts-ignore */ + { value: 'absolute', name: 'absolute' }, + /* @ts-ignore */ + { value: 'fixed', name: 'fixed' }, + ], + info: '', + }) + editor.StyleManager.removeProperty('general', 'top') + editor.StyleManager.addProperty('general', { + name: 'Top', + property: 'top', + type: 'number', + defaults: '', + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + info: '', + }) + editor.StyleManager.removeProperty('general', 'bottom') + editor.StyleManager.addProperty('general', { + name: 'Bottom', + property: 'bottom', + type: 'number', + defaults: '', + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + info: '', + }) + editor.StyleManager.removeProperty('general', 'right') + editor.StyleManager.addProperty('general', { + name: 'Right', + property: 'right', + type: 'number', + defaults: '', + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + info: '', + }) + editor.StyleManager.removeProperty('general', 'left') + editor.StyleManager.addProperty('general', { + name: 'Left', + property: 'left', + type: 'number', + defaults: '', + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + info: '', + }) + // Add content property, visible only when a pseudo element is selected + const contentProp = editor.StyleManager.addProperty('general', { + name: 'Content', + property: 'content', + type: 'text', + defaults: '', + info: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.', + full: true, + visible: false, + }, { at: 0 }) + /***************/ + /* Dimension */ + /***************/ + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'width') + editor.StyleManager.addProperty('dimension', { + name: 'Width', + property: 'width', + type: 'integer', + units: ['px', '%', 'em'], + default: '', + fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'], + }, { at: 0 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'height') + editor.StyleManager.addProperty('dimension', { + name: 'Height', + property: 'height', + type: 'integer', + units: ['px', '%', 'em'], + default: '', + fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'], + }, { at: 1 }) editor.StyleManager.addProperty('dimension', { name: 'Min width', property: 'min-width', @@ -31,6 +167,26 @@ export default (editor: Editor, opts) => { default: '', fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'], }, { at: 2 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'max-width') + editor.StyleManager.addProperty('dimension', { + name: 'Max width', + property: 'max-width', + type: 'integer', + units: ['px', '%', 'em'], + default: '', + fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'], + }, { at: 3 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'min-height') + editor.StyleManager.addProperty('dimension', { + name: 'Min height', + property: 'min-height', + type: 'integer', + units: ['px', '%', 'em'], + default: '', + fixedValues: ['inherit', 'initial', 'unset', 'none', 'max-content', 'min-content', 'fit-content'], + }, { at: 4 }) editor.StyleManager.addProperty('dimension', { name: 'Max height', property: 'max-height', @@ -45,8 +201,11 @@ export default (editor: Editor, opts) => { type: 'composite', properties: [{ name: 'Overflow X', - type: 'radio', + type: 'select', + defaults: '', options: [ + /* @ts-ignore */ + { value: '', name: '' }, /* @ts-ignore */ { value: 'auto', name: 'auto' }, /* @ts-ignore */ @@ -58,8 +217,11 @@ export default (editor: Editor, opts) => { ], }, { name: 'Overflow Y', - type: 'radio', + type: 'select', + defaults: '', options: [ + /* @ts-ignore */ + { value: '', name: '' }, /* @ts-ignore */ { value: 'auto', name: 'auto' }, /* @ts-ignore */ @@ -72,6 +234,450 @@ export default (editor: Editor, opts) => { }], 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.', }, { at: 6 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'margin') + editor.StyleManager.addProperty('dimension', { + name: 'Margin', + property: 'margin', + type: 'composite', + defaults: '', + fixedValues: [ 'initial', 'inherit' ], + full: true, + properties: [{ + property: 'margin-top', + name: 'Margin top', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'margin-right', + name: 'Margin right', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'margin-bottom', + name: 'Margin bottom', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'margin-left', + name: 'Margin left', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }], + }, { at: 7 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('dimension', 'padding') + editor.StyleManager.addProperty('dimension', { + name: 'Padding', + property: 'padding', + type: 'composite', + fixedValues: [ 'initial', 'inherit' ], + full: true, + properties: [{ + property: 'padding-top', + name: 'Padding top', + type: 'number', + default: '', + value: '10', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'padding-right', + name: 'Padding right', + type: 'number', + default: '', + value: '10', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'padding-bottom', + name: 'Padding bottom', + type: 'number', + default: '', + value: '10', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'padding-left', + name: 'Padding left', + type: 'number', + default: '', + value: '10', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }], + }, { at: 8 }) + /***************/ + /* Typography */ + /***************/ + /* doesn't work ? + editor.StyleManager.getProperty('typography', 'font-family').set({ default: ' ' });*/ + /** remove default property et add custom one (doesn't work ?) + editor.StyleManager.removeProperty('typography', 'font-family') + editor.StyleManager.addProperty('typography', { + property: 'font-family', + name: 'Font family', + type: 'select', + default: '', + fixedValues: ['inherit', 'initial'], + options: [ + { id: '', label: '' }, + { id: 'Arial, Helvetica, sans-serif', label: 'Arial' }, + { id: 'Arial Black, Gadget, sans-serif', label: 'Arial Black' }, + { id: 'Brush Script MT, sans-serif', label: 'Brush Script MT' }, + { id: 'Comic Sans MS, cursive, sans-serif', label: 'Comic Sans MS' }, + { id: 'Courier New, Courier, monospace', label: 'Courier New' }, + { id: 'Georgia, serif', label: 'Georgia' }, + { id: 'Helvetica, sans-serif', label: 'Helvetica' }, + { id: 'Impact, Charcoal, sans-serif', label: 'Impact' }, + { id: 'Lucida Sans Unicode, Lucida Grande, sans-serif', label: 'Lucida Sans Unicode' }, + { id: 'Tahoma, Geneva, sans-serif', label: 'Tahoma' }, + { id: 'Times New Roman, Times, serif', label: 'Times New Roman' }, + { id: 'Trebuchet MS, Helvetica, sans-serif', label: 'Trebuchet MS' }, + { id: 'Verdana, Geneva, sans-serif', label: 'Verdana' } + ] + }, { at: 0 })*/ + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'font-size') + editor.StyleManager.addProperty('typography', { + name: 'Font size', + property: 'font-size', + type: 'number', + default: '', + fixedValues: [ 'medium', 'xx-small', 'x-small', 'small', 'large', 'x-large', 'xx-large', 'smaller', 'larger', 'length', 'initial', 'inherit' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { at: 1 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'font-weight') + editor.StyleManager.addProperty('typography', { + name: 'Font weight', + property: 'font-weight', + type: 'select', + default: '', + fixedValues: ['inherit', 'initial'], + options: [ + { id: '', label: '' }, + { id: '100', label: 'Thin' }, + { id: '200', label: 'Extra-Light' }, + { id: '300', label: 'Light' }, + { id: '400', label: 'Normal' }, + { id: '500', label: 'Medium' }, + { id: '600', label: 'Semi-Bold' }, + { id: '700', label: 'Bold' }, + { id: '800', label: 'Extra-Bold' }, + { id: '900', label: 'Ultra-Bold' } + ] + }, { at: 2 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'letter-spacing') + editor.StyleManager.addProperty('typography', { + name: 'Letter spacing', + property: 'letter-spacing', + type: 'number', + default: '', + fixedValues: [ 'normal', 'initial', 'inherit' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { at: 3 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'color') + editor.StyleManager.addProperty('typography', { + name: 'Color', + property: 'color', + type: 'color', + default: '', + full: true, + }, { at: 4 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'line-height') + editor.StyleManager.addProperty('typography', { + name: 'Line height', + property: 'line-height', + type: 'number', + default: '', + fixedValues: [ 'normal', 'initial', 'inherit' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { at: 5 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('typography', 'text-align') + editor.StyleManager.addProperty('typography', { + name: 'Text align', + property: 'text-align', + type: 'select', + defaults: '', + options: [ + { id: '', label: '' }, + { id: 'left', label: 'left' }, + { id: 'center', label: 'center' }, + { id: 'right', label: 'right' }, + { id: 'justified', label: 'justified' }, + ], + }, { at: 6 }) + editor.StyleManager.addProperty('typography', { + name: 'Word break', + property: 'word-break', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'normal', name: 'normal' }, + /* @ts-ignore */ + { value: 'break-all', name: 'break-all' }, + /* @ts-ignore */ + { value: 'keep-all', name: 'keep-all' }, + /* @ts-ignore */ + { value: 'break-word', name: 'break-word' }, + ], + info: 'The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.', + }, { at: 7 }) + editor.StyleManager.addProperty('typography', { + name: 'Word wrap', + property: 'word-wrap', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'normal', name: 'normal' }, + /* @ts-ignore */ + { value: 'break-word', name: 'break-word' }, + ], + 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.', + }, { at: 8 }) + editor.StyleManager.addProperty('typography', { + name: 'White space', + property: 'white-space', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'normal', name: 'normal' }, + /* @ts-ignore */ + { value: 'nowrap', name: 'nowrap' }, + /* @ts-ignore */ + { value: 'pre', name: 'pre' }, + /* @ts-ignore */ + { value: 'pre-wrap', name: 'pre-wrap' }, + /* @ts-ignore */ + { value: 'pre-line', name: 'pre-line' }, + /* @ts-ignore */ + { value: 'break-spaces', name: 'break-spaces' }, + ], + info: 'The white-space CSS property sets how white space inside an element is handled.', + }, { at: 9 }) + editor.StyleManager.addProperty('typography', { + name: 'Text decoration', + property: 'text-decoration', + type: 'composite', + properties: [{ + name: 'Text decoration line', + property: 'text-decoration-line', + type: 'select', + defaults: '', + fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'], + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'none', name: 'none' }, + /* @ts-ignore */ + { value: 'underline', name: 'underline' }, + /* @ts-ignore */ + { value: 'overline', name: 'overline' }, + /* @ts-ignore */ + { value: 'line-through', name: 'line-through' }, + /* @ts-ignore */ + { value: 'blink', name: 'blink' }, + ], + info: 'The text-decoration CSS property sets the appearance of decorative lines on text.', + }, { + name: 'Text decoration style', + property: 'text-decoration-style', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'solid', name: 'solid' }, + /* @ts-ignore */ + { value: 'double', name: 'double' }, + /* @ts-ignore */ + { value: 'dotted', name: 'dotted' }, + /* @ts-ignore */ + { value: 'dashed', name: 'dashed' }, + /* @ts-ignore */ + { value: 'wavy', name: 'wavy' }, + ], + 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.', + }, { + name: 'Text decoration color', + property: 'text-decoration-color', + type: 'color', + defaults: '', + fixedValues: ['inherit', 'initial', 'revert', 'unset'], + info: 'The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.', + }, { + name: 'Text decoration thickness', + property: 'text-decoration-thickness', + type: 'integer', + units: ['px', '%', 'em'], + 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.', + default: '', + fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'], + }], + }, { at: 10 }) + editor.StyleManager.addProperty('typography', { + name: 'Text transform', + property: 'text-transform', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'none', name: 'none' }, + /* @ts-ignore */ + { value: 'capitalize', name: 'capitalize' }, + /* @ts-ignore */ + { value: 'uppercase', name: 'uppercase' }, + /* @ts-ignore */ + { value: 'lowercase', name: 'lowercase' }, + ], + 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.', + }, { at: 11 }) + editor.StyleManager.addProperty('typography', { + name: 'Text overflow', + property: 'text-overflow', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'clip', name: 'clip' }, + /* @ts-ignore */ + { value: 'ellipsis', name: 'ellipsis' }, + ], + 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.', + }, { at: 12 }) + /***************/ + /* Decorations */ + /***************/ + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('decorations', 'background-color') + editor.StyleManager.addProperty('decorations', { + name: 'Background color', + property: 'background-color', + type: 'color', + default: '', + full: true, + }, { at: 0 }) + /** remove default property et add custom one */ + editor.StyleManager.removeProperty('decorations', 'border-radius') + editor.StyleManager.addProperty('decorations', { + name: 'Border radius', + property: 'border-radius', + type: 'composite', + defaults: '', + fixedValues: [ 'initial', 'inherit' ], + full: true, + properties: [{ + property: 'border-top-left-radius', + name: 'Top left', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'border-top-right-radius', + name: 'Top right', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'border-bottom-right-radius', + name: 'Bottom right', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }, { + property: 'border-bottom-left-radius', + name: 'Botton left', + type: 'number', + default: '', + fixedValues: [ 'initial', 'inherit', 'auto' ], + units: [ 'px', '%', 'em', 'rem', 'vh', 'vw' ], + }], + }, { at: 2 }) + + editor.StyleManager.addProperty('decorations', { + name: 'Outline', + property: 'outline', + type: 'composite', + properties: [{ + name: 'Outline width', + property: 'outline-width', + type: 'integer', + units: ['px', '%', 'em'], + 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.', + default: '', + fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'], + }, { + name: 'Outline style', + property: 'outline-style', + type: 'select', + defaults: '', + options: [ + /* @ts-ignore */ + { value: '', name: '' }, + /* @ts-ignore */ + { value: 'none', name: 'none' }, + /* @ts-ignore */ + { value: 'hidden', name: 'hidden' }, + /* @ts-ignore */ + { value: 'dotted', name: 'dotted' }, + /* @ts-ignore */ + { value: 'dashed', name: 'dashed' }, + /* @ts-ignore */ + { value: 'solid', name: 'solid' }, + /* @ts-ignore */ + { value: 'double', name: 'double' }, + /* @ts-ignore */ + { value: 'groove', name: 'groove' }, + /* @ts-ignore */ + { value: 'ridge', name: 'ridge' }, + /* @ts-ignore */ + { value: 'inset', name: 'inset' }, + /* @ts-ignore */ + { value: 'outset', name: 'outset' }, + ], + 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.', + }, { + name: 'Outline color', + property: 'outline-color', + type: 'color', + defaults: '', + info: 'The outline-color CSS property sets the color of an element\'s outline.', + }], + }, { at: 8 }) + /***************/ + /* Extra */ + /***************/ editor.StyleManager.addProperty('extra', { name: 'Z index', property: 'z-index', @@ -293,260 +899,6 @@ export default (editor: Editor, opts) => { ], info: 'The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.', }, { at: 7 }) - - editor.StyleManager.addProperty('decorations', { - name: 'Outline', - property: 'outline', - type: 'composite', - properties: [{ - name: 'Outline width', - property: 'outline-width', - type: 'integer', - units: ['px', '%', 'em'], - 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.', - default: '', - fixedValues: ['medium', 'thin', 'thick', 'inherit', 'initial', 'revert', 'unset'], - }, { - name: 'Outline style', - property: 'outline-style', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'none', name: 'none' }, - /* @ts-ignore */ - { value: 'hidden', name: 'hidden' }, - /* @ts-ignore */ - { value: 'dotted', name: 'dotted' }, - /* @ts-ignore */ - { value: 'dashed', name: 'dashed' }, - /* @ts-ignore */ - { value: 'solid', name: 'solid' }, - /* @ts-ignore */ - { value: 'double', name: 'double' }, - /* @ts-ignore */ - { value: 'groove', name: 'groove' }, - /* @ts-ignore */ - { value: 'ridge', name: 'ridge' }, - /* @ts-ignore */ - { value: 'inset', name: 'inset' }, - /* @ts-ignore */ - { value: 'outset', name: 'outset' }, - ], - 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.', - }, { - name: 'Outline color', - property: 'outline-color', - type: 'color', - defaults: '', - info: 'The outline-color CSS property sets the color of an element\'s outline.', - }], - }, { at: 8 }) - editor.StyleManager.addProperty('typography', { - name: 'Word break', - property: 'word-break', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'normal', name: 'normal' }, - /* @ts-ignore */ - { value: 'break-all', name: 'break-all' }, - /* @ts-ignore */ - { value: 'keep-all', name: 'keep-all' }, - /* @ts-ignore */ - { value: 'break-word', name: 'break-word' }, - ], - info: 'The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.', - }, { at: 7 }) - editor.StyleManager.addProperty('typography', { - name: 'Word wrap', - property: 'word-wrap', - type: 'radio', - defaults: '', - options: [ - /* @ts-ignore */ - { value: 'normal', name: 'normal' }, - /* @ts-ignore */ - { value: 'break-word', name: 'break-word' }, - ], - 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.', - }, { at: 8 }) - editor.StyleManager.addProperty('typography', { - name: 'White space', - property: 'white-space', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'normal', name: 'normal' }, - /* @ts-ignore */ - { value: 'nowrap', name: 'nowrap' }, - /* @ts-ignore */ - { value: 'pre', name: 'pre' }, - /* @ts-ignore */ - { value: 'pre-wrap', name: 'pre-wrap' }, - /* @ts-ignore */ - { value: 'pre-line', name: 'pre-line' }, - /* @ts-ignore */ - { value: 'break-spaces', name: 'break-spaces' }, - ], - info: 'The white-space CSS property sets how white space inside an element is handled.', - }, { at: 9 }) - editor.StyleManager.addProperty('typography', { - name: 'Text decoration', - property: 'text-decoration', - type: 'composite', - properties: [{ - name: 'Text decoration line', - property: 'text-decoration-line', - type: 'select', - defaults: '', - fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'], - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'none', name: 'none' }, - /* @ts-ignore */ - { value: 'underline', name: 'underline' }, - /* @ts-ignore */ - { value: 'overline', name: 'overline' }, - /* @ts-ignore */ - { value: 'line-through', name: 'line-through' }, - /* @ts-ignore */ - { value: 'blink', name: 'blink' }, - ], - info: 'The text-decoration CSS property sets the appearance of decorative lines on text.', - }, { - name: 'Text decoration style', - property: 'text-decoration-style', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'solid', name: 'solid' }, - /* @ts-ignore */ - { value: 'double', name: 'double' }, - /* @ts-ignore */ - { value: 'dotted', name: 'dotted' }, - /* @ts-ignore */ - { value: 'dashed', name: 'dashed' }, - /* @ts-ignore */ - { value: 'wavy', name: 'wavy' }, - ], - 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.', - }, { - name: 'Text decoration color', - property: 'text-decoration-color', - type: 'color', - defaults: '', - fixedValues: ['inherit', 'initial', 'revert', 'unset'], - info: 'The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.', - }, { - name: 'Text decoration thickness', - property: 'text-decoration-thickness', - type: 'integer', - units: ['px', '%', 'em'], - 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.', - default: '', - fixedValues: ['auto', 'inherit', 'initial', 'revert', 'unset'], - }], - }, { at: 10 }) - editor.StyleManager.addProperty('typography', { - name: 'Text transform', - - property: 'text-transform', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'none', name: 'none' }, - /* @ts-ignore */ - { value: 'capitalize', name: 'capitalize' }, - /* @ts-ignore */ - { value: 'uppercase', name: 'uppercase' }, - /* @ts-ignore */ - { value: 'lowercase', name: 'lowercase' }, - ], - 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.', - }, { at: 11 }) - editor.StyleManager.addProperty('typography', { - name: 'Text overflow', - property: 'text-overflow', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'clip', name: 'clip' }, - /* @ts-ignore */ - { value: 'ellipsis', name: 'ellipsis' }, - ], - 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.', - }, { at: 12 }) - /** remove default module et add custom one */ - editor.StyleManager.removeProperty('general', 'display') - editor.StyleManager.addProperty('general', { - name: 'Display', - property: 'display', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'block', name: 'block' }, - /* @ts-ignore */ - { value: 'inline', name: 'inline' }, - /* @ts-ignore */ - { value: 'inline-block', name: 'inline-block' }, - /* @ts-ignore */ - { value: 'flex', name: 'flex' }, - /* @ts-ignore */ - { value: 'none', name: 'none' }, - ], - info: '', - }, { at: 0 }) - editor.StyleManager.addProperty('general', { - name: 'Visibility', - property: 'visibility', - type: 'select', - defaults: '', - options: [ - /* @ts-ignore */ - { value: '', name: '' }, - /* @ts-ignore */ - { value: 'visible', name: 'visible' }, - /* @ts-ignore */ - { value: 'hidden', name: 'hidden' }, - /* @ts-ignore */ - { value: 'collapse', name: 'collapse' }, - ], - 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
.', - }, { at: 1 }) - - // Add content property, visible only when a pseudo element is selected - const contentProp = editor.StyleManager.addProperty('general', { - name: 'Content', - property: 'content', - type: 'text', - defaults: '', - info: 'The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.', - full: true, - visible: false, - }, { at: 0 }) function refreshContentProp() { const state = editor.SelectorManager.getState() if (['before', 'after'].includes(state)) { @@ -557,7 +909,6 @@ export default (editor: Editor, opts) => { } editor.on('selector:state component:selected component:styleUpdate style:sector:update', (state, opts) => setTimeout(() => refreshContentProp())) editor.StyleManager.getSector('general').on('change', () => refreshContentProp()) - // Add pseudo elements editor.SelectorManager.states.add({name: 'before', label: 'Before'}) editor.SelectorManager.states.add({name: 'after', label: 'After'})