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

package/dist/lexxy.esm.js

@@ -10,12 +10,12 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { $isTextNode, TextNode, $isRangeSelection, SKIP_DOM_SELECTION_TAG, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, PASTE_TAG, CLEAR_HISTORY_COMMAND, $addUpdateTag, BLUR_COMMAND, FOCUS_COMMAND, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
-import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
+import { HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getEditor, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $getNodeByKey, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, PASTE_TAG, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_SPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { $isListItemNode, $isListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, RichTextExtension, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
-import { $getTableCellNodeFromLexicalNode, TableNode, INSERT_TABLE_COMMAND, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, TableCellNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $getElementForTableNode, $isTableCellNode, TableCellHeaderStates } from '@lexical/table';
+import { $getTableCellNodeFromLexicalNode, INSERT_TABLE_COMMAND, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { createElement, createAttachmentFigure, isPreviewableImage, dispatchCustomEvent, parseHtml, dispatch, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
 import { buildEditorFromExtensions } from '@lexical/extension';
@@ -146,6 +146,7 @@ function buildConfig() {
   return {
     ALLOWED_TAGS: ALLOWED_HTML_TAGS.concat(Lexxy.global.get("attachmentTagName")),
     ALLOWED_ATTR: ALLOWED_HTML_ATTRIBUTES,
+    ADD_URI_SAFE_ATTR: [ "caption", "filename" ],
     SAFE_FOR_XML: false // So that it does not strip attributes that contains serialized HTML (like content)
   }
 }
@@ -155,6 +156,8 @@ function getNonce() {
   return element?.content
 }
 
+const SILENT_UPDATE_TAGS = [ HISTORY_MERGE_TAG, SKIP_DOM_SELECTION_TAG, SKIP_SCROLL_INTO_VIEW_TAG ];
+
 function getNearestListItemNode(node) {
   let current = node;
   while (current !== null) {
@@ -378,6 +381,8 @@ class LexicalToolbarElement extends HTMLElement {
     super();
     this.internals = this.attachInternals();
     this.internals.role = "toolbar";
+
+    this.#createEditorPromise();
   }
 
   connectedCallback() {
@@ -410,14 +415,26 @@ class LexicalToolbarElement extends HTMLElement {
     this.#refreshToolbarOverflow();
     this.#bindFocusListeners();
 
+    this.resolveEditorPromise(editorElement);
+
     this.toggleAttribute("connected", true);
   }
 
+  async getEditorElement() {
+    return this.editorElement || await this.editorPromise
+  }
+
   #reconnect() {
     this.disconnectedCallback();
     this.connectedCallback();
   }
 
+  #createEditorPromise() {
+    this.editorPromise = new Promise((resolve) => {
+      this.resolveEditorPromise = resolve;
+    });
+  }
+
   #installResizeObserver() {
     this.resizeObserver = new ResizeObserver(() => this.#refreshToolbarOverflow());
     this.resizeObserver.observe(this);
@@ -450,7 +467,7 @@ class LexicalToolbarElement extends HTMLElement {
 
     this.editor.update(() => {
       this.editor.dispatchCommand(command, payload);
-    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined } );
+    }, { tag: isKeyboard ? SKIP_DOM_SELECTION_TAG : undefined });
   }
 
   #bindHotkeys() {
@@ -486,28 +503,24 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindFocusListeners() {
-    this.editorElement.addEventListener("lexxy:focus", this.#handleFocus);
-    this.editorElement.addEventListener("lexxy:blur", this.#handleFocusOut);
-    this.addEventListener("focusout", this.#handleFocusOut);
+    this.editorElement.addEventListener("lexxy:focus", this.#handleEditorFocus);
+    this.editorElement.addEventListener("lexxy:blur", this.#handleEditorBlur);
     this.addEventListener("keydown", this.#handleKeydown);
   }
 
   #unbindFocusListeners() {
-    this.editorElement.removeEventListener("lexxy:focus", this.#handleFocus);
-    this.editorElement.removeEventListener("lexxy:blur", this.#handleFocusOut);
-    this.removeEventListener("focusout", this.#handleFocusOut);
+    this.editorElement.removeEventListener("lexxy:focus", this.#handleEditorFocus);
+    this.editorElement.removeEventListener("lexxy:blur", this.#handleEditorBlur);
     this.removeEventListener("keydown", this.#handleKeydown);
   }
 
-  #handleFocus = () => {
-    this.#resetTabIndexValues();
+  #handleEditorFocus = () => {
     this.#focusableItems[0].tabIndex = 0;
   }
 
-  #handleFocusOut = () => {
-    if (!this.contains(document.activeElement)) {
-      this.#resetTabIndexValues();
-    }
+  #handleEditorBlur = () => {
+    this.#resetTabIndexValues();
+    this.#closeDropdowns();
   }
 
   #handleKeydown = (event) => {
@@ -524,6 +537,7 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
+        this.#closeDropdowns();
       });
     });
   }
@@ -614,11 +628,13 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #toolbarIsOverflowing() {
-    return this.scrollWidth > this.clientWidth
+    // Safari can report inconsistent clientWidth values on more than 100% window zoom level,
+    // that was affecting the toolbar overflow calculation. We're adding +1 to get around this issue.
+    return (this.scrollWidth - this.#overflow.clientWidth) > this.clientWidth + 1
   }
 
   #refreshToolbarOverflow = () => {
-    this.#resetToolbar();
+    this.#resetToolbarOverflow();
     this.#compactMenu();
 
     this.#overflow.style.display = this.#overflowMenu.children.length ? "block" : "none";
@@ -644,7 +660,7 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
-  #resetToolbar() {
+  #resetToolbarOverflow() {
     const items = Array.from(this.#overflowMenu.children);
     items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
 
@@ -666,6 +682,16 @@ class LexicalToolbarElement extends HTMLElement {
     });
   }
 
+  #closeDropdowns() {
+   this.#dropdowns.forEach((details) => {
+     details.open = false;
+   });
+ }
+
+  get #dropdowns() {
+    return this.querySelectorAll("details")
+  }
+
   get #overflow() {
     return this.querySelector(".lexxy-editor__toolbar-overflow")
   }
@@ -707,9 +733,8 @@ class LexicalToolbarElement extends HTMLElement {
           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
         </summary>
         <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-content">
-          <div data-button-group="color"></div>
-          <div data-button-group="background-color"></div>
-          <button data-command="removeHighlight" class="lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
+          <div class="lexxy-highlight-colors"></div>
+          <button data-command="removeHighlight" class="lexxy-editor__toolbar-button lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
         </lexxy-highlight-dropdown>
       </details>
 
@@ -721,8 +746,8 @@ class LexicalToolbarElement extends HTMLElement {
           <form method="dialog">
             <input type="url" placeholder="Enter a URL…" class="input">
             <div class="lexxy-editor__toolbar-dropdown-actions">
-              <button type="submit" class="btn" value="link">Link</button>
-              <button type="button" class="btn" value="unlink">Unlink</button>
+              <button type="submit" class="lexxy-editor__toolbar-button" value="link">Link</button>
+              <button type="button" class="lexxy-editor__toolbar-button" value="unlink">Unlink</button>
             </div>
           </form>
         </lexxy-link-dropdown>
@@ -770,16 +795,14 @@ class LexicalToolbarElement extends HTMLElement {
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.2599 8.26531C15.9672 6.56386 13.1237 5.77629 10.2823 6.05535C7.4408 6.33452 4.80455 7.66079 2.88681 9.77605C1.32245 11.5016 0.326407 13.6516 0.0127834 15.9352C-0.105117 16.7939 0.608975 17.4997 1.47567 17.4997C2.34228 17.4997 3.02969 16.7915 3.19149 15.9401C3.47682 14.4379 4.17156 13.0321 5.212 11.8844C6.60637 10.3464 8.52287 9.38139 10.589 9.17839C12.655 8.97546 14.7227 9.54856 16.3897 10.7858C17.5237 11.6275 18.4165 12.7361 18.9991 13.9997H15.4063C14.578 13.9997 13.9066 14.6714 13.9063 15.4997C13.9063 16.3281 14.5779 16.9997 15.4063 16.9997H22.4063C23.2348 16.9997 23.9063 16.3281 23.9063 15.4997V8.49968C23.9061 7.67144 23.2346 6.99968 22.4063 6.99968C21.578 6.99968 20.9066 7.67144 20.9063 8.49968V11.0212C20.1897 9.9704 19.2984 9.03613 18.2599 8.26531Z"/></svg>
       </button>
 
-      <details class="lexxy-editor__toolbar-overflow">
+      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-overflow" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" aria-label="Show more toolbar buttons">•••</summary>
-        <div class="lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
+        <div class="lexxy-editor__toolbar-dropdown-content lexxy-editor__toolbar-overflow-menu" aria-label="More toolbar buttons"></div>
       </details>
     `
   }
 }
 
-customElements.define("lexxy-toolbar", LexicalToolbarElement);
-
 var theme = {
   text: {
     bold: "lexxy-content__bold",
@@ -792,6 +815,8 @@ var theme = {
   tableCellSelected: "lexxy-content__table-cell--selected",
   tableSelection: "lexxy-content__table--selection",
   tableScrollableWrapper: "lexxy-content__table-wrapper",
+  tableCellHighlight: "lexxy-content__table-cell--highlight",
+  tableCellFocus: "lexxy-content__table-cell--focus",
   list: {
     nested: {
       listitem: "lexxy-nested-listitem",
@@ -943,6 +968,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.fileSize = fileSize;
     this.width = width;
     this.height = height;
+
+    this.editor = $getEditor();
   }
 
   createDOM() {
@@ -963,8 +990,13 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return figure
   }
 
-  updateDOM() {
-    return true
+  updateDOM(_prevNode, dom) {
+    const caption = dom.querySelector("figcaption textarea");
+    if (caption && this.caption) {
+      caption.value = this.caption;
+    }
+
+    return false
   }
 
   getTextContent() {
@@ -1072,8 +1104,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
     });
 
     input.addEventListener("focusin", () => input.placeholder = "Add caption...");
-    input.addEventListener("blur", this.#handleCaptionInputBlurred.bind(this));
-    input.addEventListener("keydown", this.#handleCaptionInputKeydown.bind(this));
+    input.addEventListener("blur", (event) => this.#handleCaptionInputBlurred(event));
+    input.addEventListener("keydown", (event) => this.#handleCaptionInputKeydown(event));
 
     caption.appendChild(input);
 
@@ -1081,21 +1113,24 @@ class ActionTextAttachmentNode extends DecoratorNode {
   }
 
   #handleCaptionInputBlurred(event) {
-    const input = event.target;
-
-    input.placeholder = this.fileName;
-    this.#updateCaptionValueFromInput(input);
+    this.#updateCaptionValueFromInput(event.target);
   }
 
   #updateCaptionValueFromInput(input) {
-    dispatchCustomEvent(input, "lexxy:internal:invalidate-node", { key: this.getKey(), values: { caption: input.value } });
+    input.placeholder = this.fileName;
+    this.editor.update(() => {
+      this.getWritable().caption = input.value;
+    });
   }
 
   #handleCaptionInputKeydown(event) {
     if (event.key === "Enter") {
       this.#updateCaptionValueFromInput(event.target);
-      dispatchCustomEvent(event.target, "lexxy:internal:move-to-next-line");
       event.preventDefault();
+
+      this.editor.update(() => {
+        this.selectNext();
+      }, { tag: HISTORY_MERGE_TAG });
     }
     event.stopPropagation();
   }
@@ -1136,56 +1171,83 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   }
 
   constructor(node, key) {
-    const { file, uploadUrl, blobUrlTemplate, editor, progress } = node;
+    const { file, uploadUrl, blobUrlTemplate, progress, width, height, uploadError } = node;
     super({ ...node, contentType: file.type }, key);
     this.file = file;
     this.uploadUrl = uploadUrl;
     this.blobUrlTemplate = blobUrlTemplate;
-    this.src = null;
-    this.editor = editor;
-    this.progress = progress || 0;
+    this.progress = progress ?? null;
+    this.width = width;
+    this.height = height;
+    this.uploadError = uploadError;
   }
 
   createDOM() {
+    if (this.uploadError) return this.#createDOMForError()
+
+    // This side-effect is trigged on DOM load to fire only once and avoid multiple
+    // uploads through cloning. The upload is guarded from restarting in case the
+    // node is reloaded from saved state such as from history.
+    this.#startUploadIfNeeded();
+
     const figure = this.createAttachmentFigure();
 
     if (this.isPreviewableAttachment) {
-      figure.appendChild(this.#createDOMForImage());
+      const img = figure.appendChild(this.#createDOMForImage());
+
+      // load file locally to set dimensions and prevent vertical shifting
+      loadFileIntoImage(this.file, img).then(img => this.#setDimensionsFromImage(img));
     } else {
       figure.appendChild(this.#createDOMForFile());
     }
 
     figure.appendChild(this.#createCaption());
+    figure.appendChild(this.#createProgressBar());
+
+    return figure
+  }
 
-    const progressBar = createElement("progress", { value: this.progress, max: 100 });
-    figure.appendChild(progressBar);
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
 
-    // We wait for images to download so that we can pass the dimensions down to the attachment. We do this
-    // so that we can render images in edit mode with the dimensions set, which prevent vertical layout shifts.
-    this.#loadFigure(figure).then(() => this.#startUpload(progressBar, figure));
+    if (prevNode.progress !== this.progress) {
+      const progress = dom.querySelector("progress");
+      progress.value = this.progress ?? 0;
+    }
 
-    return figure
+    return false
   }
 
   exportDOM() {
     const img = document.createElement("img");
-    if (this.src) {
-      img.src = this.src;
-    }
     return { element: img }
   }
 
   exportJSON() {
     return {
+      ...super.exportJSON(),
       type: "action_text_attachment_upload",
       version: 1,
-      progress: this.progress,
       uploadUrl: this.uploadUrl,
       blobUrlTemplate: this.blobUrlTemplate,
-      ...super.exportJSON()
+      progress: this.progress,
+      width: this.width,
+      height: this.height,
+      uploadError: this.uploadError
     }
   }
 
+  get #uploadStarted() {
+    return this.progress !== null
+  }
+
+  #createDOMForError() {
+    const figure = this.createAttachmentFigure();
+    figure.classList.add("attachment--error");
+    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.file?.name ?? "file"}` }));
+    return figure
+  }
+
   #createDOMForImage() {
     return createElement("img")
   }
@@ -1211,94 +1273,126 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return figcaption
   }
 
-  #loadFigure(figure) {
-    const image = figure.querySelector("img");
-    if (!image) {
-      return Promise.resolve()
-    } else {
-      return loadFileIntoImage(this.file, image)
-    }
+  #createProgressBar() {
+    return createElement("progress", { value: this.progress ?? 0, max: 100 })
+  }
+
+  #setDimensionsFromImage({ width, height }) {
+    if (this.#hasDimensions) return
+
+    this.editor.update(() => {
+      const writable = this.getWritable();
+      writable.width = width;
+      writable.height = height;
+    }, { tag: SILENT_UPDATE_TAGS });
+  }
+
+  get #hasDimensions() {
+    return Boolean(this.width && this.height)
   }
 
-  async #startUpload(progressBar, figure) {
+  async #startUploadIfNeeded() {
+    if (this.#uploadStarted) return
+
+    this.#setUploadStarted();
+
     const { DirectUpload } = await import('@rails/activestorage');
-    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
 
     const upload = new DirectUpload(this.file, this.uploadUrl, this);
+    upload.delegate = this.#createUploadDelegate();
+    upload.create((error, blob) => {
+      if (error) {
+        this.#handleUploadError(error);
+      } else {
+        this.#showUploadedAttachment(blob);
+      }
+    });
+  }
+
+  #createUploadDelegate() {
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
 
-    upload.delegate = {
+    return {
       directUploadWillCreateBlobWithXHR: (request) => {
         if (shouldAuthenticateUploads) request.withCredentials = true;
       },
       directUploadWillStoreFileWithXHR: (request) => {
         if (shouldAuthenticateUploads) request.withCredentials = true;
 
-        request.upload.addEventListener("progress", (event) => {
-          this.editor.update(() => {
-            progressBar.value = Math.round(event.loaded / event.total * 100);
-          });
-        });
+        const uploadProgressHandler = (event) => this.#handleUploadProgress(event);
+        request.upload.addEventListener("progress", uploadProgressHandler);
       }
-    };
+    }
+  }
 
-    upload.create((error, blob) => {
-      if (error) {
-        this.#handleUploadError(figure);
-      } else {
-        this.#loadFigurePreviewFromBlob(blob, figure).then(() => {
-          this.#showUploadedAttachment(figure, blob);
-        });
-      }
-    });
+  #setUploadStarted() {
+    this.#setProgress(1);
   }
 
-  #handleUploadError(figure) {
-    figure.innerHTML = "";
-    figure.classList.add("attachment--error");
-    figure.appendChild(createElement("div", { innerText: `Error uploading ${this.file?.name ?? "image"}` }));
+  #handleUploadProgress(event) {
+    this.#setProgress(Math.round(event.loaded / event.total * 100));
   }
 
-  async #showUploadedAttachment(figure, blob) {
+  #setProgress(progress) {
     this.editor.update(() => {
-      const image = figure.querySelector("img");
-
-      const src = this.blobUrlTemplate
-        .replace(":signed_id", blob.signed_id)
-        .replace(":filename", encodeURIComponent(blob.filename));
-      const latest = $getNodeByKey(this.getKey());
-      if (latest) {
-        latest.replace(new ActionTextAttachmentNode({
-          tagName: this.tagName,
-          sgid: blob.attachable_sgid,
-          src: blob.previewable ? blob.url : src,
-          altText: blob.filename,
-          contentType: blob.content_type,
-          fileName: blob.filename,
-          fileSize: blob.byte_size,
-          width: image?.naturalWidth,
-          previewable: blob.previewable,
-          height: image?.naturalHeight
-        }));
-      }
-    }, { tag: HISTORY_MERGE_TAG });
+      this.getWritable().progress = progress;
+    }, { tag: SILENT_UPDATE_TAGS });
   }
 
-  async #loadFigurePreviewFromBlob(blob, figure) {
-    if (blob.previewable) {
-      return new Promise((resolve) => {
-        this.editor.update(() => {
-          const image = this.#createDOMForImage();
-          image.addEventListener("load", () => {
-            resolve();
-          });
-          image.src = blob.url;
-          figure.insertBefore(image, figure.firstChild);
-        });
-      })
-    } else {
-      return Promise.resolve()
+  #handleUploadError(error) {
+    console.warn(`Upload error for ${this.file?.name ?? "file"}: ${error}`);
+    this.editor.update(() => {
+      this.getWritable().uploadError = true;
+    }, { tag: SILENT_UPDATE_TAGS });
+  }
+
+  async #showUploadedAttachment(blob) {
+    this.editor.update(() => {
+      this.replace(this.#toActionTextAttachmentNodeWith(blob));
+    }, { tag: SILENT_UPDATE_TAGS });
+  }
+
+  #toActionTextAttachmentNodeWith(blob) {
+    const conversion = new AttachmentNodeConversion(this, blob);
+    return conversion.toAttachmentNode()
+  }
+}
+
+class AttachmentNodeConversion {
+  constructor(uploadNode, blob) {
+    this.uploadNode = uploadNode;
+    this.blob = blob;
+  }
+
+  toAttachmentNode() {
+    return new ActionTextAttachmentNode({
+      ...this.uploadNode,
+      ...this.#propertiesFromBlob,
+      src: this.#src
+    })
+  }
+
+  get #propertiesFromBlob() {
+    const { blob } = this;
+    return {
+      sgid: blob.attachable_sgid,
+      altText: blob.filename,
+      contentType: blob.content_type,
+      fileName: blob.filename,
+      fileSize: blob.byte_size,
+      previewable: blob.previewable,
     }
   }
+
+  get #src() {
+    return this.blob.previewable ? this.blob.url : this.#blobSrc
+  }
+
+  get #blobSrc() {
+    return this.uploadNode.blobUrlTemplate
+      .replace(":signed_id", this.blob.signed_id)
+      .replace(":filename", encodeURIComponent(this.blob.filename))
+  }
 }
 
 class HorizontalDividerNode extends DecoratorNode {
@@ -1373,30 +1467,6 @@ class HorizontalDividerNode extends DecoratorNode {
   }
 }
 
-class WrappedTableNode extends TableNode {
-  static clone(node) {
-    return new WrappedTableNode(node.__key)
-  }
-
-  exportDOM(editor) {
-    const superExport = super.exportDOM(editor);
-
-    return {
-      ...superExport,
-      after: (tableElement) => {
-        if (superExport.after) {
-          tableElement = superExport.after(tableElement);
-          const clonedTable = tableElement.cloneNode(true);
-          const wrappedTable = createElement("figure", { className: "lexxy-content__table-wrapper" }, clonedTable.outerHTML);
-          return wrappedTable
-        }
-
-        return tableElement
-      }
-    }
-  }
-}
-
 const COMMANDS = [
   "bold",
   "italic",
@@ -1414,13 +1484,6 @@ const COMMANDS = [
   "uploadAttachments",
 
   "insertTable",
-  "insertTableRowAbove",
-  "insertTableRowBelow",
-  "insertTableColumnAfter",
-  "insertTableColumnBefore",
-  "deleteTableRow",
-  "deleteTableColumn",
-  "deleteTable",
 
   "undo",
   "redo"
@@ -1529,9 +1592,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertHorizontalDivider() {
-    this.editor.update(() => {
-      this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    });
+    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
 
     this.editor.focus();
   }
@@ -1593,41 +1654,6 @@ class CommandDispatcher {
     this.editor.dispatchCommand(INSERT_TABLE_COMMAND, { "rows": 3, "columns": 3, "includeHeaders": true });
   }
 
-  dispatchInsertTableRowBelow() {
-    $insertTableRowAtSelection(true);
-  }
-
-  dispatchInsertTableRowAbove() {
-    $insertTableRowAtSelection(false);
-  }
-
-  dispatchInsertTableColumnAfter() {
-    $insertTableColumnAtSelection(true);
-  }
-
-  dispatchInsertTableColumnBefore() {
-    $insertTableColumnAtSelection(false);
-  }
-
-  dispatchDeleteTableRow() {
-    $deleteTableRowAtSelection();
-  }
-
-  dispatchDeleteTableColumn() {
-    $deleteTableColumnAtSelection();
-  }
-
-  dispatchDeleteTable() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!$isRangeSelection(selection)) return
-
-      const anchorNode = selection.anchor.getNode();
-      const tableNode = $findTableNode(anchorNode);
-      tableNode.remove();
-    });
-  }
-
   dispatchUndo() {
     this.editor.dispatchCommand(UNDO_COMMAND, undefined);
   }
@@ -1921,6 +1947,14 @@ class Selection {
     return $getNearestNodeOfType(anchorNode, CodeNode) !== null
   }
 
+  get isTableCellSelected() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false
+
+    const anchorNode = selection.anchor.getNode();
+    return $getNearestNodeOfType(anchorNode, TableCellNode) !== null
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -2433,17 +2467,6 @@ function sanitize(html) {
   return DOMPurify.sanitize(html, buildConfig())
 }
 
-// Prevent the hardcoded background color
-// A background color value is set by Lexical if background is null:
-// https://github.com/facebook/lexical/blob/5bbbe849bd229e1db0e7b536e6a919520ada7bb2/packages/lexical-table/src/LexicalTableCellNode.ts#L187
-function registerHeaderBackgroundTransform(editor) {
-  return editor.registerNodeTransform(TableCellNode, (node) => {
-    if (node.getBackgroundColor() === null) {
-      node.setBackgroundColor("");
-    }
-  })
-}
-
 function dasherize(value) {
   return value.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`)
 }
@@ -2467,6 +2490,10 @@ function filterMatches(text, potentialMatch) {
   return normalizeFilteredText(text).includes(normalizeFilteredText(potentialMatch))
 }
 
+function upcaseFirst(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 class EditorConfiguration {
   #editorElement
   #config
@@ -2908,15 +2935,14 @@ class Contents {
     new FormatEscaper(editorElement).monitor();
   }
 
-  insertHtml(html) {
+  insertHtml(html, { tag } = {}) {
     this.editor.update(() => {
       const selection = $getSelection();
-
       if (!$isRangeSelection(selection)) return
 
       const nodes = $generateNodesFromDOM(this.editor, parseHtml(html));
       selection.insertNodes(nodes);
-    });
+    }, { tag });
   }
 
   insertAtCursor(node) {
@@ -3156,7 +3182,7 @@ class Contents {
     const blobUrlTemplate = this.editorElement.blobUrlTemplate;
 
     this.editor.update(() => {
-      const uploadedImageNode = new ActionTextAttachmentUploadNode({ file: file, uploadUrl: uploadUrl, blobUrlTemplate: blobUrlTemplate, editor: this.editor });
+      const uploadedImageNode = new ActionTextAttachmentUploadNode({ file: file, uploadUrl: uploadUrl, blobUrlTemplate: blobUrlTemplate });
       this.insertAtCursor(uploadedImageNode);
     }, { tag: HISTORY_MERGE_TAG });
   }
@@ -3719,14 +3745,14 @@ class Clipboard {
 
   #pasteMarkdown(text) {
     const html = marked(text);
-    this.contents.insertHtml(html);
+    this.contents.insertHtml(html, { tag: [ PASTE_TAG ] });
   }
 
   #pasteRichText(clipboardData) {
     this.editor.update(() => {
       const selection = $getSelection();
       $insertDataTransferForRichText(clipboardData, selection, this.editor);
-    });
+    }, { tag: PASTE_TAG });
   }
 
   #handlePastedFiles(clipboardData) {
@@ -3773,7 +3799,7 @@ class Extensions {
 
   initializeToolbars() {
     if (this.#lexxyToolbar) {
-      this.enabledExtensions.forEach(ext => ext.initializeToobar(this.#lexxyToolbar));
+      this.enabledExtensions.forEach(ext => ext.initializeToolbar(this.#lexxyToolbar));
     }
   }
 
@@ -3960,6 +3986,124 @@ function $applyLanguage(conversionOutput, element) {
   conversionOutput.node.setLanguage(language);
 }
 
+class WrappedTableNode extends TableNode {
+  static clone(node) {
+    return new WrappedTableNode(node.__key)
+  }
+
+  exportDOM(editor) {
+    const superExport = super.exportDOM(editor);
+
+    return {
+      ...superExport,
+      after: (tableElement) => {
+        if (superExport.after) {
+          tableElement = superExport.after(tableElement);
+          const clonedTable = tableElement.cloneNode(true);
+          const wrappedTable = createElement("figure", { className: "lexxy-content__table-wrapper" }, clonedTable.outerHTML);
+          return wrappedTable
+        }
+
+        return tableElement
+      }
+    }
+  }
+}
+
+const TablesLexicalExtension = defineExtension({
+  name: "lexxy/tables",
+  nodes: [
+    WrappedTableNode,
+    {
+      replace: TableNode,
+      with: () => new WrappedTableNode()
+    },
+    TableCellNode,
+    TableRowNode
+  ],
+  register(editor) {
+    // Register Lexical table plugins
+    registerTablePlugin(editor);
+    registerTableSelectionObserver(editor, true);
+    setScrollableTablesActive(editor, true);
+
+    // Bug fix: Prevent hardcoded background color (Lexical #8089)
+    editor.registerNodeTransform(TableCellNode, (node) => {
+      if (node.getBackgroundColor() === null) {
+        node.setBackgroundColor("");
+      }
+    });
+
+    // Bug fix: Fix column header states (Lexical #8090)
+    editor.registerNodeTransform(TableCellNode, (node) => {
+      const headerState = node.getHeaderStyles();
+
+      if (headerState !== TableCellHeaderStates.ROW) return
+
+      const rowParent = node.getParent();
+      const tableNode = rowParent?.getParent();
+      if (!tableNode) return
+
+      const rows = tableNode.getChildren();
+      const cellIndex = rowParent.getChildren().indexOf(node);
+
+      const cellsInRow = rowParent.getChildren();
+      const isHeaderRow = cellsInRow.every(cell =>
+        cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+      );
+
+      const isHeaderColumn = rows.every(row => {
+        const cell = row.getChildren()[cellIndex];
+        return cell && cell.getHeaderStyles() !== TableCellHeaderStates.NO_STATUS
+      });
+
+      let newHeaderState = TableCellHeaderStates.NO_STATUS;
+
+      if (isHeaderRow) {
+        newHeaderState |= TableCellHeaderStates.ROW;
+      }
+
+      if (isHeaderColumn) {
+        newHeaderState |= TableCellHeaderStates.COLUMN;
+      }
+
+      if (newHeaderState !== headerState) {
+        node.setHeaderStyles(newHeaderState, TableCellHeaderStates.BOTH);
+      }
+    });
+
+    editor.registerCommand("insertTableRowAfter", () => {
+      $insertTableRowAtSelection(true);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableRowBefore", () => {
+      $insertTableRowAtSelection(false);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableColumnAfter", () => {
+      $insertTableColumnAtSelection(true);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("insertTableColumnBefore", () => {
+      $insertTableColumnAtSelection(false);
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTableRow", () => {
+      $deleteTableRowAtSelection();
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTableColumn", () => {
+      $deleteTableColumnAtSelection();
+    }, COMMAND_PRIORITY_NORMAL);
+
+    editor.registerCommand("deleteTable", () => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection)) return false
+      $findTableNode(selection.anchor.getNode())?.remove();
+    }, COMMAND_PRIORITY_NORMAL);
+  }
+});
+
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = false
@@ -4149,10 +4293,8 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#synchronizeWithChanges();
     this.#registerComponents();
-    this.#listenForInvalidatedNodes();
     this.#handleEnter();
-    this.#handleFocus();
-    this.#handleTables();
+    this.#registerFocusEvents();
     this.#attachDebugHooks();
     this.#attachToolbar();
     this.#loadInitialValue();
@@ -4163,11 +4305,11 @@ class LexicalEditorElement extends HTMLElement {
     this.editorContentElement ||= this.#createEditorContentElement();
 
     const editor = buildEditorFromExtensions({
-        name: "lexxy/core",
-        namespace: "Lexxy",
-        theme: theme,
-        nodes: this.#lexicalNodes
-      },
+      name: "lexxy/core",
+      namespace: "Lexxy",
+      theme: theme,
+      nodes: this.#lexicalNodes
+    },
       ...this.#lexicalExtensions
     );
 
@@ -4177,10 +4319,11 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   get #lexicalExtensions() {
-    const extensions = [ ];
+    const extensions = [];
     const richTextExtensions = [
       this.highlighter.lexicalExtension,
-      TrixContentExtension
+      TrixContentExtension,
+      TablesLexicalExtension
     ];
 
     if (this.supportsRichText) {
@@ -4205,14 +4348,7 @@ class LexicalEditorElement extends HTMLElement {
         CodeHighlightNode,
         LinkNode,
         AutoLinkNode,
-        HorizontalDividerNode,
-        WrappedTableNode,
-        {
-          replace: TableNode,
-          with: () => { return new WrappedTableNode() }
-        },
-        TableCellNode,
-        TableRowNode,
+        HorizontalDividerNode
       );
     }
 
@@ -4326,11 +4462,8 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #registerTableComponents() {
-    registerTablePlugin(this.editor);
-    this.tableHandler = createElement("lexxy-table-handler");
-    this.append(this.tableHandler);
-
-    this.#addUnregisterHandler(registerHeaderBackgroundTransform(this.editor));
+    this.tableTools = createElement("lexxy-table-tools");
+    this.append(this.tableTools);
   }
 
   #registerCodeHiglightingComponents() {
@@ -4339,21 +4472,6 @@ class LexicalEditorElement extends HTMLElement {
     this.append(this.codeLanguagePicker);
   }
 
-  #listenForInvalidatedNodes() {
-    this.editor.getRootElement().addEventListener("lexxy:internal:invalidate-node", (event) => {
-      const { key, values } = event.detail;
-
-      this.editor.update(() => {
-        const node = $getNodeByKey(key);
-
-        if (node instanceof ActionTextAttachmentNode) {
-          const updatedNode = node.getWritable();
-          Object.assign(updatedNode, values);
-        }
-      });
-    });
-  }
-
   #handleEnter() {
     // We can't prevent these externally using regular keydown because Lexical handles it first.
     this.editor.registerCommand(
@@ -4377,12 +4495,27 @@ class LexicalEditorElement extends HTMLElement {
     );
   }
 
-  #handleFocus() {
-    // Lexxy handles focus and blur as commands
-    // see https://github.com/facebook/lexical/blob/d1a8e84fe9063a4f817655b346b6ff373aa107f0/packages/lexical/src/LexicalEvents.ts#L35
-    // and https://stackoverflow.com/a/72212077
-    this.editor.registerCommand(BLUR_COMMAND, () => { dispatch(this, "lexxy:blur"); }, COMMAND_PRIORITY_NORMAL);
-    this.editor.registerCommand(FOCUS_COMMAND, () => { dispatch(this, "lexxy:focus"); }, COMMAND_PRIORITY_NORMAL);
+  #registerFocusEvents() {
+    this.addEventListener("focusin", this.#handleFocusIn);
+    this.addEventListener("focusout", this.#handleFocusOut);
+  }
+
+  #handleFocusIn(event) {
+    if (this.#elementInEditorOrToolbar(event.target) && !this.currentlyFocused) {
+      dispatch(this, "lexxy:focus");
+      this.currentlyFocused = true;
+    }
+  }
+
+  #handleFocusOut(event) {
+    if (!this.#elementInEditorOrToolbar(event.relatedTarget)) {
+      dispatch(this, "lexxy:blur");
+      this.currentlyFocused = false;
+    }
+  }
+
+  #elementInEditorOrToolbar(element) {
+    return this.contains(element) || this.toolbarElement?.contains(element)
   }
 
   #onFocus() {
@@ -4399,22 +4532,9 @@ class LexicalEditorElement extends HTMLElement {
     }
   }
 
-  #handleTables() {
-    if (this.supportsRichText) {
-      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, "String:", this.toString());
-        console.debug("empty", this.isEmpty, "blank", this.isBlank);
-      });
-    }));
+    return
   }
 
   #attachToolbar() {
@@ -4494,18 +4614,17 @@ class LexicalEditorElement extends HTMLElement {
   }
 }
 
-customElements.define("lexxy-editor", LexicalEditorElement);
-
 class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
     this.container = this.closest("details");
 
     this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
+
+    this.#onToolbarEditor(this.initialize.bind(this));
   }
 
   disconnectedCallback() {
-    this.#removeClickOutsideHandler();
     this.container.removeEventListener("keydown", this.#handleKeyDown.bind(this));
   }
 
@@ -4521,48 +4640,31 @@ class ToolbarDropdown extends HTMLElement {
     return this.toolbar.editor
   }
 
+  initialize() {
+    // Any post-editor initialization
+  }
+
   close() {
-    this.container.removeAttribute("open");
+    this.editor.focus();
+    this.container.open = false;
   }
 
-  #handleToggle(event) {
-    if (this.container.open) {
-      this.#handleOpen(event.target);
-    } else {
-      this.#handleClose();
+  async #onToolbarEditor(callback) {
+    await this.toolbar.editorConnected;
+    callback();
+  }
+
+  #handleToggle() {
+    if (this.container.open) {
+      this.#handleOpen();
     }
   }
 
-  #handleOpen() {
+  async #handleOpen() {
     this.#interactiveElements[0].focus();
-    this.#setupClickOutsideHandler();
-
     this.#resetTabIndexValues();
   }
 
-  #handleClose() {
-    this.#removeClickOutsideHandler();
-    this.editor.focus();
-  }
-
-  #setupClickOutsideHandler() {
-    if (this.clickOutsideHandler) return
-
-    this.clickOutsideHandler = this.#handleClickOutside.bind(this);
-    document.addEventListener("click", this.clickOutsideHandler, true);
-  }
-
-  #removeClickOutsideHandler() {
-    if (!this.clickOutsideHandler) return
-
-    document.removeEventListener("click", this.clickOutsideHandler, true);
-    this.clickOutsideHandler = null;
-  }
-
-  #handleClickOutside({ target }) {
-    if (this.container.open && !this.container.contains(target)) this.close();
-  }
-
   #handleKeyDown(event) {
     if (event.key === "Escape") {
       event.stopPropagation();
@@ -4637,8 +4739,6 @@ class LinkDropdown extends ToolbarDropdown {
   }
 }
 
-customElements.define("lexxy-link-dropdown", LinkDropdown);
-
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
@@ -4648,19 +4748,14 @@ const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 const NO_STYLE = Symbol("no_style");
 
 class HighlightDropdown extends ToolbarDropdown {
-  #initialized = false
-
   connectedCallback() {
     super.connectedCallback();
     this.#registerToggleHandler();
   }
 
-  #ensureInitialized() {
-    if (this.#initialized) return
-
+  initialize() {
     this.#setUpButtons();
     this.#registerButtonHandlers();
-    this.#initialized = true;
   }
 
   #registerToggleHandler() {
@@ -4673,16 +4768,18 @@ class HighlightDropdown extends ToolbarDropdown {
   }
 
   #setUpButtons() {
-    this.#buttonGroups.forEach(buttonGroup => {
-      this.#populateButtonGroup(buttonGroup);
-    });
+    const colorGroups = this.editorElement.config.get("highlight.buttons");
+
+    this.#populateButtonGroup("color", colorGroups.color);
+    this.#populateButtonGroup("background-color", colorGroups["background-color"]);
+
+    const maxNumberOfColors = Math.max(colorGroups.color.length, colorGroups["background-color"].length);
+    this.style.setProperty("--max-colors", maxNumberOfColors);
   }
 
-  #populateButtonGroup(buttonGroup) {
-    const attribute = buttonGroup.dataset.buttonGroup;
-    const values = this.editorElement.config.get(`highlight.buttons.${attribute}`) || [];
+  #populateButtonGroup(attribute, values) {
     values.forEach((value, index) => {
-      buttonGroup.appendChild(this.#createButton(attribute, value, index));
+      this.#buttonContainer.appendChild(this.#createButton(attribute, value, index));
     });
   }
 
@@ -4691,15 +4788,13 @@ class HighlightDropdown extends ToolbarDropdown {
     button.dataset.style = attribute;
     button.style.setProperty(attribute, value);
     button.dataset.value = value;
-    button.classList.add("lexxy-highlight-button");
+    button.classList.add("lexxy-editor__toolbar-button", "lexxy-highlight-button");
     button.name = attribute + "-" + index;
     return button
   }
 
   #handleToggle({ newState }) {
     if (newState === "open") {
-      this.#ensureInitialized();
-
       this.editor.getEditorState().read(() => {
         this.#updateColorButtonStates($getSelection());
       });
@@ -4742,8 +4837,8 @@ class HighlightDropdown extends ToolbarDropdown {
     this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
-  get #buttonGroups() {
-    return this.querySelectorAll("[data-button-group]")
+  get #buttonContainer() {
+    return this.querySelector(".lexxy-highlight-colors")
   }
 
   get #colorButtons() {
@@ -4751,1204 +4846,1433 @@ 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
+class BaseSource {
+  // Template method to override
+  async buildListItems(filter = "") {
+    return Promise.resolve([])
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  // Template method to override
+  promptItemFor(listItem) {
+    return null
   }
 
-  get #currentCell() {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return null
+  // Protected
 
-    const anchorNode = selection.anchor.getNode();
-    return $getTableCellNodeFromLexicalNode(anchorNode)
+  buildListItemElementFor(promptItemElement) {
+    const template = promptItemElement.querySelector("template[type='menu']");
+    const fragment = template.content.cloneNode(true);
+    const listItemElement = createElement("li", { role: "option", id: generateDomId("prompt-item"), tabindex: "0" });
+    listItemElement.classList.add("lexxy-prompt-menu__item");
+    listItemElement.appendChild(fragment);
+    return listItemElement
   }
 
-  get #currentRow() {
-    const currentCell = this.#currentCell;
-    if (!currentCell) return 0
-    return $getTableRowIndexFromTableCellNode(currentCell)
+  async loadPromptItemsFromUrl(url) {
+    try {
+      const response = await fetch(url);
+      const html = await response.text();
+      const promptItems = parseHtml(html).querySelectorAll("lexxy-prompt-item");
+      return Promise.resolve(Array.from(promptItems))
+    } catch (error) {
+      return Promise.reject(error)
+    }
   }
+}
 
-  get #currentColumn() {
-    const currentCell = this.#currentCell;
-    if (!currentCell) return 0
-    return $getTableColumnIndexFromTableCellNode(currentCell)
+class LocalFilterSource extends BaseSource {
+  async buildListItems(filter = "") {
+    const promptItems = await this.fetchPromptItems();
+    return this.#buildListItemsFromPromptItems(promptItems, filter)
   }
 
-  get #tableHandlerButtons() {
-    return Array.from(this.querySelectorAll("button, details > summary"))
+  // Template method to override
+  async fetchPromptItems(filter) {
+    return Promise.resolve([])
   }
 
-  #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleKeyDown, COMMAND_PRIORITY_HIGH);
+  promptItemFor(listItem) {
+    return this.promptItemByListItem.get(listItem)
   }
 
-  #unregisterKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts();
-  }
+  #buildListItemsFromPromptItems(promptItems, filter) {
+    const listItems = [];
+    this.promptItemByListItem = new WeakMap();
+    promptItems.forEach((promptItem) => {
+      const searchableText = promptItem.getAttribute("search");
 
-  #handleKeyDown = (event) => {
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
-      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
-      this.#setFocusStateOnSelectedCell();
-      firstButton?.focus();
-    } else if (event.key === "Escape") {
-      this.#editor.getEditorState().read(() => {
-        const cell = this.#currentCell;
-        if (!cell) return
+      if (!filter || filterMatches(searchableText, filter)) {
+        const listItem = this.buildListItemElementFor(promptItem);
+        this.promptItemByListItem.set(listItem, promptItem);
+        listItems.push(listItem);
+      }
+    });
 
-        this.#editor.update(() => {
-          cell.select();
-        });
-      });
-      this.#closeMoreMenu();
-    }
+    return listItems
   }
+}
 
-  #handleTableHandlerKeydown = (event) => {
-    if (event.key === "Escape") {
-      this.#editor.focus();
-    } else {
-      handleRollingTabIndex(this.#tableHandlerButtons, event);
-    }
+class InlinePromptSource extends LocalFilterSource {
+  constructor(inlinePromptItems) {
+    super();
+    this.inlinePromptItemElements = Array.from(inlinePromptItems);
   }
 
-  #setUpButtons() {
-    this.appendChild(this.#createRowButtonsContainer());
-    this.appendChild(this.#createColumnButtonsContainer());
-
-    this.moreMenu = this.#createMoreMenu();
-    this.appendChild(this.moreMenu);
-    this.addEventListener("keydown", this.#handleTableHandlerKeydown);
+  async fetchPromptItems() {
+    return Promise.resolve(this.inlinePromptItemElements)
   }
+}
 
-  #showTableHandlerButtons() {
-    this.style.display = "flex";
-    this.#closeMoreMenu();
+class DeferredPromptSource extends LocalFilterSource {
+  constructor(url) {
+    super();
+    this.url = url;
 
-    this.#updateRowColumnCount();
-    this.#setTableFocusState(true);
+    this.fetchPromptItems();
   }
 
-  #hideTableHandlerButtons() {
-    this.style.display = "none";
-    this.#closeMoreMenu();
+  async fetchPromptItems() {
+    this.promptItems ??= await this.loadPromptItemsFromUrl(this.url);
 
-    this.#setTableFocusState(false);
-    this.currentTableNode = null;
+    return Promise.resolve(this.promptItems)
   }
+}
 
-  #updateButtonsPosition(tableNode) {
-    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
-    if (!tableElement) return
+const DEBOUNCE_INTERVAL = 200;
 
-    const tableRect = tableElement.getBoundingClientRect();
-    const editorRect = this.#editorElement.getBoundingClientRect();
+class RemoteFilterSource extends BaseSource {
+  constructor(url) {
+    super();
 
-    const relativeTop = tableRect.top - editorRect.top;
-    const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
-    this.style.top = `${relativeTop}px`;
-    this.style.left = `${relativeCenter}px`;
+    this.baseURL = url;
+    this.loadAndFilterListItems = debounceAsync(this.fetchFilteredListItems.bind(this), DEBOUNCE_INTERVAL);
   }
 
-  #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"}`;
+  async buildListItems(filter = "") {
+    return await this.loadAndFilterListItems(filter)
   }
 
-  #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
+  promptItemFor(listItem) {
+    return this.promptItemByListItem.get(listItem)
   }
 
-  #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
+  async fetchFilteredListItems(filter) {
+    const promptItems = await this.loadPromptItemsFromUrl(this.#urlFor(filter));
+    return this.#buildListItemsFromPromptItems(promptItems)
   }
 
-  #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
+  #urlFor(filter) {
+    const url = new URL(this.baseURL, window.location.origin);
+    url.searchParams.append("filter", filter);
+    return url.toString()
   }
 
-  #createMoreMenu() {
-    const container = createElement("details", {
-      className: "lexxy-table-control lexxy-table-control__more-menu"
-    });
-    container.setAttribute("name", "lexxy-dropdown");
-
-    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());
+  #buildListItemsFromPromptItems(promptItems) {
+    const listItems = [];
+    this.promptItemByListItem = new WeakMap();
 
-    container.addEventListener("toggle", this.#handleMoreMenuToggle.bind(this));
+    for (const promptItem of promptItems) {
+      const listItem = this.buildListItemElementFor(promptItem);
+      this.promptItemByListItem.set(listItem, promptItem);
+      listItems.push(listItem);
+    }
 
-    return container
+    return listItems
   }
+}
 
-  #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);
-    });
+const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
 
-    return columnSection
+class LexicalPromptElement extends HTMLElement {
+  constructor() {
+    super();
+    this.keyListeners = [];
   }
 
-  #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 }
-    ];
+  static observedAttributes = [ "connected" ]
 
-    rowButtons.forEach(button => {
-      const buttonElement = this.#createButton(button.icon, button.label, button.onClick);
-      rowSection.appendChild(buttonElement);
-    });
+  connectedCallback() {
+    this.source = this.#createSource();
 
-    return rowSection
+    this.#addTriggerListener();
+    this.toggleAttribute("connected", true);
   }
 
-  #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
+  disconnectedCallback() {
+    this.source = null;
+    this.popoverElement = null;
   }
 
-  #handleMoreMenuToggle() {
-    if (this.moreMenu.open) {
-      this.#setFocusStateOnSelectedCell();
-    } else {
-      this.#removeFocusStateFromSelectedCell();
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.#reconnect());
     }
   }
 
-  #closeMoreMenu() {
-    this.#removeFocusStateFromSelectedCell();
-    this.moreMenu.removeAttribute("open");
+  get name() {
+    return this.getAttribute("name")
   }
 
-  #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();
-        }
-      });
-    });
+  get trigger() {
+    return this.getAttribute("trigger")
   }
 
-  #setTableFocusState(focused) {
-    this.#editorElement.querySelector("div.node--selected:has(table)")?.classList.remove("node--selected");
+  get supportsSpaceInSearches() {
+    return this.hasAttribute("supports-space-in-searches")
+  }
 
-    if (focused && this.currentTableNode) {
-      const tableParent = this.#editor.getElementByKey(this.currentTableNode.getKey());
-      if (!tableParent) return
-      tableParent.classList.add("node--selected");
-    }
+  get open() {
+    return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
   }
 
-  #tableCellWasSelected(tableNode) {
-    this.currentTableNode = tableNode;
-    this.#updateButtonsPosition(tableNode);
-    this.#showTableHandlerButtons();
+  get closed() {
+    return !this.open
   }
 
-  #setFocusStateOnSelectedCell() {
-    this.#editor.getEditorState().read(() => {
-      const currentCell = this.#currentCell;
-      if (!currentCell) return
+  get #doesSpaceSelect() {
+    return !this.supportsSpaceInSearches
+  }
 
-      const cellElement = this.#editor.getElementByKey(currentCell.getKey());
-      if (!cellElement) return
+  #createSource() {
+    const src = this.getAttribute("src");
+    if (src) {
+      if (this.hasAttribute("remote-filtering")) {
+        return new RemoteFilterSource(src)
+      } else {
+        return new DeferredPromptSource(src)
+      }
+    } else {
+      return new InlinePromptSource(this.querySelectorAll("lexxy-prompt-item"))
+    }
+  }
+
+  #addTriggerListener() {
+    const unregister = this.#editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
+
+        if ($isTextNode(node)) {
+          const fullText = node.getTextContent();
+          const triggerLength = this.trigger.length;
 
-      cellElement.classList.add("table-cell--selected");
+          // Check if we have enough characters for the trigger
+          if (offset >= triggerLength) {
+            const textBeforeCursor = fullText.slice(offset - triggerLength, offset);
+
+            // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
+            if (textBeforeCursor === this.trigger) {
+              const isAtStart = offset === triggerLength;
+
+              const charBeforeTrigger = offset > triggerLength ? fullText[offset - triggerLength - 1] : null;
+              const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+
+              if (isAtStart || isPrecededBySpaceOrNewline) {
+                unregister();
+                this.#showPopover();
+              }
+            }
+          }
+        }
+      });
     });
   }
 
-  #removeFocusStateFromSelectedCell() {
-    this.#editorElement.querySelector(".table-cell--selected")?.classList.remove("table-cell--selected");
+  #addCursorPositionListener() {
+    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
+      if (this.closed) return
+
+      this.#editor.read(() => {
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
+
+        if ($isTextNode(node) && offset > 0) {
+          const fullText = node.getTextContent();
+          const textBeforeCursor = fullText.slice(0, offset);
+          const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+          const triggerEndIndex = lastTriggerIndex + this.trigger.length - 1;
+
+          // If trigger is not found, or cursor is at or before the trigger end position, hide popover
+          if (lastTriggerIndex === -1 || offset <= triggerEndIndex) {
+            this.#hidePopover();
+          }
+        } else {
+          // Cursor is not in a text node or at offset 0, hide popover
+          this.#hidePopover();
+        }
+      });
+    });
   }
 
-  #selectLastTableCell() {
-    if (!this.currentTableNode) return
+  #removeCursorPositionListener() {
+    if (this.cursorPositionListener) {
+      this.cursorPositionListener();
+      this.cursorPositionListener = null;
+    }
+  }
 
-    const last = this.currentTableNode.getLastChild().getLastChild();
-    if (!$isTableCellNode(last)) return
+  get #editor() {
+    return this.#editorElement.editor
+  }
 
-    last.selectEnd();
+  get #editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  #deleteTable() {
-    this.#editor.dispatchCommand("deleteTable");
+  get #selection() {
+    return this.#editorElement.selection
+  }
 
-    this.#closeMoreMenu();
-    this.#updateRowColumnCount();
+  async #showPopover() {
+    this.popoverElement ??= await this.#buildPopover();
+    this.#resetPopoverPosition();
+    await this.#filterOptions();
+    this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
+    this.#selectFirstOption();
+
+    this.#editorElement.addEventListener("keydown", this.#handleKeydownOnPopover);
+    this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
+
+    this.#registerKeyListeners();
+    this.#addCursorPositionListener();
   }
 
-  #insertTableRow(direction) {
-    this.#executeTableCommand("insert", "row", direction);
+  #registerKeyListeners() {
+    // We can't use a regular keydown for Enter as Lexical handles it first
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+
+    if (this.#doesSpaceSelect) {
+      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    }
+
+    // Register arrow keys with HIGH priority to prevent Lexical's selection handlers from running
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_HIGH));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_HIGH));
+  }
+
+  #handleArrowUp(event) {
+    this.#moveSelectionUp();
+    event.preventDefault();
+    return true
+  }
+
+  #handleArrowDown(event) {
+    this.#moveSelectionDown();
+    event.preventDefault();
+    return true
+  }
+
+  #selectFirstOption() {
+    const firstOption = this.#listItemElements[0];
+
+    if (firstOption) {
+      this.#selectOption(firstOption);
+    }
+  }
+
+  get #listItemElements() {
+    return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
+  }
+
+  #selectOption(listItem) {
+    this.#clearSelection();
+    listItem.toggleAttribute("aria-selected", true);
+    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    listItem.focus();
+
+    // Preserve selection to prevent cursor jump
+    this.#selection.preservingSelection(() => {
+      this.#editorElement.focus();
+    });
+
+    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
+    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
+    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
   }
 
-  #insertTableColumn(direction) {
-    this.#executeTableCommand("insert", "column", direction);
+  #clearSelection() {
+    this.#listItemElements.forEach((item) => { item.toggleAttribute("aria-selected", false); });
+    this.#editorContentElement.removeAttribute("aria-controls");
+    this.#editorContentElement.removeAttribute("aria-activedescendant");
+    this.#editorContentElement.removeAttribute("aria-haspopup");
+  }
+
+  #positionPopover() {
+    const { x, y, fontSize } = this.#selection.cursorPosition;
+    const editorRect = this.#editorElement.getBoundingClientRect();
+    const contentRect = this.#editorContentElement.getBoundingClientRect();
+    const verticalOffset = contentRect.top - editorRect.top;
+
+    if (!this.popoverElement.hasAttribute("data-anchored")) {
+      this.popoverElement.style.left = `${x}px`;
+      this.popoverElement.toggleAttribute("data-anchored", true);
+    }
+
+    this.popoverElement.style.top = `${y + verticalOffset}px`;
+    this.popoverElement.style.bottom = "auto";
+
+    const popoverRect = this.popoverElement.getBoundingClientRect();
+    const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
+
+    if (isClippedAtBottom || this.popoverElement.hasAttribute("data-clipped-at-bottom")) {
+      this.popoverElement.style.top = `${y + verticalOffset - popoverRect.height - fontSize}px`;
+      this.popoverElement.style.bottom = "auto";
+      this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
+    }
   }
 
-  #deleteTableRow(direction) {
-    this.#executeTableCommand("delete", "row", direction);
+  #resetPopoverPosition() {
+    this.popoverElement.removeAttribute("data-clipped-at-bottom");
+    this.popoverElement.removeAttribute("data-anchored");
   }
 
-  #deleteTableColumn(direction) {
-    this.#executeTableCommand("delete", "column", direction);
+  async #hidePopover() {
+    this.#clearSelection();
+    this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", false);
+    this.#editorElement.removeEventListener("lexxy:change", this.#filterOptions);
+    this.#editorElement.removeEventListener("keydown", this.#handleKeydownOnPopover);
+
+    this.#unregisterKeyListeners();
+    this.#removeCursorPositionListener();
+
+    await nextFrame();
+    this.#addTriggerListener();
+  }
+
+  #unregisterKeyListeners() {
+    this.keyListeners.forEach((unregister) => unregister());
+    this.keyListeners = [];
+  }
+
+  #filterOptions = async () => {
+    if (this.initialPrompt) {
+      this.initialPrompt = false;
+      return
+    }
+
+    if (this.#editorContents.containsTextBackUntil(this.trigger)) {
+      await this.#showFilteredOptions();
+      await nextFrame();
+      this.#positionPopover();
+    } else {
+      this.#hidePopover();
+    }
+  }
+
+  async #showFilteredOptions() {
+    const filter = this.#editorContents.textBackUntil(this.trigger);
+    const filteredListItems = await this.source.buildListItems(filter);
+    this.popoverElement.innerHTML = "";
+
+    if (filteredListItems.length > 0) {
+      this.#showResults(filteredListItems);
+    } else {
+      this.#showEmptyResults();
+    }
+    this.#selectFirstOption();
+  }
+
+  #showResults(filteredListItems) {
+    this.popoverElement.classList.remove("lexxy-prompt-menu--empty");
+    this.popoverElement.append(...filteredListItems);
+  }
+
+  #showEmptyResults() {
+    this.popoverElement.classList.add("lexxy-prompt-menu--empty");
+    const el = createElement("li", { innerHTML: this.#emptyResultsMessage });
+    el.classList.add("lexxy-prompt-menu__item--empty");
+    this.popoverElement.append(el);
+  }
+
+  get #emptyResultsMessage() {
+    return this.getAttribute("empty-results") || NOTHING_FOUND_DEFAULT_MESSAGE
+  }
+
+  #handleKeydownOnPopover = (event) => {
+    if (event.key === "Escape") {
+      this.#hidePopover();
+      this.#editorElement.focus();
+      event.stopPropagation();
+    }
+    // Arrow keys are now handled via Lexical commands with HIGH priority
+  }
+
+  #moveSelectionDown() {
+    const nextIndex = this.#selectedIndex + 1;
+    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
+  }
+
+  #moveSelectionUp() {
+    const previousIndex = this.#selectedIndex - 1;
+    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
+  }
+
+  get #selectedIndex() {
+    return this.#listItemElements.findIndex((item) => item.hasAttribute("aria-selected"))
+  }
+
+  get #selectedListItem() {
+    return this.#listItemElements[this.#selectedIndex]
+  }
+
+  #handleSelectedOption(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.#optionWasSelected();
+    return true
+  }
+
+  #optionWasSelected() {
+    this.#replaceTriggerWithSelectedItem();
+    this.#hidePopover();
+    this.#editorElement.focus();
+  }
+
+  #replaceTriggerWithSelectedItem() {
+    const promptItem = this.source.promptItemFor(this.#selectedListItem);
+
+    if (!promptItem) { return }
+
+    const templates = Array.from(promptItem.querySelectorAll("template[type='editor']"));
+    const stringToReplace = `${this.trigger}${this.#editorContents.textBackUntil(this.trigger)}`;
+
+    if (this.hasAttribute("insert-editable-text")) {
+      this.#insertTemplatesAsEditableText(templates, stringToReplace);
+    } else {
+      this.#insertTemplatesAsAttachments(templates, stringToReplace, promptItem.getAttribute("sgid"));
+    }
+  }
+
+  #insertTemplatesAsEditableText(templates, stringToReplace) {
+    this.#editor.update(() => {
+      const nodes = templates.flatMap(template => this.#buildEditableTextNodes(template));
+      this.#editorContents.replaceTextBackUntil(stringToReplace, nodes);
+    });
+  }
+
+  #buildEditableTextNodes(template) {
+    return $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`))
+  }
+
+  #insertTemplatesAsAttachments(templates, stringToReplace, fallbackSgid = null) {
+    this.#editor.update(() => {
+      const attachmentNodes = this.#buildAttachmentNodes(templates, fallbackSgid);
+      const spacedAttachmentNodes = attachmentNodes.flatMap(node => [ node, this.#getSpacerTextNode() ]).slice(0, -1);
+      this.#editorContents.replaceTextBackUntil(stringToReplace, spacedAttachmentNodes);
+    });
+  }
+
+  #buildAttachmentNodes(templates, fallbackSgid = null) {
+    return templates.map(
+      template => this.#buildAttachmentNode(
+        template.innerHTML,
+        template.getAttribute("content-type") || this.#defaultPromptContentType,
+        template.getAttribute("sgid") || fallbackSgid
+      ))
+  }
+
+  #getSpacerTextNode() {
+    return $createTextNode(" ")
+  }
+
+  get #defaultPromptContentType() {
+    const attachmentContentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+    return `application/vnd.${attachmentContentTypeNamespace}.${this.name}`
+  }
+
+  #buildAttachmentNode(innerHtml, contentType, sgid) {
+    return new CustomActionTextAttachmentNode({ sgid, contentType, innerHtml })
+  }
+
+  get #editorContents() {
+    return this.#editorElement.contents
+  }
+
+  get #editorContentElement() {
+    return this.#editorElement.editorContentElement
+  }
+
+  async #buildPopover() {
+    const popoverContainer = createElement("ul", { role: "listbox", id: generateDomId("prompt-popover") }); // Avoiding [popover] due to not being able to position at an arbitrary X, Y position.
+    popoverContainer.classList.add("lexxy-prompt-menu");
+    popoverContainer.style.position = "absolute";
+    popoverContainer.setAttribute("nonce", getNonce());
+    popoverContainer.append(...await this.source.buildListItems());
+    popoverContainer.addEventListener("click", this.#handlePopoverClick);
+    this.#editorElement.appendChild(popoverContainer);
+    return popoverContainer
+  }
+
+  #handlePopoverClick = (event) => {
+    const listItem = event.target.closest(".lexxy-prompt-menu__item");
+    if (listItem) {
+      this.#selectOption(listItem);
+      this.#optionWasSelected();
+    }
+  }
+
+  #reconnect() {
+    this.disconnectedCallback();
+    this.connectedCallback();
   }
+}
 
-  #executeTableCommand(action = "insert", childType = "row", direction) {
-    this.#editor.update(() => {
-      const currentCell = this.#currentCell;
-      if (!currentCell) return
+class CodeLanguagePicker extends HTMLElement {
+  connectedCallback() {
+    this.editorElement = this.closest("lexxy-editor");
+    this.editor = this.editorElement.editor;
 
-      if (direction === "end") {
-        this.#selectLastTableCell();
-      }
+    this.#attachLanguagePicker();
+    this.#monitorForCodeBlockSelection();
+  }
 
-      this.#dispatchTableCommand(action, childType, direction);
+  #attachLanguagePicker() {
+    this.languagePickerElement = this.#createLanguagePicker();
 
-      if (currentCell.isAttached()) {
-        currentCell.selectEnd();
-      }
+    this.languagePickerElement.addEventListener("change", () => {
+      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
     });
 
-    this.#closeMoreMenu();
-    this.#updateRowColumnCount();
+    this.languagePickerElement.setAttribute("nonce", getNonce());
+    this.appendChild(this.languagePickerElement);
   }
 
-  #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
+  #createLanguagePicker() {
+    const selectElement = createElement("select", { className: "lexxy-code-language-picker", "aria-label": "Pick a language…", name: "lexxy-code-language" });
+
+    for (const [ value, label ] of Object.entries(this.#languages)) {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = label;
+      selectElement.appendChild(option);
     }
-  }
 
-  #toggleRowHeaderStyle() {
-    this.#editor.update(() => {
-      const rows = this.currentTableNode.getChildren();
+    return selectElement
+  }
 
-      const row = rows[this.#currentRow];
-      if (!row) return
+  get #languages() {
+    const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
 
-      const cells = row.getChildren();
-      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
-      if (!firstCell) return
+    if (!languages.ruby) languages.ruby = "Ruby";
+    if (!languages.php) languages.php = "PHP";
+    if (!languages.go) languages.go = "Go";
+    if (!languages.bash) languages.bash = "Bash";
+    if (!languages.json) languages.json = "JSON";
+    if (!languages.diff) languages.diff = "Diff";
 
-      const currentStyle = firstCell.getHeaderStyles();
-      const newStyle = currentStyle ^ TableCellHeaderStates.ROW;
+    const sortedEntries = Object.entries(languages)
+      .sort(([ , a ], [ , b ]) => a.localeCompare(b));
 
-      cells.forEach(cell => {
-        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.ROW);
-      });
-    });
+    // Place the "plain" entry first, then the rest of language sorted alphabetically
+    const plainIndex = sortedEntries.findIndex(([ key ]) => key === "plain");
+    const plainEntry = sortedEntries.splice(plainIndex, 1)[0];
+    return Object.fromEntries([ plainEntry, ...sortedEntries ])
   }
 
-  #toggleColumnHeaderStyle() {
-    this.#editor.update(() => {
-      const rows = this.currentTableNode.getChildren();
-
-      const row = rows[this.#currentRow];
-      if (!row) return
+  #updateCodeBlockLanguage(language) {
+    this.editor.update(() => {
+      const codeNode = this.#getCurrentCodeNode();
 
-      const cells = row.getChildren();
-      const selectedCell = $getTableCellNodeFromLexicalNode(cells[this.#currentColumn]);
-      if (!selectedCell) return
+      if (codeNode) {
+        codeNode.setLanguage(language);
+      }
+    });
+  }
 
-      const currentStyle = selectedCell.getHeaderStyles();
-      const newStyle = currentStyle ^ TableCellHeaderStates.COLUMN;
+  #monitorForCodeBlockSelection() {
+    this.editor.registerUpdateListener(() => {
+      this.editor.getEditorState().read(() => {
+        const codeNode = this.#getCurrentCodeNode();
 
-      rows.forEach(row => {
-        const cell = row.getChildren()[this.#currentColumn];
-        if (!cell) return
-        this.#setHeaderStyle(cell, newStyle, TableCellHeaderStates.COLUMN);
+        if (codeNode) {
+          this.#codeNodeWasSelected(codeNode);
+        } else {
+          this.#hideLanguagePicker();
+        }
       });
     });
   }
 
-  #setHeaderStyle(cell, newStyle, headerState) {
-    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+  #getCurrentCodeNode() {
+    const selection = $getSelection();
 
-    if (tableCellNode) {
-      tableCellNode.setHeaderStyles(newStyle, headerState);
+    if (!$isRangeSelection(selection)) {
+      return null
     }
-  }
-
-  #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);
+    const anchorNode = selection.anchor.getNode();
+    const parentNode = anchorNode.getParent();
 
-class BaseSource {
-  // Template method to override
-  async buildListItems(filter = "") {
-    return Promise.resolve([])
-  }
+    if ($isCodeNode(anchorNode)) {
+      return anchorNode
+    } else if ($isCodeNode(parentNode)) {
+      return parentNode
+    }
 
-  // Template method to override
-  promptItemFor(listItem) {
     return null
   }
 
-  // Protected
+  #codeNodeWasSelected(codeNode) {
+    const language = codeNode.getLanguage();
 
-  buildListItemElementFor(promptItemElement) {
-    const template = promptItemElement.querySelector("template[type='menu']");
-    const fragment = template.content.cloneNode(true);
-    const listItemElement = createElement("li", { role: "option", id: generateDomId("prompt-item"), tabindex: "0" });
-    listItemElement.classList.add("lexxy-prompt-menu__item");
-    listItemElement.appendChild(fragment);
-    return listItemElement
+    this.#updateLanguagePickerWith(language);
+    this.#showLanguagePicker();
+    this.#positionLanguagePicker(codeNode);
   }
 
-  async loadPromptItemsFromUrl(url) {
-    try {
-      const response = await fetch(url);
-      const html = await response.text();
-      const promptItems = parseHtml(html).querySelectorAll("lexxy-prompt-item");
-      return Promise.resolve(Array.from(promptItems))
-    } catch (error) {
-      return Promise.reject(error)
+  #updateLanguagePickerWith(language) {
+    if (this.languagePickerElement && language) {
+      const normalizedLanguage = normalizeCodeLang(language);
+      this.languagePickerElement.value = normalizedLanguage;
     }
   }
-}
 
-class LocalFilterSource extends BaseSource {
-  async buildListItems(filter = "") {
-    const promptItems = await this.fetchPromptItems();
-    return this.#buildListItemsFromPromptItems(promptItems, filter)
-  }
+  #positionLanguagePicker(codeNode) {
+    const codeElement = this.editor.getElementByKey(codeNode.getKey());
+    if (!codeElement) return
 
-  // Template method to override
-  async fetchPromptItems(filter) {
-    return Promise.resolve([])
-  }
+    const codeRect = codeElement.getBoundingClientRect();
+    const editorRect = this.editorElement.getBoundingClientRect();
+    const relativeTop = codeRect.top - editorRect.top;
+    const relativeRight = editorRect.right - codeRect.right;
 
-  promptItemFor(listItem) {
-    return this.promptItemByListItem.get(listItem)
+    this.style.top = `${relativeTop}px`;
+    this.style.right = `${relativeRight}px`;
   }
 
-  #buildListItemsFromPromptItems(promptItems, filter) {
-    const listItems = [];
-    this.promptItemByListItem = new WeakMap();
-    promptItems.forEach((promptItem) => {
-      const searchableText = promptItem.getAttribute("search");
-
-      if (!filter || filterMatches(searchableText, filter)) {
-        const listItem = this.buildListItemElementFor(promptItem);
-        this.promptItemByListItem.set(listItem, promptItem);
-        listItems.push(listItem);
-      }
-    });
+  #showLanguagePicker() {
+    this.hidden = false;
+  }
 
-    return listItems
+  #hideLanguagePicker() {
+    this.hidden = true;
   }
 }
 
-class InlinePromptSource extends LocalFilterSource {
-  constructor(inlinePromptItems) {
-    super();
-    this.inlinePromptItemElements = Array.from(inlinePromptItems);
-  }
+class TableController {
+  constructor(editorElement) {
+    this.editor = editorElement.editor;
+    this.contents = editorElement.contents;
+    this.selection = editorElement.selection;
 
-  async fetchPromptItems() {
-    return Promise.resolve(this.inlinePromptItemElements)
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
+
+    this.#registerKeyHandlers();
   }
-}
 
-class DeferredPromptSource extends LocalFilterSource {
-  constructor(url) {
-    super();
-    this.url = url;
+  destroy() {
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
 
-    this.fetchPromptItems();
+    this.#unregisterKeyHandlers();
   }
 
-  async fetchPromptItems() {
-    this.promptItems ??= await this.loadPromptItemsFromUrl(this.url);
+  get currentCell() {
+    if (!this.currentCellKey) return null
 
-    return Promise.resolve(this.promptItems)
+    return this.editor.getEditorState().read(() => {
+      const cell = $getNodeByKey(this.currentCellKey);
+      return (cell instanceof TableCellNode) ? cell : null
+    })
   }
-}
-
-const DEBOUNCE_INTERVAL = 200;
 
-class RemoteFilterSource extends BaseSource {
-  constructor(url) {
-    super();
+  get currentTableNode() {
+    if (!this.currentTableNodeKey) return null
 
-    this.baseURL = url;
-    this.loadAndFilterListItems = debounceAsync(this.fetchFilteredListItems.bind(this), DEBOUNCE_INTERVAL);
+    return this.editor.getEditorState().read(() => {
+      const tableNode = $getNodeByKey(this.currentTableNodeKey);
+      return (tableNode instanceof TableNode) ? tableNode : null
+    })
   }
 
-  async buildListItems(filter = "") {
-    return await this.loadAndFilterListItems(filter)
-  }
+  get currentRowCells() {
+    const currentRowIndex = this.currentRowIndex;
 
-  promptItemFor(listItem) {
-    return this.promptItemByListItem.get(listItem)
-  }
+    const rows = this.tableRows;
+    if (!rows) return null
 
-  async fetchFilteredListItems(filter) {
-    const promptItems = await this.loadPromptItemsFromUrl(this.#urlFor(filter));
-    return this.#buildListItemsFromPromptItems(promptItems)
+    return this.editor.getEditorState().read(() => {
+      return rows[currentRowIndex]?.getChildren() ?? null
+    }) ?? null
   }
 
-  #urlFor(filter) {
-    const url = new URL(this.baseURL, window.location.origin);
-    url.searchParams.append("filter", filter);
-    return url.toString()
+  get currentRowIndex() {
+    const currentCell = this.currentCell;
+    if (!currentCell) return 0
+
+    return this.editor.getEditorState().read(() => {
+      return $getTableRowIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  #buildListItemsFromPromptItems(promptItems) {
-    const listItems = [];
-    this.promptItemByListItem = new WeakMap();
+  get currentColumnCells() {
+    const columnIndex = this.currentColumnIndex;
 
-    for (const promptItem of promptItems) {
-      const listItem = this.buildListItemElementFor(promptItem);
-      this.promptItemByListItem.set(listItem, promptItem);
-      listItems.push(listItem);
-    }
+    const rows = this.tableRows;
+    if (!rows) return null
 
-    return listItems
+    return this.editor.getEditorState().read(() => {
+      return rows.map(row => row.getChildAtIndex(columnIndex))
+    }) ?? null
   }
-}
 
-const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
+  get currentColumnIndex() {
+    const currentCell = this.currentCell;
+    if (!currentCell) return 0
 
-class LexicalPromptElement extends HTMLElement {
-  constructor() {
-    super();
-    this.keyListeners = [];
+    return this.editor.getEditorState().read(() => {
+      return $getTableColumnIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  static observedAttributes = [ "connected" ]
+  get tableRows() {
+    return this.editor.getEditorState().read(() => {
+      return this.currentTableNode?.getChildren()
+    }) ?? null
+  }
 
-  connectedCallback() {
-    this.source = this.#createSource();
+  updateSelectedTable() {
+    let cellNode = null;
+    let tableNode = null;
 
-    this.#addTriggerListener();
-    this.toggleAttribute("connected", true);
-  }
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!selection || !this.selection.isTableCellSelected) return
 
-  disconnectedCallback() {
-    this.source = null;
-    this.popoverElement = null;
-  }
+      const node = selection.getNodes()[0];
 
+      cellNode = $findCellNode(node);
+      tableNode = $findTableNode(node);
+    });
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
-      requestAnimationFrame(() => this.#reconnect());
-    }
+    this.currentCellKey = cellNode?.getKey() ?? null;
+    this.currentTableNodeKey = tableNode?.getKey() ?? null;
   }
 
-  get name() {
-    return this.getAttribute("name")
-  }
+  executeTableCommand(command, customIndex = null) {
+    if (command.action === "delete" && command.childType === "table") {
+      this.#deleteTable();
+      return
+    }
 
-  get trigger() {
-    return this.getAttribute("trigger")
-  }
+    if (command.action === "toggle") {
+      this.#executeToggleStyle(command);
+      return
+    }
 
-  get supportsSpaceInSearches() {
-    return this.hasAttribute("supports-space-in-searches")
+    this.#executeCommand(command, customIndex);
   }
 
-  get open() {
-    return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
+  #executeCommand(command, customIndex = null) {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand(this.#commandName(command));
+    this.#selectNextBestCell(command, customIndex);
   }
 
-  get closed() {
-    return !this.open
-  }
+  #executeToggleStyle(command) {
+    const childType = command.childType;
 
-  get #doesSpaceSelect() {
-    return !this.supportsSpaceInSearches
-  }
+    let cells = null;
+    let headerState = null;
 
-  #createSource() {
-    const src = this.getAttribute("src");
-    if (src) {
-      if (this.hasAttribute("remote-filtering")) {
-        return new RemoteFilterSource(src)
-      } else {
-        return new DeferredPromptSource(src)
-      }
-    } else {
-      return new InlinePromptSource(this.querySelectorAll("lexxy-prompt-item"))
+    if (childType === "row") {
+      cells = this.currentRowCells;
+      headerState = TableCellHeaderStates.ROW;
+    } else if (childType === "column") {
+      cells = this.currentColumnCells;
+      headerState = TableCellHeaderStates.COLUMN;
     }
-  }
-
-  #addTriggerListener() {
-    const unregister = this.#editor.registerUpdateListener(() => {
-      this.#editor.read(() => {
-        const { node, offset } = this.#selection.selectedNodeWithOffset();
-        if (!node) return
 
-        if ($isTextNode(node) && offset > 0) {
-          const fullText = node.getTextContent();
-          const charBeforeCursor = fullText[offset - 1];
+    if (!cells || cells.length === 0) return
 
-          // Check if trigger is at the start of the text node (new line case) or preceded by space or newline
-          if (charBeforeCursor === this.trigger) {
-            const isAtStart = offset === 1;
+    this.editor.update(() => {
+      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
+      if (!firstCell) return
 
-            const charBeforeTrigger = offset > 1 ? fullText[offset - 2] : null;
-            const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+      const currentStyle = firstCell.getHeaderStyles();
+      const newStyle = currentStyle ^ headerState;
 
-            if (isAtStart || isPrecededBySpaceOrNewline) {
-              unregister();
-              this.#showPopover();
-            }
-          }
-        }
+      cells.forEach(cell => {
+        this.#setHeaderStyle(cell, newStyle, headerState);
       });
     });
   }
 
-  #addCursorPositionListener() {
-    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
-      if (this.closed) return
+  #deleteTable() {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand("deleteTable");
+  }
 
-      this.#editor.read(() => {
-        const { node, offset } = this.#selection.selectedNodeWithOffset();
-        if (!node) return
+  #selectCellAtSelection() {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!selection) return
 
-        if ($isTextNode(node) && offset > 0) {
-          const fullText = node.getTextContent();
-          const textBeforeCursor = fullText.slice(0, offset);
-          const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+      const node = selection.getNodes()[0];
 
-          // If trigger is not found, or cursor is at or before the trigger position, hide popover
-          if (lastTriggerIndex === -1 || offset <= lastTriggerIndex) {
-            this.#hidePopover();
-          }
-        } else {
-          // Cursor is not in a text node or at offset 0, hide popover
-          this.#hidePopover();
-        }
-      });
+      $findCellNode(node)?.selectEnd();
     });
   }
 
-  #removeCursorPositionListener() {
-    if (this.cursorPositionListener) {
-      this.cursorPositionListener();
-      this.cursorPositionListener = null;
-    }
-  }
+  #commandName(command) {
+    const { action, childType, direction } = command;
 
-  get #editor() {
-    return this.#editorElement.editor
+    const childTypeSuffix = upcaseFirst(childType);
+    const directionSuffix = action == "insert" ? upcaseFirst(direction) : "";
+    return `${action}Table${childTypeSuffix}${directionSuffix}`
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  #setHeaderStyle(cell, newStyle, headerState) {
+    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+    tableCellNode?.setHeaderStyles(newStyle, headerState);
   }
 
-  get #selection() {
-    return this.#editorElement.selection
-  }
+  async #selectCellAtIndex(rowIndex, columnIndex) {
+    // We wait for next frame, otherwise table operations might not have completed yet.
+    await nextFrame();
 
-  async #showPopover() {
-    this.popoverElement ??= await this.#buildPopover();
-    this.#resetPopoverPosition();
-    await this.#filterOptions();
-    this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
-    this.#selectFirstOption();
+    if (!this.currentTableNode) return
 
-    this.#editorElement.addEventListener("keydown", this.#handleKeydownOnPopover);
-    this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
+    const rows = this.tableRows;
+    if (!rows) return
 
-    this.#registerKeyListeners();
-    this.#addCursorPositionListener();
+    const row = rows[rowIndex];
+    if (!row) return
+
+    this.editor.update(() => {
+      const cell = $getTableCellNodeFromLexicalNode(row.getChildAtIndex(columnIndex));
+      cell?.selectEnd();
+    });
   }
 
-  #registerKeyListeners() {
-    // We can't use a regular keydown for Enter as Lexical handles it first
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ENTER_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_TAB_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+  #selectNextBestCell(command, customIndex = null) {
+    const { childType, direction } = command;
 
-    if (this.#doesSpaceSelect) {
-      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    let rowIndex = this.currentRowIndex;
+    let columnIndex = customIndex !== null ? customIndex : this.currentColumnIndex;
+
+    const deleteOffset = command.action === "delete" ? -1 : 0;
+    const offset = direction === "after" ? 1 : deleteOffset;
+
+    if (childType === "row") {
+      rowIndex += offset;
+    } else if (childType === "column") {
+      columnIndex += offset;
     }
 
-    // Register arrow keys with HIGH priority to prevent Lexical's selection handlers from running
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_HIGH));
-    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_HIGH));
+    this.#selectCellAtIndex(rowIndex, columnIndex);
   }
 
-  #handleArrowUp(event) {
-    this.#moveSelectionUp();
-    event.preventDefault();
-    return true
-  }
+  #selectNextRow() {
+    const rows = this.tableRows;
+    if (!rows) return
 
-  #handleArrowDown(event) {
-    this.#moveSelectionDown();
-    event.preventDefault();
-    return true
+    const nextRow = rows.at(this.currentRowIndex + 1);
+    if (!nextRow) return
+
+    this.editor.update(() => {
+      nextRow.getChildAtIndex(this.currentColumnIndex)?.selectEnd();
+    });
   }
 
-  #selectFirstOption() {
-    const firstOption = this.#listItemElements[0];
+  #selectPreviousCell() {
+    const cell = this.currentCell;
+    if (!cell) return
 
-    if (firstOption) {
-      this.#selectOption(firstOption);
-    }
+    this.editor.update(() => {
+      cell.selectPrevious();
+    });
   }
 
-  get #listItemElements() {
-    return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
+  #insertRowAndSelectFirstCell() {
+    this.executeTableCommand({ action: "insert", childType: "row", direction: "after" }, 0);
   }
 
-  #selectOption(listItem) {
-    this.#clearSelection();
-    listItem.toggleAttribute("aria-selected", true);
-    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    listItem.focus();
+  #deleteRowAndSelectLastCell() {
+    this.executeTableCommand({ action: "delete", childType: "row" }, -1);
+  }
 
-    // Preserve selection to prevent cursor jump
-    this.#selection.preservingSelection(() => {
-      this.#editorElement.focus();
-    });
+  #deleteRowAndSelectNextNode() {
+    const tableNode = this.currentTableNode;
+    this.executeTableCommand({ action: "delete", childType: "row" });
 
-    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
-    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
-    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
+    this.editor.update(() => {
+      const next = tableNode?.getNextSibling();
+      if ($isParagraphNode(next)) {
+        next.selectStart();
+      } else {
+        const newParagraph = $createParagraphNode();
+        this.currentTableNode.insertAfter(newParagraph);
+        newParagraph.selectStart();
+      }
+    });
   }
 
-  #clearSelection() {
-    this.#listItemElements.forEach((item) => { item.toggleAttribute("aria-selected", false); });
-    this.#editorContentElement.removeAttribute("aria-controls");
-    this.#editorContentElement.removeAttribute("aria-activedescendant");
-    this.#editorContentElement.removeAttribute("aria-haspopup");
-  }
+  #isCurrentCellEmpty() {
+    if (!this.currentTableNode) return false
 
-  #positionPopover() {
-    const { x, y, fontSize } = this.#selection.cursorPosition;
-    const editorRect = this.#editorElement.getBoundingClientRect();
-    const contentRect = this.#editorContentElement.getBoundingClientRect();
-    const verticalOffset = contentRect.top - editorRect.top;
+    const cell = this.currentCell;
+    if (!cell) return false
 
-    if (!this.popoverElement.hasAttribute("data-anchored")) {
-      this.popoverElement.style.left = `${x}px`;
-      this.popoverElement.toggleAttribute("data-anchored", true);
-    }
+    return cell.getTextContent().trim() === ""
+  }
 
-    this.popoverElement.style.top = `${y + verticalOffset}px`;
-    this.popoverElement.style.bottom = "auto";
+  #isCurrentRowLast() {
+    if (!this.currentTableNode) return false
 
-    const popoverRect = this.popoverElement.getBoundingClientRect();
-    const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
+    const rows = this.tableRows;
+    if (!rows) return false
 
-    if (isClippedAtBottom || this.popoverElement.hasAttribute("data-clipped-at-bottom")) {
-      this.popoverElement.style.top = `${y + verticalOffset - popoverRect.height - fontSize}px`;
-      this.popoverElement.style.bottom = "auto";
-      this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
-    }
+    return rows.length === this.currentRowIndex + 1
   }
 
-  #resetPopoverPosition() {
-    this.popoverElement.removeAttribute("data-clipped-at-bottom");
-    this.popoverElement.removeAttribute("data-anchored");
+  #isCurrentRowEmpty() {
+    if (!this.currentTableNode) return false
+
+    const cells = this.currentRowCells;
+    if (!cells) return false
+
+    return cells.every(cell => cell.getTextContent().trim() === "")
   }
 
-  async #hidePopover() {
-    this.#clearSelection();
-    this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", false);
-    this.#editorElement.removeEventListener("lexxy:change", this.#filterOptions);
-    this.#editorElement.removeEventListener("keydown", this.#handleKeydownOnPopover);
+  #isFirstCellInRow() {
+    if (!this.currentTableNode) return false
 
-    this.#unregisterKeyListeners();
-    this.#removeCursorPositionListener();
+    const cells = this.currentRowCells;
+    if (!cells) return false
 
-    await nextFrame();
-    this.#addTriggerListener();
+    return cells.indexOf(this.currentCell) === 0
   }
 
-  #unregisterKeyListeners() {
-    this.keyListeners.forEach((unregister) => unregister());
-    this.keyListeners = [];
+  #registerKeyHandlers() {
+    // We can't prevent these externally using regular keydown because Lexical handles it first.
+    this.unregisterBackspaceKeyHandler = this.editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => this.#handleBackspaceKey(event), COMMAND_PRIORITY_HIGH);
+    this.unregisterEnterKeyHandler = this.editor.registerCommand(KEY_ENTER_COMMAND, (event) => this.#handleEnterKey(event), COMMAND_PRIORITY_HIGH);
   }
 
-  #filterOptions = async () => {
-    if (this.initialPrompt) {
-      this.initialPrompt = false;
-      return
+  #unregisterKeyHandlers() {
+    this.unregisterBackspaceKeyHandler?.();
+    this.unregisterEnterKeyHandler?.();
+
+    this.unregisterBackspaceKeyHandler = null;
+    this.unregisterEnterKeyHandler = null;
+  }
+
+  #handleBackspaceKey(event) {
+    if (!this.currentTableNode) return false
+
+    if (this.#isCurrentRowEmpty() && this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#deleteRowAndSelectLastCell();
+      return true
     }
 
-    if (this.#editorContents.containsTextBackUntil(this.trigger)) {
-      await this.#showFilteredOptions();
-      await nextFrame();
-      this.#positionPopover();
-    } else {
-      this.#hidePopover();
+    if (this.#isCurrentCellEmpty() && !this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#selectPreviousCell();
+      return true
     }
+
+    return false
   }
 
-  async #showFilteredOptions() {
-    const filter = this.#editorContents.textBackUntil(this.trigger);
-    const filteredListItems = await this.source.buildListItems(filter);
-    this.popoverElement.innerHTML = "";
+  #handleEnterKey(event) {
+    if ((event.ctrlKey || event.metaKey) || event.shiftKey || !this.currentTableNode) return false
 
-    if (filteredListItems.length > 0) {
-      this.#showResults(filteredListItems);
+    if (this.selection.isInsideList || this.selection.isInsideCodeBlock) return false
+
+    event.preventDefault();
+
+    if (this.#isCurrentRowLast() && this.#isCurrentRowEmpty()) {
+      this.#deleteRowAndSelectNextNode();
+    } else if (this.#isCurrentRowLast()) {
+      this.#insertRowAndSelectFirstCell();
     } else {
-      this.#showEmptyResults();
+      this.#selectNextRow();
     }
-    this.#selectFirstOption();
-  }
 
-  #showResults(filteredListItems) {
-    this.popoverElement.classList.remove("lexxy-prompt-menu--empty");
-    this.popoverElement.append(...filteredListItems);
+    return true
   }
+}
 
-  #showEmptyResults() {
-    this.popoverElement.classList.add("lexxy-prompt-menu--empty");
-    const el = createElement("li", { innerHTML: this.#emptyResultsMessage });
-    el.classList.add("lexxy-prompt-menu__item--empty");
-    this.popoverElement.append(el);
-  }
+var TableIcons = {
+  "insert-row-before":
+    `<svg  viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.86804e-07 15C8.29055e-07 15.8284 0.671574 16.5 1.5 16.5H15L15.1533 16.4922C15.8593 16.4205 16.4205 15.8593 16.4922 15.1533L16.5 15V4.5L16.4922 4.34668C16.4154 3.59028 15.7767 3 15 3H13.5L13.5 4.5H15V9H1.5L1.5 4.5L3 4.5V3H1.5C0.671574 3 1.20956e-06 3.67157 1.24577e-06 4.5L7.86804e-07 15ZM15 10.5V15H1.5L1.5 10.5H15Z"/>
+    <path d="M4.5 4.5H7.5V7.5H9V4.5H12L12 3L9 3V6.55671e-08L7.5 0V3L4.5 3V4.5Z"/>
+    </svg>`,
+
+  "insert-row-after":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.86804e-07 13.5C7.50592e-07 14.3284 0.671574 15 1.5 15H3V13.5H1.5L1.5 9L15 9V13.5H13.5V15H15C15.7767 15 16.4154 14.4097 16.4922 13.6533L16.5 13.5V3L16.4922 2.84668C16.4205 2.14069 15.8593 1.57949 15.1533 1.50781L15 1.5L1.5 1.5C0.671574 1.5 1.28803e-06 2.17157 1.24577e-06 3L7.86804e-07 13.5ZM15 3V7.5L1.5 7.5L1.5 3L15 3Z"/>
+    <path d="M7.5 15V18H9V15H12V13.5H9V10.5H7.5V13.5H4.5V15H7.5Z"/>
+    </svg>`,
+
+  "delete-row":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.4922 12.1533C16.4154 12.9097 15.7767 13.5 15 13.5L12 13.5V12H15V6L1.5 6L1.5 12H4.5V13.5H1.5C0.723337 13.5 0.0846104 12.9097 0.00781328 12.1533L7.86804e-07 12L1.04907e-06 6C1.17362e-06 5.22334 0.590278 4.58461 1.34668 4.50781L1.5 4.5L15 4.5C15.8284 4.5 16.5 5.17157 16.5 6V12L16.4922 12.1533Z"/>
+    <path d="M10.3711 15.9316L8.25 13.8096L6.12793 15.9316L5.06738 14.8711L7.18945 12.75L5.06738 10.6289L6.12793 9.56836L8.25 11.6895L10.3711 9.56836L11.4316 10.6289L9.31055 12.75L11.4316 14.8711L10.3711 15.9316Z"/>
+    </svg>`,
+
+  "toggle-row":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.00781328 13.6533C0.0846108 14.4097 0.723337 15 1.5 15L15 15L15.1533 14.9922C15.8593 14.9205 16.4205 14.3593 16.4922 13.6533L16.5 13.5V4.5L16.4922 4.34668C16.4205 3.64069 15.8593 3.07949 15.1533 3.00781L15 3L1.5 3C0.671574 3 1.24863e-06 3.67157 1.18021e-06 4.5L7.86804e-07 13.5L0.00781328 13.6533ZM15 9V13.5L1.5 13.5L1.5 9L15 9Z"/>
+    </svg>`,
+
+  "insert-column-before":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3H4.5V1.5H9V15H4.5V13.5H3V15C3 15.7767 3.59028 16.4154 4.34668 16.4922L4.5 16.5H15L15.1533 16.4922C15.8593 16.4205 16.4205 15.8593 16.4922 15.1533L16.5 15V1.5C16.5 0.671573 15.8284 6.03989e-09 15 0H4.5ZM15 15H10.5V1.5H15V15Z"/>
+    <path d="M3 7.5H0V9H3V12H4.5V9H7.5V7.5H4.5V4.5H3V7.5Z"/>
+    </svg>`,
+
+  "insert-column-after":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 0C14.3284 0 15 0.671573 15 1.5V3H13.5V1.5H9V15H13.5V13.5H15V15C15 15.7767 14.4097 16.4154 13.6533 16.4922L13.5 16.5H3L2.84668 16.4922C2.14069 16.4205 1.57949 15.8593 1.50781 15.1533L1.5 15V1.5C1.5 0.671573 2.17157 6.03989e-09 3 0H13.5ZM3 15H7.5V1.5H3V15Z"/>
+    <path d="M15 7.5H18V9H15V12H13.5V9H10.5V7.5H13.5V4.5H15V7.5Z"/>
+    </svg>`,
+
+  "delete-column":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.1533 0.0078125C12.9097 0.0846097 13.5 0.723336 13.5 1.5V4.5H12V1.5H6V15H12V12H13.5V15C13.5 15.7767 12.9097 16.4154 12.1533 16.4922L12 16.5H6C5.22334 16.5 4.58461 15.9097 4.50781 15.1533L4.5 15V1.5C4.5 0.671573 5.17157 2.41596e-08 6 0H12L12.1533 0.0078125Z"/>
+    <path d="M15.9316 6.12891L13.8105 8.24902L15.9326 10.3711L14.8711 11.4316L12.75 9.31055L10.6289 11.4316L9.56738 10.3711L11.6885 8.24902L9.56836 6.12891L10.6289 5.06836L12.75 7.18848L14.8711 5.06836L15.9316 6.12891Z"/>
+    </svg>`,
+
+  "toggle-column":
+    `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6533 17.9922C14.4097 17.9154 15 17.2767 15 16.5L15 3L14.9922 2.84668C14.9205 2.14069 14.3593 1.57949 13.6533 1.50781L13.5 1.5L4.5 1.5L4.34668 1.50781C3.59028 1.58461 3 2.22334 3 3L3 16.5C3 17.2767 3.59028 17.9154 4.34668 17.9922L4.5 18L13.5 18L13.6533 17.9922ZM9 3L13.5 3L13.5 16.5L9 16.5L9 3Z" />
+    </svg>`,
+
+  "delete-table":
+    `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
+    </svg>`
+};
 
-  get #emptyResultsMessage() {
-    return this.getAttribute("empty-results") || NOTHING_FOUND_DEFAULT_MESSAGE
-  }
+class TableTools extends HTMLElement {
+  connectedCallback() {
+    this.tableController = new TableController(this.#editorElement);
 
-  #handleKeydownOnPopover = (event) => {
-    if (event.key === "Escape") {
-      this.#hidePopover();
-      this.#editorElement.focus();
-      event.stopPropagation();
-    }
-    // Arrow keys are now handled via Lexical commands with HIGH priority
+    this.#setUpButtons();
+    this.#monitorForTableSelection();
+    this.#registerKeyboardShortcuts();
   }
 
-  #moveSelectionDown() {
-    const nextIndex = this.#selectedIndex + 1;
-    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
-  }
+  disconnectedCallback() {
+    this.#unregisterKeyboardShortcuts();
 
-  #moveSelectionUp() {
-    const previousIndex = this.#selectedIndex - 1;
-    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
+    this.unregisterUpdateListener?.();
+    this.unregisterUpdateListener = null;
+
+    this.removeEventListener("keydown", this.#handleToolsKeydown);
+
+    this.tableController?.destroy();
+    this.tableController = null;
   }
 
-  get #selectedIndex() {
-    return this.#listItemElements.findIndex((item) => item.hasAttribute("aria-selected"))
+  get #editor() {
+    return this.#editorElement.editor
   }
 
-  get #selectedListItem() {
-    return this.#listItemElements[this.#selectedIndex]
+  get #editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  #handleSelectedOption(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.#optionWasSelected();
-    return true
+  get #tableToolsButtons() {
+    return Array.from(this.querySelectorAll("button, details > summary"))
   }
 
-  #optionWasSelected() {
-    this.#replaceTriggerWithSelectedItem();
-    this.#hidePopover();
-    this.#editorElement.focus();
+  #setUpButtons() {
+    this.appendChild(this.#createRowButtonsContainer());
+    this.appendChild(this.#createColumnButtonsContainer());
+
+    this.appendChild(this.#createDeleteTableButton());
+    this.addEventListener("keydown", this.#handleToolsKeydown);
   }
 
-  #replaceTriggerWithSelectedItem() {
-    const promptItem = this.source.promptItemFor(this.#selectedListItem);
+  #createButtonsContainer(childType, setCountProperty, moreMenu) {
+    const container = createElement("div", { className: `lexxy-table-control lexxy-table-control--${childType}` });
 
-    if (!promptItem) { return }
+    const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
+    const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
 
-    const templates = Array.from(promptItem.querySelectorAll("template[type='editor']"));
-    const stringToReplace = `${this.trigger}${this.#editorContents.textBackUntil(this.trigger)}`;
+    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" });
+    dropdown.setAttribute("name", "lexxy-dropdown");
+    dropdown.tabIndex = -1;
 
-    if (this.hasAttribute("insert-editable-text")) {
-      this.#insertTemplatesAsEditableText(templates, stringToReplace);
-    } else {
-      this.#insertTemplatesAsAttachments(templates, stringToReplace, promptItem.getAttribute("sgid"));
-    }
-  }
+    const count = createElement("summary", {}, `_ ${childType}s`);
+    setCountProperty(count);
+    dropdown.appendChild(count);
 
-  #insertTemplatesAsEditableText(templates, stringToReplace) {
-    this.#editor.update(() => {
-      const nodes = templates.flatMap(template => this.#buildEditableTextNodes(template));
-      this.#editorContents.replaceTextBackUntil(stringToReplace, nodes);
-    });
-  }
+    dropdown.appendChild(moreMenu);
 
-  #buildEditableTextNodes(template) {
-    return $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`))
-  }
+    container.appendChild(minusButton);
+    container.appendChild(dropdown);
+    container.appendChild(plusButton);
 
-  #insertTemplatesAsAttachments(templates, stringToReplace, fallbackSgid = null) {
-    this.#editor.update(() => {
-      const attachmentNodes = this.#buildAttachmentNodes(templates, fallbackSgid);
-      const spacedAttachmentNodes = attachmentNodes.flatMap(node => [ node, this.#getSpacerTextNode() ]).slice(0, -1);
-      this.#editorContents.replaceTextBackUntil(stringToReplace, spacedAttachmentNodes);
-    });
+    return container
   }
 
-  #buildAttachmentNodes(templates, fallbackSgid = null) {
-    return templates.map(
-      template => this.#buildAttachmentNode(
-        template.innerHTML,
-        template.getAttribute("content-type") || this.#defaultPromptContentType,
-        template.getAttribute("sgid") || fallbackSgid
-      ))
+  #createRowButtonsContainer() {
+    return this.#createButtonsContainer(
+      "row",
+      (count) => { this.rowCount = count; },
+      this.#createMoreMenuSection("row")
+    )
   }
 
-  #getSpacerTextNode() {
-    return $createTextNode(" ")
+  #createColumnButtonsContainer() {
+    return this.#createButtonsContainer(
+      "column",
+      (count) => { this.columnCount = count; },
+      this.#createMoreMenuSection("column")
+    )
   }
 
-  get #defaultPromptContentType() {
-    const attachmentContentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
-    return `application/vnd.${attachmentContentTypeNamespace}.${this.name}`
+  #createMoreMenuSection(childType) {
+    const section = createElement("div", { className: "lexxy-table-control__more-menu-details" });
+    const addBeforeButton = this.#createButton(`Add ${childType} before`, { action: "insert", childType, direction: "before" });
+    const addAfterButton = this.#createButton(`Add ${childType} after`, { action: "insert", childType, direction: "after" });
+    const toggleStyleButton = this.#createButton(`Toggle ${childType} style`, { action: "toggle", childType });
+    const deleteButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType });
+
+    section.appendChild(addBeforeButton);
+    section.appendChild(addAfterButton);
+    section.appendChild(toggleStyleButton);
+    section.appendChild(deleteButton);
+
+    return section
   }
 
-  #buildAttachmentNode(innerHtml, contentType, sgid) {
-    return new CustomActionTextAttachmentNode({ sgid, contentType, innerHtml })
+  #createDeleteTableButton() {
+    const container = createElement("div", { className: "lexxy-table-control" });
+
+    const deleteTableButton = this.#createButton("Delete this table?", { action: "delete", childType: "table" });
+    deleteTableButton.classList.add("lexxy-table-control__button--delete-table");
+
+    container.appendChild(deleteTableButton);
+
+    this.deleteContainer = container;
+
+    return container
   }
 
-  get #editorContents() {
-    return this.#editorElement.contents
+  #createButton(label, command = {}, icon = this.#icon(command)) {
+    const button = createElement("button", {
+      className: "lexxy-table-control__button",
+      "aria-label": label,
+      type: "button"
+    });
+    button.tabIndex = -1;
+    button.innerHTML = `${icon} <span>${label}</span>`;
+
+    button.dataset.action = command.action;
+    button.dataset.childType = command.childType;
+    button.dataset.direction = command.direction;
+
+    button.addEventListener("click", () => this.#executeTableCommand(command));
+
+    button.addEventListener("mouseover", () => this.#handleCommandButtonHover());
+    button.addEventListener("focus", () => this.#handleCommandButtonHover());
+    button.addEventListener("mouseout", () => this.#handleCommandButtonHover());
+
+    return button
   }
 
-  get #editorContentElement() {
-    return this.#editorElement.editorContentElement
+  #registerKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH);
   }
 
-  async #buildPopover() {
-    const popoverContainer = createElement("ul", { role: "listbox", id: generateDomId("prompt-popover") }); // Avoiding [popover] due to not being able to position at an arbitrary X, Y position.
-    popoverContainer.classList.add("lexxy-prompt-menu");
-    popoverContainer.style.position = "absolute";
-    popoverContainer.setAttribute("nonce", getNonce());
-    popoverContainer.append(...await this.source.buildListItems());
-    popoverContainer.addEventListener("click", this.#handlePopoverClick);
-    this.#editorElement.appendChild(popoverContainer);
-    return popoverContainer
+  #unregisterKeyboardShortcuts() {
+    this.unregisterKeyboardShortcuts?.();
+    this.unregisterKeyboardShortcuts = null;
   }
 
-  #handlePopoverClick = (event) => {
-    const listItem = event.target.closest(".lexxy-prompt-menu__item");
-    if (listItem) {
-      this.#selectOption(listItem);
-      this.#optionWasSelected();
+  #handleAccessibilityShortcutKey = (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
+      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
+      firstButton?.focus();
     }
   }
 
-  #reconnect() {
-    this.disconnectedCallback();
-    this.connectedCallback();
+  #handleToolsKeydown = (event) => {
+    if (event.key === "Escape") {
+      this.#handleEscapeKey();
+    } else {
+      handleRollingTabIndex(this.#tableToolsButtons, event);
+    }
   }
-}
 
-customElements.define("lexxy-prompt", LexicalPromptElement);
+  #handleEscapeKey() {
+    const cell = this.tableController.currentCell;
+    if (!cell) return
 
-class CodeLanguagePicker extends HTMLElement {
-  connectedCallback() {
-    this.editorElement = this.closest("lexxy-editor");
-    this.editor = this.editorElement.editor;
+    this.#editor.update(() => {
+      cell.select();
+      this.#editor.focus();
+    });
 
-    this.#attachLanguagePicker();
-    this.#monitorForCodeBlockSelection();
+    this.#update();
   }
 
-  #attachLanguagePicker() {
-    this.languagePickerElement = this.#createLanguagePicker();
-
-    this.languagePickerElement.addEventListener("change", () => {
-      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
-    });
+  async #handleCommandButtonHover() {
+    await nextFrame();
 
-    this.languagePickerElement.setAttribute("nonce", getNonce());
-    this.appendChild(this.languagePickerElement);
-  }
+    this.#clearCellStyles();
 
-  #createLanguagePicker() {
-    const selectElement = createElement("select", { className: "lexxy-code-language-picker", "aria-label": "Pick a language…", name: "lexxy-code-language" });
+    const activeElement = this.querySelector("button:hover, button:focus");
+    if (!activeElement) return
 
-    for (const [ value, label ] of Object.entries(this.#languages)) {
-      const option = document.createElement("option");
-      option.value = value;
-      option.textContent = label;
-      selectElement.appendChild(option);
-    }
+    const command = {
+      action: activeElement.dataset.action,
+      childType: activeElement.dataset.childType,
+      direction: activeElement.dataset.direction
+    };
 
-    return selectElement
-  }
+    let cellsToHighlight = null;
 
-  get #languages() {
-    const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
+    switch (command.childType) {
+      case "row":
+        cellsToHighlight = this.tableController.currentRowCells;
+        break
+      case "column":
+        cellsToHighlight = this.tableController.currentColumnCells;
+        break
+      case "table":
+        cellsToHighlight = this.tableController.tableRows;
+        break
+    }
 
-    if (!languages.ruby) languages.ruby = "Ruby";
-    if (!languages.php) languages.php = "PHP";
-    if (!languages.go) languages.go = "Go";
-    if (!languages.bash) languages.bash = "Bash";
-    if (!languages.json) languages.json = "JSON";
-    if (!languages.diff) languages.diff = "Diff";
+    if (!cellsToHighlight) return
 
-    const sortedEntries = Object.entries(languages)
-      .sort(([ , a ], [ , b ]) => a.localeCompare(b));
+    cellsToHighlight.forEach(cell => {
+      const cellElement = this.#editor.getElementByKey(cell.getKey());
+      if (!cellElement) return
 
-    // Place the "plain" entry first, then the rest of language sorted alphabetically
-    const plainIndex = sortedEntries.findIndex(([ key ]) => key === "plain");
-    const plainEntry = sortedEntries.splice(plainIndex, 1)[0];
-    return Object.fromEntries([ plainEntry, ...sortedEntries ])
+      cellElement.classList.toggle(theme.tableCellHighlight, true);
+      Object.assign(cellElement.dataset, command);
+    });
   }
 
-  #updateCodeBlockLanguage(language) {
-    this.editor.update(() => {
-      const codeNode = this.#getCurrentCodeNode();
+  #monitorForTableSelection() {
+    this.unregisterUpdateListener = this.#editor.registerUpdateListener(() => {
+      this.tableController.updateSelectedTable();
 
-      if (codeNode) {
-        codeNode.setLanguage(language);
+      const tableNode = this.tableController.currentTableNode;
+      if (tableNode) {
+        this.#show();
+      } else {
+        this.#hide();
       }
     });
   }
 
-  #monitorForCodeBlockSelection() {
-    this.editor.registerUpdateListener(() => {
-      this.editor.getEditorState().read(() => {
-        const codeNode = this.#getCurrentCodeNode();
+  #executeTableCommand(command) {
+    this.tableController.executeTableCommand(command);
+    this.#update();
+  }
 
-        if (codeNode) {
-          this.#codeNodeWasSelected(codeNode);
-        } else {
-          this.#hideLanguagePicker();
-        }
-      });
-    });
+  #show() {
+    this.style.display = "flex";
+    this.#update();
   }
 
-  #getCurrentCodeNode() {
-    const selection = $getSelection();
+  #hide() {
+    this.style.display = "none";
+    this.#clearCellStyles();
+  }
 
-    if (!$isRangeSelection(selection)) {
-      return null
-    }
+  #update() {
+    this.#updateButtonsPosition();
+    this.#updateRowColumnCount();
+    this.#closeMoreMenu();
+    this.#handleCommandButtonHover();
+  }
 
-    const anchorNode = selection.anchor.getNode();
-    const parentNode = anchorNode.getParent();
+  #closeMoreMenu() {
+    this.querySelector("details[open]")?.removeAttribute("open");
+  }
 
-    if ($isCodeNode(anchorNode)) {
-      return anchorNode
-    } else if ($isCodeNode(parentNode)) {
-      return parentNode
-    }
+  #updateButtonsPosition() {
+    const tableNode = this.tableController.currentTableNode;
+    if (!tableNode) return
 
-    return null
-  }
+    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
+    if (!tableElement) return
 
-  #codeNodeWasSelected(codeNode) {
-    const language = codeNode.getLanguage();
+    const tableRect = tableElement.getBoundingClientRect();
+    const editorRect = this.#editorElement.getBoundingClientRect();
 
-    this.#updateLanguagePickerWith(language);
-    this.#showLanguagePicker();
-    this.#positionLanguagePicker(codeNode);
+    const relativeTop = tableRect.top - editorRect.top;
+    const relativeCenter = (tableRect.left + tableRect.right) / 2 - editorRect.left;
+    this.style.top = `${relativeTop}px`;
+    this.style.left = `${relativeCenter}px`;
   }
 
-  #updateLanguagePickerWith(language) {
-    if (this.languagePickerElement && language) {
-      const normalizedLanguage = normalizeCodeLang(language);
-      this.languagePickerElement.value = normalizedLanguage;
-    }
+  #updateRowColumnCount() {
+    const tableNode = this.tableController.currentTableNode;
+    if (!tableNode) return
+
+    const tableElement = $getElementForTableNode(this.#editor, tableNode);
+    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"}`;
   }
 
-  #positionLanguagePicker(codeNode) {
-    const codeElement = this.editor.getElementByKey(codeNode.getKey());
-    if (!codeElement) return
+  #setTableCellFocus() {
+    const cell = this.tableController.currentCell;
+    if (!cell) return
 
-    const codeRect = codeElement.getBoundingClientRect();
-    const editorRect = this.editorElement.getBoundingClientRect();
-    const relativeTop = codeRect.top - editorRect.top;
+    const cellElement = this.#editor.getElementByKey(cell.getKey());
+    if (!cellElement) return
 
-    this.style.top = `${relativeTop}px`;
+    cellElement.classList.add(theme.tableCellFocus);
   }
 
-  #showLanguagePicker() {
-    this.hidden = false;
+  #clearCellStyles() {
+    this.#editorElement.querySelectorAll(`.${theme.tableCellFocus}`)?.forEach(cell => {
+      cell.classList.remove(theme.tableCellFocus);
+    });
+
+    this.#editorElement.querySelectorAll(`.${theme.tableCellHighlight}`)?.forEach(cell => {
+      cell.classList.remove(theme.tableCellHighlight);
+      cell.removeAttribute("data-action");
+      cell.removeAttribute("data-child-type");
+      cell.removeAttribute("data-direction");
+    });
+
+    this.#setTableCellFocus();
   }
 
-  #hideLanguagePicker() {
-    this.hidden = true;
+  #icon(command) {
+    const { action, childType } = command;
+    const direction = (action == "insert" ? command.direction : null);
+    const iconId = [ action, childType, direction ].filter(Boolean).join("-");
+    return TableIcons[iconId]
   }
 }
 
-customElements.define("lexxy-code-language-picker", CodeLanguagePicker);
+function defineElements() {
+  const elements = {
+    "lexxy-toolbar": LexicalToolbarElement,
+    "lexxy-editor": LexicalEditorElement,
+    "lexxy-link-dropdown": LinkDropdown,
+    "lexxy-highlight-dropdown": HighlightDropdown,
+    "lexxy-prompt": LexicalPromptElement,
+    "lexxy-code-language-picker": CodeLanguagePicker,
+    "lexxy-table-tools": TableTools,
+  };
+
+  Object.entries(elements).forEach(([ name, element ]) => {
+    customElements.define(name, element);
+  });
+}
 
 class LexxyExtension {
   #editorElement
@@ -5981,4 +6305,7 @@ class LexxyExtension {
 
 const configure = Lexxy.configure;
 
+// Pushing elements definition to after the current call stack to allow global configuration to take place first
+setTimeout(defineElements, 0);
+
 export { ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, LexxyExtension as Extension, HorizontalDividerNode, configure };