feat: markdown either height or width also ok and more units

Author: peterpeterparker

webcomponents/markdown/src/components/workers/utils/markdown-img.utils.ts

@@ -1,14 +1,12 @@
 import marked from 'marked';
 
-// Source: https://github.com/markedjs/marked/issues/339
+// Original source: https://github.com/markedjs/marked/issues/339
+// our version:
 // ![](https://www.nmattia.com/images/autoupdate-notifications.jpg "width:100px,height:20px")
 export function changeImgCreation(renderer: marked.Renderer) {
   renderer.image = (src: string | null, title: string | null, alt: string) => {
-    const getWidthAndHeightStyle = checkForWidthAndHeight(title);
-    if (getWidthAndHeightStyle.length) {
-      return `<deckgo-lazy-img img-src="${sanitize(src)}" img-alt="${sanitize(alt)}" style="${getWidthAndHeightStyle}"></deckgo-lazy-img>`;
-    }
-    return `<deckgo-lazy-img img-src="${sanitize(src)}" img-alt="${sanitize(alt)}"></deckgo-lazy-img>`;
+    const style: string = checkForWidthAndHeight(title);
+    return `<deckgo-lazy-img img-src="${sanitize(src)}" img-alt="${sanitize(alt)}" style="${style}"></deckgo-lazy-img>`;
   };
 }
 
@@ -20,15 +18,21 @@ function sanitize(str: string) {
   });
 }
 
-function checkForWidthAndHeight(title) {
-  const isWidthSet = /width:\d+px/.exec(title);
-  const isHeightSet = /height:\d+px/.exec(title);
+function checkForWidthAndHeight(title): string {
+  const isWidthSet: RegExpExecArray | null = /width:\d+(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%)/.exec(title);
+  const isHeightSet: RegExpExecArray | null = /height:\d+(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%)/.exec(title);
+
   let style: string = '';
-  if(!!(isWidthSet && isHeightSet)){
-    const width = /\d+px/.exec(isWidthSet[0])[0];
-    const height = /\d+px/.exec(isHeightSet[0])[0];
+
+  if (isWidthSet) {
+    const width = /\d+(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%)/.exec(isWidthSet[0])[0];
     style += `--deckgo-lazy-img-width: ${width};`;
+  }
+
+  if (isHeightSet) {
+    const height = /\d+(?:px|em|ex|ch|rem|vw|vh|vmin|vmax|%)/.exec(isHeightSet[0])[0];
     style += `--deckgo-lazy-img-height: ${height};`;
   }
+
   return style;
-};
+}

webcomponents/markdown/src/index.html

@@ -34,7 +34,7 @@ <h1>Editable:</h1>
 [Link](https://deckdeckgo.com/)
 <br/>
 ![](https://www.nmattia.com/images/autoupdate-notifications.jpg "width:100px,height:20px")
-![](https://www.nmattia.com/images/autoupdate-notifications.jpg "width:300px,height:200px")
+![](https://www.nmattia.com/images/autoupdate-notifications.jpg "width:30px")
 ![](https://www.nmattia.com/images/autoupdate-notifications.jpg)
 <br/>
 This is basic paragraph with some **bold text** and also some *italic text*.