@contentful/field-editor-markdown 1.3.1 → 1.5.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,16 @@ 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, {
+        mode: selectedTab,
         onClick: openMarkdownHelp
     })), _react.createElement(_MarkdownConstraints.MarkdownConstraints, {
         sdk: props.sdk,
@@ -165,7 +169,7 @@ function MarkdownEditor(props) {
 }
 function MarkdownEditorConnected(props) {
     return _react.createElement(_fieldeditorshared.FieldConnector, {
-        throttle: 300,
+        debounce: 300,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled
     }, ({ value , disabled , setValue , externalReset  })=>{

package/dist/cjs/components/MarkdownBottomBar.js

@@ -67,6 +67,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const SANITIZE_LINK = 'https://en.wikipedia.org/wiki/HTML_sanitization';
 const styles = {
     root: (0, _emotion.css)({
         display: 'flex',
@@ -80,7 +81,7 @@ const styles = {
     help: (0, _emotion.css)({
         color: _f36tokens.default.gray700,
         fontSize: _f36tokens.default.fontSizeS,
-        button: {
+        '& button, & a': {
             fontSize: _f36tokens.default.fontSizeS,
             lineHeight: 'inherit'
         }
@@ -92,17 +93,49 @@ function MarkdownCounter(props) {
         className: styles.help
     }, props.words, " ", props.words !== 1 ? 'words' : 'word', ", ", props.characters, ' ', props.characters !== 1 ? 'characters' : 'character');
 }
+function SanitizeMessage() {
+    return _react.createElement("span", null, "The preview of the content in this field will be sanitized.", ' ', _react.createElement(_f36components.TextLink, {
+        as: "a",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        href: SANITIZE_LINK
+    }, "Learn more."));
+}
+function CheatSheetMessage({ onClick  }) {
+    return _react.createElement("span", null, "Format your text like a pro with the", ' ', _react.createElement(_f36components.TextLink, {
+        as: "button",
+        testId: "open-markdown-cheatsheet-button",
+        onClick: onClick
+    }, "markdown cheatsheet"), ".");
+}
 function MarkdownHelp(props) {
+    let content;
+    switch(props.mode){
+        case 'preview':
+            content = _react.createElement(SanitizeMessage, null);
+            break;
+        case 'editor':
+            content = _react.createElement(CheatSheetMessage, {
+                onClick: props.onClick
+            });
+            break;
+        case 'zen':
+            content = _react.createElement(_f36components.Stack, {
+                flexDirection: "column",
+                spacing: "spacing2Xs",
+                alignItems: "flex-start"
+            }, _react.createElement(CheatSheetMessage, {
+                onClick: props.onClick
+            }), _react.createElement(SanitizeMessage, null));
+            break;
+        default:
+            content = null;
+            throw new Error(`Invalid HelpMode provided in MarkdownHelp: ${props.mode}`);
+    }
     return _react.createElement(_f36components.Paragraph, {
         marginBottom: "none",
         className: styles.help
-    }, "Format your text like a pro with the", ' ', _react.createElement(_f36components.TextLink, {
-        as: "button",
-        testId: "open-markdown-cheatsheet-button",
-        onClick: ()=>{
-            props.onClick();
-        }
-    }, "markdown cheatsheet"), ".");
+    }, content);
 }
 function MarkdownBottomBar(props) {
     return _react.createElement("div", {

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 _rehypesanitize = _interop_require_default(require("rehype-sanitize"));
+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,28 +224,31 @@ 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(()=>{
-        return (0, _replaceMailtoAmp.replaceMailtoAmp)(_dompurify.default.sanitize(props.value));
-    }, [
-        props.value
-    ]);
     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,
+            _rehypesanitize.default
+        ],
+        remarkPlugins: [
+            _remarkgfm.default
+        ],
+        remarkRehypeOptions: {
+            allowDangerousHtml: true
+        },
+        components: {
+            a: (markdownProps)=>_react.createElement(MarkdownLink, {
+                    ...markdownProps,
+                    Embedly: props.previewComponents?.embedly
+                })
         }
-    }, cleanHTML));
+    }, (0, _replaceMailtoAmp.replaceMailtoAmp)(props.value)));
 });
 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/components/MarkdownToolbar.js

@@ -105,6 +105,7 @@ const ToolbarButton = _react.forwardRef((props, ref)=>{
     const { tooltip , onClick , children , className , variant ='transparent' , tooltipPlace ='top' , isDisabled =false , ...otherProps } = props;
     return _react.createElement(_f36components.Tooltip, {
         className: styles.tooltip,
+        usePortal: true,
         placement: tooltipPlace,
         content: tooltip
     }, _react.createElement(_f36components.IconButton, {
@@ -337,8 +338,11 @@ function ZenMarkdownToolbar(props) {
     return _react.createElement("div", {
         className: styles.root
     }, _react.createElement(_f36components.Flex, {
-        justifyContent: "space-between"
-    }, _react.createElement(_f36components.Flex, null, _react.createElement(MainButtons, props), _react.createElement(AdditionalButtons, props)), _react.createElement(_f36components.Flex, null, _react.createElement(_InsertLinkSelector.InsertLinkSelector, {
+        justifyContent: "space-between",
+        alignItems: "flex-start"
+    }, _react.createElement(_f36components.Flex, {
+        flexWrap: "wrap"
+    }, _react.createElement(MainButtons, props), _react.createElement(AdditionalButtons, props)), _react.createElement(_f36components.Flex, null, _react.createElement(_InsertLinkSelector.InsertLinkSelector, {
         disabled: props.disabled,
         onSelectExisting: props.actions.linkExistingMedia,
         onAddNew: props.actions.addNewMedia,

package/dist/cjs/dialogs/ZenModeModalDialog.js

@@ -17,11 +17,12 @@ _export(exports, {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
 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,75 +72,62 @@ 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',
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0
+        display: 'grid',
+        gridTemplateRows: 'min-content 1fr min-content',
+        gridTemplateColumns: '1fr 1px 1fr',
+        height: '85vh'
     }),
     topSplit: (0, _emotion.css)({
-        position: 'fixed',
-        top: 0,
-        height: '48px',
-        left: 0,
-        right: 0
+        gridRow: '1 / 2',
+        gridColumn: '1 / 4'
     }),
     bottomSplit: (0, _emotion.css)({
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '36px'
+        gridRow: '3 / 4',
+        gridColumn: '1 / 4'
     }),
     editorSplit: (0, _emotion.css)({
-        width: '50%',
-        position: 'fixed',
-        top: '48px',
-        left: 0,
-        bottom: '36px',
-        overflowX: 'hidden',
+        gridRow: '2 / 3',
+        gridColumn: '1 / 2',
         overflowY: 'scroll'
     }),
     editorSplitFullscreen: (0, _emotion.css)({
-        left: 0,
-        right: 0,
-        width: '100%'
+        gridRow: '2 / 3',
+        gridColumn: '1 / 4',
+        overflowY: 'scroll'
     }),
     previewSplit: (0, _emotion.css)({
-        width: '50%',
-        position: 'fixed',
-        top: '48px',
-        right: 0,
-        bottom: '36px',
-        overflowX: 'hidden',
+        gridRow: '2 / 3',
+        gridColumn: '3 / 4',
         overflowY: 'scroll'
     }),
     separator: (0, _emotion.css)({
-        position: 'fixed',
-        top: '48px',
-        bottom: '36px',
-        width: '1px',
-        background: _f36tokens.default.gray400,
-        left: '50%'
+        gridRow: '2 / 3',
+        gridColumn: '2 / 3',
+        backgroundColor: _f36tokens.default.gray400,
+        width: '1px'
     }),
     button: (0, _emotion.css)({
-        position: 'fixed',
         cursor: 'pointer',
         zIndex: 105,
-        top: '49%',
         height: '30px',
         backgroundColor: _f36tokens.default.gray100,
         border: `1px solid ${_f36tokens.default.gray400}`,
         padding: 0
     }),
     hideButton: (0, _emotion.css)({
-        left: '50%'
+        gridRow: '2 / 3',
+        gridColumn: '2 / 3',
+        justifySelf: 'end',
+        alignSelf: 'center'
     }),
     showButton: (0, _emotion.css)({
-        right: 0,
-        borderRightWidth: 0
+        gridRow: '2 / 3',
+        gridColumn: '3 / 4',
+        justifySelf: 'end',
+        alignSelf: 'center'
     }),
     icon: (0, _emotion.css)({
         verticalAlign: 'middle'
@@ -176,17 +164,17 @@ const ZenModeModalDialog = (props)=>{
         });
     };
     const direction = props.sdk.locales.direction[props.locale] ?? 'ltr';
-    return _react.createElement("div", {
+    return _react.createElement(_f36components.Grid, {
         className: styles.root,
         "data-test-id": "zen-mode-markdown-editor"
-    }, _react.createElement("div", {
+    }, _react.createElement(_f36components.Grid.Item, {
         className: styles.topSplit
     }, _react.createElement(_MarkdownToolbar.MarkdownToolbar, {
         mode: "zen",
         disabled: false,
         canUploadAssets: false,
         actions: actions
-    })), _react.createElement("div", {
+    })), _react.createElement(_f36components.Grid.Item, {
         className: (0, _emotion.cx)(styles.editorSplit, {
             [styles.editorSplitFullscreen]: showPreview === false
         })
@@ -205,14 +193,16 @@ const ZenModeModalDialog = (props)=>{
                 props.saveValueToSDK(value);
             });
         }
-    })), showPreview && _react.createElement("div", {
+    })), showPreview && _react.createElement(_f36components.Grid.Item, {
         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(_f36components.Grid.Item, {
         className: styles.separator
     }), showPreview && _react.createElement("button", {
         className: (0, _emotion.cx)(styles.button, styles.hideButton),
@@ -234,9 +224,10 @@ const ZenModeModalDialog = (props)=>{
         variant: "muted",
         size: "tiny",
         className: styles.icon
-    })), _react.createElement("div", {
+    })), _react.createElement(_f36components.Grid.Item, {
         className: styles.bottomSplit
     }, _react.createElement(_MarkdownBottomBar.MarkdownBottomBar, null, _react.createElement(_MarkdownBottomBar.MarkdownHelp, {
+        mode: "zen",
         onClick: ()=>{
             (0, _CheatsheetModalDialog.openCheatsheetModal)(props.sdk.dialogs);
         }
@@ -244,10 +235,9 @@ const ZenModeModalDialog = (props)=>{
 };
 const openZenMode = (dialogs, options)=>{
     return dialogs.openCurrent({
-        width: 'zen',
+        width: 'fullWidth',
         shouldCloseOnEscapePress: false,
-        minHeight: '100vh',
-        shouldCloseOnOverlayClick: false,
+        shouldCloseOnOverlayClick: true,
         parameters: {
             type: _types.MarkdownDialogType.zenMode,
             initialValue: options.initialValue,

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,16 @@ 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, {
+        mode: selectedTab,
         onClick: openMarkdownHelp
     })), React.createElement(MarkdownConstraints, {
         sdk: props.sdk,
@@ -103,7 +107,7 @@ export function MarkdownEditor(props) {
 }
 export function MarkdownEditorConnected(props) {
     return React.createElement(FieldConnector, {
-        throttle: 300,
+        debounce: 300,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled
     }, ({ value , disabled , setValue , externalReset  })=>{

package/dist/esm/components/MarkdownBottomBar.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Paragraph, TextLink } from '@contentful/f36-components';
+import { Paragraph, Stack, TextLink } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
+const SANITIZE_LINK = 'https://en.wikipedia.org/wiki/HTML_sanitization';
 const styles = {
     root: css({
         display: 'flex',
@@ -15,7 +16,7 @@ const styles = {
     help: css({
         color: tokens.gray700,
         fontSize: tokens.fontSizeS,
-        button: {
+        '& button, & a': {
             fontSize: tokens.fontSizeS,
             lineHeight: 'inherit'
         }
@@ -27,17 +28,49 @@ export function MarkdownCounter(props) {
         className: styles.help
     }, props.words, " ", props.words !== 1 ? 'words' : 'word', ", ", props.characters, ' ', props.characters !== 1 ? 'characters' : 'character');
 }
+function SanitizeMessage() {
+    return React.createElement("span", null, "The preview of the content in this field will be sanitized.", ' ', React.createElement(TextLink, {
+        as: "a",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        href: SANITIZE_LINK
+    }, "Learn more."));
+}
+function CheatSheetMessage({ onClick  }) {
+    return React.createElement("span", null, "Format your text like a pro with the", ' ', React.createElement(TextLink, {
+        as: "button",
+        testId: "open-markdown-cheatsheet-button",
+        onClick: onClick
+    }, "markdown cheatsheet"), ".");
+}
 export function MarkdownHelp(props) {
+    let content;
+    switch(props.mode){
+        case 'preview':
+            content = React.createElement(SanitizeMessage, null);
+            break;
+        case 'editor':
+            content = React.createElement(CheatSheetMessage, {
+                onClick: props.onClick
+            });
+            break;
+        case 'zen':
+            content = React.createElement(Stack, {
+                flexDirection: "column",
+                spacing: "spacing2Xs",
+                alignItems: "flex-start"
+            }, React.createElement(CheatSheetMessage, {
+                onClick: props.onClick
+            }), React.createElement(SanitizeMessage, null));
+            break;
+        default:
+            content = null;
+            throw new Error(`Invalid HelpMode provided in MarkdownHelp: ${props.mode}`);
+    }
     return React.createElement(Paragraph, {
         marginBottom: "none",
         className: styles.help
-    }, "Format your text like a pro with the", ' ', React.createElement(TextLink, {
-        as: "button",
-        testId: "open-markdown-cheatsheet-button",
-        onClick: ()=>{
-            props.onClick();
-        }
-    }, "markdown cheatsheet"), ".");
+    }, content);
 }
 export function MarkdownBottomBar(props) {
     return React.createElement("div", {

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 rehypeSanitize from 'rehype-sanitize';
+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,29 +169,32 @@ 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(()=>{
-        return replaceMailtoAmp(DOMPurify.sanitize(props.value));
-    }, [
-        props.value
-    ]);
     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,
+            rehypeSanitize
+        ],
+        remarkPlugins: [
+            remarkGfm
+        ],
+        remarkRehypeOptions: {
+            allowDangerousHtml: true
+        },
+        components: {
+            a: (markdownProps)=>React.createElement(MarkdownLink, {
+                    ...markdownProps,
+                    Embedly: props.previewComponents?.embedly
+                })
         }
-    }, cleanHTML));
+    }, replaceMailtoAmp(props.value)));
 });
 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/components/MarkdownToolbar.js

@@ -40,6 +40,7 @@ const ToolbarButton = React.forwardRef((props, ref)=>{
     const { tooltip , onClick , children , className , variant ='transparent' , tooltipPlace ='top' , isDisabled =false , ...otherProps } = props;
     return React.createElement(Tooltip, {
         className: styles.tooltip,
+        usePortal: true,
         placement: tooltipPlace,
         content: tooltip
     }, React.createElement(IconButton, {
@@ -272,8 +273,11 @@ export function ZenMarkdownToolbar(props) {
     return React.createElement("div", {
         className: styles.root
     }, React.createElement(Flex, {
-        justifyContent: "space-between"
-    }, React.createElement(Flex, null, React.createElement(MainButtons, props), React.createElement(AdditionalButtons, props)), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
+        justifyContent: "space-between",
+        alignItems: "flex-start"
+    }, React.createElement(Flex, {
+        flexWrap: "wrap"
+    }, React.createElement(MainButtons, props), React.createElement(AdditionalButtons, props)), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
         disabled: props.disabled,
         onSelectExisting: props.actions.linkExistingMedia,
         onAddNew: props.actions.addNewMedia,

package/dist/esm/dialogs/ZenModeModalDialog.js

@@ -1,83 +1,71 @@
 import * as React from 'react';
+import { Grid } from '@contentful/f36-components';
 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',
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0
+        display: 'grid',
+        gridTemplateRows: 'min-content 1fr min-content',
+        gridTemplateColumns: '1fr 1px 1fr',
+        height: '85vh'
     }),
     topSplit: css({
-        position: 'fixed',
-        top: 0,
-        height: '48px',
-        left: 0,
-        right: 0
+        gridRow: '1 / 2',
+        gridColumn: '1 / 4'
     }),
     bottomSplit: css({
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '36px'
+        gridRow: '3 / 4',
+        gridColumn: '1 / 4'
     }),
     editorSplit: css({
-        width: '50%',
-        position: 'fixed',
-        top: '48px',
-        left: 0,
-        bottom: '36px',
-        overflowX: 'hidden',
+        gridRow: '2 / 3',
+        gridColumn: '1 / 2',
         overflowY: 'scroll'
     }),
     editorSplitFullscreen: css({
-        left: 0,
-        right: 0,
-        width: '100%'
+        gridRow: '2 / 3',
+        gridColumn: '1 / 4',
+        overflowY: 'scroll'
     }),
     previewSplit: css({
-        width: '50%',
-        position: 'fixed',
-        top: '48px',
-        right: 0,
-        bottom: '36px',
-        overflowX: 'hidden',
+        gridRow: '2 / 3',
+        gridColumn: '3 / 4',
         overflowY: 'scroll'
     }),
     separator: css({
-        position: 'fixed',
-        top: '48px',
-        bottom: '36px',
-        width: '1px',
-        background: tokens.gray400,
-        left: '50%'
+        gridRow: '2 / 3',
+        gridColumn: '2 / 3',
+        backgroundColor: tokens.gray400,
+        width: '1px'
     }),
     button: css({
-        position: 'fixed',
         cursor: 'pointer',
         zIndex: 105,
-        top: '49%',
         height: '30px',
         backgroundColor: tokens.gray100,
         border: `1px solid ${tokens.gray400}`,
         padding: 0
     }),
     hideButton: css({
-        left: '50%'
+        gridRow: '2 / 3',
+        gridColumn: '2 / 3',
+        justifySelf: 'end',
+        alignSelf: 'center'
     }),
     showButton: css({
-        right: 0,
-        borderRightWidth: 0
+        gridRow: '2 / 3',
+        gridColumn: '3 / 4',
+        justifySelf: 'end',
+        alignSelf: 'center'
     }),
     icon: css({
         verticalAlign: 'middle'
@@ -114,17 +102,17 @@ export const ZenModeModalDialog = (props)=>{
         });
     };
     const direction = props.sdk.locales.direction[props.locale] ?? 'ltr';
-    return React.createElement("div", {
+    return React.createElement(Grid, {
         className: styles.root,
         "data-test-id": "zen-mode-markdown-editor"
-    }, React.createElement("div", {
+    }, React.createElement(Grid.Item, {
         className: styles.topSplit
     }, React.createElement(MarkdownToolbar, {
         mode: "zen",
         disabled: false,
         canUploadAssets: false,
         actions: actions
-    })), React.createElement("div", {
+    })), React.createElement(Grid.Item, {
         className: cx(styles.editorSplit, {
             [styles.editorSplitFullscreen]: showPreview === false
         })
@@ -143,14 +131,16 @@ export const ZenModeModalDialog = (props)=>{
                 props.saveValueToSDK(value);
             });
         }
-    })), showPreview && React.createElement("div", {
+    })), showPreview && React.createElement(Grid.Item, {
         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(Grid.Item, {
         className: styles.separator
     }), showPreview && React.createElement("button", {
         className: cx(styles.button, styles.hideButton),
@@ -172,9 +162,10 @@ export const ZenModeModalDialog = (props)=>{
         variant: "muted",
         size: "tiny",
         className: styles.icon
-    })), React.createElement("div", {
+    })), React.createElement(Grid.Item, {
         className: styles.bottomSplit
     }, React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
+        mode: "zen",
         onClick: ()=>{
             openCheatsheetModal(props.sdk.dialogs);
         }
@@ -182,10 +173,9 @@ export const ZenModeModalDialog = (props)=>{
 };
 export const openZenMode = (dialogs, options)=>{
     return dialogs.openCurrent({
-        width: 'zen',
+        width: 'fullWidth',
         shouldCloseOnEscapePress: false,
-        minHeight: '100vh',
-        shouldCloseOnOverlayClick: false,
+        shouldCloseOnOverlayClick: true,
         parameters: {
             type: MarkdownDialogType.zenMode,
             initialValue: options.initialValue,

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/MarkdownBottomBar.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
+import { MarkdownTab } from 'types';
 export declare function MarkdownCounter(props: {
     words: number;
     characters: number;
 }): React.JSX.Element;
+type HelpMode = MarkdownTab | 'zen';
 export declare function MarkdownHelp(props: {
     onClick: () => void;
+    mode: HelpMode;
 }): React.JSX.Element;
 export declare function MarkdownBottomBar(props: {
     children: React.ReactNode;
 }): React.JSX.Element;
+export {};

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.5.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,25 +38,25 @@
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-icons": "^4.1.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.3.1",
+    "@contentful/field-editor-shared": "^1.4.0",
     "@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",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@contentful/app-sdk": "^4.2.0",
-    "@contentful/field-editor-test-utils": "^1.4.1",
-    "@types/dompurify": "^2.2.2"
+    "@contentful/field-editor-test-utils": "^1.4.1"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.2.0",
     "react": ">=16.8.0"
   },
-  "gitHead": "ca904b19ca794a2c40d82e1f7ede9e0be3560f22"
+  "gitHead": "2db95226af0417c42aae8d1be85796fc8774e283"
 }