feat(editor): DP-130987 insert inline image through editor (#692)

Author: sanjeevdialpad

packages/dialtone-vue2/recipes/conversation_view/editor/editor.stories.js

@@ -44,6 +44,12 @@ export const argTypesData = {
       disable: true,
     },
   },
+
+  onInlineImageClick: {
+    table: {
+      disable: true,
+    },
+  },
 };
 
 // Set default values at the story level here.
@@ -56,6 +62,7 @@ export const argsData = {
   onBlur: action('blur'),
   onInput: action('input'),
   onQuickRepliesClick: action('quick-replies-click'),
+  onInlineImageClick: action('inline-image-click'),
 };
 
 // Story Collection

packages/dialtone-vue2/recipes/conversation_view/editor/editor.vue

@@ -202,6 +202,7 @@ import {
   DtIconAlignRight,
   DtIconBold,
   DtIconCodeBlock,
+  DtIconImage,
   DtIconItalic,
   DtIconLightningBolt,
   DtIconLink2,
@@ -236,6 +237,7 @@ export default {
     DtIconQuote,
     DtIconCodeBlock,
     DtIconLink2,
+    DtIconImage,
   },
 
   inheritAttrs: false,
@@ -452,6 +454,14 @@ export default {
       default: true,
     },
 
+    /**
+     * Show button to add an inline image
+     */
+    showInlineImageButton: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * Show add link default config.
      */
@@ -501,6 +511,12 @@ export default {
      * @event quick-replies-click
      */
     'quick-replies-click',
+
+    /**
+     * Emit when inline image button is clicked
+     * @event inline-image-click
+     */
+    'inline-image-click',
   ],
 
   data () {
@@ -680,6 +696,14 @@ export default {
           tooltipMessage: 'Code',
           onClick: this.onCodeBlockToggle,
         },
+        {
+          showBtn: this.showInlineImageButton,
+          selector: 'image',
+          icon: DtIconImage,
+          dataQA: 'dt-recipe-editor-inline-image-btn',
+          tooltipMessage: 'Image',
+          onClick: this.onInsertInlineImageClick,
+        },
       ].filter(button => button.showBtn);
     },
 
@@ -815,6 +839,14 @@ export default {
       this.$emit('quick-replies-click');
     },
 
+    onInsertInlineImageClick () {
+      this.$emit('inline-image-click');
+    },
+
+    insertInlineImage (imageUrl) {
+      this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();
+    },
+
     onBlockquoteToggle () {
       this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();
     },

packages/dialtone-vue2/recipes/conversation_view/editor/editor_default.story.vue

@@ -28,11 +28,13 @@
       :show-align-justify-button="$attrs.showAlignJustifyButton"
       :show-quote-button="$attrs.showQuoteButton"
       :show-quick-replies-button="$attrs.showQuickRepliesButton"
+      :show-inline-image-button="$attrs.showInlineImageButton"
       :show-code-block-button="$attrs.showCodeBlockButton"
       @focus="$attrs.onFocus"
       @blur="$attrs.onBlur"
       @input="$attrs.onInput"
       @quick-replies-click="$attrs.onQuickRepliesClick"
+      @inline-image-click="$attrs.onInlineImageClick"
     />
     <p><strong>Editor content is:</strong></p>
     <span>{{ value }}</span>

packages/dialtone-vue3/recipes/conversation_view/editor/editor.stories.js

@@ -44,6 +44,12 @@ export const argTypesData = {
       disable: true,
     },
   },
+
+  onInlineImageClick: {
+    table: {
+      disable: true,
+    },
+  },
 };
 
 // Set default values at the story level here.
@@ -56,6 +62,7 @@ export const argsData = {
   onBlur: action('blur'),
   onInput: action('input'),
   onQuickRepliesClick: action('quick-replies-click'),
+  onInlineImageClick: action('inline-image-click'),
 };
 
 // Story Collection

packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue

@@ -203,6 +203,7 @@ import {
   DtIconAlignRight,
   DtIconBold,
   DtIconCodeBlock,
+  DtIconImage,
   DtIconItalic,
   DtIconLightningBolt,
   DtIconLink2,
@@ -238,6 +239,7 @@ export default {
     DtIconQuote,
     DtIconCodeBlock,
     DtIconLink2,
+    DtIconImage,
   },
 
   mixins: [],
@@ -456,6 +458,14 @@ export default {
       default: true,
     },
 
+    /**
+     * Show button to add an inline image
+     */
+    showInlineImageButton: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * Show add link default config.
      */
@@ -505,6 +515,12 @@ export default {
      * @event quick-replies-click
      */
     'quick-replies-click',
+
+    /**
+     * Emit when inline image button is clicked
+     * @event inline-image-click
+     */
+    'inline-image-click',
   ],
 
   data () {
@@ -684,6 +700,15 @@ export default {
           tooltipMessage: 'Code',
           onClick: this.onCodeBlockToggle,
         },
+        {
+          showBtn: this.showInlineImageButton,
+          selector: 'image',
+          icon: DtIconImage,
+          dataQA: 'dt-recipe-editor-inline-image-btn',
+          tooltipMessage: 'Image',
+          // Handle getting image
+          onClick: this.onInsertInlineImageClick,
+        },
       ].filter(button => button.showBtn);
     },
 
@@ -822,6 +847,14 @@ export default {
       this.$emit('quick-replies-click');
     },
 
+    onInsertInlineImageClick () {
+      this.$emit('inline-image-click');
+    },
+
+    insertInlineImage (imageUrl) {
+      this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: imageUrl }).run();
+    },
+
     insertInMessageBody (messageContent) {
       this.$refs.richTextEditor?.editor.chain().focus().insertContent(messageContent).run();
     },

packages/dialtone-vue3/recipes/conversation_view/editor/editor_default.story.vue

@@ -29,10 +29,12 @@
       :show-quote-button="$attrs.showQuoteButton"
       :show-quick-replies-button="$attrs.showQuickRepliesButton"
       :show-code-block-button="$attrs.showCodeBlockButton"
+      :show-inline-image-button="$attrs.showInlineImageButton"
       @focus="$attrs.onFocus"
       @blur="$attrs.onBlur"
       @input="$attrs.onInput"
       @quick-replies-click="$attrs.onQuickRepliesClick"
+      @inline-image-click="$attrs.onInlineImageClick"
     />
     <p><strong>Editor content is:</strong></p>
     <span>{{ value }}</span>