@37signals/lexxy 0.7.2-beta → 0.7.3-beta

package/dist/lexxy.esm.js

@@ -10,12 +10,12 @@ 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, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, 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, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, PASTE_TAG, CLEAR_HISTORY_COMMAND, $addUpdateTag, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, 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, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, $isParagraphNode, $insertNodes, $createLineBreakNode, PASTE_TAG, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, CLEAR_HISTORY_COMMAND, $addUpdateTag, 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, RichTextExtension, 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, TableNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableCellNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
+import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { createElement, createAttachmentFigure, isPreviewableImage, dispatchCustomEvent, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
 import { buildEditorFromExtensions } from '@lexical/extension';
@@ -146,6 +146,7 @@ function buildConfig() {
   return {
     ALLOWED_TAGS: ALLOWED_HTML_TAGS.concat(Lexxy.global.get("attachmentTagName")),
     ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
+    ADD_URI_SAFE_ATTR: [ "caption", "filename" ],
     SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
   }
 }
@@ -378,6 +379,8 @@ class LexicalToolbarElement extends HTMLElement {
     super();
     this.internals = this.attachInternals();
     this.internals.role = "toolbar";
+
+    this.#createEditorPromise();
   }
 
   connectedCallback() {
@@ -410,14 +413,26 @@ class LexicalToolbarElement extends HTMLElement {
     this.#refreshToolbarOverflow();
     this.#bindFocusListeners();
 
+    this.resolveEditorPromise(editorElement);
+
     this.toggleAttribute("connected", true);
   }
 
+  async getEditorElement() {
+    return this.editorElement || await this.editorPromise
+  }
+
   #reconnect() {
     this.disconnectedCallback();
     this.connectedCallback();
   }
 
+  #createEditorPromise() {
+    this.editorPromise = new Promise((resolve) => {
+      this.resolveEditorPromise = resolve;
+    });
+  }
+
   #installResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
     this.resizeObserver.observe(this);
@@ -486,28 +501,24 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindFocusListeners() {
-    this.editorElement.addEventListener("lexxy:focus", this.#handleFocus);
-    this.editorElement.addEventListener("lexxy:blur", this.#handleFocusOut);
-    this.addEventListener("focusout", this.#handleFocusOut);
+    this.editorElement.addEventListener("lexxy:focus", this.#handleEditorFocus);
+    this.editorElement.addEventListener("lexxy:blur", this.#handleEditorBlur);
     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.editorElement.removeEventListener("lexxy:focus", this.#handleEditorFocus);
+    this.editorElement.removeEventListener("lexxy:blur", this.#handleEditorBlur);
     this.removeEventListener("keydown", this.#handleKeydown);
   }
 
-  #handleFocus = () => {
-    this.#resetTabIndexValues();
+  #handleEditorFocus = () => {
     this.#focusableItems[0].tabIndex = 0;
   }
 
-  #handleFocusOut = () => {
-    if (!this.contains(document.activeElement)) {
-      this.#resetTabIndexValues();
-    }
+  #handleEditorBlur = () => {
+    this.#resetTabIndexValues();
+    this.#closeDropdowns();
   }
 
   #handleKeydown = (event) => {
@@ -521,11 +532,13 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorSelectionChanges() {
-    this.editor.registerUpdateListener(() => {
-      this.editor.getEditorState().read(() => {
+    this.editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        this.#closeDropdowns();
         this.#updateButtonStates();
-      });
-    });
+        return false
+      }, COMMAND_PRIORITY_HIGH);
   }
 
   #monitorHistoryChanges() {
@@ -614,11 +627,13 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #toolbarIsOverflowing() {
-    return this.scrollWidth > this.clientWidth
+    // Safari can report inconsistent clientWidth values on more than 100% window zoom level,
+    // that was affecting the toolbar overflow calculation. We're adding +1 to get around this issue.
+    return (this.scrollWidth - this.#overflow.clientWidth) > this.clientWidth + 1
   }
 
   #refreshToolbarOverflow = () => {
-    this.#resetToolbar();
+    this.#resetToolbarOverflow();
     this.#compactMenu();
 
     this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
@@ -644,7 +659,7 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #resetToolbar() {
+  #resetToolbarOverflow() {
     const items = Array.from(this.#overflowMenu.children);
     items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
 
@@ -666,6 +681,16 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
+  #closeDropdowns() {
+   this.#dropdowns.forEach((details) => {
+     details.open = false;
+   });
+ }
+
+  get #dropdowns() {
+    return this.querySelectorAll("details")
+  }
+
   get #overflow() {
     return this.querySelector(".lexxy-editor__toolbar-overflow")
   }
@@ -707,9 +732,8 @@ class LexicalToolbarElement extends HTMLElement {
           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
         </summary>
         <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-content">
-          <div data-button-group="color"></div>
-          <div data-button-group="background-color"></div>
-          <button data-command="removeHighlight" class="lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
+          <div class="lexxy-highlight-colors"></div>
+          <button data-command="removeHighlight" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
         </lexxy-highlight-dropdown>
       </details>
 
@@ -721,8 +745,8 @@ class LexicalToolbarElement extends HTMLElement {
           <form method="dialog">
             <input type="url" placeholder="Enter a URL…" class="input">
             <div class="lexxy-editor__toolbar-dropdown-actions">
-              <button type="submit" class="btn" value="link">Link</button>
-              <button type="button" class="btn" value="unlink">Unlink</button>
+              <button type="submit" class="lexxy-editor__toolbar-button" value="link">Link</button>
+              <button type="button" class="lexxy-editor__toolbar-button" value="unlink">Unlink</button>
             </div>
           </form>
         </lexxy-link-dropdown>
@@ -770,9 +794,9 @@ class LexicalToolbarElement extends HTMLElement {
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.2599 8.26531C15.9672 6.56386 13.1237 5.77629 10.2823 6.05535C7.4408 6.33452 4.80455 7.66079 2.88681 9.77605C1.32245 11.5016 0.326407 13.6516 0.0127834 15.9352C-0.105117 16.7939 0.608975 17.4997 1.47567 17.4997C2.34228 17.4997 3.02969 16.7915 3.19149 15.9401C3.47682 14.4379 4.17156 13.0321 5.212 11.8844C6.60637 10.3464 8.52287 9.38139 10.589 9.17839C12.655 8.97546 14.7227 9.54856 16.3897 10.7858C17.5237 11.6275 18.4165 12.7361 18.9991 13.9997H15.4063C14.578 13.9997 13.9066 14.6714 13.9063 15.4997C13.9063 16.3281 14.5779 16.9997 15.4063 16.9997H22.4063C23.2348 16.9997 23.9063 16.3281 23.9063 15.4997V8.49968C23.9061 7.67144 23.2346 6.99968 22.4063 6.99968C21.578 6.99968 20.9066 7.67144 20.9063 8.49968V11.0212C20.1897 9.9704 19.2984 9.03613 18.2599 8.26531Z"/></svg>
       </button>
 
-      <details class="lexxy-editor__toolbar-overflow">
+      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-overflow" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
-        <div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
+        <div class="lexxy-editor__toolbar-dropdown-content lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
       </details>
     `
   }
@@ -792,6 +816,8 @@ var theme = {
   tableCellSelected: "lexxy-content__table-cell--selected",
   tableSelection: "lexxy-content__table--selection",
   tableScrollableWrapper: "lexxy-content__table-wrapper",
+  tableCellHighlight: "lexxy-content__table-cell--highlight",
+  tableCellFocus: "lexxy-content__table-cell--focus",
   list: {
     nested: {
       listitem: "lexxy-nested-listitem",
@@ -1373,30 +1399,6 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 }
 
-class WrappedTableNode extends TableNode {
-  static clone(node) {
-    return new WrappedTableNode(node.__key)
-  }
-
-  exportDOM(editor) {
-    const superExport = super.exportDOM(editor);
-
-    return {
-      ...superExport,
-      after: (tableElement) => {
-        if (superExport.after) {
-          tableElement = superExport.after(tableElement);
-          const clonedTable = tableElement.cloneNode(true);
-          const wrappedTable = createElement("figure", { className: "lexxy-content__table-wrapper" }, clonedTable.outerHTML);
-          return wrappedTable
-        }
-
-        return tableElement
-      }
-    }
-  }
-}
-
 const COMMANDS = [
   "bold",
   "italic",
@@ -1414,13 +1416,6 @@ const COMMANDS = [
   "uploadAttachments",
 
   "insertTable",
-  "insertTableRowAbove",
-  "insertTableRowBelow",
-  "insertTableColumnAfter",
-  "insertTableColumnBefore",
-  "deleteTableRow",
-  "deleteTableColumn",
-  "deleteTable",
 
   "undo",
   "redo"
@@ -1529,9 +1524,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertHorizontalDivider() {
-    this.editor.update(() => {
-      this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    });
+    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
 
     this.editor.focus();
   }
@@ -1593,41 +1586,6 @@ class CommandDispatcher {
     this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
   }
 
-  dispatchInsertTableRowBelow() {
-    $insertTableRowAtSelection(true);
-  }
-
-  dispatchInsertTableRowAbove() {
-    $insertTableRowAtSelection(false);
-  }
-
-  dispatchInsertTableColumnAfter() {
-    $insertTableColumnAtSelection(true);
-  }
-
-  dispatchInsertTableColumnBefore() {
-    $insertTableColumnAtSelection(false);
-  }
-
-  dispatchDeleteTableRow() {
-    $deleteTableRowAtSelection();
-  }
-
-  dispatchDeleteTableColumn() {
-    $deleteTableColumnAtSelection();
-  }
-
-  dispatchDeleteTable() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const anchorNode = selection.anchor.getNode();
-      const tableNode = $findTableNode(anchorNode);
-      tableNode.remove();
-    });
-  }
-
   dispatchUndo() {
     this.editor.dispatchCommand(UNDO_COMMAND, undefined);
   }
@@ -1921,6 +1879,14 @@ class Selection {
     return $getNearestNodeOfType(anchorNode, CodeNode) !== null
   }
 
+  get isTableCellSelected() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    return $getNearestNodeOfType(anchorNode, TableCellNode) !== null
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -2433,17 +2399,6 @@ function sanitize(html) {
   return DOMPurify.sanitize(html, buildConfig())
 }
 
-// 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("");
-    }
-  })
-}
-
 function dasherize(value) {
   return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
 }
@@ -2467,6 +2422,10 @@ function filterMatches(text, potentialMatch) {
   return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
 }
 
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 class EditorConfiguration {
   #editorElement
   #config
@@ -2908,15 +2867,14 @@ class Contents {
     new FormatEscaper(editorElement).monitor();
   }
 
-  insertHtml(html) {
+  insertHtml(html, { tag } = {}) {
     this.editor.update(() => {
       const selection = $getSelection();
-
       if (!$isRangeSelection(selection)) return
 
       const nodes = $generateNodesFromDOM(this.editor, parseHtml(html));
       selection.insertNodes(nodes);
-    });
+    }, { tag });
   }
 
   insertAtCursor(node) {
@@ -3719,14 +3677,14 @@ class Clipboard {
 
   #pasteMarkdown(text) {
     const html = marked(text);
-    this.contents.insertHtml(html);
+    this.contents.insertHtml(html, { tag: [ PASTE_TAG ] });
   }
 
   #pasteRichText(clipboardData) {
     this.editor.update(() => {
       const selection = $getSelection();
       $insertDataTransferForRichText(clipboardData, selection, this.editor);
-    });
+    }, { tag: PASTE_TAG });
   }
 
   #handlePastedFiles(clipboardData) {
@@ -3960,6 +3918,124 @@ function $applyLanguage(conversionOutput, element) {
   conversionOutput.node.setLanguage(language);
 }
 
+class WrappedTableNode extends TableNode {
+  static clone(node) {
+    return new WrappedTableNode(node.__key)
+  }
+
+  exportDOM(editor) {
+    const superExport = super.exportDOM(editor);
+
+    return {
+      ...superExport,
+      after: (tableElement) => {
+        if (superExport.after) {
+          tableElement = superExport.after(tableElement);
+          const clonedTable = tableElement.cloneNode(true);
+          const wrappedTable = createElement("figure", { className: "lexxy-content__table-wrapper" }, clonedTable.outerHTML);
+          return wrappedTable
+        }
+
+        return tableElement
+      }
+    }
+  }
+}
+
+const TablesLexicalExtension = defineExtension({
+  name: "lexxy/tables",
+  nodes: [
+    WrappedTableNode,
+    {
+      replace: TableNode,
+      with: () => new WrappedTableNode()
+    },
+    TableCellNode,
+    TableRowNode
+  ],
+  register(editor) {
+    // Register Lexical table plugins
+    registerTablePlugin(editor);
+    registerTableSelectionObserver(editor, true);
+    setScrollableTablesActive(editor, true);
+
+    // Bug fix: Prevent hardcoded background color (Lexical #8089)
+    editor.registerNodeTransform(TableCellNode, (node) => {
+      if (node.getBackgroundColor() === null) {
+        node.setBackgroundColor("");
+      }
+    });
+
+    // Bug fix: Fix column header states (Lexical #8090)
+    editor.registerNodeTransform(TableCellNode, (node) => {
+      const headerState = node.getHeaderStyles();
+
+      if (headerState !== TableCellHeaderStates.ROW) return
+
+      const rowParent = node.getParent();
+      const tableNode = rowParent?.getParent();
+      if (!tableNode) return
+
+      const rows = tableNode.getChildren();
+      const cellIndex = rowParent.getChildren().indexOf(node);
+
+      const cellsInRow = rowParent.getChildren();
+      const isHeaderRow = cellsInRow.every(cell =>
+        cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+      );
+
+      const isHeaderColumn = rows.every(row => {
+        const cell = row.getChildren()[cellIndex];
+        return cell && cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+      });
+
+      let newHeaderState = TableCellHeaderStates.NO_STATUS;
+
+      if (isHeaderRow) {
+        newHeaderState |= TableCellHeaderStates.ROW;
+      }
+
+      if (isHeaderColumn) {
+        newHeaderState |= TableCellHeaderStates.COLUMN;
+      }
+
+      if (newHeaderState !== headerState) {
+        node.setHeaderStyles(newHeaderState, TableCellHeaderStates.BOTH);
+      }
+    });
+
+    editor.registerCommand("insertTableRowAfter", () => {
+      $insertTableRowAtSelection(true);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableRowBefore", () => {
+      $insertTableRowAtSelection(false);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableColumnAfter", () => {
+      $insertTableColumnAtSelection(true);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableColumnBefore", () => {
+      $insertTableColumnAtSelection(false);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTableRow", () => {
+      $deleteTableRowAtSelection();
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTableColumn", () => {
+      $deleteTableColumnAtSelection();
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTable", () => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return false
+      $findTableNode(selection.anchor.getNode())?.remove();
+    }, COMMAND_PRIORITY_NORMAL);
+  }
+});
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -4151,8 +4227,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#registerComponents();
     this.#listenForInvalidatedNodes();
     this.#handleEnter();
-    this.#handleFocus();
-    this.#handleTables();
+    this.#registerFocusEvents();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#loadInitialValue();
@@ -4180,7 +4255,8 @@ class LexicalEditorElement extends HTMLElement {
     const extensions = [ ];
     const richTextExtensions = [
       this.highlighter.lexicalExtension,
-      TrixContentExtension
+      TrixContentExtension,
+      TablesLexicalExtension
     ];
 
     if (this.supportsRichText) {
@@ -4205,14 +4281,7 @@ class LexicalEditorElement extends HTMLElement {
         CodeHighlightNode,
         LinkNode,
         AutoLinkNode,
-        HorizontalDividerNode,
-        WrappedTableNode,
-        {
-          replace: TableNode,
-          with: () => { return new WrappedTableNode() }
-        },
-        TableCellNode,
-        TableRowNode,
+        HorizontalDividerNode
       );
     }
 
@@ -4326,11 +4395,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #registerTableComponents() {
-    registerTablePlugin(this.editor);
-    this.tableHandler = createElement("lexxy-table-handler");
-    this.append(this.tableHandler);
-
-    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor));
+    this.tableTools = createElement("lexxy-table-tools");
+    this.append(this.tableTools);
   }
 
   #registerCodeHiglightingComponents() {
@@ -4377,12 +4443,27 @@ class LexicalEditorElement extends HTMLElement {
     );
   }
 
-  #handleFocus() {
-    // Lexxy handles focus and blur as commands
-    // see https://github.com/facebook/lexical/blob/d1a8e84fe9063a4f817655b346b6ff373aa107f0/packages/lexical/src/LexicalEvents.ts#L35
-    // and https://stackoverflow.com/a/72212077
-    this.editor.registerCommand(BLUR_COMMAND, () => { dispatch(this, "lexxy:blur"); }, COMMAND_PRIORITY_NORMAL);
-    this.editor.registerCommand(FOCUS_COMMAND, () => { dispatch(this, "lexxy:focus"); }, COMMAND_PRIORITY_NORMAL);
+  #registerFocusEvents() {
+    this.addEventListener("focusin", this.#handleFocusIn);
+    this.addEventListener("focusout", this.#handleFocusOut);
+  }
+
+  #handleFocusIn(event) {
+    if (this.#elementInEditorOrToolbar(event.target) && !this.currentlyFocused) {
+      dispatch(this, "lexxy:focus");
+      this.currentlyFocused = true;
+    }
+  }
+
+  #handleFocusOut(event) {
+    if (!this.#elementInEditorOrToolbar(event.relatedTarget)) {
+      dispatch(this, "lexxy:blur");
+      this.currentlyFocused = false;
+    }
+  }
+
+  #elementInEditorOrToolbar(element) {
+    return this.contains(element) || this.toolbarElement?.contains(element)
   }
 
   #onFocus() {
@@ -4399,12 +4480,6 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
-  #handleTables() {
-    if (this.supportsRichText) {
-      this.removeTableSelectionObserver = registerTableSelectionObserver(this.editor, true);
-      setScrollableTablesActive(this.editor, true);
-    }
-  }
 
   #attachDebugHooks() {
     if (!LexicalEditorElement.debug) return
@@ -4502,10 +4577,11 @@ class ToolbarDropdown extends HTMLElement {
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
+
+    this.#onToolbarEditor(this.initialize.bind(this));
   }
 
   disconnectedCallback() {
-    this.#removeClickOutsideHandler();
     this.container.removeEventListener("keydown", this.#handleKeyDown.bind(this));
   }
 
@@ -4521,46 +4597,29 @@ class ToolbarDropdown extends HTMLElement {
     return this.toolbar.editor
   }
 
-  close() {
-    this.container.removeAttribute("open");
-  }
-
-  #handleToggle(event) {
-    if (this.container.open) {
-      this.#handleOpen(event.target);
-    } else {
-      this.#handleClose();
-    }
+  initialize() {
+    // Any post-editor initialization
   }
 
-  #handleOpen() {
-    this.#interactiveElements[0].focus();
-    this.#setupClickOutsideHandler();
-
-    this.#resetTabIndexValues();
-  }
-
-  #handleClose() {
-    this.#removeClickOutsideHandler();
+  close() {
     this.editor.focus();
+    this.container.open = false;
   }
 
-  #setupClickOutsideHandler() {
-    if (this.clickOutsideHandler) return
-
-    this.clickOutsideHandler = this.#handleClickOutside.bind(this);
-    document.addEventListener("click", this.clickOutsideHandler, true);
+  async #onToolbarEditor(callback) {
+    await this.toolbar.editorConnected;
+    callback();
   }
 
-  #removeClickOutsideHandler() {
-    if (!this.clickOutsideHandler) return
-
-    document.removeEventListener("click", this.clickOutsideHandler, true);
-    this.clickOutsideHandler = null;
+  #handleToggle() {
+    if (this.container.open) {
+      this.#handleOpen();
+    }
   }
 
-  #handleClickOutside({ target }) {
-    if (this.container.open && !this.container.contains(target)) this.close();
+  async #handleOpen() {
+    this.#interactiveElements[0].focus();
+    this.#resetTabIndexValues();
   }
 
   #handleKeyDown(event) {
@@ -4648,19 +4707,14 @@ const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 const NO_STYLE = Symbol("no_style");
 
 class HighlightDropdown extends ToolbarDropdown {
-  #initialized = false
-
   connectedCallback() {
     super.connectedCallback();
     this.#registerToggleHandler();
   }
 
-  #ensureInitialized() {
-    if (this.#initialized) return
-
+  initialize() {
     this.#setUpButtons();
     this.#registerButtonHandlers();
-    this.#initialized = true;
   }
 
   #registerToggleHandler() {
@@ -4673,16 +4727,18 @@ class HighlightDropdown extends ToolbarDropdown {
   }
 
   #setUpButtons() {
-    this.#buttonGroups.forEach(buttonGroup => {
-      this.#populateButtonGroup(buttonGroup);
-    });
+    const colorGroups = this.editorElement.config.get("highlight.buttons");
+
+    this.#populateButtonGroup("color", colorGroups.color);
+    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
+
+    const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
+    this.style.setProperty("--max-colors", maxNumberOfColors);
   }
 
-  #populateButtonGroup(buttonGroup) {
-    const attribute = buttonGroup.dataset.buttonGroup;
-    const values = this.editorElement.config.get(`highlight.buttons.${attribute}`) || [];
+  #populateButtonGroup(attribute, values) {
     values.forEach((value, index) => {
-      buttonGroup.appendChild(this.#createButton(attribute, value, index));
+      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
     });
   }
 
@@ -4691,15 +4747,13 @@ class HighlightDropdown extends ToolbarDropdown {
     button.dataset.style = attribute;
     button.style.setProperty(attribute, value);
     button.dataset.value = value;
-    button.classList.add("lexxy-highlight-button");
+    button.classList.add("lexxy-editor__toolbar-button", "lexxy-highlight-button");
     button.name = attribute + "-" + index;
     return button
   }
 
   #handleToggle({ newState }) {
     if (newState === "open") {
-      this.#ensureInitialized();
-
       this.editor.getEditorState().read(() => {
         this.#updateColorButtonStates($getSelection());
       });
@@ -4742,8 +4796,8 @@ class HighlightDropdown extends ToolbarDropdown {
     this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
-  get #buttonGroups() {
-    return this.querySelectorAll("[data-button-group]")
+  get #buttonContainer() {
+    return this.querySelector(".lexxy-highlight-colors")
   }
 
   get #colorButtons() {
@@ -4753,501 +4807,714 @@ class HighlightDropdown extends ToolbarDropdown {
 
 customElements.define("lexxy-highlight-dropdown", HighlightDropdown);
 
-class TableHandler extends HTMLElement {
-  connectedCallback() {
-    this.#setUpButtons();
-    this.#monitorForTableSelection();
-    this.#registerKeyboardShortcuts();
+class TableController {
+  constructor(editorElement) {
+    this.editor = editorElement.editor;
+    this.contents = editorElement.contents;
+    this.selection = editorElement.selection;
+
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
+
+    this.#registerKeyHandlers();
   }
 
-  disconnectedCallback() {
-    this.#unregisterKeyboardShortcuts();
+  destroy() {
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
+
+    this.#unregisterKeyHandlers();
   }
 
-  get #editor() {
-    return this.#editorElement.editor
+  get currentCell() {
+    if (!this.currentCellKey) return null
+
+    return this.editor.getEditorState().read(() => {
+      const cell = $getNodeByKey(this.currentCellKey);
+      return (cell instanceof TableCellNode) ? cell : null
+    })
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  get currentTableNode() {
+    if (!this.currentTableNodeKey) return null
+
+    return this.editor.getEditorState().read(() => {
+      const tableNode = $getNodeByKey(this.currentTableNodeKey);
+      return (tableNode instanceof TableNode) ? tableNode : null
+    })
   }
 
-  get #currentCell() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return null
+  get currentRowCells() {
+    const currentRowIndex = this.currentRowIndex;
 
-    const anchorNode = selection.anchor.getNode();
-    return $getTableCellNodeFromLexicalNode(anchorNode)
+    const rows = this.tableRows;
+    if (!rows) return null
+
+    return this.editor.getEditorState().read(() => {
+      return rows[currentRowIndex]?.getChildren() ?? null
+    }) ?? null
   }
 
-  get #currentRow() {
-    const currentCell = this.#currentCell;
+  get currentRowIndex() {
+    const currentCell = this.currentCell;
     if (!currentCell) return 0
-    return $getTableRowIndexFromTableCellNode(currentCell)
+
+    return this.editor.getEditorState().read(() => {
+      return $getTableRowIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  get #currentColumn() {
-    const currentCell = this.#currentCell;
-    if (!currentCell) return 0
-    return $getTableColumnIndexFromTableCellNode(currentCell)
+  get currentColumnCells() {
+    const columnIndex = this.currentColumnIndex;
+
+    const rows = this.tableRows;
+    if (!rows) return null
+
+    return this.editor.getEditorState().read(() => {
+      return rows.map(row => row.getChildAtIndex(columnIndex))
+    }) ?? null
   }
 
-  get #tableHandlerButtons() {
-    return Array.from(this.querySelectorAll("button, details > summary"))
+  get currentColumnIndex() {
+    const currentCell = this.currentCell;
+    if (!currentCell) return 0
+
+    return this.editor.getEditorState().read(() => {
+      return $getTableColumnIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown, COMMAND_PRIORITY_HIGH);
+  get tableRows() {
+    return this.editor.getEditorState().read(() => {
+      return this.currentTableNode?.getChildren()
+    }) ?? null
   }
 
-  #unregisterKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts();
+  updateSelectedTable() {
+    let cellNode = null;
+    let tableNode = null;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!selection || !this.selection.isTableCellSelected) return
+
+      const node = selection.getNodes()[0];
+
+      cellNode = $findCellNode(node);
+      tableNode = $findTableNode(node);
+    });
+
+    this.currentCellKey = cellNode?.getKey() ?? null;
+    this.currentTableNodeKey = tableNode?.getKey() ?? null;
   }
 
-  #handleKeyDown = (event) => {
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
-      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
-      this.#setFocusStateOnSelectedCell();
-      firstButton?.focus();
-    } else if (event.key === "Escape") {
-      this.#editor.getEditorState().read(() => {
-        const cell = this.#currentCell;
-        if (!cell) return
+  executeTableCommand(command, customIndex = null) {
+    if (command.action === "delete" && command.childType === "table") {
+      this.#deleteTable();
+      return
+    }
 
-        this.#editor.update(() => {
-          cell.select();
-        });
-      });
-      this.#closeMoreMenu();
+    if (command.action === "toggle") {
+      this.#executeToggleStyle(command);
+      return
     }
+
+    this.#executeCommand(command, customIndex);
   }
 
-  #handleTableHandlerKeydown = (event) => {
-    if (event.key === "Escape") {
-      this.#editor.focus();
-    } else {
-      handleRollingTabIndex(this.#tableHandlerButtons, event);
-    }
+  #executeCommand(command, customIndex = null) {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand(this.#commandName(command));
+    this.#selectNextBestCell(command, customIndex);
   }
 
-  #setUpButtons() {
-    this.appendChild(this.#createRowButtonsContainer());
-    this.appendChild(this.#createColumnButtonsContainer());
+  #executeToggleStyle(command) {
+    const childType = command.childType;
 
-    this.moreMenu = this.#createMoreMenu();
-    this.appendChild(this.moreMenu);
-    this.addEventListener("keydown", this.#handleTableHandlerKeydown);
-  }
+    let cells = null;
+    let headerState = null;
 
-  #showTableHandlerButtons() {
-    this.style.display = "flex";
-    this.#closeMoreMenu();
+    if (childType === "row") {
+      cells = this.currentRowCells;
+      headerState = TableCellHeaderStates.ROW;
+    } else if (childType === "column") {
+      cells = this.currentColumnCells;
+      headerState = TableCellHeaderStates.COLUMN;
+    }
 
-    this.#updateRowColumnCount();
-    this.#setTableFocusState(true);
+    if (!cells || cells.length === 0) return
+
+    this.editor.update(() => {
+      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
+      if (!firstCell) return
+
+      const currentStyle = firstCell.getHeaderStyles();
+      const newStyle = currentStyle ^ headerState;
+
+      cells.forEach(cell => {
+        this.#setHeaderStyle(cell, newStyle, headerState);
+      });
+    });
   }
 
-  #hideTableHandlerButtons() {
-    this.style.display = "none";
-    this.#closeMoreMenu();
+  #deleteTable() {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand("deleteTable");
+  }
+
+  #selectCellAtSelection() {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!selection) return
+
+      const node = selection.getNodes()[0];
 
-    this.#setTableFocusState(false);
-    this.currentTableNode = null;
+      $findCellNode(node)?.selectEnd();
+    });
   }
 
-  #updateButtonsPosition(tableNode) {
-    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
-    if (!tableElement) return
+  #commandName(command) {
+    const { action, childType, direction } = command;
 
-    const tableRect = tableElement.getBoundingClientRect();
-    const editorRect = this.#editorElement.getBoundingClientRect();
+    const childTypeSuffix = upcaseFirst(childType);
+    const directionSuffix = action == "insert" ? upcaseFirst(direction) : "";
+    return `${action}Table${childTypeSuffix}${directionSuffix}`
+  }
 
-    const relativeTop = tableRect.top - editorRect.top;
-    const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
-    this.style.top = `${relativeTop}px`;
-    this.style.left = `${relativeCenter}px`;
+  #setHeaderStyle(cell, newStyle, headerState) {
+    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+    tableCellNode?.setHeaderStyles(newStyle, headerState);
   }
 
-  #updateRowColumnCount() {
-    if (!this.currentTableNode) return
+  async #selectCellAtIndex(rowIndex, columnIndex) {
+    // We wait for next frame, otherwise table operations might not have completed yet.
+    await nextFrame();
 
-    const tableElement = $getElementForTableNode(this.#editor, this.currentTableNode);
-    if (!tableElement) return
+    if (!this.currentTableNode) return
 
-    const rowCount = tableElement.rows;
-    const columnCount = tableElement.columns;
+    const rows = this.tableRows;
+    if (!rows) return
 
-    this.rowCount.textContent = `${rowCount} row${rowCount === 1 ? "" : "s"}`;
-    this.columnCount.textContent = `${columnCount} column${columnCount === 1 ? "" : "s"}`;
-  }
+    const row = rows[rowIndex];
+    if (!row) return
 
-  #createButton(icon, label, onClick) {
-    const button = createElement("button", {
-      className: "lexxy-table-control__button",
-      "aria-label": label,
-      type: "button"
+    this.editor.update(() => {
+      const cell = $getTableCellNodeFromLexicalNode(row.getChildAtIndex(columnIndex));
+      cell?.selectEnd();
     });
-    button.tabIndex = -1;
-    button.innerHTML = `${icon} <span>${label}</span>`;
-    button.addEventListener("click", onClick.bind(this));
-
-    return button
   }
 
-  #createRowButtonsContainer() {
-    const container = createElement("div", { className: "lexxy-table-control" });
+  #selectNextBestCell(command, customIndex = null) {
+    const { childType, direction } = command;
 
-    const plusButton = this.#createButton("+", "Add row", () => this.#insertTableRow("end"));
-    const minusButton = this.#createButton("−", "Remove row", () => this.#deleteTableRow("end"));
+    let rowIndex = this.currentRowIndex;
+    let columnIndex = customIndex !== null ? customIndex : this.currentColumnIndex;
 
-    this.rowCount = createElement("span");
-    this.rowCount.textContent = "_ rows";
+    const deleteOffset = command.action === "delete" ? -1 : 0;
+    const offset = direction === "after" ? 1 : deleteOffset;
 
-    container.appendChild(minusButton);
-    container.appendChild(this.rowCount);
-    container.appendChild(plusButton);
+    if (childType === "row") {
+      rowIndex += offset;
+    } else if (childType === "column") {
+      columnIndex += offset;
+    }
 
-    return container
+    this.#selectCellAtIndex(rowIndex, columnIndex);
   }
 
-  #createColumnButtonsContainer() {
-    const container = createElement("div", { className: "lexxy-table-control" });
+  #selectNextRow() {
+    const rows = this.tableRows;
+    if (!rows) return
 
-    const plusButton = this.#createButton("+", "Add column", () => this.#insertTableColumn("end"));
-    const minusButton = this.#createButton("−", "Remove column", () => this.#deleteTableColumn("end"));
+    const nextRow = rows.at(this.currentRowIndex + 1);
+    if (!nextRow) return
 
-    this.columnCount = createElement("span");
-    this.columnCount.textContent = "_ columns";
+    this.editor.update(() => {
+      nextRow.getChildAtIndex(this.currentColumnIndex)?.selectEnd();
+    });
+  }
 
-    container.appendChild(minusButton);
-    container.appendChild(this.columnCount);
-    container.appendChild(plusButton);
+  #selectPreviousCell() {
+    const cell = this.currentCell;
+    if (!cell) return
 
-    return container
+    this.editor.update(() => {
+      cell.selectPrevious();
+    });
   }
 
-  #createMoreMenu() {
-    const container = createElement("details", {
-      className: "lexxy-table-control lexxy-table-control__more-menu"
-    });
-    container.setAttribute("name", "lexxy-dropdown");
+  #insertRowAndSelectFirstCell() {
+    this.executeTableCommand({ action: "insert", childType: "row", direction: "after" }, 0);
+  }
 
-    container.tabIndex = -1;
+  #deleteRowAndSelectLastCell() {
+    this.executeTableCommand({ action: "delete", childType: "row" }, -1);
+  }
 
-    const summary = createElement("summary", {}, "•••");
-    container.appendChild(summary);
+  #deleteRowAndSelectNextNode() {
+    const tableNode = this.currentTableNode;
+    this.executeTableCommand({ action: "delete", childType: "row" });
 
-    const details = createElement("div", { className: "lexxy-table-control__more-menu-details" });
-    container.appendChild(details);
+    this.editor.update(() => {
+      const next = tableNode?.getNextSibling();
+      if ($isParagraphNode(next)) {
+        next.selectStart();
+      } else {
+        const newParagraph = $createParagraphNode();
+        this.currentTableNode.insertAfter(newParagraph);
+        newParagraph.selectStart();
+      }
+    });
+  }
 
-    details.appendChild(this.#createRowSection());
-    details.appendChild(this.#createColumnSection());
-    details.appendChild(this.#createDeleteTableSection());
+  #isCurrentCellEmpty() {
+    if (!this.currentTableNode) return false
 
-    container.addEventListener("toggle", this.#handleMoreMenuToggle.bind(this));
+    const cell = this.currentCell;
+    if (!cell) return false
 
-    return container
+    return cell.getTextContent().trim() === ""
   }
 
-  #createColumnSection() {
-    const columnSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+  #isCurrentRowLast() {
+    if (!this.currentTableNode) return false
 
-    const columnButtons = [
-      { icon: this.#icon("add-column-before"), label: "Add column before", onClick: () => this.#insertTableColumn("left") },
-      { icon: this.#icon("add-column-after"), label: "Add column after", onClick: () => this.#insertTableColumn("right") },
-      { icon: this.#icon("remove-column"), label: "Remove column", onClick: this.#deleteTableColumn },
-      { icon: this.#icon("toggle-column-style"), label: "Toggle column style", onClick: this.#toggleColumnHeaderStyle },
-    ];
+    const rows = this.tableRows;
+    if (!rows) return false
 
-    columnButtons.forEach(button => {
-      const buttonElement = this.#createButton(button.icon, button.label, button.onClick);
-      columnSection.appendChild(buttonElement);
-    });
+    return rows.length === this.currentRowIndex + 1
+  }
 
-    return columnSection
+  #isCurrentRowEmpty() {
+    if (!this.currentTableNode) return false
+
+    const cells = this.currentRowCells;
+    if (!cells) return false
+
+    return cells.every(cell => cell.getTextContent().trim() === "")
   }
 
-  #createRowSection() {
-    const rowSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+  #isFirstCellInRow() {
+    if (!this.currentTableNode) return false
 
-    const rowButtons = [
-      { icon: this.#icon("add-row-above"), label: "Add row above", onClick: () => this.#insertTableRow("above") },
-      { icon: this.#icon("add-row-below"), label: "Add row below", onClick: () => this.#insertTableRow("below") },
-      { icon: this.#icon("remove-row"), label: "Remove row", onClick: this.#deleteTableRow },
-      { icon: this.#icon("toggle-row-style"), label: "Toggle row style", onClick: this.#toggleRowHeaderStyle }
-    ];
+    const cells = this.currentRowCells;
+    if (!cells) return false
 
-    rowButtons.forEach(button => {
-      const buttonElement = this.#createButton(button.icon, button.label, button.onClick);
-      rowSection.appendChild(buttonElement);
-    });
+    return cells.indexOf(this.currentCell) === 0
+  }
 
-    return rowSection
+  #registerKeyHandlers() {
+    // We can't prevent these externally using regular keydown because Lexical handles it first.
+    this.unregisterBackspaceKeyHandler = this.editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => this.#handleBackspaceKey(event), COMMAND_PRIORITY_HIGH);
+    this.unregisterEnterKeyHandler = this.editor.registerCommand(KEY_ENTER_COMMAND, (event) => this.#handleEnterKey(event), COMMAND_PRIORITY_HIGH);
   }
 
-  #createDeleteTableSection() {
-    const deleteSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+  #unregisterKeyHandlers() {
+    this.unregisterBackspaceKeyHandler?.();
+    this.unregisterEnterKeyHandler?.();
 
-    const deleteButton = { icon: this.#icon("delete-table"), label: "Delete table", onClick: this.#deleteTable };
+    this.unregisterBackspaceKeyHandler = null;
+    this.unregisterEnterKeyHandler = null;
+  }
 
-    const buttonElement = this.#createButton(deleteButton.icon, deleteButton.label, deleteButton.onClick);
-    deleteSection.appendChild(buttonElement);
+  #handleBackspaceKey(event) {
+    if (!this.currentTableNode) return false
 
-    return deleteSection
+    if (this.#isCurrentRowEmpty() && this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#deleteRowAndSelectLastCell();
+      return true
+    }
+
+    if (this.#isCurrentCellEmpty() && !this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#selectPreviousCell();
+      return true
+    }
+
+    return false
   }
 
-  #handleMoreMenuToggle() {
-    if (this.moreMenu.open) {
-      this.#setFocusStateOnSelectedCell();
+  #handleEnterKey(event) {
+    if ((event.ctrlKey || event.metaKey) || event.shiftKey || !this.currentTableNode) return false
+
+    if (this.selection.isInsideList || this.selection.isInsideCodeBlock) return false
+
+    event.preventDefault();
+
+    if (this.#isCurrentRowLast() && this.#isCurrentRowEmpty()) {
+      this.#deleteRowAndSelectNextNode();
+    } else if (this.#isCurrentRowLast()) {
+      this.#insertRowAndSelectFirstCell();
     } else {
-      this.#removeFocusStateFromSelectedCell();
+      this.#selectNextRow();
     }
+
+    return true
   }
+}
 
-  #closeMoreMenu() {
-    this.#removeFocusStateFromSelectedCell();
-    this.moreMenu.removeAttribute("open");
+var TableIcons = {
+  "insert-row-before":
+    `<svg  viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.86804e-07 15C8.29055e-07 15.8284 0.671574 16.5 1.5 16.5H15L15.1533 16.4922C15.8593 16.4205 16.4205 15.8593 16.4922 15.1533L16.5 15V4.5L16.4922 4.34668C16.4154 3.59028 15.7767 3 15 3H13.5L13.5 4.5H15V9H1.5L1.5 4.5L3 4.5V3H1.5C0.671574 3 1.20956e-06 3.67157 1.24577e-06 4.5L7.86804e-07 15ZM15 10.5V15H1.5L1.5 10.5H15Z"/>
+    <path d="M4.5 4.5H7.5V7.5H9V4.5H12L12 3L9 3V6.55671e-08L7.5 0V3L4.5 3V4.5Z"/>
+    </svg>`,
+
+  "insert-row-after":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.86804e-07 13.5C7.50592e-07 14.3284 0.671574 15 1.5 15H3V13.5H1.5L1.5 9L15 9V13.5H13.5V15H15C15.7767 15 16.4154 14.4097 16.4922 13.6533L16.5 13.5V3L16.4922 2.84668C16.4205 2.14069 15.8593 1.57949 15.1533 1.50781L15 1.5L1.5 1.5C0.671574 1.5 1.28803e-06 2.17157 1.24577e-06 3L7.86804e-07 13.5ZM15 3V7.5L1.5 7.5L1.5 3L15 3Z"/>
+    <path d="M7.5 15V18H9V15H12V13.5H9V10.5H7.5V13.5H4.5V15H7.5Z"/>
+    </svg>`,
+
+  "delete-row":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.4922 12.1533C16.4154 12.9097 15.7767 13.5 15 13.5L12 13.5V12H15V6L1.5 6L1.5 12H4.5V13.5H1.5C0.723337 13.5 0.0846104 12.9097 0.00781328 12.1533L7.86804e-07 12L1.04907e-06 6C1.17362e-06 5.22334 0.590278 4.58461 1.34668 4.50781L1.5 4.5L15 4.5C15.8284 4.5 16.5 5.17157 16.5 6V12L16.4922 12.1533Z"/>
+    <path d="M10.3711 15.9316L8.25 13.8096L6.12793 15.9316L5.06738 14.8711L7.18945 12.75L5.06738 10.6289L6.12793 9.56836L8.25 11.6895L10.3711 9.56836L11.4316 10.6289L9.31055 12.75L11.4316 14.8711L10.3711 15.9316Z"/>
+    </svg>`,
+
+  "toggle-row":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.00781328 13.6533C0.0846108 14.4097 0.723337 15 1.5 15L15 15L15.1533 14.9922C15.8593 14.9205 16.4205 14.3593 16.4922 13.6533L16.5 13.5V4.5L16.4922 4.34668C16.4205 3.64069 15.8593 3.07949 15.1533 3.00781L15 3L1.5 3C0.671574 3 1.24863e-06 3.67157 1.18021e-06 4.5L7.86804e-07 13.5L0.00781328 13.6533ZM15 9V13.5L1.5 13.5L1.5 9L15 9Z"/>
+    </svg>`,
+
+  "insert-column-before":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3H4.5V1.5H9V15H4.5V13.5H3V15C3 15.7767 3.59028 16.4154 4.34668 16.4922L4.5 16.5H15L15.1533 16.4922C15.8593 16.4205 16.4205 15.8593 16.4922 15.1533L16.5 15V1.5C16.5 0.671573 15.8284 6.03989e-09 15 0H4.5ZM15 15H10.5V1.5H15V15Z"/>
+    <path d="M3 7.5H0V9H3V12H4.5V9H7.5V7.5H4.5V4.5H3V7.5Z"/>
+    </svg>`,
+
+  "insert-column-after":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 0C14.3284 0 15 0.671573 15 1.5V3H13.5V1.5H9V15H13.5V13.5H15V15C15 15.7767 14.4097 16.4154 13.6533 16.4922L13.5 16.5H3L2.84668 16.4922C2.14069 16.4205 1.57949 15.8593 1.50781 15.1533L1.5 15V1.5C1.5 0.671573 2.17157 6.03989e-09 3 0H13.5ZM3 15H7.5V1.5H3V15Z"/>
+    <path d="M15 7.5H18V9H15V12H13.5V9H10.5V7.5H13.5V4.5H15V7.5Z"/>
+    </svg>`,
+
+  "delete-column":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.1533 0.0078125C12.9097 0.0846097 13.5 0.723336 13.5 1.5V4.5H12V1.5H6V15H12V12H13.5V15C13.5 15.7767 12.9097 16.4154 12.1533 16.4922L12 16.5H6C5.22334 16.5 4.58461 15.9097 4.50781 15.1533L4.5 15V1.5C4.5 0.671573 5.17157 2.41596e-08 6 0H12L12.1533 0.0078125Z"/>
+    <path d="M15.9316 6.12891L13.8105 8.24902L15.9326 10.3711L14.8711 11.4316L12.75 9.31055L10.6289 11.4316L9.56738 10.3711L11.6885 8.24902L9.56836 6.12891L10.6289 5.06836L12.75 7.18848L14.8711 5.06836L15.9316 6.12891Z"/>
+    </svg>`,
+
+  "toggle-column":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6533 17.9922C14.4097 17.9154 15 17.2767 15 16.5L15 3L14.9922 2.84668C14.9205 2.14069 14.3593 1.57949 13.6533 1.50781L13.5 1.5L4.5 1.5L4.34668 1.50781C3.59028 1.58461 3 2.22334 3 3L3 16.5C3 17.2767 3.59028 17.9154 4.34668 17.9922L4.5 18L13.5 18L13.6533 17.9922ZM9 3L13.5 3L13.5 16.5L9 16.5L9 3Z" />
+    </svg>`,
+
+  "delete-table":
+    `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
+    </svg>`
+};
+
+class TableTools extends HTMLElement {
+  connectedCallback() {
+    this.tableController = new TableController(this.#editorElement);
+
+    this.#setUpButtons();
+    this.#monitorForTableSelection();
+    this.#registerKeyboardShortcuts();
   }
 
-  #monitorForTableSelection() {
-    this.#editor.registerUpdateListener(() => {
-      this.#editor.getEditorState().read(() => {
-        const selection = $getSelection();
-        if (!$isRangeSelection(selection)) return
+  disconnectedCallback() {
+    this.#unregisterKeyboardShortcuts();
 
-        const anchorNode = selection.anchor.getNode();
-        const tableNode = $findTableNode(anchorNode);
+    this.unregisterUpdateListener?.();
+    this.unregisterUpdateListener = null;
 
-        if (tableNode) {
-          this.#tableCellWasSelected(tableNode);
-        } else {
-          this.#hideTableHandlerButtons();
-        }
-      });
-    });
+    this.removeEventListener("keydown", this.#handleToolsKeydown);
+
+    this.tableController?.destroy();
+    this.tableController = null;
   }
 
-  #setTableFocusState(focused) {
-    this.#editorElement.querySelector("div.node--selected:has(table)")?.classList.remove("node--selected");
+  get #editor() {
+    return this.#editorElement.editor
+  }
 
-    if (focused && this.currentTableNode) {
-      const tableParent = this.#editor.getElementByKey(this.currentTableNode.getKey());
-      if (!tableParent) return
-      tableParent.classList.add("node--selected");
-    }
+  get #editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  #tableCellWasSelected(tableNode) {
-    this.currentTableNode = tableNode;
-    this.#updateButtonsPosition(tableNode);
-    this.#showTableHandlerButtons();
+  get #tableToolsButtons() {
+    return Array.from(this.querySelectorAll("button, details > summary"))
   }
 
-  #setFocusStateOnSelectedCell() {
-    this.#editor.getEditorState().read(() => {
-      const currentCell = this.#currentCell;
-      if (!currentCell) return
+  #setUpButtons() {
+    this.appendChild(this.#createRowButtonsContainer());
+    this.appendChild(this.#createColumnButtonsContainer());
 
-      const cellElement = this.#editor.getElementByKey(currentCell.getKey());
-      if (!cellElement) return
+    this.appendChild(this.#createDeleteTableButton());
+    this.addEventListener("keydown", this.#handleToolsKeydown);
+  }
 
-      cellElement.classList.add("table-cell--selected");
-    });
+  #createButtonsContainer(childType, setCountProperty, moreMenu) {
+    const container = createElement("div", { className: `lexxy-table-control lexxy-table-control--${childType}` });
+
+    const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
+    const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
+
+    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" });
+    dropdown.setAttribute("name", "lexxy-dropdown");
+    dropdown.tabIndex = -1;
+
+    const count = createElement("summary", {}, `_ ${childType}s`);
+    setCountProperty(count);
+    dropdown.appendChild(count);
+
+    dropdown.appendChild(moreMenu);
+
+    container.appendChild(minusButton);
+    container.appendChild(dropdown);
+    container.appendChild(plusButton);
+
+    return container
   }
 
-  #removeFocusStateFromSelectedCell() {
-    this.#editorElement.querySelector(".table-cell--selected")?.classList.remove("table-cell--selected");
+  #createRowButtonsContainer() {
+    return this.#createButtonsContainer(
+      "row",
+      (count) => { this.rowCount = count; },
+      this.#createMoreMenuSection("row")
+    )
   }
 
-  #selectLastTableCell() {
-    if (!this.currentTableNode) return
+  #createColumnButtonsContainer() {
+    return this.#createButtonsContainer(
+      "column",
+      (count) => { this.columnCount = count; },
+      this.#createMoreMenuSection("column")
+    )
+  }
 
-    const last = this.currentTableNode.getLastChild().getLastChild();
-    if (!$isTableCellNode(last)) return
+  #createMoreMenuSection(childType) {
+    const section = createElement("div", { className: "lexxy-table-control__more-menu-details" });
+    const addBeforeButton = this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" });
+    const addAfterButton = this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" });
+    const toggleStyleButton = this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType });
+    const deleteButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType });
 
-    last.selectEnd();
+    section.appendChild(addBeforeButton);
+    section.appendChild(addAfterButton);
+    section.appendChild(toggleStyleButton);
+    section.appendChild(deleteButton);
+
+    return section
   }
 
-  #deleteTable() {
-    this.#editor.dispatchCommand("deleteTable");
+  #createDeleteTableButton() {
+    const container = createElement("div", { className: "lexxy-table-control" });
 
-    this.#closeMoreMenu();
-    this.#updateRowColumnCount();
-  }
+    const deleteTableButton = this.#createButton("Delete this table?", { action: "delete", childType: "table" });
+    deleteTableButton.classList.add("lexxy-table-control__button--delete-table");
+
+    container.appendChild(deleteTableButton);
+
+    this.deleteContainer = container;
 
-  #insertTableRow(direction) {
-    this.#executeTableCommand("insert", "row", direction);
+    return container
   }
 
-  #insertTableColumn(direction) {
-    this.#executeTableCommand("insert", "column", direction);
+  #createButton(label, command = {}, icon = this.#icon(command)) {
+    const button = createElement("button", {
+      className: "lexxy-table-control__button",
+      "aria-label": label,
+      type: "button"
+    });
+    button.tabIndex = -1;
+    button.innerHTML = `${icon} <span>${label}</span>`;
+
+    button.dataset.action = command.action;
+    button.dataset.childType = command.childType;
+    button.dataset.direction = command.direction;
+
+    button.addEventListener("click", () => this.#executeTableCommand(command));
+
+    button.addEventListener("mouseover", () => this.#handleCommandButtonHover());
+    button.addEventListener("focus", () => this.#handleCommandButtonHover());
+    button.addEventListener("mouseout", () => this.#handleCommandButtonHover());
+
+    return button
   }
 
-  #deleteTableRow(direction) {
-    this.#executeTableCommand("delete", "row", direction);
+  #registerKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH);
   }
 
-  #deleteTableColumn(direction) {
-    this.#executeTableCommand("delete", "column", direction);
+  #unregisterKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts?.();
+    this.unregisterKeyboardShortcuts = null;
   }
 
-  #executeTableCommand(action = "insert", childType = "row", direction) {
-    this.#editor.update(() => {
-      const currentCell = this.#currentCell;
-      if (!currentCell) return
+  #handleAccessibilityShortcutKey = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
+      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
+      firstButton?.focus();
+    }
+  }
 
-      if (direction === "end") {
-        this.#selectLastTableCell();
-      }
+  #handleToolsKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.#handleEscapeKey();
+    } else {
+      handleRollingTabIndex(this.#tableToolsButtons, event);
+    }
+  }
 
-      this.#dispatchTableCommand(action, childType, direction);
+  #handleEscapeKey() {
+    const cell = this.tableController.currentCell;
+    if (!cell) return
 
-      if (currentCell.isAttached()) {
-        currentCell.selectEnd();
-      }
+    this.#editor.update(() => {
+      cell.select();
+      this.#editor.focus();
     });
 
-    this.#closeMoreMenu();
-    this.#updateRowColumnCount();
+    this.#update();
   }
 
-  #dispatchTableCommand(action, childType, direction) {
-    switch (action) {
-      case "insert":
-        switch (childType) {
-          case "row":
-            if (direction === "above") {
-              this.#editor.dispatchCommand("insertTableRowAbove");
-            } else {
-              this.#editor.dispatchCommand("insertTableRowBelow");
-            }
-            break
-          case "column":
-            if (direction === "left") {
-              this.#editor.dispatchCommand("insertTableColumnBefore");
-            } else {
-              this.#editor.dispatchCommand("insertTableColumnAfter");
-            }
-            break
-        }
+  async #handleCommandButtonHover() {
+    await nextFrame();
+
+    this.#clearCellStyles();
+
+    const activeElement = this.querySelector("button:hover, button:focus");
+    if (!activeElement) return
+
+    const command = {
+      action: activeElement.dataset.action,
+      childType: activeElement.dataset.childType,
+      direction: activeElement.dataset.direction
+    };
+
+    let cellsToHighlight = null;
+
+    switch (command.childType) {
+      case "row":
+        cellsToHighlight = this.tableController.currentRowCells;
         break
-      case "delete":
-        switch (childType) {
-          case "row":
-            this.#editor.dispatchCommand("deleteTableRow");
-            break
-          case "column":
-            this.#editor.dispatchCommand("deleteTableColumn");
-            break
-        }
+      case "column":
+        cellsToHighlight = this.tableController.currentColumnCells;
+        break
+      case "table":
+        cellsToHighlight = this.tableController.tableRows;
         break
     }
-  }
 
-  #toggleRowHeaderStyle() {
-    this.#editor.update(() => {
-      const rows = this.currentTableNode.getChildren();
+    if (!cellsToHighlight) return
 
-      const row = rows[this.#currentRow];
-      if (!row) return
+    cellsToHighlight.forEach(cell => {
+      const cellElement = this.#editor.getElementByKey(cell.getKey());
+      if (!cellElement) return
 
-      const cells = row.getChildren();
-      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
-      if (!firstCell) return
+      cellElement.classList.toggle(theme.tableCellHighlight, true);
+      Object.assign(cellElement.dataset, command);
+    });
+  }
 
-      const currentStyle = firstCell.getHeaderStyles();
-      const newStyle = currentStyle ^ TableCellHeaderStates.ROW;
+  #monitorForTableSelection() {
+    this.unregisterUpdateListener = this.#editor.registerUpdateListener(() => {
+      this.tableController.updateSelectedTable();
 
-      cells.forEach(cell => {
-        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.ROW);
-      });
+      const tableNode = this.tableController.currentTableNode;
+      if (tableNode) {
+        this.#show();
+      } else {
+        this.#hide();
+      }
     });
   }
 
-  #toggleColumnHeaderStyle() {
-    this.#editor.update(() => {
-      const rows = this.currentTableNode.getChildren();
+  #executeTableCommand(command) {
+    this.tableController.executeTableCommand(command);
+    this.#update();
+  }
 
-      const row = rows[this.#currentRow];
-      if (!row) return
+  #show() {
+    this.style.display = "flex";
+    this.#update();
+  }
 
-      const cells = row.getChildren();
-      const selectedCell = $getTableCellNodeFromLexicalNode(cells[this.#currentColumn]);
-      if (!selectedCell) return
+  #hide() {
+    this.style.display = "none";
+    this.#clearCellStyles();
+  }
 
-      const currentStyle = selectedCell.getHeaderStyles();
-      const newStyle = currentStyle ^ TableCellHeaderStates.COLUMN;
+  #update() {
+    this.#updateButtonsPosition();
+    this.#updateRowColumnCount();
+    this.#closeMoreMenu();
+    this.#handleCommandButtonHover();
+  }
 
-      rows.forEach(row => {
-        const cell = row.getChildren()[this.#currentColumn];
-        if (!cell) return
-        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.COLUMN);
-      });
-    });
+  #closeMoreMenu() {
+    this.querySelector("details[open]")?.removeAttribute("open");
   }
 
-  #setHeaderStyle(cell, newStyle, headerState) {
-    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+  #updateButtonsPosition() {
+    const tableNode = this.tableController.currentTableNode;
+    if (!tableNode) return
 
-    if (tableCellNode) {
-      tableCellNode.setHeaderStyles(newStyle, headerState);
-    }
+    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
+    if (!tableElement) return
+
+    const tableRect = tableElement.getBoundingClientRect();
+    const editorRect = this.#editorElement.getBoundingClientRect();
+
+    const relativeTop = tableRect.top - editorRect.top;
+    const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
+    this.style.top = `${relativeTop}px`;
+    this.style.left = `${relativeCenter}px`;
   }
 
-  #icon(name) {
-    const icons =
-      {
-        "add-row-above":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4 7L0 10V4L4 7ZM6.5 7.5H16.5V6.5H6.5V7.5ZM18 8C18 8.55228 17.5523 9 17 9H6C5.44772 9 5 8.55228 5 8V6C5 5.44772 5.44772 5 6 5H17C17.5523 5 18 5.44772 18 6V8Z"/><path d="M2 2C2 1.44772 2.44772 1 3 1H15C15.5523 1 16 1.44772 16 2C16 2.55228 15.5523 3 15 3H3C2.44772 3 2 2.55228 2 2Z"/><path d="M2 12C2 11.4477 2.44772 11 3 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H3C2.44772 13 2 12.5523 2 12Z"/><path d="M2 16C2 15.4477 2.44772 15 3 15H15C15.5523 15 16 15.4477 16 16C16 16.5523 15.5523 17 15 17H3C2.44772 17 2 16.5523 2 16Z"/>
-          </svg>`,
+  #updateRowColumnCount() {
+    const tableNode = this.tableController.currentTableNode;
+    if (!tableNode) return
+
+    const tableElement = $getElementForTableNode(this.#editor, tableNode);
+    if (!tableElement) return
 
-        "add-row-below":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4 11L0 8V14L4 11ZM6.5 10.5H16.5V11.5H6.5V10.5ZM18 10C18 9.44772 17.5523 9 17 9H6C5.44772 9 5 9.44772 5 10V12C5 12.5523 5.44772 13 6 13H17C17.5523 13 18 12.5523 18 12V10Z"/><path d="M2 16C2 16.5523 2.44772 17 3 17H15C15.5523 17 16 16.5523 16 16C16 15.4477 15.5523 15 15 15H3C2.44772 15 2 15.4477 2 16Z"/><path d="M2 6C2 6.55228 2.44772 7 3 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H3C2.44772 5 2 5.44772 2 6Z"/><path d="M2 2C2 2.55228 2.44772 3 3 3H15C15.5523 3 16 2.55228 16 2C16 1.44772 15.5523 1 15 1H3C2.44772 1 2 1.44772 2 2Z"/>
-          </svg>`,
+    const rowCount = tableElement.rows;
+    const columnCount = tableElement.columns;
 
-        "remove-row":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M17.9951 10.1025C17.9438 10.6067 17.5177 11 17 11H12.4922L13.9922 9.5H16.5V5.5L1.5 5.5L1.5 9.5H4.00586L5.50586 11H1L0.897461 10.9951C0.427034 10.9472 0.0527828 10.573 0.00488281 10.1025L0 10L1.78814e-07 5C2.61831e-07 4.48232 0.393332 4.05621 0.897461 4.00488L1 4L17 4C17.5523 4 18 4.44772 18 5V10L17.9951 10.1025Z"/><path d="M11.2969 15.0146L8.99902 12.7168L6.7002 15.0146L5.63965 13.9541L7.93848 11.6562L5.63965 9.3584L6.7002 8.29785L8.99902 10.5957L11.2969 8.29785L12.3574 9.3584L10.0596 11.6562L12.3574 13.9541L11.2969 15.0146Z"/>
-          </svg>`,
+    this.rowCount.textContent = `${rowCount} row${rowCount === 1 ? "" : "s"}`;
+    this.columnCount.textContent = `${columnCount} column${columnCount === 1 ? "" : "s"}`;
+  }
 
-        "toggle-row-style":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7C8 7.55228 7.55228 8 7 8H2C1.44772 8 1 7.55228 1 7V2Z"/><path d="M2.5 15.5H6.5V11.5H2.5V15.5ZM8 16C8 16.5177 7.60667 16.9438 7.10254 16.9951L7 17H2L1.89746 16.9951C1.42703 16.9472 1.05278 16.573 1.00488 16.1025L1 16V11C1 10.4477 1.44772 10 2 10H7C7.55228 10 8 10.4477 8 11V16Z"/><path d="M10 2C10 1.44772 10.4477 1 11 1H16C16.5523 1 17 1.44772 17 2V7C17 7.55228 16.5523 8 16 8H11C10.4477 8 10 7.55228 10 7V2Z"/><path d="M11.5 15.5H15.5V11.5H11.5V15.5ZM17 16C17 16.5177 16.6067 16.9438 16.1025 16.9951L16 17H11L10.8975 16.9951C10.427 16.9472 10.0528 16.573 10.0049 16.1025L10 16V11C10 10.4477 10.4477 10 11 10H16C16.5523 10 17 10.4477 17 11V16Z"/>
-          </svg>`,
+  #setTableCellFocus() {
+    const cell = this.tableController.currentCell;
+    if (!cell) return
 
-        "add-column-before":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M7 4L10 2.62268e-07L4 0L7 4ZM7.5 6.5L7.5 16.5H6.5L6.5 6.5H7.5ZM8 18C8.55228 18 9 17.5523 9 17V6C9 5.44772 8.55229 5 8 5H6C5.44772 5 5 5.44772 5 6L5 17C5 17.5523 5.44772 18 6 18H8Z"/><path d="M2 2C1.44772 2 1 2.44772 1 3L1 15C1 15.5523 1.44772 16 2 16C2.55228 16 3 15.5523 3 15L3 3C3 2.44772 2.55229 2 2 2Z"/><path d="M12 2C11.4477 2 11 2.44772 11 3L11 15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15L13 3C13 2.44772 12.5523 2 12 2Z"/><path d="M16 2C15.4477 2 15 2.44772 15 3L15 15C15 15.5523 15.4477 16 16 16C16.5523 16 17 15.5523 17 15V3C17 2.44772 16.5523 2 16 2Z"/>
-          </svg>`,
+    const cellElement = this.#editor.getElementByKey(cell.getKey());
+    if (!cellElement) return
 
-        "add-column-after":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M11 4L8 2.62268e-07L14 0L11 4ZM10.5 6.5V16.5H11.5V6.5H10.5ZM10 18C9.44772 18 9 17.5523 9 17V6C9 5.44772 9.44772 5 10 5H12C12.5523 5 13 5.44772 13 6V17C13 17.5523 12.5523 18 12 18H10Z"/><path d="M16 2C16.5523 2 17 2.44772 17 3L17 15C17 15.5523 16.5523 16 16 16C15.4477 16 15 15.5523 15 15V3C15 2.44772 15.4477 2 16 2Z"/><path d="M6 2C6.55228 2 7 2.44772 7 3L7 15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15L5 3C5 2.44772 5.44771 2 6 2Z"/><path d="M2 2C2.55228 2 3 2.44772 3 3L3 15C3 15.5523 2.55228 16 2 16C1.44772 16 1 15.5523 1 15V3C1 2.44772 1.44771 2 2 2Z"/>
-          </svg>`,
+    cellElement.classList.add(theme.tableCellFocus);
+  }
 
-        "remove-column":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M10.1025 0.00488281C10.6067 0.0562145 11 0.482323 11 1V5.50781L9.5 4.00781V1.5H5.5V16.5H9.5V13.9941L11 12.4941V17L10.9951 17.1025C10.9472 17.573 10.573 17.9472 10.1025 17.9951L10 18H5C4.48232 18 4.05621 17.6067 4.00488 17.1025L4 17V1C4 0.447715 4.44772 1.61064e-08 5 0H10L10.1025 0.00488281Z"/><path d="M12.7169 8.99999L15.015 11.2981L13.9543 12.3588L11.6562 10.0607L9.35815 12.3588L8.29749 11.2981L10.5956 8.99999L8.29749 6.7019L9.35815 5.64124L11.6562 7.93933L13.9543 5.64124L15.015 6.7019L12.7169 8.99999Z"/>
-          </svg>`,
+  #clearCellStyles() {
+    this.#editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
+      cell.classList.remove(theme.tableCellFocus);
+    });
 
-        "toggle-column-style":
-          `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 2C1 1.44772 1.44772 1 2 1H7C7.55228 1 8 1.44772 8 2V7C8 7.55228 7.55228 8 7 8H2C1.44772 8 1 7.55228 1 7V2Z"/><path d="M1 11C1 10.4477 1.44772 10 2 10H7C7.55228 10 8 10.4477 8 11V16C8 16.5523 7.55228 17 7 17H2C1.44772 17 1 16.5523 1 16V11Z"/><path d="M11.5 6.5H15.5V2.5H11.5V6.5ZM17 7C17 7.51768 16.6067 7.94379 16.1025 7.99512L16 8H11L10.8975 7.99512C10.427 7.94722 10.0528 7.57297 10.0049 7.10254L10 7V2C10 1.44772 10.4477 1 11 1H16C16.5523 1 17 1.44772 17 2V7Z"/><path d="M11.5 15.5H15.5V11.5H11.5V15.5ZM17 16C17 16.5177 16.6067 16.9438 16.1025 16.9951L16 17H11L10.8975 16.9951C10.427 16.9472 10.0528 16.573 10.0049 16.1025L10 16V11C10 10.4477 10.4477 10 11 10H16C16.5523 10 17 10.4477 17 11V16Z"/>
-          </svg>`,
+    this.#editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
+      cell.classList.remove(theme.tableCellHighlight);
+      cell.removeAttribute("data-action");
+      cell.removeAttribute("data-child-type");
+      cell.removeAttribute("data-direction");
+    });
 
-        "delete-table":
-          `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
-          </svg>`
-      };
+    this.#setTableCellFocus();
+  }
 
-    return icons[name]
+  #icon(command) {
+    const { action, childType } = command;
+    const direction = (action == "insert" ? command.direction : null);
+    const iconId = [ action, childType, direction ].filter(Boolean).join("-");
+    return TableIcons[iconId]
   }
 }
 
-customElements.define("lexxy-table-handler", TableHandler);
+customElements.define("lexxy-table-tools", TableTools);
 
 class BaseSource {
   // Template method to override
@@ -5451,25 +5718,30 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #addTriggerListener() {
-    const unregister = this.#editor.registerUpdateListener(() => {
-      this.#editor.read(() => {
+    const unregister = this.#editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
         const { node, offset } = this.#selection.selectedNodeWithOffset();
         if (!node) return
 
-        if ($isTextNode(node) && offset > 0) {
+        if ($isTextNode(node)) {
           const fullText = node.getTextContent();
-          const charBeforeCursor = fullText[offset - 1];
+          const triggerLength = this.trigger.length;
+
+          // Check if we have enough characters for the trigger
+          if (offset >= triggerLength) {
+            const textBeforeCursor = fullText.slice(offset - triggerLength, offset);
 
-          // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
-          if (charBeforeCursor === this.trigger) {
-            const isAtStart = offset === 1;
+            // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
+            if (textBeforeCursor === this.trigger) {
+              const isAtStart = offset === triggerLength;
 
-            const charBeforeTrigger = offset > 1 ? fullText[offset - 2] : null;
-            const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+              const charBeforeTrigger = offset > triggerLength ? fullText[offset - triggerLength - 1] : null;
+              const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
 
-            if (isAtStart || isPrecededBySpaceOrNewline) {
-              unregister();
-              this.#showPopover();
+              if (isAtStart || isPrecededBySpaceOrNewline) {
+                unregister();
+                this.#showPopover();
+              }
             }
           }
         }
@@ -5489,9 +5761,10 @@ class LexicalPromptElement extends HTMLElement {
           const fullText = node.getTextContent();
           const textBeforeCursor = fullText.slice(0, offset);
           const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+          const triggerEndIndex = lastTriggerIndex + this.trigger.length - 1;
 
-          // If trigger is not found, or cursor is at or before the trigger position, hide popover
-          if (lastTriggerIndex === -1 || offset <= lastTriggerIndex) {
+          // If trigger is not found, or cursor is at or before the trigger end position, hide popover
+          if (lastTriggerIndex === -1 || offset <= triggerEndIndex) {
             this.#hidePopover();
           }
         } else {
@@ -5935,8 +6208,10 @@ class CodeLanguagePicker extends HTMLElement {
     const codeRect = codeElement.getBoundingClientRect();
     const editorRect = this.editorElement.getBoundingClientRect();
     const relativeTop = codeRect.top - editorRect.top;
+    const relativeRight = editorRect.right - codeRect.right;
 
     this.style.top = `${relativeTop}px`;
+    this.style.right = `${relativeRight}px`;
   }
 
   #showLanguagePicker() {