diff --git a/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css b/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css index 8ce7379..527085b 100644 --- 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 index 02e5ce3..ac54576 100644 --- 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: {