minor: update latest theme from lexical

umaranis · Dec 9, 2024 · 30de679 · 30de679
1 parent e447e1e
commit 30de679
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 29 deletions.
diff --git a/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css b/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css
@@ -116,15 +116,26 @@
   text-align: right;
   min-width: 25px;
 }
+.PlaygroundEditorTheme__tableScrollableWrapper {
+  overflow-x: auto;
+  margin: 0px 25px 30px 0px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper > .PlaygroundEditorTheme__table {
+  /* Remove the table's margin and put it on the wrapper */
+  margin: 0;
+}
 .PlaygroundEditorTheme__table {
   border-collapse: collapse;
   border-spacing: 0;
   overflow-y: scroll;
   overflow-x: scroll;
   table-layout: fixed;
-  width: max-content;
+  width: fit-content;
   margin: 0px 25px 30px 0px;
 }
+.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+  background-color: #f2f5fb;
+}
 .PlaygroundEditorTheme__tableSelection *::selection {
   background-color: transparent;
 }
@@ -134,23 +145,12 @@
 .PlaygroundEditorTheme__tableCell {
   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;
@@ -165,21 +165,18 @@
   text-align: start;
 }
 .PlaygroundEditorTheme__tableCellSelected {
-  background-color: #c9dbf0;
+  caret-color: transparent;
 }
-.PlaygroundEditorTheme__tableCellPrimarySelected {
-  border: 2px solid rgb(60, 132, 244);
-  display: block;
-  height: calc(100% - 2px);
+.PlaygroundEditorTheme__tableCellSelected::after {
   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;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: highlight;
+  mix-blend-mode: multiply;
+  content: '';
+  pointer-events: none;
 }
 .PlaygroundEditorTheme__tableAddColumns {
   position: absolute;
@@ -451,3 +448,8 @@
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
+
+.PlaygroundEditorTheme__specialText {
+  background-color: yellow;
+  font-weight: bold;
+}
diff --git a/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.ts b/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.ts
@@ -90,18 +90,17 @@ const theme: EditorThemeClasses = {
   paragraph: 'PlaygroundEditorTheme__paragraph',
   quote: 'PlaygroundEditorTheme__quote',
   rtl: 'PlaygroundEditorTheme__rtl',
+  specialText: 'PlaygroundEditorTheme__specialText',
   table: 'PlaygroundEditorTheme__table',
   tableCell: 'PlaygroundEditorTheme__tableCell',
   tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
   tableCellActionButtonContainer:
     'PlaygroundEditorTheme__tableCellActionButtonContainer',
-  tableCellEditing: 'PlaygroundEditorTheme__tableCellEditing',
   tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
-  tableCellPrimarySelected: 'PlaygroundEditorTheme__tableCellPrimarySelected',
   tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
   tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
-  tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
-  tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
+  tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+  tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
   tableSelected: 'PlaygroundEditorTheme__tableSelected',
   tableSelection: 'PlaygroundEditorTheme__tableSelection',
   text: {