@contentful/field-editor-markdown 1.15.4-canary.1 → 2.0.0

package/dist/cjs/components/MarkdownToolbar.spec.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+require("@testing-library/jest-dom/extend-expect");
+const _react1 = require("@testing-library/react");
+const _userevent = /*#__PURE__*/ _interop_require_default(require("@testing-library/user-event"));
+const _MarkdownToolbar = require("./MarkdownToolbar");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+const createProps = ()=>({
+        canUploadAssets: true,
+        disabled: false,
+        mode: 'default',
+        actions: {
+            headings: {
+                h1: jest.fn(),
+                h2: jest.fn(),
+                h3: jest.fn()
+            },
+            simple: {
+                bold: jest.fn(),
+                italic: jest.fn(),
+                quote: jest.fn(),
+                ol: jest.fn(),
+                ul: jest.fn(),
+                strike: jest.fn(),
+                code: jest.fn(),
+                hr: jest.fn(),
+                indent: jest.fn(),
+                dedent: jest.fn()
+            },
+            history: {
+                undo: jest.fn(),
+                redo: jest.fn()
+            },
+            insertLink: jest.fn(),
+            insertSpecialCharacter: jest.fn(),
+            insertTable: jest.fn(),
+            organizeLinks: jest.fn(),
+            embedExternalContent: jest.fn(),
+            linkExistingMedia: jest.fn(),
+            addNewMedia: jest.fn(),
+            openZenMode: jest.fn(),
+            closeZenMode: jest.fn()
+        }
+    });
+describe('MarkdownToolbar', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    it('opens the heading menu and calls the selected heading action', async ()=>{
+        const props = createProps();
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MarkdownToolbar.MarkdownToolbar, props));
+        await _userevent.default.click(_react1.screen.getByRole('button', {
+            name: 'Headings'
+        }));
+        await _userevent.default.click(_react1.screen.getByRole('menuitem', {
+            name: 'Heading 1'
+        }));
+        expect(props.actions.headings.h1).toHaveBeenCalledTimes(1);
+    });
+    it('toggles additional actions and exposes the expanded state', async ()=>{
+        const props = createProps();
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MarkdownToolbar.MarkdownToolbar, props));
+        const toggle = _react1.screen.getByRole('button', {
+            name: 'More actions'
+        });
+        expect(toggle).toHaveAttribute('aria-expanded', 'false');
+        await _userevent.default.click(toggle);
+        expect(_react1.screen.getByRole('button', {
+            name: 'Hide additional actions'
+        })).toHaveAttribute('aria-expanded', 'true');
+        expect(_react1.screen.getByRole('button', {
+            name: 'Undo'
+        })).toBeInTheDocument();
+    });
+    it('triggers a toolbar action once per click', async ()=>{
+        const props = createProps();
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MarkdownToolbar.MarkdownToolbar, props));
+        await _userevent.default.click(_react1.screen.getByRole('button', {
+            name: 'Bold'
+        }));
+        expect(props.actions.simple.bold).toHaveBeenCalledTimes(1);
+    });
+    it('still supports keyboard-style activation', async ()=>{
+        const props = createProps();
+        (0, _react1.render)(/*#__PURE__*/ _react.createElement(_MarkdownToolbar.MarkdownToolbar, props));
+        const bold = _react1.screen.getByRole('button', {
+            name: 'Bold'
+        });
+        bold.focus();
+        await _userevent.default.keyboard('{Enter}');
+        expect(props.actions.simple.bold).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/cjs/components/icons.js

@@ -41,7 +41,7 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -83,7 +83,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const srOnly = (0, _emotion.css)({
+const srOnly = (0, _css.css)({
     position: 'absolute',
     width: '1px',
     height: '1px',

package/dist/cjs/dialogs/CheatsheetModalDialog.js

@@ -19,7 +19,7 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _types = require("../types");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -68,56 +68,56 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    flexColumnContainer: (0, _emotion.css)({
+    flexColumnContainer: (0, _css.css)({
         display: 'flex',
         flexWrap: 'nowrap'
     }),
-    flexColumn: (0, _emotion.css)({
+    flexColumn: (0, _css.css)({
         flexGrow: 1
     }),
-    verticalDivider: (0, _emotion.css)({
+    verticalDivider: (0, _css.css)({
         borderRight: `1px solid ${_f36tokens.default.gray500}`,
         paddingRight: _f36tokens.default.spacing3Xl,
         marginRight: _f36tokens.default.spacing2Xl
     }),
-    preview: (0, _emotion.css)({
+    preview: (0, _css.css)({
         display: 'inline-block',
         paddingRight: _f36tokens.default.spacingL,
         width: '50%'
     }),
-    unOrderedListPreview: (0, _emotion.css)({
+    unOrderedListPreview: (0, _css.css)({
         listStyleType: 'disc',
         marginLeft: _f36tokens.default.spacingS
     }),
-    orderedListPreview: (0, _emotion.css)({
+    orderedListPreview: (0, _css.css)({
         listStyleType: 'decimal',
         marginLeft: _f36tokens.default.spacingS
     }),
-    markup: (0, _emotion.css)({
+    markup: (0, _css.css)({
         display: 'inline-block',
         color: _f36tokens.default.gray600,
         paddingLeft: _f36tokens.default.spacingL,
         width: '50%'
     }),
-    h1: (0, _emotion.css)({
+    h1: (0, _css.css)({
         fontSize: _f36tokens.default.fontSize2Xl
     }),
-    h2: (0, _emotion.css)({
+    h2: (0, _css.css)({
         fontSize: _f36tokens.default.fontSizeXl
     }),
-    h3: (0, _emotion.css)({
+    h3: (0, _css.css)({
         fontSize: _f36tokens.default.fontSizeL
     }),
-    helpItem: (0, _emotion.css)({
+    helpItem: (0, _css.css)({
         marginBottom: _f36tokens.default.spacingS,
         display: 'flex',
         alignItems: 'flex-end',
         height: _f36tokens.default.spacingXl
     }),
-    helpLink: (0, _emotion.css)({
+    helpLink: (0, _css.css)({
         margin: 'auto'
     }),
-    flexRowContainer: (0, _emotion.css)({
+    flexRowContainer: (0, _css.css)({
         display: 'flex',
         width: '100%',
         justifyContent: 'center',
@@ -130,13 +130,13 @@ const CheatsheetModalDialog = ()=>{
     }, /*#__PURE__*/ _react.createElement("div", {
         className: styles.flexColumnContainer
     }, /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _emotion.cx)(styles.flexColumn, styles.verticalDivider)
+        className: (0, _css.cx)(styles.flexColumn, styles.verticalDivider)
     }, /*#__PURE__*/ _react.createElement("div", {
         className: styles.helpItem
     }, /*#__PURE__*/ _react.createElement(_f36components.Heading, {
         marginBottom: "none",
         as: "h1",
-        className: (0, _emotion.cx)(styles.preview, styles.h1)
+        className: (0, _css.cx)(styles.preview, styles.h1)
     }, "H1"), /*#__PURE__*/ _react.createElement("div", {
         className: styles.markup
     }, "# heading")), /*#__PURE__*/ _react.createElement("div", {
@@ -144,7 +144,7 @@ const CheatsheetModalDialog = ()=>{
     }, /*#__PURE__*/ _react.createElement(_f36components.Heading, {
         marginBottom: "none",
         as: "h2",
-        className: (0, _emotion.cx)(styles.preview, styles.h2)
+        className: (0, _css.cx)(styles.preview, styles.h2)
     }, "H2"), /*#__PURE__*/ _react.createElement("div", {
         className: styles.markup
     }, "## heading")), /*#__PURE__*/ _react.createElement("div", {
@@ -152,7 +152,7 @@ const CheatsheetModalDialog = ()=>{
     }, /*#__PURE__*/ _react.createElement(_f36components.Heading, {
         marginBottom: "none",
         as: "h3",
-        className: (0, _emotion.cx)(styles.preview, styles.h3)
+        className: (0, _css.cx)(styles.preview, styles.h3)
     }, "H3"), /*#__PURE__*/ _react.createElement("div", {
         className: styles.markup
     }, "### heading")), /*#__PURE__*/ _react.createElement("div", {

package/dist/cjs/dialogs/EmdebExternalContentDialog.js

@@ -19,8 +19,8 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _css = require("@emotion/css");
 const _core = require("@lingui/core");
-const _emotion = require("emotion");
 const _types = require("../types");
 const _isValidUrl = require("../utils/isValidUrl");
 function _interop_require_default(obj) {
@@ -70,17 +70,17 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    widthFiledGroup: (0, _emotion.css)({
+    widthFiledGroup: (0, _css.css)({
         display: 'flex',
         flexWrap: 'nowrap',
         alignItems: 'flex-start'
     }),
-    radioButtonGroup: (0, _emotion.css)({
+    radioButtonGroup: (0, _css.css)({
         display: 'inline-flex',
         alignItems: 'flex-start',
         paddingTop: _f36tokens.default.spacingXl
     }),
-    radioButton: (0, _emotion.css)({
+    radioButton: (0, _css.css)({
         marginLeft: _f36tokens.default.spacingM
     })
 };

package/dist/cjs/dialogs/SpecialCharacterModalDialog.js

@@ -19,7 +19,7 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _types = require("../types");
 const _specialCharacters = require("../utils/specialCharacters");
 function _interop_require_default(obj) {
@@ -69,11 +69,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    buttonPanel: (0, _emotion.css)({
+    buttonPanel: (0, _css.css)({
         display: 'flex',
         flexWrap: 'wrap'
     }),
-    charButton: (0, _emotion.css)({
+    charButton: (0, _css.css)({
         border: `1px solid ${_f36tokens.default.gray500}`,
         width: '4.1rem',
         height: '4.1rem',
@@ -81,13 +81,14 @@ const styles = {
         marginTop: _f36tokens.default.spacing2Xs,
         marginRight: _f36tokens.default.spacing2Xs
     }),
-    selectedCharButton: (0, _emotion.css)({
+    selectedCharButton: (0, _css.css)({
         backgroundColor: _f36tokens.default.gray100
     }),
-    tooltip: (0, _emotion.css)({
-        zIndex: 1000
+    tooltip: (0, _css.css)({
+        zIndex: 1000,
+        pointerEvents: 'none'
     }),
-    button: (0, _emotion.css)({
+    button: (0, _css.css)({
         marginTop: _f36tokens.default.spacingM,
         marginRight: _f36tokens.default.spacingS
     })

package/dist/cjs/dialogs/ZenModeModalDialog.js

@@ -20,7 +20,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _MarkdownBottomBar = require("../components/MarkdownBottomBar");
 const _MarkdownPreviewSkeleton = /*#__PURE__*/ _interop_require_default(require("../components/MarkdownPreviewSkeleton"));
 const _MarkdownTextarea = require("../components/MarkdownTextarea/MarkdownTextarea");
@@ -76,42 +76,42 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const MarkdownPreview = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("../components/MarkdownPreview"))));
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'grid',
         gridTemplateRows: 'min-content 1fr min-content',
         gridTemplateColumns: '1fr 1px 1fr',
         height: '85vh'
     }),
-    topSplit: (0, _emotion.css)({
+    topSplit: (0, _css.css)({
         gridRow: '1 / 2',
         gridColumn: '1 / 4'
     }),
-    bottomSplit: (0, _emotion.css)({
+    bottomSplit: (0, _css.css)({
         gridRow: '3 / 4',
         gridColumn: '1 / 4'
     }),
-    editorSplit: (0, _emotion.css)({
+    editorSplit: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '1 / 2',
         overflowY: 'scroll'
     }),
-    editorSplitFullscreen: (0, _emotion.css)({
+    editorSplitFullscreen: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '1 / 4',
         overflowY: 'scroll'
     }),
-    previewSplit: (0, _emotion.css)({
+    previewSplit: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '3 / 4',
         overflowY: 'scroll'
     }),
-    separator: (0, _emotion.css)({
+    separator: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '2 / 3',
         backgroundColor: _f36tokens.default.gray400,
         width: '1px'
     }),
-    button: (0, _emotion.css)({
+    button: (0, _css.css)({
         cursor: 'pointer',
         zIndex: 105,
         height: '30px',
@@ -119,19 +119,19 @@ const styles = {
         border: `1px solid ${_f36tokens.default.gray400}`,
         padding: 0
     }),
-    hideButton: (0, _emotion.css)({
+    hideButton: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '2 / 3',
         justifySelf: 'end',
         alignSelf: 'center'
     }),
-    showButton: (0, _emotion.css)({
+    showButton: (0, _css.css)({
         gridRow: '2 / 3',
         gridColumn: '3 / 4',
         justifySelf: 'end',
         alignSelf: 'center'
     }),
-    icon: (0, _emotion.css)({
+    icon: (0, _css.css)({
         verticalAlign: 'middle'
     })
 };
@@ -177,7 +177,7 @@ const ZenModeModalDialog = (props)=>{
         canUploadAssets: false,
         actions: actions
     })), /*#__PURE__*/ _react.createElement(_f36components.Grid.Item, {
-        className: (0, _emotion.cx)(styles.editorSplit, {
+        className: (0, _css.cx)(styles.editorSplit, {
             [styles.editorSplitFullscreen]: showPreview === false
         })
     }, /*#__PURE__*/ _react.createElement(_MarkdownTextarea.MarkdownTextarea, {
@@ -207,7 +207,7 @@ const ZenModeModalDialog = (props)=>{
     }))), showPreview && /*#__PURE__*/ _react.createElement(_f36components.Grid.Item, {
         className: styles.separator
     }), showPreview && /*#__PURE__*/ _react.createElement("button", {
-        className: (0, _emotion.cx)(styles.button, styles.hideButton),
+        className: (0, _css.cx)(styles.button, styles.hideButton),
         "aria-label": "Hide preview",
         onClick: ()=>{
             setShowPreview(false);
@@ -217,7 +217,7 @@ const ZenModeModalDialog = (props)=>{
         size: "tiny",
         className: styles.icon
     })), !showPreview && /*#__PURE__*/ _react.createElement("button", {
-        className: (0, _emotion.cx)(styles.button, styles.showButton),
+        className: (0, _css.cx)(styles.button, styles.showButton),
         "aria-label": "Show preview",
         onClick: ()=>{
             setShowPreview(true);

package/dist/esm/MarkdownActions.spec.js

@@ -0,0 +1,159 @@
+jest.mock('./dialogs/InsertLinkModalDialog', ()=>({
+        openInsertLinkDialog: jest.fn()
+    }));
+jest.mock('./dialogs/SpecialCharacterModalDialog', ()=>({
+        openInsertSpecialCharacter: jest.fn()
+    }));
+jest.mock('./dialogs/InsertTableModalDialog', ()=>({
+        openInsertTableDialog: jest.fn()
+    }));
+jest.mock('./dialogs/ZenModeModalDialog', ()=>({
+        openZenMode: jest.fn()
+    }));
+import { openInsertLinkDialog } from './dialogs/InsertLinkModalDialog';
+import { openInsertTableDialog } from './dialogs/InsertTableModalDialog';
+import { openInsertSpecialCharacter } from './dialogs/SpecialCharacterModalDialog';
+import { openZenMode } from './dialogs/ZenModeModalDialog';
+import { createMarkdownActions } from './MarkdownActions';
+const mockedOpenInsertLinkDialog = openInsertLinkDialog;
+const mockedOpenInsertSpecialCharacter = openInsertSpecialCharacter;
+const mockedOpenInsertTableDialog = openInsertTableDialog;
+const mockedOpenZenMode = openZenMode;
+const createEditor = ()=>({
+        actions: {
+            h1: jest.fn(),
+            h2: jest.fn(),
+            h3: jest.fn(),
+            bold: jest.fn(),
+            italic: jest.fn(),
+            quote: jest.fn(),
+            ol: jest.fn(),
+            ul: jest.fn(),
+            strike: jest.fn(),
+            code: jest.fn(),
+            hr: jest.fn(),
+            indent: jest.fn(),
+            dedent: jest.fn(),
+            undo: jest.fn(),
+            redo: jest.fn(),
+            link: jest.fn(),
+            table: jest.fn()
+        },
+        usePrimarySelection: jest.fn(),
+        getSelectedText: jest.fn(),
+        insert: jest.fn(),
+        getContent: jest.fn(),
+        setContent: jest.fn(),
+        setCursor: jest.fn(),
+        focus: jest.fn()
+    });
+const createSdk = ()=>({
+        dialogs: {},
+        locales: {
+            default: 'en-US',
+            fallbacks: {}
+        },
+        notifier: {
+            success: jest.fn()
+        }
+    });
+describe('createMarkdownActions', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    it('dispatches toolbar actions to the editor', ()=>{
+        const editor = createEditor();
+        const actions = createMarkdownActions({
+            sdk: createSdk(),
+            editor: editor,
+            locale: 'en-US'
+        });
+        actions.headings.h2();
+        actions.simple.bold();
+        actions.simple.ul();
+        actions.history.undo();
+        expect(editor.actions.h2).toHaveBeenCalledTimes(1);
+        expect(editor.actions.bold).toHaveBeenCalledTimes(1);
+        expect(editor.actions.ul).toHaveBeenCalledTimes(1);
+        expect(editor.actions.undo).toHaveBeenCalledTimes(1);
+    });
+    it('opens the link dialog with the selected text and inserts a titled link', async ()=>{
+        const editor = createEditor();
+        const sdk = createSdk();
+        editor.getSelectedText.mockReturnValue('Contentful');
+        mockedOpenInsertLinkDialog.mockResolvedValue({
+            url: 'https://contentful.com',
+            text: 'ignored',
+            title: 'The best headless CMS'
+        });
+        const actions = createMarkdownActions({
+            sdk,
+            editor: editor,
+            locale: 'en-US'
+        });
+        await actions.insertLink();
+        expect(editor.usePrimarySelection).toHaveBeenCalledTimes(1);
+        expect(mockedOpenInsertLinkDialog).toHaveBeenCalledWith(sdk.dialogs, {
+            selectedText: 'Contentful'
+        });
+        expect(editor.actions.link).toHaveBeenCalledWith('https://contentful.com', 'Contentful', 'The best headless CMS');
+    });
+    it('falls back to dialog text when no editor selection exists', async ()=>{
+        const editor = createEditor();
+        editor.getSelectedText.mockReturnValue('');
+        mockedOpenInsertLinkDialog.mockResolvedValue({
+            url: 'https://contentful.com',
+            text: 'Contentful',
+            title: ''
+        });
+        const actions = createMarkdownActions({
+            sdk: createSdk(),
+            editor: editor,
+            locale: 'en-US'
+        });
+        await actions.insertLink();
+        expect(editor.actions.link).toHaveBeenCalledWith('https://contentful.com', 'Contentful', '');
+    });
+    it('inserts special characters and tables from dialog results', async ()=>{
+        const editor = createEditor();
+        mockedOpenInsertSpecialCharacter.mockResolvedValue('€');
+        mockedOpenInsertTableDialog.mockResolvedValue({
+            rows: 2,
+            cols: 3
+        });
+        const actions = createMarkdownActions({
+            sdk: createSdk(),
+            editor: editor,
+            locale: 'en-US'
+        });
+        await actions.insertSpecialCharacter();
+        await actions.insertTable();
+        expect(editor.insert).toHaveBeenCalledWith('€');
+        expect(editor.actions.table).toHaveBeenCalledWith({
+            rows: 2,
+            cols: 3
+        });
+    });
+    it('updates content and restores cursor when zen mode closes', async ()=>{
+        const editor = createEditor();
+        mockedOpenZenMode.mockResolvedValue({
+            value: 'updated markdown',
+            cursor: {
+                line: 2,
+                ch: 4
+            }
+        });
+        const actions = createMarkdownActions({
+            sdk: createSdk(),
+            editor: editor,
+            locale: 'en-US'
+        });
+        await actions.openZenMode();
+        expect(editor.setContent).toHaveBeenCalledWith('updated markdown');
+        expect(editor.setCursor).toHaveBeenCalledWith({
+            line: 2,
+            ch: 4
+        });
+        expect(editor.focus).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/esm/MarkdownEditor.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { FieldConnector } from '@contentful/field-editor-shared';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MarkdownBottomBar, MarkdownHelp } from './components/MarkdownBottomBar';
 import { MarkdownConstraints } from './components/MarkdownConstraints';
 import MarkdownPreviewSkeleton from './components/MarkdownPreviewSkeleton';

package/dist/esm/components/HeadingSelector.js

@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { Menu } from '@contentful/f36-components';
 export const HeadingSelector = (props)=>{
+    const [isOpen, setIsOpen] = React.useState(false);
     const handleMenuClick = (heading)=>{
+        setIsOpen(false);
         props.onSelect(heading);
     };
-    return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(Menu.Trigger, null, props.children), /*#__PURE__*/ React.createElement(Menu.List, null, /*#__PURE__*/ React.createElement(Menu.Item, {
+    return /*#__PURE__*/ React.createElement(Menu, {
+        isOpen: isOpen,
+        onClose: ()=>setIsOpen(false)
+    }, /*#__PURE__*/ React.createElement(Menu.Trigger, null, props.renderTrigger({
+        isOpen,
+        onClick: ()=>setIsOpen((current)=>!current)
+    })), /*#__PURE__*/ React.createElement(Menu.List, null, /*#__PURE__*/ React.createElement(Menu.Item, {
         testId: "markdown-action-button-heading-h1",
         onClick: ()=>handleMenuClick('h1')
     }, "Heading 1"), /*#__PURE__*/ React.createElement(Menu.Item, {

package/dist/esm/components/MarkdownBottomBar.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Paragraph, Stack, TextLink } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const SANITIZE_LINK = 'https://en.wikipedia.org/wiki/HTML_sanitization';
 const styles = {
     root: css({

package/dist/esm/components/MarkdownConstraints.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { CharCounter, CharValidation, ConstraintsUtils } from '@contentful/field-editor-shared';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     root: css({
         display: 'flex',

package/dist/esm/components/MarkdownPreview.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import rehypeRaw from 'rehype-raw';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';