Merge pull request #21 from chatwoot/feat/img-resize

feat: Adds support for image resize

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/prosemirror-schema",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Schema setup for using prosemirror in chatwoot. Based on 👉 https://github.com/ProseMirror/prosemirror-example-setup/",
   "main": "dist/index.js",
   "scripts": {

src/schema/markdown/parser.js

@@ -47,11 +47,16 @@ export const baseNodesMdToPmMapping = {
   },
   image: {
     node: 'image',
-    getAttrs: (tok) => ({
-      src: tok.attrGet('src'),
-      title: tok.attrGet('title') || null,
-      alt: (tok.children[0] && tok.children[0].content) || null,
-    }),
+    getAttrs: (tok) => {
+      const src = tok.attrGet('src');
+      const heightMatch = src.match(/cw_image_height=(\d+)px/);
+      return {
+        src,
+        title: tok.attrGet('title') || null,
+        alt: (tok.children[0] && tok.children[0].content) || null,
+        height: heightMatch ? `${heightMatch[1]}px` : null
+      };
+    },
   },
 };
 

src/schema/markdown/serializer.js

@@ -48,11 +48,21 @@ export const paragraph = (state, node) => {
   state.closeBlock(node);
 };
 export const image = (state, node) => {
+  let src = state.esc(node.attrs.src);
+  if (node.attrs.height) {
+    const param = `cw_image_height=${node.attrs.height}`;
+    if (src.includes('?')) {
+      src = src.includes('cw_image_height=') ? 
+        src.replace(/cw_image_height=[^&]+/, param) : `${src}&${param}`;
+    } else {
+      src += `?${param}`;
+    }
+  }
   state.write(
     '![' +
       state.esc(node.attrs.alt || '') +
       '](' +
-      state.esc(node.attrs.src) +
+      src +
       (node.attrs.title ? ' ' + state.quote(node.attrs.title) : '') +
       ')'
   );

src/schema/message.js

@@ -11,7 +11,33 @@ export const messageSchema = new Schema({
     code_block: schema.spec.nodes.get('code_block'),
     text: schema.spec.nodes.get('text'),
     hard_break: schema.spec.nodes.get('hard_break'),
-    image: schema.spec.nodes.get('image'),
+    image: {
+      ...schema.spec.nodes.get('image'),
+      attrs: {
+        ...schema.spec.nodes.get('image').attrs,
+        height: {default: null}
+      },
+      parseDOM: [{
+        tag: 'img[src]',
+        getAttrs: dom => ({
+          src: dom.getAttribute('src'),
+          title: dom.getAttribute('title'),
+          alt: dom.getAttribute('alt'),
+          height: parseInt(dom.style.height)
+        })
+      }],
+      toDOM: node => {
+        const attrs = {
+          src: node.attrs.src,
+          alt: node.attrs.alt,
+          height: node.attrs.height
+        };
+        if (node.attrs.height) {
+          attrs.style = `height: ${node.attrs.height}`;
+        }
+        return ["img", attrs];
+      }
+    }, 
     ordered_list: Object.assign(orderedList, {
       content: 'list_item+',
       group: 'block',