Merge pull request iamacup#45 from iamacup/5.0.0

5.0.0

Author: iamacup

README.md

@@ -5,7 +5,7 @@ a web-view markdown renderer but a renderer that uses native components for all
 
 ### Compatibility with react-native-markdown-renderer
 
-This is intended to be a drop-in replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements.
+This is intended to be a drop-in 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)
 
 ### Install
 
@@ -42,17 +42,78 @@ export default class Page extends PureComponent {
 }
 ```
 
+### How to style stuff
+
+Text styles are applied in a way that makes it much more convenient to manage changes to global styles while also allowing fine tuning of individual elements.
+
+Think of the implementation like applying styles in CSS. changes to the body effect everything, but can be overwritten further down the style / component tree.
+
+The gotcha is if you try to use the text style override to change all text styles, this only changes things that are rendered using the ‘text’ rule. Instead you should change root, and then modify child styles (like code blocks etc) as needed.
+
+
+<details><summary>Example</summary>
+<p>
+
+<img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/style-example.png"/> 
+
+```jsx
+const copy = `
+This is some text which is red because of the root style, which is also really small!
+
+\`\`\`
+//This is a code block woooo
+
+const cool = () => {
+  console.log('????');
+};
+\`\`\`
+
+and some more small text
+
+# This is a h1
+## this is a h2
+### this is a h3
+`;
+
+const App: () => React$Node = () => {
+  return (
+    <>
+      <SafeAreaView>
+        <View style={{marginHorizontal: 20}}>
+          <Markdown
+            mergeStyle={true} 
+            style={{
+              root: {color: 'red', fontSize: 10},
+              heading1: {color: 'purple'},
+              codeBlock: {color: 'black', fontSize: 14}
+            }}
+          >
+            {copy}
+          </Markdown>
+        </View>
+      </SafeAreaView>
+    </>
+  );
+};
+```
+
+</p>
+</details>
+
+
 ### Props and Functions
 
 The `<Markdown>` object takes the following common props:
 
 | Property | Required | Description                                                      
 | --- | --- | ---
 | `children` | `true` | The markdown string to render
-| `rules` | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for full list
 | `style` | `false` | An object to override the styling for the various rules, [see style section below](#style) for full list
+| `mergeStyle` | `false` | if true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them
+| `rules` | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for full list
 | `onLinkPress` | `false` | A handler function to change click behaviour, [see handling links section below](#handling-links) for more info
 
+
 And some additional, less used options:
 
 | Property | Required | Description    
@@ -495,7 +556,7 @@ Rules are used to specify how you want certain elements to be displayed. The exi
 
 The list of rules that can be overwritten is:
 
-```["unknown", "textgroup", "inline", "text", "span", "strong", "s", "link", "blocklink", "em", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph", "hardbreak", "blockquote", "code_inline", "code_block", "fence", "pre", "bullet_list", "ordered_list", "list_item", "table", "thead", "tbody", "th", "tr", "td", "hr", "softbreak", "image"]```
+```["root" "unknown", "textgroup", "inline", "text", "span", "strong", "s", "link", "blocklink", "em", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph", "hardbreak", "blockquote", "code_inline", "code_block", "fence", "pre", "bullet_list", "ordered_list", "list_item", "table", "thead", "tbody", "th", "tr", "td", "hr", "softbreak", "image"]```
 
 <details><summary>Example Implementation</summary>
 <p>
@@ -551,9 +612,9 @@ Styles are used to override how certain rules are styled. The existing implement
 
 The list of styles that can be overwritten is:
 
-```["root", "view", "codeBlock", "codeInline", "del", "em", "headingContainer", "heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "hr", "blockquote", "inlineCode", "list", "listItem", "listUnordered", "listUnorderedItem", "listUnorderedItemIcon", "listOrdered", "listOrderedItem", "listOrderedItemIcon", "paragraph", "hardbreak", "strong", "table", "tableHeader", "tableHeaderCell", "tableRow", "tableRowCell", "text", "strikethrough", "link", "blocklink", "u", "image"]```
+```["root", "codeBlock", "codeInline", "em", "headingContainer", "heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "hr", "blockquote", "list", "listItem", "listUnordered", "listUnorderedItem", "listUnorderedItemIcon", "listOrdered", "listOrderedItem", "listOrderedItemIcon", "paragraph", "hardbreak", "strong", "table", "tableHeader", "tableHeaderCell", "tableRow", "tableRowCell", "text", "textGroup", "strikethrough", "link", "blocklink", "image"]```
 
-**NOTE:** There is no merge of the style properties, if you specify a style property, it will completely overwrite existing styles for that property.
+**NOTE:** by default there is no of the style properties, if you specify a style property, it will completely overwrite existing styles for that property **UNLESS** you specify `mergeStyle` as true.
 
 <details><summary>Example Implementation</summary>
 <p>

doc/images/style-example.png

@@ -1,6 +1,6 @@
 {
   "name": "react-native-markdown-display",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package.json

@@ -1,6 +1,6 @@
 /**
  * Base Markdown component
- * @author Mient-jan Stelling
+ * @author Mient-jan Stelling + contributors
  */
 
 import React, {useMemo} from 'react';
@@ -16,11 +16,10 @@ import AstRenderer from './lib/AstRenderer';
 import MarkdownIt from 'markdown-it';
 import PluginContainer from './lib/plugin/PluginContainer';
 import blockPlugin from './lib/plugin/blockPlugin';
+import removeTextStyleProps from './lib/util/removeTextStyleProps';
 import {styles} from './lib/styles';
 import {stringToTokens} from './lib/util/stringToTokens';
-/**
- *
- */
+
 export {
   getUniqueID,
   openUrl,
@@ -34,12 +33,14 @@ export {
   PluginContainer,
   blockPlugin,
   styles,
+  removeTextStyleProps,
 };
 
 const getRenderer = (
   renderer,
   rules,
   style,
+  mergeStyle,
   onLinkPress,
   maxTopLevelChildren,
   topLevelMaxExceededItem,
@@ -68,15 +69,28 @@ const getRenderer = (
       );
     }
   } else {
+    let useStyles = {};
+
+    if (mergeStyle === true) {
+      Object.keys(styles).forEach(value => {
+        useStyles[value] = {
+          ...styles[value],
+          ...style[value],
+        };
+      });
+    } else {
+      useStyles = {
+        ...styles,
+        ...style,
+      };
+    }
+
     return new AstRenderer(
       {
         ...renderRules,
         ...(rules || {}),
       },
-      {
-        ...styles,
-        ...style,
-      },
+      useStyles,
       onLinkPress,
       maxTopLevelChildren,
       topLevelMaxExceededItem,
@@ -97,21 +111,19 @@ const getMarkdownParser = (markdownit, plugins) => {
   return md;
 };
 
-/**
- * react-native-markdown-display
- */
 const Markdown = ({
   children,
   renderer = null,
   rules = null,
   plugins = [],
   style = null,
+  mergeStyle = false,
   markdownit = MarkdownIt({
     typographer: true,
   }),
   onLinkPress,
   maxTopLevelChildren = null,
-  topLevelMaxExceededItem = <Text>...</Text>,
+  topLevelMaxExceededItem = <Text key="dotdotdot">...</Text>,
   allowedImageHandlers = [
     'data:image/png;base64',
     'data:image/gif;base64',
@@ -127,6 +139,7 @@ const Markdown = ({
         renderer,
         rules,
         style,
+        mergeStyle,
         onLinkPress,
         maxTopLevelChildren,
         topLevelMaxExceededItem,
@@ -139,6 +152,7 @@ const Markdown = ({
       renderer,
       rules,
       style,
+      mergeStyle,
       topLevelMaxExceededItem,
       allowedImageHandlers,
       defaultImageHandler,
@@ -152,9 +166,6 @@ const Markdown = ({
   return parser(children, momoizedRenderer.render, markdownParser);
 };
 
-/**
- * Definition of the prop types
- */
 Markdown.propTypes = {
   children: PropTypes.node.isRequired,
   renderer: PropTypes.oneOfType([
@@ -192,6 +203,7 @@ Markdown.propTypes = {
   markdownit: PropTypes.instanceOf(MarkdownIt),
   plugins: PropTypes.arrayOf(PropTypes.instanceOf(PluginContainer)),
   style: PropTypes.any,
+  mergeStyle: PropTypes.bool,
   allowedImageHandlers: PropTypes.arrayOf(PropTypes.string),
   defaultImageHandler: PropTypes.string,
 };

src/index.js

@@ -1,8 +1,8 @@
 import getUniqueID from './util/getUniqueID';
 import convertAdditionalStyles from './util/convertAdditionalStyles';
-/**
- *
- */
+
+import textStyleProps from './data/textStyleProps';
+
 export default class AstRenderer {
   /**
    *
@@ -25,29 +25,6 @@ export default class AstRenderer {
     this._topLevelMaxExceededItem = topLevelMaxExceededItem;
     this._allowedImageHandlers = allowedImageHandlers;
     this._defaultImageHandler = defaultImageHandler;
-
-    // this is all the style props that are unique to <Text> components as of 07/Nov/2019
-    this._textStyleProps = [
-      'textShadowOffset',
-      'color',
-      'fontSize',
-      'fontStyle',
-      'fontWeight',
-      'lineHeight',
-      'textAlign',
-      'textDecorationLine',
-      'textShadowColor',
-      'fontFamily',
-      'textShadowRadius',
-      'includeFontPadding',
-      'textAlignVertical',
-      'fontVariant',
-      'letterSpacing',
-      'textDecorationColor',
-      'textDecorationStyle',
-      'textTransform',
-      'writingDirection',
-    ];
   }
 
   /**
@@ -63,6 +40,7 @@ export default class AstRenderer {
         `${type} renderRule not defined example: <Markdown rules={renderRules}>`,
       );
     }
+
     return renderFunction;
   };
 
@@ -72,19 +50,33 @@ export default class AstRenderer {
    * @param parentNodes
    * @return {*}
    */
-  renderNode = (node, parentNodes) => {
+  renderNode = (node, parentNodes, isRoot = false) => {
     const renderFunction = this.getRenderFunction(node.type);
-
     const parents = [...parentNodes];
+
     parents.unshift(node);
 
-    if (node.type === 'text') {
+    // calculate the children first
+
+    let children = node.children.map(value => {
+      return this.renderNode(value, parents);
+    });
+
+    // text node type is a special case because it is always the 'last' element in a chain
+
+    if (
+      node.type === 'text' ||
+      node.type === 'list_item' ||
+      node.type === 'code_inline' ||
+      node.type === 'code_block' ||
+      node.type === 'fence'
+    ) {
       // we build up a style object for text types, this effectively grabs the styles from parents and
       // applies them in order of priority parent (most) to child (least) priority
       // so that if we overwride the text style, it does not overwrite a header1 style, for instance.
       const styleObj = {};
 
-      for (let a = 0; a < parentNodes.length; a++) {
+      for (let a = parentNodes.length - 1; a > -1; a--) {
         // grab and additional attributes specified by markdown-it
         let refStyle = {};
 
@@ -105,18 +97,16 @@ export default class AstRenderer {
         const arr = Object.keys(refStyle);
 
         for (let b = 0; b < arr.length; b++) {
-          if (this._textStyleProps.includes(arr[b])) {
+          if (textStyleProps.includes(arr[b])) {
             styleObj[arr[b]] = refStyle[arr[b]];
           }
         }
       }
 
-      return renderFunction(node, [], parentNodes, this._style, styleObj);
+      return renderFunction(node, children, parentNodes, this._style, styleObj);
     }
 
-    const children = node.children.map(value => {
-      return this.renderNode(value, parents);
-    });
+    // render any special types of nodes that have different renderRule function signatures
 
     if (node.type === 'link' || node.type === 'blocklink') {
       return renderFunction(
@@ -139,26 +129,29 @@ export default class AstRenderer {
       );
     }
 
-    return renderFunction(node, children, parentNodes, this._style);
-  };
-
-  /**
-   *
-   * @param nodes
-   * @return {*}
-   */
-  render = nodes => {
-    let children = nodes.map(value => this.renderNode(value, []));
-    const root = {type: 'root', key: getUniqueID()};
+    // cull top level children
 
     if (
+      isRoot === true &&
       this._maxTopLevelChildren &&
       children.length > this._maxTopLevelChildren
     ) {
       children = children.slice(0, this._maxTopLevelChildren);
       children.push(this._topLevelMaxExceededItem);
     }
 
-    return this.getRenderFunction(root.type)(root, children, null, this._style);
+    // render anythign else that has a normal signature
+
+    return renderFunction(node, children, parentNodes, this._style);
+  };
+
+  /**
+   *
+   * @param nodes
+   * @return {*}
+   */
+  render = nodes => {
+    const root = {type: 'root', key: getUniqueID(), children: nodes};
+    return this.renderNode(root, [], true);
   };
 }