Use theme class for HR styles

facebook · May 12, 2024 · 0947e73 · 0947e73
1 parent e318f94
commit 0947e73
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 20 deletions.
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
@@ -1726,26 +1726,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/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-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/packages/lexical-playground/src/themes/PlaygroundEditorTheme.ts b/packages/lexical-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',