diff --git a/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.css b/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.css
index 48dd9e8f..4e5b551e 100644
--- a/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.css
+++ b/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.css
@@ -6,7 +6,6 @@
  *
  *
  */
-
 .PlaygroundEditorTheme__ltr {
   text-align: left;
 }
@@ -15,12 +14,8 @@
 }
 .PlaygroundEditorTheme__paragraph {
   margin: 0;
-  margin-bottom: 8px;
   position: relative;
 }
-.PlaygroundEditorTheme__paragraph:last-child {
-  margin-bottom: 0;
-}
 .PlaygroundEditorTheme__quote {
   margin: 0;
   margin-left: 20px;
@@ -37,25 +32,22 @@
   color: rgb(5, 5, 5);
   font-weight: 400;
   margin: 0;
-  margin-bottom: 12px;
-  padding: 0;
 }
 .PlaygroundEditorTheme__h2 {
   font-size: 15px;
   color: rgb(101, 103, 107);
   font-weight: 700;
   margin: 0;
-  margin-top: 10px;
-  padding: 0;
   text-transform: uppercase;
 }
 .PlaygroundEditorTheme__h3 {
   font-size: 12px;
   margin: 0;
-  margin-top: 10px;
-  padding: 0;
   text-transform: uppercase;
 }
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
@@ -71,6 +63,14 @@
 .PlaygroundEditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
+.PlaygroundEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.PlaygroundEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
 .PlaygroundEditorTheme__textCode {
   background-color: rgb(240, 242, 245);
   padding: 1px 0.25rem;
@@ -87,6 +87,7 @@
 }
 .PlaygroundEditorTheme__link:hover {
   text-decoration: underline;
+  cursor: pointer;
 }
 .PlaygroundEditorTheme__code {
   background-color: rgb(240, 242, 245);
@@ -98,10 +99,9 @@
   margin: 0;
   margin-top: 8px;
   margin-bottom: 8px;
-  tab-size: 2;
-  /* white-space: pre; */
   overflow-x: auto;
   position: relative;
+  tab-size: 2;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -116,35 +116,165 @@
   text-align: right;
   min-width: 25px;
 }
-.PlaygroundEditorTheme__code:after {
-  content: attr(data-highlight-language);
-  top: 0;
-  right: 3px;
-  padding: 3px;
-  font-size: 10px;
-  text-transform: uppercase;
-  position: absolute;
-  color: rgba(0, 0, 0, 0.5);
-}
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
-  max-width: 100%;
   overflow-y: scroll;
+  overflow-x: scroll;
   table-layout: fixed;
-  width: 100%;
+  width: max-content;
+  margin: 30px 0;
+}
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
 }
 .PlaygroundEditorTheme__tableCell {
-  border: 1px solid black;
-  padding: 6px 8px;
+  border: 1px solid #bbb;
+  width: 75px;
   min-width: 75px;
   vertical-align: top;
   text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+.PlaygroundEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
 }
 .PlaygroundEditorTheme__tableCellHeader {
   background-color: #f2f3f5;
   text-align: start;
 }
+.PlaygroundEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.PlaygroundEditorTheme__tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: -25px;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
 .PlaygroundEditorTheme__characterLimit {
   display: inline;
   background-color: #ffbbbb !important;
@@ -152,43 +282,107 @@
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-alpha;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-alpha;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-roman;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-roman;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__ul {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  list-style-position: outside;
 }
 .PlaygroundEditorTheme__listItem {
-  margin: 8px 32px 8px 32px;
+  margin: 0 32px;
+}
+.PlaygroundEditorTheme__listItemChecked,
+.PlaygroundEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
+.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+.PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.PlaygroundEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.PlaygroundEditorTheme__listItemChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
 }
 .PlaygroundEditorTheme__nestedListItem {
   list-style-type: none;
 }
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}
 .PlaygroundEditorTheme__tokenComment {
   color: slategray;
 }
@@ -213,3 +407,55 @@
 .PlaygroundEditorTheme__tokenFunction {
   color: #dd4a68;
 }
+.PlaygroundEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.PlaygroundEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.PlaygroundEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
diff --git a/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.js b/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.js
index 87db0833..9523e72d 100644
--- a/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.js
+++ b/demos/plaintext-editor/src/themes/PlaygroundEditorTheme.js
@@ -52,6 +52,7 @@ const theme = {
     h4: 'PlaygroundEditorTheme__h4',
     h5: 'PlaygroundEditorTheme__h5',
   },
+  hr: 'PlaygroundEditorTheme__hr',
   image: 'editor-image',
   link: 'PlaygroundEditorTheme__link',
   list: {
diff --git a/demos/playground/src/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs b/demos/playground/src/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
index cb0a9bed..e2543ec0 100644
--- a/demos/playground/src/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/CopyAndPaste/html/HTMLCopyAndPaste.spec.mjs
@@ -208,8 +208,14 @@ test.describe('HTML CopyAndPaste', () => {
       await assertHTML(
         page,
         html`
-          <hr class="" contenteditable="false" data-lexical-decorator="true" />
-          <hr class="" contenteditable="false" data-lexical-decorator="true" />
+          <hr
+            class="PlaygroundEditorTheme__hr"
+            contenteditable="false"
+            data-lexical-decorator="true" />
+          <hr
+            class="PlaygroundEditorTheme__hr"
+            contenteditable="false"
+            data-lexical-decorator="true" />
           <div
             class="PlaygroundEditorTheme__blockCursor"
             contenteditable="false"
@@ -228,13 +234,19 @@ test.describe('HTML CopyAndPaste', () => {
     await assertHTML(
       page,
       html`
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
           <span data-lexical-text="true">Text between HRs</span>
         </p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
       `,
     );
     await assertSelection(page, {
@@ -266,7 +278,10 @@ test.describe('HTML CopyAndPaste', () => {
           dir="ltr">
           <span data-lexical-text="true">Hello</span>
         </p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
diff --git a/demos/playground/src/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs b/demos/playground/src/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
index 7ecb1ea0..b7eb4d30 100644
--- a/demos/playground/src/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/CopyAndPaste/html/ListsHTMLCopyAndPaste.spec.mjs
@@ -390,7 +390,10 @@ test.describe('HTML Lists CopyAndPaste', () => {
             <span data-lexical-text="true">one</span>
           </li>
         </ul>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <ul class="PlaygroundEditorTheme__ul">
           <li
             class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
diff --git a/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs b/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs
index 74bf0764..5faabfb1 100644
--- a/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs
@@ -45,7 +45,10 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -108,7 +111,10 @@ test.describe('HorizontalRule', () => {
           dir="ltr">
           <span data-lexical-text="true">Some text</span>
         </p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
@@ -136,7 +142,7 @@ test.describe('HorizontalRule', () => {
     if (!isCollab) {
       await assertHTML(
         page,
-        '<div class="PlaygroundEditorTheme__blockCursor" contenteditable="false" data-lexical-cursor="true"></div><hr class="" data-lexical-decorator="true" contenteditable="false"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some more text</span></p>',
+        '<div class="PlaygroundEditorTheme__blockCursor" contenteditable="false" data-lexical-cursor="true"></div><hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">Some more text</span></p>',
       );
     }
 
@@ -188,7 +194,10 @@ test.describe('HorizontalRule', () => {
           dir="ltr">
           <span data-lexical-text="true">Test</span>
         </p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -249,7 +258,10 @@ test.describe('HorizontalRule', () => {
           dir="ltr">
           <span data-lexical-text="true">Te</span>
         </p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p
           class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
           dir="ltr">
@@ -284,7 +296,10 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -311,7 +326,10 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -332,9 +350,15 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -365,7 +389,10 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
       `,
     );
@@ -386,7 +413,7 @@ test.describe('HorizontalRule', () => {
       html`
         <p class="PlaygroundEditorTheme__paragraph"><br /></p>
         <hr
-          class="selected"
+          class="PlaygroundEditorTheme__hr selected"
           contenteditable="false"
           data-lexical-decorator="true" />
       `,
@@ -415,7 +442,7 @@ test.describe('HorizontalRule', () => {
       page,
       html`
         <hr
-          class="selected"
+          class="PlaygroundEditorTheme__hr selected"
           contenteditable="false"
           data-lexical-decorator="true" />
       `,
diff --git a/demos/playground/src/__tests__/e2e/Markdown.spec.mjs b/demos/playground/src/__tests__/e2e/Markdown.spec.mjs
index d69c3eef..96bf3cf7 100644
--- a/demos/playground/src/__tests__/e2e/Markdown.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/Markdown.spec.mjs
@@ -150,7 +150,7 @@ test.describe('Markdown', () => {
     },
     {
       expectation:
-        '<hr class="" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
+        '<hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
       importExpectation: '',
       isBlockTest: true,
       markdownImport: '',
@@ -159,7 +159,7 @@ test.describe('Markdown', () => {
     },
     {
       expectation:
-        '<hr class="" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
+        '<hr class="PlaygroundEditorTheme__hr" data-lexical-decorator="true" contenteditable="false" /><p class="PlaygroundEditorTheme__paragraph"><br></p>',
       importExpectation: '',
       isBlockTest: true,
       markdownImport: '',
@@ -492,14 +492,20 @@ test.describe('Markdown', () => {
     },
     {
       html: html`
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p><br /></p>
       `,
       text: '--- ',
     },
     {
       html: html`
-        <hr class="" contenteditable="false" data-lexical-decorator="true" />
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
         <p><br /></p>
       `,
       text: '*** ',
@@ -1176,7 +1182,10 @@ const TYPED_MARKDOWN_HTML = html`
     dir="ltr">
     <span data-lexical-text="true">Quote</span>
   </blockquote>
-  <hr class="" contenteditable="false" data-lexical-decorator="true" />
+  <hr
+    class="PlaygroundEditorTheme__hr"
+    contenteditable="false"
+    data-lexical-decorator="true" />
   <ul class="PlaygroundEditorTheme__ul">
     <li
       value="1"
@@ -1390,7 +1399,10 @@ const IMPORTED_MARKDOWN_HTML = html`
   <h3 class="PlaygroundEditorTheme__h3 PlaygroundEditorTheme__ltr" dir="ltr">
     <span data-lexical-text="true">Horizontal Rules</span>
   </h3>
-  <hr class="" contenteditable="false" data-lexical-decorator="true" />
+  <hr
+    class="PlaygroundEditorTheme__hr"
+    contenteditable="false"
+    data-lexical-decorator="true" />
   <h3 class="PlaygroundEditorTheme__h3 PlaygroundEditorTheme__ltr" dir="ltr">
     <span data-lexical-text="true">Blockquotes</span>
   </h3>
diff --git a/demos/playground/src/__tests__/e2e/Selection.spec.mjs b/demos/playground/src/__tests__/e2e/Selection.spec.mjs
index 31f13d32..46322693 100644
--- a/demos/playground/src/__tests__/e2e/Selection.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/Selection.spec.mjs
@@ -555,7 +555,7 @@ test.describe('Selection', () => {
           <span data-lexical-text="true">Some text</span>
         </h1>
         <hr
-          class="selected"
+          class="PlaygroundEditorTheme__hr selected"
           contenteditable="false"
           data-lexical-decorator="true" />
         <h1
diff --git a/demos/playground/src/index.css b/demos/playground/src/index.css
index 9ae9a40b..358ac095 100644
--- a/demos/playground/src/index.css
+++ b/demos/playground/src/index.css
@@ -1626,26 +1626,6 @@ button.item.dropdown-item-active i {
   opacity: 1;
 }
 
-hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1em 0;
-  cursor: pointer;
-}
-
-hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: #ccc;
-  line-height: 2px;
-}
-
-hr.selected {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-
 .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
diff --git a/demos/playground/src/themes/PlaygroundEditorTheme.css b/demos/playground/src/themes/PlaygroundEditorTheme.css
index cc55916d..4e5b551e 100644
--- a/demos/playground/src/themes/PlaygroundEditorTheme.css
+++ b/demos/playground/src/themes/PlaygroundEditorTheme.css
@@ -442,3 +442,20 @@
 .PlaygroundEditorTheme__autocomplete {
   color: #ccc;
 }
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
diff --git a/demos/playground/src/themes/PlaygroundEditorTheme.ts b/demos/playground/src/themes/PlaygroundEditorTheme.ts
index 31ec5480..42f5a7b0 100644
--- a/demos/playground/src/themes/PlaygroundEditorTheme.ts
+++ b/demos/playground/src/themes/PlaygroundEditorTheme.ts
@@ -60,6 +60,7 @@ const theme: EditorThemeClasses = {
     h5: 'PlaygroundEditorTheme__h5',
     h6: 'PlaygroundEditorTheme__h6',
   },
+  hr: 'PlaygroundEditorTheme__hr',
   image: 'editor-image',
   indent: 'PlaygroundEditorTheme__indent',
   inlineImage: 'inline-editor-image',
diff --git a/demos/richtext-editor/src/global.css b/demos/richtext-editor/src/global.css
index 995a4e3b..113096db 100644
--- a/demos/richtext-editor/src/global.css
+++ b/demos/richtext-editor/src/global.css
@@ -10,7 +10,11 @@
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular',
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -762,7 +766,9 @@ i.prettier-error {
   z-index: 10;
   display: block;
   position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
@@ -1649,26 +1655,6 @@ button.item.dropdown-item-active i {
   opacity: 1;
 }
 
-hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1em 0;
-  cursor: pointer;
-}
-
-hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: #ccc;
-  line-height: 2px;
-}
-
-hr.selected {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-
 .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
diff --git a/demos/richtext-editor/src/themes/PlaygroundEditorTheme.css b/demos/richtext-editor/src/themes/PlaygroundEditorTheme.css
index 7c44a57d..4e5b551e 100644
--- a/demos/richtext-editor/src/themes/PlaygroundEditorTheme.css
+++ b/demos/richtext-editor/src/themes/PlaygroundEditorTheme.css
@@ -45,6 +45,9 @@
   margin: 0;
   text-transform: uppercase;
 }
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
@@ -96,10 +99,9 @@
   margin: 0;
   margin-top: 8px;
   margin-bottom: 8px;
-  tab-size: 2;
-  /* white-space: pre; */
   overflow-x: auto;
   position: relative;
+  tab-size: 2;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -117,23 +119,26 @@
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
-  max-width: 100%;
   overflow-y: scroll;
+  overflow-x: scroll;
   table-layout: fixed;
-  width: calc(100% - 25px);
+  width: max-content;
   margin: 30px 0;
 }
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
 .PlaygroundEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }
 .PlaygroundEditorTheme__tableCell {
   border: 1px solid #bbb;
+  width: 75px;
   min-width: 75px;
   vertical-align: top;
   text-align: start;
   padding: 6px 8px;
   position: relative;
-  cursor: default;
   outline: none;
 }
 .PlaygroundEditorTheme__tableCellSortedIndicator {
@@ -182,7 +187,7 @@
   width: 20px;
   background-color: #eee;
   height: 100%;
-  right: 0;
+  right: -25px;
   animation: table-controls 0.2s ease;
   border: 0;
   cursor: pointer;
@@ -277,41 +282,35 @@
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ul {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__listItem {
@@ -431,3 +430,32 @@
 .PlaygroundEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
diff --git a/demos/richtext-editor/src/themes/PlaygroundEditorTheme.js b/demos/richtext-editor/src/themes/PlaygroundEditorTheme.js
index 561ad03d..ffc3adf7 100644
--- a/demos/richtext-editor/src/themes/PlaygroundEditorTheme.js
+++ b/demos/richtext-editor/src/themes/PlaygroundEditorTheme.js
@@ -6,7 +6,6 @@
  *
  */
 
-
 import './PlaygroundEditorTheme.css';
 
 const theme = {
@@ -58,6 +57,7 @@ const theme = {
     h5: 'PlaygroundEditorTheme__h5',
     h6: 'PlaygroundEditorTheme__h6',
   },
+  hr: 'PlaygroundEditorTheme__hr',
   image: 'editor-image',
   link: 'PlaygroundEditorTheme__link',
   list: {
diff --git a/demos/sveltekit/src/global.css b/demos/sveltekit/src/global.css
index 1f8a5266..36d43125 100644
--- a/demos/sveltekit/src/global.css
+++ b/demos/sveltekit/src/global.css
@@ -1655,26 +1655,6 @@ button.item.dropdown-item-active i {
   opacity: 1;
 }
 
-hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1em 0;
-  cursor: pointer;
-}
-
-hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: #ccc;
-  line-height: 2px;
-}
-
-hr.selected {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-
 .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
diff --git a/demos/sveltekit/src/themes/PlaygroundEditorTheme.css b/demos/sveltekit/src/themes/PlaygroundEditorTheme.css
index f963ef24..4e5b551e 100644
--- a/demos/sveltekit/src/themes/PlaygroundEditorTheme.css
+++ b/demos/sveltekit/src/themes/PlaygroundEditorTheme.css
@@ -45,6 +45,9 @@
   margin: 0;
   text-transform: uppercase;
 }
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
@@ -96,10 +99,9 @@
   margin: 0;
   margin-top: 8px;
   margin-bottom: 8px;
-  tab-size: 2;
-  /* white-space: pre; */
   overflow-x: auto;
   position: relative;
+  tab-size: 2;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -117,23 +119,26 @@
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
-  max-width: 100%;
   overflow-y: scroll;
+  overflow-x: scroll;
   table-layout: fixed;
-  width: calc(100% - 25px);
+  width: max-content;
   margin: 30px 0;
 }
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
 .PlaygroundEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }
 .PlaygroundEditorTheme__tableCell {
   border: 1px solid #bbb;
+  width: 75px;
   min-width: 75px;
   vertical-align: top;
   text-align: start;
   padding: 6px 8px;
   position: relative;
-  cursor: default;
   outline: none;
 }
 .PlaygroundEditorTheme__tableCellSortedIndicator {
@@ -182,13 +187,13 @@
   width: 20px;
   background-color: #eee;
   height: 100%;
-  right: 0;
+  right: -25px;
   animation: table-controls 0.2s ease;
   border: 0;
   cursor: pointer;
 }
 .PlaygroundEditorTheme__tableAddColumns:after {
-  background-image: url(/images/icons/plus.svg);
+  background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -216,7 +221,7 @@
   cursor: pointer;
 }
 .PlaygroundEditorTheme__tableAddRows:after {
-  background-image: url(/images/icons/plus.svg);
+  background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -277,41 +282,35 @@
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ul {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__listItem {
@@ -431,3 +430,32 @@
 .PlaygroundEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
diff --git a/demos/sveltekit/src/themes/PlaygroundEditorTheme.js b/demos/sveltekit/src/themes/PlaygroundEditorTheme.js
index 561ad03d..ffc3adf7 100644
--- a/demos/sveltekit/src/themes/PlaygroundEditorTheme.js
+++ b/demos/sveltekit/src/themes/PlaygroundEditorTheme.js
@@ -6,7 +6,6 @@
  *
  */
 
-
 import './PlaygroundEditorTheme.css';
 
 const theme = {
@@ -58,6 +57,7 @@ const theme = {
     h5: 'PlaygroundEditorTheme__h5',
     h6: 'PlaygroundEditorTheme__h6',
   },
+  hr: 'PlaygroundEditorTheme__hr',
   image: 'editor-image',
   link: 'PlaygroundEditorTheme__link',
   list: {
diff --git a/packages/svelte-lexical/src/global.css b/packages/svelte-lexical/src/global.css
index 9d6de068..122c1d5d 100644
--- a/packages/svelte-lexical/src/global.css
+++ b/packages/svelte-lexical/src/global.css
@@ -1655,26 +1655,6 @@ button.item.dropdown-item-active i {
   opacity: 1;
 }
 
-hr {
-  padding: 2px 2px;
-  border: none;
-  margin: 1em 0;
-  cursor: pointer;
-}
-
-hr:after {
-  content: '';
-  display: block;
-  height: 2px;
-  background-color: #ccc;
-  line-height: 2px;
-}
-
-hr.selected {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-
 .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
diff --git a/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleComponent.svelte b/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleComponent.svelte
index 5ffc5650..6604630b 100644
--- a/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleComponent.svelte
+++ b/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleComponent.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import {mergeRegister} from '@lexical/utils';
+  import {
+    addClassNamesToElement,
+    mergeRegister,
+    removeClassNamesFromElement,
+  } from '@lexical/utils';
   import {
     $getNodeByKey as getNodeByKey,
     $getSelection as getSelection,
@@ -21,9 +25,14 @@
   export let nodeKey: string;
   export let self: HTMLElement;
   let isSelected = createNodeSelectionStore(editor, nodeKey);
+  const isSelectedClassName = 'selected';
 
   $: {
-    self.className = $isSelected ? 'selected' : '';
+    if ($isSelected) {
+      addClassNamesToElement(self, isSelectedClassName);
+    } else {
+      removeClassNamesFromElement(self, isSelectedClassName);
+    }
   }
 
   function onDelete(event: KeyboardEvent) {
diff --git a/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleNode.ts b/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleNode.ts
index b455a018..25d750a1 100644
--- a/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleNode.ts
+++ b/packages/svelte-lexical/src/lib/core/plugins/HorizontalRuleNode.ts
@@ -10,6 +10,7 @@ import type {
 } from 'lexical';
 import {createCommand, DecoratorNode, $applyNodeReplacement} from 'lexical';
 import HorizontalRuleComponent from './HorizontalRuleComponent.svelte';
+import {addClassNamesToElement} from '@lexical/utils';
 
 export type SerializedHorizontalRuleNode = SerializedLexicalNode;
 
@@ -57,8 +58,9 @@ export class HorizontalRuleNode extends DecoratorNode<unknown> {
     return {element: document.createElement('hr')};
   }
 
-  createDOM(editorConfig: EditorConfig, editor: LexicalEditor): HTMLElement {
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
     const hr = document.createElement('hr');
+    addClassNamesToElement(hr, config.theme.hr);
 
     new HorizontalRuleComponent({
       target: hr,
diff --git a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
index f963ef24..4e5b551e 100644
--- a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
+++ b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
@@ -45,6 +45,9 @@
   margin: 0;
   text-transform: uppercase;
 }
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
 .PlaygroundEditorTheme__textBold {
   font-weight: bold;
 }
@@ -96,10 +99,9 @@
   margin: 0;
   margin-top: 8px;
   margin-bottom: 8px;
-  tab-size: 2;
-  /* white-space: pre; */
   overflow-x: auto;
   position: relative;
+  tab-size: 2;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -117,23 +119,26 @@
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
-  max-width: 100%;
   overflow-y: scroll;
+  overflow-x: scroll;
   table-layout: fixed;
-  width: calc(100% - 25px);
+  width: max-content;
   margin: 30px 0;
 }
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
 .PlaygroundEditorTheme__tableSelected {
   outline: 2px solid rgb(60, 132, 244);
 }
 .PlaygroundEditorTheme__tableCell {
   border: 1px solid #bbb;
+  width: 75px;
   min-width: 75px;
   vertical-align: top;
   text-align: start;
   padding: 6px 8px;
   position: relative;
-  cursor: default;
   outline: none;
 }
 .PlaygroundEditorTheme__tableCellSortedIndicator {
@@ -182,13 +187,13 @@
   width: 20px;
   background-color: #eee;
   height: 100%;
-  right: 0;
+  right: -25px;
   animation: table-controls 0.2s ease;
   border: 0;
   cursor: pointer;
 }
 .PlaygroundEditorTheme__tableAddColumns:after {
-  background-image: url(/images/icons/plus.svg);
+  background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -216,7 +221,7 @@
   cursor: pointer;
 }
 .PlaygroundEditorTheme__tableAddRows:after {
-  background-image: url(/images/icons/plus.svg);
+  background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -277,41 +282,35 @@
 .PlaygroundEditorTheme__ol1 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol2 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol3 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol4 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: upper-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ol5 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-type: lower-roman;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__ul {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
   list-style-position: outside;
 }
 .PlaygroundEditorTheme__listItem {
@@ -431,3 +430,32 @@
 .PlaygroundEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+.PlaygroundEditorTheme__autocomplete {
+  color: #ccc;
+}
+.PlaygroundEditorTheme__hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+.PlaygroundEditorTheme__hr.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
diff --git a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
index 938f247c..ffc3adf7 100644
--- a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
+++ b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
@@ -57,6 +57,7 @@ const theme = {
     h5: 'PlaygroundEditorTheme__h5',
     h6: 'PlaygroundEditorTheme__h6',
   },
+  hr: 'PlaygroundEditorTheme__hr',
   image: 'editor-image',
   link: 'PlaygroundEditorTheme__link',
   list: {