DEV: makes ai menu helper a standalone menu

The current menu was rendering inside the post text toolbar (on desktop). This is not ideal as the post text toolbar rendering is conditioned on the presence of text selection, when you click a button on the toolbar, by design of the web browsers you will lose your text selection, making all of this super tricky.

This commit makes desktop and mobile behave in the same way by rendering their own menu and capturing the quote state when we render the post text selection toolbar, this allows us to reason a much simpler way about the AI helper.

This commit also removes what appears to be an unused file and corrects which was seemingly copy/paste mistakes.

Author: jjaffeux

assets/javascripts/discourse/components/ai-post-helper-menu.gjs

@@ -78,23 +78,6 @@ export default class AiPostHelperMenu extends Component {
 
   @tracked _activeAiRequest = null;
 
-  constructor() {
-    super(...arguments);
-
-    withPluginApi((api) => {
-      api.registerValueTransformer(
-        "post-text-selection-prevent-close",
-        ({ value }) => {
-          if (this.menuState === this.MENU_STATES.result) {
-            return true;
-          }
-
-          return value;
-        }
-      );
-    });
-  }
-
   get footnoteDisabled() {
     return this.streaming || !this.supportsAddFootnote;
   }
@@ -338,7 +321,7 @@ export default class AiPostHelperMenu extends Component {
       (and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
     }}
       <div class="ai-post-helper-menu__selected-text">
-        {{@data.selectedText}}
+        {{@data.quoteState.buffer}}
       </div>
     {{/if}}
 

assets/javascripts/discourse/connectors/post-text-buttons/ai-post-helper-trigger.gjs

@@ -3,8 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
-import virtualElementFromTextRange from "discourse/lib/virtual-element-from-text-range";
-import eq from "truth-helpers/helpers/eq";
+import { selectedRange } from "discourse/lib/utilities";
 import AiPostHelperMenu from "../../components/ai-post-helper-menu";
 import { showPostAIHelper } from "../../lib/show-ai-helper";
 
@@ -13,12 +12,8 @@ export default class AiPostHelperTrigger extends Component {
     return showPostAIHelper(outletArgs, helper);
   }
 
-  @service site;
   @service menu;
 
-  @tracked menuState = this.MENU_STATES.triggers;
-  @tracked showMainButtons = true;
-  @tracked showAiButtons = true;
   @tracked postHighlighted = false;
   @tracked currentMenu = this.menu.getByIdentifier(
     "post-text-selection-toolbar"
@@ -27,14 +22,20 @@ export default class AiPostHelperTrigger extends Component {
   MENU_STATES = {
     triggers: "TRIGGERS",
     options: "OPTIONS",
+  // so we ensure change of state (selection change for example)
+  // is not impacting the menu data
+  menuData = {
+    ...this.args.outletArgs.data,
+    quoteState: {
+      buffer: this.args.outletArgs.data.quoteState.buffer,
+      opts: this.args.outletArgs.data.quoteState.opts,
+      postId: this.args.outletArgs.data.quoteState.postId,
+    },
+    post: this.args.outletArgs.post,
+    selectedRange: selectedRange(),
   };
 
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.removeHighlightedText();
-  }
-
-  highlightSelectedText() {
+  highlightSelectedText(selection) {
     const postId = this.args.outletArgs.data.quoteState.postId;
     const postElement = document.querySelector(
       `article[data-post-id='${postId}'] .cooked`
@@ -44,14 +45,7 @@ export default class AiPostHelperTrigger extends Component {
       return;
     }
 
-    this.selectedText = this.args.outletArgs.data.quoteState.buffer;
-
-    const selection = window.getSelection();
-    if (!selection.rangeCount) {
-      return;
-    }
-
-    const range = selection.getRangeAt(0);
+    const range = this.menuData.selectedRange;
 
     // Split start/end text nodes at their range boundary
     if (
@@ -97,11 +91,10 @@ export default class AiPostHelperTrigger extends Component {
       // Replace textNode with highlighted clone
       const clone = textNode.cloneNode(true);
       highlight.appendChild(clone);
-
       textNode.parentNode.replaceChild(highlight, textNode);
     }
 
-    selection.removeAllRanges();
+    window.getSelection().removeAllRanges();
     this.postHighlighted = true;
   }
 
@@ -110,16 +103,7 @@ export default class AiPostHelperTrigger extends Component {
       return;
     }
 
-    const postId = this.args.outletArgs.data.quoteState.postId;
-    const postElement = document.querySelector(
-      `article[data-post-id='${postId}'] .cooked`
-    );
-
-    if (!postElement) {
-      return;
-    }
-
-    const highlightedSpans = postElement.querySelectorAll(
+    const highlightedSpans = document.querySelectorAll(
       "span.ai-helper-highlighted-selection"
     );
 
@@ -133,65 +117,44 @@ export default class AiPostHelperTrigger extends Component {
 
   @action
   async showAiPostHelperMenu() {
-    this.highlightSelectedText();
-    if (this.site.mobileView) {
-      this.currentMenu.close();
-
-      await this.menu.show(virtualElementFromTextRange(), {
-        identifier: "ai-post-helper-menu",
-        component: AiPostHelperMenu,
-        inline: true,
-        interactive: true,
-        placement: this.shouldRenderUnder ? "bottom-start" : "top-start",
-        fallbackPlacements: this.shouldRenderUnder
-          ? ["bottom-end", "top-start"]
-          : ["bottom-start"],
-        trapTab: false,
-        closeOnScroll: false,
-        modalForMobile: true,
-        data: this.menuData,
-      });
-    }
-
-    this.showMainButtons = false;
-    this.menuState = this.MENU_STATES.options;
-  }
+    const existingRect = this.currentMenu.trigger.rect;
+    const virtualElement = {
+      getBoundingClientRect: () => existingRect,
+      getClientRects: () => [existingRect],
+    };
 
-  get menuData() {
-    // Streamline of data model to be passed to the component when
-    // instantiated as a DMenu or a simple component in the template
-    return {
-      ...this.args.outletArgs.data,
-      quoteState: {
-        buffer: this.args.outletArgs.data.quoteState.buffer,
-        opts: this.args.outletArgs.data.quoteState.opts,
-        postId: this.args.outletArgs.data.quoteState.postId,
+    await this.currentMenu.close();
+
+    await this.menu.show(virtualElement, {
+      identifier: "ai-post-helper-menu",
+      component: AiPostHelperMenu,
+      interactive: true,
+      trapTab: false,
+      closeOnScroll: false,
+      modalForMobile: true,
+      data: this.menuData,
+      placement: "bottom",
+      fallbackPlacements: ["top"],
+      inline: true,
+      onClose: () => {
+        this.removeHighlightedText();
       },
-      post: this.args.outletArgs.post,
-      selectedText: this.selectedText,
-    };
+    });
+
+    this.highlightSelectedText();
   }
 
   <template>
-    {{#if this.showMainButtons}}
-      {{yield}}
-    {{/if}}
-
-    {{#if this.showAiButtons}}
-      <div class="ai-post-helper">
-        {{#if (eq this.menuState this.MENU_STATES.triggers)}}
-          <DButton
-            @icon="discourse-sparkles"
-            @title="discourse_ai.ai_helper.post_options_menu.title"
-            @label="discourse_ai.ai_helper.post_options_menu.trigger"
-            @action={{this.showAiPostHelperMenu}}
-            class="btn-flat ai-post-helper__trigger"
-          />
-
-        {{else if (eq this.menuState this.MENU_STATES.options)}}
-          <AiPostHelperMenu @data={{this.menuData}} />
-        {{/if}}
-      </div>
-    {{/if}}
+    {{yield}}
+
+    <div class="ai-post-helper">
+      <DButton
+        @icon="discourse-sparkles"
+        @title="discourse_ai.ai_helper.post_options_menu.title"
+        @label="discourse_ai.ai_helper.post_options_menu.trigger"
+        @action={{this.showAiPostHelperMenu}}
+        class="btn-flat ai-post-helper__trigger"
+      />
+    </div>
   </template>
 }