@contentful/field-editor-markdown 1.3.1 → 1.4.0

package/dist/cjs/MarkdownEditor.js

@@ -22,7 +22,7 @@ const _fieldeditorshared = require("@contentful/field-editor-shared");
 const _emotion = require("emotion");
 const _MarkdownBottomBar = require("./components/MarkdownBottomBar");
 const _MarkdownConstraints = require("./components/MarkdownConstraints");
-const _MarkdownPreview = require("./components/MarkdownPreview");
+const _MarkdownPreviewSkeleton = _interop_require_default(require("./components/MarkdownPreviewSkeleton"));
 const _MarkdownTabs = require("./components/MarkdownTabs");
 const _MarkdownTextarea = require("./components/MarkdownTextarea/MarkdownTextarea");
 const _MarkdownToolbar = require("./components/MarkdownToolbar");
@@ -72,6 +72,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const MarkdownPreview = _react.lazy(()=>Promise.resolve().then(()=>_interop_require_wildcard(require("./components/MarkdownPreview"))));
 const styles = {
     container: (0, _emotion.css)({
         display: 'flex',
@@ -150,13 +151,15 @@ function MarkdownEditor(props) {
                 setCurrentValue(value);
             });
         }
-    }), selectedTab === 'preview' && _react.createElement(_MarkdownPreview.MarkdownPreview, {
+    }), selectedTab === 'preview' && _react.createElement(_react.Suspense, {
+        fallback: _react.createElement(_MarkdownPreviewSkeleton.default, null)
+    }, _react.createElement(MarkdownPreview, {
         direction: direction,
         minHeight: props.minHeight,
         mode: "default",
         value: currentValue,
         previewComponents: props.previewComponents
-    }), _react.createElement(_MarkdownBottomBar.MarkdownBottomBar, null, _react.createElement(_MarkdownBottomBar.MarkdownHelp, {
+    })), _react.createElement(_MarkdownBottomBar.MarkdownBottomBar, null, _react.createElement(_MarkdownBottomBar.MarkdownHelp, {
         onClick: openMarkdownHelp
     })), _react.createElement(_MarkdownConstraints.MarkdownConstraints, {
         sdk: props.sdk,

package/dist/cjs/components/MarkdownPreview.js

@@ -2,17 +2,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "MarkdownPreview", {
+Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return MarkdownPreview;
+        return _default;
     }
 });
 const _react = _interop_require_wildcard(require("react"));
+const _reactmarkdown = _interop_require_default(require("react-markdown"));
 const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
 const _dompurify = _interop_require_default(require("dompurify"));
 const _emotion = require("emotion");
-const _markdowntojsx = _interop_require_default(require("markdown-to-jsx"));
+const _rehyperaw = _interop_require_default(require("rehype-raw"));
+const _remarkgfm = _interop_require_default(require("remark-gfm"));
 const _replaceMailtoAmp = require("../utils/replaceMailtoAmp");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -70,7 +72,7 @@ const styles = {
     font-family: ${_f36tokens.default.fontStackPrimary};
     line-height: ${_f36tokens.default.lineHeightDefault};
     color: ${_f36tokens.default.gray700};
-    white-space: pre-line;
+    white-space: normal;
 
     h1,
     h2,
@@ -212,7 +214,7 @@ function MarkdownLink(props) {
     const { Embedly , children , ...rest } = props;
     if (props.className === 'embedly-card' && Embedly) {
         return _react.createElement(Embedly, {
-            url: props.href
+            url: props.href ?? ''
         });
     }
     return _react.createElement("a", {
@@ -222,7 +224,7 @@ function MarkdownLink(props) {
     }, children);
 }
 const MarkdownPreview = _react.memo((props)=>{
-    const className = (0, _emotion.cx)(styles.root, props.minHeight !== undefined ? (0, _emotion.css)({
+    const className = (0, _emotion.cx)(props.minHeight !== undefined ? (0, _emotion.css)({
         minHeight: props.minHeight
     }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.direction === 'rtl' ? styles.rtl : undefined);
     const cleanHTML = _react.useMemo(()=>{
@@ -233,17 +235,24 @@ const MarkdownPreview = _react.memo((props)=>{
     return _react.createElement("div", {
         className: className,
         "data-test-id": "markdown-preview"
-    }, _react.createElement(_markdowntojsx.default, {
-        options: {
-            overrides: {
-                a: {
-                    component: MarkdownLink,
-                    props: {
-                        Embedly: props.previewComponents?.embedly
-                    }
-                }
-            }
+    }, _react.createElement(_reactmarkdown.default, {
+        className: styles.root,
+        rehypePlugins: [
+            _rehyperaw.default
+        ],
+        remarkPlugins: [
+            _remarkgfm.default
+        ],
+        remarkRehypeOptions: {
+            allowDangerousHtml: true
+        },
+        components: {
+            a: (markdownProps)=>_react.createElement(MarkdownLink, {
+                    ...markdownProps,
+                    Embedly: props.previewComponents?.embedly
+                })
         }
     }, cleanHTML));
 });
 MarkdownPreview.displayName = 'MarkdownPreview';
+const _default = MarkdownPreview;

package/dist/cjs/components/MarkdownPreviewSkeleton.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return MarkdownPreviewSkeleton;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    root: (0, _emotion.css)({
+        border: `1px solid ${_f36tokens.default.gray400}`,
+        borderWidth: '0 1px',
+        minHeight: '300px',
+        padding: `${_f36tokens.default.spacingL}`
+    })
+};
+function MarkdownPreviewSkeleton() {
+    return _react.default.createElement(_f36components.Skeleton.Container, {
+        className: styles.root
+    }, _react.default.createElement(_f36components.Skeleton.DisplayText, null), _react.default.createElement(_f36components.Skeleton.BodyText, {
+        offsetTop: 37,
+        numberOfLines: 5
+    }));
+}

package/dist/cjs/dialogs/ZenModeModalDialog.js

@@ -21,7 +21,7 @@ const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
 const _emotion = require("emotion");
 const _MarkdownBottomBar = require("../components/MarkdownBottomBar");
-const _MarkdownPreview = require("../components/MarkdownPreview");
+const _MarkdownPreviewSkeleton = _interop_require_default(require("../components/MarkdownPreviewSkeleton"));
 const _MarkdownTextarea = require("../components/MarkdownTextarea/MarkdownTextarea");
 const _MarkdownToolbar = require("../components/MarkdownToolbar");
 const _CheatsheetModalDialog = require("../dialogs/CheatsheetModalDialog");
@@ -71,6 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const MarkdownPreview = _react.lazy(()=>Promise.resolve().then(()=>_interop_require_wildcard(require("../components/MarkdownPreview"))));
 const styles = {
     root: (0, _emotion.css)({
         position: 'fixed',
@@ -207,12 +208,14 @@ const ZenModeModalDialog = (props)=>{
         }
     })), showPreview && _react.createElement("div", {
         className: styles.previewSplit
-    }, _react.createElement(_MarkdownPreview.MarkdownPreview, {
+    }, _react.createElement(_react.Suspense, {
+        fallback: _react.createElement(_MarkdownPreviewSkeleton.default, null)
+    }, _react.createElement(MarkdownPreview, {
         direction: direction,
         mode: "zen",
         value: currentValue,
         previewComponents: props.previewComponents
-    })), showPreview && _react.createElement("div", {
+    }))), showPreview && _react.createElement("div", {
         className: styles.separator
     }), showPreview && _react.createElement("button", {
         className: (0, _emotion.cx)(styles.button, styles.hideButton),

package/dist/cjs/index.js

@@ -13,7 +13,7 @@ _export(exports, {
         return _MarkdownEditor.MarkdownEditorConnected;
     },
     MarkdownPreview: function() {
-        return _MarkdownPreview.MarkdownPreview;
+        return _MarkdownPreview.default;
     },
     openMarkdownDialog: function() {
         return _openMarkdownDialog.openMarkdownDialog;
@@ -24,6 +24,11 @@ _export(exports, {
 });
 require("./codemirrorImports");
 const _MarkdownEditor = require("./MarkdownEditor");
-const _MarkdownPreview = require("./components/MarkdownPreview");
+const _MarkdownPreview = _interop_require_default(require("./components/MarkdownPreview"));
 const _openMarkdownDialog = require("./dialogs/openMarkdownDialog");
 const _renderMarkdownDialog = require("./dialogs/renderMarkdownDialog");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/dist/esm/MarkdownEditor.js

@@ -4,12 +4,13 @@ import { FieldConnector } from '@contentful/field-editor-shared';
 import { css } from 'emotion';
 import { MarkdownBottomBar, MarkdownHelp } from './components/MarkdownBottomBar';
 import { MarkdownConstraints } from './components/MarkdownConstraints';
-import { MarkdownPreview } from './components/MarkdownPreview';
+import MarkdownPreviewSkeleton from './components/MarkdownPreviewSkeleton';
 import { MarkdownTabs } from './components/MarkdownTabs';
 import { MarkdownTextarea } from './components/MarkdownTextarea/MarkdownTextarea';
 import { MarkdownToolbar } from './components/MarkdownToolbar';
 import { openCheatsheetModal } from './dialogs/CheatsheetModalDialog';
 import { createMarkdownActions } from './MarkdownActions';
+const MarkdownPreview = React.lazy(()=>import('./components/MarkdownPreview'));
 const styles = {
     container: css({
         display: 'flex',
@@ -88,13 +89,15 @@ export function MarkdownEditor(props) {
                 setCurrentValue(value);
             });
         }
-    }), selectedTab === 'preview' && React.createElement(MarkdownPreview, {
+    }), selectedTab === 'preview' && React.createElement(React.Suspense, {
+        fallback: React.createElement(MarkdownPreviewSkeleton, null)
+    }, React.createElement(MarkdownPreview, {
         direction: direction,
         minHeight: props.minHeight,
         mode: "default",
         value: currentValue,
         previewComponents: props.previewComponents
-    }), React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
+    })), React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
         onClick: openMarkdownHelp
     })), React.createElement(MarkdownConstraints, {
         sdk: props.sdk,

package/dist/esm/components/MarkdownPreview.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 import tokens from '@contentful/f36-tokens';
 import DOMPurify from 'dompurify';
 import { css, cx } from 'emotion';
-import Markdown from 'markdown-to-jsx';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { replaceMailtoAmp } from '../utils/replaceMailtoAmp';
 const styles = {
     root: css`
@@ -16,7 +18,7 @@ const styles = {
     font-family: ${tokens.fontStackPrimary};
     line-height: ${tokens.lineHeightDefault};
     color: ${tokens.gray700};
-    white-space: pre-line;
+    white-space: normal;
 
     h1,
     h2,
@@ -158,7 +160,7 @@ function MarkdownLink(props) {
     const { Embedly , children , ...rest } = props;
     if (props.className === 'embedly-card' && Embedly) {
         return React.createElement(Embedly, {
-            url: props.href
+            url: props.href ?? ''
         });
     }
     return React.createElement("a", {
@@ -167,8 +169,8 @@ function MarkdownLink(props) {
         rel: "noopener noreferrer"
     }, children);
 }
-export const MarkdownPreview = React.memo((props)=>{
-    const className = cx(styles.root, props.minHeight !== undefined ? css({
+const MarkdownPreview = React.memo((props)=>{
+    const className = cx(props.minHeight !== undefined ? css({
         minHeight: props.minHeight
     }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.direction === 'rtl' ? styles.rtl : undefined);
     const cleanHTML = React.useMemo(()=>{
@@ -179,17 +181,24 @@ export const MarkdownPreview = React.memo((props)=>{
     return React.createElement("div", {
         className: className,
         "data-test-id": "markdown-preview"
-    }, React.createElement(Markdown, {
-        options: {
-            overrides: {
-                a: {
-                    component: MarkdownLink,
-                    props: {
-                        Embedly: props.previewComponents?.embedly
-                    }
-                }
-            }
+    }, React.createElement(ReactMarkdown, {
+        className: styles.root,
+        rehypePlugins: [
+            rehypeRaw
+        ],
+        remarkPlugins: [
+            remarkGfm
+        ],
+        remarkRehypeOptions: {
+            allowDangerousHtml: true
+        },
+        components: {
+            a: (markdownProps)=>React.createElement(MarkdownLink, {
+                    ...markdownProps,
+                    Embedly: props.previewComponents?.embedly
+                })
         }
     }, cleanHTML));
 });
 MarkdownPreview.displayName = 'MarkdownPreview';
+export default MarkdownPreview;

package/dist/esm/components/MarkdownPreviewSkeleton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Skeleton } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    root: css({
+        border: `1px solid ${tokens.gray400}`,
+        borderWidth: '0 1px',
+        minHeight: '300px',
+        padding: `${tokens.spacingL}`
+    })
+};
+export default function MarkdownPreviewSkeleton() {
+    return React.createElement(Skeleton.Container, {
+        className: styles.root
+    }, React.createElement(Skeleton.DisplayText, null), React.createElement(Skeleton.BodyText, {
+        offsetTop: 37,
+        numberOfLines: 5
+    }));
+}

package/dist/esm/dialogs/ZenModeModalDialog.js

@@ -3,12 +3,13 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { css, cx } from 'emotion';
 import { MarkdownBottomBar, MarkdownHelp } from '../components/MarkdownBottomBar';
-import { MarkdownPreview } from '../components/MarkdownPreview';
+import MarkdownPreviewSkeleton from '../components/MarkdownPreviewSkeleton';
 import { MarkdownTextarea } from '../components/MarkdownTextarea/MarkdownTextarea';
 import { MarkdownToolbar } from '../components/MarkdownToolbar';
 import { openCheatsheetModal } from '../dialogs/CheatsheetModalDialog';
 import { createMarkdownActions } from '../MarkdownActions';
 import { MarkdownDialogType } from '../types';
+const MarkdownPreview = React.lazy(()=>import('../components/MarkdownPreview'));
 const styles = {
     root: css({
         position: 'fixed',
@@ -145,12 +146,14 @@ export const ZenModeModalDialog = (props)=>{
         }
     })), showPreview && React.createElement("div", {
         className: styles.previewSplit
+    }, React.createElement(React.Suspense, {
+        fallback: React.createElement(MarkdownPreviewSkeleton, null)
     }, React.createElement(MarkdownPreview, {
         direction: direction,
         mode: "zen",
         value: currentValue,
         previewComponents: props.previewComponents
-    })), showPreview && React.createElement("div", {
+    }))), showPreview && React.createElement("div", {
         className: styles.separator
     }), showPreview && React.createElement("button", {
         className: cx(styles.button, styles.hideButton),

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import './codemirrorImports';
 export { MarkdownEditorConnected as MarkdownEditor } from './MarkdownEditor';
-export { MarkdownPreview } from './components/MarkdownPreview';
+export { default as MarkdownPreview } from './components/MarkdownPreview';
 export { openMarkdownDialog } from './dialogs/openMarkdownDialog';
 export { renderMarkdownDialog } from './dialogs/renderMarkdownDialog';

package/dist/types/components/MarkdownPreview.d.ts

@@ -10,5 +10,5 @@ type MarkdownPreviewProps = {
     value: string;
     previewComponents?: PreviewComponents;
 };
-export declare const MarkdownPreview: React.MemoExoticComponent<(props: MarkdownPreviewProps) => React.JSX.Element>;
-export {};
+declare const MarkdownPreview: React.MemoExoticComponent<(props: MarkdownPreviewProps) => React.JSX.Element>;
+export default MarkdownPreview;

package/dist/types/components/MarkdownPreviewSkeleton.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function MarkdownPreviewSkeleton(): React.JSX.Element;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import './codemirrorImports';
 export { MarkdownEditorConnected as MarkdownEditor } from './MarkdownEditor';
-export { MarkdownPreview } from './components/MarkdownPreview';
+export { default as MarkdownPreview } from './components/MarkdownPreview';
 export { openMarkdownDialog } from './dialogs/openMarkdownDialog';
 export { renderMarkdownDialog } from './dialogs/renderMarkdownDialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-markdown",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -40,13 +40,14 @@
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/field-editor-shared": "^1.3.1",
     "@types/codemirror": "0.0.109",
-    "@types/markdown-to-jsx": "6.11.3",
     "codemirror": "^5.65.11",
     "constate": "^3.2.0",
     "dompurify": "^2.2.9",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
-    "markdown-to-jsx": "^7.1.1"
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^6.1.1",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
@@ -58,5 +59,5 @@
     "@contentful/app-sdk": "^4.2.0",
     "react": ">=16.8.0"
   },
-  "gitHead": "ca904b19ca794a2c40d82e1f7ede9e0be3560f22"
+  "gitHead": "a605be7ef5e386a16142f15f170825125cfaee57"
 }