@contentful/field-editor-rich-text 4.20.14 → 5.0.0

package/dist/esm/plugins/List/components/List.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 const baseStyle = css`
   padding: 0;
   margin: 0 0 1.25rem 1.25rem;

package/dist/esm/plugins/List/components/ListItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const style = css`
   margin: 0;
   list-style: inherit;

package/dist/esm/plugins/Marks/Bold.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextBIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createBoldPlugin as createDefaultBoldPlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { someHtmlElement } from '../../internal/queries';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';

package/dist/esm/plugins/Marks/Code.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { CodeSimpleIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createCodePlugin as createDefaultCodePlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';
 export const ToolbarCodeButton = createMarkToolbarButton({

package/dist/esm/plugins/Marks/Italic.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextItalicIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createItalicPlugin as createDefaultItalicPlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { someHtmlElement } from '../../internal/queries';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';

package/dist/esm/plugins/Marks/Strikethrough.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextStrikethroughIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createStrikethroughPlugin as createDefaultStrikethroughPlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';
 const styles = {

package/dist/esm/plugins/Marks/Subscript.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { Icon } from '@contentful/f36-icon';
 import { TextSubscriptIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createSubscriptPlugin as createDefaultSubscriptPlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';
 const styles = {
@@ -14,7 +15,8 @@ const styles = {
 export const ToolbarSubscriptButton = createMarkToolbarButton({
     title: 'Subscript',
     mark: MARKS.SUBSCRIPT,
-    icon: /*#__PURE__*/ React.createElement(TextSubscriptIcon, {
+    icon: /*#__PURE__*/ React.createElement(Icon, {
+        as: TextSubscriptIcon,
         viewBox: "0 0 23 18"
     })
 });

package/dist/esm/plugins/Marks/Superscript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextSuperscriptIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { createSuperscriptPlugin as createDefaultSuperscriptPlugin } from '@udecode/plate-basic-marks';
-import { css } from 'emotion';
 import { createMarkToolbarButton } from './components/MarkToolbarButton';
 import { buildMarkEventHandler } from './helpers';
 const styles = {

package/dist/esm/plugins/Marks/components/MarkToolbarButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Menu } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { focus } from '../../../helpers/editor';
 import { isMarkActive } from '../../../internal/queries';

package/dist/esm/plugins/Paragraph/Paragraph.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const styles = {
     [BLOCKS.PARAGRAPH]: css`
     line-height: ${tokens.lineHeightDefault};

package/dist/esm/plugins/Quote/components/Quote.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const style = css({
     margin: '0 0 1.3125rem',
     borderLeft: `6px solid ${tokens.gray200}`,

package/dist/esm/plugins/Table/components/Cell.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useSelected } from 'slate-react';
 import { TableActions } from './TableActions';
 const style = css`

package/dist/esm/plugins/Table/components/HeaderCell.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useSelected } from 'slate-react';
 import { TableActions } from './TableActions';
 const style = css`

package/dist/esm/plugins/Table/components/Row.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const style = css`
   border: 1px solid ${tokens.gray400};
   border-collapse: collapse;

package/dist/esm/plugins/Table/components/Table.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 const style = css`
   margin-bottom: 1.5em;
   border-collapse: collapse;

package/dist/esm/plugins/Table/components/TableActions.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { IconButton, Menu } from '@contentful/f36-components';
 import { CaretDownIcon } from '@contentful/f36-icons';
 import { BLOCKS } from '@contentful/rich-text-types';
+import { css } from '@emotion/css';
 import { deleteColumn, deleteRow, deleteTable } from '@udecode/plate-table';
-import { css } from 'emotion';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { getNodeEntryFromSelection, getTableSize } from '../../../helpers/editor';
 import { withoutNormalizing } from '../../../internal';

package/dist/esm/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -4,7 +4,7 @@ import { Icon } from '@contentful/f36-components';
 import { ImageSquareIcon, EmbeddedBlockIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { useSdkContext } from '../../SdkProvider';
 import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedBlockUtil';

package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js

@@ -3,7 +3,7 @@ import { Menu, Flex } from '@contentful/f36-components';
 import { EmbeddedLineIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { INLINES } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { moveToTheNextChar } from '../../helpers/editor';
 import { useSdkContext } from '../../SdkProvider';

package/dist/esm/plugins/shared/LinkedBlockWrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IS_CHROME } from '../../helpers/environment';
 import { getLinkEntityId } from './utils';
 const styles = {

package/dist/esm/plugins/shared/LinkedInlineWrapper.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { IS_CHROME } from '../../helpers/environment';
 import { getLinkEntityId } from './utils';
 const styles = {

package/dist/esm/plugins/shared/ToolbarButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Button, Tooltip } from '@contentful/f36-components';
+import { IconButton } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 const styles = {
     button: css({
         height: '30px',
@@ -10,30 +10,50 @@ const styles = {
         marginRight: tokens.spacing2Xs
     }),
     tooltip: css({
-        zIndex: Number(tokens.zIndexTooltip)
+        zIndex: Number(tokens.zIndexTooltip),
+        pointerEvents: 'none'
     })
 };
 export function ToolbarButton(props) {
     const { title, testId, isActive, children, className, isDisabled = false } = props;
-    const handleClick = (event)=>{
+    const pointerTriggeredRef = React.useRef(false);
+    const handlePointerDown = React.useCallback((event)=>{
+        if (isDisabled || event.button !== 0) {
+            return;
+        }
         event.preventDefault();
+        pointerTriggeredRef.current = true;
         props.onClick();
-    };
-    const button = /*#__PURE__*/ React.createElement(Button, {
+    }, [
+        isDisabled,
+        props
+    ]);
+    const handleClick = React.useCallback((event)=>{
+        if (pointerTriggeredRef.current) {
+            pointerTriggeredRef.current = false;
+            return;
+        }
+        event.preventDefault();
+        props.onClick();
+    }, [
+        props
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, {
         className: cx(styles.button, className),
         isDisabled: isDisabled,
-        startIcon: children,
+        onMouseDown: handlePointerDown,
         onClick: handleClick,
         testId: testId,
         variant: isActive ? 'secondary' : 'transparent',
-        size: "small"
-    });
-    if (title) {
-        return /*#__PURE__*/ React.createElement(Tooltip, {
+        size: "small",
+        icon: children,
+        "aria-label": title,
+        withTooltip: !!title,
+        tooltipProps: {
             className: styles.tooltip,
-            placement: "bottom",
+            usePortal: true,
+            placement: 'bottom',
             content: title
-        }, button);
-    }
-    return button;
+        }
+    });
 }

package/dist/types/plugins/Hyperlink/components/LinkPopover.d.ts

@@ -4,7 +4,7 @@ type LinkPopoverProps = {
     popoverText: React.ReactNode | ((closePopover: () => void) => React.ReactNode);
     handleEditLink: () => void;
     handleRemoveLink: () => void;
-    children: React.ReactNode;
+    children: React.ReactElement;
     handleCopyLink?: () => void;
     isEditorFocused: boolean;
 };

package/dist/types/plugins/shared/ToolbarButton.d.ts

@@ -3,7 +3,7 @@ interface ToolbarButtonProps {
     onClick: () => void;
     isActive?: boolean;
     isDisabled?: boolean;
-    children: any;
+    children: React.ReactElement;
     title: string;
     className?: string;
     testId?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "4.20.14",
+  "version": "5.0.0",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -40,14 +40,16 @@
   "dependencies": {
     "@contentful/app-sdk": "^4.42.0",
     "@contentful/contentful-slatejs-adapter": "^16.1.6",
-    "@contentful/f36-components": "^5.4.1",
-    "@contentful/f36-icons": "^5.4.1",
-    "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/f36-utils": "^5.1.0",
-    "@contentful/field-editor-reference": "^7.0.1",
-    "@contentful/field-editor-shared": "^3.0.1",
+    "@contentful/f36-components": "^6.7.1",
+    "@contentful/f36-icon": "^6.7.1",
+    "@contentful/f36-icons": "^6.7.1",
+    "@contentful/f36-tokens": "^6.1.2",
+    "@contentful/f36-utils": "^6.1.0",
+    "@contentful/field-editor-reference": "^7.0.0",
+    "@contentful/field-editor-shared": "^3.0.0",
     "@contentful/rich-text-plain-text-renderer": "^17.0.0",
     "@contentful/rich-text-types": "^17.2.5",
+    "@emotion/css": "^11.13.5",
     "@popperjs/core": "^2.11.5",
     "@udecode/plate-basic-marks": "36.0.0",
     "@udecode/plate-break": "36.0.0",
@@ -77,8 +79,8 @@
   "peerDependencies": {
     "@lingui/core": "^5.3.0",
     "@tanstack/react-query": "^4.3.9",
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0"
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
   },
   "devDependencies": {
     "@contentful/field-editor-test-utils": "^2.0.0",
@@ -92,5 +94,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "79ea20201fece746a4835e16854024616b81e184"
+  "gitHead": "4e13dec4455366c7012c2b1c88f47a269a20b5b4"
 }