DLT-2237: add image extension to editor

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: true,
+    },
+
     /**
      * 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/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: true,
+    },
+
     /**
      * 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);
       }