DLT-2244: add ability resize images editor

Author: emariotti-dialpad

packages/dialtone-vue2/components/rich_text_editor/extensions/image/image.js

@@ -0,0 +1,28 @@
+import Image from '@tiptap/extension-image';
+
+export const ConfigurableImage = Image.extend({
+  name: 'ConfigurableImage',
+
+  addAttributes () {
+    return {
+      src: {
+        default: '',
+      },
+      alt: {
+        default: undefined,
+      },
+      title: {
+        default: undefined,
+      },
+      width: {
+        default: undefined,
+      },
+      height: {
+        default: undefined,
+      },
+      style: {
+        default: undefined,
+      },
+    };
+  },
+}).configure({ inline: true });

packages/dialtone-vue2/components/rich_text_editor/extensions/image/index.js

@@ -0,0 +1,3 @@
+import { ConfigurableImage } from './image';
+
+export default ConfigurableImage;

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

@@ -20,7 +20,6 @@ import Placeholder from '@tiptap/extension-placeholder';
 import HardBreak from '@tiptap/extension-hard-break';
 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';
@@ -32,6 +31,7 @@ import TextAlign from '@tiptap/extension-text-align';
 import History from '@tiptap/extension-history';
 import Emoji from './extensions/emoji';
 import CustomLink from './extensions/custom_link';
+import ConfigurableImage from './extensions/image';
 import { MentionPlugin } from './extensions/mentions/mention';
 import { ChannelPlugin } from './extensions/channels/channel';
 import { SlashCommandPlugin } from './extensions/slash_command/slash_command';
@@ -465,7 +465,7 @@ export default {
       }
 
       if (this.allowInlineImages) {
-        extensions.push(Image.configure({ inline: true }));
+        extensions.push(ConfigurableImage);
       }
 
       if (this.additionalExtensions.length) {

packages/dialtone-vue3/components/rich_text_editor/extensions/image/image.js

@@ -0,0 +1,28 @@
+import Image from '@tiptap/extension-image';
+
+export const ConfigurableImage = Image.extend({
+  name: 'ConfigurableImage',
+
+  addAttributes () {
+    return {
+      src: {
+        default: '',
+      },
+      alt: {
+        default: undefined,
+      },
+      title: {
+        default: undefined,
+      },
+      width: {
+        default: undefined,
+      },
+      height: {
+        default: undefined,
+      },
+      style: {
+        default: undefined,
+      },
+    };
+  },
+}).configure({ inline: true });

packages/dialtone-vue3/components/rich_text_editor/extensions/image/index.js

@@ -0,0 +1,3 @@
+import { ConfigurableImage } from './image';
+
+export default ConfigurableImage;

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

@@ -16,7 +16,6 @@ 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';
@@ -32,6 +31,7 @@ import TextAlign from '@tiptap/extension-text-align';
 import History from '@tiptap/extension-history';
 import Emoji from './extensions/emoji';
 import CustomLink from './extensions/custom_link';
+import ConfigurableImage from './extensions/image';
 import { MentionPlugin } from './extensions/mentions/mention';
 import { ChannelPlugin } from './extensions/channels/channel';
 import { SlashCommandPlugin } from './extensions/slash_command/slash_command';
@@ -465,7 +465,7 @@ export default {
       }
 
       if (this.allowInlineImages) {
-        extensions.push(Image.configure({ inline: true }));
+        extensions.push(ConfigurableImage);
       }
 
       if (this.additionalExtensions.length) {