@contentful/field-editor-markdown 1.4.0 → 1.5.1

package/dist/cjs/MarkdownEditor.js

@@ -160,6 +160,7 @@ function MarkdownEditor(props) {
         value: currentValue,
         previewComponents: props.previewComponents
     })), _react.createElement(_MarkdownBottomBar.MarkdownBottomBar, null, _react.createElement(_MarkdownBottomBar.MarkdownHelp, {
+        mode: selectedTab,
         onClick: openMarkdownHelp
     })), _react.createElement(_MarkdownConstraints.MarkdownConstraints, {
         sdk: props.sdk,
@@ -168,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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "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 _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) {
@@ -227,18 +227,14 @@ const MarkdownPreview = _react.memo((props)=>{
     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(_reactmarkdown.default, {
         className: styles.root,
         rehypePlugins: [
-            _rehyperaw.default
+            _rehyperaw.default,
+            _rehypesanitize.default
         ],
         remarkPlugins: [
             _remarkgfm.default
@@ -252,7 +248,7 @@ const MarkdownPreview = _react.memo((props)=>{
                     Embedly: props.previewComponents?.embedly
                 })
         }
-    }, cleanHTML));
+    }, (0, _replaceMailtoAmp.replaceMailtoAmp)(props.value)));
 });
 MarkdownPreview.displayName = 'MarkdownPreview';
 const _default = MarkdownPreview;

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,6 +17,7 @@ _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");
@@ -74,73 +75,59 @@ function _interop_require_wildcard(obj, nodeInterop) {
 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'
@@ -177,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
         })
@@ -206,7 +193,7 @@ const ZenModeModalDialog = (props)=>{
                 props.saveValueToSDK(value);
             });
         }
-    })), showPreview && _react.createElement("div", {
+    })), showPreview && _react.createElement(_f36components.Grid.Item, {
         className: styles.previewSplit
     }, _react.createElement(_react.Suspense, {
         fallback: _react.createElement(_MarkdownPreviewSkeleton.default, null)
@@ -215,7 +202,7 @@ const ZenModeModalDialog = (props)=>{
         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),
@@ -237,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);
         }
@@ -247,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/esm/MarkdownEditor.js

@@ -98,6 +98,7 @@ export function MarkdownEditor(props) {
         value: currentValue,
         previewComponents: props.previewComponents
     })), React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
+        mode: selectedTab,
         onClick: openMarkdownHelp
     })), React.createElement(MarkdownConstraints, {
         sdk: props.sdk,
@@ -106,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,9 +1,9 @@
 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 rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import { replaceMailtoAmp } from '../utils/replaceMailtoAmp';
 const styles = {
@@ -173,18 +173,14 @@ 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(ReactMarkdown, {
         className: styles.root,
         rehypePlugins: [
-            rehypeRaw
+            rehypeRaw,
+            rehypeSanitize
         ],
         remarkPlugins: [
             remarkGfm
@@ -198,7 +194,7 @@ const MarkdownPreview = React.memo((props)=>{
                     Embedly: props.previewComponents?.embedly
                 })
         }
-    }, cleanHTML));
+    }, replaceMailtoAmp(props.value)));
 });
 MarkdownPreview.displayName = 'MarkdownPreview';
 export default MarkdownPreview;

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,4 +1,5 @@
 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';
@@ -12,73 +13,59 @@ 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'
@@ -115,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
         })
@@ -144,7 +131,7 @@ 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)
@@ -153,7 +140,7 @@ export const ZenModeModalDialog = (props)=>{
         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),
@@ -175,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);
         }
@@ -185,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-markdown",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,26 +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.1",
     "@types/codemirror": "0.0.109",
     "codemirror": "^5.65.11",
     "constate": "^3.2.0",
-    "dompurify": "^2.2.9",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "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.2"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.2.0",
     "react": ">=16.8.0"
   },
-  "gitHead": "a605be7ef5e386a16142f15f170825125cfaee57"
+  "gitHead": "0fc8da4aa8ad8603c3adf4bd77b26ba46de11e33"
 }