[lexical-react] Bug Fix: Import JSX type from React to prevent "Can…

…not find namespace 'JSX'"-error when type-checking with React 19 (#7080)

examples/react-plain-text/src/plugins/TreeViewPlugin.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TreeView} from '@lexical/react/LexicalTreeView';
 

examples/react-rich-collab/src/plugins/TreeViewPlugin.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TreeView} from '@lexical/react/LexicalTreeView';
 

examples/react-rich/src/plugins/TreeViewPlugin.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TreeView} from '@lexical/react/LexicalTreeView';
 

examples/react-table/src/plugins/TreeViewPlugin.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TreeView} from '@lexical/react/LexicalTreeView';
 

packages/lexical-devtools-core/src/TreeView.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {EditorSetOptions, EditorState} from 'lexical';
+import type {JSX} from 'react';
 
 import * as React from 'react';
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react';

packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';

packages/lexical-playground/src/App.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {$createLinkNode} from '@lexical/link';
 import {$createListItemNode, $createListNode} from '@lexical/list';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';

packages/lexical-playground/src/Editor.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
 import {CheckListPlugin} from '@lexical/react/LexicalCheckListPlugin';

packages/lexical-playground/src/Settings.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {CAN_USE_BEFORE_INPUT} from '@lexical/utils';
 import {useEffect, useMemo, useState} from 'react';
 

packages/lexical-playground/src/context/FlashMessageContext.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {
   createContext,
   ReactNode,

packages/lexical-playground/src/context/SettingsContext.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {SettingName} from '../appSettings';
+import type {JSX} from 'react';
 
 import * as React from 'react';
 import {

packages/lexical-playground/src/context/SharedHistoryContext.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import type {JSX} from 'react';
 
 import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
 import * as React from 'react';

packages/lexical-playground/src/context/ToolbarContext.tsx

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+import type {JSX} from 'react';
+
 import {ElementFormatType} from 'lexical';
 import React, {
   createContext,

packages/lexical-playground/src/hooks/useModal.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useCallback, useMemo, useState} from 'react';
 import * as React from 'react';
 

packages/lexical-playground/src/nodes/EquationComponent.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {mergeRegister} from '@lexical/utils';

packages/lexical-playground/src/nodes/EquationNode.tsx

@@ -15,6 +15,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import katex from 'katex';
 import {$applyNodeReplacement, DecoratorNode, DOMExportOutput} from 'lexical';

packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx

@@ -8,6 +8,7 @@
 
 import type {ExcalidrawInitialElements} from '../../ui/ExcalidrawModal';
 import type {NodeKey} from 'lexical';
+import type {JSX} from 'react';
 
 import {AppState, BinaryFiles} from '@excalidraw/excalidraw/types/types';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';

packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawImage.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {exportToSvg} from '@excalidraw/excalidraw';
 import {
   ExcalidrawElement,

packages/lexical-playground/src/nodes/ExcalidrawNode/index.tsx

@@ -17,6 +17,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {DecoratorNode} from 'lexical';
 import * as React from 'react';

packages/lexical-playground/src/nodes/FigmaNode.tsx

@@ -14,6 +14,7 @@ import type {
   NodeKey,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
 import {

packages/lexical-playground/src/nodes/ImageComponent.tsx

@@ -12,6 +12,7 @@ import type {
   LexicalEditor,
   NodeKey,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import './ImageNode.css';
 

packages/lexical-playground/src/nodes/ImageNode.tsx

@@ -19,6 +19,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {$applyNodeReplacement, createEditor, DecoratorNode} from 'lexical';
 import * as React from 'react';

packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx

@@ -7,6 +7,7 @@
  */
 import type {Position} from './InlineImageNode';
 import type {BaseSelection, LexicalEditor, NodeKey} from 'lexical';
+import type {JSX} from 'react';
 
 import './InlineImageNode.css';
 

packages/lexical-playground/src/nodes/InlineImageNode/InlineImageNode.tsx

@@ -19,6 +19,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {
   $applyNodeReplacement,

packages/lexical-playground/src/nodes/PageBreakNode/index.tsx

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+import type {JSX} from 'react';
+
 import './index.css';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';

packages/lexical-playground/src/nodes/PollComponent.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {Option, Options, PollNode} from './PollNode';
+import type {JSX} from 'react';
 
 import './PollNode.css';
 

packages/lexical-playground/src/nodes/PollNode.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {
   DecoratorNode,
   DOMConversionMap,

packages/lexical-playground/src/nodes/StickyComponent.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {LexicalEditor, NodeKey} from 'lexical';
+import type {JSX} from 'react';
 
 import './StickyNode.css';
 

packages/lexical-playground/src/nodes/StickyNode.tsx

@@ -16,6 +16,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {$setSelection, createEditor, DecoratorNode} from 'lexical';
 import * as React from 'react';

packages/lexical-playground/src/nodes/TweetNode.tsx

@@ -17,6 +17,7 @@ import type {
   NodeKey,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
 import {

packages/lexical-playground/src/nodes/YouTubeNode.tsx

@@ -17,6 +17,7 @@ import type {
   NodeKey,
   Spread,
 } from 'lexical';
+import type {JSX} from 'react';
 
 import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
 import {

packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {LexicalEditor} from 'lexical';
+import type {JSX} from 'react';
 
 import {$createCodeNode, $isCodeNode} from '@lexical/code';
 import {

packages/lexical-playground/src/plugins/AutoEmbedPlugin/index.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {LexicalEditor} from 'lexical';
+import type {JSX} from 'react';
 
 import {
   AutoEmbedOption,

packages/lexical-playground/src/plugins/AutoLinkPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {
   AutoLinkPlugin,
   createLinkMatcherWithRegExp,

packages/lexical-playground/src/plugins/AutocompletePlugin/index.tsx

@@ -7,6 +7,7 @@
  */
 
 import type {BaseSelection, NodeKey, TextNode} from 'lexical';
+import type {JSX} from 'react';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$isAtNodeEnd} from '@lexical/selection';

packages/lexical-playground/src/plugins/CodeActionMenuPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import './index.css';
 
 import {

packages/lexical-playground/src/plugins/CodeHighlightPlugin/index.ts

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {registerCodeHighlighting} from '@lexical/code';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useEffect} from 'react';

packages/lexical-playground/src/plugins/CommentPlugin/index.tsx

@@ -14,6 +14,7 @@ import type {
   NodeKey,
   RangeSelection,
 } from 'lexical';
+import type {JSX} from 'react';
 import type {Doc} from 'yjs';
 
 import './index.css';

packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {$createCodeNode} from '@lexical/code';
 import {
   INSERT_CHECK_LIST_COMMAND,

packages/lexical-playground/src/plugins/ContextMenuPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {

packages/lexical-playground/src/plugins/DocsPlugin/index.tsx

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
+import type {JSX} from 'react';
+
 import * as React from 'react';
 
 export default function DocsPlugin(): JSX.Element {

packages/lexical-playground/src/plugins/DraggableBlockPlugin/index.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+import type {JSX} from 'react';
+
 import './index.css';
 
 import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';

packages/lexical-playground/src/plugins/EmojisPlugin/index.ts

@@ -7,6 +7,7 @@
  */
 
 import type {LexicalEditor} from 'lexical';
+import type {JSX} from 'react';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {TextNode} from 'lexical';

packages/lexical-playground/src/plugins/EquationsPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import 'katex/dist/katex.css';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';

packages/lexical-playground/src/plugins/ExcalidrawPlugin/index.tsx

@@ -7,6 +7,7 @@
  */
 import type {ExcalidrawInitialElements} from '../../ui/ExcalidrawModal';
 import type {AppState, BinaryFiles} from '@excalidraw/excalidraw/types/types';
+import type {JSX} from 'react';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$wrapNodeInElement} from '@lexical/utils';

packages/lexical-playground/src/plugins/FigmaPlugin/index.tsx

@@ -6,6 +6,8 @@
  *
  */
 
+import type {JSX} from 'react';
+
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$insertNodeToNearestRoot} from '@lexical/utils';
 import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';