@37signals/lexxy 0.1.25-beta → 0.1.27-beta

package/README.md

@@ -23,7 +23,7 @@ A modern rich text editor for Rails.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'lexxy', '~> 0.1.23.beta' # Need to specify the version since it's a pre-release
+gem 'lexxy', '~> 0.1.26.beta' # Need to specify the version since it's a pre-release
 ```
 
 And then execute:

package/dist/lexxy.esm.js

@@ -10,16 +10,17 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
-import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
+import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
-import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableNode, TableCellNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
+import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { DirectUpload } from '@rails/activestorage';
+import { $getNearestNodeOfType } from '@lexical/utils';
 import { marked } from 'marked';
 
 // Configure Prism for manual highlighting mode
@@ -145,6 +146,93 @@ function hasHighlightStyles(cssOrStyles) {
   return !!(styles.color || styles["background-color"])
 }
 
+function handleRollingTabIndex(elements, event) {
+  const previousActiveElement = document.activeElement;
+
+  if (elements.includes(previousActiveElement)) {
+    const finder = new NextElementFinder(elements, event.key);
+
+    if (finder.selectNext(previousActiveElement)) {
+      event.preventDefault();
+    }
+  }
+}
+
+class NextElementFinder {
+  constructor(elements, key) {
+    this.elements = elements;
+    this.key = key;
+  }
+
+  selectNext(fromElement) {
+    const nextElement = this.#findNextElement(fromElement);
+
+    if (nextElement) {
+      const inactiveElements = this.elements.filter(element => element !== nextElement);
+      this.#unsetTabIndex(inactiveElements);
+      this.#focusWithActiveTabIndex(nextElement);
+      return true
+    }
+
+    return false
+  }
+
+  #findNextElement(fromElement) {
+    switch (this.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        return this.#findNextSibling(fromElement)
+
+      case "ArrowLeft":
+      case "ArrowUp":
+        return this.#findPreviousSibling(fromElement)
+
+      case "Home":
+        return this.#findFirst()
+
+      case "End":
+        return this.#findLast()
+    }
+  }
+
+  #findFirst(elements = this.elements) {
+    return elements.find(isActiveAndVisible)
+  }
+
+  #findLast(elements = this.elements) {
+    return elements.findLast(isActiveAndVisible)
+  }
+
+  #findNextSibling(element) {
+    const afterElements = this.elements.slice(this.#indexOf(element) + 1);
+    return this.#findFirst(afterElements)
+  }
+
+  #findPreviousSibling(element) {
+    const beforeElements = this.elements.slice(0, this.#indexOf(element));
+    return this.#findLast(beforeElements)
+  }
+
+  #indexOf(element) {
+    return this.elements.indexOf(element)
+  }
+
+  #focusWithActiveTabIndex(element) {
+    if (isActiveAndVisible(element)) {
+      element.tabIndex = 0;
+      element.focus();
+    }
+  }
+
+  #unsetTabIndex(elements) {
+    elements.forEach(element => element.tabIndex = -1);
+  }
+}
+
+function isActiveAndVisible(element) {
+  return element && !element.disabled && element.checkVisibility()
+}
+
 class LexicalToolbarElement extends HTMLElement {
   static observedAttributes = [ "connected" ]
 
@@ -156,17 +244,14 @@ class LexicalToolbarElement extends HTMLElement {
 
   connectedCallback() {
     requestAnimationFrame(() => this.#refreshToolbarOverflow());
-
-    this._resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
-    this._resizeObserver.observe(this);
+    this.setAttribute("role", "toolbar");
+    this.#installResizeObserver();
   }
 
   disconnectedCallback() {
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = null;
-    }
+    this.#uninstallResizeObserver();
     this.#unbindHotkeys();
+    this.#unbindFocusListeners();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -180,11 +265,12 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor = editorElement.editor;
     this.#bindButtons();
     this.#bindHotkeys();
-    this.#setTabIndexValues();
+    this.#resetTabIndexValues();
     this.#setItemPositionValues();
     this.#monitorSelectionChanges();
     this.#monitorHistoryChanges();
     this.#refreshToolbarOverflow();
+    this.#bindFocusListeners();
 
     this.toggleAttribute("connected", true);
   }
@@ -194,24 +280,39 @@ class LexicalToolbarElement extends HTMLElement {
     this.connectedCallback();
   }
 
+  #installResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
+    this.resizeObserver.observe(this);
+  }
+
+  #uninstallResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
   #bindButtons() {
     this.addEventListener("click", this.#handleButtonClicked.bind(this));
   }
 
-  #handleButtonClicked({ target }) {
-    this.#handleTargetClicked(target, "[data-command]", this.#dispatchButtonCommand.bind(this));
+  #handleButtonClicked(event) {
+    this.#handleTargetClicked(event, "[data-command]", this.#dispatchButtonCommand.bind(this));
   }
 
-  #handleTargetClicked(target, selector, callback) {
-    const button = target.closest(selector);
+  #handleTargetClicked(event, selector, callback) {
+    const button = event.target.closest(selector);
     if (button) {
-      callback(button);
+      callback(event, button);
     }
   }
 
-  #dispatchButtonCommand(button) {
-    const { command, payload } = button.dataset;
-    this.editor.dispatchCommand(command, payload);
+  #dispatchButtonCommand(event, { dataset: { command, payload } }) {
+    const isKeyboard = event instanceof PointerEvent && event.pointerId === -1;
+
+    this.editor.update(() => {
+      this.editor.dispatchCommand(command, payload);
+    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined } );
   }
 
   #bindHotkeys() {
@@ -246,9 +347,38 @@ class LexicalToolbarElement extends HTMLElement {
     return [ ...modifiers, pressedKey ].join("+")
   }
 
-  #setTabIndexValues() {
-    this.#buttons.forEach((button) => {
-      button.setAttribute("tabindex", 0);
+  #bindFocusListeners() {
+    this.editorElement.addEventListener("lexxy:focus", this.#handleFocus);
+    this.editorElement.addEventListener("lexxy:blur", this.#handleFocusOut);
+    this.addEventListener("focusout", this.#handleFocusOut);
+    this.addEventListener("keydown", this.#handleKeydown);
+  }
+
+  #unbindFocusListeners() {
+    this.editorElement.removeEventListener("lexxy:focus", this.#handleFocus);
+    this.editorElement.removeEventListener("lexxy:blur", this.#handleFocusOut);
+    this.removeEventListener("focusout", this.#handleFocusOut);
+    this.removeEventListener("keydown", this.#handleKeydown);
+  }
+
+  #handleFocus = () => {
+    this.#resetTabIndexValues();
+    this.#focusableItems[0].tabIndex = 0;
+  }
+
+  #handleFocusOut = () => {
+    if (!this.contains(document.activeElement)) {
+      this.#resetTabIndexValues();
+    }
+  }
+
+  #handleKeydown = (event) => {
+    handleRollingTabIndex(this.#focusableItems, event);
+  }
+
+  #resetTabIndexValues() {
+    this.#focusableItems.forEach((button) => {
+      button.tabIndex = -1;
     });
   }
 
@@ -358,6 +488,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     const isOverflowing = this.#overflowMenu.children.length > 0;
     this.toggleAttribute("overflowing", isOverflowing);
+    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
   }
 
   #compactMenu() {
@@ -409,6 +540,10 @@ class LexicalToolbarElement extends HTMLElement {
     return Array.from(this.querySelectorAll(":scope > button"))
   }
 
+  get #focusableItems() {
+    return Array.from(this.querySelectorAll(":scope button, :scope > details > summary"))
+  }
+
   get #toolbarItems() {
     return Array.from(this.querySelectorAll(":scope > *:not(.lexxy-editor__toolbar-overflow)"))
   }
@@ -1386,7 +1521,7 @@ class CommandDispatcher {
   }
 
   #registerKeyboardCommands() {
-    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleListIndentation.bind(this), COMMAND_PRIORITY_NORMAL);
+    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
   }
 
   #registerDragAndDropHandlers() {
@@ -1436,18 +1571,28 @@ class CommandDispatcher {
     this.editor.focus();
   }
 
-  #handleListIndentation(event) {
+  #handleTabKey(event) {
     if (this.selection.isInsideList) {
-      event.preventDefault();
-      if (event.shiftKey) {
-        return this.editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
-      } else {
-        return this.editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
-      }
+      return this.#handleTabForList(event)
+    } else if (this.selection.isInsideCodeBlock) {
+      return this.#handleTabForCode()
     }
     return false
   }
 
+  #handleTabForList(event) {
+    if (event.shiftKey && !this.selection.isIndentedList) return false
+
+    event.preventDefault();
+    const command = event.shiftKey? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND;
+    return this.editor.dispatchCommand(command)
+  }
+
+  #handleTabForCode() {
+    const selection = $getSelection();
+    return $isRangeSelection(selection) && selection.isCollapsed()
+  }
+
   // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
   #toggleLink(url) {
     this.editor.update(() => {
@@ -1500,26 +1645,19 @@ class Selection {
     this.#containEditorFocus();
   }
 
-  clear() {
-    this.current = null;
-  }
-
   set current(selection) {
-    if ($isNodeSelection(selection)) {
-      this.editor.getEditorState().read(() => {
-        this._current = $getSelection();
-        this.#syncSelectedClasses();
-      });
-    } else {
-      this.editor.update(() => {
-        this.#syncSelectedClasses();
-        this._current = null;
-      });
-    }
+    this.editor.update(() => {
+      this.#syncSelectedClasses();
+    });
   }
 
-  get current() {
-    return this._current
+  get hasNodeSelection() {
+    let result = false;
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      result = selection !== null && $isNodeSelection(selection);
+    });
+    return result
   }
 
   get cursorPosition() {
@@ -1624,6 +1762,29 @@ class Selection {
     return getNearestListItemNode(anchorNode) !== null
   }
 
+  get isIndentedList() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      const closestListNode = $getNearestNodeOfType(node, ListNode);
+      if (closestListNode && $getListDepth(closestListNode) > 1) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  get isInsideCodeBlock() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    return $getNearestNodeOfType(anchorNode, CodeNode) !== null
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -1689,18 +1850,18 @@ class Selection {
   }
 
   get #currentlySelectedKeys() {
-    if (this._currentlySelectedKeys) { return this._currentlySelectedKeys }
+    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
-    this._currentlySelectedKeys = new Set();
+    this.currentlySelectedKeys = new Set();
 
     const selection = $getSelection();
     if (selection && $isNodeSelection(selection)) {
       for (const node of selection.getNodes()) {
-        this._currentlySelectedKeys.add(node.getKey());
+        this.currentlySelectedKeys.add(node.getKey());
       }
     }
 
-    return this._currentlySelectedKeys
+    return this.currentlySelectedKeys
   }
 
   #processSelectionChangeCommands() {
@@ -1830,7 +1991,7 @@ class Selection {
     this.#highlightNewItems();
 
     this.previouslySelectedKeys = this.#currentlySelectedKeys;
-    this._currentlySelectedKeys = null;
+    this.currentlySelectedKeys = null;
   }
 
   #clearPreviouslyHighlightedItems() {
@@ -1852,7 +2013,7 @@ class Selection {
   }
 
   async #selectPreviousNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.nodeBeforeCursor);
@@ -1860,7 +2021,7 @@ class Selection {
   }
 
   async #selectNextNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.nodeAfterCursor);
@@ -1868,7 +2029,7 @@ class Selection {
   }
 
   async #selectPreviousTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.topLevelNodeBeforeCursor);
@@ -1876,7 +2037,7 @@ class Selection {
   }
 
   async #selectNextTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.topLevelNodeAfterCursor);
@@ -1885,10 +2046,9 @@ class Selection {
 
   async #withCurrentNode(fn) {
     await nextFrame();
-    if (this.current) {
+    if (this.hasNodeSelection) {
       this.editor.update(() => {
-        this.clear();
-        fn(this.current.getNodes()[0]);
+        fn($getSelection().getNodes()[0]);
         this.editor.focus();
       });
     }
@@ -2133,6 +2293,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(TableCellNode, (node) => {
+    if (node.getBackgroundColor() === null) {
+      node.setBackgroundColor("");
+    }
+  })
+}
+
 class CustomActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "custom_action_text_attachment"
@@ -2781,8 +2952,8 @@ class Contents {
     let focusNode = null;
 
     this.editor.update(() => {
-      if ($isNodeSelection(this.#selection.current)) {
-        const nodesToRemove = this.#selection.current.getNodes();
+      if (this.#selection.hasNodeSelection) {
+        const nodesToRemove = $getSelection().getNodes();
         if (nodesToRemove.length === 0) return
 
         focusNode = this.#findAdjacentNodeTo(nodesToRemove);
@@ -2794,7 +2965,6 @@ class Contents {
 
     this.editor.update(() => {
       this.#selectAfterDeletion(focusNode);
-      this.#selection.clear();
       this.editor.focus();
     });
   }
@@ -3820,6 +3990,8 @@ class LexicalEditorElement extends HTMLElement {
     registerTablePlugin(this.editor);
     this.tableHandler = createElement("lexxy-table-handler");
     this.append(this.tableHandler);
+
+    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor));
   }
 
   #registerCodeHiglightingComponents() {
@@ -3971,8 +4143,6 @@ class ToolbarDropdown extends HTMLElement {
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
-
-    this.#setTabIndexValues();
   }
 
   disconnectedCallback() {
@@ -4000,14 +4170,14 @@ class ToolbarDropdown extends HTMLElement {
     }
   }
 
-  #handleOpen(trigger) {
-    this.trigger = trigger;
+  #handleOpen() {
     this.#interactiveElements[0].focus();
     this.#setupClickOutsideHandler();
+
+    this.#resetTabIndexValues();
   }
 
   #handleClose() {
-    this.trigger = null;
     this.#removeClickOutsideHandler();
     this.editor.focus();
   }
@@ -4037,16 +4207,20 @@ class ToolbarDropdown extends HTMLElement {
     }
   }
 
-  async #setTabIndexValues() {
+  async #resetTabIndexValues() {
     await nextFrame();
-    this.#interactiveElements.forEach((element) => {
-      element.setAttribute("tabindex", 0);
+    this.#buttons.forEach((element, index) => {
+      element.setAttribute("tabindex", index === 0 ? 0 : "-1");
     });
   }
 
   get #interactiveElements() {
     return Array.from(this.querySelectorAll("button, input"))
   }
+
+  get #buttons() {
+    return Array.from(this.querySelectorAll("button"))
+  }
 }
 
 class LinkDropdown extends ToolbarDropdown {
@@ -4242,15 +4416,19 @@ class TableHandler extends HTMLElement {
     return $getTableColumnIndexFromTableCellNode(currentCell)
   }
 
+  get #tableHandlerButtons() {
+    return Array.from(this.buttonsContainer.querySelectorAll("button, details > summary"))
+  }
+
   #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown.bind(this), COMMAND_PRIORITY_HIGH);
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown, COMMAND_PRIORITY_HIGH);
   }
 
   #unregisterKeyboardShortcuts() {
     this.unregisterKeyboardShortcuts();
   }
 
-  #handleKeyDown(event) {
+  #handleKeyDown = (event) => {
     if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
       const firstButton = this.buttonsContainer?.querySelector("button, [tabindex]:not([tabindex='-1'])");
       this.#setFocusStateOnSelectedCell();
@@ -4268,6 +4446,14 @@ class TableHandler extends HTMLElement {
     }
   }
 
+  #handleTableHandlerKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.#editor.focus();
+    } else {
+      handleRollingTabIndex(this.#tableHandlerButtons, event);
+    }
+  }
+
   #setUpButtons() {
     this.buttonsContainer = createElement("div", {
       className: "lexxy-table-handle-buttons"
@@ -4278,6 +4464,7 @@ class TableHandler extends HTMLElement {
 
     this.moreMenu = this.#createMoreMenu();
     this.buttonsContainer.appendChild(this.moreMenu);
+    this.buttonsContainer.addEventListener("keydown", this.#handleTableHandlerKeydown);
 
     this.#editorElement.appendChild(this.buttonsContainer);
   }
@@ -4373,6 +4560,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;
 

package/dist/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,85 +378,12 @@
   }
 }
 
-/* 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);
-        }
-      }
-    }
-  }
-
-  .lexxy-editor__table-edit {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 0;
-
-    button {
-
-    }
-  }
-}
-
 /* Table handle buttons
 /* -------------------------------------------------------------------------- */
 
 :where(.lexxy-table-handle-buttons) {
   --button-size: 2.5lh;
+
   color: var(--lexxy-color-ink-inverted);
   display: none;
   flex-direction: row;
@@ -463,7 +392,7 @@
   line-height: 1;
   position: absolute;
   transform: translate(-50%, -120%);
-  z-index: 10;
+  z-index: 2;
 
   .lexxy-table-control {
     align-items: center;
@@ -475,7 +404,8 @@
     padding: 2px;
     white-space: nowrap;
 
-    button {
+    button,
+    summary {
       aspect-ratio: 1 / 1;
       align-items: center;
       background-color: transparent;
@@ -487,13 +417,22 @@
       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);
+      }
 
-      &:hover,
+      &: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 {
@@ -510,33 +449,13 @@
 
   .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 {
@@ -553,7 +472,7 @@
         border-radius: 0.75ch;
         display: flex;
         flex-direction: column;
-        padding: 2px;
+        padding: 0.25ch;
       }
 
       button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.25-beta",
+  "version": "0.1.27-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -25,7 +25,7 @@
   "scripts": {
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
-    "watch": "NODE_ENV=development rollup -wc --watch.onEnd=\"rails restart\"",
+    "watch": "rollup -wc --watch.onEnd=\"rails restart\"",
     "lint": "eslint",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"