chore: bump dev to latest react

petyosi · petyosi · commit b8988a4c4df1 · 2025-12-05T11:39:48.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,8 +114,8 @@
     "@types/mdast": "^4.0.3",
     "@types/multer": "^1.4.7",
     "@types/node": "^20.2.5",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/unist": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
@@ -144,8 +144,8 @@
     "postcss-mixins": "^9.0.4",
     "postcss-nesting": "^11.2.2",
     "prettier": "^3.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "semantic-release": "^25.0.2",
     "svgo": "^3.3.2",
     "terser": "^5.26.0",
diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
@@ -1,5 +1,5 @@
 import { useCellValue, useCellValues, usePublisher, useRealm } from '@mdxeditor/gurx'
-import React from 'react'
+import React, { JSX } from 'react'
 import {
   activeEditor$,
   AdditionalLexicalNode,
@@ -61,7 +61,7 @@ const RichTextEditor: React.FC = () => {
   const setEditorRootWrapperElement = usePublisher(contentEditableWrapperElement$)
   const onRef = (el: HTMLDivElement | null) => {
     setEditorRootWrapperElement(el)
-    setContentEditableRef({ current: el })
+    setContentEditableRef(el ? ({ current: el } as React.RefObject<HTMLDivElement>) : null)
   }
 
   const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder, bottomAreaChildren] =
@@ -212,8 +212,8 @@ const EditorRootElement: React.FC<{
     const container = overlayContainer ?? document.body
     container.appendChild(popupContainer)
     editorRootElementRef.current = popupContainer
-    setEditorRootElementRef(editorRootElementRef)
-    setEditorWrapperElementRef(wrapperElementRef)
+    setEditorRootElementRef(editorRootElementRef as React.RefObject<HTMLDivElement>)
+    setEditorWrapperElementRef(wrapperElementRef as React.RefObject<HTMLDivElement>)
     return () => {
       popupContainer.remove()
     }
@@ -256,7 +256,7 @@ const Methods: React.FC<{ mdxRef: React.ForwardedRef<MDXEditorMethods> }> = ({ m
           realm.getValue(rootEditor$)?.focus(callbackFn, opts)
         },
         getContentEditableHTML: () => {
-          return realm.getValue(contentEditableRef$)?.current?.innerHTML ?? ''
+          return realm.getValue(contentEditableRef$)?.current.innerHTML ?? ''
         },
         getSelectionMarkdown: () => {
           // Return empty string in source/diff mode
diff --git a/src/plugins/codeblock/CodeBlockNode.tsx b/src/plugins/codeblock/CodeBlockNode.tsx
@@ -1,4 +1,5 @@
 import { useCellValue } from '@mdxeditor/gurx'
+import { JSX } from 'react'
 import {
   DecoratorNode,
   DOMConversionMap,
diff --git a/src/plugins/directives/DirectiveNode.tsx b/src/plugins/directives/DirectiveNode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import type { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'
 import { DecoratorNode } from 'lexical'
 import { Directives } from 'mdast-util-directive'
diff --git a/src/plugins/frontmatter/FrontmatterNode.tsx b/src/plugins/frontmatter/FrontmatterNode.tsx
@@ -1,5 +1,5 @@
 import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'
-import React from 'react'
+import React, { JSX } from 'react'
 import { FrontmatterEditor } from './FrontmatterEditor'
 
 /**
diff --git a/src/plugins/image/EditImageToolbar.tsx b/src/plugins/image/EditImageToolbar.tsx
@@ -2,7 +2,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 import classNames from 'classnames'
 import { $getNodeByKey } from 'lexical'
-import React from 'react'
+import React, { JSX } from 'react'
 import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from '.'
 import styles from '../../styles/ui.module.css'
 import { iconComponentFor$, readOnly$, useTranslation } from '../core'
diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 
 import type { BaseSelection, LexicalEditor } from 'lexical'
 
diff --git a/src/plugins/image/ImageNode.tsx b/src/plugins/image/ImageNode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import type {
   DOMConversionMap,
   DOMConversionOutput,
diff --git a/src/plugins/image/ImageResizer.tsx b/src/plugins/image/ImageResizer.tsx
@@ -9,6 +9,7 @@
 import type { LexicalEditor } from 'lexical'
 
 import * as React from 'react'
+import { JSX } from 'react'
 import { useRef } from 'react'
 import styles from '../../styles/ui.module.css'
 import classNames from 'classnames'
diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts
@@ -1,5 +1,6 @@
 import { ImagePlaceholder } from '@/plugins/image/ImagePlaceholder'
 import { $wrapNodeInElement, mergeRegister } from '@lexical/utils'
+import { JSX } from 'react'
 import { Action, Cell, Signal, map, mapTo, withLatestFrom } from '@mdxeditor/gurx'
 import {
   $createParagraphNode,
diff --git a/src/plugins/jsx/LexicalJsxNode.tsx b/src/plugins/jsx/LexicalJsxNode.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import type { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'
 import { DecoratorNode } from 'lexical'
-import React from 'react'
+import React, { JSX } from 'react'
 import { NestedEditorsContext } from '../core/NestedLexicalEditor'
 import { MdastJsx } from '.'
 import { VoidEmitter, voidEmitter } from '../../utils/voidEmitter'
diff --git a/src/plugins/jsx/LexicalMdxExpressionNode.tsx b/src/plugins/jsx/LexicalMdxExpressionNode.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import {
   $applyNodeReplacement,
   DOMConversionMap,
diff --git a/src/plugins/link-dialog/index.ts b/src/plugins/link-dialog/index.ts
@@ -1,5 +1,6 @@
 import { $createLinkNode, $isLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { Action, Cell, Signal, filter, map, withLatestFrom } from '@mdxeditor/gurx'
+import { JSX } from 'react'
 import {
   $createTextNode,
   $getNearestNodeFromDOMNode,
diff --git a/src/plugins/sandpack/index.tsx b/src/plugins/sandpack/index.tsx
@@ -1,5 +1,5 @@
 import { SandpackProvider } from '@codesandbox/sandpack-react'
-import React from 'react'
+import React, { JSX } from 'react'
 import { CodeBlockEditorDescriptor, appendCodeBlockEditorDescriptor$, insertCodeBlock$ } from '../codeblock'
 import { SandpackEditor } from './SandpackEditor'
 import { Cell, Signal, map, useCellValue, withLatestFrom } from '@mdxeditor/gurx'
diff --git a/src/plugins/table/TableNode.tsx b/src/plugins/table/TableNode.tsx
@@ -9,7 +9,7 @@ import {
   Spread
 } from 'lexical'
 import * as Mdast from 'mdast'
-import React from 'react'
+import React, { JSX } from 'react'
 import { noop } from '../../utils/fp'
 import { TableEditor } from './TableEditor'
 import { TableCell, TableRow } from 'mdast-util-gfm-table/lib'
diff --git a/src/plugins/toolbar/components/BlockTypeSelect.tsx b/src/plugins/toolbar/components/BlockTypeSelect.tsx
@@ -1,7 +1,7 @@
 import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text'
 import { useCellValue, usePublisher } from '@mdxeditor/gurx'
 import { $createParagraphNode } from 'lexical'
-import React from 'react'
+import React, { JSX } from 'react'
 import { BlockType, activePlugins$, convertSelectionToNode$, currentBlockType$, useTranslation } from '../../core'
 import { allowedHeadingLevels$ } from '../../headings'
 import { Select } from '.././primitives/select'
diff --git a/src/plugins/toolbar/primitives/select.tsx b/src/plugins/toolbar/primitives/select.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import classNames from 'classnames'
 import styles from '../../../styles/ui.module.css'
diff --git a/src/plugins/toolbar/primitives/toolbar.tsx b/src/plugins/toolbar/primitives/toolbar.tsx
@@ -1,7 +1,7 @@
 import * as RadixSelect from '@radix-ui/react-select'
 import * as RadixToolbar from '@radix-ui/react-toolbar'
 import classNames from 'classnames'
-import React from 'react'
+import React, { JSX } from 'react'
 import styles from '../../../styles/ui.module.css'
 import { TooltipWrap } from './TooltipWrap'
 import { SelectButtonTrigger, SelectContent, SelectItem } from './select'
@@ -21,10 +21,10 @@ function decorateWithRef<P extends { className?: string | undefined }>(
   Component: React.ForwardRefExoticComponent<P>,
   decoratedProps: Partial<React.PropsWithoutRef<P>> & { 'data-toolbar-item'?: boolean }
 ) {
-  return React.forwardRef<object, P>((props: P, ref) => {
+  return React.forwardRef<object, P>((props, ref) => {
     const className = classNames(decoratedProps.className, props.className)
-    return <Component {...decoratedProps} {...props} className={className} ref={ref} />
-  })
+    return <Component {...(decoratedProps as any)} {...(props as any)} className={className} ref={ref} />
+  }) as React.ForwardRefExoticComponent<P>
 }
 
 function addTooltipToChildren<C extends React.ComponentType<{ children: React.ReactNode }>>(Component: C) {
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
     "esModuleInterop": true,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { useCellValue } from '@mdxeditor/gurx'`
	`2`	`+import { JSX } from 'react'`
`2`	`3`	`import {`
`3`	`4`	`DecoratorNode,`
`4`	`5`	`DOMConversionMap,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import React from 'react'`
	`1`	`+import React, { JSX } from 'react'`
`2`	`2`	`import type { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'`
`3`	`3`	`import { DecoratorNode } from 'lexical'`
`4`	`4`	`import { Directives } from 'mdast-util-directive'`