fix(react): improve React 19 compatibility by using JSX transform instead #5846 (#5848)

This commit is contained in:
Nick Perez 2024-11-20 10:46:29 +01:00 committed by GitHub
parent f2a1817746
commit 5eee48093b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 2308 additions and 1970 deletions

View File

@ -0,0 +1,5 @@
---
"@tiptap/react": patch
---
React 19 changes how refs works, it will double mount them, all that we needed to do though was to use the JSX transform instead of createElement directly #5846

View File

@ -11,41 +11,41 @@
},
"dependencies": {
"@hocuspocus/provider": "2.13.5",
"@lexical/react": "^0.11.1",
"@lexical/react": "^0.11.3",
"@shikijs/core": "1.10.3",
"d3": "^7.3.0",
"fast-glob": "^3.2.11",
"d3": "^7.9.0",
"fast-glob": "^3.3.2",
"highlight.js": "^11.10.0",
"lexical": "^0.11.1",
"lexical": "^0.11.3",
"lowlight": "^3.1.0",
"remixicon": "^2.5.0",
"shiki": "^1.10.3",
"shiki": "^1.23.1",
"simplify-js": "^1.2.4",
"y-prosemirror": "1.2.11",
"y-webrtc": "^10.3.0",
"yjs": "13.6.18"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@sveltejs/vite-plugin-svelte": "3.1.2",
"@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^1.3.2",
"@vitejs/plugin-vue": "^5.0.0",
"autoprefixer": "^10.4.2",
"@vitejs/plugin-vue": "^5.2.0",
"autoprefixer": "^10.4.20",
"esbuild": "0.21.5",
"iframe-resizer": "^4.3.2",
"postcss": "^8.4.31",
"iframe-resizer": "^4.4.5",
"postcss": "^8.4.49",
"postcss-import": "^15.1.0",
"prosemirror-dev-tools": "^4.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"sass": "^1.49.7",
"prosemirror-dev-tools": "^4.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"sass": "^1.81.0",
"svelte": "^4.2.19",
"tailwindcss": "^3.3.2",
"typescript": "^5.4.5",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"uuid": "^8.3.2",
"vite": "^5.4.6",
"vite": "^5.4.11",
"vite-plugin-checker": "^0.6.4",
"vue": "^3.0.0",
"vue-router": "^4.0.11"
"vue": "^3.5.13",
"vue-router": "^4.4.5"
}
}

4174
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"private": true,
"packageManager": "npm@10.8.2",
"packageManager": "npm@10.9.0",
"workspaces": [
"demos",
"shared/*",
@ -35,48 +35,48 @@
"version": "npm run changeset -- version && npm i"
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/core": "^7.26.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@changesets/cli": "^2.27.7",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@babel/preset-env": "^7.26.0",
"@babel/preset-react": "^7.25.9",
"@changesets/cli": "^2.27.9",
"@commitlint/cli": "^19.6.0",
"@commitlint/config-conventional": "^19.6.0",
"@cypress/webpack-preprocessor": "^5.17.1",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^26.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@rollup/plugin-commonjs": "^26.0.3",
"@rollup/plugin-node-resolve": "^15.3.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"babel-loader": "^9.1.3",
"babel-loader": "^9.2.1",
"cypress": "^10.11.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.57.0",
"eslint": "^8.57.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-cypress": "^2.15.2",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-react-hooks": "4.6.2",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-vue": "^9.27.0",
"eslint-plugin-vue": "^9.31.0",
"husky": "^8.0.3",
"lint-staged": "^15.2.10",
"minimist": "^1.2.8",
"rollup": "^4.22.4",
"rollup": "^4.27.3",
"rollup-plugin-auto-external": "^2.0.0",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-typescript2": "^0.36.0",
"ts-loader": "9.3.1",
"tsup": "^8.1.0",
"tsup": "^8.3.5",
"turbo": "2.0.6",
"typescript": "^5.5.3",
"webpack": "^5.94.0"
"typescript": "^5.6.3",
"webpack": "^5.96.1"
},
"overrides": {
"@rollup/pluginutils": "^5.1.0"
"@rollup/pluginutils": "^5.1.3"
},
"publishConfig": {
"provenance": true

View File

@ -431,6 +431,7 @@ export const Table = Node.create<TableOptions>({
columnResizing({
handleWidth: this.options.handleWidth,
cellMinWidth: this.options.cellMinWidth,
defaultCellMinWidth: this.options.cellMinWidth,
View: this.options.View,
lastColumnResizable: this.options.lastColumnResizable,
}),

View File

@ -128,22 +128,22 @@
"dependencies": {
"prosemirror-changeset": "^2.2.1",
"prosemirror-collab": "^1.3.1",
"prosemirror-commands": "^1.6.0",
"prosemirror-commands": "^1.6.2",
"prosemirror-dropcursor": "^1.8.1",
"prosemirror-gapcursor": "^1.3.2",
"prosemirror-history": "^1.4.1",
"prosemirror-inputrules": "^1.4.0",
"prosemirror-keymap": "^1.2.2",
"prosemirror-markdown": "^1.13.0",
"prosemirror-markdown": "^1.13.1",
"prosemirror-menu": "^1.2.4",
"prosemirror-model": "^1.22.3",
"prosemirror-model": "^1.23.0",
"prosemirror-schema-basic": "^1.2.3",
"prosemirror-schema-list": "^1.4.1",
"prosemirror-state": "^1.4.3",
"prosemirror-tables": "^1.4.0",
"prosemirror-tables": "^1.6.1",
"prosemirror-trailing-node": "^3.0.0",
"prosemirror-transform": "^1.10.0",
"prosemirror-view": "^1.34.3"
"prosemirror-transform": "^1.10.2",
"prosemirror-view": "^1.36.0"
},
"repository": {
"type": "git",

View File

@ -33,13 +33,13 @@
"@tiptap/extension-floating-menu": "^2.9.1",
"@types/use-sync-external-store": "^0.0.6",
"fast-deep-equal": "^3",
"use-sync-external-store": "^1.2.2"
"use-sync-external-store": "^1"
},
"devDependencies": {
"@tiptap/core": "^2.9.1",
"@tiptap/pm": "^2.9.1",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},

View File

@ -136,7 +136,7 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
}
}
this.reactElement = React.createElement(Component, props)
this.reactElement = <Component {...props} />
editor?.contentComponent?.setRenderer(this.id, this)
}