fix(rich-text-editor): NO-JIRA add channelKey (#1031)

Author: braddialpad

packages/dialtone-vue/components/rich_text_editor/channel_suggestion.js

@@ -5,19 +5,23 @@ export default {
       {
         id: 'dialpad',
         name: 'dialpad',
+        channelKey: 'ch-001',
       },
       {
         id: 'dialtone',
         name: 'dialtone',
+        channelKey: 'ch-002',
       },
       {
         id: 'dialtone-vue',
         name: 'dialtone-vue',
+        channelKey: 'ch-003',
       },
       {
         id: 'dialtone-internal',
         name: 'dialtone-internal',
         locked: true,
+        channelKey: 'ch-004',
       },
     ];
 

packages/dialtone-vue/components/rich_text_editor/extensions/channels/ChannelComponent.vue

@@ -55,6 +55,7 @@ export default {
         name: this.$props.node.attrs.name,
         id: this.$props.node.attrs.id,
         locked: this.$props.node.attrs.locked,
+        channelKey: this.$props.node.attrs.channelKey,
       };
       this.$props.editor.emit('channel-click', channelData);
     },

packages/dialtone-vue/components/rich_text_editor/extensions/channels/channel.js

@@ -32,6 +32,9 @@ export const ChannelPlugin = Mention.extend({
       locked: {
         default: false,
       },
+      channelKey: {
+        default: '',
+      },
     };
   },
 

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

@@ -128,7 +128,7 @@ export default {
           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 });
+          this.command({ name: item.name, id: item.id, locked: item.locked, channelKey: item.channelKey });
           break;
         case 'slash-command':
           this.command({ command: item.command });

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

@@ -352,7 +352,7 @@ describe('DtRichTextEditor tests', () => {
               { type: 'text', text: ' channel' },
             ]);
             const output = jsonToMarkdownConverter.convertToMarkdown(jsonInput);
-            expect(output).toBe('Check out <!-- @channel: {"id": "general", "name": "general", "locked": "false"} --> channel\n');
+            expect(output).toBe('Check out <!-- @channel: {"id": "general", "channelKey": "", "name": "general", "locked": "false"} --> channel\n');
           });
 
           it('should convert locked channels to markdown comments correctly', async () => {
@@ -369,7 +369,25 @@ describe('DtRichTextEditor tests', () => {
               { type: 'text', text: ' channel' },
             ]);
             const output = jsonToMarkdownConverter.convertToMarkdown(jsonInput);
-            expect(output).toBe('Check out <!-- @channel: {"id": "dialtone-internal", "name": "dialtone-internal", "locked": "true"} --> channel\n');
+            expect(output).toBe('Check out <!-- @channel: {"id": "dialtone-internal", "channelKey": "", "name": "dialtone-internal", "locked": "true"} --> channel\n');
+          });
+
+          it('should convert channels with channelKey to markdown comments correctly', async () => {
+            const jsonInput = jsonInputBase([
+              { type: 'text', text: 'Check out ' },
+              {
+                type: 'channel',
+                attrs: {
+                  id: 'general',
+                  name: 'general',
+                  locked: false,
+                  channelKey: 'channel-456',
+                },
+              },
+              { type: 'text', text: ' channel' },
+            ]);
+            const output = jsonToMarkdownConverter.convertToMarkdown(jsonInput);
+            expect(output).toBe('Check out <!-- @channel: {"id": "general", "channelKey": "channel-456", "name": "general", "locked": "false"} --> channel\n');
           });
         });
       });
@@ -639,6 +657,7 @@ describe('DtRichTextEditor tests', () => {
             id: 'general',
             name: 'general',
             locked: false,
+            channelKey: 'ch-123',
           };
 
           await wrapper.setProps({

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

@@ -265,7 +265,7 @@ export default {
      * The only required key is the items function which is used to query the channels for suggestion.
      * items({ query }) => { return [ChannelObject]; }
      * ChannelObject format:
-     * { name: string, id: string, locked: boolean }
+     * { name: string, id: string, locked: boolean, channelKey?: string }
      *
      * When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
      */
@@ -611,7 +611,8 @@ export default {
           const channelName = node.attrs?.name || '';
           const channelId = node.attrs?.id || '';
           const locked = node.attrs?.locked.toString() || '';
-          return `<!-- @channel: {"id": "${channelId}", "name": "${channelName}", "locked": "${locked}"} -->`;
+          const channelKey = node.attrs?.channelKey || '';
+          return `<!-- @channel: {"id": "${channelId}", "channelKey": "${channelKey}", "name": "${channelName}", "locked": "${locked}"} -->`;
         },
 
         processSlashCommandsNode (node) {