Update to support react 19

.github/actions/setup-project/action.yml

@@ -0,0 +1,20 @@
+name: Setup Project
+description: Sets up the project by installing dependencies
+
+inputs:
+  node-version:
+    required: false
+    default: 22.4.1
+    description: "The version of Node.js to use."
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        registry-url: "https://registry.npmjs.org"
+        cache: "yarn"
+    - name: Install dependencies
+      run: yarn
+      shell: bash

.github/workflows/pr.yml

@@ -0,0 +1,46 @@
+name: PR Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        react-version: [19, 18]
+        include:
+          - react-version: 19
+            app-name: react-app-19
+            react-dom-version: ^19.0.0
+            react-types-version: ^19.0.0
+          - react-version: 18
+            app-name: react-app-18
+            react-dom-version: ^18.2.0
+            react-types-version: ^18.2.0
+
+    name: Build with React ${{ matrix.react-version }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Project Base
+        uses: ./.github/actions/setup-project
+
+      ## We specify the version of react and react-dom we want to run vite build with
+      - name: Install React Dependencies in Root
+        run: |
+          cd ./packages/grapesjs-react && yarn add \
+          react@^19.0.0 \
+          react-dom@^19.0.0 \
+          @types/react@^19.0.0 \
+          @types/react-dom@^19.0.0
+
+      - name: Build Core
+        run: yarn workspace @grapesjs/react run build
+
+      - name: Build Full Example App
+        run: yarn workspace @grapesjs/${{ matrix.app-name }} run build

DOCKER.md

@@ -0,0 +1,48 @@
+# Docker GrapesJS React
+
+There is a few docker files in this repository, to assert that the project runs correctly using react 18 & react 19.
+
+You will find the `Dockerfile.base` which will build and mount `@grapesjs/react` to each:
+
+1. `Dockerfile.react18`
+2. `Dockerfile.react19`
+
+## Dockerfile.base
+
+Build this first, we build React in version 19.
+
+```bash
+docker compose build base
+```
+
+## Dockerfile.react18
+
+To test react 18, run the following command:
+
+```bash
+docker compose build react18
+```
+
+Wait for the build then run the react18 container:
+
+```bash
+docker compose up react18
+```
+
+Visit `http://localhost:5173/` to see the project running.
+
+## Dockerfile.react19
+
+To test react 19, run the following command:
+
+```bash
+docker compose build react19
+```
+
+Wait for the build then run the react19 container:
+
+```bash
+docker compose up react19
+```
+
+Visit `http://localhost:5174/` to see the project running.

Dockerfile.base

@@ -0,0 +1,26 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN apk add --no-cache python3 make g++ wget
+
+COPY package.json yarn.lock ./
+COPY packages/grapesjs-react/package.json ./packages/grapesjs-react/package.json
+COPY packages/grapesjs-react-app-18/package.json ./packages/grapesjs-react-app-18/package.json
+COPY packages/grapesjs-react-app-19/package.json ./packages/grapesjs-react-app-19/package.json
+
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react
+
+RUN yarn add \
+    react@^19.0.0 \
+    react-dom@^19.0.0 \
+    @types/react@^19.0.0 \
+    @types/react-dom@^19.0.0
+
+WORKDIR /app
+
+COPY . .
+
+RUN yarn workspace @grapesjs/react run build

Dockerfile.react18

@@ -0,0 +1,22 @@
+FROM grapesjs-base:latest
+
+RUN yarn add -W \
+    react@^18.2.0 \
+    react-dom@^18.2.0 \
+    @types/react@^18.2.0 \
+    @types/react-dom@^18.2.0
+
+WORKDIR /app/packages/grapesjs-react
+RUN yarn link
+
+WORKDIR /app/packages/grapesjs-react-app-18
+RUN yarn link @grapesjs/react
+
+WORKDIR /app
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react-app-18
+
+EXPOSE 5173
+
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

Dockerfile.react19

@@ -0,0 +1,22 @@
+FROM grapesjs-base:latest
+
+RUN yarn add -W \
+    react@^19.0.0 \
+    react-dom@^19.0.0 \
+    @types/react@^19.0.0 \
+    @types/react-dom@^19.0.0
+
+WORKDIR /app/packages/grapesjs-react
+RUN yarn link
+
+WORKDIR /app/packages/grapesjs-react-app-19
+RUN yarn link @grapesjs/react
+
+WORKDIR /app
+RUN yarn install
+
+WORKDIR /app/packages/grapesjs-react-app-19
+
+EXPOSE 5173
+
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

docker-compose.yaml

@@ -0,0 +1,44 @@
+version: "3.8"
+
+services:
+  base:
+    build:
+      context: .
+      dockerfile: Dockerfile.base
+    image: grapesjs-base:latest
+
+  react18:
+    build:
+      context: .
+      dockerfile: Dockerfile.react18
+    ports:
+      - "5173:5173"
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:5173"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    environment:
+      - VITE_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_PORT=5173
+    volumes:
+      - ./packages/grapesjs-react-app-18:/app/packages/grapesjs-react-app-18
+      - /app/packages/grapesjs-react-app-18/node_modules
+
+  react19:
+    build:
+      context: .
+      dockerfile: Dockerfile.react19
+    ports:
+      - "5173:5173"
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:5173"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    environment:
+      - VITE_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_PORT=5173
+    volumes:
+      - ./packages/grapesjs-react-app-19:/app/packages/grapesjs-react-app-19
+      - /app/packages/grapesjs-react-app-19/node_modules

package.json

@@ -3,11 +3,40 @@
   "private": true,
   "packageManager": "yarn@1.22.19",
   "scripts": {
-    "start": "yarn workspace @grapesjs/react run dev & yarn workspace @grapesjs/react-app run dev"
+    "build": "yarn build:core && yarn build:app-18 && yarn build:app-19",
+    "start": "yarn workspace @grapesjs/react run dev & yarn workspace @grapesjs/react-app run dev",
+    "clean": "find . -type d \\( -name \"node_modules\" -o -name \"build\" -o -name \"dist\" \\) -exec rm -rf {} + && rm ./yarn.lock",
+    "build:core": "yarn workspace @grapesjs/react run build",
+    "build:app-18": "yarn workspace @grapesjs/react-app-18 run build",
+    "build:app-19": "yarn workspace @grapesjs/react-app-19 run build"
   },
   "workspaces": {
     "packages": [
       "packages/*"
+    ],
+    "nohoist": [
+      "**/react",
+      "**/react-dom",
+      "**/react/**",
+      "**/react-dom/**",
+      "**/@types/react",
+      "**/@types/react-dom"
     ]
+  },
+  "dependencies": {
+    "@types/node": "^20.3.3",
+    "grapesjs": "^0.22.5",
+    "vite-plugin-dts": "^4.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
   }
 }

packages/grapesjs-react-app-18/.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+nmMode: hardlinks-local

packages/grapesjs-react-app-18/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@grapesjs/react-app-18",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --force",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
+    "@mui/material": "^5.13.5",
+    "@grapesjs/react": "1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/grapesjs-react-app-18/src/examples/CustomEditor.tsx

@@ -0,0 +1,41 @@
+import GrapesJsEditor, { AssetsProvider, Canvas, EditorProps, ModalProvider } from '@grapesjs/react';
+import { ThemeProvider } from '@mui/material/styles';
+import { MAIN_BORDER_COLOR, customTheme, defaultEditorProps } from './common';
+import CustomAssetManager from './components/CustomAssetManager';
+import CustomModal from './components/CustomModal';
+import RightSidebar from './components/RightSidebar';
+import Topbar from './components/Topbar';
+
+export default function CustomEditor(props: Partial<EditorProps>) {
+    return (
+        <ThemeProvider theme={customTheme}>
+            <GrapesJsEditor
+                className="gjs-custom-editor"
+                {...defaultEditorProps}
+                {...props}
+            >
+                <div className={`flex h-full border-t ${MAIN_BORDER_COLOR}`}>
+                    <div className="gjs-column-m flex flex-col flex-grow">
+                        <Topbar className="min-h-[48px]"/>
+                        <Canvas className="flex-grow gjs-custom-editor-canvas"/>
+                    </div>
+                    <RightSidebar className={`gjs-column-r w-[300px] border-l ${MAIN_BORDER_COLOR}`}/>
+                </div>
+                <ModalProvider>
+                    {({ open, title, content, close }) => (
+                        <CustomModal open={open} title={<>{title}</>} close={close}>
+                           <>{content}</>
+                        </CustomModal>
+                    )}
+                </ModalProvider>
+                <AssetsProvider>
+                    {({ assets, select, close, Container }) => (
+                        <Container>
+                            <CustomAssetManager assets={assets} select={select} close={close}/>
+                        </Container>
+                    )}
+                </AssetsProvider>
+            </GrapesJsEditor>
+        </ThemeProvider>
+    )
+}

packages/grapesjs-react-app/src/examples/DefaultCustomEditor.tsx → packages/grapesjs-react-app-18/src/examples/DefaultCustomEditor.tsx

@@ -62,7 +62,7 @@ export default function DefaultCustomEditor(props: Partial<EditorProps>) {
                 </AssetsProvider>
                 <ModalProvider>
                     {({ open, title, content, close }) => (
-                        <CustomModal open={open} title={title} children={content} close={close}/>
+                        <CustomModal open={open} title={<>{title}</>} children={<>{content}</>} close={close}/>
                     )}
                 </ModalProvider>
             </GrapesJsEditor>

packages/grapesjs-react-app/src/examples/components/CustomModal.tsx → packages/grapesjs-react-app-18/src/examples/components/CustomModal.tsx

@@ -1,4 +1,5 @@
 import { mdiClose } from '@mdi/js';
+import type { ReactNode } from 'react';
 import Icon from '@mdi/react';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
@@ -21,9 +22,9 @@ const style = {
 };
 
 interface CustomModalProps extends Omit<ModalProps, 'title'> {
-    title: React.ReactNode,
+    title: ReactNode,
     close: () => void,
-}
+  }
 
 export default function CustomModal({ children, title, close, ...props }: CustomModalProps) {
     return (