diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue index 2a9fb98d3..33bca2e68 100644 --- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue +++ b/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()) { diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js index 59e1173ac..6e4ade3ff 100644 --- a/app/javascript/shared/helpers/MessageFormatter.js +++ b/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', diff --git a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js b/app/javascript/shared/helpers/specs/MessageFormatter.spec.js index 60c875c8a..47760f7a8 100644 --- a/app/javascript/shared/helpers/specs/MessageFormatter.spec.js +++ b/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( + '

Chatwoot is an opensource tool.

' + ); + }); + + 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( + '

Chatwoot is an opensource tool.

' + ); + }); + + it('should not set height', () => { + const message = + 'Chatwoot is an opensource tool. ![](http://chatwoot.com/chatwoot.png)'; + expect(new MessageFormatter(message).formattedMessage).toMatch( + '

Chatwoot is an opensource tool.

' + ); + }); + }); + describe('tweets', () => { it('should return the same string if not tags or @mentions', () => { const message = 'Chatwoot is an opensource tool';