FIX: Closing AI menu stops post audio from playing (#1369)

keegangeorge · web-flow · commit e264572597f6 · 2025-05-26T10:24:06.000-07:00
## 🔍 Overview When you have a post with audio being played and you open and close the AI post helper menu, it re-renders the entire post DOM, causing the audio to be interrupted and stop playing. The reason for this is because we highlight the selected text when opening the AI post helper menu and we replace the entire post back with the original post HTML when closing the menu. This fix ensures that we do not re-render the entire post DOM and instead only remove the highlighted section that was added. ## 🔗 Context https://meta.discourse.org/t/ai-helper-interrupting-uploaded-mp3-audio-stream/366817?u=keegan
diff --git a/assets/javascripts/discourse/connectors/post-text-buttons/ai-post-helper-trigger.gjs b/assets/javascripts/discourse/connectors/post-text-buttons/ai-post-helper-trigger.gjs
@@ -19,7 +19,6 @@ export default class AiPostHelperTrigger extends Component {
   @tracked menuState = this.MENU_STATES.triggers;
   @tracked showMainButtons = true;
   @tracked showAiButtons = true;
-  @tracked originalPostHTML = null;
   @tracked postHighlighted = false;
   @tracked currentMenu = this.menu.getByIdentifier(
     "post-text-selection-toolbar"
@@ -45,7 +44,6 @@ export default class AiPostHelperTrigger extends Component {
       return;
     }
 
-    this.originalPostHTML = postElement.innerHTML;
     this.selectedText = this.args.outletArgs.data.quoteState.buffer;
 
     const selection = window.getSelection();
@@ -121,7 +119,15 @@ export default class AiPostHelperTrigger extends Component {
       return;
     }
 
-    postElement.innerHTML = this.originalPostHTML;
+    const highlightedSpans = postElement.querySelectorAll(
+      "span.ai-helper-highlighted-selection"
+    );
+
+    highlightedSpans.forEach((span) => {
+      const textNode = document.createTextNode(span.textContent);
+      span.parentNode.replaceChild(textNode, span);
+    });
+
     this.postHighlighted = false;
   }
 
