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

package/dist/cjs/MarkdownActions.spec.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _InsertLinkModalDialog = require("./dialogs/InsertLinkModalDialog");
+const _InsertTableModalDialog = require("./dialogs/InsertTableModalDialog");
+const _SpecialCharacterModalDialog = require("./dialogs/SpecialCharacterModalDialog");
+const _ZenModeModalDialog = require("./dialogs/ZenModeModalDialog");
+const _MarkdownActions = require("./MarkdownActions");
+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()
+    }));
+const mockedOpenInsertLinkDialog = _InsertLinkModalDialog.openInsertLinkDialog;
+const mockedOpenInsertSpecialCharacter = _SpecialCharacterModalDialog.openInsertSpecialCharacter;
+const mockedOpenInsertTableDialog = _InsertTableModalDialog.openInsertTableDialog;
+const mockedOpenZenMode = _ZenModeModalDialog.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 = (0, _MarkdownActions.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 = (0, _MarkdownActions.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 = (0, _MarkdownActions.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 = (0, _MarkdownActions.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 = (0, _MarkdownActions.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/cjs/MarkdownEditor.js

@@ -19,7 +19,7 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _MarkdownBottomBar = require("./components/MarkdownBottomBar");
 const _MarkdownConstraints = require("./components/MarkdownConstraints");
 const _MarkdownPreviewSkeleton = /*#__PURE__*/ _interop_require_default(require("./components/MarkdownPreviewSkeleton"));
@@ -76,7 +76,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const MarkdownPreview = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./components/MarkdownPreview"))));
 const styles = {
-    container: (0, _emotion.css)({
+    container: (0, _css.css)({
         display: 'flex',
         flexDirection: 'column',
         fontFamily: _f36tokens.default.fontStackPrimary

package/dist/cjs/components/HeadingSelector.js

@@ -52,10 +52,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const HeadingSelector = (props)=>{
+    const [isOpen, setIsOpen] = _react.useState(false);
     const handleMenuClick = (heading)=>{
+        setIsOpen(false);
         props.onSelect(heading);
     };
-    return /*#__PURE__*/ _react.createElement(_f36components.Menu, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Trigger, null, props.children), /*#__PURE__*/ _react.createElement(_f36components.Menu.List, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
+    return /*#__PURE__*/ _react.createElement(_f36components.Menu, {
+        isOpen: isOpen,
+        onClose: ()=>setIsOpen(false)
+    }, /*#__PURE__*/ _react.createElement(_f36components.Menu.Trigger, null, props.renderTrigger({
+        isOpen,
+        onClick: ()=>setIsOpen((current)=>!current)
+    })), /*#__PURE__*/ _react.createElement(_f36components.Menu.List, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
         testId: "markdown-action-button-heading-h1",
         onClick: ()=>handleMenuClick('h1')
     }, "Heading 1"), /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {

package/dist/cjs/components/MarkdownBottomBar.js

@@ -22,7 +22,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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const SANITIZE_LINK = 'https://en.wikipedia.org/wiki/HTML_sanitization';
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'flex',
         justifyContent: 'space-between',
         background: _f36tokens.default.gray100,
@@ -80,7 +80,7 @@ const styles = {
         borderBottomRightRadius: _f36tokens.default.borderRadiusSmall,
         padding: `${_f36tokens.default.spacingXs} ${_f36tokens.default.spacingS}`
     }),
-    help: (0, _emotion.css)({
+    help: (0, _css.css)({
         color: _f36tokens.default.gray700,
         fontSize: _f36tokens.default.fontSizeS,
         '& button, & a': {

package/dist/cjs/components/MarkdownConstraints.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "MarkdownConstraints", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _fieldeditorshared = require("@contentful/field-editor-shared");
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'flex',
         justifyContent: 'space-between',
         fontSize: _f36tokens.default.fontSizeM,

package/dist/cjs/components/MarkdownPreview.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactmarkdown = /*#__PURE__*/ _interop_require_default(require("react-markdown"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _rehyperaw = /*#__PURE__*/ _interop_require_default(require("rehype-raw"));
 const _rehypesanitize = /*#__PURE__*/ _interop_require_default(require("rehype-sanitize"));
 const _remarkgfm = /*#__PURE__*/ _interop_require_default(require("remark-gfm"));
@@ -63,7 +63,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    root: (0, _emotion.css)`
+    root: (0, _css.css)`
     border: 1px solid ${_f36tokens.default.gray400};
     border-width: 0 1px;
     word-wrap: break-word;
@@ -198,17 +198,17 @@ const styles = {
       display: block;
     }
   `,
-    framed: (0, _emotion.css)({
+    framed: (0, _css.css)({
         height: '100%',
         maxHeight: '500px',
         overflowY: 'auto'
     }),
-    zen: (0, _emotion.css)({
+    zen: (0, _css.css)({
         maxWidth: '650px',
         margin: '0 auto',
         border: 'none !important'
     }),
-    rtl: (0, _emotion.css)({
+    rtl: (0, _css.css)({
         direction: 'rtl'
     })
 };
@@ -226,7 +226,7 @@ function MarkdownLink(props) {
     }, children);
 }
 const MarkdownPreview = /*#__PURE__*/ _react.memo((props)=>{
-    const className = (0, _emotion.cx)(props.minHeight !== undefined ? (0, _emotion.css)({
+    const className = (0, _css.cx)(props.minHeight !== undefined ? (0, _css.css)({
         minHeight: props.minHeight
     }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.direction === 'rtl' ? styles.rtl : undefined);
     return /*#__PURE__*/ _react.createElement("div", {

package/dist/cjs/components/MarkdownPreviewSkeleton.js

@@ -11,14 +11,14 @@ Object.defineProperty(exports, "default", {
 const _react = /*#__PURE__*/ _interop_require_default(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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         border: `1px solid ${_f36tokens.default.gray400}`,
         borderWidth: '0 1px',
         minHeight: '300px',

package/dist/cjs/components/MarkdownTabs.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "MarkdownTabs", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         display: 'flex',
         zIndex: 10,
         flexDirection: 'row',
@@ -67,7 +67,7 @@ const styles = {
         marginBottom: '-1px',
         fontSize: _f36tokens.default.fontSizeM
     }),
-    tab: (0, _emotion.css)({
+    tab: (0, _css.css)({
         cursor: 'pointer',
         color: _f36tokens.default.gray700,
         padding: _f36tokens.default.spacingXs,
@@ -85,14 +85,14 @@ const styles = {
         },
         transition: `all ${_f36tokens.default.transitionEasingDefault} ${_f36tokens.default.transitionDurationShort}`
     }),
-    inactiveTab: (0, _emotion.css)({
+    inactiveTab: (0, _css.css)({
         background: _f36tokens.default.gray200,
         borderBottomColor: _f36tokens.default.gray400,
         '&:hover': {
             background: _f36tokens.default.gray300
         }
     }),
-    disabledTab: (0, _emotion.css)({
+    disabledTab: (0, _css.css)({
         cursor: 'not-allowed',
         '&:hover': {
             background: _f36tokens.default.gray200,
@@ -102,7 +102,7 @@ const styles = {
 };
 function MarkdownTabItem(props) {
     return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _emotion.cx)(styles.tab, {
+        className: (0, _css.cx)(styles.tab, {
             [styles.inactiveTab]: props.isActive === false,
             [styles.disabledTab]: props.isDisabled === true
         }),

package/dist/cjs/components/MarkdownTextarea/MarkdownTextarea.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "MarkdownTextarea", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
-const _emotion = require("emotion");
+const _css = require("@emotion/css");
 const _createMarkdownEditor = require("./createMarkdownEditor");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -59,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    root: (0, _emotion.css)`
+    root: (0, _css.css)`
     border: 1px solid ${_f36tokens.default.gray400};
     border-width: 0 1px;
     overflow-y: auto;
@@ -127,19 +127,19 @@ const styles = {
       text-decoration: underline;
     }
   `,
-    framed: (0, _emotion.css)({
+    framed: (0, _css.css)({
         '.CodeMirror': {
             maxHeight: '500px'
         }
     }),
-    zen: (0, _emotion.css)({
+    zen: (0, _css.css)({
         border: 'none !important',
         '.CodeMirror-lines': {
             maxWidth: '650px',
             margin: '0 auto'
         }
     }),
-    disabled: (0, _emotion.css)`
+    disabled: (0, _css.css)`
     .CodeMirror {
       background: ${_f36tokens.default.gray100};
       cursor: 'not-allowed';
@@ -177,7 +177,7 @@ const MarkdownTextarea = /*#__PURE__*/ _react.default.memo((props)=>{
     }, [
         editor
     ]);
-    const className = (0, _emotion.cx)(styles.root, props.minHeight !== undefined ? (0, _emotion.css)({
+    const className = (0, _css.cx)(styles.root, props.minHeight !== undefined ? (0, _css.css)({
         minHeight: props.minHeight
     }) : undefined, props.mode === 'default' ? styles.framed : styles.zen, props.disabled && styles.disabled);
     return /*#__PURE__*/ _react.default.createElement("div", {

package/dist/cjs/components/MarkdownToolbar.js

@@ -23,7 +23,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 _HeadingSelector = require("./HeadingSelector");
 const _icons = /*#__PURE__*/ _interop_require_wildcard(require("./icons"));
 const _InsertLinkSelector = require("./InsertLinkSelector");
@@ -74,7 +74,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const styles = {
-    root: (0, _emotion.css)({
+    root: (0, _css.css)({
         position: 'relative',
         zIndex: Number(_f36tokens.default.zIndexWorkbenchHeader),
         border: `1px solid ${_f36tokens.default.gray400}`,
@@ -83,44 +83,69 @@ const styles = {
         borderTopLeftRadius: _f36tokens.default.borderRadiusSmall,
         overflow: 'hidden'
     }),
-    button: (0, _emotion.css)({
+    button: (0, _css.css)({
         height: '30px',
         width: '36px',
         marginLeft: _f36tokens.default.spacing2Xs,
         marginRight: _f36tokens.default.spacing2Xs
     }),
-    icon: (0, _emotion.css)({
+    icon: (0, _css.css)({
         fill: _f36tokens.default.gray700,
         verticalAlign: 'middle'
     }),
-    zenButton: (0, _emotion.css)({
+    zenButton: (0, _css.css)({
         marginLeft: _f36tokens.default.spacingXs
     }),
-    zenButtonPressed: (0, _emotion.css)({
+    zenButtonPressed: (0, _css.css)({
         backgroundColor: _f36tokens.default.gray400
     }),
-    tooltip: (0, _emotion.css)({
-        zIndex: Number(_f36tokens.default.zIndexTooltip)
+    tooltip: (0, _css.css)({
+        zIndex: Number(_f36tokens.default.zIndexTooltip),
+        pointerEvents: 'none'
     })
 };
 const ToolbarButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const { tooltip, onClick, children, className, variant = 'transparent', tooltipPlace = 'top', isDisabled = false, ...otherProps } = props;
-    return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
-        className: styles.tooltip,
-        usePortal: true,
-        placement: tooltipPlace,
-        content: tooltip
-    }, /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
+    const pointerTriggeredRef = _react.useRef(false);
+    const handlePointerDown = _react.useCallback((event)=>{
+        if (isDisabled || !onClick || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        pointerTriggeredRef.current = true;
+        onClick(event);
+    }, [
+        isDisabled,
+        onClick
+    ]);
+    const handleClick = _react.useCallback((event)=>{
+        if (pointerTriggeredRef.current) {
+            pointerTriggeredRef.current = false;
+            return;
+        }
+        onClick?.(event);
+    }, [
+        onClick
+    ]);
+    return /*#__PURE__*/ _react.createElement(_f36components.IconButton, {
         ...otherProps,
         ref: ref,
-        className: (0, _emotion.cx)(styles.button, className),
+        className: (0, _css.cx)(styles.button, className),
         isDisabled: isDisabled,
-        onClick: onClick,
+        onMouseDown: handlePointerDown,
+        onClick: handleClick,
         variant: variant,
         size: "small",
         icon: children,
-        "aria-label": tooltip
-    }));
+        "aria-label": tooltip,
+        withTooltip: true,
+        tooltipProps: {
+            className: styles.tooltip,
+            usePortal: true,
+            placement: tooltipPlace,
+            content: tooltip
+        }
+    });
 });
 ToolbarButton.displayName = 'ToolbarButton';
 function MainButtons(props) {
@@ -130,16 +155,19 @@ function MainButtons(props) {
             if (heading && props.actions.headings[heading]) {
                 props.actions.headings[heading]();
             }
-        }
-    }, /*#__PURE__*/ _react.createElement(ToolbarButton, {
-        isDisabled: props.disabled,
-        testId: "markdown-action-button-heading",
-        tooltip: "Headings",
-        tooltipPlace: tooltipPlace
-    }, /*#__PURE__*/ _react.createElement(_f36icons.TextHIcon, {
-        "aria-label": "Headings",
-        className: styles.icon
-    }))), /*#__PURE__*/ _react.createElement(ToolbarButton, {
+        },
+        renderTrigger: ({ isOpen, onClick })=>/*#__PURE__*/ _react.createElement(ToolbarButton, {
+                isDisabled: props.disabled,
+                testId: "markdown-action-button-heading",
+                tooltip: "Headings",
+                tooltipPlace: tooltipPlace,
+                onClick: onClick,
+                "aria-expanded": isOpen
+            }, /*#__PURE__*/ _react.createElement(_f36icons.TextHIcon, {
+                "aria-label": "Headings",
+                className: styles.icon
+            }))
+    }), /*#__PURE__*/ _react.createElement(ToolbarButton, {
         isDisabled: props.disabled,
         testId: "markdown-action-button-bold",
         tooltip: "Bold",
@@ -300,6 +328,9 @@ function AdditionalButtons(props) {
 }
 function DefaultMarkdownToolbar(props) {
     const [showAdditional, setShowAdditional] = _react.useState(false);
+    const toggleAdditionalActions = _react.useCallback(()=>{
+        setShowAdditional((current)=>!current);
+    }, []);
     return /*#__PURE__*/ _react.createElement("div", {
         className: styles.root
     }, /*#__PURE__*/ _react.createElement(_f36components.Flex, {
@@ -311,9 +342,8 @@ function DefaultMarkdownToolbar(props) {
         isDisabled: props.disabled,
         testId: "markdown-action-button-toggle-additional",
         tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
-        onClick: ()=>{
-            setShowAdditional(!showAdditional);
-        }
+        "aria-expanded": showAdditional,
+        onClick: toggleAdditionalActions
     }, /*#__PURE__*/ _react.createElement(_f36icons.DotsThreeIcon, {
         className: styles.icon
     }))), /*#__PURE__*/ _react.createElement(_f36components.Flex, null, /*#__PURE__*/ _react.createElement(_InsertLinkSelector.InsertLinkSelector, {
@@ -353,7 +383,7 @@ function ZenMarkdownToolbar(props) {
         testId: "markdown-action-button-zen-close",
         variant: "secondary",
         size: "small",
-        className: (0, _emotion.cx)(styles.zenButton, styles.zenButtonPressed),
+        className: (0, _css.cx)(styles.zenButton, styles.zenButtonPressed),
         onClick: ()=>{
             props.actions.closeZenMode();
         },