@37signals/lexxy 0.9.0-beta → 0.9.2-beta

package/dist/lexxy.esm.js

@@ -10,7 +10,7 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-diff';
 import DOMPurify from 'dompurify';
 import { getStyleObjectFromCSS, getCSSFromStyleObject, $isAtNodeEnd, $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from '@lexical/selection';
-import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
+import { SKIP_DOM_SELECTION_TAG, $getSelection, $isRangeSelection, $getNodeByKey, $isTextNode, $createRangeSelection, $setSelection, DecoratorNode, $createTextNode, $createNodeSelection, $isDecoratorNode, $isLineBreakNode, $isElementNode, HISTORY_MERGE_TAG, SKIP_SCROLL_INTO_VIEW_TAG, $createParagraphNode, TextNode, createCommand, createState, defineExtension, COMMAND_PRIORITY_NORMAL, $getState, $setState, $hasUpdateTag, PASTE_TAG, FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_LOW, KEY_ARROW_RIGHT_COMMAND, KEY_TAB_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $getEditor, $getNearestRootOrShadowRoot, $isNodeSelection, $getRoot, mergeRegister as mergeRegister$1, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_DOWN_COMMAND, DELETE_CHARACTER_COMMAND, SELECTION_CHANGE_COMMAND, CLICK_COMMAND, isDOMNode, $getNearestNodeFromDOMNode, $isRootOrShadowRoot, ElementNode, $splitNode, $isParagraphNode, $createLineBreakNode, $isRootNode, ParagraphNode, RootNode, COMMAND_PRIORITY_HIGH, DRAGSTART_COMMAND, DROP_COMMAND, INSERT_PARAGRAPH_COMMAND, CLEAR_HISTORY_COMMAND, $addUpdateTag, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_SPACE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode, $isListNode, registerList } from '@lexical/list';
 import { $createAutoLinkNode, $toggleLink, LinkNode, $createLinkNode, AutoLinkNode, $isLinkNode } from '@lexical/link';
@@ -22,7 +22,7 @@ import { registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
 import { createEmptyHistoryState, registerHistory } from '@lexical/history';
 import { createElement, extractPlainTextFromHtml, createAttachmentFigure, isPreviewableImage, dispatch, parseHtml, addBlockSpacing, generateDomId } from './lexxy_helpers.esm.js';
 export { highlightCode as highlightAll, highlightCode } from './lexxy_helpers.esm.js';
-import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
+import { INSERT_TABLE_COMMAND, $getTableCellNodeFromLexicalNode, TableCellNode, TableNode, TableRowNode, setScrollableTablesActive, registerTablePlugin, registerTableSelectionObserver, TableCellHeaderStates, $insertTableRowAtSelection, $insertTableColumnAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $findTableNode, $getTableRowIndexFromTableCellNode, $getTableColumnIndexFromTableCellNode, $findCellNode, $getElementForTableNode } from '@lexical/table';
 import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $descendantsMatching } from '@lexical/utils';
 import { marked } from 'marked';
 import { $insertDataTransferForRichText } from '@lexical/clipboard';
@@ -382,9 +382,22 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.dispose();
+  }
+
+  dispose() {
     this.#uninstallResizeObserver();
+    this.#unbindButtons();
     this.#unbindHotkeys();
     this.#unbindFocusListeners();
+    this.unregisterSelectionListener?.();
+    this.unregisterHistoryListener?.();
+
+    this.editorElement = null;
+    this.editor = null;
+    this.selection = null;
+
+    this.#createEditorPromise();
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -428,10 +441,12 @@ class LexicalToolbarElement extends HTMLElement {
     this.connectedCallback();
   }
 
-  #createEditorPromise() {
+  async #createEditorPromise() {
     this.editorPromise = new Promise((resolve) => {
       this.resolveEditorPromise = resolve;
     });
+
+    this.editorElement = await this.editorPromise;
   }
 
   #installResizeObserver() {
@@ -447,10 +462,14 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #bindButtons() {
-    this.addEventListener("click", this.#handleButtonClicked.bind(this));
+    this.addEventListener("click", this.#handleButtonClicked);
+  }
+
+  #unbindButtons() {
+    this.removeEventListener("click", this.#handleButtonClicked);
   }
 
-  #handleButtonClicked(event) {
+  #handleButtonClicked = (event) => {
     this.#handleTargetClicked(event, "[data-command]", this.#dispatchButtonCommand.bind(this));
   }
 
@@ -510,8 +529,8 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #unbindFocusListeners() {
-    this.editorElement.removeEventListener("lexxy:focus", this.#handleEditorFocus);
-    this.editorElement.removeEventListener("lexxy:blur", this.#handleEditorBlur);
+    this.editorElement?.removeEventListener("lexxy:focus", this.#handleEditorFocus);
+    this.editorElement?.removeEventListener("lexxy:blur", this.#handleEditorBlur);
     this.removeEventListener("keydown", this.#handleKeydown);
   }
 
@@ -535,7 +554,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorSelectionChanges() {
-    this.editor.registerUpdateListener(() => {
+    this.unregisterSelectionListener = this.editor.registerUpdateListener(() => {
       this.editor.getEditorState().read(() => {
         this.#updateButtonStates();
         this.#closeDropdowns();
@@ -544,7 +563,7 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #monitorHistoryChanges() {
-    this.editor.registerUpdateListener(() => {
+    this.unregisterHistoryListener = this.editor.registerUpdateListener(() => {
       this.#updateUndoRedoButtonStates();
     });
   }
@@ -696,13 +715,13 @@ class LexicalToolbarElement extends HTMLElement {
 
   static get defaultTemplate() {
     return `
-    <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadAttachments" data-prevent-overflow="true" title="Add images">
-      ${ToolbarIcons.image}
-    </button>
+      <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadImage" data-prevent-overflow="true" title="Add images and video">
+        ${ToolbarIcons.image}
+      </button>
 
-    <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="file" data-command="uploadAttachments" title="Upload files">
-      ${ToolbarIcons.attachment}
-    </button>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="file" data-command="uploadFile" title="Upload files">
+        ${ToolbarIcons.attachment}
+      </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">
         ${ToolbarIcons.bold}
@@ -726,10 +745,10 @@ class LexicalToolbarElement extends HTMLElement {
           <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading">
             ${ToolbarIcons.h3} <span>Medium Heading</span>
           </button>
-          <button type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
+          <button class="lexxy-editor__toolbar-group-end" type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
             ${ToolbarIcons.h4} <span>Small Heading</span>
           </button>
-          <div class="separator" role="separator"></div>
+          <div class="lexxy-editor__toolbar-separator" role="separator"></div>
           <button type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
             ${ToolbarIcons.strikethrough} <span>Strikethrough</span>
           </button>
@@ -739,21 +758,6 @@ class LexicalToolbarElement extends HTMLElement {
         </div>
       </details>
 
-
-      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" name="lists" title="Lists">
-          ${ToolbarIcons.ul}
-        </summary>
-        <div class="lexxy-editor__toolbar-dropdown-list">
-          <button type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
-            ${ToolbarIcons.ul} <span>Bullets</span>
-          </button>
-          <button type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
-            ${ToolbarIcons.ol} <span>Numbers</span>
-          </button>
-        </div>
-      </details>
-
       <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
           ${ToolbarIcons.highlight}
@@ -765,7 +769,7 @@ class LexicalToolbarElement extends HTMLElement {
       </details>
 
       <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">
+        <summary class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
           ${ToolbarIcons.link}
         </summary>
         <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
@@ -783,10 +787,17 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.quote}
       </button>
 
-      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="code" data-command="insertCodeBlock" title="Code">
+      <button class="lexxy-editor__toolbar-button" type="button" name="code" data-command="insertCodeBlock" title="Code">
         ${ToolbarIcons.code}
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
+        ${ToolbarIcons.ul}
+      </button>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
+        ${ToolbarIcons.ol}
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
         ${ToolbarIcons.table}
       </button>
@@ -1961,7 +1972,8 @@ const COMMANDS = [
   "insertQuoteBlock",
   "insertCodeBlock",
   "insertHorizontalDivider",
-  "uploadAttachments",
+  "uploadImage",
+  "uploadFile",
 
   "insertTable",
 
@@ -1971,9 +1983,10 @@ const COMMANDS = [
 
 class CommandDispatcher {
   #selectionBeforeDrag = null
+  #unregister = []
 
   static configureFor(editorElement) {
-    new CommandDispatcher(editorElement);
+    return new CommandDispatcher(editorElement)
   }
 
   constructor(editorElement) {
@@ -2145,15 +2158,27 @@ class CommandDispatcher {
     this.contents.applyParagraphFormat();
   }
 
-  dispatchUploadAttachments() {
-    const input = createElement("input", {
+  dispatchUploadImage() {
+    this.#dispatchUploadAttachment("image/*,video/*");
+  }
+
+  dispatchUploadFile() {
+    this.#dispatchUploadAttachment();
+  }
+
+  #dispatchUploadAttachment(accept = null) {
+    const attributes = {
       type: "file",
       multiple: true,
       style: "display: none;",
       onchange: ({ target: { files } }) => {
         this.contents.uploadFiles(files, { selectLast: true });
       }
-    });
+    };
+
+    if (accept) attributes.accept = accept;
+
+    const input = createElement("input", attributes);
 
     // Append and remove to make testable
     this.editorElement.appendChild(input);
@@ -2173,6 +2198,13 @@ class CommandDispatcher {
     this.editor.dispatchCommand(REDO_COMMAND, undefined);
   }
 
+  dispose() {
+    while (this.#unregister.length) {
+      const unregister = this.#unregister.pop();
+      unregister();
+    }
+  }
+
   #registerCommands() {
     for (const command of COMMANDS) {
       const methodName = `dispatch${capitalize(command)}`;
@@ -2183,12 +2215,12 @@ class CommandDispatcher {
   }
 
   #registerCommandHandler(command, priority, handler) {
-    this.editor.registerCommand(command, handler, priority);
+    this.#unregister.push(this.editor.registerCommand(command, handler, priority));
   }
 
   #registerKeyboardCommands() {
-    this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#handleArrowRightKey.bind(this), COMMAND_PRIORITY_NORMAL);
-    this.editor.registerCommand(KEY_TAB_COMMAND, this.#handleTabKey.bind(this), COMMAND_PRIORITY_NORMAL);
+    this.#registerCommandHandler(KEY_ARROW_RIGHT_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleArrowRightKey.bind(this));
+    this.#registerCommandHandler(KEY_TAB_COMMAND, COMMAND_PRIORITY_NORMAL, this.#handleTabKey.bind(this));
   }
 
   #handleArrowRightKey(event) {
@@ -2674,6 +2706,8 @@ function $isActionTextAttachmentNode(node) {
 }
 
 class Selection {
+  #unregister = []
+
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editorContentElement = editorElement.editorContentElement;
@@ -2930,6 +2964,18 @@ class Selection {
     return this.#findPreviousSiblingUp(anchorNode)
   }
 
+  dispose() {
+    this.editorElement = null;
+    this.editorContentElement = null;
+    this.editor = null;
+    this.previouslySelectedKeys = null;
+
+    while (this.#unregister.length) {
+      const unregister = this.#unregister.pop();
+      unregister();
+    }
+  }
+
   // When all inline code text is deleted, Lexical's selection retains the stale
   // code format flag. Verify the flag is backed by actual code-formatted content:
   // a code block ancestor or a text node that carries the code format.
@@ -2945,7 +2991,7 @@ class Selection {
   // detects that stale state and clears it so newly typed text won't be
   // code-formatted.
   #clearStaleInlineCodeFormat() {
-    this.editor.registerUpdateListener(({ editorState, tags }) => {
+    this.#unregister.push(this.editor.registerUpdateListener(({ editorState, tags }) => {
       if (tags.has("history-merge") || tags.has("skip-dom-selection")) return
 
       let isStale = false;
@@ -2974,7 +3020,7 @@ class Selection {
           });
         }, 0);
       }
-    });
+    }));
   }
 
   get #currentlySelectedKeys() {
@@ -2993,29 +3039,32 @@ class Selection {
   }
 
   #processSelectionChangeCommands() {
-    this.editor.registerCommand(KEY_ARROW_LEFT_COMMAND, this.#selectPreviousNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#selectNextNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
-    this.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#selectNextTopLevelNode.bind(this), COMMAND_PRIORITY_LOW);
+    this.#unregister.push(mergeRegister$1(
+      this.editor.registerCommand(KEY_ARROW_LEFT_COMMAND, this.#selectPreviousNode.bind(this), COMMAND_PRIORITY_LOW),
+      this.editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, this.#selectNextNode.bind(this), COMMAND_PRIORITY_LOW),
+      this.editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#selectPreviousTopLevelNode.bind(this), COMMAND_PRIORITY_LOW),
+      this.editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#selectNextTopLevelNode.bind(this), COMMAND_PRIORITY_LOW),
 
-    this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW);
+      this.editor.registerCommand(DELETE_CHARACTER_COMMAND, this.#selectDecoratorNodeBeforeDeletion.bind(this), COMMAND_PRIORITY_LOW),
 
-    this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-      this.current = $getSelection();
-    }, COMMAND_PRIORITY_LOW);
+      this.editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+        this.current = $getSelection();
+      }, COMMAND_PRIORITY_LOW)
+    ));
   }
 
   #listenForNodeSelections() {
-    this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
+    this.#unregister.push(this.editor.registerCommand(CLICK_COMMAND, ({ target }) => {
       if (!isDOMNode(target)) return false
 
       const targetNode = $getNearestNodeFromDOMNode(target);
       return $isDecoratorNode(targetNode) && this.#selectInLexical(targetNode)
-    }, COMMAND_PRIORITY_LOW);
+    }, COMMAND_PRIORITY_LOW));
 
-    this.editor.getRootElement().addEventListener("lexxy:internal:move-to-next-line", (event) => {
-      this.#selectOrAppendNextLine();
-    });
+    const moveNextLineHandler = () => this.#selectOrAppendNextLine();
+    const rootElement = this.editor.getRootElement();
+    rootElement.addEventListener("lexxy:internal:move-to-next-line", moveNextLineHandler);
+    this.#unregister.push(() => rootElement.removeEventListener("lexxy:internal:move-to-next-line", moveNextLineHandler));
   }
 
   #containEditorFocus() {
@@ -4150,7 +4199,11 @@ class Contents {
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
+  }
 
+  dispose() {
+    this.editorElement = null;
+    this.editor = null;
   }
 
   insertHtml(html, { tag } = {}) {
@@ -5181,11 +5234,12 @@ class TablesExtension extends LexxyExtension {
         TableRowNode
       ],
       register(editor) {
+        setScrollableTablesActive(editor, true);
+
         return mergeRegister(
           // Register Lexical table plugins
           registerTablePlugin(editor),
           registerTableSelectionObserver(editor, true),
-          setScrollableTablesActive(editor, true),
 
           // Bug fix: Prevent hardcoded background color (Lexical #8089)
           editor.registerNodeTransform(TableCellNode, (node) => {
@@ -5912,6 +5966,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #initialValue = ""
   #validationTextArea = document.createElement("textarea")
+  #disposables = []
 
   constructor() {
     super();
@@ -5925,12 +5980,19 @@ class LexicalEditorElement extends HTMLElement {
     this.extensions = new Extensions(this);
 
     this.editor = this.#createEditor();
+    this.#disposables.push(this.editor);
 
     this.contents = new Contents(this);
+    this.#disposables.push(this.contents);
+
     this.selection = new Selection(this);
+    this.#disposables.push(this.selection);
+
     this.clipboard = new Clipboard(this);
 
-    CommandDispatcher.configureFor(this);
+    const commandDispatcher = CommandDispatcher.configureFor(this);
+    this.#disposables.push(commandDispatcher);
+
     this.#initialize();
 
     requestAnimationFrame(() => dispatch(this, "lexxy:initialize"));
@@ -5983,7 +6045,7 @@ class LexicalEditorElement extends HTMLElement {
   get toolbarElement() {
     if (!this.#hasToolbar) return null
 
-    this.toolbar = this.toolbar || this.#findOrCreateDefaultToolbar();
+    this.toolbar ??= this.#findOrCreateDefaultToolbar();
     return this.toolbar
   }
 
@@ -6119,6 +6181,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #createEditor() {
     this.editorContentElement ||= this.#createEditorContentElement();
+    this.appendChild(this.editorContentElement);
 
     const editor = buildEditorFromExtensions({
       name: "lexxy/core",
@@ -6168,7 +6231,6 @@ class LexicalEditorElement extends HTMLElement {
     });
     editorContentElement.id = `${this.id}-content`;
     this.#ariaAttributes.forEach(attribute => editorContentElement.setAttribute(attribute.name, attribute.value));
-    this.appendChild(editorContentElement);
 
     if (this.getAttribute("tabindex")) {
       editorContentElement.setAttribute("tabindex", this.getAttribute("tabindex"));
@@ -6244,36 +6306,48 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #registerComponents() {
+    const registered = [];
+
     if (this.supportsRichText) {
-      registerRichText(this.editor);
-      registerList(this.editor);
+      registered.push(
+        registerRichText(this.editor),
+        registerList(this.editor)
+      );
       this.#registerTableComponents();
       this.#registerCodeHiglightingComponents();
       if (this.supportsMarkdown) {
-        registerMarkdownShortcuts(this.editor, TRANSFORMERS);
-        registerMarkdownLeadingTagHandler(this.editor, TRANSFORMERS);
+          registered.push(
+            registerMarkdownShortcuts(this.editor, TRANSFORMERS),
+            registerMarkdownLeadingTagHandler(this.editor, TRANSFORMERS)
+        );
       }
     } else {
-      registerPlainText(this.editor);
+      registered.push(registerPlainText(this.editor));
     }
     this.historyState = createEmptyHistoryState();
-    registerHistory(this.editor, this.historyState, 20);
+    registered.push(registerHistory(this.editor, this.historyState, 20));
+
+    this.#addUnregisterHandler(mergeRegister$1(...registered));
   }
 
   #registerTableComponents() {
-    this.tableTools = createElement("lexxy-table-tools");
-    this.append(this.tableTools);
+    let tableTools = this.querySelector("lexxy-table-tools");
+    tableTools ??= createElement("lexxy-table-tools");
+    this.append(tableTools);
+    this.#disposables.push(tableTools);
   }
 
   #registerCodeHiglightingComponents() {
     registerCodeHighlighting(this.editor);
-    this.codeLanguagePicker = createElement("lexxy-code-language-picker");
-    this.append(this.codeLanguagePicker);
+    let codeLanguagePicker = this.querySelector("lexxy-code-language-picker");
+    codeLanguagePicker ??= createElement("lexxy-code-language-picker");
+    this.append(codeLanguagePicker);
+    this.#disposables.push(codeLanguagePicker);
   }
 
   #handleEnter() {
     // We can't prevent these externally using regular keydown because Lexical handles it first.
-    this.editor.registerCommand(
+    this.#addUnregisterHandler(this.editor.registerCommand(
       KEY_ENTER_COMMAND,
       (event) => {
         // Prevent CTRL+ENTER
@@ -6291,12 +6365,17 @@ class LexicalEditorElement extends HTMLElement {
         return false
       },
       COMMAND_PRIORITY_NORMAL
-    );
+    ));
   }
 
   #registerFocusEvents() {
     this.addEventListener("focusin", this.#handleFocusIn);
     this.addEventListener("focusout", this.#handleFocusOut);
+
+    this.#addUnregisterHandler(() => {
+      this.removeEventListener("focusin", this.#handleFocusIn);
+      this.removeEventListener("focusout", this.#handleFocusOut);
+    });
   }
 
   #handleFocusIn(event) {
@@ -6339,6 +6418,10 @@ class LexicalEditorElement extends HTMLElement {
   #attachToolbar() {
     if (this.#hasToolbar) {
       this.toolbarElement.setEditor(this);
+      if (typeof this.toolbarElement.dispose === "function") {
+        this.#disposables.push(this.toolbarElement);
+      }
+
       this.extensions.initializeToolbars();
     }
   }
@@ -6348,7 +6431,7 @@ class LexicalEditorElement extends HTMLElement {
     if (typeof toolbarConfig === "string") {
       return document.getElementById(toolbarConfig)
     } else {
-      return this.#createDefaultToolbar()
+      return this.querySelector("lexxy-toolbar") ?? this.#createDefaultToolbar()
     }
   }
 
@@ -6378,34 +6461,22 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   #reset() {
-    this.#unregisterHandlers();
-
-    if (this.editorContentElement) {
-      this.editorContentElement.remove();
-      this.editorContentElement = null;
-    }
-
-    this.contents = null;
-    this.editor = null;
+    this.#dispose();
+    this.editorContentElement?.remove();
+    this.editorContentElement = null;
 
-    if (this.toolbar) {
-      if (!this.getAttribute("toolbar")) { this.toolbar.remove(); }
-      this.toolbar = null;
-    }
+    // Prevents issues with turbo morphing receiving an empty <lexxy-editor> which wipes
+    // out the DOM for the tools, and the old toolbar reference will cause issues
+    this.toolbar = null;
+  }
 
-    if (this.codeLanguagePicker) {
-      this.codeLanguagePicker.remove();
-      this.codeLanguagePicker = null;
-    }
+  #dispose() {
+    this.#unregisterHandlers();
+    document.removeEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
 
-    if (this.tableHandler) {
-      this.tableHandler.remove();
-      this.tableHandler = null;
+    while (this.#disposables.length) {
+      this.#disposables.pop().dispose();
     }
-
-    this.selection = null;
-
-    document.removeEventListener("turbo:before-cache", this.#handleTurboBeforeCache);
   }
 
   #reconnect() {
@@ -6446,14 +6517,15 @@ class ToolbarDropdown extends HTMLElement {
   connectedCallback() {
     this.container = this.closest("details");
 
-    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
-    this.container.addEventListener("keydown", this.#handleKeyDown.bind(this));
+    this.container.addEventListener("toggle", this.#handleToggle);
+    this.container.addEventListener("keydown", this.#handleKeyDown);
 
     this.#onToolbarEditor(this.initialize.bind(this));
   }
 
   disconnectedCallback() {
-    this.container.removeEventListener("keydown", this.#handleKeyDown.bind(this));
+    this.container?.removeEventListener("toggle", this.#handleToggle);
+    this.container?.removeEventListener("keydown", this.#handleKeyDown);
   }
 
   get toolbar() {
@@ -6478,11 +6550,11 @@ class ToolbarDropdown extends HTMLElement {
   }
 
   async #onToolbarEditor(callback) {
-    await this.toolbar.editorConnected;
+    await this.toolbar.editorElement;
     callback();
   }
 
-  #handleToggle() {
+  #handleToggle = () => {
     if (this.container.open) {
       this.#handleOpen();
     }
@@ -6493,7 +6565,7 @@ class ToolbarDropdown extends HTMLElement {
     this.#resetTabIndexValues();
   }
 
-  #handleKeyDown(event) {
+  #handleKeyDown = (event) => {
     if (event.key === "Escape") {
       event.stopPropagation();
       this.close();
@@ -6521,27 +6593,30 @@ class LinkDropdown extends ToolbarDropdown {
     super.connectedCallback();
     this.input = this.querySelector("input");
 
-    this.#registerHandlers();
+    this.container.addEventListener("toggle", this.#handleToggle);
+    this.addEventListener("submit", this.#handleSubmit);
+    this.querySelector("[value='unlink']").addEventListener("click", this.#handleUnlink);
   }
 
-  #registerHandlers() {
-    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));
+  disconnectedCallback() {
+    this.container?.removeEventListener("toggle", this.#handleToggle);
+    this.removeEventListener("submit", this.#handleSubmit);
+    this.querySelector("[value='unlink']")?.removeEventListener("click", this.#handleUnlink);
+    super.disconnectedCallback();
   }
 
-  #handleToggle({ newState }) {
+  #handleToggle = ({ newState }) => {
     this.input.value = this.#selectedLinkUrl;
     this.input.required = newState === "open";
   }
 
-  #handleSubmit(event) {
+  #handleSubmit = (event) => {
     const command = event.submitter?.value;
     this.editor.dispatchCommand(command, this.input.value);
     this.close();
   }
 
-  #handleUnlink() {
+  #handleUnlink = () => {
     this.editor.dispatchCommand("unlink");
     this.close();
   }
@@ -6576,26 +6651,35 @@ const REMOVE_HIGHLIGHT_SELECTOR = "[data-command='removeHighlight']";
 const NO_STYLE = Symbol("no_style");
 
 class HighlightDropdown extends ToolbarDropdown {
-  connectedCallback() {
-    super.connectedCallback();
-    this.#registerToggleHandler();
-  }
-
   initialize() {
     this.#setUpButtons();
     this.#registerButtonHandlers();
   }
 
-  #registerToggleHandler() {
-    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+  connectedCallback() {
+    super.connectedCallback();
+    this.container.addEventListener("toggle", this.#handleToggle);
+  }
+
+  disconnectedCallback() {
+    this.container?.removeEventListener("toggle", this.#handleToggle);
+    this.#removeButtonHandlers();
+    super.disconnectedCallback();
   }
 
   #registerButtonHandlers() {
-    this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick.bind(this)));
-    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick.bind(this));
+    this.#colorButtons.forEach(button => button.addEventListener("click", this.#handleColorButtonClick));
+    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR).addEventListener("click", this.#handleRemoveHighlightClick);
+  }
+
+  #removeButtonHandlers() {
+    this.#colorButtons.forEach(button => button.removeEventListener("click", this.#handleColorButtonClick));
+    this.querySelector(REMOVE_HIGHLIGHT_SELECTOR)?.removeEventListener("click", this.#handleRemoveHighlightClick);
   }
 
   #setUpButtons() {
+    this.#buttonContainer.innerHTML = "";
+
     const colorGroups = this.editorElement.config.get("highlight.buttons");
 
     this.#populateButtonGroup("color", colorGroups.color);
@@ -6621,7 +6705,7 @@ class HighlightDropdown extends ToolbarDropdown {
     return button
   }
 
-  #handleToggle({ newState }) {
+  #handleToggle = ({ newState }) => {
     if (newState === "open") {
       this.editor.getEditorState().read(() => {
         this.#updateColorButtonStates($getSelection());
@@ -6629,7 +6713,7 @@ class HighlightDropdown extends ToolbarDropdown {
     }
   }
 
-  #handleColorButtonClick(event) {
+  #handleColorButtonClick = (event) => {
     event.preventDefault();
 
     const button = event.target.closest(APPLY_HIGHLIGHT_SELECTOR);
@@ -6642,7 +6726,7 @@ class HighlightDropdown extends ToolbarDropdown {
     this.close();
   }
 
-  #handleRemoveHighlightClick(event) {
+  #handleRemoveHighlightClick = (event) => {
     event.preventDefault();
 
     this.editor.dispatchCommand("removeHighlight");
@@ -7304,19 +7388,21 @@ class CodeLanguagePicker extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.dispose();
+  }
+
+  dispose() {
     this.unregisterUpdateListener?.();
     this.unregisterUpdateListener = null;
   }
 
   #attachLanguagePicker() {
-    this.languagePickerElement = this.#createLanguagePicker();
-
-    this.languagePickerElement.addEventListener("change", () => {
-      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
-    });
+    this.languagePickerElement = this.#findLanguagePicker() ?? this.#createLanguagePicker();
+    this.append(this.languagePickerElement);
+  }
 
-    this.languagePickerElement.setAttribute("nonce", getNonce());
-    this.appendChild(this.languagePickerElement);
+  #findLanguagePicker() {
+    return this.querySelector("select")
   }
 
   #createLanguagePicker() {
@@ -7329,6 +7415,12 @@ class CodeLanguagePicker extends HTMLElement {
       selectElement.appendChild(option);
     }
 
+    selectElement.addEventListener("change", () => {
+      this.#updateCodeBlockLanguage(this.languagePickerElement.value);
+    });
+
+    selectElement.setAttribute("nonce", getNonce());
+
     return selectElement
   }
 
@@ -7889,6 +7981,10 @@ class TableTools extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this.dispose();
+  }
+
+  dispose() {
     this.#unregisterKeyboardShortcuts();
 
     this.unregisterUpdateListener?.();
@@ -7913,6 +8009,8 @@ class TableTools extends HTMLElement {
   }
 
   #setUpButtons() {
+    this.innerHTML = "";
+
     this.appendChild(this.#createRowButtonsContainer());
     this.appendChild(this.#createColumnButtonsContainer());
 

package/dist/stylesheets/lexxy-editor.css

@@ -488,14 +488,15 @@
 
       &:after {
         background-color: var(--lexxy-color-ink-lighter);
+        block-size: var(--lexxy-toolbar-icon-size);
         content: "";
         display: block;
-        width: 1px;
-        height: 60%;
+        inline-size: 1px;
         inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
-        inset-block-start: 20%;
-        position: absolute;
+        inset-block: 0;
+        margin: auto;
         pointer-events: none;
+        position: absolute;
       }
     }
   }
@@ -556,11 +557,6 @@
     }
   }
 
-  [overflowing] &:not(.lexxy-editor__toolbar-overflow) summary ~ * {
-    inset-inline-end: var(--lexxy-toolbar-spacing);
-    inset-inline-start: var(--lexxy-toolbar-spacing);
-  }
-
   button {
     color: var(--lexxy-color-text);
 
@@ -572,7 +568,6 @@
   .lexxy-editor__toolbar-dropdown-list {
     border-start-start-radius: 0;
     flex-direction: column;
-    gap: 0.1ch;
     padding: 0.1ch;
 
     button {
@@ -581,6 +576,7 @@
       flex-direction: row;
       gap: 1ch;
       padding: 1ch;
+      position: relative;
 
       &[aria-pressed="true"] {
         background-color: var(--lexxy-color-selected);
@@ -600,11 +596,22 @@
       }
     }
 
-    .separator {
+    .lexxy-editor__toolbar-separator {
       background: var(--lexxy-color-ink-lighter);
       block-size: 1px;
       inline-size: 100%;
     }
+
+    [overflowing] & {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+
+      button span { display: none; }
+
+      .lexxy-editor__toolbar-separator {
+        grid-column: 1 / -1;
+      }
+    }
   }
 
 
@@ -706,6 +713,11 @@
     inset-inline-start: 0;
     max-inline-size: var(--max-inline-size);
 
+    [overflowing] & {
+      inset-inline-end: var(--lexxy-toolbar-spacing);
+      inset-inline-start: var(--lexxy-toolbar-spacing);
+    }
+
     button {
       position: relative;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.0-beta",
+  "version": "0.9.2-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",