DEV: Add test to cover proofreading in rich editor

This core PR must be merged for this to work
discourse/discourse#32280

We want to make sure we don't have regressions with this
functionality in the rich editor, which uses contendeditable
and other APIs than the old composer.

Author: martin-brennan

spec/system/ai_helper/ai_proofreading_spec.rb

@@ -12,18 +12,20 @@
   end
 
   let(:composer) { PageObjects::Components::Composer.new }
+  let(:rich) { composer.rich_editor }
   let(:toasts) { PageObjects::Components::Toasts.new }
   let(:diff_modal) { PageObjects::Modals::DiffModal.new }
+  let(:keyboard_shortcut) { [PLATFORM_KEY_MODIFIER, :alt, "p"] }
 
   context "when triggering via keyboard shortcut" do
-    it "proofreads selected text using" do
+    it "proofreads selected text and replaces it" do
       visit "/new-topic"
       composer.fill_content("hello worldd !")
 
       composer.select_range(6, 12)
 
       DiscourseAi::Completions::Llm.with_prepared_responses(["world"]) do
-        composer.composer_input.send_keys([PLATFORM_KEY_MODIFIER, :alt, "p"])
+        composer.composer_input.send_keys(keyboard_shortcut)
         diff_modal.confirm_changes
         expect(composer.composer_input.value).to eq("hello world !")
       end
@@ -35,7 +37,7 @@
 
       # Simulate AI response
       DiscourseAi::Completions::Llm.with_prepared_responses(["hello world"]) do
-        composer.composer_input.send_keys([PLATFORM_KEY_MODIFIER, :alt, "p"])
+        composer.composer_input.send_keys(keyboard_shortcut)
         diff_modal.confirm_changes
         expect(composer.composer_input.value).to eq("hello world")
       end
@@ -46,9 +48,41 @@
 
       # Simulate AI response
       DiscourseAi::Completions::Llm.with_prepared_responses(["hello world"]) do
-        composer.composer_input.send_keys([PLATFORM_KEY_MODIFIER, :alt, "p"])
+        composer.composer_input.send_keys(keyboard_shortcut)
         expect(toasts).to have_error(I18n.t("js.discourse_ai.ai_helper.no_content_error"))
       end
     end
+
+    context "when using rich text editor" do
+      before { SiteSetting.rich_editor = true }
+
+      it "proofreads selected text and replaces it" do
+        visit "/new-topic"
+        expect(composer).to be_opened
+        composer.toggle_rich_editor
+        composer.type_content("hello worldd !")
+
+        # NOTE: The rich text editor cannot use select_range on the page object since it is
+        # a contenteditable element. It would be hard to make this generic enough to put in
+        # the page object, maybe at some point in the future we can refactor this.
+        execute_script(<<~JS, text)
+          const composer = document.querySelector("#reply-control .d-editor-input");
+          const startNode = composer.firstChild.firstChild;
+          composer.focus();
+          const range = document.createRange();
+          range.setStart(startNode, 6);
+          range.setEnd(startNode, 12);
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        JS
+
+        DiscourseAi::Completions::Llm.with_prepared_responses(["world"]) do
+          composer.composer_input.send_keys(keyboard_shortcut)
+          diff_modal.confirm_changes
+          expect(rich).to have_css("p", text: "hello world !")
+        end
+      end
+    end
   end
 end