UX: strip partial :emoji when adding emoji from picker (#31810)

When a user typed `:emoji` using the autocomplete on the rich editor,
but then used the "more" option to open the emoji picker and picked an
emoji from there, we were leaving the dangling `:emoji` there and just
added the emoji node after it.

We now check if there's a partial emoji exactly at the caret position,
and replace it too.

app/assets/javascripts/discourse/app/static/prosemirror/lib/text-manipulation.js

@@ -191,13 +191,28 @@ export default class ProsemirrorTextManipulation {
     command?.(this.view.state, this.view.dispatch);
   }
 
-  @bind
   emojiSelected(code) {
+    let index = 0;
+
+    const value = this.autocompleteHandler.getValue();
+    const match = value.match(/\B:(\w*)$/);
+    if (match) {
+      index = value.length - match.index;
+    }
+
+    const { from, to } = this.view.state.selection;
+
     this.view.dispatch(
       this.view.state.tr
-        .replaceSelectionWith(this.schema.nodes.emoji.create({ code }))
+        .replaceRangeWith(
+          from - index,
+          to,
+          this.schema.nodes.emoji.create({ code })
+        )
         .insertText(" ")
     );
+
+    next(() => this.focus());
   }
 
   @bind
@@ -337,8 +352,6 @@ class ProsemirrorAutocompleteHandler {
   /**
    * Replaces the term between start-end in the currently selected text block
    *
-   * It uses input rules to convert it to a node if possible
-   *
    * @param {number} start
    * @param {number} end
    * @param {String} term

spec/system/composer/prosemirror_editor_spec.rb

@@ -51,6 +51,22 @@ describe "Composer - ProseMirror editor", type: :system do
 
       expect(composer).to have_emoji_autocomplete
     end
+
+    it "strips partially written emoji when using 'more' emoji modal" do
+      open_composer_and_toggle_rich_editor
+      composer.type_content("Why :repeat_single")
+
+      expect(composer).to have_emoji_autocomplete
+
+      # "more" emoji picker
+      composer.send_keys(:arrow_down, :enter)
+
+      find("img[data-emoji='repeat_single_button']").click
+
+      composer.toggle_rich_editor
+
+      expect(composer).to have_value("Why :repeat_single_button: ")
+    end
   end
 
   context "with inputRules" do