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

package/dist/lexxy.esm.js

@@ -1,16 +1,21 @@
 import DOMPurify from 'dompurify';
-import { getStyleObjectFromCSS, getCSSFromStyleObject, $forEachSelectedTextNode, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
-import { $isTextNode, TextNode, $getSelection, $isRangeSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, COMMAND_PRIORITY_NORMAL, BLUR_COMMAND, FOCUS_COMMAND, KEY_TAB_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
+import { getStyleObjectFromCSS, getCSSFromStyleObject, $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { $isTextNode, TextNode, $isRangeSelection, $getSelection, DecoratorNode, $getNodeByKey, HISTORY_MERGE_TAG, FORMAT_TEXT_COMMAND, $createTextNode, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $isNodeSelection, $getRoot, $isLineBreakNode, $isElementNode, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, SELECTION_CHANGE_COMMAND, $createNodeSelection, $setSelection, $createParagraphNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH, $isParagraphNode, $insertNodes, $createLineBreakNode, CLEAR_HISTORY_COMMAND, $addUpdateTag, SKIP_DOM_SELECTION_TAG, createEditor, BLUR_COMMAND, FOCUS_COMMAND, KEY_SPACE_COMMAND } from 'lexical';
 import { $isListNode, $isListItemNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $createListNode, ListNode, ListItemNode, registerList } from '@lexical/list';
 import { $isQuoteNode, $isHeadingNode, $createQuoteNode, $createHeadingNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $isCodeNode, CodeNode, normalizeCodeLang, CodeHighlightNode, registerCodeHighlighting, CODE_LANGUAGE_FRIENDLY_NAME_MAP } from '@lexical/code';
 import { $isLinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-diff';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { DirectUpload } from '@rails/activestorage';
 import { marked } from 'marked';
-import 'prismjs/components/prism-ruby';
 
 const ALLOWED_HTML_TAGS = [ "a", "action-text-attachment", "b", "blockquote", "br", "code", "em",
   "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "i", "img", "li", "mark", "ol", "p", "pre", "q", "s", "strong", "ul" ];
@@ -115,7 +120,24 @@ function extendConversion(nodeKlass, conversionName, callback = (output => outpu
   }
 }
 
+function isSelectionHighlighted(selection) {
+  if (!$isRangeSelection(selection)) return false
+
+  if (selection.isCollapsed()) {
+    return hasHighlightStyles(selection.style)
+  } else {
+    return selection.hasFormat("highlight")
+  }
+}
+
+function hasHighlightStyles(cssOrStyles) {
+  const styles = typeof cssOrStyles === "string" ? getStyleObjectFromCSS(cssOrStyles) : cssOrStyles;
+  return !!(styles.color || styles["background-color"])
+}
+
 class LexicalToolbarElement extends HTMLElement {
+  static observedAttributes = [ "connected" ]
+
   constructor() {
     super();
     this.internals = this.attachInternals();
@@ -134,6 +156,13 @@ class LexicalToolbarElement extends HTMLElement {
       this._resizeObserver.disconnect();
       this._resizeObserver = null;
     }
+    this.#unbindHotkeys();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.#reconnect());
+    }
   }
 
   setEditor(editorElement) {
@@ -141,7 +170,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor = editorElement.editor;
     this.#bindButtons();
     this.#bindHotkeys();
-    this.#assignButtonTabindex();
+    this.#setTabIndexValues();
+    this.#setItemPositionValues();
     this.#monitorSelectionChanges();
     this.#monitorHistoryChanges();
     this.#refreshToolbarOverflow();
@@ -149,10 +179,9 @@ class LexicalToolbarElement extends HTMLElement {
     this.toggleAttribute("connected", true);
   }
 
-  get #dialogs() {
-    const dialogButtons = this.querySelectorAll("[data-dialog-target]");
-    const dialogTags = Array.from(dialogButtons).map(button => `lexxy-${button.dataset.dialogTarget}`);
-    return Array.from(this.querySelectorAll(dialogTags))
+  #reconnect() {
+    this.disconnectedCallback();
+    this.connectedCallback();
   }
 
   #bindButtons() {
@@ -161,7 +190,6 @@ class LexicalToolbarElement extends HTMLElement {
 
   #handleButtonClicked({ target }) {
     this.#handleTargetClicked(target, "[data-command]", this.#dispatchButtonCommand.bind(this));
-    this.#handleTargetClicked(target, "[data-dialog-target]", this.#toggleDialog.bind(this));
   }
 
   #handleTargetClicked(target, selector, callback) {
@@ -176,38 +204,23 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor.dispatchCommand(command, payload);
   }
 
-  // Not using popover because of CSS anchoring still not widely available.
-  #toggleDialog(button) {
-    const dialogTarget = button.dataset.dialogTarget;
-    const dialog = this.querySelector("lexxy-" + dialogTarget);
-    if (!dialog) return
-
-    if (dialog.open) {
-      dialog.close();
-    } else {
-      this.#closeOpenDialogs();
-      dialog.show(button);
-    }
+  #bindHotkeys() {
+    this.editorElement.addEventListener("keydown", this.#handleHotkey);
   }
 
-  #closeOpenDialogs() {
-    const openDialogs = this.querySelectorAll("dialog[open]");
-    openDialogs.forEach(openDialog => {
-      openDialog.closest(".lexxy-dialog").close();
-    });
+  #unbindHotkeys() {
+    this.editorElement?.removeEventListener("keydown", this.#handleHotkey);
   }
 
-  #bindHotkeys() {
-    this.editorElement.addEventListener("keydown", (event) => {
-      const buttons = this.querySelectorAll("[data-hotkey]");
-      buttons.forEach((button) => {
-        const hotkeys = button.dataset.hotkey.toLowerCase().split(/\s+/);
-        if (hotkeys.includes(this.#keyCombinationFor(event))) {
-          event.preventDefault();
-          event.stopPropagation();
-          button.click();
-        }
-      });
+  #handleHotkey = (event) => {
+    const buttons = this.querySelectorAll("[data-hotkey]");
+    buttons.forEach((button) => {
+      const hotkeys = button.dataset.hotkey.toLowerCase().split(/\s+/);
+      if (hotkeys.includes(this.#keyCombinationFor(event))) {
+        event.preventDefault();
+        event.stopPropagation();
+        button.click();
+      }
     });
   }
 
@@ -223,10 +236,9 @@ class LexicalToolbarElement extends HTMLElement {
     return [ ...modifiers, pressedKey ].join("+")
   }
 
-  #assignButtonTabindex() {
-    const baseTabIndex = parseInt(this.editorElement.editorContentElement.getAttribute("tabindex") ?? "0");
-    this.#buttons.forEach((button, index) => {
-      button.setAttribute("tabindex", `${baseTabIndex + index + 1}`);
+  #setTabIndexValues() {
+    this.#buttons.forEach((button) => {
+      button.setAttribute("tabindex", 0);
     });
   }
 
@@ -234,7 +246,6 @@ class LexicalToolbarElement extends HTMLElement {
     this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
-        this.#updateDialogStates();
       });
     });
   }
@@ -267,7 +278,7 @@ class LexicalToolbarElement extends HTMLElement {
     const isBold = selection.hasFormat("bold");
     const isItalic = selection.hasFormat("italic");
     const isStrikethrough = selection.hasFormat("strikethrough");
-    const isHighlight = selection.hasFormat("highlight");
+    const isHighlight = isSelectionHighlighted(selection);
     const isInLink = this.#isInLink(anchorNode);
     const isInQuote = $isQuoteNode(topLevelElement);
     const isInHeading = $isHeadingNode(topLevelElement);
@@ -289,10 +300,6 @@ class LexicalToolbarElement extends HTMLElement {
     this.#updateUndoRedoButtonStates();
   }
 
-  #updateDialogStates() {
-    this.#dialogs.forEach(dialog => dialog.updateStateCallback());
-  }
-
   #isInList(node) {
     let current = node;
     while (current) {
@@ -341,22 +348,8 @@ class LexicalToolbarElement extends HTMLElement {
     this.toggleAttribute("overflowing", isOverflowing);
   }
 
-  get #overflow() {
-    return this.querySelector(".lexxy-editor__toolbar-overflow")
-  }
-
-  get #overflowMenu() {
-    return this.querySelector(".lexxy-editor__toolbar-overflow-menu")
-  }
-
-  #resetToolbar() {
-    while (this.#overflowMenu.children.length > 0) {
-      this.insertBefore(this.#overflowMenu.children[0], this.#overflow);
-    }
-  }
-
   #compactMenu() {
-    const buttons = this.#buttonsWithSeparator.reverse();
+    const buttons = this.#buttons.reverse();
     let movedToOverflow = false;
 
     for (const button of buttons) {
@@ -370,12 +363,42 @@ class LexicalToolbarElement extends HTMLElement {
     }
   }
 
+  #resetToolbar() {
+    const items = Array.from(this.#overflowMenu.children);
+    items.sort((a, b) => this.#itemPosition(b) - this.#itemPosition(a));
+
+    items.forEach((item) => {
+      const nextItem = this.querySelector(`[data-position="${this.#itemPosition(item) + 1}"]`) ?? this.#overflow;
+      this.insertBefore(item, nextItem);
+    });
+  }
+
+  #itemPosition(item) {
+    return parseInt(item.dataset.position ?? "999")
+  }
+
+  #setItemPositionValues() {
+    this.#toolbarItems.forEach((item, index) => {
+      if (item.dataset.position === undefined) {
+        item.dataset.position = index;
+      }
+    });
+  }
+
+  get #overflow() {
+    return this.querySelector(".lexxy-editor__toolbar-overflow")
+  }
+
+  get #overflowMenu() {
+    return this.querySelector(".lexxy-editor__toolbar-overflow-menu")
+  }
+
   get #buttons() {
     return Array.from(this.querySelectorAll(":scope > button"))
   }
 
-  get #buttonsWithSeparator() {
-    return Array.from(this.querySelectorAll(":scope > button, :scope > [role=separator]"))
+  get #toolbarItems() {
+    return Array.from(this.querySelectorAll(":scope > *:not(.lexxy-editor__toolbar-overflow)"))
   }
 
   static get defaultTemplate() {
@@ -394,35 +417,31 @@ class LexicalToolbarElement extends HTMLElement {
         </svg>
       </button>
 
-      <lexxy-highlight-dialog class="lexxy-dialog lexxy-highlight-dialog">
-        <dialog class="highlight-dialog">
-          <div class="lexxy-highlight-dialog-content">
-            <div data-button-group="color" data-values="var(--highlight-1); var(--highlight-2); var(--highlight-3); var(--highlight-4); var(--highlight-5); var(--highlight-6); var(--highlight-7); var(--highlight-8); var(--highlight-9)"></div>
-            <div data-button-group="background-color" data-values="var(--highlight-bg-1); var(--highlight-bg-2); var(--highlight-bg-3); var(--highlight-bg-4); var(--highlight-bg-5); var(--highlight-bg-6); var(--highlight-bg-7); var(--highlight-bg-8); var(--highlight-bg-9)"></div>
-            <button data-command="removeHighlight" class="lexxy-highlight-dialog-reset">Remove all coloring</button>
-          </div>
-        </dialog>
-      </lexxy-highlight-dialog>
-
-      <button class="lexxy-editor__toolbar-button" type="button" name="highlight" title="Color highlight" data-dialog-target="highlight-dialog">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
-      </button>
+      <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
+        <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.65422 0.711575C7.1856 0.242951 6.42579 0.242951 5.95717 0.711575C5.48853 1.18021 5.48853 1.94 5.95717 2.40864L8.70864 5.16011L2.85422 11.0145C1.44834 12.4204 1.44833 14.6998 2.85422 16.1057L7.86011 21.1115C9.26599 22.5174 11.5454 22.5174 12.9513 21.1115L19.6542 14.4087C20.1228 13.94 20.1228 13.1802 19.6542 12.7115L11.8544 4.91171L11.2542 4.31158L7.65422 0.711575ZM4.55127 12.7115L10.4057 6.85716L17.1087 13.56H4.19981C4.19981 13.253 4.31696 12.9459 4.55127 12.7115ZM23.6057 20.76C23.6057 22.0856 22.5311 23.16 21.2057 23.16C19.8802 23.16 18.8057 22.0856 18.8057 20.76C18.8057 19.5408 19.8212 18.5339 20.918 17.4462C21.0135 17.3516 21.1096 17.2563 21.2057 17.16C21.3018 17.2563 21.398 17.3516 21.4935 17.4462C22.5903 18.5339 23.6057 19.5408 23.6057 20.76Z"/></svg>
+        </summary>
+        <lexxy-highlight-dropdown class="lexxy-editor__toolbar-dropdown-content">
+          <div data-button-group="color" data-values="var(--highlight-1); var(--highlight-2); var(--highlight-3); var(--highlight-4); var(--highlight-5); var(--highlight-6); var(--highlight-7); var(--highlight-8); var(--highlight-9)"></div>
+          <div data-button-group="background-color" data-values="var(--highlight-bg-1); var(--highlight-bg-2); var(--highlight-bg-3); var(--highlight-bg-4); var(--highlight-bg-5); var(--highlight-bg-6); var(--highlight-bg-7); var(--highlight-bg-8); var(--highlight-bg-9)"></div>
+          <button data-command="removeHighlight" class="lexxy-editor__toolbar-dropdown-reset">Remove all coloring</button>
+        </lexxy-highlight-dropdown>
+      </details>
 
-      <lexxy-link-dialog class="lexxy-dialog lexxy-link-dialog">
-        <dialog class="link-dialog">
+      <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
+        <summary class="lexxy-editor__toolbar-button" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
+        </summary>
+        <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
           <form method="dialog">
-            <input type="url" placeholder="Enter a URL…" class="input" required>
-            <div class="lexxy-dialog-actions">
+            <input type="url" placeholder="Enter a URL…" class="input">
+            <div class="lexxy-editor__toolbar-dropdown-actions">
               <button type="submit" class="btn" value="link">Link</button>
               <button type="button" class="btn" value="unlink">Unlink</button>
             </div>
           </form>
-        </dialog>
-      </lexxy-link-dialog>
-
-      <button class="lexxy-editor__toolbar-button" type="button" name="link" title="Link" data-dialog-target="link-dialog" data-hotkey="cmd+k ctrl+k">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.111 9.546a1.5 1.5 0 012.121 0 5.5 5.5 0 010 7.778l-2.828 2.828a5.5 5.5 0 01-7.778 0 5.498 5.498 0 010-7.777l2.828-2.83a1.5 1.5 0 01.355-.262 6.52 6.52 0 00.351 3.799l-1.413 1.414a2.499 2.499 0 000 3.535 2.499 2.499 0 003.535 0l2.83-2.828a2.5 2.5 0 000-3.536 1.5 1.5 0 010-2.121z"/><path d="M12.111 3.89a5.5 5.5 0 117.778 7.777l-2.828 2.829a1.496 1.496 0 01-.355.262 6.522 6.522 0 00-.351-3.8l1.413-1.412a2.5 2.5 0 10-3.536-3.535l-2.828 2.828a2.5 2.5 0 000 3.536 1.5 1.5 0 01-2.122 2.12 5.5 5.5 0 010-7.777l2.83-2.829z"/></svg>
-      </button>
+        </lexxy-link-dropdown>
+      </details>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="quote" data-command="insertQuoteBlock" title="Quote">
         <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 5C8.985 5 11 7.09 11 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.022.746a.563.563 0 01-.52-.36.602.602 0 01.067-.57l.055-.066.009-.009.041-.048a4.25 4.25 0 00.168-.21c.143-.188.336-.47.53-.84a6.743 6.743 0 00.75-2.605C3.705 13.994 2 12.038 2 9.667 2 7.089 4.015 5 6.5 5zM17.5 5C19.985 5 22 7.09 22 9.667c0 2.694-.962 5.005-2.187 6.644-.613.82-1.3 1.481-1.978 1.943-.668.454-1.375.746-2.023.746a.563.563 0 01-.52-.36.602.602 0 01.068-.57l.055-.066.009-.009.041-.048c.039-.045.097-.115.168-.21a6.16 6.16 0 00.53-.84 6.745 6.745 0 00.75-2.605C14.705 13.994 13 12.038 13 9.667 13 7.089 15.015 5 17.5 5z"/></svg>
@@ -486,6 +505,7 @@ var theme = {
     }
   },
   codeHighlight: {
+    addition: "code-token__selector",
     atrule: "code-token__attr",
     attr: "code-token__attr",
     "attr-name": "code-token__attr",
@@ -500,24 +520,30 @@ var theme = {
     color: "code-token__property",
     comment: "code-token__comment",
     constant: "code-token__property",
-    coord: "code-token__property",
+    coord: "code-token__comment",
     decorator: "code-token__function",
-    deleted: "code-token__property",
+    deleted: "code-token__operator",
+    deletion: "code-token__operator",
+    directive: "code-token__attr",
+    "directive-hash": "code-token__property",
     doctype: "code-token__comment",
     entity: "code-token__operator",
     function: "code-token__function",
     hexcode: "code-token__property",
-    important: "code-token__variable",
+    important: "code-token__function",
     inserted: "code-token__selector",
     italic: "code-token__comment",
     keyword: "code-token__attr",
+    line: "code-token__selector",
     namespace: "code-token__variable",
     number: "code-token__property",
+    macro: "code-token__function",
     operator: "code-token__operator",
     parameter: "code-token__variable",
     prolog: "code-token__comment",
     property: "code-token__property",
     punctuation: "code-token__punctuation",
+    "raw-string": "code-token__operator",
     regex: "code-token__variable",
     script: "code-token__function",
     selector: "code-token__selector",
@@ -526,6 +552,7 @@ var theme = {
     symbol: "code-token__property",
     tag: "code-token__property",
     title: "code-token__function",
+    "type-definition": "code-token__function",
     url: "code-token__operator",
     variable: "code-token__variable",
   }
@@ -1108,6 +1135,7 @@ class CommandDispatcher {
     this.highlighter = editorElement.highlighter;
 
     this.#registerCommands();
+    this.#registerKeyboardCommands();
     this.#registerDragAndDropHandlers();
   }
 
@@ -1272,15 +1300,8 @@ class CommandDispatcher {
     this.editor.registerCommand(command, handler, priority);
   }
 
-  // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
-  #toggleLink(url) {
-    this.editor.update(() => {
-      if (url === null) {
-        $toggleLink(null);
-      } else {
-        $toggleLink(url);
-      }
-    });
+  #registerKeyboardCommands() {
+    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleListIndentation.bind(this), COMMAND_PRIORITY_NORMAL);
   }
 
   #registerDragAndDropHandlers() {
@@ -1329,6 +1350,29 @@ class CommandDispatcher {
 
     this.editor.focus();
   }
+
+  #handleListIndentation(event) {
+    if (this.selection.isInsideList) {
+      event.preventDefault();
+      if (event.shiftKey) {
+        return this.editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+      } else {
+        return this.editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
+      }
+    }
+    return false
+  }
+
+  // Not using TOGGLE_LINK_COMMAND because it's not handled unless you use React/LinkPlugin
+  #toggleLink(url) {
+    this.editor.update(() => {
+      if (url === null) {
+        $toggleLink(null);
+      } else {
+        $toggleLink(url);
+      }
+    });
+  }
 }
 
 function capitalize(str) {
@@ -3234,27 +3278,37 @@ class Clipboard {
 class Highlighter {
   constructor(editorElement) {
     this.editor = editorElement.editor;
+
+    this.#registerHighlightTransform();
   }
 
   toggle(styles) {
     this.editor.update(() => {
       this.#toggleSelectionStyles(styles);
-      $forEachSelectedTextNode(node => this.#syncHighlightWithStyle(node));
     });
   }
 
   remove() {
-    this.toggle({ "color": undefined, "background-color": undefined });
+    this.toggle({ "color": null, "background-color": null });
+  }
+
+  #registerHighlightTransform() {
+    return this.editor.registerNodeTransform(TextNode, (textNode) => {
+      this.#syncHighlightWithStyle(textNode);
+    })
   }
 
   #toggleSelectionStyles(styles) {
     const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return
 
+    const patch = {};
     for (const property in styles) {
       const oldValue = $getSelectionStyleValueForProperty(selection, property);
-      const patch = { [property]: this.#toggleOrReplace(oldValue, styles[property]) };
-      $patchStyleText(selection, patch);
+      patch[property] = this.#toggleOrReplace(oldValue, styles[property]);
     }
+
+    $patchStyleText(selection, patch);
   }
 
   #toggleOrReplace(oldValue, newValue) {
@@ -3262,15 +3316,10 @@ class Highlighter {
   }
 
   #syncHighlightWithStyle(node) {
-    if (this.#hasHighlightStyles(node) !== node.hasFormat("highlight")) {
+    if (hasHighlightStyles(node.getStyle()) !== node.hasFormat("highlight")) {
       node.toggleFormat("highlight");
     }
   }
-
-  #hasHighlightStyles(node) {
-    const styles = getStyleObjectFromCSS(node.getStyle());
-    return !!(styles.color || styles["background-color"])
-  }
 }
 
 class HighlightNode extends TextNode {
@@ -3442,6 +3491,10 @@ class LexicalEditorElement extends HTMLElement {
     return this.getAttribute("attachments") !== "false"
   }
 
+  get contentTabIndex() {
+    return parseInt(this.editorContentElement?.getAttribute("tabindex") ?? "0")
+  }
+
   focus() {
     this.editor.focus();
   }
@@ -3755,39 +3808,26 @@ class LexicalEditorElement extends HTMLElement {
 
   #reconnect() {
     this.disconnectedCallback();
+    this.valueBeforeDisconnect = null;
     this.connectedCallback();
   }
 }
 
 customElements.define("lexxy-editor", LexicalEditorElement);
 
-class ToolbarDialog extends HTMLElement {
+class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
-    this.dialog = this.querySelector("dialog");
-    if ("closedBy" in this.dialog.constructor.prototype) {
-      this.dialog.closedBy = "any";
-    }
-    this.#registerHandlers();
-  }
+    this.container = this.closest("details");
 
-  disconnectedCallback() {
-    this.#removeClickOutsideHandler();
-  }
-
-  updateStateCallback() { }
+    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+    this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
 
-  show(triggerButton) {
-    if (this.preventImmediateReopen) { return }
-
-    this.triggerButton = triggerButton;
-    this.#positionDialog();
-    this.dialog.show();
-
-    this.#setupClickOutsideHandler();
+    this.#setTabIndexValues();
   }
 
-  close() {
-    this.dialog.close();
+  disconnectedCallback() {
+    this.#removeClickOutsideHandler();
+    this.container.removeEventListener("keydown", this.#handleKeyDown.bind(this));
   }
 
   get toolbar() {
@@ -3798,32 +3838,32 @@ class ToolbarDialog extends HTMLElement {
     return this.toolbar.editor
   }
 
-  get open() { return this.dialog.open }
-
-  #registerHandlers() {
-    this.#setupKeydownHandler();
-    this.dialog.addEventListener("cancel", this.#handleCancel.bind(this));
-    this.dialog.addEventListener("close", this.#handleClose.bind(this));
+  close() {
+    this.container.removeAttribute("open");
   }
 
-  #handleClose() {
-    this.#removeClickOutsideHandler();
-    this.triggerButton = null;
-    this.editor.focus();
+  #handleToggle(event) {
+    if (this.container.open) {
+      this.#handleOpen(event.target);
+    } else {
+      this.#handleClose();
+    }
   }
 
-  #handleCancel() {
-    this.preventImmediateReopen = true;
-    requestAnimationFrame(() => this.preventImmediateReopen = undefined);
+  #handleOpen(trigger) {
+    this.trigger = trigger;
+    this.#interactiveElements[0].focus();
+    this.#setupClickOutsideHandler();
   }
 
-  #positionDialog() {
-    const left = this.triggerButton.offsetLeft;
-    this.dialog.style.insetInlineStart = `${left}px`;
+  #handleClose() {
+    this.trigger = null;
+    this.#removeClickOutsideHandler();
+    this.editor.focus();
   }
 
   #setupClickOutsideHandler() {
-    if (this.#browserHandlesClose || this.clickOutsideHandler) return
+    if (this.clickOutsideHandler) return
 
     this.clickOutsideHandler = this.#handleClickOutside.bind(this);
     document.addEventListener("click", this.clickOutsideHandler, true);
@@ -3837,22 +3877,7 @@ class ToolbarDialog extends HTMLElement {
   }
 
   #handleClickOutside({ target }) {
-    if (!this.dialog.open) return
-
-    const isClickInsideDialog = this.dialog.contains(target);
-    const isClickOnTrigger = this.triggerButton.contains(target);
-
-    if (!isClickInsideDialog && !isClickOnTrigger) {
-      this.close();
-    }
-  }
-
-  #setupKeydownHandler() {
-    if (!this.#browserHandlesClose) { this.addEventListener("keydown", this.#handleKeyDown.bind(this)); }
-  }
-
-  get #browserHandlesClose() {
-    return this.dialog.closedBy === "any"
+    if (this.container.open && !this.container.contains(target)) this.close();
   }
 
   #handleKeyDown(event) {
@@ -3861,9 +3886,20 @@ class ToolbarDialog extends HTMLElement {
       this.close();
     }
   }
+
+  async #setTabIndexValues() {
+    await nextFrame();
+    this.#interactiveElements.forEach((element) => {
+      element.setAttribute("tabindex", 0);
+    });
+  }
+
+  get #interactiveElements() {
+    return Array.from(this.querySelectorAll("button, input"))
+  }
 }
 
-class LinkDialog extends ToolbarDialog {
+class LinkDropdown extends ToolbarDropdown {
   connectedCallback() {
     super.connectedCallback();
     this.input = this.querySelector("input");
@@ -3871,23 +3907,21 @@ class LinkDialog extends ToolbarDialog {
     this.#registerHandlers();
   }
 
-  updateStateCallback() {
-    this.input.value = this.#selectedLinkUrl;
-  }
-
   #registerHandlers() {
-    this.dialog.addEventListener("beforetoggle", this.#handleBeforeToggle.bind(this));
-    this.dialog.addEventListener("submit", this.#handleSubmit.bind(this));
+    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+    this.addEventListener("submit", this.#handleSubmit.bind(this));
     this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink.bind(this));
   }
 
-  #handleBeforeToggle({ newState }) {
+  #handleToggle({ newState }) {
+    this.input.value = this.#selectedLinkUrl;
     this.input.required = newState === "open";
   }
 
   #handleSubmit(event) {
     const command = event.submitter?.value;
     this.editor.dispatchCommand(command, this.input.value);
+    this.close();
   }
 
   #handleUnlink() {
@@ -3916,14 +3950,17 @@ class LinkDialog extends ToolbarDialog {
   }
 }
 
-// We should extend the native dialog and avoid the intermediary <dialog> but not
-// supported by Safari yet: customElements.define("lexxy-link-dialog", LinkDialog, { extends: "dialog" })
-customElements.define("lexxy-link-dialog", LinkDialog);
+customElements.define("lexxy-link-dropdown", LinkDropdown);
 
 const APPLY_HIGHLIGHT_SELECTOR = "button.lexxy-highlight-button";
 const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 
-class HighlightDialog extends ToolbarDialog {
+// Use Symbol instead of null since $getSelectionStyleValueForProperty
+// responds differently for backward selections if null is the default
+// see https://github.com/facebook/lexical/issues/8013
+const NO_STYLE = Symbol("no_style");
+
+class HighlightDropdown extends ToolbarDropdown {
   connectedCallback() {
     super.connectedCallback();
 
@@ -3931,13 +3968,10 @@ class HighlightDialog extends ToolbarDialog {
     this.#registerHandlers();
   }
 
-  updateStateCallback() {
-    this.#updateColorButtonStates($getSelection());
-  }
-
   #registerHandlers() {
-    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick.bind(this));
+    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
     this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick.bind(this)));
+    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick.bind(this));
   }
 
   #setUpButtons() {
@@ -3964,6 +3998,14 @@ class HighlightDialog extends ToolbarDialog {
     return button
   }
 
+  #handleToggle({ newState }) {
+    if (newState === "open") {
+      this.editor.getEditorState().read(() => {
+        this.#updateColorButtonStates($getSelection());
+      });
+    }
+  }
+
   #handleColorButtonClick(event) {
     event.preventDefault();
 
@@ -3987,16 +4029,16 @@ class HighlightDialog extends ToolbarDialog {
   #updateColorButtonStates(selection) {
     if (!$isRangeSelection(selection)) { return }
 
-    // Use null default, so "" indicates mixed highlighting
-    const textColor = $getSelectionStyleValueForProperty(selection, "color", null);
-    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", null);
+    // Use non-"" default, so "" indicates mixed highlighting
+    const textColor = $getSelectionStyleValueForProperty(selection, "color", NO_STYLE);
+    const backgroundColor = $getSelectionStyleValueForProperty(selection, "background-color", NO_STYLE);
 
     this.#colorButtons.forEach(button => {
       const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
       button.setAttribute("aria-pressed", matchesSelection);
     });
 
-    const hasHighlight = textColor !== null || backgroundColor !== null;
+    const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
     this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).disabled = !hasHighlight;
   }
 
@@ -4009,9 +4051,7 @@ class HighlightDialog extends ToolbarDialog {
   }
 }
 
-// We should extend the native dialog and avoid the intermediary <dialog> but not
-// supported by Safari yet: customElements.define("lexxy-hightlight-dialog", HighlightDialog, { extends: "dialog" })
-customElements.define("lexxy-highlight-dialog", HighlightDialog);
+customElements.define("lexxy-highlight-dropdown", HighlightDropdown);
 
 class BaseSource {
   // Template method to override
@@ -4156,10 +4196,13 @@ class LexicalPromptElement extends HTMLElement {
     this.keyListeners = [];
   }
 
+  static observedAttributes = [ "connected" ]
+
   connectedCallback() {
     this.source = this.#createSource();
 
     this.#addTriggerListener();
+    this.toggleAttribute("connected", true);
   }
 
   disconnectedCallback() {
@@ -4167,6 +4210,13 @@ class LexicalPromptElement extends HTMLElement {
     this.popoverElement = null;
   }
 
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.#reconnect());
+    }
+  }
+
   get name() {
     return this.getAttribute("name")
   }
@@ -4536,6 +4586,11 @@ class LexicalPromptElement extends HTMLElement {
       this.#optionWasSelected();
     }
   }
+
+  #reconnect() {
+    this.disconnectedCallback();
+    this.connectedCallback();
+  }
 }
 
 customElements.define("lexxy-prompt", LexicalPromptElement);
@@ -4578,6 +4633,11 @@ class CodeLanguagePicker extends HTMLElement {
     const languages = { ...CODE_LANGUAGE_FRIENDLY_NAME_MAP };
 
     if (!languages.ruby) languages.ruby = "Ruby";
+    if (!languages.php) languages.php = "PHP";
+    if (!languages.go) languages.go = "Go";
+    if (!languages.bash) languages.bash = "Bash";
+    if (!languages.json) languages.json = "JSON";
+    if (!languages.diff) languages.diff = "Diff";
 
     const sortedEntries = Object.entries(languages)
       .sort(([ , a ], [ , b ]) => a.localeCompare(b));