diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js index 501eefc5e3c..ead4f9c7c0d 100644 --- a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js +++ b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js @@ -42,6 +42,7 @@ const base = css` max-height: inherit; min-height: inherit; border-radius: inherit; + contain: paint; } .vaadin-rich-text-editor-container:has([part='content']:focus-within), @@ -52,9 +53,9 @@ const base = css` export const content = css` :host { - --_item-indent: var(--vaadin-padding-l); - --_marker-indent: calc(var(--vaadin-padding-s) / 2); - --_list-indent: calc(var(--_item-indent) + var(--_marker-indent)); + --_item-indent: var(--vaadin-padding-s); + --_marker-indent: var(--vaadin-gap-s); + --_list-indent: var(--_item-indent); } [part='content'] { @@ -373,6 +374,14 @@ export const content = css` max-width: 100%; } + .ql-editor > :is(p, ol, ul, blockquote, .ql-code-block-container):first-child { + margin-top: 0; + } + + .ql-editor > :is(p, ol, ul, blockquote, .ql-code-block-container):last-child { + margin-bottom: 0; + } + /* RTL specific styles */ :host([dir='rtl']) .ql-editor { direction: rtl; diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png index 529c33ac81d..ab843073263 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png index 57015f128c1..1a58483338c 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/color-popup.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png index d927eeb123a..86df9b838ed 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/disabled.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png index 912ecbc6eec..a52c747e1bd 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png index 656ccd62d14..9b4d56ccdfc 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png index af2182db682..70169b761eb 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png index afcdbaf5b94..38d7120fd4e 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png index d3fa5372a14..472865afc94 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/max-height.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png index 6152a6c5a48..a4ea7edb7ef 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/min-height.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/readonly.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/readonly.png index ed88223dd3a..103bdfe21a3 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/readonly.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/readonly.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png index deb52b7f0dc..fe7b24337fc 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-blocks.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png index 5fe3231abb6..9c3998fc2db 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-headings.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png index b63025c1d95..194152b9a59 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-alignment.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png index 8c0af9c8071..bde04a5cfdd 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png index d2daec75a82..fd3953afa6d 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png index f64c5a2fc0c..6af52f384ca 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png index 7bb6a4052e2..e469b435bc0 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png index bcf25c9c89e..b872e90d93d 100644 Binary files a/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/base/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-indent.png index c4753f376c8..6c0d2722ec4 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-basic.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-basic.png index c3e4bb94c09..36e4ce43d79 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-basic.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png index 93782a24491..fed8633475b 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png index 061f108f661..47b040ba68a 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/ltr-list-ordered-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/max-height.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/max-height.png index e761f19878c..36d7fe9455b 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/max-height.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/max-height.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/readonly.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/readonly.png index 99e60a18282..be8a7a78e8b 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/readonly.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/readonly.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-headings.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-headings.png index fe3666942b7..8c0c16f9c02 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-headings.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-headings.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png index 3aa48114469..68b535f780c 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rich-content-text-formatting.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-indent.png index 89ccc57a798..3814f46784e 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-basic.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-basic.png index 73e1f021789..dbf4e022787 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-basic.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-basic.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png index 4de99f9708e..1409ec18d19 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-bullet-indent.png differ diff --git a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png index f3d2f4bf829..46bbecce389 100644 Binary files a/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png and b/packages/rich-text-editor/test/visual/lumo/screenshots/rich-text-editor/baseline/rtl-list-ordered-indent.png differ diff --git a/packages/vaadin-lumo-styles/src/components/rich-text-editor.css b/packages/vaadin-lumo-styles/src/components/rich-text-editor.css index 65ca952f46d..fe2c625a33b 100644 --- a/packages/vaadin-lumo-styles/src/components/rich-text-editor.css +++ b/packages/vaadin-lumo-styles/src/components/rich-text-editor.css @@ -335,7 +335,7 @@ .ql-editor { color: inherit; - padding: 0 var(--lumo-space-m); + padding: var(--lumo-space-s) var(--lumo-space-m); } .ql-code-block-container {