@novastera-oss/react-native-markdown-display 8.0.2 → 8.1.0

package/README.md

@@ -287,6 +287,8 @@ And some additional, less used options:
 <details><summary>Images</summary>
 <p>
 
+You can pass image attributes (e.g. `width`, `height`, `contentFit`, `contentPosition`) via markdown-it attributes or HTML to map onto Expo Image props.
+
 ```
   ![Minion](https://octodex.github.com/images/minion.png)
   ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

package/dist/cjs/lib/renderRules.js

@@ -109,30 +109,46 @@ const renderRules = {
     blocklink: linkRule((node, children, parent, styles, onLinkPress) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: () => (0, openUrl_1.default)(node.attributes.href, onLinkPress), style: styles.blocklink, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.image, children: children }) }, node.key))),
     // Images
     image: imageRule((node, children, parent, styles, allowedImageHandlers, defaultImageHandler) => {
-        const { src, alt } = node.attributes;
+        const { src, alt, width, height, contentFit, contentPosition, } = node.attributes;
         if (!src) {
             return null;
         }
+        const srcValue = String(src);
         // we check that the source starts with at least one of the elements in allowedImageHandlers
         const show = allowedImageHandlers.filter((value) => {
-            return src.toLowerCase().startsWith(value.toLowerCase());
+            return srcValue.toLowerCase().startsWith(value.toLowerCase());
         }).length > 0;
         if (show === false && defaultImageHandler === null) {
             return null;
         }
-        const imageUri = show === true ? src : `${defaultImageHandler !== null && defaultImageHandler !== void 0 ? defaultImageHandler : ''}${src}`;
+        const imageUri = show === true ? srcValue : `${defaultImageHandler !== null && defaultImageHandler !== void 0 ? defaultImageHandler : ''}${srcValue}`;
+        const widthValue = typeof width === 'number' ? width : width ? Number(width) : undefined;
+        const heightValue = typeof height === 'number' ? height : height ? Number(height) : undefined;
+        const sizeStyle = Number.isFinite(widthValue) || Number.isFinite(heightValue)
+            ? {
+                ...(Number.isFinite(widthValue) ? { width: widthValue } : {}),
+                ...(Number.isFinite(heightValue) ? { height: heightValue } : {}),
+            }
+            : undefined;
         const imageProps = {
-            key: node.key,
-            style: styles._VIEW_SAFE_image,
+            style: sizeStyle
+                ? [styles._VIEW_SAFE_image, sizeStyle]
+                : styles._VIEW_SAFE_image,
             source: {
                 uri: imageUri,
             },
         };
-        if (alt) {
+        if (typeof contentFit === 'string') {
+            imageProps.contentFit = contentFit;
+        }
+        if (typeof contentPosition === 'string') {
+            imageProps.contentPosition = contentPosition;
+        }
+        if (typeof alt === 'string' && alt.length > 0) {
             imageProps.accessible = true;
             imageProps.accessibilityLabel = alt;
         }
-        return (0, jsx_runtime_1.jsx)(expo_image_1.Image, { ...imageProps });
+        return (0, jsx_runtime_1.jsx)(expo_image_1.Image, { ...imageProps }, node.key);
     }),
     // Text Output
     text: baseRule((node, children, parent, styles, inheritedStyles = {}) => ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [inheritedStyles, styles.text], children: node.content }, node.key))),

package/dist/esm/lib/renderRules.js

@@ -104,30 +104,46 @@ const renderRules = {
     blocklink: linkRule((node, children, parent, styles, onLinkPress) => (_jsx(TouchableWithoutFeedback, { onPress: () => openUrl(node.attributes.href, onLinkPress), style: styles.blocklink, children: _jsx(View, { style: styles.image, children: children }) }, node.key))),
     // Images
     image: imageRule((node, children, parent, styles, allowedImageHandlers, defaultImageHandler) => {
-        const { src, alt } = node.attributes;
+        const { src, alt, width, height, contentFit, contentPosition, } = node.attributes;
         if (!src) {
             return null;
         }
+        const srcValue = String(src);
         // we check that the source starts with at least one of the elements in allowedImageHandlers
         const show = allowedImageHandlers.filter((value) => {
-            return src.toLowerCase().startsWith(value.toLowerCase());
+            return srcValue.toLowerCase().startsWith(value.toLowerCase());
         }).length > 0;
         if (show === false && defaultImageHandler === null) {
             return null;
         }
-        const imageUri = show === true ? src : `${defaultImageHandler !== null && defaultImageHandler !== void 0 ? defaultImageHandler : ''}${src}`;
+        const imageUri = show === true ? srcValue : `${defaultImageHandler !== null && defaultImageHandler !== void 0 ? defaultImageHandler : ''}${srcValue}`;
+        const widthValue = typeof width === 'number' ? width : width ? Number(width) : undefined;
+        const heightValue = typeof height === 'number' ? height : height ? Number(height) : undefined;
+        const sizeStyle = Number.isFinite(widthValue) || Number.isFinite(heightValue)
+            ? {
+                ...(Number.isFinite(widthValue) ? { width: widthValue } : {}),
+                ...(Number.isFinite(heightValue) ? { height: heightValue } : {}),
+            }
+            : undefined;
         const imageProps = {
-            key: node.key,
-            style: styles._VIEW_SAFE_image,
+            style: sizeStyle
+                ? [styles._VIEW_SAFE_image, sizeStyle]
+                : styles._VIEW_SAFE_image,
             source: {
                 uri: imageUri,
             },
         };
-        if (alt) {
+        if (typeof contentFit === 'string') {
+            imageProps.contentFit = contentFit;
+        }
+        if (typeof contentPosition === 'string') {
+            imageProps.contentPosition = contentPosition;
+        }
+        if (typeof alt === 'string' && alt.length > 0) {
             imageProps.accessible = true;
             imageProps.accessibilityLabel = alt;
         }
-        return _jsx(Image, { ...imageProps });
+        return _jsx(Image, { ...imageProps }, node.key);
     }),
     // Text Output
     text: baseRule((node, children, parent, styles, inheritedStyles = {}) => (_jsx(Text, { style: [inheritedStyles, styles.text], children: node.content }, node.key))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novastera-oss/react-native-markdown-display",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "description": "Markdown renderer for react-native, with CommonMark spec support. Maintained by Novastera.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",