React 18.2.0 in Volto core - and all that fun (#3221)

Co-authored-by: Steve Piercy <[email protected]>
Co-authored-by: ichim-david <[email protected]>

.github/workflows/changelog.yml

@@ -12,7 +12,7 @@ jobs:
   towncrier:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # Fetch all history
           fetch-depth: '0'

.github/workflows/code-analysis.yml

@@ -10,11 +10,11 @@ jobs:
     name: Prettier
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.node-version }}
 
@@ -29,7 +29,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -47,11 +47,11 @@ jobs:
     name: ESlint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.node-version }}
 
@@ -66,7 +66,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -87,11 +87,11 @@ jobs:
     name: Stylelint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.node-version }}
 
@@ -106,7 +106,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -127,11 +127,11 @@ jobs:
     name: i18n
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.node-version }}
 
@@ -146,7 +146,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}

.github/workflows/docs.yml

@@ -19,7 +19,7 @@ jobs:
       matrix:
         python-version: ['3.10']
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v4

.github/workflows/unit.yml

@@ -14,11 +14,11 @@ jobs:
       matrix:
         node-version: [18.x, 20.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -33,7 +33,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -64,11 +64,11 @@ jobs:
       matrix:
         node-version: [18.x, 20.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -83,7 +83,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -105,11 +105,11 @@ jobs:
       matrix:
         node-version: [18.x, 20.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # node setup
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -124,7 +124,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}
@@ -141,10 +141,10 @@ jobs:
     name: '@plone/client'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.node-version }}
 
@@ -159,7 +159,7 @@ jobs:
         run: |
           echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         name: Setup pnpm cache
         with:
           path: ${{ env.STORE_PATH }}

docs/source/upgrade-guide/index.md

@@ -28,6 +28,27 @@ Thus it is safe to run it on top of your project and answer the prompts.
 
 ## Upgrading to Volto 18.x.x
 
+### Volto runs now on React 18.2.0
+
+We have updated Volto to use React 18.
+This has been the latest published stable version since June 2022.
+This aligns Volto with the latests developments in the React ecosystem and opens the door to up to date software and React features, like client side `Suspense` and others:
+
+- Concurrent rendering in client (Suspense)
+- Automatic batching updates
+- Transitions
+- New hooks `useId`, `useTransition`, `useDeferredValue`, `useSyncExternalStore`, and other hooks
+
+### `react-portal` dependency removed
+
+`react-portal` is deprecated and it was removed from Volto.
+The Volto code that relied on it was mainly CMS UI components.
+If your project relies on it, either in your code or the shadowed components you may have, you should update to use the standard React API, `createPortal`.
+You can update your shadows taking the modified components as templates.
+As a last resort, you can install `react-portal` as a dependency of your project.
+However, this is discouraged, because the React 18 rendering could have unexpected side effects.
+It is recommended that you use the React API instead.
+
 ### ESlint project configuration update
 
 `@plone/registry` and [other packages on which Volto depends](https://github.com/plone/volto/tree/main/packages) are now stand-alone releases in the monorepo structure released in 18.0.0-alpha.4.

packages/coresandbox/package.json

@@ -26,17 +26,17 @@
     "react"
   ],
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "3.8.0",
     "react-redux": "7.2.4",
     "semantic-ui-react": "2.0.3"
   },
   "devDependencies": {
     "@plone/types": "workspace:*",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@plone/registry": "workspace:*",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17",
     "@types/react-redux": "^7.1.33"
   }
 }

packages/registry/news/3221.feature

@@ -0,0 +1 @@
+Upgrade Volto core to use React 18.2.0 @sneridagh

packages/registry/package.json

@@ -76,9 +76,11 @@
     "@parcel/packager-ts": "2.10.2",
     "@parcel/transformer-typescript-types": "2.10.2",
     "@plone/types": "workspace:*",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "parcel": "2.10.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "release-it": "16.2.1",
     "tsconfig": "workspace:*",
     "typescript": "5.2.2",

packages/types/news/3221.feature

@@ -0,0 +1 @@
+Upgrade Volto core to use React 18.2.0 @sneridagh

packages/types/package.json

@@ -50,10 +50,12 @@
   "devDependencies": {
     "@parcel/packager-ts": "2.10.2",
     "@parcel/transformer-typescript-types": "2.10.2",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "history": "^5.3.0",
     "parcel": "2.10.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-intl": "3.8.0",
     "release-it": "16.2.1",
     "tsconfig": "workspace:*",

packages/volto-slate/news/3221.feature

@@ -0,0 +1 @@
+Upgrade Volto core to use React 18.2.0 @sneridagh

packages/volto-slate/package.json

@@ -21,9 +21,9 @@
     "image-extensions": "1.1.0",
     "is-url": "1.2.4",
     "jsdom": "^16.6.0",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-intersection-observer": "9.1.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "slate": "0.100.0",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.100.0",

packages/volto-slate/src/blocks/Text/PluginSidebar.jsx

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 const PluginSidebar = ({ children, selected }) => {
   return (
     <>
-      {selected && (
-        <Portal
-          node={__CLIENT__ && document.getElementById('slate-plugin-sidebar')}
-        >
-          {children}
-        </Portal>
-      )}
+      {selected &&
+        __CLIENT__ &&
+        createPortal(
+          <>{children}</>,
+          document.getElementById('slate-plugin-sidebar'),
+        )}
     </>
   );
 };

packages/volto-slate/src/blocks/Text/extensions/breakList.js

@@ -77,8 +77,8 @@ export const breakList = (editor) => {
     Editor.deleteBackward(editor, { unit: 'line' });
     // also account for empty nodes [{text: ''}]
     if (Editor.isEmpty(editor, parent)) {
-      Transforms.removeNodes(editor, { at: ref.current });
       createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+      Transforms.removeNodes(editor, { at: ref.current });
       return true;
     }
 

packages/volto-slate/src/blocks/Text/extensions/insertBreak.js

@@ -42,9 +42,9 @@ export const withSplitBlocksOnBreak = (editor) => {
         // deconstructToVoltoBlocks
         ReactDOM.unstable_batchedUpdates(() => {
           const [top, bottom] = splitEditorInTwoFragments(editor);
-          setEditorContent(editor, top);
           // ReactEditor.blur(editor);
           createAndSelectNewBlockAfter(editor, bottom);
+          setEditorContent(editor, top);
         });
       }
       return;

packages/volto-slate/src/editor/SlateEditor.jsx

@@ -166,7 +166,14 @@ class SlateEditor extends Component {
         ReactEditor.focus(editor);
         Transforms.select(editor, selection);
       } else {
-        Transforms.select(editor, Editor.end(editor, []));
+        try {
+          Transforms.select(editor, Editor.end(editor, []));
+        } catch (error) {
+          // Weird error only happening in Cypress
+          // Adding a try/catch
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
       }
 
       this.setState({

packages/volto-slate/src/editor/ui/PositionedToolbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 
 import BasicToolbar from './BasicToolbar';
 
@@ -20,12 +20,11 @@ const PositionedToolbar = ({ toggleButton, className, children, position }) => {
     el.style.left = left;
   });
 
-  return (
-    <Portal>
-      <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
-        {children}
-      </BasicToolbar>
-    </Portal>
+  return createPortal(
+    <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
+      {children}
+    </BasicToolbar>,
+    document.body,
   );
 };