@expensify/react-native-live-markdown 0.1.150 → 0.1.151

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/lib/commonjs/MarkdownTextInputDecoratorViewNativeComponent.js.map +1 -1
  2. package/lib/commonjs/styleUtils.js +4 -1
  3. package/lib/commonjs/styleUtils.js.map +1 -1
  4. package/lib/commonjs/web/inputElements/inlineImage.js +21 -16
  5. package/lib/commonjs/web/inputElements/inlineImage.js.map +1 -1
  6. package/lib/module/MarkdownTextInputDecoratorViewNativeComponent.js.map +1 -1
  7. package/lib/module/styleUtils.js +4 -1
  8. package/lib/module/styleUtils.js.map +1 -1
  9. package/lib/module/web/inputElements/inlineImage.js +21 -16
  10. package/lib/module/web/inputElements/inlineImage.js.map +1 -1
  11. package/lib/typescript/src/MarkdownTextInputDecoratorViewNativeComponent.d.ts +3 -0
  12. package/lib/typescript/src/MarkdownTextInputDecoratorViewNativeComponent.d.ts.map +1 -1
  13. package/lib/typescript/src/styleUtils.d.ts.map +1 -1
  14. package/package.json +1 -1
  15. package/src/MarkdownTextInputDecoratorViewNativeComponent.ts +3 -0
  16. package/src/styleUtils.ts +3 -0
  17. package/src/web/inputElements/inlineImage.ts +14 -14
package/lib/commonjs/MarkdownTextInputDecoratorViewNativeComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","obj","__esModule","default","_default","exports","codegenNativeComponent","interfaceOnly"],"sourceRoot":"../../src","sources":["MarkdownTextInputDecoratorViewNativeComponent.ts"],"mappings":";;;;;;AAGA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAwE9E,IAAAG,+BAAsB,EAAc,gCAAgC,EAAE;EACnFC,aAAa,EAAE;AACjB,CAAC,CAAC"}
1
+ {"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","obj","__esModule","default","_default","exports","codegenNativeComponent","interfaceOnly"],"sourceRoot":"../../src","sources":["MarkdownTextInputDecoratorViewNativeComponent.ts"],"mappings":";;;;;;AAGA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GA2E9E,IAAAG,+BAAsB,EAAc,gCAAgC,EAAE;EACnFC,aAAa,EAAE;AACjB,CAAC,CAAC"}
package/lib/commonjs/styleUtils.js CHANGED
@@ -55,10 +55,13 @@ function makeDefaultMarkdownStyle() {
55
55
  backgroundColor: 'pink'
56
56
  },
57
57
  inlineImage: {
58
+ minWidth: 50,
59
+ minHeight: 50,
58
60
  maxWidth: 150,
59
61
  maxHeight: 150,
60
62
  marginTop: 5,
61
- marginBottom: 0
63
+ marginBottom: 0,
64
+ borderRadius: 5
62
65
  },
63
66
  loadingIndicator: {
64
67
  primaryColor: 'gray',
package/lib/commonjs/styleUtils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_reactNative","require","FONT_FAMILY_MONOSPACE","Platform","select","ios","default","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","fontFamily","backgroundColor","pre","mentionHere","mentionUser","mentionReport","inlineImage","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAOA,MAAMC,qBAAqB,GAAGC,qBAAQ,CAACC,MAAM,CAAC;EAC5CC,GAAG,EAAE,SAAS;EACdC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,SAASC,wBAAwBA,CAAA,EAAkB;EACjD,OAAO;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJD,KAAK,EAAE;IACT,CAAC;IACDE,EAAE,EAAE;MACFC,QAAQ,EAAE;IACZ,CAAC;IACDC,KAAK,EAAE;MACLD,QAAQ,EAAE;IACZ,CAAC;IACDE,UAAU,EAAE;MACVC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE,CAAC;MACdC,UAAU,EAAE,CAAC;MACbC,WAAW,EAAE;IACf,CAAC;IACDC,IAAI,EAAE;MACJC,UAAU,EAAElB,qBAAqB;MACjCU,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDC,GAAG,EAAE;MACHF,UAAU,EAAElB,qBAAqB;MACjCU,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDE,WAAW,EAAE;MACXd,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDG,WAAW,EAAE;MACXf,KAAK,EAAE,MAAM;MACbY,eAAe,EAAE;IACnB,CAAC;IACDI,aAAa,EAAE;MACbhB,KAAK,EAAE,KAAK;MACZY,eAAe,EAAE;IACnB,CAAC;IACDK,WAAW,EAAE;MACXC,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,YAAY,EAAE;IAChB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;IAClB;EACF,CAAC;AACH;AAEA,SAASC,6BAA6BA,CAACC,KAAuC,EAAiB;EAC7F,MAAMC,MAAM,GAAG7B,wBAAwB,CAAC,CAAC;EAEzC,IAAI4B,KAAK,KAAKE,SAAS,EAAE;IACvBC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAEC,GAAG,IAAK;MAClC,IAAI,EAAEA,GAAG,IAAIL,MAAM,CAAC,EAAE;QACpB;MACF;MAEA,MAAMM,WAAW,GAAGN,MAAM,CAACK,GAAG,CAAwB;MACtD,IAAIC,WAAW,EAAE;QACfJ,MAAM,CAACK,MAAM,CAACD,WAAW,EAAEP,KAAK,CAACM,GAAG,CAAwB,CAAC;MAC/D;IACF,CAAC,CAAC;EACJ;EAEA,OAAOL,MAAM;AACf;AAEA,SAASQ,2BAA2BA,CAACC,KAAoB,EAAU;EACjE,OAAOA,KAAK,GAAGC,QAAQ,CAACD,KAAK,CAACE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;AAC1D"}
1
+ {"version":3,"names":["_reactNative","require","FONT_FAMILY_MONOSPACE","Platform","select","ios","default","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","fontFamily","backgroundColor","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","borderRadius","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAOA,MAAMC,qBAAqB,GAAGC,qBAAQ,CAACC,MAAM,CAAC;EAC5CC,GAAG,EAAE,SAAS;EACdC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,SAASC,wBAAwBA,CAAA,EAAkB;EACjD,OAAO;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJD,KAAK,EAAE;IACT,CAAC;IACDE,EAAE,EAAE;MACFC,QAAQ,EAAE;IACZ,CAAC;IACDC,KAAK,EAAE;MACLD,QAAQ,EAAE;IACZ,CAAC;IACDE,UAAU,EAAE;MACVC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE,CAAC;MACdC,UAAU,EAAE,CAAC;MACbC,WAAW,EAAE;IACf,CAAC;IACDC,IAAI,EAAE;MACJC,UAAU,EAAElB,qBAAqB;MACjCU,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDC,GAAG,EAAE;MACHF,UAAU,EAAElB,qBAAqB;MACjCU,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDE,WAAW,EAAE;MACXd,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDG,WAAW,EAAE;MACXf,KAAK,EAAE,MAAM;MACbY,eAAe,EAAE;IACnB,CAAC;IACDI,aAAa,EAAE;MACbhB,KAAK,EAAE,KAAK;MACZY,eAAe,EAAE;IACnB,CAAC;IACDK,WAAW,EAAE;MACXC,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,EAAE;MACbC,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAChB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;IAClB;EACF,CAAC;AACH;AAEA,SAASC,6BAA6BA,CAACC,KAAuC,EAAiB;EAC7F,MAAMC,MAAM,GAAGhC,wBAAwB,CAAC,CAAC;EAEzC,IAAI+B,KAAK,KAAKE,SAAS,EAAE;IACvBC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAEC,GAAG,IAAK;MAClC,IAAI,EAAEA,GAAG,IAAIL,MAAM,CAAC,EAAE;QACpB;MACF;MAEA,MAAMM,WAAW,GAAGN,MAAM,CAACK,GAAG,CAAwB;MACtD,IAAIC,WAAW,EAAE;QACfJ,MAAM,CAACK,MAAM,CAACD,WAAW,EAAEP,KAAK,CAACM,GAAG,CAAwB,CAAC;MAC/D;IACF,CAAC,CAAC;EACJ;EAEA,OAAOL,MAAM;AACf;AAEA,SAASQ,2BAA2BA,CAACC,KAAoB,EAAU;EACjE,OAAOA,KAAK,GAAGC,QAAQ,CAACD,KAAK,CAACE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;AAC1D"}
package/lib/commonjs/web/inputElements/inlineImage.js CHANGED
@@ -24,8 +24,8 @@ function createImageElement(url, callback) {
24
24
  }
25
25
 
26
26
  /** Adds already loaded image element from current input content to the tree node */
27
- function updateImageTreeNode(targetNode, newElement) {
28
- const paddingBottom = `${newElement.style.height}`;
27
+ function updateImageTreeNode(targetNode, newElement, imageMarginTop = 0) {
28
+ const paddingBottom = `${(0, _styleUtils.parseStringWithUnitToNumber)(newElement.style.height) + imageMarginTop}px`;
29
29
  targetNode.element.appendChild(newElement);
30
30
  let currentParent = targetNode.element;
31
31
  while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
@@ -39,19 +39,21 @@ function updateImageTreeNode(targetNode, newElement) {
39
39
 
40
40
  /** The main function that adds inline image preview to the node */
41
41
  function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownStyle) {
42
- var _markdownStyle$inline, _markdownStyle$inline2, _markdownStyle$inline3, _markdownStyle$inline4, _markdownStyle$loadin, _markdownStyle$loadin2;
42
+ var _markdownStyle$inline, _markdownStyle$inline2, _markdownStyle$loadin, _markdownStyle$loadin2;
43
43
  const linkRange = ranges.find(r => r.type === 'link');
44
44
  let imageHref = '';
45
45
  if (linkRange) {
46
46
  imageHref = text.substring(linkRange.start, linkRange.start + linkRange.length);
47
47
  }
48
+ const imageMarginTop = (0, _styleUtils.parseStringWithUnitToNumber)(`${(_markdownStyle$inline = markdownStyle.inlineImage) === null || _markdownStyle$inline === void 0 ? void 0 : _markdownStyle$inline.marginTop}`);
49
+ const imageMarginBottom = (0, _styleUtils.parseStringWithUnitToNumber)(`${(_markdownStyle$inline2 = markdownStyle.inlineImage) === null || _markdownStyle$inline2 === void 0 ? void 0 : _markdownStyle$inline2.marginBottom}`);
48
50
 
49
51
  // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
50
52
  // Prevents from image flickering and layout jumps
51
53
  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
52
54
  const loadedImageContainer = alreadyLoadedPreview === null || alreadyLoadedPreview === void 0 ? void 0 : alreadyLoadedPreview.parentElement;
53
55
  if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {
54
- return updateImageTreeNode(targetNode, loadedImageContainer);
56
+ return updateImageTreeNode(targetNode, loadedImageContainer, imageMarginTop);
55
57
  }
56
58
 
57
59
  // Add a loading spinner
@@ -59,10 +61,6 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
59
61
  if (spinner) {
60
62
  targetNode.element.appendChild(spinner);
61
63
  }
62
- const maxWidth = (_markdownStyle$inline = markdownStyle.inlineImage) === null || _markdownStyle$inline === void 0 ? void 0 : _markdownStyle$inline.maxWidth;
63
- const maxHeight = (_markdownStyle$inline2 = markdownStyle.inlineImage) === null || _markdownStyle$inline2 === void 0 ? void 0 : _markdownStyle$inline2.maxHeight;
64
- const imageMarginTop = (0, _styleUtils.parseStringWithUnitToNumber)(`${(_markdownStyle$inline3 = markdownStyle.inlineImage) === null || _markdownStyle$inline3 === void 0 ? void 0 : _markdownStyle$inline3.marginTop}`);
65
- const imageMarginBottom = (0, _styleUtils.parseStringWithUnitToNumber)(`${(_markdownStyle$inline4 = markdownStyle.inlineImage) === null || _markdownStyle$inline4 === void 0 ? void 0 : _markdownStyle$inline4.marginBottom}`);
66
64
  Object.assign(targetNode.element.style, {
67
65
  display: 'block',
68
66
  marginBottom: `${imageMarginBottom}px`,
@@ -75,26 +73,33 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
75
73
  if (currentSpinner) {
76
74
  currentSpinner.remove();
77
75
  }
76
+ const img = imageContainer.firstChild;
78
77
 
79
78
  // Set the image styles
80
79
  Object.assign(imageContainer.style, {
81
- ...inlineImageDefaultStyles,
82
- maxHeight,
83
- maxWidth
80
+ ...inlineImageDefaultStyles
84
81
  });
85
- const img = imageContainer.firstChild;
82
+ const {
83
+ minHeight,
84
+ minWidth,
85
+ maxHeight,
86
+ maxWidth,
87
+ borderRadius
88
+ } = markdownStyle.inlineImage || {};
86
89
  Object.assign(img.style, {
90
+ minHeight,
91
+ minWidth,
87
92
  maxHeight,
88
- maxWidth
93
+ maxWidth,
94
+ borderRadius
89
95
  });
90
96
  targetNode.element.appendChild(imageContainer);
91
- const imageHeight = `${imageContainer.clientHeight + imageMarginTop}px`;
92
97
  Object.assign(imageContainer.style, {
93
- height: imageHeight
98
+ height: `${imageContainer.clientHeight}px`
94
99
  });
95
100
  // Set paddingBottom to the height of the image so it's displayed under the block
96
101
  Object.assign(targetNode.element.style, {
97
- paddingBottom: imageHeight
102
+ paddingBottom: `${imageContainer.clientHeight + imageMarginTop}px`
98
103
  });
99
104
  });
100
105
  return targetNode;
package/lib/commonjs/web/inputElements/inlineImage.js.map CHANGED
@@ -1 +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","paddingBottom","style","height","element","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$inline3","_markdownStyle$inline4","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","createLoadingIndicator","maxWidth","inlineImage","maxHeight","imageMarginTop","parseStringWithUnitToNumber","marginTop","imageMarginBottom","marginBottom","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","imageHeight","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}
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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"}
package/lib/module/MarkdownTextInputDecoratorViewNativeComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["codegenNativeComponent","interfaceOnly"],"sourceRoot":"../../src","sources":["MarkdownTextInputDecoratorViewNativeComponent.ts"],"mappings":"AAGA,OAAOA,sBAAsB,MAAM,yDAAyD;AAwE5F,eAAeA,sBAAsB,CAAc,gCAAgC,EAAE;EACnFC,aAAa,EAAE;AACjB,CAAC,CAAC"}
1
+ {"version":3,"names":["codegenNativeComponent","interfaceOnly"],"sourceRoot":"../../src","sources":["MarkdownTextInputDecoratorViewNativeComponent.ts"],"mappings":"AAGA,OAAOA,sBAAsB,MAAM,yDAAyD;AA2E5F,eAAeA,sBAAsB,CAAc,gCAAgC,EAAE;EACnFC,aAAa,EAAE;AACjB,CAAC,CAAC"}
package/lib/module/styleUtils.js CHANGED
@@ -48,10 +48,13 @@ function makeDefaultMarkdownStyle() {
48
48
  backgroundColor: 'pink'
49
49
  },
50
50
  inlineImage: {
51
+ minWidth: 50,
52
+ minHeight: 50,
51
53
  maxWidth: 150,
52
54
  maxHeight: 150,
53
55
  marginTop: 5,
54
- marginBottom: 0
56
+ marginBottom: 0,
57
+ borderRadius: 5
55
58
  },
56
59
  loadingIndicator: {
57
60
  primaryColor: 'gray',
package/lib/module/styleUtils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Platform","FONT_FAMILY_MONOSPACE","select","ios","default","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","fontFamily","backgroundColor","pre","mentionHere","mentionUser","mentionReport","inlineImage","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,cAAc;AAOrC,MAAMC,qBAAqB,GAAGD,QAAQ,CAACE,MAAM,CAAC;EAC5CC,GAAG,EAAE,SAAS;EACdC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,SAASC,wBAAwBA,CAAA,EAAkB;EACjD,OAAO;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJD,KAAK,EAAE;IACT,CAAC;IACDE,EAAE,EAAE;MACFC,QAAQ,EAAE;IACZ,CAAC;IACDC,KAAK,EAAE;MACLD,QAAQ,EAAE;IACZ,CAAC;IACDE,UAAU,EAAE;MACVC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE,CAAC;MACdC,UAAU,EAAE,CAAC;MACbC,WAAW,EAAE;IACf,CAAC;IACDC,IAAI,EAAE;MACJC,UAAU,EAAEjB,qBAAqB;MACjCS,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDC,GAAG,EAAE;MACHF,UAAU,EAAEjB,qBAAqB;MACjCS,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDE,WAAW,EAAE;MACXd,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDG,WAAW,EAAE;MACXf,KAAK,EAAE,MAAM;MACbY,eAAe,EAAE;IACnB,CAAC;IACDI,aAAa,EAAE;MACbhB,KAAK,EAAE,KAAK;MACZY,eAAe,EAAE;IACnB,CAAC;IACDK,WAAW,EAAE;MACXC,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,YAAY,EAAE;IAChB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;IAClB;EACF,CAAC;AACH;AAEA,SAASC,6BAA6BA,CAACC,KAAuC,EAAiB;EAC7F,MAAMC,MAAM,GAAG7B,wBAAwB,CAAC,CAAC;EAEzC,IAAI4B,KAAK,KAAKE,SAAS,EAAE;IACvBC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAEC,GAAG,IAAK;MAClC,IAAI,EAAEA,GAAG,IAAIL,MAAM,CAAC,EAAE;QACpB;MACF;MAEA,MAAMM,WAAW,GAAGN,MAAM,CAACK,GAAG,CAAwB;MACtD,IAAIC,WAAW,EAAE;QACfJ,MAAM,CAACK,MAAM,CAACD,WAAW,EAAEP,KAAK,CAACM,GAAG,CAAwB,CAAC;MAC/D;IACF,CAAC,CAAC;EACJ;EAEA,OAAOL,MAAM;AACf;AAEA,SAASQ,2BAA2BA,CAACC,KAAoB,EAAU;EACjE,OAAOA,KAAK,GAAGC,QAAQ,CAACD,KAAK,CAACE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;AAC1D;AAIA,SAAQb,6BAA6B,EAAEU,2BAA2B"}
1
+ {"version":3,"names":["Platform","FONT_FAMILY_MONOSPACE","select","ios","default","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","fontFamily","backgroundColor","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","borderRadius","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,cAAc;AAOrC,MAAMC,qBAAqB,GAAGD,QAAQ,CAACE,MAAM,CAAC;EAC5CC,GAAG,EAAE,SAAS;EACdC,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,SAASC,wBAAwBA,CAAA,EAAkB;EACjD,OAAO;IACLC,MAAM,EAAE;MACNC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE;MACJD,KAAK,EAAE;IACT,CAAC;IACDE,EAAE,EAAE;MACFC,QAAQ,EAAE;IACZ,CAAC;IACDC,KAAK,EAAE;MACLD,QAAQ,EAAE;IACZ,CAAC;IACDE,UAAU,EAAE;MACVC,WAAW,EAAE,MAAM;MACnBC,WAAW,EAAE,CAAC;MACdC,UAAU,EAAE,CAAC;MACbC,WAAW,EAAE;IACf,CAAC;IACDC,IAAI,EAAE;MACJC,UAAU,EAAEjB,qBAAqB;MACjCS,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDC,GAAG,EAAE;MACHF,UAAU,EAAEjB,qBAAqB;MACjCS,QAAQ,EAAE,EAAE;MACZH,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDE,WAAW,EAAE;MACXd,KAAK,EAAE,OAAO;MACdY,eAAe,EAAE;IACnB,CAAC;IACDG,WAAW,EAAE;MACXf,KAAK,EAAE,MAAM;MACbY,eAAe,EAAE;IACnB,CAAC;IACDI,aAAa,EAAE;MACbhB,KAAK,EAAE,KAAK;MACZY,eAAe,EAAE;IACnB,CAAC;IACDK,WAAW,EAAE;MACXC,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,EAAE;MACbC,QAAQ,EAAE,GAAG;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE,CAAC;MACZC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAChB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,YAAY,EAAE,MAAM;MACpBC,cAAc,EAAE;IAClB;EACF,CAAC;AACH;AAEA,SAASC,6BAA6BA,CAACC,KAAuC,EAAiB;EAC7F,MAAMC,MAAM,GAAGhC,wBAAwB,CAAC,CAAC;EAEzC,IAAI+B,KAAK,KAAKE,SAAS,EAAE;IACvBC,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,CAACK,OAAO,CAAEC,GAAG,IAAK;MAClC,IAAI,EAAEA,GAAG,IAAIL,MAAM,CAAC,EAAE;QACpB;MACF;MAEA,MAAMM,WAAW,GAAGN,MAAM,CAACK,GAAG,CAAwB;MACtD,IAAIC,WAAW,EAAE;QACfJ,MAAM,CAACK,MAAM,CAACD,WAAW,EAAEP,KAAK,CAACM,GAAG,CAAwB,CAAC;MAC/D;IACF,CAAC,CAAC;EACJ;EAEA,OAAOL,MAAM;AACf;AAEA,SAASQ,2BAA2BA,CAACC,KAAoB,EAAU;EACjE,OAAOA,KAAK,GAAGC,QAAQ,CAACD,KAAK,CAACE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;AAC1D;AAIA,SAAQb,6BAA6B,EAAEU,2BAA2B"}
package/lib/module/web/inputElements/inlineImage.js CHANGED
@@ -18,8 +18,8 @@ function createImageElement(url, callback) {
18
18
  }
19
19
 
20
20
  /** Adds already loaded image element from current input content to the tree node */
21
- function updateImageTreeNode(targetNode, newElement) {
22
- const paddingBottom = `${newElement.style.height}`;
21
+ function updateImageTreeNode(targetNode, newElement, imageMarginTop = 0) {
22
+ const paddingBottom = `${parseStringWithUnitToNumber(newElement.style.height) + imageMarginTop}px`;
23
23
  targetNode.element.appendChild(newElement);
24
24
  let currentParent = targetNode.element;
25
25
  while (currentParent.parentElement && !['line', 'block'].includes(currentParent.getAttribute('data-type') || '')) {
@@ -33,19 +33,21 @@ function updateImageTreeNode(targetNode, newElement) {
33
33
 
34
34
  /** The main function that adds inline image preview to the node */
35
35
  function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownStyle) {
36
- var _markdownStyle$inline, _markdownStyle$inline2, _markdownStyle$inline3, _markdownStyle$inline4, _markdownStyle$loadin, _markdownStyle$loadin2;
36
+ var _markdownStyle$inline, _markdownStyle$inline2, _markdownStyle$loadin, _markdownStyle$loadin2;
37
37
  const linkRange = ranges.find(r => r.type === 'link');
38
38
  let imageHref = '';
39
39
  if (linkRange) {
40
40
  imageHref = text.substring(linkRange.start, linkRange.start + linkRange.length);
41
41
  }
42
+ const imageMarginTop = parseStringWithUnitToNumber(`${(_markdownStyle$inline = markdownStyle.inlineImage) === null || _markdownStyle$inline === void 0 ? void 0 : _markdownStyle$inline.marginTop}`);
43
+ const imageMarginBottom = parseStringWithUnitToNumber(`${(_markdownStyle$inline2 = markdownStyle.inlineImage) === null || _markdownStyle$inline2 === void 0 ? void 0 : _markdownStyle$inline2.marginBottom}`);
42
44
 
43
45
  // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
44
46
  // Prevents from image flickering and layout jumps
45
47
  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
46
48
  const loadedImageContainer = alreadyLoadedPreview === null || alreadyLoadedPreview === void 0 ? void 0 : alreadyLoadedPreview.parentElement;
47
49
  if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {
48
- return updateImageTreeNode(targetNode, loadedImageContainer);
50
+ return updateImageTreeNode(targetNode, loadedImageContainer, imageMarginTop);
49
51
  }
50
52
 
51
53
  // Add a loading spinner
@@ -53,10 +55,6 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
53
55
  if (spinner) {
54
56
  targetNode.element.appendChild(spinner);
55
57
  }
56
- const maxWidth = (_markdownStyle$inline = markdownStyle.inlineImage) === null || _markdownStyle$inline === void 0 ? void 0 : _markdownStyle$inline.maxWidth;
57
- const maxHeight = (_markdownStyle$inline2 = markdownStyle.inlineImage) === null || _markdownStyle$inline2 === void 0 ? void 0 : _markdownStyle$inline2.maxHeight;
58
- const imageMarginTop = parseStringWithUnitToNumber(`${(_markdownStyle$inline3 = markdownStyle.inlineImage) === null || _markdownStyle$inline3 === void 0 ? void 0 : _markdownStyle$inline3.marginTop}`);
59
- const imageMarginBottom = parseStringWithUnitToNumber(`${(_markdownStyle$inline4 = markdownStyle.inlineImage) === null || _markdownStyle$inline4 === void 0 ? void 0 : _markdownStyle$inline4.marginBottom}`);
60
58
  Object.assign(targetNode.element.style, {
61
59
  display: 'block',
62
60
  marginBottom: `${imageMarginBottom}px`,
@@ -69,26 +67,33 @@ function addInlineImagePreview(currentInput, targetNode, text, ranges, markdownS
69
67
  if (currentSpinner) {
70
68
  currentSpinner.remove();
71
69
  }
70
+ const img = imageContainer.firstChild;
72
71
 
73
72
  // Set the image styles
74
73
  Object.assign(imageContainer.style, {
75
- ...inlineImageDefaultStyles,
76
- maxHeight,
77
- maxWidth
74
+ ...inlineImageDefaultStyles
78
75
  });
79
- const img = imageContainer.firstChild;
76
+ const {
77
+ minHeight,
78
+ minWidth,
79
+ maxHeight,
80
+ maxWidth,
81
+ borderRadius
82
+ } = markdownStyle.inlineImage || {};
80
83
  Object.assign(img.style, {
84
+ minHeight,
85
+ minWidth,
81
86
  maxHeight,
82
- maxWidth
87
+ maxWidth,
88
+ borderRadius
83
89
  });
84
90
  targetNode.element.appendChild(imageContainer);
85
- const imageHeight = `${imageContainer.clientHeight + imageMarginTop}px`;
86
91
  Object.assign(imageContainer.style, {
87
- height: imageHeight
92
+ height: `${imageContainer.clientHeight}px`
88
93
  });
89
94
  // Set paddingBottom to the height of the image so it's displayed under the block
90
95
  Object.assign(targetNode.element.style, {
91
- paddingBottom: imageHeight
96
+ paddingBottom: `${imageContainer.clientHeight + imageMarginTop}px`
92
97
  });
93
98
  });
94
99
  return targetNode;
package/lib/module/web/inputElements/inlineImage.js.map CHANGED
@@ -1 +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","paddingBottom","style","height","element","currentParent","parentElement","includes","getAttribute","Object","assign","addInlineImagePreview","currentInput","text","ranges","markdownStyle","_markdownStyle$inline","_markdownStyle$inline2","_markdownStyle$inline3","_markdownStyle$inline4","_markdownStyle$loadin","_markdownStyle$loadin2","linkRange","find","r","type","imageHref","substring","start","length","alreadyLoadedPreview","querySelector","loadedImageContainer","spinner","maxWidth","inlineImage","maxHeight","imageMarginTop","marginTop","imageMarginBottom","marginBottom","display","loadingIndicatorContainer","loadingIndicator","undefined","currentSpinner","remove","firstChild","imageHeight","clientHeight"],"sourceRoot":"../../../../src","sources":["web/inputElements/inlineImage.ts"],"mappings":"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"}
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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"}
package/lib/typescript/src/MarkdownTextInputDecoratorViewNativeComponent.d.ts CHANGED
@@ -46,10 +46,13 @@ interface MarkdownStyle {
46
46
  backgroundColor: ColorValue;
47
47
  };
48
48
  inlineImage: {
49
+ minWidth: Float;
50
+ minHeight: Float;
49
51
  maxWidth: Float;
50
52
  maxHeight: Float;
51
53
  marginTop: Float;
52
54
  marginBottom: Float;
55
+ borderRadius: Float;
53
56
  };
54
57
  loadingIndicatorContainer?: {
55
58
  backgroundColor?: ColorValue;
package/lib/typescript/src/MarkdownTextInputDecoratorViewNativeComponent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MarkdownTextInputDecoratorViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/MarkdownTextInputDecoratorViewNativeComponent.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,2CAA2C,CAAC;AAGrE,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,KAAK,EAAE;QACL,QAAQ,EAAE,KAAK,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,EAAE,EAAE;QACF,QAAQ,EAAE,KAAK,CAAC;KACjB,CAAC;IACF,UAAU,EAAE;QACV,WAAW,EAAE,UAAU,CAAC;QACxB,WAAW,EAAE,KAAK,CAAC;QACnB,UAAU,EAAE,KAAK,CAAC;QAClB,WAAW,EAAE,KAAK,CAAC;KACpB,CAAC;IACF,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,GAAG,EAAE;QACH,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,aAAa,EAAE;QACb,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,QAAQ,EAAE,KAAK,CAAC;QAChB,SAAS,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,KAAK,CAAC;QACjB,YAAY,EAAE,KAAK,CAAC;KACrB,CAAC;IACF,yBAAyB,CAAC,EAAE;QAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;QAC7B,WAAW,CAAC,EAAE,KAAK,CAAC;QACpB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,YAAY,CAAC,EAAE,KAAK,CAAC;QACrB,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,CAAC;KAChB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,YAAY,CAAC,EAAE,UAAU,CAAC;QAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;QAC5B,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,CAAC;QACf,WAAW,CAAC,EAAE,KAAK,CAAC;KACrB,CAAC;CACH;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,aAAa,EAAE,aAAa,CAAC;CAC9B;;AAED,wBAEG;AAEH,YAAY,EAAC,aAAa,EAAC,CAAC"}
1
+ {"version":3,"file":"MarkdownTextInputDecoratorViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/MarkdownTextInputDecoratorViewNativeComponent.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,2CAA2C,CAAC;AAGrE,UAAU,aAAa;IACrB,MAAM,EAAE;QACN,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,KAAK,EAAE;QACL,QAAQ,EAAE,KAAK,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,EAAE,EAAE;QACF,QAAQ,EAAE,KAAK,CAAC;KACjB,CAAC;IACF,UAAU,EAAE;QACV,WAAW,EAAE,UAAU,CAAC;QACxB,WAAW,EAAE,KAAK,CAAC;QACnB,UAAU,EAAE,KAAK,CAAC;QAClB,WAAW,EAAE,KAAK,CAAC;KACpB,CAAC;IACF,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,GAAG,EAAE;QACH,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC;QAChB,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,aAAa,EAAE;QACb,KAAK,EAAE,UAAU,CAAC;QAClB,eAAe,EAAE,UAAU,CAAC;KAC7B,CAAC;IACF,WAAW,EAAE;QACX,QAAQ,EAAE,KAAK,CAAC;QAChB,SAAS,EAAE,KAAK,CAAC;QACjB,QAAQ,EAAE,KAAK,CAAC;QAChB,SAAS,EAAE,KAAK,CAAC;QACjB,SAAS,EAAE,KAAK,CAAC;QACjB,YAAY,EAAE,KAAK,CAAC;QACpB,YAAY,EAAE,KAAK,CAAC;KACrB,CAAC;IACF,yBAAyB,CAAC,EAAE;QAC1B,eAAe,CAAC,EAAE,UAAU,CAAC;QAC7B,WAAW,CAAC,EAAE,KAAK,CAAC;QACpB,WAAW,CAAC,EAAE,UAAU,CAAC;QACzB,YAAY,CAAC,EAAE,KAAK,CAAC;QACrB,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,CAAC;KAChB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,YAAY,CAAC,EAAE,UAAU,CAAC;QAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;QAC5B,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,KAAK,CAAC;QACf,WAAW,CAAC,EAAE,KAAK,CAAC;KACrB,CAAC;CACH;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,aAAa,EAAE,aAAa,CAAC;CAC9B;;AAED,wBAEG;AAEH,YAAY,EAAC,aAAa,EAAC,CAAC"}
package/lib/typescript/src/styleUtils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../src/styleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iDAAiD,CAAC;AAEnF,KAAK,oBAAoB,GAAG,OAAO,CAAC;KACjC,CAAC,IAAI,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CACtD,CAAC,CAAC;AAgEH,iBAAS,6BAA6B,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,GAAG,aAAa,CAiB7F;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAEjE;AAED,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAEnC,OAAO,EAAC,6BAA6B,EAAE,2BAA2B,EAAC,CAAC"}
1
+ {"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../src/styleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iDAAiD,CAAC;AAEnF,KAAK,oBAAoB,GAAG,OAAO,CAAC;KACjC,CAAC,IAAI,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CACtD,CAAC,CAAC;AAmEH,iBAAS,6BAA6B,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,GAAG,aAAa,CAiB7F;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAEjE;AAED,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAEnC,OAAO,EAAC,6BAA6B,EAAE,2BAA2B,EAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expensify/react-native-live-markdown",
3
- "version": "0.1.150",
3
+ "version": "0.1.151",
4
4
  "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
package/src/MarkdownTextInputDecoratorViewNativeComponent.ts CHANGED
@@ -47,10 +47,13 @@ interface MarkdownStyle {
47
47
  backgroundColor: ColorValue;
48
48
  };
49
49
  inlineImage: {
50
+ minWidth: Float;
51
+ minHeight: Float;
50
52
  maxWidth: Float;
51
53
  maxHeight: Float;
52
54
  marginTop: Float;
53
55
  marginBottom: Float;
56
+ borderRadius: Float;
54
57
  };
55
58
  loadingIndicatorContainer?: {
56
59
  backgroundColor?: ColorValue;
package/src/styleUtils.ts CHANGED
@@ -55,10 +55,13 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
55
55
  backgroundColor: 'pink',
56
56
  },
57
57
  inlineImage: {
58
+ minWidth: 50,
59
+ minHeight: 50,
58
60
  maxWidth: 150,
59
61
  maxHeight: 150,
60
62
  marginTop: 5,
61
63
  marginBottom: 0,
64
+ borderRadius: 5,
62
65
  },
63
66
  loadingIndicator: {
64
67
  primaryColor: 'gray',
package/src/web/inputElements/inlineImage.ts CHANGED
@@ -26,8 +26,8 @@ function createImageElement(url: string, callback: (img: HTMLElement) => void) {
26
26
  }
27
27
 
28
28
  /** Adds already loaded image element from current input content to the tree node */
29
- function updateImageTreeNode(targetNode: TreeNode, newElement: HTMLMarkdownElement) {
30
- const paddingBottom = `${newElement.style.height}`;
29
+ function updateImageTreeNode(targetNode: TreeNode, newElement: HTMLMarkdownElement, imageMarginTop = 0) {
30
+ const paddingBottom = `${parseStringWithUnitToNumber(newElement.style.height) + imageMarginTop}px`;
31
31
  targetNode.element.appendChild(newElement);
32
32
 
33
33
  let currentParent = targetNode.element;
@@ -49,12 +49,15 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
49
49
  imageHref = text.substring(linkRange.start, linkRange.start + linkRange.length);
50
50
  }
51
51
 
52
+ const imageMarginTop = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginTop}`);
53
+ const imageMarginBottom = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginBottom}`);
54
+
52
55
  // If the inline image markdown with the same href exists in the current input, use it instead of creating new one.
53
56
  // Prevents from image flickering and layout jumps
54
57
  const alreadyLoadedPreview = currentInput.querySelector(`img[src="${imageHref}"]`);
55
58
  const loadedImageContainer = alreadyLoadedPreview?.parentElement;
56
59
  if (loadedImageContainer && loadedImageContainer.getAttribute('data-type') === 'inline-container') {
57
- return updateImageTreeNode(targetNode, loadedImageContainer as HTMLMarkdownElement);
60
+ return updateImageTreeNode(targetNode, loadedImageContainer as HTMLMarkdownElement, imageMarginTop);
58
61
  }
59
62
 
60
63
  // Add a loading spinner
@@ -63,11 +66,6 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
63
66
  targetNode.element.appendChild(spinner);
64
67
  }
65
68
 
66
- const maxWidth = markdownStyle.inlineImage?.maxWidth;
67
- const maxHeight = markdownStyle.inlineImage?.maxHeight;
68
- const imageMarginTop = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginTop}`);
69
- const imageMarginBottom = parseStringWithUnitToNumber(`${markdownStyle.inlineImage?.marginBottom}`);
70
-
71
69
  Object.assign(targetNode.element.style, {
72
70
  display: 'block',
73
71
  marginBottom: `${imageMarginBottom}px`,
@@ -82,28 +80,30 @@ function addInlineImagePreview(currentInput: MarkdownTextInputElement, targetNod
82
80
  currentSpinner.remove();
83
81
  }
84
82
 
83
+ const img = imageContainer.firstChild as HTMLImageElement;
84
+
85
85
  // Set the image styles
86
86
  Object.assign(imageContainer.style, {
87
87
  ...inlineImageDefaultStyles,
88
- maxHeight,
89
- maxWidth,
90
88
  });
91
89
 
92
- const img = imageContainer.firstChild as HTMLImageElement;
90
+ const {minHeight, minWidth, maxHeight, maxWidth, borderRadius} = markdownStyle.inlineImage || {};
93
91
  Object.assign(img.style, {
92
+ minHeight,
93
+ minWidth,
94
94
  maxHeight,
95
95
  maxWidth,
96
+ borderRadius,
96
97
  });
97
98
 
98
99
  targetNode.element.appendChild(imageContainer);
99
100
 
100
- const imageHeight = `${imageContainer.clientHeight + imageMarginTop}px`;
101
101
  Object.assign(imageContainer.style, {
102
- height: imageHeight,
102
+ height: `${imageContainer.clientHeight}px`,
103
103
  });
104
104
  // Set paddingBottom to the height of the image so it's displayed under the block
105
105
  Object.assign(targetNode.element.style, {
106
- paddingBottom: imageHeight,
106
+ paddingBottom: `${imageContainer.clientHeight + imageMarginTop}px`,
107
107
  });
108
108
  });
109
109