@expensify/react-native-live-markdown 0.1.152 → 0.1.153

package/lib/commonjs/web/inputElements/inlineImage.js

@@ -6,27 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.addInlineImagePreview = addInlineImagePreview;
 var _styleUtils = require("../../styleUtils");
 var _loadingIndicator = require("./loadingIndicator");
+const INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS = 300;
 const inlineImageDefaultStyles = {
   position: 'absolute',
   bottom: 0,
   left: 0
 };
+let timeout = null;
 function createImageElement(url, callback) {
-  const imageContainer = document.createElement('span');
-  imageContainer.contentEditable = 'false';
-  imageContainer.setAttribute('data-type', 'inline-container');
-  const img = new Image();
-  imageContainer.appendChild(img);
-  img.contentEditable = 'false';
-  img.onload = () => callback(imageContainer);
-  img.onerror = () => callback(imageContainer);
-  img.src = url;
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  timeout = setTimeout(() => {
+    const imageContainer = document.createElement('span');
+    imageContainer.contentEditable = 'false';
+    imageContainer.setAttribute('data-type', 'inline-container');
+    const img = new Image();
+    imageContainer.appendChild(img);
+    img.contentEditable = 'false';
+    img.onload = () => callback(imageContainer);
+    img.onerror = err => callback(imageContainer, err);
+    img.src = url;
+  }, INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS);
 }
 
 /** Adds already loaded image element from current input content to the tree node */
 function updateImageTreeNode(targetNode, newElement, imageMarginTop = 0) {
   const paddingBottom = `${(0, _styleUtils.parseStringWithUnitToNumber)(newElement.style.height) + imageMarginTop}px`;
-  targetNode.element.appendChild(newElement);
+  targetNode.element.appendChild(newElement.cloneNode(true));
   let currentParent = targetNode.element;
   while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
     currentParent = currentParent.parentElement;
@@ -66,7 +73,7 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
     marginBottom: `${imageMarginBottom}px`,
     paddingBottom: ((_markdownStyle$loadin = markdownStyle.loadingIndicatorContainer) === null || _markdownStyle$loadin === void 0 ? void 0 : _markdownStyle$loadin.height) || ((_markdownStyle$loadin2 = markdownStyle.loadingIndicator) === null || _markdownStyle$loadin2 === void 0 ? void 0 : _markdownStyle$loadin2.height) || !!markdownStyle.loadingIndicator && '30px' || undefined
   });
-  createImageElement(imageHref, imageContainer => {
+  createImageElement(imageHref, (imageContainer, err) => {
     // Verify if the current spinner is for the loaded image. If not, it means that the response came after the user changed the image url
     const currentSpinner = currentInput.querySelector('[data-type="spinner"]');
     // Remove the spinner
@@ -74,11 +81,6 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
       currentSpinner.remove();
     }
     const img = imageContainer.firstChild;
-
-    // Set the image styles
-    Object.assign(imageContainer.style, {
-      ...inlineImageDefaultStyles
-    });
     const {
       minHeight,
       minWidth,
@@ -86,13 +88,25 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
       maxWidth,
       borderRadius
     } = markdownStyle.inlineImage || {};
-    Object.assign(img.style, {
+    const imgStyle = {
       minHeight,
       minWidth,
       maxHeight,
       maxWidth,
       borderRadius
+    };
+
+    // Set the image styles
+    Object.assign(imageContainer.style, {
+      ...inlineImageDefaultStyles,
+      ...(err && {
+        ...imgStyle,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      })
     });
+    Object.assign(img.style, !err && imgStyle);
     targetNode.element.appendChild(imageContainer);
     Object.assign(imageContainer.style, {
       height: `${imageContainer.clientHeight}px`

package/lib/commonjs/web/inputElements/inlineImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["_styleUtils","require","_loadingIndicator","inlineImageDefaultStyles","position","bottom","left","createImageElement","url","callback","imageContainer","document","createElement","contentEditable","setAttribute","img","Image","appendChild","onload","onerror","src","updateImageTreeNode","targetNode","newElement","imageMarginTop","paddingBottom","parseStringWithUnitToNumber","style","height","element","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","inlineImage","marginTop","imageMarginBottom","marginBottom","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","createLoadingIndicator","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","minHeight","minWidth","maxHeight","maxWidth","borderRadius","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}
+{"version":3,"names":["_styleUtils","require","_loadingIndicator","INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS","inlineImageDefaultStyles","position","bottom","left","timeout","createImageElement","url","callback","clearTimeout","setTimeout","imageContainer","document","createElement","contentEditable","setAttribute","img","Image","appendChild","onload","onerror","err","src","updateImageTreeNode","targetNode","newElement","imageMarginTop","paddingBottom","parseStringWithUnitToNumber","style","height","element","cloneNode","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","inlineImage","marginTop","imageMarginBottom","marginBottom","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","createLoadingIndicator","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","minHeight","minWidth","maxHeight","maxWidth","borderRadius","imgStyle","alignItems","justifyContent","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}

package/lib/module/web/inputElements/inlineImage.js

@@ -1,26 +1,33 @@
 import { parseStringWithUnitToNumber } from '../../styleUtils';
 import { createLoadingIndicator } from './loadingIndicator';
+const INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS = 300;
 const inlineImageDefaultStyles = {
   position: 'absolute',
   bottom: 0,
   left: 0
 };
+let timeout = null;
 function createImageElement(url, callback) {
-  const imageContainer = document.createElement('span');
-  imageContainer.contentEditable = 'false';
-  imageContainer.setAttribute('data-type', 'inline-container');
-  const img = new Image();
-  imageContainer.appendChild(img);
-  img.contentEditable = 'false';
-  img.onload = () => callback(imageContainer);
-  img.onerror = () => callback(imageContainer);
-  img.src = url;
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+  timeout = setTimeout(() => {
+    const imageContainer = document.createElement('span');
+    imageContainer.contentEditable = 'false';
+    imageContainer.setAttribute('data-type', 'inline-container');
+    const img = new Image();
+    imageContainer.appendChild(img);
+    img.contentEditable = 'false';
+    img.onload = () => callback(imageContainer);
+    img.onerror = err => callback(imageContainer, err);
+    img.src = url;
+  }, INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS);
 }
 
 /** Adds already loaded image element from current input content to the tree node */
 function updateImageTreeNode(targetNode, newElement, imageMarginTop = 0) {
   const paddingBottom = `${parseStringWithUnitToNumber(newElement.style.height) + imageMarginTop}px`;
-  targetNode.element.appendChild(newElement);
+  targetNode.element.appendChild(newElement.cloneNode(true));
   let currentParent = targetNode.element;
   while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
     currentParent = currentParent.parentElement;
@@ -60,7 +67,7 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
     marginBottom: `${imageMarginBottom}px`,
     paddingBottom: ((_markdownStyle$loadin = markdownStyle.loadingIndicatorContainer) === null || _markdownStyle$loadin === void 0 ? void 0 : _markdownStyle$loadin.height) || ((_markdownStyle$loadin2 = markdownStyle.loadingIndicator) === null || _markdownStyle$loadin2 === void 0 ? void 0 : _markdownStyle$loadin2.height) || !!markdownStyle.loadingIndicator && '30px' || undefined
   });
-  createImageElement(imageHref, imageContainer => {
+  createImageElement(imageHref, (imageContainer, err) => {
     // Verify if the current spinner is for the loaded image. If not, it means that the response came after the user changed the image url
     const currentSpinner = currentInput.querySelector('[data-type="spinner"]');
     // Remove the spinner
@@ -68,11 +75,6 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
       currentSpinner.remove();
     }
     const img = imageContainer.firstChild;
-
-    // Set the image styles
-    Object.assign(imageContainer.style, {
-      ...inlineImageDefaultStyles
-    });
     const {
       minHeight,
       minWidth,
@@ -80,13 +82,25 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
       maxWidth,
       borderRadius
     } = markdownStyle.inlineImage || {};
-    Object.assign(img.style, {
+    const imgStyle = {
       minHeight,
       minWidth,
       maxHeight,
       maxWidth,
       borderRadius
+    };
+
+    // Set the image styles
+    Object.assign(imageContainer.style, {
+      ...inlineImageDefaultStyles,
+      ...(err && {
+        ...imgStyle,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      })
     });
+    Object.assign(img.style, !err && imgStyle);
     targetNode.element.appendChild(imageContainer);
     Object.assign(imageContainer.style, {
       height: `${imageContainer.clientHeight}px`

package/lib/module/web/inputElements/inlineImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["parseStringWithUnitToNumber","createLoadingIndicator","inlineImageDefaultStyles","position","bottom","left","createImageElement","url","callback","imageContainer","document","createElement","contentEditable","setAttribute","img","Image","appendChild","onload","onerror","src","updateImageTreeNode","targetNode","newElement","imageMarginTop","paddingBottom","style","height","element","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","inlineImage","marginTop","imageMarginBottom","marginBottom","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","minHeight","minWidth","maxHeight","maxWidth","borderRadius","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}
+{"version":3,"names":["parseStringWithUnitToNumber","createLoadingIndicator","INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS","inlineImageDefaultStyles","position","bottom","left","timeout","createImageElement","url","callback","clearTimeout","setTimeout","imageContainer","document","createElement","contentEditable","setAttribute","img","Image","appendChild","onload","onerror","err","src","updateImageTreeNode","targetNode","newElement","imageMarginTop","paddingBottom","style","height","element","cloneNode","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","inlineImage","marginTop","imageMarginBottom","marginBottom","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","minHeight","minWidth","maxHeight","maxWidth","borderRadius","imgStyle","alignItems","justifyContent","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}

package/lib/typescript/src/web/inputElements/inlineImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inlineImage.d.ts","sourceRoot":"","sources":["../../../../../src/web/inputElements/inlineImage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAuCjD,mEAAmE;AACnE,iBAAS,qBAAqB,CAAC,YAAY,EAAE,wBAAwB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,aAAa,EAAE,oBAAoB,YAkEtK;AAGD,OAAO,EAAC,qBAAqB,EAAC,CAAC"}
+{"version":3,"file":"inlineImage.d.ts","sourceRoot":"","sources":["../../../../../src/web/inputElements/inlineImage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AAC/F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAErD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAiDjD,mEAAmE;AACnE,iBAAS,qBAAqB,CAAC,YAAY,EAAE,wBAAwB,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,aAAa,EAAE,oBAAoB,YA0EtK;AAGD,OAAO,EAAC,qBAAqB,EAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.152",
+  "version": "0.1.153",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/web/inputElements/inlineImage.ts

@@ -5,30 +5,40 @@ import type {PartialMarkdownStyle} from '../../styleUtils';
 import type {TreeNode} from '../utils/treeUtils';
 import {createLoadingIndicator} from './loadingIndicator';
 
+const INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS = 300;
+
 const inlineImageDefaultStyles = {
   position: 'absolute',
   bottom: 0,
   left: 0,
 };
 
-function createImageElement(url: string, callback: (img: HTMLElement) => void) {
-  const imageContainer = document.createElement('span');
-  imageContainer.contentEditable = 'false';
-  imageContainer.setAttribute('data-type', 'inline-container');
+let timeout: NodeJS.Timeout | null = null;
+
+function createImageElement(url: string, callback: (img: HTMLElement, err?: string | Event) => void) {
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+
+  timeout = setTimeout(() => {
+    const imageContainer = document.createElement('span');
+    imageContainer.contentEditable = 'false';
+    imageContainer.setAttribute('data-type', 'inline-container');
 
-  const img = new Image();
-  imageContainer.appendChild(img);
+    const img = new Image();
+    imageContainer.appendChild(img);
 
-  img.contentEditable = 'false';
-  img.onload = () => callback(imageContainer);
-  img.onerror = () => callback(imageContainer);
-  img.src = url;
+    img.contentEditable = 'false';
+    img.onload = () => callback(imageContainer);
+    img.onerror = (err) => callback(imageContainer, err);
+    img.src = url;
+  }, INLINE_IMAGE_PREVIEW_DEBOUNCE_TIME_MS);
 }
 
 /** Adds already loaded image element from current input content to the tree node */
 function updateImageTreeNode(targetNode: TreeNode, newElement: HTMLMarkdownElement, imageMarginTop = 0) {
   const paddingBottom = `${parseStringWithUnitToNumber(newElement.style.height) + imageMarginTop}px`;
-  targetNode.element.appendChild(newElement);
+  targetNode.element.appendChild(newElement.cloneNode(true));
 
   let currentParent = targetNode.element;
   while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
@@ -56,6 +66,7 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
   // Prevents from image flickering and layout jumps
   const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
   const loadedImageContainer = alreadyLoadedPreview?.parentElement;
+
   if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {
     return updateImageTreeNode(targetNode, loadedImageContainer as HTMLMarkdownElement, imageMarginTop);
   }
@@ -72,7 +83,7 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
     paddingBottom: markdownStyle.loadingIndicatorContainer?.height || markdownStyle.loadingIndicator?.height || (!!markdownStyle.loadingIndicator && '30px') || undefined,
   });
 
-  createImageElement(imageHref, (imageContainer) => {
+  createImageElement(imageHref, (imageContainer, err) => {
     // Verify if the current spinner is for the loaded image. If not, it means that the response came after the user changed the image url
     const currentSpinner = currentInput.querySelector('[data-type="spinner"]');
     // Remove the spinner
@@ -81,21 +92,28 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
     }
 
     const img = imageContainer.firstChild as HTMLImageElement;
-
-    // Set the image styles
-    Object.assign(imageContainer.style, {
-      ...inlineImageDefaultStyles,
-    });
-
     const {minHeight, minWidth, maxHeight, maxWidth, borderRadius} = markdownStyle.inlineImage || {};
-    Object.assign(img.style, {
+    const imgStyle = {
       minHeight,
       minWidth,
       maxHeight,
       maxWidth,
       borderRadius,
+    };
+
+    // Set the image styles
+    Object.assign(imageContainer.style, {
+      ...inlineImageDefaultStyles,
+      ...(err && {
+        ...imgStyle,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }),
     });
 
+    Object.assign(img.style, !err && imgStyle);
+
     targetNode.element.appendChild(imageContainer);
 
     Object.assign(imageContainer.style, {