feat: Adds support for image resize in the message bubble (#8182)

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -446,7 +446,7 @@ export default {
             this.onFocus();
           },
           click: () => {
-            // this.isEditorMouseFocusedOnAnImage(); Enable it when the backend supports for message resize is done.
+            this.isEditorMouseFocusedOnAnImage();
           },
           blur: () => {
             this.onBlur();
@@ -674,7 +674,7 @@ export default {
         () => this.resetTyping(),
         TYPING_INDICATOR_IDLE_TIME
       );
-      // this.updateImgToolbarOnDelete(); Enable it when the backend supports for message resize is done.
+      this.updateImgToolbarOnDelete();
     },
     onKeydown(event) {
       if (this.isEnterToSendEnabled()) {

app/javascript/shared/helpers/MessageFormatter.js

@@ -1,5 +1,35 @@
 import mila from 'markdown-it-link-attributes';
 import mentionPlugin from './markdownIt/link';
+
+const setImageHeight = inlineToken => {
+  const imgSrc = inlineToken.attrGet('src');
+  if (!imgSrc) return;
+  const url = new URL(imgSrc);
+  const height = url.searchParams.get('cw_image_height');
+  if (!height) return;
+  inlineToken.attrSet('style', `height: ${height};`);
+};
+
+const processInlineToken = blockToken => {
+  blockToken.children.forEach(inlineToken => {
+    if (inlineToken.type === 'image') {
+      setImageHeight(inlineToken);
+    }
+  });
+};
+
+const imgResizeManager = md => {
+  // Custom rule for image resize in markdown
+  // If the image url has a query param cw_image_height, then add a style attribute to the image
+  md.core.ruler.after('inline', 'add-image-height', state => {
+    state.tokens.forEach(blockToken => {
+      if (blockToken.type === 'inline') {
+        processInlineToken(blockToken);
+      }
+    });
+  });
+};
+
 const md = require('markdown-it')({
   html: false,
   xhtmlOut: true,
@@ -11,6 +41,7 @@ const md = require('markdown-it')({
   maxNesting: 20,
 })
   .use(mentionPlugin)
+  .use(imgResizeManager)
   .use(mila, {
     attrs: {
       class: 'link',

app/javascript/shared/helpers/specs/MessageFormatter.spec.js

@@ -28,6 +28,32 @@ describe('#MessageFormatter', () => {
     });
   });
 
+  describe('content with image and has "cw_image_height" query at the end of URL', () => {
+    it('should set image height correctly', () => {
+      const message =
+        'Chatwoot is an opensource tool. ![](http://chatwoot.com/chatwoot.png?cw_image_height=24px)';
+      expect(new MessageFormatter(message).formattedMessage).toMatch(
+        '<p>Chatwoot is an opensource tool. <img src="http://chatwoot.com/chatwoot.png?cw_image_height=24px" alt="" style="height: 24px;" /></p>'
+      );
+    });
+
+    it('should set image height correctly if its original size', () => {
+      const message =
+        'Chatwoot is an opensource tool. ![](http://chatwoot.com/chatwoot.png?cw_image_height=auto)';
+      expect(new MessageFormatter(message).formattedMessage).toMatch(
+        '<p>Chatwoot is an opensource tool. <img src="http://chatwoot.com/chatwoot.png?cw_image_height=auto" alt="" style="height: auto;" /></p>'
+      );
+    });
+
+    it('should not set height', () => {
+      const message =
+        'Chatwoot is an opensource tool. ![](http://chatwoot.com/chatwoot.png)';
+      expect(new MessageFormatter(message).formattedMessage).toMatch(
+        '<p>Chatwoot is an opensource tool. <img src="http://chatwoot.com/chatwoot.png" alt="" /></p>'
+      );
+    });
+  });
+
   describe('tweets', () => {
     it('should return the same string if not tags or @mentions', () => {
       const message = 'Chatwoot is an opensource tool';