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

package/README.md

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

package/dist/lexxy.esm.js

@@ -1,24 +1,34 @@
-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 { $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 Prism from 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-php';
 import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
+import DOMPurify from 'dompurify';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
+import { $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 { marked } from 'marked';
 
+// Configure Prism for manual highlighting mode
+// This must be set before importing prismjs
+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",
@@ -285,6 +295,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);
@@ -296,6 +307,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();
   }
@@ -467,6 +479,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>
@@ -499,6 +515,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",
@@ -558,7 +578,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) {
@@ -567,6 +587,9 @@ function createElement(name, properties) {
       element.setAttribute(key, value);
     }
   }
+  if (content) {
+    element.innerHTML = content;
+  }
   return element
 }
 
@@ -720,6 +743,10 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return `[${ this.caption || this.fileName }]\n\n`
+  }
+
   isInline() {
     return false
   }
@@ -878,6 +905,11 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return new ActionTextAttachmentUploadNode({ ...serializedNode })
   }
 
+  // Should never run since this is a transient node. Defined to remove console warning.
+  static importDOM() {
+    return null
+  }
+
   constructor({ file, uploadUrl, blobUrlTemplate, editor, progress }, key) {
     super({ contentType: file.type }, key);
     this.file = file;
@@ -1081,6 +1113,10 @@ class HorizontalDividerNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return "┄\n\n"
+  }
+
   isInline() {
     return false
   }
@@ -1117,6 +1153,16 @@ const COMMANDS = [
   "insertCodeBlock",
   "insertHorizontalDivider",
   "uploadAttachments",
+
+  "insertTable",
+  "insertTableRowAbove",
+  "insertTableRowBelow",
+  "insertTableColumnAfter",
+  "insertTableColumnBefore",
+  "deleteTableRow",
+  "deleteTableColumn",
+  "deleteTable",
+
   "undo",
   "redo"
 ];
@@ -1279,6 +1325,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);
   }
@@ -2118,6 +2203,10 @@ class CustomActionTextAttachmentNode extends DecoratorNode {
     return true
   }
 
+  getTextContent() {
+    return this.createDOM().textContent.trim() || `[${this.contentType}]`
+  }
+
   isInline() {
     return true
   }
@@ -3179,7 +3268,7 @@ class Clipboard {
 
     if (!clipboardData) return false
 
-    if (this.#isOnlyPlainTextPasted(clipboardData) && !this.#isPastingIntoCodeBlock()) {
+    if (this.#isPlainTextOrURLPasted(clipboardData) && !this.#isPastingIntoCodeBlock()) {
       this.#pastePlainText(clipboardData);
       event.preventDefault();
       return true
@@ -3188,11 +3277,21 @@ class Clipboard {
     this.#handlePastedFiles(clipboardData);
   }
 
+  #isPlainTextOrURLPasted(clipboardData) {
+    return this.#isOnlyPlainTextPasted(clipboardData) || this.#isOnlyURLPasted(clipboardData)
+  }
+
   #isOnlyPlainTextPasted(clipboardData) {
     const types = Array.from(clipboardData.types);
     return types.length === 1 && types[0] === "text/plain"
   }
 
+  #isOnlyURLPasted(clipboardData) {
+    // Safari URLs are copied as a text/plain + text/uri-list object
+    const types = Array.from(clipboardData.types);
+    return types.length === 2 && types.includes("text/uri-list") && types.includes("text/plain")
+  }
+
   #isPastingIntoCodeBlock() {
     let result = false;
 
@@ -3408,7 +3507,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" ]
@@ -3483,6 +3582,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")
   }
@@ -3526,6 +3637,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>`));
@@ -3548,6 +3669,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#listenForInvalidatedNodes();
     this.#handleEnter();
     this.#handleFocus();
+    this.#handleTables();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#loadInitialValue();
@@ -3584,6 +3706,9 @@ class LexicalEditorElement extends HTMLElement {
       LinkNode,
       AutoLinkNode,
       HorizontalDividerNode,
+      TableNode,
+      TableCellNode,
+      TableRowNode,
 
       CustomActionTextAttachmentNode,
     ];
@@ -3631,7 +3756,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");
@@ -3657,13 +3782,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);
@@ -3681,13 +3811,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() {
@@ -3736,12 +3874,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);
       });
     }));
   }
@@ -3770,11 +3914,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() {
@@ -3801,6 +3941,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);
@@ -4053,6 +4203,494 @@ 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)
+  }
+
+  #registerKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown.bind(this), 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();
+    }
+  }
+
+  #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.#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 = "") {
@@ -4738,24 +5376,17 @@ function highlightAll() {
 
 function highlightElement(preElement) {
   const language = preElement.getAttribute("data-language");
-
   let code = preElement.innerHTML.replace(/<br\s*\/?>/gi, "\n");
 
-  const grammar = Prism.languages[language];
+  const grammar = Prism.languages?.[language];
   if (!grammar) return
 
   // unescape HTML entities in the code block
   code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
-
   const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
   preElement.replaceWith(codeElement);
 }
 
-// Manual highlighting mode to prevent invocation on every page. See https://prismjs.com/docs/prism
-// This must happen before importing any Prism components
-window.Prism = window.Prism || {};
-Prism.manual = true;
-
 export { highlightAll };

package/dist/stylesheets/lexxy-content.css

@@ -195,6 +195,42 @@
   .token.punctuation {
     color: var(--lexxy-color-code-token-punctuation);
   }
+
+  /* Tables */
+  :where(.lexxy-content__table-wrapper) {
+    margin-block: 1ch;
+    overflow-x: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    inline-size: calc(100% - 0.5ch);
+    margin: 0.25ch;
+
+    th,
+    td {
+      border: 1px solid var(--lexxy-color-ink-lighter);
+      padding: 1ch;
+      text-align: start;
+      word-break: normal;
+      
+      *:last-child {
+        margin-block-end: 0;
+      }
+
+      &.lexxy-content__table-cell--header {
+        background-color: var(--lexxy-color-ink-lightest);
+        font-weight: bold;
+      }
+
+      *:is(code, pre) {
+        hyphens: auto;
+        text-wrap: wrap;
+        white-space: pre-wrap;
+      }
+    }
+  }
 }
 
 :where([data-lexical-cursor]) {

package/dist/stylesheets/lexxy-editor.css

@@ -36,6 +36,7 @@
     cursor: pointer;
     font-size: inherit;
     inline-size: auto;
+    padding: 0;
 
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]) {
@@ -52,6 +53,23 @@
     }
   }
 
+  table {
+    .table-cell--selected {
+      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
+    }
+
+    .lexxy-content__table-cell--selected {
+      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
+      border-color: var(--lexxy-color-table-cell-selected-border) !important;
+    }
+  
+    &.lexxy-content__table--selection {
+      ::selection {
+        background: transparent;
+      }
+    }
+  }
+
   action-text-attachment {
     cursor: pointer;
   }
@@ -189,7 +207,7 @@
   user-select: none;
   -webkit-user-select: none;
 
-  .lexxy-editor__toolbar-dropdown-content {
+  :where(.lexxy-editor__toolbar-dropdown-content) {
     --dropdown-padding: 1ch;
     --dropdown-gap: calc(var(--dropdown-padding) / 2);
 
@@ -358,6 +376,212 @@
   }
 }
 
+/* Table dropdown
+/* -------------------------------------------------------------------------- */
+
+:where(lexxy-table-dropdown) {
+  display: flex;
+  flex-direction: column;
+  gap: 1ch;
+  
+  .lexxy-editor__table-create {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0;
+
+    .lexxy-editor__table-buttons {
+      background-color: var(--lexxy-color-ink-lighter);
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 1px;
+
+      div {
+        display: flex;
+        flex-direction: row;
+        gap: 1px;
+      }
+
+      button {
+        aspect-ratio: 1.5 / 1;
+        border: 0;
+        border-radius: 0;
+        color: var(--lexxy-color-ink);
+        font-family: var(--lexxy-font-base);
+        font-size: var(--lexxy-text-small);
+        font-weight: normal;
+        inline-size: 4ch;
+        margin: 0;
+
+        &.active {
+          background-color: var(--lexxy-color-ink-lightest);
+        }
+      }
+    }
+
+    label {
+      align-items: center;
+      display: flex;
+      gap: 0.5ch;
+      padding: 0.5ch 0;
+      margin-block-start: 1ch;
+    }
+
+    &:has(input[type="checkbox"]:checked) {
+      .lexxy-editor__table-buttons {
+        div:first-child button,
+        button:first-child {
+          filter: brightness(0.95);
+        }
+      }
+    }
+  }
+
+  .lexxy-editor__table-edit {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0;
+
+    button {
+
+    }
+  }
+}
+
+/* Table handle buttons
+/* -------------------------------------------------------------------------- */
+
+:where(.lexxy-table-handle-buttons) {
+  --button-size: 2.5lh;
+  color: var(--lexxy-color-ink-inverted);
+  display: none;
+  flex-direction: row;
+  font-size: var(--lexxy-text-small);
+  gap: 0.25ch;
+  line-height: 1;
+  position: absolute;
+  transform: translate(-50%, -120%);
+  z-index: 10;
+
+  .lexxy-table-control {
+    align-items: center;
+    background-color: var(--lexxy-color-ink);
+    border-radius: 0.75ch;
+    display: flex;
+    flex-direction: row;
+    gap: 1ch;
+    padding: 2px;
+    white-space: nowrap;
+
+    button {
+      aspect-ratio: 1 / 1;
+      align-items: center;
+      background-color: transparent;
+      border-radius: var(--lexxy-radius);
+      border: 0;
+      color: var(--lexxy-color-ink-inverted);
+      cursor: pointer;
+      display: flex;
+      font-weight: bold;
+      justify-content: center;
+      line-height: 1;
+      min-block-size: var(--button-size);
+      min-inline-size: var(--button-size);
+      padding: 0;
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--lexxy-color-ink-medium);
+      }
+
+      svg {
+        block-size: 1em;
+        inline-size: 1em;
+        fill: currentColor;
+      }
+
+      span {
+        display: none;
+      }
+    }
+  }
+
+  .lexxy-table-control__more-menu {
+    gap: 0;
+    padding: 2px;
+    position: relative;
+    
+    summary {
+      aspect-ratio: 1 / 1;
+      align-items: center;
+      background: transparent;
+      border-radius: var(--lexxy-radius);
+      border: 0;
+      box-sizing: border-box;
+      display: flex;
+      font-size: inherit;
+      justify-content: center;
+      list-style: none;
+      min-block-size: var(--button-size);
+      min-inline-size: var(--button-size);
+      padding: 0;
+      user-select: none;
+      -webkit-user-select: none;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &:hover {
+        background: var(--lexxy-color-ink-medium);
+      }
+    }
+
+    .lexxy-table-control__more-menu-details {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25ch;
+      inset-block-start: 105%;
+      inset-inline-start: 0;
+      padding: 0;
+      position: absolute;
+
+      .lexxy-table-control__more-menu-section {
+        background: var(--lexxy-color-ink);
+        border-radius: 0.75ch;
+        display: flex;
+        flex-direction: column;
+        padding: 2px;
+      }
+
+      button {
+        aspect-ratio: unset;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        font-weight: normal;
+        gap: 1ch;
+        justify-content: flex-start;
+        padding: 0.5ch 2ch;
+        padding-inline-start: 1ch;
+        white-space: nowrap;
+
+        span {
+          display: inline-block;
+        }
+
+        svg {
+          block-size: 1.3lh;
+          inline-size: 1.3lh;
+          fill: currentColor;
+        }
+      }
+    }
+  }
+}
+
 
 /* Language picker
 /* -------------------------------------------------------------------------- */

package/dist/stylesheets/lexxy-variables.css

@@ -35,6 +35,7 @@
   --lexxy-color-selected-dark: var(--lexxy-color-blue);
   --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
 
+  /* Text color highlights */
   --highlight-1: rgb(136, 118, 38);
   --highlight-2: rgb(185, 94, 6);
   --highlight-3: rgb(207, 0, 0);
@@ -55,6 +56,13 @@
   --highlight-bg-8: rgba(221, 170, 123, 0.3);
   --highlight-bg-9: rgba(200, 200, 200, 0.3);
 
+  /* Tables */
+  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
+  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
+  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
+  --lexxy-color-table-cell-selected-border: highlight;
+  --lexxy-color-table-cell-selected-bg: highlight;
+
   /* Typography */
   --lexxy-font-base: system-ui, sans-serif;
   --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.23-beta",
+  "version": "0.1.25-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -13,6 +13,8 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.15.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "eslint": "^9.15.0",