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

package/dist/lexxy.esm.js

@@ -10,8 +10,8 @@ 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, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_HIGH, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, $isRootOrShadowRoot, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, $isParagraphNode, $insertNodes, $createLineBreakNode, PASTE_TAG, createCommand, createState, defineExtension, $setState, $getState, $hasUpdateTag, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_DOWN_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
-import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListNode, $getListDepth, $createListNode, ListItemNode, registerList } from '@lexical/list';
+import { 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';
@@ -156,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) {
@@ -465,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() {
@@ -532,13 +534,12 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorSelectionChanges() {
-    this.editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      () => {
-        this.#closeDropdowns();
+    this.editor.registerUpdateListener(() => {
+      this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
-        return false
-      }, COMMAND_PRIORITY_HIGH);
+        this.#closeDropdowns();
+      });
+    });
   }
 
   #monitorHistoryChanges() {
@@ -802,8 +803,6 @@ class LexicalToolbarElement extends HTMLElement {
   }
 }
 
-customElements.define("lexxy-toolbar", LexicalToolbarElement);
-
 var theme = {
   text: {
     bold: "lexxy-content__bold",
@@ -969,6 +968,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.fileSize = fileSize;
     this.width = width;
     this.height = height;
+
+    this.editor = $getEditor();
   }
 
   createDOM() {
@@ -989,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() {
@@ -1098,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);
 
@@ -1107,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();
   }
@@ -1162,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());
 
-    const progressBar = createElement("progress", { value: this.progress, max: 100 });
-    figure.appendChild(progressBar);
+    return figure
+  }
 
-    // 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));
+  updateDOM(prevNode, dom) {
+    if (this.uploadError !== prevNode.uploadError) return true
 
-    return figure
+    if (prevNode.progress !== this.progress) {
+      const progress = dom.querySelector("progress");
+      progress.value = this.progress ?? 0;
+    }
+
+    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")
   }
@@ -1237,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);
+      }
+    });
+  }
 
-    upload.delegate = {
+  #createUploadDelegate() {
+    const shouldAuthenticateUploads = Lexxy.global.get("authenticatedUploads");
+
+    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 {
@@ -3114,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 });
   }
@@ -3731,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));
     }
   }
 
@@ -4225,7 +4293,6 @@ class LexicalEditorElement extends HTMLElement {
   #initialize() {
     this.#synchronizeWithChanges();
     this.#registerComponents();
-    this.#listenForInvalidatedNodes();
     this.#handleEnter();
     this.#registerFocusEvents();
     this.#attachDebugHooks();
@@ -4238,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
     );
 
@@ -4252,7 +4319,7 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   get #lexicalExtensions() {
-    const extensions = [ ];
+    const extensions = [];
     const richTextExtensions = [
       this.highlighter.lexicalExtension,
       TrixContentExtension,
@@ -4405,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(
@@ -4482,14 +4534,7 @@ class LexicalEditorElement extends HTMLElement {
 
 
   #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() {
@@ -4569,8 +4614,6 @@ class LexicalEditorElement extends HTMLElement {
   }
 }
 
-customElements.define("lexxy-editor", LexicalEditorElement);
-
 class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
     this.container = this.closest("details");
@@ -4696,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']";
 
@@ -4805,1425 +4846,1433 @@ class HighlightDropdown extends ToolbarDropdown {
   }
 }
 
-customElements.define("lexxy-highlight-dropdown", HighlightDropdown);
-
-class TableController {
-  constructor(editorElement) {
-    this.editor = editorElement.editor;
-    this.contents = editorElement.contents;
-    this.selection = editorElement.selection;
-
-    this.currentTableNodeKey = null;
-    this.currentCellKey = null;
+class BaseSource {
+  // Template method to override
+  async buildListItems(filter = "") {
+    return Promise.resolve([])
+  }
 
-    this.#registerKeyHandlers();
+  // Template method to override
+  promptItemFor(listItem) {
+    return null
   }
 
-  destroy() {
-    this.currentTableNodeKey = null;
-    this.currentCellKey = null;
+  // Protected
 
-    this.#unregisterKeyHandlers();
+  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 currentCell() {
-    if (!this.currentCellKey) return null
+  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)
+    }
+  }
+}
 
-    return this.editor.getEditorState().read(() => {
-      const cell = $getNodeByKey(this.currentCellKey);
-      return (cell instanceof TableCellNode) ? cell : null
-    })
+class LocalFilterSource extends BaseSource {
+  async buildListItems(filter = "") {
+    const promptItems = await this.fetchPromptItems();
+    return this.#buildListItemsFromPromptItems(promptItems, filter)
   }
 
-  get currentTableNode() {
-    if (!this.currentTableNodeKey) return null
+  // Template method to override
+  async fetchPromptItems(filter) {
+    return Promise.resolve([])
+  }
 
-    return this.editor.getEditorState().read(() => {
-      const tableNode = $getNodeByKey(this.currentTableNodeKey);
-      return (tableNode instanceof TableNode) ? tableNode : null
-    })
+  promptItemFor(listItem) {
+    return this.promptItemByListItem.get(listItem)
   }
 
-  get currentRowCells() {
-    const currentRowIndex = this.currentRowIndex;
+  #buildListItemsFromPromptItems(promptItems, filter) {
+    const listItems = [];
+    this.promptItemByListItem = new WeakMap();
+    promptItems.forEach((promptItem) => {
+      const searchableText = promptItem.getAttribute("search");
 
-    const rows = this.tableRows;
-    if (!rows) return null
+      if (!filter || filterMatches(searchableText, filter)) {
+        const listItem = this.buildListItemElementFor(promptItem);
+        this.promptItemByListItem.set(listItem, promptItem);
+        listItems.push(listItem);
+      }
+    });
 
-    return this.editor.getEditorState().read(() => {
-      return rows[currentRowIndex]?.getChildren() ?? null
-    }) ?? null
+    return listItems
   }
+}
 
-  get currentRowIndex() {
-    const currentCell = this.currentCell;
-    if (!currentCell) return 0
+class InlinePromptSource extends LocalFilterSource {
+  constructor(inlinePromptItems) {
+    super();
+    this.inlinePromptItemElements = Array.from(inlinePromptItems);
+  }
 
-    return this.editor.getEditorState().read(() => {
-      return $getTableRowIndexFromTableCellNode(currentCell)
-    }) ?? 0
+  async fetchPromptItems() {
+    return Promise.resolve(this.inlinePromptItemElements)
   }
+}
 
-  get currentColumnCells() {
-    const columnIndex = this.currentColumnIndex;
+class DeferredPromptSource extends LocalFilterSource {
+  constructor(url) {
+    super();
+    this.url = url;
 
-    const rows = this.tableRows;
-    if (!rows) return null
+    this.fetchPromptItems();
+  }
 
-    return this.editor.getEditorState().read(() => {
-      return rows.map(row => row.getChildAtIndex(columnIndex))
-    }) ?? null
+  async fetchPromptItems() {
+    this.promptItems ??= await this.loadPromptItemsFromUrl(this.url);
+
+    return Promise.resolve(this.promptItems)
   }
+}
 
-  get currentColumnIndex() {
-    const currentCell = this.currentCell;
-    if (!currentCell) return 0
+const DEBOUNCE_INTERVAL = 200;
 
-    return this.editor.getEditorState().read(() => {
-      return $getTableColumnIndexFromTableCellNode(currentCell)
-    }) ?? 0
+class RemoteFilterSource extends BaseSource {
+  constructor(url) {
+    super();
+
+    this.baseURL = url;
+    this.loadAndFilterListItems = debounceAsync(this.fetchFilteredListItems.bind(this), DEBOUNCE_INTERVAL);
   }
 
-  get tableRows() {
-    return this.editor.getEditorState().read(() => {
-      return this.currentTableNode?.getChildren()
-    }) ?? null
+  async buildListItems(filter = "") {
+    return await this.loadAndFilterListItems(filter)
   }
 
-  updateSelectedTable() {
-    let cellNode = null;
-    let tableNode = null;
-
-    this.editor.getEditorState().read(() => {
-      const selection = $getSelection();
-      if (!selection || !this.selection.isTableCellSelected) return
-
-      const node = selection.getNodes()[0];
+  promptItemFor(listItem) {
+    return this.promptItemByListItem.get(listItem)
+  }
 
-      cellNode = $findCellNode(node);
-      tableNode = $findTableNode(node);
-    });
+  async fetchFilteredListItems(filter) {
+    const promptItems = await this.loadPromptItemsFromUrl(this.#urlFor(filter));
+    return this.#buildListItemsFromPromptItems(promptItems)
+  }
 
-    this.currentCellKey = cellNode?.getKey() ?? null;
-    this.currentTableNodeKey = tableNode?.getKey() ?? null;
+  #urlFor(filter) {
+    const url = new URL(this.baseURL, window.location.origin);
+    url.searchParams.append("filter", filter);
+    return url.toString()
   }
 
-  executeTableCommand(command, customIndex = null) {
-    if (command.action === "delete" && command.childType === "table") {
-      this.#deleteTable();
-      return
-    }
+  #buildListItemsFromPromptItems(promptItems) {
+    const listItems = [];
+    this.promptItemByListItem = new WeakMap();
 
-    if (command.action === "toggle") {
-      this.#executeToggleStyle(command);
-      return
+    for (const promptItem of promptItems) {
+      const listItem = this.buildListItemElementFor(promptItem);
+      this.promptItemByListItem.set(listItem, promptItem);
+      listItems.push(listItem);
     }
 
-    this.#executeCommand(command, customIndex);
+    return listItems
   }
+}
 
-  #executeCommand(command, customIndex = null) {
-    this.#selectCellAtSelection();
-    this.editor.dispatchCommand(this.#commandName(command));
-    this.#selectNextBestCell(command, customIndex);
-  }
+const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
 
-  #executeToggleStyle(command) {
-    const childType = command.childType;
+class LexicalPromptElement extends HTMLElement {
+  constructor() {
+    super();
+    this.keyListeners = [];
+  }
 
-    let cells = null;
-    let headerState = null;
+  static observedAttributes = [ "connected" ]
 
-    if (childType === "row") {
-      cells = this.currentRowCells;
-      headerState = TableCellHeaderStates.ROW;
-    } else if (childType === "column") {
-      cells = this.currentColumnCells;
-      headerState = TableCellHeaderStates.COLUMN;
-    }
+  connectedCallback() {
+    this.source = this.#createSource();
 
-    if (!cells || cells.length === 0) return
+    this.#addTriggerListener();
+    this.toggleAttribute("connected", true);
+  }
 
-    this.editor.update(() => {
-      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
-      if (!firstCell) return
+  disconnectedCallback() {
+    this.source = null;
+    this.popoverElement = null;
+  }
 
-      const currentStyle = firstCell.getHeaderStyles();
-      const newStyle = currentStyle ^ headerState;
 
-      cells.forEach(cell => {
-        this.#setHeaderStyle(cell, newStyle, headerState);
-      });
-    });
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.#reconnect());
+    }
   }
 
-  #deleteTable() {
-    this.#selectCellAtSelection();
-    this.editor.dispatchCommand("deleteTable");
+  get name() {
+    return this.getAttribute("name")
   }
 
-  #selectCellAtSelection() {
-    this.editor.update(() => {
-      const selection = $getSelection();
-      if (!selection) return
+  get trigger() {
+    return this.getAttribute("trigger")
+  }
 
-      const node = selection.getNodes()[0];
+  get supportsSpaceInSearches() {
+    return this.hasAttribute("supports-space-in-searches")
+  }
 
-      $findCellNode(node)?.selectEnd();
-    });
+  get open() {
+    return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
   }
 
-  #commandName(command) {
-    const { action, childType, direction } = command;
+  get closed() {
+    return !this.open
+  }
 
-    const childTypeSuffix = upcaseFirst(childType);
-    const directionSuffix = action == "insert" ? upcaseFirst(direction) : "";
-    return `${action}Table${childTypeSuffix}${directionSuffix}`
+  get #doesSpaceSelect() {
+    return !this.supportsSpaceInSearches
   }
 
-  #setHeaderStyle(cell, newStyle, headerState) {
-    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
-    tableCellNode?.setHeaderStyles(newStyle, headerState);
+  #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"))
+    }
   }
 
-  async #selectCellAtIndex(rowIndex, columnIndex) {
-    // We wait for next frame, otherwise table operations might not have completed yet.
-    await nextFrame();
+  #addTriggerListener() {
+    const unregister = this.#editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
 
-    if (!this.currentTableNode) return
+        if ($isTextNode(node)) {
+          const fullText = node.getTextContent();
+          const triggerLength = this.trigger.length;
 
-    const rows = this.tableRows;
-    if (!rows) return
+          // Check if we have enough characters for the trigger
+          if (offset >= triggerLength) {
+            const textBeforeCursor = fullText.slice(offset - triggerLength, offset);
 
-    const row = rows[rowIndex];
-    if (!row) return
+            // 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;
 
-    this.editor.update(() => {
-      const cell = $getTableCellNodeFromLexicalNode(row.getChildAtIndex(columnIndex));
-      cell?.selectEnd();
+              const charBeforeTrigger = offset > triggerLength ? fullText[offset - triggerLength - 1] : null;
+              const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+
+              if (isAtStart || isPrecededBySpaceOrNewline) {
+                unregister();
+                this.#showPopover();
+              }
+            }
+          }
+        }
+      });
     });
   }
 
-  #selectNextBestCell(command, customIndex = null) {
-    const { childType, direction } = command;
+  #addCursorPositionListener() {
+    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
+      if (this.closed) return
 
-    let rowIndex = this.currentRowIndex;
-    let columnIndex = customIndex !== null ? customIndex : this.currentColumnIndex;
+      this.#editor.read(() => {
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
 
-    const deleteOffset = command.action === "delete" ? -1 : 0;
-    const offset = direction === "after" ? 1 : deleteOffset;
+        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 (childType === "row") {
-      rowIndex += offset;
-    } else if (childType === "column") {
-      columnIndex += offset;
-    }
+          // 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();
+        }
+      });
+    });
+  }
 
-    this.#selectCellAtIndex(rowIndex, columnIndex);
+  #removeCursorPositionListener() {
+    if (this.cursorPositionListener) {
+      this.cursorPositionListener();
+      this.cursorPositionListener = null;
+    }
   }
 
-  #selectNextRow() {
-    const rows = this.tableRows;
-    if (!rows) return
+  get #editor() {
+    return this.#editorElement.editor
+  }
 
-    const nextRow = rows.at(this.currentRowIndex + 1);
-    if (!nextRow) return
+  get #editorElement() {
+    return this.closest("lexxy-editor")
+  }
 
-    this.editor.update(() => {
-      nextRow.getChildAtIndex(this.currentColumnIndex)?.selectEnd();
-    });
+  get #selection() {
+    return this.#editorElement.selection
   }
 
-  #selectPreviousCell() {
-    const cell = this.currentCell;
-    if (!cell) return
+  async #showPopover() {
+    this.popoverElement ??= await this.#buildPopover();
+    this.#resetPopoverPosition();
+    await this.#filterOptions();
+    this.popoverElement.classList.toggle("lexxy-prompt-menu--visible", true);
+    this.#selectFirstOption();
 
-    this.editor.update(() => {
-      cell.selectPrevious();
-    });
-  }
+    this.#editorElement.addEventListener("keydown", this.#handleKeydownOnPopover);
+    this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
 
-  #insertRowAndSelectFirstCell() {
-    this.executeTableCommand({ action: "insert", childType: "row", direction: "after" }, 0);
+    this.#registerKeyListeners();
+    this.#addCursorPositionListener();
   }
 
-  #deleteRowAndSelectLastCell() {
-    this.executeTableCommand({ action: "delete", childType: "row" }, -1);
-  }
+  #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));
 
-  #deleteRowAndSelectNextNode() {
-    const tableNode = this.currentTableNode;
-    this.executeTableCommand({ action: "delete", childType: "row" });
+    if (this.#doesSpaceSelect) {
+      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    }
 
-    this.editor.update(() => {
-      const next = tableNode?.getNextSibling();
-      if ($isParagraphNode(next)) {
-        next.selectStart();
-      } else {
-        const newParagraph = $createParagraphNode();
-        this.currentTableNode.insertAfter(newParagraph);
-        newParagraph.selectStart();
-      }
-    });
+    // 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));
   }
 
-  #isCurrentCellEmpty() {
-    if (!this.currentTableNode) return false
-
-    const cell = this.currentCell;
-    if (!cell) return false
-
-    return cell.getTextContent().trim() === ""
+  #handleArrowUp(event) {
+    this.#moveSelectionUp();
+    event.preventDefault();
+    return true
   }
 
-  #isCurrentRowLast() {
-    if (!this.currentTableNode) return false
-
-    const rows = this.tableRows;
-    if (!rows) return false
-
-    return rows.length === this.currentRowIndex + 1
+  #handleArrowDown(event) {
+    this.#moveSelectionDown();
+    event.preventDefault();
+    return true
   }
 
-  #isCurrentRowEmpty() {
-    if (!this.currentTableNode) return false
-
-    const cells = this.currentRowCells;
-    if (!cells) return false
+  #selectFirstOption() {
+    const firstOption = this.#listItemElements[0];
 
-    return cells.every(cell => cell.getTextContent().trim() === "")
+    if (firstOption) {
+      this.#selectOption(firstOption);
+    }
   }
 
-  #isFirstCellInRow() {
-    if (!this.currentTableNode) return false
-
-    const cells = this.currentRowCells;
-    if (!cells) return false
-
-    return cells.indexOf(this.currentCell) === 0
+  get #listItemElements() {
+    return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
   }
 
-  #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);
-  }
+  #selectOption(listItem) {
+    this.#clearSelection();
+    listItem.toggleAttribute("aria-selected", true);
+    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    listItem.focus();
 
-  #unregisterKeyHandlers() {
-    this.unregisterBackspaceKeyHandler?.();
-    this.unregisterEnterKeyHandler?.();
+    // Preserve selection to prevent cursor jump
+    this.#selection.preservingSelection(() => {
+      this.#editorElement.focus();
+    });
 
-    this.unregisterBackspaceKeyHandler = null;
-    this.unregisterEnterKeyHandler = null;
+    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
+    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
+    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
   }
 
-  #handleBackspaceKey(event) {
-    if (!this.currentTableNode) return false
+  #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");
+  }
 
-    if (this.#isCurrentRowEmpty() && this.#isFirstCellInRow()) {
-      event.preventDefault();
-      this.#deleteRowAndSelectLastCell();
-      return true
-    }
+  #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.#isCurrentCellEmpty() && !this.#isFirstCellInRow()) {
-      event.preventDefault();
-      this.#selectPreviousCell();
-      return true
+    if (!this.popoverElement.hasAttribute("data-anchored")) {
+      this.popoverElement.style.left = `${x}px`;
+      this.popoverElement.toggleAttribute("data-anchored", true);
     }
 
-    return false
-  }
-
-  #handleEnterKey(event) {
-    if ((event.ctrlKey || event.metaKey) || event.shiftKey || !this.currentTableNode) return false
-
-    if (this.selection.isInsideList || this.selection.isInsideCodeBlock) return false
+    this.popoverElement.style.top = `${y + verticalOffset}px`;
+    this.popoverElement.style.bottom = "auto";
 
-    event.preventDefault();
+    const popoverRect = this.popoverElement.getBoundingClientRect();
+    const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
 
-    if (this.#isCurrentRowLast() && this.#isCurrentRowEmpty()) {
-      this.#deleteRowAndSelectNextNode();
-    } else if (this.#isCurrentRowLast()) {
-      this.#insertRowAndSelectFirstCell();
-    } else {
-      this.#selectNextRow();
+    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 true
   }
-}
-
-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>`,
+  #resetPopoverPosition() {
+    this.popoverElement.removeAttribute("data-clipped-at-bottom");
+    this.popoverElement.removeAttribute("data-anchored");
+  }
 
-  "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>`,
+  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);
 
-  "delete-table":
-    `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
-    </svg>`
-};
+    this.#unregisterKeyListeners();
+    this.#removeCursorPositionListener();
 
-class TableTools extends HTMLElement {
-  connectedCallback() {
-    this.tableController = new TableController(this.#editorElement);
+    await nextFrame();
+    this.#addTriggerListener();
+  }
 
-    this.#setUpButtons();
-    this.#monitorForTableSelection();
-    this.#registerKeyboardShortcuts();
+  #unregisterKeyListeners() {
+    this.keyListeners.forEach((unregister) => unregister());
+    this.keyListeners = [];
   }
 
-  disconnectedCallback() {
-    this.#unregisterKeyboardShortcuts();
+  #filterOptions = async () => {
+    if (this.initialPrompt) {
+      this.initialPrompt = false;
+      return
+    }
 
-    this.unregisterUpdateListener?.();
-    this.unregisterUpdateListener = null;
+    if (this.#editorContents.containsTextBackUntil(this.trigger)) {
+      await this.#showFilteredOptions();
+      await nextFrame();
+      this.#positionPopover();
+    } else {
+      this.#hidePopover();
+    }
+  }
 
-    this.removeEventListener("keydown", this.#handleToolsKeydown);
+  async #showFilteredOptions() {
+    const filter = this.#editorContents.textBackUntil(this.trigger);
+    const filteredListItems = await this.source.buildListItems(filter);
+    this.popoverElement.innerHTML = "";
 
-    this.tableController?.destroy();
-    this.tableController = null;
+    if (filteredListItems.length > 0) {
+      this.#showResults(filteredListItems);
+    } else {
+      this.#showEmptyResults();
+    }
+    this.#selectFirstOption();
   }
 
-  get #editor() {
-    return this.#editorElement.editor
+  #showResults(filteredListItems) {
+    this.popoverElement.classList.remove("lexxy-prompt-menu--empty");
+    this.popoverElement.append(...filteredListItems);
   }
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+  #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 #tableToolsButtons() {
-    return Array.from(this.querySelectorAll("button, details > summary"))
+  get #emptyResultsMessage() {
+    return this.getAttribute("empty-results") || NOTHING_FOUND_DEFAULT_MESSAGE
   }
 
-  #setUpButtons() {
-    this.appendChild(this.#createRowButtonsContainer());
-    this.appendChild(this.#createColumnButtonsContainer());
-
-    this.appendChild(this.#createDeleteTableButton());
-    this.addEventListener("keydown", this.#handleToolsKeydown);
+  #handleKeydownOnPopover = (event) => {
+    if (event.key === "Escape") {
+      this.#hidePopover();
+      this.#editorElement.focus();
+      event.stopPropagation();
+    }
+    // Arrow keys are now handled via Lexical commands with HIGH priority
   }
 
-  #createButtonsContainer(childType, setCountProperty, moreMenu) {
-    const container = createElement("div", { className: `lexxy-table-control lexxy-table-control--${childType}` });
-
-    const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
-    const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
-
-    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" });
-    dropdown.setAttribute("name", "lexxy-dropdown");
-    dropdown.tabIndex = -1;
-
-    const count = createElement("summary", {}, `_ ${childType}s`);
-    setCountProperty(count);
-    dropdown.appendChild(count);
-
-    dropdown.appendChild(moreMenu);
-
-    container.appendChild(minusButton);
-    container.appendChild(dropdown);
-    container.appendChild(plusButton);
-
-    return container
+  #moveSelectionDown() {
+    const nextIndex = this.#selectedIndex + 1;
+    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
   }
 
-  #createRowButtonsContainer() {
-    return this.#createButtonsContainer(
-      "row",
-      (count) => { this.rowCount = count; },
-      this.#createMoreMenuSection("row")
-    )
+  #moveSelectionUp() {
+    const previousIndex = this.#selectedIndex - 1;
+    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
   }
 
-  #createColumnButtonsContainer() {
-    return this.#createButtonsContainer(
-      "column",
-      (count) => { this.columnCount = count; },
-      this.#createMoreMenuSection("column")
-    )
+  get #selectedIndex() {
+    return this.#listItemElements.findIndex((item) => item.hasAttribute("aria-selected"))
   }
 
-  #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 });
+  get #selectedListItem() {
+    return this.#listItemElements[this.#selectedIndex]
+  }
 
-    section.appendChild(addBeforeButton);
-    section.appendChild(addAfterButton);
-    section.appendChild(toggleStyleButton);
-    section.appendChild(deleteButton);
+  #handleSelectedOption(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.#optionWasSelected();
+    return true
+  }
 
-    return section
+  #optionWasSelected() {
+    this.#replaceTriggerWithSelectedItem();
+    this.#hidePopover();
+    this.#editorElement.focus();
   }
 
-  #createDeleteTableButton() {
-    const container = createElement("div", { className: "lexxy-table-control" });
+  #replaceTriggerWithSelectedItem() {
+    const promptItem = this.source.promptItemFor(this.#selectedListItem);
 
-    const deleteTableButton = this.#createButton("Delete this table?", { action: "delete", childType: "table" });
-    deleteTableButton.classList.add("lexxy-table-control__button--delete-table");
+    if (!promptItem) { return }
 
-    container.appendChild(deleteTableButton);
+    const templates = Array.from(promptItem.querySelectorAll("template[type='editor']"));
+    const stringToReplace = `${this.trigger}${this.#editorContents.textBackUntil(this.trigger)}`;
 
-    this.deleteContainer = container;
+    if (this.hasAttribute("insert-editable-text")) {
+      this.#insertTemplatesAsEditableText(templates, stringToReplace);
+    } else {
+      this.#insertTemplatesAsAttachments(templates, stringToReplace, promptItem.getAttribute("sgid"));
+    }
+  }
 
-    return container
+  #insertTemplatesAsEditableText(templates, stringToReplace) {
+    this.#editor.update(() => {
+      const nodes = templates.flatMap(template => this.#buildEditableTextNodes(template));
+      this.#editorContents.replaceTextBackUntil(stringToReplace, nodes);
+    });
   }
 
-  #createButton(label, command = {}, icon = this.#icon(command)) {
-    const button = createElement("button", {
-      className: "lexxy-table-control__button",
-      "aria-label": label,
-      type: "button"
+  #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);
     });
-    button.tabIndex = -1;
-    button.innerHTML = `${icon} <span>${label}</span>`;
+  }
+
+  #buildAttachmentNodes(templates, fallbackSgid = null) {
+    return templates.map(
+      template => this.#buildAttachmentNode(
+        template.innerHTML,
+        template.getAttribute("content-type") || this.#defaultPromptContentType,
+        template.getAttribute("sgid") || fallbackSgid
+      ))
+  }
 
-    button.dataset.action = command.action;
-    button.dataset.childType = command.childType;
-    button.dataset.direction = command.direction;
+  #getSpacerTextNode() {
+    return $createTextNode(" ")
+  }
 
-    button.addEventListener("click", () => this.#executeTableCommand(command));
+  get #defaultPromptContentType() {
+    const attachmentContentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
+    return `application/vnd.${attachmentContentTypeNamespace}.${this.name}`
+  }
 
-    button.addEventListener("mouseover", () => this.#handleCommandButtonHover());
-    button.addEventListener("focus", () => this.#handleCommandButtonHover());
-    button.addEventListener("mouseout", () => this.#handleCommandButtonHover());
+  #buildAttachmentNode(innerHtml, contentType, sgid) {
+    return new CustomActionTextAttachmentNode({ sgid, contentType, innerHtml })
+  }
 
-    return button
+  get #editorContents() {
+    return this.#editorElement.contents
   }
 
-  #registerKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts = this.#editor.registerCommand(KEY_DOWN_COMMAND, this.#handleAccessibilityShortcutKey, COMMAND_PRIORITY_HIGH);
+  get #editorContentElement() {
+    return this.#editorElement.editorContentElement
   }
 
-  #unregisterKeyboardShortcuts() {
-    this.unregisterKeyboardShortcuts?.();
-    this.unregisterKeyboardShortcuts = null;
+  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
   }
 
-  #handleAccessibilityShortcutKey = (event) => {
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "F10") {
-      const firstButton = this.querySelector("button, [tabindex]:not([tabindex='-1'])");
-      firstButton?.focus();
+  #handlePopoverClick = (event) => {
+    const listItem = event.target.closest(".lexxy-prompt-menu__item");
+    if (listItem) {
+      this.#selectOption(listItem);
+      this.#optionWasSelected();
     }
   }
 
-  #handleToolsKeydown = (event) => {
-    if (event.key === "Escape") {
-      this.#handleEscapeKey();
-    } else {
-      handleRollingTabIndex(this.#tableToolsButtons, event);
-    }
+  #reconnect() {
+    this.disconnectedCallback();
+    this.connectedCallback();
   }
+}
 
-  #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();
+  }
+
+  #attachLanguagePicker() {
+    this.languagePickerElement = this.#createLanguagePicker();
+
+    this.languagePickerElement.addEventListener("change", () => {
+      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
     });
 
-    this.#update();
+    this.languagePickerElement.setAttribute("nonce", getNonce());
+    this.appendChild(this.languagePickerElement);
   }
 
-  async #handleCommandButtonHover() {
-    await nextFrame();
+  #createLanguagePicker() {
+    const selectElement = createElement("select", { className: "lexxy-code-language-picker", "aria-label": "Pick a language…", name: "lexxy-code-language" });
 
-    this.#clearCellStyles();
+    for (const [ value, label ] of Object.entries(this.#languages)) {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = label;
+      selectElement.appendChild(option);
+    }
 
-    const activeElement = this.querySelector("button:hover, button:focus");
-    if (!activeElement) return
+    return selectElement
+  }
 
-    const command = {
-      action: activeElement.dataset.action,
-      childType: activeElement.dataset.childType,
-      direction: activeElement.dataset.direction
-    };
+  get #languages() {
+    const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
 
-    let cellsToHighlight = null;
+    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";
 
-    switch (command.childType) {
-      case "row":
-        cellsToHighlight = this.tableController.currentRowCells;
-        break
-      case "column":
-        cellsToHighlight = this.tableController.currentColumnCells;
-        break
-      case "table":
-        cellsToHighlight = this.tableController.tableRows;
-        break
-    }
+    const sortedEntries = Object.entries(languages)
+      .sort(([ , a ], [ , b ]) => a.localeCompare(b));
 
-    if (!cellsToHighlight) 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 ])
+  }
 
-    cellsToHighlight.forEach(cell => {
-      const cellElement = this.#editor.getElementByKey(cell.getKey());
-      if (!cellElement) return
+  #updateCodeBlockLanguage(language) {
+    this.editor.update(() => {
+      const codeNode = this.#getCurrentCodeNode();
 
-      cellElement.classList.toggle(theme.tableCellHighlight, true);
-      Object.assign(cellElement.dataset, command);
+      if (codeNode) {
+        codeNode.setLanguage(language);
+      }
     });
   }
 
-  #monitorForTableSelection() {
-    this.unregisterUpdateListener = this.#editor.registerUpdateListener(() => {
-      this.tableController.updateSelectedTable();
+  #monitorForCodeBlockSelection() {
+    this.editor.registerUpdateListener(() => {
+      this.editor.getEditorState().read(() => {
+        const codeNode = this.#getCurrentCodeNode();
 
-      const tableNode = this.tableController.currentTableNode;
-      if (tableNode) {
-        this.#show();
-      } else {
-        this.#hide();
-      }
+        if (codeNode) {
+          this.#codeNodeWasSelected(codeNode);
+        } else {
+          this.#hideLanguagePicker();
+        }
+      });
     });
   }
 
-  #executeTableCommand(command) {
-    this.tableController.executeTableCommand(command);
-    this.#update();
-  }
+  #getCurrentCodeNode() {
+    const selection = $getSelection();
 
-  #show() {
-    this.style.display = "flex";
-    this.#update();
-  }
+    if (!$isRangeSelection(selection)) {
+      return null
+    }
 
-  #hide() {
-    this.style.display = "none";
-    this.#clearCellStyles();
-  }
+    const anchorNode = selection.anchor.getNode();
+    const parentNode = anchorNode.getParent();
 
-  #update() {
-    this.#updateButtonsPosition();
-    this.#updateRowColumnCount();
-    this.#closeMoreMenu();
-    this.#handleCommandButtonHover();
+    if ($isCodeNode(anchorNode)) {
+      return anchorNode
+    } else if ($isCodeNode(parentNode)) {
+      return parentNode
+    }
+
+    return null
   }
 
-  #closeMoreMenu() {
-    this.querySelector("details[open]")?.removeAttribute("open");
+  #codeNodeWasSelected(codeNode) {
+    const language = codeNode.getLanguage();
+
+    this.#updateLanguagePickerWith(language);
+    this.#showLanguagePicker();
+    this.#positionLanguagePicker(codeNode);
   }
 
-  #updateButtonsPosition() {
-    const tableNode = this.tableController.currentTableNode;
-    if (!tableNode) return
+  #updateLanguagePickerWith(language) {
+    if (this.languagePickerElement && language) {
+      const normalizedLanguage = normalizeCodeLang(language);
+      this.languagePickerElement.value = normalizedLanguage;
+    }
+  }
 
-    const tableElement = this.#editor.getElementByKey(tableNode.getKey());
-    if (!tableElement) return
+  #positionLanguagePicker(codeNode) {
+    const codeElement = this.editor.getElementByKey(codeNode.getKey());
+    if (!codeElement) return
 
-    const tableRect = tableElement.getBoundingClientRect();
-    const editorRect = this.#editorElement.getBoundingClientRect();
+    const codeRect = codeElement.getBoundingClientRect();
+    const editorRect = this.editorElement.getBoundingClientRect();
+    const relativeTop = codeRect.top - editorRect.top;
+    const relativeRight = editorRect.right - codeRect.right;
 
-    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.style.right = `${relativeRight}px`;
   }
 
-  #updateRowColumnCount() {
-    const tableNode = this.tableController.currentTableNode;
-    if (!tableNode) return
+  #showLanguagePicker() {
+    this.hidden = false;
+  }
 
-    const tableElement = $getElementForTableNode(this.#editor, tableNode);
-    if (!tableElement) return
+  #hideLanguagePicker() {
+    this.hidden = true;
+  }
+}
 
-    const rowCount = tableElement.rows;
-    const columnCount = tableElement.columns;
+class TableController {
+  constructor(editorElement) {
+    this.editor = editorElement.editor;
+    this.contents = editorElement.contents;
+    this.selection = editorElement.selection;
 
-    this.rowCount.textContent = `${rowCount} row${rowCount === 1 ? "" : "s"}`;
-    this.columnCount.textContent = `${columnCount} column${columnCount === 1 ? "" : "s"}`;
-  }
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
 
-  #setTableCellFocus() {
-    const cell = this.tableController.currentCell;
-    if (!cell) return
+    this.#registerKeyHandlers();
+  }
 
-    const cellElement = this.#editor.getElementByKey(cell.getKey());
-    if (!cellElement) return
+  destroy() {
+    this.currentTableNodeKey = null;
+    this.currentCellKey = null;
 
-    cellElement.classList.add(theme.tableCellFocus);
+    this.#unregisterKeyHandlers();
   }
 
-  #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");
-    });
+  get currentCell() {
+    if (!this.currentCellKey) return null
 
-    this.#setTableCellFocus();
+    return this.editor.getEditorState().read(() => {
+      const cell = $getNodeByKey(this.currentCellKey);
+      return (cell instanceof TableCellNode) ? cell : null
+    })
   }
 
-  #icon(command) {
-    const { action, childType } = command;
-    const direction = (action == "insert" ? command.direction : null);
-    const iconId = [ action, childType, direction ].filter(Boolean).join("-");
-    return TableIcons[iconId]
+  get currentTableNode() {
+    if (!this.currentTableNodeKey) return null
+
+    return this.editor.getEditorState().read(() => {
+      const tableNode = $getNodeByKey(this.currentTableNodeKey);
+      return (tableNode instanceof TableNode) ? tableNode : null
+    })
   }
-}
 
-customElements.define("lexxy-table-tools", TableTools);
+  get currentRowCells() {
+    const currentRowIndex = this.currentRowIndex;
 
-class BaseSource {
-  // Template method to override
-  async buildListItems(filter = "") {
-    return Promise.resolve([])
-  }
+    const rows = this.tableRows;
+    if (!rows) return null
 
-  // Template method to override
-  promptItemFor(listItem) {
-    return null
+    return this.editor.getEditorState().read(() => {
+      return rows[currentRowIndex]?.getChildren() ?? null
+    }) ?? null
   }
 
-  // Protected
+  get currentRowIndex() {
+    const currentCell = this.currentCell;
+    if (!currentCell) return 0
 
-  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
+    return this.editor.getEditorState().read(() => {
+      return $getTableRowIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  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 currentColumnCells() {
+    const columnIndex = this.currentColumnIndex;
 
-class LocalFilterSource extends BaseSource {
-  async buildListItems(filter = "") {
-    const promptItems = await this.fetchPromptItems();
-    return this.#buildListItemsFromPromptItems(promptItems, filter)
+    const rows = this.tableRows;
+    if (!rows) return null
+
+    return this.editor.getEditorState().read(() => {
+      return rows.map(row => row.getChildAtIndex(columnIndex))
+    }) ?? null
   }
 
-  // Template method to override
-  async fetchPromptItems(filter) {
-    return Promise.resolve([])
+  get currentColumnIndex() {
+    const currentCell = this.currentCell;
+    if (!currentCell) return 0
+
+    return this.editor.getEditorState().read(() => {
+      return $getTableColumnIndexFromTableCellNode(currentCell)
+    }) ?? 0
   }
 
-  promptItemFor(listItem) {
-    return this.promptItemByListItem.get(listItem)
+  get tableRows() {
+    return this.editor.getEditorState().read(() => {
+      return this.currentTableNode?.getChildren()
+    }) ?? null
   }
 
-  #buildListItemsFromPromptItems(promptItems, filter) {
-    const listItems = [];
-    this.promptItemByListItem = new WeakMap();
-    promptItems.forEach((promptItem) => {
-      const searchableText = promptItem.getAttribute("search");
+  updateSelectedTable() {
+    let cellNode = null;
+    let tableNode = null;
 
-      if (!filter || filterMatches(searchableText, filter)) {
-        const listItem = this.buildListItemElementFor(promptItem);
-        this.promptItemByListItem.set(listItem, promptItem);
-        listItems.push(listItem);
-      }
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (!selection || !this.selection.isTableCellSelected) return
+
+      const node = selection.getNodes()[0];
+
+      cellNode = $findCellNode(node);
+      tableNode = $findTableNode(node);
     });
 
-    return listItems
+    this.currentCellKey = cellNode?.getKey() ?? null;
+    this.currentTableNodeKey = tableNode?.getKey() ?? null;
   }
-}
 
-class InlinePromptSource extends LocalFilterSource {
-  constructor(inlinePromptItems) {
-    super();
-    this.inlinePromptItemElements = Array.from(inlinePromptItems);
+  executeTableCommand(command, customIndex = null) {
+    if (command.action === "delete" && command.childType === "table") {
+      this.#deleteTable();
+      return
+    }
+
+    if (command.action === "toggle") {
+      this.#executeToggleStyle(command);
+      return
+    }
+
+    this.#executeCommand(command, customIndex);
   }
 
-  async fetchPromptItems() {
-    return Promise.resolve(this.inlinePromptItemElements)
+  #executeCommand(command, customIndex = null) {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand(this.#commandName(command));
+    this.#selectNextBestCell(command, customIndex);
   }
-}
 
-class DeferredPromptSource extends LocalFilterSource {
-  constructor(url) {
-    super();
-    this.url = url;
+  #executeToggleStyle(command) {
+    const childType = command.childType;
 
-    this.fetchPromptItems();
-  }
+    let cells = null;
+    let headerState = null;
 
-  async fetchPromptItems() {
-    this.promptItems ??= await this.loadPromptItemsFromUrl(this.url);
+    if (childType === "row") {
+      cells = this.currentRowCells;
+      headerState = TableCellHeaderStates.ROW;
+    } else if (childType === "column") {
+      cells = this.currentColumnCells;
+      headerState = TableCellHeaderStates.COLUMN;
+    }
 
-    return Promise.resolve(this.promptItems)
-  }
-}
+    if (!cells || cells.length === 0) return
 
-const DEBOUNCE_INTERVAL = 200;
+    this.editor.update(() => {
+      const firstCell = $getTableCellNodeFromLexicalNode(cells[0]);
+      if (!firstCell) return
 
-class RemoteFilterSource extends BaseSource {
-  constructor(url) {
-    super();
+      const currentStyle = firstCell.getHeaderStyles();
+      const newStyle = currentStyle ^ headerState;
 
-    this.baseURL = url;
-    this.loadAndFilterListItems = debounceAsync(this.fetchFilteredListItems.bind(this), DEBOUNCE_INTERVAL);
+      cells.forEach(cell => {
+        this.#setHeaderStyle(cell, newStyle, headerState);
+      });
+    });
   }
 
-  async buildListItems(filter = "") {
-    return await this.loadAndFilterListItems(filter)
+  #deleteTable() {
+    this.#selectCellAtSelection();
+    this.editor.dispatchCommand("deleteTable");
   }
 
-  promptItemFor(listItem) {
-    return this.promptItemByListItem.get(listItem)
-  }
+  #selectCellAtSelection() {
+    this.editor.update(() => {
+      const selection = $getSelection();
+      if (!selection) return
 
-  async fetchFilteredListItems(filter) {
-    const promptItems = await this.loadPromptItemsFromUrl(this.#urlFor(filter));
-    return this.#buildListItemsFromPromptItems(promptItems)
-  }
+      const node = selection.getNodes()[0];
 
-  #urlFor(filter) {
-    const url = new URL(this.baseURL, window.location.origin);
-    url.searchParams.append("filter", filter);
-    return url.toString()
+      $findCellNode(node)?.selectEnd();
+    });
   }
 
-  #buildListItemsFromPromptItems(promptItems) {
-    const listItems = [];
-    this.promptItemByListItem = new WeakMap();
-
-    for (const promptItem of promptItems) {
-      const listItem = this.buildListItemElementFor(promptItem);
-      this.promptItemByListItem.set(listItem, promptItem);
-      listItems.push(listItem);
-    }
+  #commandName(command) {
+    const { action, childType, direction } = command;
 
-    return listItems
+    const childTypeSuffix = upcaseFirst(childType);
+    const directionSuffix = action == "insert" ? upcaseFirst(direction) : "";
+    return `${action}Table${childTypeSuffix}${directionSuffix}`
   }
-}
-
-const NOTHING_FOUND_DEFAULT_MESSAGE = "Nothing found";
 
-class LexicalPromptElement extends HTMLElement {
-  constructor() {
-    super();
-    this.keyListeners = [];
+  #setHeaderStyle(cell, newStyle, headerState) {
+    const tableCellNode = $getTableCellNodeFromLexicalNode(cell);
+    tableCellNode?.setHeaderStyles(newStyle, headerState);
   }
 
-  static observedAttributes = [ "connected" ]
+  async #selectCellAtIndex(rowIndex, columnIndex) {
+    // We wait for next frame, otherwise table operations might not have completed yet.
+    await nextFrame();
 
-  connectedCallback() {
-    this.source = this.#createSource();
+    if (!this.currentTableNode) return
 
-    this.#addTriggerListener();
-    this.toggleAttribute("connected", true);
-  }
+    const rows = this.tableRows;
+    if (!rows) return
 
-  disconnectedCallback() {
-    this.source = null;
-    this.popoverElement = null;
+    const row = rows[rowIndex];
+    if (!row) return
+
+    this.editor.update(() => {
+      const cell = $getTableCellNodeFromLexicalNode(row.getChildAtIndex(columnIndex));
+      cell?.selectEnd();
+    });
   }
 
+  #selectNextBestCell(command, customIndex = null) {
+    const { childType, direction } = command;
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
-      requestAnimationFrame(() => this.#reconnect());
+    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;
     }
-  }
 
-  get name() {
-    return this.getAttribute("name")
+    this.#selectCellAtIndex(rowIndex, columnIndex);
   }
 
-  get trigger() {
-    return this.getAttribute("trigger")
-  }
+  #selectNextRow() {
+    const rows = this.tableRows;
+    if (!rows) return
 
-  get supportsSpaceInSearches() {
-    return this.hasAttribute("supports-space-in-searches")
+    const nextRow = rows.at(this.currentRowIndex + 1);
+    if (!nextRow) return
+
+    this.editor.update(() => {
+      nextRow.getChildAtIndex(this.currentColumnIndex)?.selectEnd();
+    });
   }
 
-  get open() {
-    return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
+  #selectPreviousCell() {
+    const cell = this.currentCell;
+    if (!cell) return
+
+    this.editor.update(() => {
+      cell.selectPrevious();
+    });
   }
 
-  get closed() {
-    return !this.open
+  #insertRowAndSelectFirstCell() {
+    this.executeTableCommand({ action: "insert", childType: "row", direction: "after" }, 0);
   }
 
-  get #doesSpaceSelect() {
-    return !this.supportsSpaceInSearches
+  #deleteRowAndSelectLastCell() {
+    this.executeTableCommand({ action: "delete", childType: "row" }, -1);
   }
 
-  #createSource() {
-    const src = this.getAttribute("src");
-    if (src) {
-      if (this.hasAttribute("remote-filtering")) {
-        return new RemoteFilterSource(src)
+  #deleteRowAndSelectNextNode() {
+    const tableNode = this.currentTableNode;
+    this.executeTableCommand({ action: "delete", childType: "row" });
+
+    this.editor.update(() => {
+      const next = tableNode?.getNextSibling();
+      if ($isParagraphNode(next)) {
+        next.selectStart();
       } else {
-        return new DeferredPromptSource(src)
+        const newParagraph = $createParagraphNode();
+        this.currentTableNode.insertAfter(newParagraph);
+        newParagraph.selectStart();
       }
-    } 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
+  #isCurrentCellEmpty() {
+    if (!this.currentTableNode) return false
 
-        if ($isTextNode(node)) {
-          const fullText = node.getTextContent();
-          const triggerLength = this.trigger.length;
+    const cell = this.currentCell;
+    if (!cell) return false
 
-          // Check if we have enough characters for the trigger
-          if (offset >= triggerLength) {
-            const textBeforeCursor = fullText.slice(offset - triggerLength, offset);
+    return cell.getTextContent().trim() === ""
+  }
 
-            // 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;
+  #isCurrentRowLast() {
+    if (!this.currentTableNode) return false
 
-              const charBeforeTrigger = offset > triggerLength ? fullText[offset - triggerLength - 1] : null;
-              const isPrecededBySpaceOrNewline = charBeforeTrigger === " " || charBeforeTrigger === "\n";
+    const rows = this.tableRows;
+    if (!rows) return false
 
-              if (isAtStart || isPrecededBySpaceOrNewline) {
-                unregister();
-                this.#showPopover();
-              }
-            }
-          }
-        }
-      });
-    });
+    return rows.length === this.currentRowIndex + 1
   }
 
-  #addCursorPositionListener() {
-    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
-      if (this.closed) return
-
-      this.#editor.read(() => {
-        const { node, offset } = this.#selection.selectedNodeWithOffset();
-        if (!node) return
+  #isCurrentRowEmpty() {
+    if (!this.currentTableNode) return false
 
-        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;
+    const cells = this.currentRowCells;
+    if (!cells) return false
 
-          // 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();
-        }
-      });
-    });
+    return cells.every(cell => cell.getTextContent().trim() === "")
   }
 
-  #removeCursorPositionListener() {
-    if (this.cursorPositionListener) {
-      this.cursorPositionListener();
-      this.cursorPositionListener = null;
-    }
-  }
+  #isFirstCellInRow() {
+    if (!this.currentTableNode) return false
 
-  get #editor() {
-    return this.#editorElement.editor
-  }
+    const cells = this.currentRowCells;
+    if (!cells) return false
 
-  get #editorElement() {
-    return this.closest("lexxy-editor")
+    return cells.indexOf(this.currentCell) === 0
   }
 
-  get #selection() {
-    return this.#editorElement.selection
+  #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);
   }
 
-  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);
+  #unregisterKeyHandlers() {
+    this.unregisterBackspaceKeyHandler?.();
+    this.unregisterEnterKeyHandler?.();
 
-    this.#registerKeyListeners();
-    this.#addCursorPositionListener();
+    this.unregisterBackspaceKeyHandler = null;
+    this.unregisterEnterKeyHandler = null;
   }
 
-  #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));
+  #handleBackspaceKey(event) {
+    if (!this.currentTableNode) return false
 
-    if (this.#doesSpaceSelect) {
-      this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
+    if (this.#isCurrentRowEmpty() && this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#deleteRowAndSelectLastCell();
+      return true
     }
 
-    // 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));
-  }
+    if (this.#isCurrentCellEmpty() && !this.#isFirstCellInRow()) {
+      event.preventDefault();
+      this.#selectPreviousCell();
+      return true
+    }
 
-  #handleArrowUp(event) {
-    this.#moveSelectionUp();
-    event.preventDefault();
-    return true
+    return false
   }
 
-  #handleArrowDown(event) {
-    this.#moveSelectionDown();
+  #handleEnterKey(event) {
+    if ((event.ctrlKey || event.metaKey) || event.shiftKey || !this.currentTableNode) return false
+
+    if (this.selection.isInsideList || this.selection.isInsideCodeBlock) return false
+
     event.preventDefault();
+
+    if (this.#isCurrentRowLast() && this.#isCurrentRowEmpty()) {
+      this.#deleteRowAndSelectNextNode();
+    } else if (this.#isCurrentRowLast()) {
+      this.#insertRowAndSelectFirstCell();
+    } else {
+      this.#selectNextRow();
+    }
+
     return true
   }
+}
 
-  #selectFirstOption() {
-    const firstOption = this.#listItemElements[0];
+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>`,
 
-    if (firstOption) {
-      this.#selectOption(firstOption);
-    }
-  }
+  "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>`,
 
-  get #listItemElements() {
-    return Array.from(this.popoverElement.querySelectorAll(".lexxy-prompt-menu__item"))
-  }
+  "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>`,
 
-  #selectOption(listItem) {
-    this.#clearSelection();
-    listItem.toggleAttribute("aria-selected", true);
-    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    listItem.focus();
+  "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>`,
 
-    // Preserve selection to prevent cursor jump
-    this.#selection.preservingSelection(() => {
-      this.#editorElement.focus();
-    });
+  "delete-table":
+    `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.2129 19.2305C18.0925 20.7933 16.7892 22 15.2217 22H7.77832C6.21084 22 4.90753 20.7933 4.78711 19.2305L4 9H19L18.2129 19.2305Z"/><path d="M13 2C14.1046 2 15 2.89543 15 4H19C19.5523 4 20 4.44772 20 5V6C20 6.55228 19.5523 7 19 7H4C3.44772 7 3 6.55228 3 6V5C3 4.44772 3.44772 4 4 4H8C8 2.89543 8.89543 2 10 2H13Z"/>
+    </svg>`
+};
 
-    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
-    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
-    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
-  }
+class TableTools extends HTMLElement {
+  connectedCallback() {
+    this.tableController = new TableController(this.#editorElement);
 
-  #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");
+    this.#setUpButtons();
+    this.#monitorForTableSelection();
+    this.#registerKeyboardShortcuts();
   }
 
-  #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);
-    }
+  disconnectedCallback() {
+    this.#unregisterKeyboardShortcuts();
 
-    this.popoverElement.style.top = `${y + verticalOffset}px`;
-    this.popoverElement.style.bottom = "auto";
+    this.unregisterUpdateListener?.();
+    this.unregisterUpdateListener = null;
 
-    const popoverRect = this.popoverElement.getBoundingClientRect();
-    const isClippedAtBottom = popoverRect.bottom > window.innerHeight;
+    this.removeEventListener("keydown", this.#handleToolsKeydown);
 
-    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);
-    }
+    this.tableController?.destroy();
+    this.tableController = null;
   }
 
-  #resetPopoverPosition() {
-    this.popoverElement.removeAttribute("data-clipped-at-bottom");
-    this.popoverElement.removeAttribute("data-anchored");
+  get #editor() {
+    return this.#editorElement.editor
   }
 
-  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();
+  get #editorElement() {
+    return this.closest("lexxy-editor")
   }
 
-  #unregisterKeyListeners() {
-    this.keyListeners.forEach((unregister) => unregister());
-    this.keyListeners = [];
+  get #tableToolsButtons() {
+    return Array.from(this.querySelectorAll("button, details > summary"))
   }
 
-  #filterOptions = async () => {
-    if (this.initialPrompt) {
-      this.initialPrompt = false;
-      return
-    }
+  #setUpButtons() {
+    this.appendChild(this.#createRowButtonsContainer());
+    this.appendChild(this.#createColumnButtonsContainer());
 
-    if (this.#editorContents.containsTextBackUntil(this.trigger)) {
-      await this.#showFilteredOptions();
-      await nextFrame();
-      this.#positionPopover();
-    } else {
-      this.#hidePopover();
-    }
+    this.appendChild(this.#createDeleteTableButton());
+    this.addEventListener("keydown", this.#handleToolsKeydown);
   }
 
-  async #showFilteredOptions() {
-    const filter = this.#editorContents.textBackUntil(this.trigger);
-    const filteredListItems = await this.source.buildListItems(filter);
-    this.popoverElement.innerHTML = "";
+  #createButtonsContainer(childType, setCountProperty, moreMenu) {
+    const container = createElement("div", { className: `lexxy-table-control lexxy-table-control--${childType}` });
 
-    if (filteredListItems.length > 0) {
-      this.#showResults(filteredListItems);
-    } else {
-      this.#showEmptyResults();
-    }
-    this.#selectFirstOption();
-  }
+    const plusButton = this.#createButton(`Add ${childType}`, { action: "insert", childType, direction: "after" }, "+");
+    const minusButton = this.#createButton(`Remove ${childType}`, { action: "delete", childType }, "−");
 
-  #showResults(filteredListItems) {
-    this.popoverElement.classList.remove("lexxy-prompt-menu--empty");
-    this.popoverElement.append(...filteredListItems);
-  }
+    const dropdown = createElement("details", { className: "lexxy-table-control__more-menu" });
+    dropdown.setAttribute("name", "lexxy-dropdown");
+    dropdown.tabIndex = -1;
 
-  #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);
-  }
+    const count = createElement("summary", {}, `_ ${childType}s`);
+    setCountProperty(count);
+    dropdown.appendChild(count);
 
-  get #emptyResultsMessage() {
-    return this.getAttribute("empty-results") || NOTHING_FOUND_DEFAULT_MESSAGE
-  }
+    dropdown.appendChild(moreMenu);
 
-  #handleKeydownOnPopover = (event) => {
-    if (event.key === "Escape") {
-      this.#hidePopover();
-      this.#editorElement.focus();
-      event.stopPropagation();
-    }
-    // Arrow keys are now handled via Lexical commands with HIGH priority
-  }
+    container.appendChild(minusButton);
+    container.appendChild(dropdown);
+    container.appendChild(plusButton);
 
-  #moveSelectionDown() {
-    const nextIndex = this.#selectedIndex + 1;
-    if (nextIndex < this.#listItemElements.length) this.#selectOption(this.#listItemElements[nextIndex]);
+    return container
   }
 
-  #moveSelectionUp() {
-    const previousIndex = this.#selectedIndex - 1;
-    if (previousIndex >= 0) this.#selectOption(this.#listItemElements[previousIndex]);
+  #createRowButtonsContainer() {
+    return this.#createButtonsContainer(
+      "row",
+      (count) => { this.rowCount = count; },
+      this.#createMoreMenuSection("row")
+    )
   }
 
-  get #selectedIndex() {
-    return this.#listItemElements.findIndex((item) => item.hasAttribute("aria-selected"))
+  #createColumnButtonsContainer() {
+    return this.#createButtonsContainer(
+      "column",
+      (count) => { this.columnCount = count; },
+      this.#createMoreMenuSection("column")
+    )
   }
 
-  get #selectedListItem() {
-    return this.#listItemElements[this.#selectedIndex]
-  }
+  #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 });
 
-  #handleSelectedOption(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.#optionWasSelected();
-    return true
-  }
+    section.appendChild(addBeforeButton);
+    section.appendChild(addAfterButton);
+    section.appendChild(toggleStyleButton);
+    section.appendChild(deleteButton);
 
-  #optionWasSelected() {
-    this.#replaceTriggerWithSelectedItem();
-    this.#hidePopover();
-    this.#editorElement.focus();
+    return section
   }
 
-  #replaceTriggerWithSelectedItem() {
-    const promptItem = this.source.promptItemFor(this.#selectedListItem);
-
-    if (!promptItem) { return }
+  #createDeleteTableButton() {
+    const container = createElement("div", { className: "lexxy-table-control" });
 
-    const templates = Array.from(promptItem.querySelectorAll("template[type='editor']"));
-    const stringToReplace = `${this.trigger}${this.#editorContents.textBackUntil(this.trigger)}`;
+    const deleteTableButton = this.#createButton("Delete this table?", { action: "delete", childType: "table" });
+    deleteTableButton.classList.add("lexxy-table-control__button--delete-table");
 
-    if (this.hasAttribute("insert-editable-text")) {
-      this.#insertTemplatesAsEditableText(templates, stringToReplace);
-    } else {
-      this.#insertTemplatesAsAttachments(templates, stringToReplace, promptItem.getAttribute("sgid"));
-    }
-  }
+    container.appendChild(deleteTableButton);
 
-  #insertTemplatesAsEditableText(templates, stringToReplace) {
-    this.#editor.update(() => {
-      const nodes = templates.flatMap(template => this.#buildEditableTextNodes(template));
-      this.#editorContents.replaceTextBackUntil(stringToReplace, nodes);
-    });
-  }
+    this.deleteContainer = container;
 
-  #buildEditableTextNodes(template) {
-    return $generateNodesFromDOM(this.#editor, parseHtml(`${template.innerHTML}`))
+    return container
   }
 
-  #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);
+  #createButton(label, command = {}, icon = this.#icon(command)) {
+    const button = createElement("button", {
+      className: "lexxy-table-control__button",
+      "aria-label": label,
+      type: "button"
     });
-  }
-
-  #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(" ")
-  }
+    button.tabIndex = -1;
+    button.innerHTML = `${icon} <span>${label}</span>`;
 
-  get #defaultPromptContentType() {
-    const attachmentContentTypeNamespace = Lexxy.global.get("attachmentContentTypeNamespace");
-    return `application/vnd.${attachmentContentTypeNamespace}.${this.name}`
-  }
+    button.dataset.action = command.action;
+    button.dataset.childType = command.childType;
+    button.dataset.direction = command.direction;
 
-  #buildAttachmentNode(innerHtml, contentType, sgid) {
-    return new CustomActionTextAttachmentNode({ sgid, contentType, innerHtml })
-  }
+    button.addEventListener("click", () => this.#executeTableCommand(command));
 
-  get #editorContents() {
-    return this.#editorElement.contents
+    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 relativeRight = editorRect.right - codeRect.right;
+    const cellElement = this.#editor.getElementByKey(cell.getKey());
+    if (!cellElement) return
 
-    this.style.top = `${relativeTop}px`;
-    this.style.right = `${relativeRight}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
@@ -6256,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 };