markdown-to-jsx - npm Package Compare versions

Comparing version 6.4.1 to 6.5.0

index.cjs.js

@@ -119,2 +119,3 @@ 'use strict';
 var CR_NEWLINE_R = /\r\n?/g;
+var DETECT_BLOCK_SYNTAX = /(^[-*] |^#+|^ {2,}|^-{2,}|^> )/m;
 var FOOTNOTE_R = /^\[\^(.*)\](:.*)\n/;
@@ -149,3 +150,3 @@ var FOOTNOTE_REFERENCE_R = /^\[\^(.*)\]/;
  */
-var HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>(?=[\s\S]*<\/\1>)((?:[\s\S]*?(?:<\1[^>]*>[\s\S]*?<\/\1>)*[\s\S]*?)*?)<\/\1>\n*/;
+var HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>\s*((?:<\1>[\s\S]*<\/\1>|(?!<\1)[\s\S])*)<\/\1>\n*/;
 
@@ -172,2 +173,3 @@ var HTML_COMMENT_R = /^<!--.*?-->/;
 var REFERENCE_LINK_R = /^\[([^\]]*)\] ?\[([^\]]*)\]/;
+var SHOULD_RENDER_AS_BLOCK_R = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/;
 var TAB_R = /\t/g;
@@ -185,2 +187,10 @@ var TABLE_TRIM_PIPES = /(^ *\||\| *$)/g;
 var TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R = /(^\n+|(\n|\s)+$)/g;
+
+/**
+ * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * it's not clear if the indentation is intentional or just there from how the composer
+ * laid things out.
+ */
+var TRIM_HTML = /^\s*| {4,}|\s*$/g;
+
 var UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;
@@ -595,2 +605,4 @@
 
+    var createElementFn = options.createElement || _react2.default.createElement;
+
     // eslint-disable-next-line no-unused-vars
@@ -604,3 +616,3 @@ function h(tag, props) {
 
-        return _react2.default.createElement.apply(_react2.default, [getTag(tag, options.overrides), _extends({}, overrideProps, props, {
+        return createElementFn.apply(undefined, [getTag(tag, options.overrides), _extends({}, overrideProps, props, {
             className: cx(props && props.className, overrideProps.className) || undefined
@@ -620,3 +632,3 @@ })].concat(children));
             */
-            inline = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/g.test(input) === false;
+            inline = SHOULD_RENDER_AS_BLOCK_R.test(input) === false;
         }
@@ -882,3 +894,3 @@
             parse: function parse(capture, _parse4, state) {
-                var parseFunc = capture[3].match(HTML_BLOCK_ELEMENT_R) ? parseBlock : parseInline;
+                var parseFunc = capture[3].match(HTML_BLOCK_ELEMENT_R) || DETECT_BLOCK_SYNTAX.test(capture[3]) ? parseBlock : parseInline;
 
@@ -891,3 +903,3 @@ return {
                      */
-                    content: parseFunc(_parse4, capture[3].trim(), state),
+                    content: parseFunc(_parse4, capture[3].replace(TRIM_HTML, ''), state),
 
@@ -894,0 +906,0 @@ tag: capture[1]

index.esm.js

@@ -105,2 +105,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 var CR_NEWLINE_R = /\r\n?/g;
+var DETECT_BLOCK_SYNTAX = /(^[-*] |^#+|^ {2,}|^-{2,}|^> )/m;
 var FOOTNOTE_R = /^\[\^(.*)\](:.*)\n/;
@@ -135,3 +136,3 @@ var FOOTNOTE_REFERENCE_R = /^\[\^(.*)\]/;
  */
-var HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>(?=[\s\S]*<\/\1>)((?:[\s\S]*?(?:<\1[^>]*>[\s\S]*?<\/\1>)*[\s\S]*?)*?)<\/\1>\n*/;
+var HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>\s*((?:<\1>[\s\S]*<\/\1>|(?!<\1)[\s\S])*)<\/\1>\n*/;
 
@@ -158,2 +159,3 @@ var HTML_COMMENT_R = /^<!--.*?-->/;
 var REFERENCE_LINK_R = /^\[([^\]]*)\] ?\[([^\]]*)\]/;
+var SHOULD_RENDER_AS_BLOCK_R = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/;
 var TAB_R = /\t/g;
@@ -171,2 +173,10 @@ var TABLE_TRIM_PIPES = /(^ *\||\| *$)/g;
 var TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R = /(^\n+|(\n|\s)+$)/g;
+
+/**
+ * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * it's not clear if the indentation is intentional or just there from how the composer
+ * laid things out.
+ */
+var TRIM_HTML = /^\s*| {4,}|\s*$/g;
+
 var UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;
@@ -581,2 +591,4 @@
 
+    var createElementFn = options.createElement || React.createElement;
+
     // eslint-disable-next-line no-unused-vars
@@ -590,3 +602,3 @@ function h(tag, props) {
 
-        return React.createElement.apply(React, [getTag(tag, options.overrides), _extends({}, overrideProps, props, {
+        return createElementFn.apply(undefined, [getTag(tag, options.overrides), _extends({}, overrideProps, props, {
             className: cx(props && props.className, overrideProps.className) || undefined
@@ -606,3 +618,3 @@ })].concat(children));
             */
-            inline = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/g.test(input) === false;
+            inline = SHOULD_RENDER_AS_BLOCK_R.test(input) === false;
         }
@@ -868,3 +880,3 @@
             parse: function parse(capture, _parse4, state) {
-                var parseFunc = capture[3].match(HTML_BLOCK_ELEMENT_R) ? parseBlock : parseInline;
+                var parseFunc = capture[3].match(HTML_BLOCK_ELEMENT_R) || DETECT_BLOCK_SYNTAX.test(capture[3]) ? parseBlock : parseInline;
 
@@ -877,3 +889,3 @@ return {
                      */
-                    content: parseFunc(_parse4, capture[3].trim(), state),
+                    content: parseFunc(_parse4, capture[3].replace(TRIM_HTML, ''), state),
 
@@ -880,0 +892,0 @@ tag: capture[1]

index.js

@@ -103,2 +103,3 @@ /* @jsx h */
 const CR_NEWLINE_R = /\r\n?/g;
+const DETECT_BLOCK_SYNTAX = /(^[-*] |^#+|^ {2,}|^-{2,}|^> )/m;
 const FOOTNOTE_R = /^\[\^(.*)\](:.*)\n/;
@@ -133,3 +134,3 @@ const FOOTNOTE_REFERENCE_R = /^\[\^(.*)\]/;
  */
-const HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>(?=[\s\S]*<\/\1>)((?:[\s\S]*?(?:<\1[^>]*>[\s\S]*?<\/\1>)*[\s\S]*?)*?)<\/\1>\n*/;
+const HTML_BLOCK_ELEMENT_R = /^ *<([^ >/]+) ?([^>]*)\/{0}>\s*((?:<\1>[\s\S]*<\/\1>|(?!<\1)[\s\S])*)<\/\1>\n*/;
 
@@ -156,2 +157,3 @@ const HTML_COMMENT_R = /^<!--.*?-->/;
 const REFERENCE_LINK_R = /^\[([^\]]*)\] ?\[([^\]]*)\]/;
+const SHOULD_RENDER_AS_BLOCK_R = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/;
 const TAB_R = /\t/g;
@@ -169,2 +171,10 @@ const TABLE_TRIM_PIPES = /(^ *\||\| *$)/g;
 const TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R = /(^\n+|(\n|\s)+$)/g;
+
+/**
+ * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * it's not clear if the indentation is intentional or just there from how the composer
+ * laid things out.
+ */
+const TRIM_HTML = /^\s*| {4,}|\s*$/g;
+
 const UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;
@@ -613,6 +623,9 @@
 
+    const createElementFn = options.createElement || React.createElement;
+
     // eslint-disable-next-line no-unused-vars
     function h (tag, props, ...children) {
         const overrideProps = get(options.overrides, `${tag}.props`, {});
-        return React.createElement(getTag(tag, options.overrides), {
+
+        return createElementFn(getTag(tag, options.overrides), {
             ...overrideProps,
@@ -634,3 +647,3 @@ ...props,
             */
-            inline = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/g.test(input) === false;
+            inline = SHOULD_RENDER_AS_BLOCK_R.test(input) === false;
         }
@@ -908,3 +921,5 @@
             parse (capture, parse, state) {
-                const parseFunc = capture[3].match(HTML_BLOCK_ELEMENT_R) ? parseBlock : parseInline;
+                const parseFunc = (
+                    capture[3].match(HTML_BLOCK_ELEMENT_R) || DETECT_BLOCK_SYNTAX.test(capture[3])
+                ) ? parseBlock : parseInline;
 
@@ -917,3 +932,3 @@ return {
                      */
-                    content: parseFunc(parse, capture[3].trim(), state),
+                    content: parseFunc(parse, capture[3].replace(TRIM_HTML, ''), state),
 
@@ -920,0 +935,0 @@ tag: capture[1],

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "engines": {
@@ -9,0 +9,0 @@ "node": ">= 4"

README.md

@@ -7,8 +7,11 @@ # Markdown Component for React, Preact + Friends
 
-- [Markdown Component for React, Preact + Friends](#markdown-component-for-react-preact--friends)
+- [Markdown Component for React, Preact + Friends](#markdown-component-for-react-preact-friends)
     - [Installation](#installation)
     - [Usage](#usage)
         - [Parsing Options](#parsing-options)
-        - [Override Any HTML Tag's Representation](#override-any-html-tags-representation)
-        - [Rendering Arbitrary React Components](#rendering-arbitrary-react-components)
+            - [options.forceBlock](#optionsforceblock)
+            - [options.forceInline](#optionsforceinline)
+            - [options.overrides - Override Any HTML Tag's Representation](#optionsoverrides---override-any-html-tags-representation)
+            - [options.overrides - Rendering Arbitrary React Components](#optionsoverrides---rendering-arbitrary-react-components)
+            - [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)
         - [Getting the smallest possible bundle size](#getting-the-smallest-possible-bundle-size)
@@ -79,2 +82,3 @@ - [Usage with Preact](#usage-with-preact)
 
+#### options.forceBlock
 By default, the compiler will try to make an intelligent guess about the content passed and wrap it in a `<div>`, `<p>`, or `<span>` as needed to satisfy the "inline"-ness of the markdown. For instance, this string would be considered "inline":
@@ -108,2 +112,3 @@
 
+#### options.forceInline
 The inverse is also available by passing `options.forceInline = true`:
@@ -125,3 +130,3 @@
 
-### Override Any HTML Tag's Representation
+#### options.overrides - Override Any HTML Tag's Representation
 
@@ -184,3 +189,3 @@ Pass the `options.overrides` prop to the compiler or `<Markdown>` component to seamlessly revise the rendered representation of any HTML tag. You can choose to change the component itself, add/change props, or both.
 
-### Rendering Arbitrary React Components
+#### options.overrides - Rendering Arbitrary React Components
 
@@ -304,2 +309,30 @@ One of the most interesting use cases enabled by the HTML syntax processing in `markdown-to-jsx` is the ability to use any kind of element, even ones that aren't real HTML tags like React component classes.
 
+#### options.createElement - Custom React.createElement behavior
+
+Sometimes, you might want to override the `React.createElement` default behavior to hook into the rendering process before the JSX gets rendered. This might be useful to add extra children or modify some props based on runtime conditions. The function mirrors the `React.createElement` function, so the params are [`type, [props], [...children]`](https://reactjs.org/docs/react-api.html#createelement):
+
+```javascript
+import Markdown from 'markdown-to-jsx';
+import React from 'react';
+import {render} from 'react-dom';
+
+const md = `
+# Hello world
+`;
+
+render((
+    <Markdown
+        children={md}
+        options={{
+            createElement(type, props, children) {
+                return (
+                    <div className='parent'>
+                        {React.createElement(type, props, children)}
+                    </div>
+                );
+            }
+        }} />
+), document.body);
+```
+
 ### Getting the smallest possible bundle size
@@ -306,0 +339,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

231310

increased by1.54%

Lines of code

3708

increased by0.79%

Number of lines in readme file

376

increased by9.62%

No dependency changes