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

package/dist/esm/components/MarkdownPreviewSkeleton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Skeleton } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     root: css({
         border: `1px solid ${tokens.gray400}`,

package/dist/esm/components/MarkdownTabs.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 const styles = {
     root: css({
         display: 'flex',

package/dist/esm/components/MarkdownTextarea/MarkdownTextarea.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { createMarkdownEditor } from './createMarkdownEditor';
 const styles = {
     root: css`

package/dist/esm/components/MarkdownToolbar.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Flex, IconButton, Tooltip } from '@contentful/f36-components';
+import { Flex, IconButton } from '@contentful/f36-components';
 import { CodeSimpleIcon, TextBIcon, TextItalicIcon, TextHIcon, MinusIcon, LinkSimpleIcon, ListBulletsIcon, ListNumbersIcon, DotsThreeIcon, QuotesIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { HeadingSelector } from './HeadingSelector';
 import * as Icons from './icons';
 import { InsertLinkSelector } from './InsertLinkSelector';
@@ -33,27 +33,52 @@ const styles = {
         backgroundColor: tokens.gray400
     }),
     tooltip: css({
-        zIndex: Number(tokens.zIndexTooltip)
+        zIndex: Number(tokens.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(Tooltip, {
-        className: styles.tooltip,
-        usePortal: true,
-        placement: tooltipPlace,
-        content: tooltip
-    }, /*#__PURE__*/ React.createElement(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(IconButton, {
         ...otherProps,
         ref: ref,
         className: 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) {
@@ -63,16 +88,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(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(TextHIcon, {
+                "aria-label": "Headings",
+                className: styles.icon
+            }))
+    }), /*#__PURE__*/ React.createElement(ToolbarButton, {
         isDisabled: props.disabled,
         testId: "markdown-action-button-bold",
         tooltip: "Bold",
@@ -233,6 +261,9 @@ function AdditionalButtons(props) {
 }
 export 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(Flex, {
@@ -244,9 +275,8 @@ export 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(DotsThreeIcon, {
         className: styles.icon
     }))), /*#__PURE__*/ React.createElement(Flex, null, /*#__PURE__*/ React.createElement(InsertLinkSelector, {

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

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MarkdownToolbar } from './MarkdownToolbar';
+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();
+        render(/*#__PURE__*/ React.createElement(MarkdownToolbar, props));
+        await userEvent.click(screen.getByRole('button', {
+            name: 'Headings'
+        }));
+        await userEvent.click(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();
+        render(/*#__PURE__*/ React.createElement(MarkdownToolbar, props));
+        const toggle = screen.getByRole('button', {
+            name: 'More actions'
+        });
+        expect(toggle).toHaveAttribute('aria-expanded', 'false');
+        await userEvent.click(toggle);
+        expect(screen.getByRole('button', {
+            name: 'Hide additional actions'
+        })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByRole('button', {
+            name: 'Undo'
+        })).toBeInTheDocument();
+    });
+    it('triggers a toolbar action once per click', async ()=>{
+        const props = createProps();
+        render(/*#__PURE__*/ React.createElement(MarkdownToolbar, props));
+        await userEvent.click(screen.getByRole('button', {
+            name: 'Bold'
+        }));
+        expect(props.actions.simple.bold).toHaveBeenCalledTimes(1);
+    });
+    it('still supports keyboard-style activation', async ()=>{
+        const props = createProps();
+        render(/*#__PURE__*/ React.createElement(MarkdownToolbar, props));
+        const bold = screen.getByRole('button', {
+            name: 'Bold'
+        });
+        bold.focus();
+        await userEvent.keyboard('{Enter}');
+        expect(props.actions.simple.bold).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/esm/components/icons.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const srOnly = css({
     position: 'absolute',
     width: '1px',

package/dist/esm/dialogs/CheatsheetModalDialog.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Heading, ModalContent, TextLink } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { MarkdownDialogType } from '../types';
 const styles = {
     flexColumnContainer: css({

package/dist/esm/dialogs/EmdebExternalContentDialog.js

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ModalContent, ModalControls, Text, TextLink, Button, Checkbox, Radio, Form, FormControl, TextInput } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
+import { css } from '@emotion/css';
 import { i18n as $_i18n } from "@lingui/core";
-import { css } from 'emotion';
 import { MarkdownDialogType } from '../types';
 import { isValidUrl } from '../utils/isValidUrl';
 const styles = {

package/dist/esm/dialogs/SpecialCharacterModalDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ModalContent, ModalControls, Text, Flex, Button, Tooltip } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { MarkdownDialogType } from '../types';
 import { specialCharacters } from '../utils/specialCharacters';
 const styles = {
@@ -21,7 +21,8 @@ const styles = {
         backgroundColor: tokens.gray100
     }),
     tooltip: css({
-        zIndex: 1000
+        zIndex: 1000,
+        pointerEvents: 'none'
     }),
     button: css({
         marginTop: tokens.spacingM,

package/dist/esm/dialogs/ZenModeModalDialog.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Grid } from '@contentful/f36-components';
 import { CaretLeftIcon, CaretRightIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { MarkdownBottomBar, MarkdownHelp } from '../components/MarkdownBottomBar';
 import MarkdownPreviewSkeleton from '../components/MarkdownPreviewSkeleton';
 import { MarkdownTextarea } from '../components/MarkdownTextarea/MarkdownTextarea';

package/dist/types/MarkdownActions.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { HeadingType } from '../types';
 export declare const HeadingSelector: (props: {
-    children: React.ReactElement;
     onSelect: (heading: HeadingType) => void;
-    tooltip?: string | undefined;
+    renderTrigger: (props: {
+        isOpen: boolean;
+        onClick: () => void;
+    }) => React.ReactElement;
 }) => React.JSX.Element;

package/dist/types/components/MarkdownToolbar.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-markdown",
-  "version": "1.15.4-canary.1+82cb101d",
+  "version": "2.0.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -36,13 +36,13 @@
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {
-    "@contentful/f36-components": "^5.4.1",
-    "@contentful/f36-icons": "^5.4.1",
-    "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/field-editor-shared": "^3.0.1-canary.1+82cb101d",
+    "@contentful/f36-components": "^6.7.1",
+    "@contentful/f36-icons": "^6.7.1",
+    "@contentful/f36-tokens": "^6.1.2",
+    "@contentful/field-editor-shared": "^3.0.0",
+    "@emotion/css": "^11.13.5",
     "@types/codemirror": "0.0.109",
     "codemirror": "^5.65.11",
-    "emotion": "^10.0.17",
     "lodash": "^4.17.15",
     "react-markdown": "^9.0.1",
     "rehype-raw": "^7.0.0",
@@ -52,16 +52,17 @@
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@contentful/app-sdk": "^4.29.0",
-    "@contentful/field-editor-test-utils": "^1.8.1-canary.49+82cb101d",
-    "@lingui/core": "5.3.0"
+    "@contentful/field-editor-test-utils": "^1.8.0",
+    "@lingui/core": "5.3.0",
+    "@testing-library/user-event": "^13.1.9"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.29.0",
     "@lingui/core": "^5.3.0",
-    "react": ">=16.8.0"
+    "react": ">=18.3.1"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "82cb101d676beeda9178245deec48f983d664f88"
+  "gitHead": "edde3372ed00ed0fd6a798233284618983383869"
 }