feat(rich-text-editor): DLT-2237 add image extension to editor (#589)

Co-authored-by: Eugenia Mariotti <eugenia.mariotti@dialpad.com>

package.json

@@ -106,6 +106,7 @@
     "@tiptap/extension-code-block": "^2.6.6",
     "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-hard-break": "^2.6.6",
+    "@tiptap/extension-image": "^2.6.6",
     "@tiptap/extension-history": "^2.6.6",
     "@tiptap/extension-italic": "^2.6.6",
     "@tiptap/extension-link": "^2.6.6",

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

@@ -19,6 +19,7 @@ import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
+import Image from '@tiptap/extension-image';
 import Italic from '@tiptap/extension-italic';
 import TipTapLink from '@tiptap/extension-link';
 import ListItem from '@tiptap/extension-list-item';
@@ -282,6 +283,14 @@ export default {
       default: true,
     },
 
+    /**
+     * Whether the input allows inline images to be rendered.
+     */
+    allowInlineImages: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * Additional TipTap extensions to be added to the editor.
      */
@@ -447,6 +456,10 @@ export default {
         }));
       }
 
+      if (this.allowInlineImages) {
+        extensions.push(Image);
+      }
+
       if (this.additionalExtensions.length) {
         extensions.push(...this.additionalExtensions);
       }

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

@@ -164,6 +164,7 @@
         :auto-focus="autoFocus"
         :placeholder="placeholder"
         :allow-line-breaks="true"
+        :allow-inline-images="true"
         :link="true"
         v-bind="$attrs"
         @focus="onFocus"

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

@@ -15,6 +15,7 @@ import Blockquote from '@tiptap/extension-blockquote';
 import CodeBlock from '@tiptap/extension-code-block';
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
+import Image from '@tiptap/extension-image';
 import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
 import Bold from '@tiptap/extension-bold';
@@ -282,6 +283,14 @@ export default {
       default: true,
     },
 
+    /**
+     * Whether the input allows inline images to be rendered.
+     */
+    allowInlineImages: {
+      type: Boolean,
+      default: false,
+    },
+
     /**
      * Additional TipTap extensions to be added to the editor.
      */
@@ -447,6 +456,10 @@ export default {
         }));
       }
 
+      if (this.allowInlineImages) {
+        extensions.push(Image);
+      }
+
       if (this.additionalExtensions.length) {
         extensions.push(...this.additionalExtensions);
       }

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

@@ -165,6 +165,7 @@
         :auto-focus="autoFocus"
         :placeholder="placeholder"
         :allow-line-breaks="true"
+        :allow-inline-images="true"
         :link="true"
         v-bind="$attrs"
         @focus="onFocus"