feat(rich-text-editor): NO-JIRA add mention click handling (#1009)

Author: braddialpad

packages/dialtone-vue3/components/rich_text_editor/extensions/mentions/MentionComponent.vue

@@ -5,6 +5,7 @@
   >
     <dt-link
       kind="mention"
+      @click.prevent="handleClick"
     >
       {{ text }}
     </dt-link>
@@ -31,5 +32,17 @@ export default {
       return '@' + this.$props.node.attrs.name;
     },
   },
+
+  methods: {
+    handleClick () {
+      const mentionData = {
+        name: this.$props.node.attrs.name,
+        id: this.$props.node.attrs.id,
+        avatarSrc: this.$props.node.attrs.avatarSrc,
+        contactKey: this.$props.node.attrs.contactKey,
+      };
+      this.$props.editor.emit('mention-click', mentionData);
+    },
+  },
 };
 </script>

packages/dialtone-vue3/components/rich_text_editor/extensions/suggestion/SuggestionList.vue

@@ -125,7 +125,7 @@ export default {
           this.command(item);
           return;
         case 'mention':
-          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
+          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc, contactKey: item.contactKey });
           break;
         case 'channel':
           this.command({ name: item.name, id: item.id, locked: item.locked });

packages/dialtone-vue3/components/rich_text_editor/mention_suggestion.js

@@ -1,10 +1,11 @@
 import defaultImage from '@/common/assets/avatar2.png';
 
-/* eslint-disable max-len */
+
 const CONTACT_LIST = [
   {
     id: 'test.person',
     name: 'Test Person',
+    contactKey: '123',
     avatarSrc: defaultImage,
     showDetails: true,
     presence: 'active',
@@ -14,6 +15,7 @@ const CONTACT_LIST = [
   {
     id: 'test.person2',
     name: 'Test Person 2',
+    contactKey: '1234',
     avatarSrc: defaultImage,
     showDetails: true,
     presence: 'busy',
@@ -23,6 +25,7 @@ const CONTACT_LIST = [
   {
     id: 'test.person3',
     name: 'Test Person 3',
+    contactKey: '12345',
     avatarSrc: defaultImage,
     showDetails: true,
     presence: 'busy',
@@ -32,6 +35,7 @@ const CONTACT_LIST = [
   {
     id: 'brad.paugh',
     name: 'Brad Paugh',
+    contactKey: '123456',
     avatarSrc: defaultImage,
     showDetails: true,
     presence: 'offline',
@@ -40,6 +44,7 @@ const CONTACT_LIST = [
   {
     id: 'bradley.hawkins',
     name: 'Bradley Hawkins',
+    contactKey: '1234567',
     avatarSrc: defaultImage,
     showDetails: true,
     presence: 'away',
@@ -50,27 +55,32 @@ const CONTACT_LIST = [
   {
     id: 'julio.ortega',
     name: 'Tico Ortega',
+    contactKey: '12345678',
     avatarSrc: defaultImage,
   },
   {
     id: 'ignacio.ropolo',
     name: 'Ignacio Ropolo',
+    contactKey: '123456789',
     avatarSrc: defaultImage,
   },
   {
     id: 'nina.repetto',
     name: 'Nina Repetto',
+    contactKey: '123456789',
     avatarSrc: defaultImage,
   },
   {
     id: 'long.name',
     name: 'LongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongnameLongname',
     avatarSrc: defaultImage,
+    contactKey: '1234567890',
   },
   {
     id: 'long.name.with.spaces',
     name: 'Long Name Long Name Long Name Long NameLong Name Long Name Long Name Long NameLong Name Long Name Long Name Long NameLong Name Long Name Long Name Long NameLong Name Long Name Long Name Long Name ',
     avatarSrc: defaultImage,
+    contactKey: '12345678901',
   },
 ];
 

packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.stories.js

@@ -29,6 +29,7 @@ export const argsData = {
   onMarkdownInput: action('markdown-input'),
   onEditLink: action('edit-link'),
   onSelectedCommand: action('selected-command'),
+  onMentionClick: action('mention-click'),
 };
 
 export const argTypesData = {
@@ -123,6 +124,11 @@ export const argTypesData = {
       disable: true,
     },
   },
+  onMentionClick: {
+    table: {
+      disable: true,
+    },
+  },
 };
 
 // Story Collection

packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.test.js

@@ -604,6 +604,34 @@ describe('DtRichTextEditor tests', () => {
   });
 
   describe('Interactivity Tests', () => {
+    describe('Mention click functionality', () => {
+      describe('When a mention is clicked', () => {
+        it('should emit mention-click event with mention data', async () => {
+          const mentionData = {
+            id: 'john.doe',
+            name: 'John Doe',
+            avatarSrc: 'avatar.jpg',
+            contactKey: 'contact-123',
+          };
+
+          await wrapper.setProps({
+            mentionSuggestion: { items: vi.fn(() => [mentionData]) },
+          });
+
+          const editorInstance = wrapper.vm.editor;
+          const mentionNode = editorInstance.schema.nodes.mention.create(mentionData);
+          editorInstance.view.dispatch(editorInstance.state.tr.insert(0, mentionNode));
+          await wrapper.vm.$nextTick();
+
+          const mentionLink = wrapper.find('a.d-link');
+          expect(mentionLink.text()).toBe('@John Doe');
+
+          await mentionLink.trigger('click');
+          expect(wrapper.emitted('mention-click')[0][0]).toEqual(mentionData);
+        });
+      });
+    });
+
     describe('Link keyboard shortcut functionality', () => {
       describe('When Mod+K is pressed and link is enabled', () => {
         it('should emit edit-link event', async () => {

packages/dialtone-vue3/components/rich_text_editor/rich_text_editor.vue

@@ -494,6 +494,13 @@ export default {
      * @type {String}
      */
     'selected-command',
+
+    /**
+     * Event fired when a mention is clicked
+     * @event mention-click
+     * @type {Object}
+     */
+    'mention-click',
   ],
 
   data () {
@@ -1188,10 +1195,15 @@ export default {
         this.$emit('focus', event);
       });
 
-      // The editor isn’t focused anymore.
+      // The editor isn't focused anymore.
       this.editor.on('blur', ({ event }) => {
         this.$emit('blur', event);
       });
+
+      // Mention is clicked
+      this.editor.on('mention-click', (mentionData) => {
+        this.$emit('mention-click', mentionData);
+      });
     },
 
     getOutput () {

packages/dialtone-vue3/components/rich_text_editor/rich_text_editor_default.story.vue

@@ -33,6 +33,7 @@
     @text-input="$attrs.onTextInput"
     @markdown-input="$attrs.onMarkdownInput"
     @selected-command="$attrs.onSelectedCommand"
+    @mention-click="$attrs.onMentionClick"
     @focus="$attrs.onFocus"
     @enter="$attrs.onEnter"
   />