refactor: update RTE content styles, improve nested lists indentation (#10309)

Author: jouni

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;