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

package/README.md

@@ -1,10 +1,6 @@
 # React Native Markdown Display
 
-It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is __not__ a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.
-
-### Compatibility with react-native-markdown-renderer
-
-This is intended to be a replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements - **Due to how the new style rules work, there may be some tweaking needed**, [see how to style stuff section below](#How-to-style-stuff)
+It is a CommonMark-compatible React Native markdown renderer that uses native components rather than a web view. Maintained by Novastera, an open-source CRM/ERP platform, it is designed to be easy to theme and extend.
 
 ### Install
 
@@ -37,7 +33,7 @@ const copy = `# h1 Heading 8-)
 This is normal text
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -66,9 +62,9 @@ The `<Markdown>` object takes the following common props:
 | Property | Default | Required | Description                                                      
 | --- | --- | --- | ---
 | `children` | N/A | `true` | The markdown string to render, or the [pre-processed tree](#pre-processing)
-| `style` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | `false` | An object to override the styling for the various rules, [see style section below](#rules-and-styles) for more info
+| `style` | [source](https://github.com/novastera/react-native-markdown-display/blob/master/src/lib/styles.ts) | `false` | An object to override the styling for the various rules, [see style section below](#rules-and-styles) for more info
 | `mergeStyle` | `true` | `false` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them
-| `rules` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for more info
+| `rules` | [source](https://github.com/novastera/react-native-markdown-display/blob/master/src/lib/renderRules.tsx) | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for more info
 | `onLinkPress` | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | `false` | A handler function to change click behaviour, [see handling links section below](#handling-links) for more info
 | `debugPrintTree` | `false` | `false` | Will print the AST tree to the console to help you see what the markdown is being translated to
 
@@ -101,7 +97,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-1.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-1.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-1.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-1.png"/>  
 
 </p>
 </details>
@@ -123,7 +119,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-2.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-2.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-2.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-2.png"/>  
 
 
 </p>
@@ -148,7 +144,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-4.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-4.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-4.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-4.png"/>  
 
 </p>
 </details>
@@ -165,7 +161,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-5.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-5.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-5.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-5.png"/>  
 
 </p>
 </details>
@@ -199,7 +195,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-6.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-6.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-6.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-6.png"/>  
 
 </p>
 </details>
@@ -238,7 +234,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-7.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-7.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-7.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-7.png"/>  
 
 </p>
 </details>
@@ -265,7 +261,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-8.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-8.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-8.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-8.png"/>  
 
 </p>
 </details>
@@ -283,7 +279,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-9.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-9.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-9.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-9.png"/>  
 
 </p>
 </details>
@@ -291,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")
@@ -306,7 +304,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-10.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-10.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-10.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-10.png"/>  
 
 </p>
 </details>
@@ -329,7 +327,7 @@ And some additional, less used options:
 
 | iOS | Android
 | --- | ---
-| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-3.png"/>  | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-3.png"/>  
+| <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/ios-3.png"/>  | <img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/android-3.png"/>  
 
 </p>
 </details>
@@ -365,7 +363,7 @@ const copy = `
 @[youtube](lJIrF4YjHfQ)
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -431,7 +429,7 @@ const copy = `
 @[youtube](lJIrF4YjHfQ)
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -729,7 +727,7 @@ Think of the implementation like applying styles in CSS. changes to the `body` e
 <details><summary>Example</summary>
 <p>
 
-<img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/style-example.png"/> 
+<img src="https://github.com/novastera/react-native-markdown-display/raw/master/doc/images/style-example.png"/> 
 
 ```jsx
 import React from 'react';
@@ -755,7 +753,7 @@ and some more small text
 ### this is a h3
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -844,7 +842,7 @@ const copy = `
 | ext    | extension to be used for dest files. |
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -872,7 +870,7 @@ export default App;
 
 ### Rules
 
-Rules are used to specify how you want certain elements to be displayed. The existing implementation is [here](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js)
+Rules are used to specify how you want certain elements to be displayed. The existing implementation is here: https://github.com/novastera/react-native-markdown-display/blob/master/src/lib/renderRules.tsx
 
 <details><summary>Example Implementation</summary>
 <p>
@@ -910,7 +908,7 @@ const copy = `
 | ext    | extension to be used for dest files. |
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -992,7 +990,7 @@ import { SafeAreaView, ScrollView, StatusBar } from 'react-native';
 
 import Markdown from '@novastera-oss/react-native-markdown-display';
 
-const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
+const copy = `[This is a link!](https://novastera.com)`;
 
 const onLinkPress = (url) => {
     if (url) {
@@ -1005,7 +1003,7 @@ const onLinkPress = (url) => {
     return true
   }
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -1034,7 +1032,7 @@ export default App;
 <details><summary>Using a Custom Rule</summary>
 <p>
 
-You will need to overwrite one or both of `link` and `blocklink`, the original defenitions can be [found here](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js)
+You will need to overwrite one or both of `link` and `blocklink`, the original definitions can be found here: https://github.com/novastera/react-native-markdown-display/blob/master/src/lib/renderRules.tsx
 
 Something like this with `yourCustomHandlerFunctionOrLogicHere`:
 
@@ -1044,7 +1042,7 @@ import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';
 
 import Markdown from '@novastera-oss/react-native-markdown-display';
 
-const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
+const copy = `[This is a link!](https://novastera.com)`;
 
 const rules = {
   link: (node, children, parent, styles) => {
@@ -1056,7 +1054,7 @@ const rules = {
   },
 };
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -1085,7 +1083,7 @@ export default App;
 
 # Disabling Specific Types of Markdown
 
-You can dissable any type of markdown you want, which is very useful in a mobile environment, by passing the markdownit property like below. Note that for convenience we also export the `MarkdownIt` instance so you don't have to include it as a project dependency directly just to remove some types of markdown.
+You can disable any type of markdown you want, which is very useful in a mobile environment, by passing the markdownit property like below. Note that for convenience we also export the `MarkdownIt` instance so you don't have to include it as a project dependency directly just to remove some types of markdown.
 
 This example will stop images and links.
 
@@ -1101,7 +1099,7 @@ const copy = `
 [but this link will just](be displayed as this text)
 `;
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -1126,12 +1124,12 @@ const App: () => React$Node = () => {
 export default App;
 ```
 
-A full list of things you can turn off is [here](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.js)
+A full list of things you can turn off lives in the markdown-it CommonMark preset (the preset list may move across releases). You can also configure this renderer by supplying your own markdown-it instance; see the markdown-it docs for preset and rule options: https://github.com/markdown-it/markdown-it
 
 
 ### Pre Processing
 
-It is possible to need to pre-process the data outside of this library ([related discussion here](https://github.com/iamacup/react-native-markdown-display/issues/79)). As a result, you can pass an AST tree directly as the children like this:
+It is possible to need to pre-process the data outside of this library. As a result, you can pass an AST tree directly as the children like this:
 
 ```jsx
 import React from 'react';
@@ -1149,7 +1147,7 @@ This is some text with **BOLD!**
 
 const ast = tokensToAST(stringToTokens(copy, markdownItInstance))
 
-const App: () => React$Node = () => {
+const App: () => React.ReactNode = () => {
   return (
     <>
       <StatusBar barStyle="dark-content" />
@@ -1174,11 +1172,11 @@ export default App;
 
 ### Other Notes
 
-This is a fork of [react-native-markdown-renderer](https://github.com/mientjan/react-native-markdown-renderer), a library that unfortunately has not been updated for some time so i took all of the outstanding pull requests from that library and tested + merged as necessary.
+See [iamacup/react-native-markdown-display](https://github.com/iamacup/react-native-markdown-display) for the legacy fork lineage. This project removes unmaintained libraries and uses TypeScript.
 
 ## About Novastera
 
-This library is part of the Novastera open-source ecosystem, a modern CRM/ERP
+This library is part of the Novastera CRM/ERP open-source ecosystem, a modern
 platform designed for the next generation of business applications. Novastera
 combines AI capabilities with comprehensive business management tools, enabling
 organizations to leverage on-device AI for enhanced productivity and data

package/dist/cjs/lib/AstRenderer.js

@@ -22,10 +22,7 @@ class AstRenderer {
             const renderFunction = this.getRenderFunction(node.type);
             const parents = [...parentNodes];
             if (this._debugPrintTree === true) {
-                let str = '';
-                for (let a = 0; a < parents.length; a++) {
-                    str = str + '-';
-                }
+                const str = '-'.repeat(parents.length);
                 console.log(`${str}${node.type}`);
             }
             parents.unshift(node);

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/AstRenderer.js

@@ -17,10 +17,7 @@ export default class AstRenderer {
             const renderFunction = this.getRenderFunction(node.type);
             const parents = [...parentNodes];
             if (this._debugPrintTree === true) {
-                let str = '';
-                for (let a = 0; a < parents.length; a++) {
-                    str = str + '-';
-                }
+                const str = '-'.repeat(parents.length);
                 console.log(`${str}${node.type}`);
             }
             parents.unshift(node);

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.1",
+  "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",