Unstyled table header cells

app/assets/javascript/lexxy.js

@@ -8512,6 +8512,17 @@ class Selection {
   }
 }
 
+// Prevent the hardcoded background color
+// A background color value is set by Lexical if background is null:
+// https://github.com/facebook/lexical/blob/5bbbe849bd229e1db0e7b536e6a919520ada7bb2/packages/lexical-table/src/LexicalTableCellNode.ts#L187
+function registerHeaderBackgroundTransform(editor) {
+  return editor.registerNodeTransform(xe, (node) => {
+    if (node.getBackgroundColor() === null) {
+      node.setBackgroundColor("");
+    }
+  })
+}
+
 class CustomActionTextAttachmentNode extends ki {
   static getType() {
     return "custom_action_text_attachment"
@@ -10271,6 +10282,8 @@ class LexicalEditorElement extends HTMLElement {
     Nn(this.editor);
     this.tableHandler = createElement("lexxy-table-handler");
     this.append(this.tableHandler);
+
+    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor));
   }
 
   #registerCodeHiglightingComponents() {
@@ -10839,6 +10852,7 @@ class TableHandler extends HTMLElement {
     const container = createElement("details", {
       className: "lexxy-table-control lexxy-table-control__more-menu"
     });
+    container.setAttribute("name", "lexxy-dropdown");
 
     container.tabIndex = -1;
 

app/assets/stylesheets/lexxy-editor.css

@@ -54,15 +54,17 @@
   }
 
   table {
-    .table-cell--selected {
-      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
-    }
+    th, td {
+      &.table-cell--selected {
+        background-color: var(--lexxy-color-table-cell-selected-bg);
+      }
 
-    .lexxy-content__table-cell--selected {
-      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
-      border-color: var(--lexxy-color-table-cell-selected-border) !important;
+      &.lexxy-content__table-cell--selected {
+        background-color: var(--lexxy-color-table-cell-selected-bg);
+        border-color: var(--lexxy-color-table-cell-selected-border);
+      }
     }
-  
+
     &.lexxy-content__table--selection {
       ::selection {
         background: transparent;
@@ -376,69 +378,6 @@
   }
 }
 
-/* Table dropdown
-/* -------------------------------------------------------------------------- */
-
-:where(lexxy-table-dropdown) {
-  display: flex;
-  flex-direction: column;
-  gap: 1ch;
-
-  .lexxy-editor__table-create {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 0;
-
-    .lexxy-editor__table-buttons {
-      background-color: var(--lexxy-color-ink-lighter);
-      display: flex;
-      flex-direction: column;
-      gap: 1px;
-      padding: 1px;
-
-      div {
-        display: flex;
-        flex-direction: row;
-        gap: 1px;
-      }
-
-      button {
-        aspect-ratio: 1.5 / 1;
-        border: 0;
-        border-radius: 0;
-        color: var(--lexxy-color-ink);
-        font-family: var(--lexxy-font-base);
-        font-size: var(--lexxy-text-small);
-        font-weight: normal;
-        inline-size: 4ch;
-        margin: 0;
-
-        &.active {
-          background-color: var(--lexxy-color-ink-lightest);
-        }
-      }
-    }
-
-    label {
-      align-items: center;
-      display: flex;
-      gap: 0.5ch;
-      padding: 0.5ch 0;
-      margin-block-start: 1ch;
-    }
-
-    &:has(input[type="checkbox"]:checked) {
-      .lexxy-editor__table-buttons {
-        div:first-child button,
-        button:first-child {
-          filter: brightness(0.95);
-        }
-      }
-    }
-  }
-}
-
 /* Table handle buttons
 /* -------------------------------------------------------------------------- */
 
@@ -453,7 +392,7 @@
   line-height: 1;
   position: absolute;
   transform: translate(-50%, -120%);
-  z-index: 10;
+  z-index: 2;
 
   .lexxy-table-control {
     align-items: center;
@@ -465,7 +404,8 @@
     padding: 2px;
     white-space: nowrap;
 
-    button {
+    button,
+    summary {
       aspect-ratio: 1 / 1;
       align-items: center;
       background-color: transparent;
@@ -477,14 +417,24 @@
       font-weight: bold;
       justify-content: center;
       line-height: 1;
+      list-style: none;
       min-block-size: var(--button-size);
       min-inline-size: var(--button-size);
       padding: 0;
+      user-select: none;
+      -webkit-user-select: none;
 
       &:hover {
         background-color: var(--lexxy-color-ink-medium);
       }
 
+      &:focus,
+      &:focus-visible {
+        background-color: var(--lexxy-color-ink-medium);
+        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
+        outline-offset: var(--lexxy-focus-ring-offset);
+      }
+
       svg {
         block-size: 1em;
         inline-size: 1em;
@@ -495,47 +445,17 @@
         display: none;
       }
     }
-
-    button,
-    summary {
-      &:focus,
-      &:focus-visible {
-        background-color: var(--lexxy-color-ink-medium);
-        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
-        outline-offset: var(--lexxy-focus-ring-offset);
-      }
-    }
   }
 
   .lexxy-table-control__more-menu {
     gap: 0;
-    padding: 2px;
+    padding: 0.25ch;
     position: relative;
 
     summary {
-      aspect-ratio: 1 / 1;
-      align-items: center;
-      background: transparent;
-      border-radius: var(--lexxy-radius);
-      border: 0;
-      box-sizing: border-box;
-      display: flex;
-      font-size: inherit;
-      justify-content: center;
-      list-style: none;
-      min-block-size: var(--button-size);
-      min-inline-size: var(--button-size);
-      padding: 0;
-      user-select: none;
-      -webkit-user-select: none;
-
       &::-webkit-details-marker {
         display: none;
       }
-
-      &:hover {
-        background: var(--lexxy-color-ink-medium);
-      }
     }
 
     .lexxy-table-control__more-menu-details {
@@ -552,7 +472,7 @@
         border-radius: 0.75ch;
         display: flex;
         flex-direction: column;
-        padding: 2px;
+        padding: 0.25ch;
       }
 
       button {

src/elements/editor.js

@@ -15,6 +15,7 @@ import { HorizontalDividerNode } from "../nodes/horizontal_divider_node"
 import { CommandDispatcher } from "../editor/command_dispatcher"
 import Selection from "../editor/selection"
 import { createElement, dispatch, generateDomId, parseHtml, sanitize } from "../helpers/html_helper"
+import { registerHeaderBackgroundTransform } from "../helpers/table_helper"
 import LexicalToolbar from "./toolbar"
 import Contents from "../editor/contents"
 import Clipboard from "../editor/clipboard"
@@ -338,6 +339,8 @@ export default class LexicalEditorElement extends HTMLElement {
     registerTablePlugin(this.editor)
     this.tableHandler = createElement("lexxy-table-handler")
     this.append(this.tableHandler)
+
+    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor))
   }
 
   #registerCodeHiglightingComponents() {

src/elements/table_handler.js

@@ -200,6 +200,7 @@ export class TableHandler extends HTMLElement {
     const container = createElement("details", {
       className: "lexxy-table-control lexxy-table-control__more-menu"
     })
+    container.setAttribute("name", "lexxy-dropdown")
 
     container.tabIndex = -1
 

src/helpers/table_helper.js

@@ -0,0 +1,12 @@
+import { TableCellNode } from "@lexical/table"
+
+// Prevent the hardcoded background color
+// A background color value is set by Lexical if background is null:
+// https://github.com/facebook/lexical/blob/5bbbe849bd229e1db0e7b536e6a919520ada7bb2/packages/lexical-table/src/LexicalTableCellNode.ts#L187
+export function registerHeaderBackgroundTransform(editor) {
+  return editor.registerNodeTransform(TableCellNode, (node) => {
+    if (node.getBackgroundColor() === null) {
+      node.setBackgroundColor("")
+    }
+  })
+}