@37signals/lexxy 0.1.24-beta → 0.1.26-beta

package/dist/lexxy.esm.js

@@ -10,15 +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_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 { $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
@@ -27,7 +29,7 @@ window.Prism = window.Prism || {};
 window.Prism.manual = true;
 
 const ALLOWED_HTML_TAGS = [ "a", "action-text-attachment", "b", "blockquote", "br", "code", "em",
-  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul" ];
+  "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul", "table", "tbody", "tr", "th", "td" ];
 
 const ALLOWED_HTML_ATTRIBUTES = [ "alt", "caption", "class", "content", "content-type", "contenteditable",
   "data-direct-upload-id", "data-sgid", "filename", "filesize", "height", "href", "presentation",
@@ -144,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" ]
 
@@ -155,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) {
@@ -179,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);
   }
@@ -193,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() {
@@ -245,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;
     });
   }
 
@@ -294,6 +425,7 @@ class LexicalToolbarElement extends HTMLElement {
     const isInCode = $isCodeNode(topLevelElement) || selection.hasFormat("code");
     const isInList = this.#isInList(anchorNode);
     const listType = getListType(anchorNode);
+    const isInTable = $getTableCellNodeFromLexicalNode(anchorNode) !== null;
 
     this.#setButtonPressed("bold", isBold);
     this.#setButtonPressed("italic", isItalic);
@@ -305,6 +437,7 @@ class LexicalToolbarElement extends HTMLElement {
     this.#setButtonPressed("code", isInCode);
     this.#setButtonPressed("unordered-list", isInList && listType === "bullet");
     this.#setButtonPressed("ordered-list", isInList && listType === "number");
+    this.#setButtonPressed("table", isInTable);
 
     this.#updateUndoRedoButtonStates();
   }
@@ -355,6 +488,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     const isOverflowing = this.#overflowMenu.children.length > 0;
     this.toggleAttribute("overflowing", isOverflowing);
+    this.#overflowMenu.toggleAttribute("disabled", !isOverflowing);
   }
 
   #compactMenu() {
@@ -406,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)"))
   }
@@ -476,6 +614,10 @@ class LexicalToolbarElement extends HTMLElement {
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 8a2 2 0 110 4 2 2 0 010-4z""/><path d="M22 2a1 1 0 011 1v18a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1h20zM3 18.714L9 11l5.25 6.75L17 15l4 4V4H3v14.714z"/></svg>
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
+        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.2041 2.01074C21.2128 2.113 22 2.96435 22 4V20L21.9893 20.2041C21.8938 21.1457 21.1457 21.8938 20.2041 21.9893L20 22H4C2.96435 22 2.113 21.2128 2.01074 20.2041L2 20V4C2 2.89543 2.89543 2 4 2H20L20.2041 2.01074ZM4 13V20H11V13H4ZM13 13V20H20V13H13ZM4 11H11V4H4V11ZM13 11H20V4H13V11Z"/></svg>
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="divider" data-command="insertHorizontalDivider" title="Insert a divider">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 12C0 11.4477 0.447715 11 1 11H23C23.5523 11 24 11.4477 24 12C24 12.5523 23.5523 13 23 13H1C0.447716 13 0 12.5523 0 12Z"/><path d="M4 5C4 3.89543 4.89543 3 6 3H18C19.1046 3 20 3.89543 20 5C20 6.10457 19.1046 7 18 7H6C4.89543 7 4 6.10457 4 5Z"/><path d="M4 19C4 17.8954 4.89543 17 6 17H18C19.1046 17 20 17.8954 20 19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19Z"/></svg>
       </button>
@@ -508,6 +650,10 @@ var theme = {
     underline: "lexxy-content__underline",
     highlight: "lexxy-content__highlight"
   },
+  tableCellHeader: "lexxy-content__table-cell--header",
+  tableCellSelected: "lexxy-content__table-cell--selected",
+  tableSelection: "lexxy-content__table--selection",
+  tableScrollableWrapper: "lexxy-content__table-wrapper",
   list: {
     nested: {
       listitem: "lexxy-nested-listitem",
@@ -567,7 +713,7 @@ var theme = {
   }
 };
 
-function createElement(name, properties) {
+function createElement(name, properties, content = "") {
   const element = document.createElement(name);
   for (const [ key, value ] of Object.entries(properties || {})) {
     if (key in element) {
@@ -576,6 +722,9 @@ function createElement(name, properties) {
       element.setAttribute(key, value);
     }
   }
+  if (content) {
+    element.innerHTML = content;
+  }
   return element
 }
 
@@ -729,6 +878,10 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return `[${ this.caption || this.fileName }]\n\n`
+  }
+
   isInline() {
     return false
   }
@@ -1095,6 +1248,10 @@ class HorizontalDividerNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return "┄\n\n"
+  }
+
   isInline() {
     return false
   }
@@ -1131,6 +1288,16 @@ const COMMANDS = [
   "insertCodeBlock",
   "insertHorizontalDivider",
   "uploadAttachments",
+
+  "insertTable",
+  "insertTableRowAbove",
+  "insertTableRowBelow",
+  "insertTableColumnAfter",
+  "insertTableColumnBefore",
+  "deleteTableRow",
+  "deleteTableColumn",
+  "deleteTable",
+
   "undo",
   "redo"
 ];
@@ -1293,6 +1460,45 @@ class CommandDispatcher {
     setTimeout(() => input.remove(), 1000);
   }
 
+  dispatchInsertTable() {
+    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);
   }
@@ -1315,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() {
@@ -1365,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(() => {
@@ -1553,6 +1769,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
@@ -2132,6 +2371,10 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return this.createDOM().textContent.trim() || `[${this.contentType}]`
+  }
+
   isInline() {
     return true
   }
@@ -3432,7 +3675,7 @@ function applyLanguage(conversionOutput, element) {
 
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
-  static debug = true
+  static debug = false
   static commands = [ "bold", "italic", "strikethrough" ]
 
   static observedAttributes = [ "connected", "required" ]
@@ -3507,6 +3750,18 @@ class LexicalEditorElement extends HTMLElement {
     return this.dataset.blobUrlTemplate
   }
 
+  get isEmpty() {
+    return [ "<p><br></p>", "<p></p>", "" ].includes(this.value.trim())
+  }
+
+  get isBlank() {
+    return this.isEmpty || this.toString().match(/^\s*$/g) !== null
+  }
+
+  get hasOpenPrompt() {
+    return this.querySelector(".lexxy-prompt-menu.lexxy-prompt-menu--visible") !== null
+  }
+
   get isSingleLineMode() {
     return this.hasAttribute("single-line")
   }
@@ -3550,6 +3805,16 @@ class LexicalEditorElement extends HTMLElement {
     });
   }
 
+  toString() {
+    if (!this.cachedStringValue) {
+      this.editor?.getEditorState().read(() => {
+        this.cachedStringValue = $getRoot().getTextContent();
+      });
+    }
+
+    return this.cachedStringValue
+  }
+
   #parseHtmlIntoLexicalNodes(html) {
     if (!html) html = "<p></p>";
     const nodes = $generateNodesFromDOM(this.editor, parseHtml(`<div>${html}</div>`));
@@ -3572,6 +3837,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#listenForInvalidatedNodes();
     this.#handleEnter();
     this.#handleFocus();
+    this.#handleTables();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#loadInitialValue();
@@ -3608,6 +3874,9 @@ class LexicalEditorElement extends HTMLElement {
       LinkNode,
       AutoLinkNode,
       HorizontalDividerNode,
+      TableNode,
+      TableCellNode,
+      TableRowNode,
 
       CustomActionTextAttachmentNode,
     ];
@@ -3655,7 +3924,7 @@ class LexicalEditorElement extends HTMLElement {
 
     this.internals.setFormValue(html);
     this._internalFormValue = html;
-    this.#validationTextArea.value = this.#isEmpty ? "" : html;
+    this.#validationTextArea.value = this.isEmpty ? "" : html;
 
     if (changed) {
       dispatch(this, "lexxy:change");
@@ -3681,13 +3950,18 @@ class LexicalEditorElement extends HTMLElement {
 
   #synchronizeWithChanges() {
     this.#addUnregisterHandler(this.editor.registerUpdateListener(({ editorState }) => {
-      this.cachedValue = null;
+      this.#clearCachedValues();
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
       this.#setValidity();
     }));
   }
 
+  #clearCachedValues() {
+    this.cachedValue = null;
+    this.cachedStringValue = null;
+  }
+
   #addUnregisterHandler(handler) {
     this.unregisterHandlers = this.unregisterHandlers || [];
     this.unregisterHandlers.push(handler);
@@ -3705,13 +3979,21 @@ class LexicalEditorElement extends HTMLElement {
     this.historyState = createEmptyHistoryState();
     registerHistory(this.editor, this.historyState, 20);
     registerList(this.editor);
+    this.#registerTableComponents();
     this.#registerCodeHiglightingComponents();
     registerMarkdownShortcuts(this.editor, TRANSFORMERS);
   }
 
+  #registerTableComponents() {
+    registerTablePlugin(this.editor);
+    this.tableHandler = createElement("lexxy-table-handler");
+    this.append(this.tableHandler);
+  }
+
   #registerCodeHiglightingComponents() {
     registerCodeHighlighting(this.editor);
-    this.append(createElement("lexxy-code-language-picker"));
+    this.codeLanguagePicker = createElement("lexxy-code-language-picker");
+    this.append(this.codeLanguagePicker);
   }
 
   #listenForInvalidatedNodes() {
@@ -3760,12 +4042,18 @@ class LexicalEditorElement extends HTMLElement {
     this.editor.registerCommand(FOCUS_COMMAND, () => { dispatch(this, "lexxy:focus"); }, COMMAND_PRIORITY_NORMAL);
   }
 
+  #handleTables() {
+    this.removeTableSelectionObserver = registerTableSelectionObserver(this.editor, true);
+    setScrollableTablesActive(this.editor, true);
+  }
+
   #attachDebugHooks() {
     if (!LexicalEditorElement.debug) return
 
     this.#addUnregisterHandler(this.editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
-        console.debug("HTML: ", this.value);
+        console.debug("HTML: ", this.value, "String:", this.toString());
+        console.debug("empty", this.isEmpty, "blank", this.isBlank);
       });
     }));
   }
@@ -3794,11 +4082,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #toggleEmptyStatus() {
-    this.classList.toggle("lexxy-editor--empty", this.#isEmpty);
-  }
-
-  get #isEmpty() {
-    return [ "<p><br></p>", "<p></p>", "" ].includes(this.value.trim())
+    this.classList.toggle("lexxy-editor--empty", this.isEmpty);
   }
 
   #setValidity() {
@@ -3825,6 +4109,16 @@ class LexicalEditorElement extends HTMLElement {
       this.toolbar = null;
     }
 
+    if (this.codeLanguagePicker) {
+      this.codeLanguagePicker.remove();
+      this.codeLanguagePicker = null;
+    }
+
+    if (this.tableHandler) {
+      this.tableHandler.remove();
+      this.tableHandler = null;
+    }
+
     this.selection = null;
 
     document.removeEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
@@ -3845,8 +4139,6 @@ class ToolbarDropdown extends HTMLElement {
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
-
-    this.#setTabIndexValues();
   }
 
   disconnectedCallback() {
@@ -3874,14 +4166,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();
   }
@@ -3911,16 +4203,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 {
@@ -4077,6 +4373,507 @@ class HighlightDropdown extends ToolbarDropdown {
 
 customElements.define("lexxy-highlight-dropdown", HighlightDropdown);
 
+class TableHandler extends HTMLElement {
+  connectedCallback() {
+    this.#setUpButtons();
+    this.#monitorForTableSelection();
+    this.#registerKeyboardShortcuts();
+  }
+
+  disconnectedCallback() {
+    this.#unregisterKeyboardShortcuts();
+  }
+
+  get #editor() {
+    return this.#editorElement.editor
+  }
+
+  get #editorElement() {
+    return this.closest("lexxy-editor")
+  }
+
+  get #currentCell() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return null
+
+    const anchorNode = selection.anchor.getNode();
+    return $getTableCellNodeFromLexicalNode(anchorNode)
+  }
+
+  get #currentRow() {
+    const currentCell = this.#currentCell;
+    if (!currentCell) return 0
+    return $getTableRowIndexFromTableCellNode(currentCell)
+  }
+
+  get #currentColumn() {
+    const currentCell = this.#currentCell;
+    if (!currentCell) return 0
+    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, COMMAND_PRIORITY_HIGH);
+  }
+
+  #unregisterKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts();
+  }
+
+  #handleKeyDown = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
+      const firstButton = this.buttonsContainer?.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
+
+        this.#editor.update(() => {
+          cell.select();
+        });
+      });
+      this.#closeMoreMenu();
+    }
+  }
+
+  #handleTableHandlerKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.#editor.focus();
+    } else {
+      handleRollingTabIndex(this.#tableHandlerButtons, event);
+    }
+  }
+
+  #setUpButtons() {
+    this.buttonsContainer = createElement("div", {
+      className: "lexxy-table-handle-buttons"
+    });
+
+    this.buttonsContainer.appendChild(this.#createRowButtonsContainer());
+    this.buttonsContainer.appendChild(this.#createColumnButtonsContainer());
+
+    this.moreMenu = this.#createMoreMenu();
+    this.buttonsContainer.appendChild(this.moreMenu);
+    this.buttonsContainer.addEventListener("keydown", this.#handleTableHandlerKeydown);
+
+    this.#editorElement.appendChild(this.buttonsContainer);
+  }
+
+  #showTableHandlerButtons() {
+    this.buttonsContainer.style.display = "flex";
+    this.#closeMoreMenu();
+
+    this.#updateRowColumnCount();
+    this.#setTableFocusState(true);
+  }
+
+  #hideTableHandlerButtons() {
+    this.buttonsContainer.style.display = "none";
+    this.#closeMoreMenu();
+
+    this.#setTableFocusState(false);
+    this.currentTableNode = null;
+  }
+
+  #updateButtonsPosition(tableNode) {
+    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.buttonsContainer.style.top = `${relativeTop}px`;
+    this.buttonsContainer.style.left = `${relativeCenter}px`;
+  }
+
+  #updateRowColumnCount() {
+    if (!this.currentTableNode) return
+
+    const tableElement = $getElementForTableNode(this.#editor, this.currentTableNode);
+    if (!tableElement) return
+
+    const rowCount = tableElement.rows;
+    const columnCount = tableElement.columns;
+
+    this.rowCount.textContent = `${rowCount} row${rowCount === 1 ? "" : "s"}`;
+    this.columnCount.textContent = `${columnCount} column${columnCount === 1 ? "" : "s"}`;
+  }
+
+  #createButton(icon, label, onClick) {
+    const button = createElement("button", {
+      className: "lexxy-table-control__button",
+      "aria-label": label,
+      type: "button"
+    });
+    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" });
+
+    const plusButton = this.#createButton("+", "Add row", () => this.#insertTableRow("end"));
+    const minusButton = this.#createButton("−", "Remove row", () => this.#deleteTableRow("end"));
+
+    this.rowCount = createElement("span");
+    this.rowCount.textContent = "_ rows";
+
+    container.appendChild(minusButton);
+    container.appendChild(this.rowCount);
+    container.appendChild(plusButton);
+
+    return container
+  }
+
+  #createColumnButtonsContainer() {
+    const container = createElement("div", { className: "lexxy-table-control" });
+
+    const plusButton = this.#createButton("+", "Add column", () => this.#insertTableColumn("end"));
+    const minusButton = this.#createButton("−", "Remove column", () => this.#deleteTableColumn("end"));
+
+    this.columnCount = createElement("span");
+    this.columnCount.textContent = "_ columns";
+
+    container.appendChild(minusButton);
+    container.appendChild(this.columnCount);
+    container.appendChild(plusButton);
+
+    return container
+  }
+
+  #createMoreMenu() {
+    const container = createElement("details", {
+      className: "lexxy-table-control lexxy-table-control__more-menu"
+    });
+
+    container.tabIndex = -1;
+
+    const summary = createElement("summary", {}, "•••");
+    container.appendChild(summary);
+
+    const details = createElement("div", { className: "lexxy-table-control__more-menu-details" });
+    container.appendChild(details);
+
+    details.appendChild(this.#createRowSection());
+    details.appendChild(this.#createColumnSection());
+    details.appendChild(this.#createDeleteTableSection());
+
+    container.addEventListener("toggle", this.#handleMoreMenuToggle.bind(this));
+
+    return container
+  }
+
+  #createColumnSection() {
+    const columnSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+
+    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 },
+    ];
+
+    columnButtons.forEach(button => {
+      const buttonElement = this.#createButton(button.icon, button.label, button.onClick);
+      columnSection.appendChild(buttonElement);
+    });
+
+    return columnSection
+  }
+
+  #createRowSection() {
+    const rowSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+
+    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 }
+    ];
+
+    rowButtons.forEach(button => {
+      const buttonElement = this.#createButton(button.icon, button.label, button.onClick);
+      rowSection.appendChild(buttonElement);
+    });
+
+    return rowSection
+  }
+
+  #createDeleteTableSection() {
+    const deleteSection = createElement("section", { className: "lexxy-table-control__more-menu-section" });
+
+    const deleteButton = { icon: this.#icon("delete-table"), label: "Delete table", onClick: this.#deleteTable };
+
+    const buttonElement = this.#createButton(deleteButton.icon, deleteButton.label, deleteButton.onClick);
+    deleteSection.appendChild(buttonElement);
+
+    return deleteSection
+  }
+
+  #handleMoreMenuToggle() {
+    if (this.moreMenu.open) {
+      this.#setFocusStateOnSelectedCell();
+    } else {
+      this.#removeFocusStateFromSelectedCell();
+    }
+  }
+
+  #closeMoreMenu() {
+    this.#removeFocusStateFromSelectedCell();
+    this.moreMenu.removeAttribute("open");
+  }
+
+  #monitorForTableSelection() {
+    this.#editor.registerUpdateListener(() => {
+      this.#editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return
+
+        const anchorNode = selection.anchor.getNode();
+        const tableNode = $findTableNode(anchorNode);
+
+        if (tableNode) {
+          this.#tableCellWasSelected(tableNode);
+        } else {
+          this.#hideTableHandlerButtons();
+        }
+      });
+    });
+  }
+
+  #setTableFocusState(focused) {
+    this.#editorElement.querySelector("div.node--selected:has(table)")?.classList.remove("node--selected");
+
+    if (focused && this.currentTableNode) {
+      const tableParent = this.#editor.getElementByKey(this.currentTableNode.getKey());
+      if (!tableParent) return
+      tableParent.classList.add("node--selected");
+    }
+  }
+
+  #tableCellWasSelected(tableNode) {
+    this.currentTableNode = tableNode;
+    this.#updateButtonsPosition(tableNode);
+    this.#showTableHandlerButtons();
+  }
+
+  #setFocusStateOnSelectedCell() {
+    this.#editor.getEditorState().read(() => {
+      const currentCell = this.#currentCell;
+      if (!currentCell) return
+
+      const cellElement = this.#editor.getElementByKey(currentCell.getKey());
+      if (!cellElement) return
+
+      cellElement.classList.add("table-cell--selected");
+    });
+  }
+
+  #removeFocusStateFromSelectedCell() {
+    this.#editorElement.querySelector(".table-cell--selected")?.classList.remove("table-cell--selected");
+  }
+
+  #selectLastTableCell() {
+    if (!this.currentTableNode) return
+
+    const last = this.currentTableNode.getLastChild().getLastChild();
+    if (!$isTableCellNode(last)) return
+
+    last.selectEnd();
+  }
+
+  #deleteTable() {
+    this.#editor.dispatchCommand("deleteTable");
+
+    this.#closeMoreMenu();
+    this.#updateRowColumnCount();
+  }
+
+  #insertTableRow(direction) {
+    this.#executeTableCommand("insert", "row", direction);
+  }
+
+  #insertTableColumn(direction) {
+    this.#executeTableCommand("insert", "column", direction);
+  }
+
+  #deleteTableRow(direction) {
+    this.#executeTableCommand("delete", "row", direction);
+  }
+
+  #deleteTableColumn(direction) {
+    this.#executeTableCommand("delete", "column", direction);
+  }
+
+  #executeTableCommand(action = "insert", childType = "row", direction) {
+    this.#editor.update(() => {
+      const currentCell = this.#currentCell;
+      if (!currentCell) return
+
+      if (direction === "end") {
+        this.#selectLastTableCell();
+      }
+
+      this.#dispatchTableCommand(action, childType, direction);
+
+      if (currentCell.isAttached()) {
+        currentCell.selectEnd();
+      }
+    });
+
+    this.#closeMoreMenu();
+    this.#updateRowColumnCount();
+  }
+
+  #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
+        }
+        break
+      case "delete":
+        switch (childType) {
+          case "row":
+            this.#editor.dispatchCommand("deleteTableRow");
+            break
+          case "column":
+            this.#editor.dispatchCommand("deleteTableColumn");
+            break
+        }
+        break
+    }
+  }
+
+  #toggleRowHeaderStyle() {
+    this.#editor.update(() => {
+      const rows = this.currentTableNode.getChildren();
+
+      const row = rows[this.#currentRow];
+      if (!row) return
+
+      const cells = row.getChildren();
+      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
+      if (!firstCell) return
+
+      const currentStyle = firstCell.getHeaderStyles();
+      const newStyle = currentStyle ^ TableCellHeaderStates.ROW;
+
+      cells.forEach(cell => {
+        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.ROW);
+      });
+    });
+  }
+
+  #toggleColumnHeaderStyle() {
+    this.#editor.update(() => {
+      const rows = this.currentTableNode.getChildren();
+
+      const row = rows[this.#currentRow];
+      if (!row) return
+
+      const cells = row.getChildren();
+      const selectedCell = $getTableCellNodeFromLexicalNode(cells[this.#currentColumn]);
+      if (!selectedCell) return
+
+      const currentStyle = selectedCell.getHeaderStyles();
+      const newStyle = currentStyle ^ TableCellHeaderStates.COLUMN;
+
+      rows.forEach(row => {
+        const cell = row.getChildren()[this.#currentColumn];
+        if (!cell) return
+        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.COLUMN);
+      });
+    });
+  }
+
+  #setHeaderStyle(cell, newStyle, headerState) {
+    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+
+    if (tableCellNode) {
+      tableCellNode.setHeaderStyles(newStyle, headerState);
+    }
+  }
+
+  #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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`,
+
+        "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>`
+      };
+
+    return icons[name]
+  }
+}
+
+customElements.define("lexxy-table-handler", TableHandler);
+
 class BaseSource {
   // Template method to override
   async buildListItems(filter = "") {