lexxy 0.9.19.alpha.1 → 0.9.19.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6b15ddc26ce7b82fd871ed3f5dfa96598b84278da3af81c7c8e7ed1c7d8135b
-  data.tar.gz: eedb6f7b9cca87c16c1737c6db392b2fb8a38f560ca20f3c615dbd865afafbfc
+  metadata.gz: 3f4e64b061d290f12430a666006c5845f242f1776474b8b8691c53e83a7a5674
+  data.tar.gz: 8f539bac381f8273f97d18c9d40093c917272d89e74a36ef3d8dee9888ab149d
 SHA512:
-  metadata.gz: 6945b89f20390bc1f407d95de1f365ef97508b8e7c8ac4c8960d48df6a8d53e39cfcc39795988e8e4e77b37d2d4e60819ffc0faf0a8f1035b3acedaede71d978
-  data.tar.gz: 791d8ac7ffebbe6987fc70571bb04450e17e93571f89bd10abdcbf7586b0b3deed48208a0e035b66eceeb5cb42db373399894b2aead182c19139ab3cc0f11d5b
+  metadata.gz: 2245d2ea20bae119bda7464502ef6c83390f08425ea998e9e2e4a84b4ac20d389fc967ae4d4aab1d821d462050c3358cf617d3170cf11a4fcad526d368d59453
+  data.tar.gz: db3cef1b72fcc42d00f66160292ce2f13b2c1b82a57bbe44fa53a7100a31e65143a52c68674ada67d20901be052c26a037516b5a13b72994673e1391d8c24883

data/app/assets/javascript/lexxy.js

@@ -7810,8 +7810,12 @@ function $isSafeForRoot(node) {
 function $makeSafeForRoot(node) {
   if ($isSafeForRoot(node)) {
     return node
-  } else {
+  } else if (node.getParent()) {
     return Tt$4(node, () => node.createParentElementNode())
+  } else {
+    // Detached nodes (e.g. clipboard nodes being inserted) can't be `replace`d in place,
+    // so append them into a fresh required parent instead.
+    return node.createParentElementNode().append(node)
   }
 }
 
@@ -7999,7 +8003,7 @@ function $splitSelectedParagraphsAtInnerLineBreaks(selection) {
   }
 }
 
-function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
+function $expandSelectionToLineBreaksAndSplitAtEdges(selection, fallbackAncestor = (node) => node.getTopLevelElement()) {
   j$6(selection);
 
   const focusCaret = ql(selection.focus, "next");
@@ -8019,8 +8023,8 @@ function $expandSelectionToLineBreaksAndSplitAtEdges(selection) {
   const focusOuter = focusBrCaret && $splitAroundLineBreak(focusBrCaret);
   const anchorOuter = anchorBrCaret && $splitAroundLineBreak(anchorBrCaret);
 
-  const innerStart = anchorOuter?.getNextSibling() ?? selection.anchor.getNode().getTopLevelElement();
-  const innerEnd = focusOuter?.getPreviousSibling() ?? selection.focus.getNode().getTopLevelElement();
+  const innerStart = anchorOuter?.getNextSibling() ?? fallbackAncestor(selection.anchor.getNode());
+  const innerEnd = focusOuter?.getPreviousSibling() ?? fallbackAncestor(selection.focus.getNode());
   if (!innerStart || !innerEnd) return
 
   Gl(Wl(
@@ -8126,6 +8130,49 @@ function $splitAroundLineBreak(lineBreakCaret) {
   return outer
 }
 
+// Lexical's RangeSelection.insertNodes/insertLineBreak require every selection point to have a
+// block ancestor with inline children. An element point on a container of block nodes — e.g. a
+// quote holding paragraphs — has none, so Lexical throws invariant #211 or #212. This detects
+// such a point so callers can descend it to a leaf before inserting.
+function $isPointOnBlockContainer(point) {
+  if (point.type !== "element") return false
+
+  const firstChild = point.getNode().getFirstChild();
+  return (Wi(firstChild) || ji(firstChild)) && !firstChild.isInline()
+}
+
+function $hasPointOnBlockContainer(selection) {
+  return Fr(selection) &&
+    [ selection.anchor, selection.focus ].some($isPointOnBlockContainer)
+}
+
+// Descend any block-container element point in the selection to a leaf position, so a subsequent
+// Lexical insert (insertNodes, insertLineBreak, INSERT_PARAGRAPH) doesn't throw invariant #211/#212.
+function $normalizeBlockContainerSelection(selection = Qr()) {
+  if (!$hasPointOnBlockContainer(selection)) return false
+
+  St$3(selection);
+  return true
+}
+
+function $consecutiveSiblingGroups(blocks) {
+  const ordered = [ ...blocks ].sort((a, b) => a.getIndexWithinParent() - b.getIndexWithinParent());
+  const groups = [];
+
+  for (const block of ordered) {
+    const lastGroup = groups.at(-1);
+    const previous = lastGroup?.at(-1);
+
+    if (previous && previous.getParent().is(block.getParent()) && previous.getNextSibling()?.is(block)) {
+      lastGroup.push(block);
+    } else {
+      groups.push([ block ]);
+    }
+  }
+
+  return groups
+}
+
 // Payload: Record<nodeKey, { patch?, replace? }>
 //   - patch: plain object, shallow-merged into the existing node's properties
 //   - replace: a LexicalNode instance that replaces the node
@@ -10067,6 +10114,16 @@ class CommandDispatcher {
   #registerKeyboardCommands() {
     this.#registerCommandHandler(ke$2, oo, this.#handleArrowRightKey.bind(this));
     this.#registerCommandHandler(Fe$2, oo, this.#handleTabKey.bind(this));
+
+    // Run before Lexical's built-in insert handlers to descend an element point on a
+    // block container to a leaf, avoiding error #211 on Enter / Shift+Enter in a quote.
+    this.#registerCommandHandler(de$4, so, this.#normalizeBlockContainerSelection.bind(this));
+    this.#registerCommandHandler(he$3, so, this.#normalizeBlockContainerSelection.bind(this));
+  }
+
+  #normalizeBlockContainerSelection() {
+    $normalizeBlockContainerSelection();
+    return false
   }
 
   #handleArrowRightKey(event) {
@@ -10339,6 +10396,10 @@ class Selection {
     return this.nearestNodeOfType(ge$2)
   }
 
+  get isInsideBlockQuote() {
+    return this.nearestNodeOfType(At$1)
+  }
+
   get isIndentedList() {
     const closestListNode = this.nearestNodeOfType(me$2);
     return closestListNode && (G$7(closestListNode) > 1)
@@ -10766,6 +10827,9 @@ class Selection {
   // - First item (no previous sibling): convert to a paragraph above the
   //   list, matching the standard "unwrap list formatting" behavior that
   //   users expect from pressing backspace at the start of a list item.
+  //   Inside a blockquote we instead just remove the empty item and move
+  //   the cursor into the next one — stranding a paragraph there would
+  //   leave the blank line the user is trying to close.
   //
   // When the empty item is the last/only one in the list, we return false
   // and let Lexical's default (convert to paragraph) provide the standard
@@ -10784,19 +10848,22 @@ class Selection {
     if (!nextSibling) return false
 
     const previousSibling = listItem.getPreviousSibling();
+    const listNode = At$2(listItem, me$2);
+    if (!listNode) return false
+
     if (previousSibling) {
       previousSibling.selectEnd();
       listItem.remove();
-      return true
+    } else if (Mt$2(listNode.getParent())) {
+      nextSibling.selectStart();
+      listItem.remove();
+    } else {
+      const paragraph = eo();
+      listNode.insertBefore(paragraph);
+      listItem.remove();
+      paragraph.selectStart();
     }
 
-    const listNode = At$2(listItem, me$2);
-    if (!listNode) return false
-
-    const paragraph = eo();
-    listNode.insertBefore(paragraph);
-    listItem.remove();
-    paragraph.selectStart();
     return true
   }
 
@@ -11672,24 +11739,13 @@ function $createActionTextAttachmentUploadNode(...args) {
   return new ActionTextAttachmentUploadNode(...args)
 }
 
-class NodeInserter {
-  static for(selection) {
-    const INSERTERS = [
-      CodeNodeInserter,
-      ShadowRootNodeInserter,
-      NodeSelectionNodeInserter,
-      BlockContainerNodeInserter
-    ];
-    const Inserter = INSERTERS.find(inserter => inserter.handles(selection));
-    return Inserter ? new Inserter(selection) : selection
-  }
-
+class BaseNodeInserter {
   constructor(selection) {
     this.selection = selection;
   }
 }
 
-class CodeNodeInserter extends NodeInserter {
+class CodeNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return At$2(selection.anchor?.getNode(), z$1)
   }
@@ -11748,10 +11804,9 @@ class CodeNodeInserter extends NodeInserter {
       return kr(node.getTextContent())
     }
   }
-
 }
 
-class ShadowRootNodeInserter extends NodeInserter {
+class ShadowRootNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return $isShadowRoot(selection?.anchor?.getNode())
   }
@@ -11765,31 +11820,106 @@ class ShadowRootNodeInserter extends NodeInserter {
   }
 }
 
-class NodeSelectionNodeInserter extends NodeInserter {
+class NodeSelectionNodeInserter extends BaseNodeInserter {
   static handles(selection) {
     return Ir(selection)
   }
 
   insertNodes(nodes) {
-    const selectedNodes = this.selection.getNodes();
-
     // Overrides Lexical's default behavior of _removing_ the currently selected nodes
     // https://github.com/facebook/lexical/blob/v0.38.2/packages/lexical/src/LexicalSelection.ts#L412
-    let lastNode = selectedNodes.at(-1);
+    let lastNode = this.selection.getNodes().at(-1);
+
     for (const node of nodes) {
-      lastNode = lastNode.insertAfter(node);
+      // Inserting after a top-level node would make this one a root child. Inline nodes
+      // can't live there (Lexical error #99), so wrap them in their required parent first.
+      const nodeToInsert = this.#insertsIntoRoot(lastNode) ? $makeSafeForRoot(node) : node;
+      lastNode = lastNode.insertAfter(nodeToInsert);
     }
   }
+
+  #insertsIntoRoot(node) {
+    return node.is(node.getTopLevelElement())
+  }
+}
+
+// A list item can only hold inline content, so a block node (such as an image
+// attachment) dropped into one corrupts the list: Lexical lifts it into the
+// wrong list item and orphans an empty bullet. Block nodes belong at the top
+// level instead, splitting the list around the cursor. Inline content keeps
+// Lexical's default behavior and stays within the list item.
+class ListItemNodeInserter extends BaseNodeInserter {
+  static handles(selection) {
+    return Fr(selection) &&
+      At$2(selection.anchor.getNode(), ge$2)
+  }
+
+  insertNodes(nodes) {
+    if (nodes.some(node => this.#isBlockDecorator(node))) {
+      this.#insertAroundList(nodes);
+    } else {
+      this.selection.insertNodes(nodes);
+    }
+  }
+
+  #insertAroundList(nodes) {
+    if (!this.selection.isCollapsed()) { this.selection.removeText(); }
+
+    // Break out of any nesting to the outermost list. Splitting an inner list
+    // would leave the block stranded inside an ancestor list item, which is the
+    // very corruption we are avoiding. The block must land at the list's level.
+    const anchorNode = this.selection.anchor.getNode();
+    const outerList = this.#outermostList(anchorNode);
+    const topItem = this.#topLevelItemFor(anchorNode, outerList);
+
+    // A blank top-level bullet is just the insertion point (e.g. the user pressed
+    // Enter to leave the list); break out of it entirely. A bullet with content —
+    // including one wrapping a nested list — splits so its content stays in the list.
+    const splitAfterItem = $isBlankNode(topItem) ? topItem.getPreviousSibling() : topItem;
+    const splitIndex = splitAfterItem ? splitAfterItem.getIndexWithinParent() + 1 : 0;
+    const [ listBefore, listAfter ] = Us(outerList, splitIndex);
+    if ($isBlankNode(topItem)) { topItem.remove(); }
+
+    let anchor = listBefore ?? listAfter;
+    for (const node of nodes) {
+      anchor.insertAfter(node);
+      anchor = node;
+    }
+
+    this.#removeEmptyList(listBefore);
+    this.#removeEmptyList(listAfter);
+    nodes.at(-1).selectNext();
+  }
+
+  #outermostList(node) {
+    return [ node, ...node.getParents() ].reverse().find(Se$1)
+  }
+
+  #topLevelItemFor(node, outerList) {
+    return [ node, ...node.getParents() ].find(ancestor =>
+      pe$2(ancestor) && ancestor.getParent()?.is(outerList)
+    )
+  }
+
+  #removeEmptyList(list) {
+    if (Se$1(list) && list.isEmpty()) list.remove();
+  }
+
+  // Only block decorator nodes (image/file attachments) are intercepted. A list
+  // item cannot hold them, so they must break out. Pasted element blocks
+  // (paragraphs, quotes) keep Lexical's own list-escape semantics.
+  #isBlockDecorator(node) {
+    return ji(node) && !node.isInline()
+  }
 }
 
 // Lexical's RangeSelection.insertNodes requires every selection point to have a block
 // ancestor with inline children. An element point on a container of block nodes — e.g.
 // a quote holding paragraphs — has none, so Lexical throws invariant #211 or #212.
 // Descend such points to a leaf position before inserting.
-class BlockContainerNodeInserter extends NodeInserter {
+class BlockContainerNodeInserter extends BaseNodeInserter {
   static handles(selection) {
-    return Fr(selection) &&
-      [ selection.anchor, selection.focus ].some($isPointOnBlockContainer)
+    return $hasPointOnBlockContainer(selection)
   }
 
   insertNodes(nodes) {
@@ -11798,12 +11928,66 @@ class BlockContainerNodeInserter extends NodeInserter {
   }
 }
 
-function $isPointOnBlockContainer(point) {
-  if (point.type === "element") {
-    const firstChild = point.getNode().getFirstChild();
-    return (Wi(firstChild) || ji(firstChild)) && !firstChild.isInline()
-  } else {
-    return false
+const INSERTERS = [
+  CodeNodeInserter,
+  ShadowRootNodeInserter,
+  NodeSelectionNodeInserter,
+  ListItemNodeInserter,
+  BlockContainerNodeInserter
+];
+
+// Defined here rather than on the base class so the base can stay free of any
+// dependency on its subclasses (they import the base), avoiding an import cycle.
+BaseNodeInserter.for = (selection) => {
+  const inserterClass = INSERTERS.find(inserter => inserter.handles(selection));
+  return inserterClass ? new inserterClass(selection) : selection
+};
+
+class PastedContentFormatter {
+  constructor(doc) {
+    this.doc = doc;
+  }
+
+  format() {
+    this.#unwrapPlaceholderAnchors();
+    this.#stripTableCellColorStyles();
+    this.#stripStrayListChildren();
+    return this.doc
+  }
+
+  // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
+  // from rendered views where mentions and interactive elements are wrapped in
+  // <a href="#"> tags. Unwrap them so their text content pastes as plain text
+  // and real links are preserved.
+  #unwrapPlaceholderAnchors() {
+    for (const anchor of this.doc.querySelectorAll("a")) {
+      const href = anchor.getAttribute("href") || "";
+      if (href === "" || href === "#") {
+        anchor.replaceWith(...anchor.childNodes);
+      }
+    }
+  }
+
+  // Table cells copied from a page inherit the source theme's inline color
+  // styles (e.g. dark-mode backgrounds). Strip them so pasted tables adopt
+  // the current theme instead of carrying stale colors.
+  #stripTableCellColorStyles() {
+    for (const cell of this.doc.querySelectorAll("td, th")) {
+      cell.style.removeProperty("background-color");
+      cell.style.removeProperty("background");
+      cell.style.removeProperty("color");
+    }
+  }
+
+  // Only <li> is a valid child of a list; drop stray <br>/whitespace so the
+  // import doesn't wrap them into an empty leading item.
+  #stripStrayListChildren() {
+    for (const list of this.doc.querySelectorAll("ol, ul")) {
+      for (const child of Array.from(list.childNodes)) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "LI") continue
+        list.removeChild(child);
+      }
+    }
   }
 }
 
@@ -11838,7 +12022,7 @@ class Contents {
 
   insertAtCursor(...nodes) {
     const selection = Qr() ?? Zo().selectEnd();
-    const inserter = NodeInserter.for(selection);
+    const inserter = BaseNodeInserter.for(selection);
 
     inserter.insertNodes(nodes);
   }
@@ -11852,7 +12036,7 @@ class Contents {
     const selection = Qr();
     if (!Fr(selection)) return
 
-    $expandSelectionToLineBreaksAndSplitAtEdges(selection);
+    $expandSelectionToLineBreaksAndSplitAtEdges(selection, (node) => Nt$2(node));
     H$6(selection, () => eo());
   }
 
@@ -11865,13 +12049,11 @@ class Contents {
   }
 
   applyUnorderedListFormat() {
-    this.#splitParagraphsAtLineBreaksUnlessInsideList();
-    this.editor.dispatchCommand(Ee$2, undefined);
+    this.#applyListFormat("bullet", Ee$2);
   }
 
   applyOrderedListFormat() {
-    this.#splitParagraphsAtLineBreaksUnlessInsideList();
-    this.editor.dispatchCommand(Oe$1, undefined);
+    this.#applyListFormat("number", Oe$1);
   }
 
   clearFormatting() {
@@ -11959,7 +12141,7 @@ class Contents {
 
       const selection = Qr();
       if (Fr(selection)) {
-        selection.insertNodes([ linkNode ]);
+        BaseNodeInserter.for(selection).insertNodes([ linkNode ]);
         linkNodeKey = linkNode.getKey();
       }
     });
@@ -12154,8 +12336,7 @@ class Contents {
   }
 
   #formatPastedDOM(doc) {
-    this.#unwrapPlaceholderAnchors(doc);
-    this.#stripTableCellColorStyles(doc);
+    new PastedContentFormatter(doc).format();
   }
 
   #dispatchPastedNodesCommand(nodes) {
@@ -12203,6 +12384,45 @@ class Contents {
     codeNode.remove();
   }
 
+  #applyListFormat(listType, command) {
+    if (this.selection.isInsideBlockQuote) {
+      this.#insertListInsideQuote(listType);
+    } else {
+      this.#splitParagraphsAtLineBreaksUnlessInsideList();
+      this.editor.dispatchCommand(command);
+    }
+  }
+
+  #insertListInsideQuote(listType) {
+    for (const group of $consecutiveSiblingGroups(this.#quotedBlocksInSelection())) {
+      this.#wrapBlocksInList(group, listType);
+    }
+  }
+
+  #quotedBlocksInSelection() {
+    const selection = Qr();
+    if (!Fr(selection)) return []
+
+    const blocks = this.#outermostElements(this.#blockLevelElementsInSelection(selection));
+    return blocks.filter((block) => Mt$2(block.getParent()))
+  }
+
+  #wrapBlocksInList(blocks, listType) {
+    const list = Te$1(listType);
+    blocks[0].insertBefore(list);
+
+    for (const block of blocks) {
+      const listItem = fe$2();
+      if (Se$1(block)) {
+        listItem.append(...block.getChildren().flatMap((item) => item.getChildren()));
+      } else {
+        listItem.append(...block.getChildren());
+      }
+      list.append(listItem);
+      block.remove();
+    }
+  }
+
   #splitParagraphsAtLineBreaksUnlessInsideList() {
     if (this.selection.isInsideList) return
 
@@ -12283,30 +12503,6 @@ class Contents {
     node.remove();
   }
 
-  // Anchors with non-meaningful hrefs (e.g. "#", "") appear in content copied
-  // from rendered views where mentions and interactive elements are wrapped in
-  // <a href="#"> tags. Unwrap them so their text content pastes as plain text
-  // and real links are preserved.
-  #unwrapPlaceholderAnchors(doc) {
-    for (const anchor of doc.querySelectorAll("a")) {
-      const href = anchor.getAttribute("href") || "";
-      if (href === "" || href === "#") {
-        anchor.replaceWith(...anchor.childNodes);
-      }
-    }
-  }
-
-  // Table cells copied from a page inherit the source theme's inline color
-  // styles (e.g. dark-mode backgrounds). Strip them so pasted tables adopt
-  // the current theme instead of carrying stale colors.
-  #stripTableCellColorStyles(doc) {
-    for (const cell of doc.querySelectorAll("td, th")) {
-      cell.style.removeProperty("background-color");
-      cell.style.removeProperty("background");
-      cell.style.removeProperty("color");
-    }
-  }
-
   #getTextAnchorData() {
     const selection = Qr();
     if (!selection || !selection.isCollapsed()) return { anchorNode: null, offset: 0 }
@@ -12624,7 +12820,7 @@ class Clipboard {
     }
 
     const linkNode = $$2(url).append(kr(url));
-    selection.insertNodes([ linkNode ]);
+    BaseNodeInserter.for(selection).insertNodes([ linkNode ]);
 
     Ms(() => this.#dispatchLinkInsertEvent(linkNode.getKey(), { url }));
   }
@@ -14090,7 +14286,7 @@ class LexicalEditorElement extends HTMLElement {
   static debug = false
   static commands = [ "bold", "italic", "strikethrough" ]
 
-  static observedAttributes = [ "connected", "required" ]
+  static observedAttributes = [ "autocapitalize", "connected", "required" ]
 
   #initialValue = ""
   #previousInternalFormValue = null
@@ -14157,8 +14353,15 @@ class LexicalEditorElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "connected") this.connectedChangedCallback(oldValue, newValue);
-    if (name === "required") this.requiredChangedCallback(oldValue, newValue);
+    if (typeof this[`${name}ChangedCallback`] === "function") {
+      this[`${name}ChangedCallback`](oldValue, newValue);
+    }
+  }
+
+  autocapitalizeChangedCallback() {
+    if (this.editorContentElement) {
+      this.#transferAttributeToContentEditable(this.editorContentElement, "autocapitalize");
+    }
   }
 
   connectedChangedCallback(oldValue, newValue) {
@@ -14490,25 +14693,33 @@ class LexicalEditorElement extends HTMLElement {
 
   #createEditorContentElement() {
     const editorContentElement = createElement("div", {
+      id: `${this.id}-content`,
       classList: "lexxy-editor__content",
       contenteditable: true,
-      autocapitalize: "none",
       role: "textbox",
       "aria-multiline": true,
       "aria-label": this.#labelText,
       placeholder: this.getAttribute("placeholder")
     });
-    editorContentElement.id = `${this.id}-content`;
+
     this.#ariaAttributes.forEach(attribute => editorContentElement.setAttribute(attribute.name, attribute.value));
 
-    if (this.getAttribute("tabindex")) {
-      editorContentElement.setAttribute("tabindex", this.getAttribute("tabindex"));
-      this.removeAttribute("tabindex");
+    this.#transferAttributeToContentEditable(editorContentElement, "autocapitalize");
+    this.#transferAttributeToContentEditable(editorContentElement, "tabindex", { defaultValue: 0, removeSource: true });
+
+    return editorContentElement
+  }
+
+  #transferAttributeToContentEditable(element, qualifiedName, { defaultValue = null, removeSource = false } = {}) {
+    if (this.hasAttribute(qualifiedName)) {
+      element.setAttribute(qualifiedName, this.getAttribute(qualifiedName));
+    } else if (defaultValue !== null) {
+      element.setAttribute(qualifiedName, defaultValue);
     } else {
-      editorContentElement.setAttribute("tabindex", 0);
+      element.removeAttribute(qualifiedName);
     }
 
-    return editorContentElement
+    if (removeSource) this.removeAttribute(qualifiedName);
   }
 
   get #labelText() {
@@ -15125,6 +15336,7 @@ class LexicalPromptElement extends HTMLElement {
     this.source = this.#createSource();
 
     this.#addTriggerListener();
+    this.#removePopoverBeforeTurboCaches();
     this.toggleAttribute("connected", true);
   }
 
@@ -15132,7 +15344,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#popoverListeners.dispose();
     this.#globalListeners.dispose();
     this.source = null;
-    this.popoverElement = null;
+    this.#removePopover();
   }
 
 
@@ -15428,6 +15640,21 @@ class LexicalPromptElement extends HTMLElement {
     this.#addTriggerListener();
   }
 
+  // The popover is appended to the <lexxy-editor> subtree, so Turbo serializes it
+  // into the page cache. Removing it before caching prevents an orphaned, unmanaged
+  // popover from being restored on history back/forward.
+  #removePopoverBeforeTurboCaches() {
+    this.#globalListeners.track(
+      registerEventListener(document, "turbo:before-cache", () => this.#removePopover())
+    );
+  }
+
+  #removePopover() {
+    this.#popoverListeners.dispose();
+    this.popoverElement?.remove();
+    this.popoverElement = null;
+  }
+
   #filterOptions = async () => {
     if (this.initialPrompt) {
       this.initialPrompt = false;