Fix issue in RTE related to adding text before a mention

If you start the input by tagging (@somebody) someone, and then
relocate the cursor to before the @, you could type to insert text,
but couldn't delete or otherwise interact with it (backspace and left
arrow keys don't respond). When switching to plain-text, anything
typed before the @ disappeared. This commit fixes the issue.

app/assets/javascripts/content_editor/components/wrappers/paragraph.vue

@@ -57,11 +57,8 @@ export default {
 </script>
 <template>
   <editor-state-observer @transaction="updateNodeView">
-    <node-view-wrapper
-      as="p"
-      :class="{ 'gl-flex gl-align-items-baseline': hasQuickActionExplanation }"
-    >
-      <node-view-content ref="nodeViewContent" as="span" />
+    <node-view-wrapper :class="{ 'gl-flex gl-items-baseline': hasQuickActionExplanation }">
+      <node-view-content ref="nodeViewContent" as="p" />
       <span
         v-if="hasQuickActionExplanation"
         class="gl-text-sm gl-text-secondary gl-italic"

spec/support/shared_examples/features/rich_text_editor/autocomplete_shared_examples.rb

@@ -150,6 +150,23 @@
       expect(page).to have_text('@abc123')
     end
 
+    it 'allows adding text before a username' do
+      type_in_content_editor '@abc'
+
+      expect(find(suggestions_dropdown)).to have_text('abc123')
+
+      send_keys :tab
+      expect(page).to have_text('@abc123')
+
+      send_keys [:arrow_left, :arrow_left]
+      type_in_content_editor 'foo'
+
+      sleep 0.1 # wait for the text to be added
+      switch_to_markdown_editor
+
+      expect(page.find('textarea').value).to include('foo @abc123')
+    end
+
     it 'allows dismissing the suggestion popup and typing more text' do
       type_in_content_editor '@ab'