markdown-to-jsx - npm Package Compare versions

Comparing version 6.6.7-0 to 6.6.7

index.cjs.js

@@ -190,7 +190,11 @@ 'use strict';
 /**
- * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * Indentation-significant syntaxes 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.
+ *
+ * For code blocks, use fenced blocks instead (```).
+ *
+ * There's more detail on this in the README.
  */
-var TRIM_HTML = /^[ \t]*| {4,}$/gm;
+var TRIM_HTML = /^[ \t]*|[ \t]*$/gm;
 
@@ -197,0 +201,0 @@ var UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;

index.esm.js

@@ -176,7 +176,11 @@ 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; };
 /**
- * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * Indentation-significant syntaxes 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.
+ *
+ * For code blocks, use fenced blocks instead (```).
+ *
+ * There's more detail on this in the README.
  */
-var TRIM_HTML = /^[ \t]*| {4,}$/gm;
+var TRIM_HTML = /^[ \t]*|[ \t]*$/gm;
 
@@ -183,0 +187,0 @@ var UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;

index.js

@@ -172,7 +172,11 @@ /* @jsx h */
 /**
- * Indented-style code blocks cannot be used inside arbitrary HTML at this time because
+ * Indentation-significant syntaxes 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.
+ *
+ * For code blocks, use fenced blocks instead (```).
+ *
+ * There's more detail on this in the README.
  */
-const TRIM_HTML = /^[ \t]*| {4,}$/gm;
+const TRIM_HTML = /^[ \t]*|[ \t]*$/gm;
 
@@ -179,0 +183,0 @@ const UNESCAPE_URL_R = /\\([^0-9A-Z\s])/gi;

package.json

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

README.md

@@ -7,15 +7,19 @@ # 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)
-            - [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)
-        - [Usage with Preact](#usage-with-preact)
-    - [Using The Compiler Directly](#using-the-compiler-directly)
-    - [Changelog](#changelog)
+-   [Markdown Component for React, Preact + Friends](#markdown-component-for-react-preact--friends)
+    -   [Installation](#installation)
+    -   [Usage](#usage)
+        -   [Parsing Options](#parsing-options)
+            -   [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)
+        -   [Usage with Preact](#usage-with-preact)
+    -   [Gotchas](#gotchas)
+        -   [Significant indentation inside arbitrary HTML](#significant-indentation-inside-arbitrary-html)
+            -   [Code blocks](#code-blocks)
+            -   [Nested lists](#nested-lists)
+    -   [Using The Compiler Directly](#using-the-compiler-directly)
+    -   [Changelog](#changelog)
 
@@ -28,11 +32,11 @@ <!-- /TOC -->
 
-  - Arbitrary HTML is supported and parsed into the appropriate JSX representation
+-   Arbitrary HTML is supported and parsed into the appropriate JSX representation
     without `dangerouslySetInnerHTML`
 
-  - Any HTML tags rendered by the compiler and/or `<Markdown>` component can be overridden to include additional
+-   Any HTML tags rendered by the compiler and/or `<Markdown>` component can be overridden to include additional
     props or even a different HTML representation entirely.
 
-  - GFM task list support.
+-   GFM task list support.
 
-  - Fenced code blocks with [highlight.js](https://highlightjs.org/) support.
+-   Fenced code blocks with [highlight.js](https://highlightjs.org/) support.
 
@@ -62,9 +66,5 @@ All this clocks in at around 5 kB gzipped, which is a fraction of the size of most other React markdown components.
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
-render((
-    <Markdown>
-        # Hello world!
-    </Markdown>
-), document.body);
+render(<Markdown># Hello world!</Markdown>, document.body);
 
@@ -78,3 +78,3 @@ /*
 
-\* __NOTE: JSX does not natively preserve newlines in multiline text. In general, writing markdown directly in JSX is discouraged and it's a better idea to keep your content in separate .md files and require them, perhaps using webpack's [raw-loader](https://github.com/webpack-contrib/raw-loader).__
+\* **NOTE: JSX does not natively preserve newlines in multiline text. In general, writing markdown directly in JSX is discouraged and it's a better idea to keep your content in separate .md files and require them, perhaps using webpack's [raw-loader](https://github.com/webpack-contrib/raw-loader).**
 
@@ -84,2 +84,3 @@ ### Parsing Options
 #### 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":
@@ -100,5 +101,3 @@
 ```jsx
-<Markdown options={{ forceBlock: true }}>
-    Hello there old chap!
-</Markdown>
+<Markdown options={{ forceBlock: true }}>Hello there old chap!</Markdown>;
 
@@ -111,12 +110,11 @@ // or
 
-<p>Hello there old chap!</p>
+<p>Hello there old chap!</p>;
 ```
 
 #### options.forceInline
+
 The inverse is also available by passing `options.forceInline = true`:
 
 ```jsx
-<Markdown options={{ forceInline: true }}>
-    # You got it babe!
-</Markdown>
+<Markdown options={{ forceInline: true }}># You got it babe!</Markdown>;
 
@@ -129,3 +127,3 @@ // or
 
-<span># You got it babe!</span>
+<span># You got it babe!</span>;
 ```
@@ -140,8 +138,10 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
 // surprise, it's a div instead!
-const MyParagraph = ({children, ...props}) => (<div {...props}>{children}</div>);
+const MyParagraph = ({ children, ...props }) => (
+    <div {...props}>{children}</div>
+);
 
-render((
+render(
     <Markdown
@@ -157,6 +157,8 @@ options={{
             },
-        }}>
+        }}
+    >
         # Hello world!
-    </Markdown>
-), document.body);
+    </Markdown>,
+    document.body
+);
 
@@ -184,8 +186,8 @@ /*
 
-- `a`: `title`, `href`
-- `img`: `title`, `alt`, `src`
-- `input[type="checkbox"]`: `checked`, `readonly` (specifically, the one rendered by a GFM task list)
-- `ol`: `start`
-- `td`: `style`
-- `th`: `style`
+-   `a`: `title`, `href`
+-   `img`: `title`, `alt`, `src`
+-   `input[type="checkbox"]`: `checked`, `readonly` (specifically, the one rendered by a GFM task list)
+-   `ol`: `start`
+-   `td`: `style`
+-   `th`: `style`
 
@@ -203,3 +205,3 @@ Any conflicts between passed `props` and the specific properties above will be resolved in favor of `markdown-to-jsx`'s code.
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
@@ -217,3 +219,3 @@ import DatePicker from './date-picker';
 
-render((
+render(
     <Markdown
@@ -227,4 +229,6 @@ children={md}
             },
-        }} />
-), document.body);
+        }}
+    />,
+    document.body
+);
 ```
@@ -239,3 +243,3 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
@@ -257,3 +261,3 @@ import DatePicker from './date-picker';
 
-render((
+render(
     <Markdown
@@ -267,4 +271,6 @@ children={md}
             },
-        }} />
-), document.body);
+        }}
+    />,
+    document.body
+);
 ```
@@ -277,3 +283,3 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import withProps from 'recompose/withProps';
@@ -308,3 +314,3 @@
 
-render((
+render(
     <Markdown
@@ -317,4 +323,6 @@ children={md}
             },
-        }} />
-), document.body);
+        }}
+    />,
+    document.body
+);
 ```
@@ -329,3 +337,3 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
@@ -336,3 +344,3 @@ const md = `
 
-render((
+render(
     <Markdown
@@ -343,9 +351,11 @@ children={md}
                 return (
-                    <div className='parent'>
+                    <div className="parent">
                         {React.createElement(type, props, children)}
                     </div>
                 );
-            }
-        }} />
-), document.body);
+            },
+        }}
+    />,
+    document.body
+);
 ```
@@ -359,6 +369,6 @@
 
-- [webpack](https://webpack.js.org/guides/production/#specify-the-environment)
-- [browserify plugin](https://github.com/hughsk/envify)
-- [parcel](https://parceljs.org/production.html)
-- [fuse-box](http://fuse-box.org/plugins/replace-plugin#notes)
+-   [webpack](https://webpack.js.org/guides/production/#specify-the-environment)
+-   [browserify plugin](https://github.com/hughsk/envify)
+-   [parcel](https://parceljs.org/production.html)
+-   [fuse-box](http://fuse-box.org/plugins/replace-plugin#notes)
 
@@ -369,2 +379,54 @@ ### Usage with Preact
 
+## Gotchas
+
+### Significant indentation inside arbitrary HTML
+
+People usually write HTML like this:
+
+```html
+<div>
+    Hey, how are you?
+</div>
+```
+
+Note the leading spaces before the inner content. This sort of thing unfortunately clashes with existing markdown syntaxes since 4 spaces === a code block and other similar collisions.
+
+To get around this, `markdown-to-jsx` strips leading and trailing whitespace inside of arbitrary HTML within markdown. This means that certain syntaxes that use significant whitespace won't work in this edge case.
+
+> NOTE! These syntaxes work just fine when you aren't writing arbitrary HTML wrappers inside your markdown. This is very much an edge case of an edge case. 🙃
+
+#### Code blocks
+
+✅
+
+```md
+<div>
+`​`​`js
+var some = code();
+`​`​`
+</div>
+```
+
+⛔️
+
+```md
+<div>
+    var some = code();
+</div>
+```
+
+#### Nested lists
+
+This won't work at all at the moment. Trying to figure out a solution that will coexist peacefully with all the syntax permutations.
+
+⛔️
+
+```md
+<div>
+* something
+  * something related
+* something else
+</div>
+```
+
 ## Using The Compiler Directly
@@ -375,5 +437,5 @@
 ```jsx
-import {compiler} from 'markdown-to-jsx';
+import { compiler } from 'markdown-to-jsx';
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
@@ -380,0 +442,0 @@ render(compiler('# Hello world!'), document.body);

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244552

increased by0.76%

Lines of code

3904

increased by0.31%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

436

increased by16.58%

No dependency changes