From 3c710ffc1452db8595521fb74b85230545ff84ed Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Tue, 2 Dec 2025 11:20:23 +0100 Subject: [PATCH 1/6] docs: RTE style variants and props --- .../components/rich-text-editor/index.adoc | 64 --------- .../components/rich-text-editor/styling.adoc | 125 ++++++++++++++++++ 2 files changed, 125 insertions(+), 64 deletions(-) diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index e0619c64cb..d48923495c 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -279,70 +279,6 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi endif::[] -- -== Theme Variants - -=== Compact - -Apply the `compact` theme to make the toolbar more compact. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - -=== No Border - -Apply the `no-border` theme variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders. - -[.example] --- - -ifdef::lit[] -[source,html] ----- -include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - == Toolbar Actions diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index ca0544a2b8..bda4ccb669 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -7,6 +7,131 @@ order: 50 --- = Rich Text Editor Styling +== Theme Variants + +=== Compact + +[cols="1,3,1"] +|=== +| Variant | Description | Supported by + +|`compact` +| Makes the toolbar more compact +| Lumo +|=== + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-compact.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeCompact.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-compact.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + + +=== No Border + +[cols="1,3,1"] +|=== +| Variant | Description | Supported by + +|`no-border` +| Removes the border around the editor +| Lumo +|=== + +[.example] +-- + +ifdef::lit[] +[source,html] +---- +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-theme-no-border.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorThemeNoBorder.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-theme-no-border.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +include::../_styling-section-intros.adoc[tag=properties] + + +[cols="1,3,1"] +|=== +| Feature | Property | Supported by + +| Toolbar background +| `--vaadin-rich-text-editor-toolbar-background` +| Aura + +| Toolbar padding +| `--vaadin-rich-text-editor-toolbar-padding` +| Aura + + +| Toolbar buttons gap +| `--vaadin-rich-text-editor-toolbar-gap` +| Aura + + +| Toolbar button background +| `--vaadin-rich-text-editor-toolbar-button-background` +| Aura + + +| Toolbar button border radius +| `--vaadin-rich-text-editor-toolbar-button-border-radius` +| Aura + + +| Toolbar button padding +| `--vaadin-rich-text-editor-toolbar-button-padding` +| Aura + + +| Toolbar button text color +| `--vaadin-rich-text-editor-toolbar-button-text-color` +| Aura + + +| Background +| `--vaadin-rich-text-editor-background` +| Aura + +|=== + + include::../_styling-section-intros.adoc[tag=selectors] From e8b17a68fe68a510e3d2f7994d06f9ec09ee8b16 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Tue, 2 Dec 2025 14:55:01 +0100 Subject: [PATCH 2/6] remove description column --- .../components/rich-text-editor/styling.adoc | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index bda4ccb669..4c4d305394 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -89,43 +89,29 @@ include::../_styling-section-intros.adoc[tag=properties] [cols="1,3,1"] |=== -| Feature | Property | Supported by +| Property | Supported by -| Toolbar background | `--vaadin-rich-text-editor-toolbar-background` | Aura -| Toolbar padding | `--vaadin-rich-text-editor-toolbar-padding` | Aura - -| Toolbar buttons gap | `--vaadin-rich-text-editor-toolbar-gap` | Aura - -| Toolbar button background | `--vaadin-rich-text-editor-toolbar-button-background` | Aura - -| Toolbar button border radius | `--vaadin-rich-text-editor-toolbar-button-border-radius` | Aura - -| Toolbar button padding | `--vaadin-rich-text-editor-toolbar-button-padding` | Aura - -| Toolbar button text color | `--vaadin-rich-text-editor-toolbar-button-text-color` | Aura - -| Background | `--vaadin-rich-text-editor-background` | Aura From 8d791acd4b3af13dba2fac6b311db39237d97207 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Wed, 3 Dec 2025 10:23:03 +0100 Subject: [PATCH 3/6] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sascha Ißbrücker --- articles/components/rich-text-editor/styling.adoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index 4c4d305394..a225c43dca 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -84,10 +84,10 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-th endif::[] -- -include::../_styling-section-intros.adoc[tag=properties] +include::../_styling-section-theming-props.adoc[tag=style-properties] -[cols="1,3,1"] +[cols="3,1"] |=== | Property | Supported by From f6865eb790396d8a5f3f703463d2322d2794cdcb Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Wed, 3 Dec 2025 11:03:25 +0100 Subject: [PATCH 4/6] address review comments --- .../components/rich-text-editor/styling.adoc | 50 +++++++++++++++---- 1 file changed, 40 insertions(+), 10 deletions(-) diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index a225c43dca..f28ddb0507 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -7,9 +7,9 @@ order: 50 --- = Rich Text Editor Styling -== Theme Variants +== Style Variants -=== Compact +The following variants are supported: [cols="1,3,1"] |=== @@ -18,8 +18,17 @@ order: 50 |`compact` | Makes the toolbar more compact | Lumo + +|`no-border` +| Removes the border around the editor +| Lumo + |=== +=== Compact + +Apply the `compact` style variant to make the toolbar more compact. + [.example] -- @@ -49,14 +58,7 @@ endif::[] === No Border -[cols="1,3,1"] -|=== -| Variant | Description | Supported by - -|`no-border` -| Removes the border around the editor -| Lumo -|=== +Apply the `no-border` style variant to remove Rich Text Editor’s border. An example of this is when the component is wrapped in a container with its own borders. [.example] -- @@ -86,6 +88,7 @@ endif::[] include::../_styling-section-theming-props.adoc[tag=style-properties] +=== Common Properties [cols="3,1"] |=== @@ -117,6 +120,33 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |=== +=== Overlay Properties + +[cols="3,1"] +|=== +| CSS Property | Supported by + +| `--vaadin-rich-text-editor-overlay-padding` +| Aura + +| `--vaadin-rich-text-editor-overlay-gap` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-width` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-color` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-border-radius` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-height` +| Aura + +| `--vaadin-rich-text-editor-overlay-color-option-width` +| Aura +|=== include::../_styling-section-intros.adoc[tag=selectors] From f3954110e21ea8662d33ca24d3cde56825941409 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Wed, 3 Dec 2025 15:26:04 +0100 Subject: [PATCH 5/6] update table --- .../components/rich-text-editor/styling.adoc | 44 ++++++++++++------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index f28ddb0507..c4ea840419 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -94,29 +94,41 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |=== | Property | Supported by -| `--vaadin-rich-text-editor-toolbar-background` -| Aura +| `--vaadin-rich-text-editor-background` +| Aura, Lumo -| `--vaadin-rich-text-editor-toolbar-padding` -| Aura +| `--vaadin-rich-text-editor-content-color` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-font-size` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-line-height` +| Aura, Lumo + +| `--vaadin-rich-text-editor-content-padding` +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-background` +| Aura, Lumo | `--vaadin-rich-text-editor-toolbar-gap` -| Aura +| Aura, Lumo + +| `--vaadin-rich-text-editor-toolbar-padding` +| Aura, Lumo | `--vaadin-rich-text-editor-toolbar-button-background` -| Aura +| Aura, Lumo | `--vaadin-rich-text-editor-toolbar-button-border-radius` -| Aura +| Aura, Lumo | `--vaadin-rich-text-editor-toolbar-button-padding` -| Aura +| Aura, Lumo | `--vaadin-rich-text-editor-toolbar-button-text-color` -| Aura - -| `--vaadin-rich-text-editor-background` -| Aura +| Aura, Lumo |=== @@ -126,13 +138,10 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] |=== | CSS Property | Supported by -| `--vaadin-rich-text-editor-overlay-padding` -| Aura - | `--vaadin-rich-text-editor-overlay-gap` | Aura -| `--vaadin-rich-text-editor-overlay-color-option-border-width` +| `--vaadin-rich-text-editor-overlay-padding` | Aura | `--vaadin-rich-text-editor-overlay-color-option-border-color` @@ -141,6 +150,9 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] | `--vaadin-rich-text-editor-overlay-color-option-border-radius` | Aura +| `--vaadin-rich-text-editor-overlay-color-option-border-width` +| Aura + | `--vaadin-rich-text-editor-overlay-color-option-height` | Aura From bbb28b2929c7143e811db4877adce1cd7e25c3c1 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Wed, 3 Dec 2025 16:22:59 +0100 Subject: [PATCH 6/6] Add CSS custom properties for toolbar button styling --- articles/components/rich-text-editor/styling.adoc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index c4ea840419..4292714176 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -121,9 +121,15 @@ include::../_styling-section-theming-props.adoc[tag=style-properties] | `--vaadin-rich-text-editor-toolbar-button-background` | Aura, Lumo +| `--vaadin-rich-text-editor-toolbar-button-border-color` +| Aura, Lumo + | `--vaadin-rich-text-editor-toolbar-button-border-radius` | Aura, Lumo +| `--vaadin-rich-text-editor-toolbar-button-border-width` +| Aura, Lumo + | `--vaadin-rich-text-editor-toolbar-button-padding` | Aura, Lumo