chore(rich-text): bump forma36 to v6 (#2106)

This upgrade bumps packages to use dependency/devDependency and/or peerDependency of @contentful/f36-components@6.7.1, @contentful/f36-icons@6.7.1 and @contentful/f36-tokens@6.1.2

Adds explicit react (>=18.3.1) as peer dependencies to make the React version requirement visible to consumers, rather than leaving it as an implicit transitive dependency through F36 v6.

Deprecated emotion@10 in order to use emotion/css@^11.13.5 and follow the Forma36 pattern.

BREAKING CHANGE: Mograte from `emotion@10.` to `emotion/css@^11.13.4`. Consumers also must be on Forma 36 v6 and React `18.3.1+`

Author: joseliacosta

cypress/component/rich-text/RichTextEditor.EmbeddedEntryInlines.spec.ts

@@ -72,8 +72,8 @@ describe(
             ),
           );
 
-          cy.findByTestId('cf-ui-card-actions').click({ force: true });
-          cy.findByTestId('delete').click({ force: true });
+          cy.findByTestId('cf-ui-card-actions').click();
+          cy.findByTestId('delete').click();
 
           richText.expectValue(doc(block(BLOCKS.PARAGRAPH, {}, text('hello world'))));
         });

cypress/component/rich-text/RichTextPage.ts

@@ -24,7 +24,7 @@ export class RichTextPage {
 
       toggleHeading(type: string) {
         this.headingsDropdown.click();
-        cy.findByTestId(`dropdown-option-${type}`).click({ force: true });
+        cy.findByTestId(`dropdown-option-${type}`).click();
       },
 
       get undo() {

packages/rich-text/package.json

@@ -40,12 +40,13 @@
   "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",
     "@popperjs/core": "^2.11.5",
@@ -61,6 +62,7 @@
     "@udecode/plate-table": "36.5.9",
     "@udecode/plate-trailing-block": "36.0.0",
     "constate": "^3.3.2",
+    "@emotion/css": "^11.13.5",
     "fast-deep-equal": "^3.1.3",
     "is-hotkey": "^0.2.0",
     "is-plain-obj": "^3.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,4 +94,4 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   }
-}
+}

packages/rich-text/src/CharConstraints.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import tokens from '@contentful/f36-tokens';
 import { CharValidation, ConstraintsUtils } from '@contentful/field-editor-shared';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 
 import { usePlateEditorState } from './internal/hooks';
 import { useSdkContext } from './SdkProvider';

packages/rich-text/src/RichTextEditor.styles.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const STYLE_EDITOR_BORDER = `1px solid ${tokens.gray400}`;
 

packages/rich-text/src/RichTextEditor.tsx

@@ -4,9 +4,9 @@ import { FieldAppSDK } from '@contentful/app-sdk';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
+import { css, cx } from '@emotion/css';
 import { QueryClient } from '@tanstack/react-query';
 import { PlateContent, Plate, PlatePlugin, PlateContentProps } from '@udecode/plate-common';
-import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 import { useDeepCompareMemo } from 'use-deep-compare';

packages/rich-text/src/Toolbar/components/StickyToolbarWrapper.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const styles = {
   nativeSticky: (offset?: number) => css`

packages/rich-text/src/Toolbar/index.tsx

@@ -5,7 +5,7 @@ import { Flex, IconButton, Menu } from '@contentful/f36-components';
 import { DotsThreeIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import { useContentfulEditor } from '../ContentfulEditorProvider';
 import { isNodeTypeSelected } from '../helpers/editor';

packages/rich-text/src/dialogs/HypelinkDialog/HyperlinkDialog.jsx

@@ -13,8 +13,8 @@ import {
 } from '@contentful/f36-components';
 import tokens from '@contentful/f36-tokens';
 import { EntityProvider } from '@contentful/field-editor-reference';
+import { css } from '@emotion/css';
 import { t } from '@lingui/core/macro';
-import { css } from 'emotion';
 import PropTypes from 'prop-types';
 
 import { FetchingWrappedAssetCard } from '../../plugins/shared/FetchingWrappedAssetCard';

packages/rich-text/src/plugins/CommandPalette/components/CommandList.styles.ts

@@ -1,5 +1,5 @@
 import tokens from '@contentful/f36-tokens';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 const styles = {
   container: css({