refactor: complete migration to React 19 (#740)

* refactor: complete migration to React 19

* wip

* wip: remove `displayName`

Author: lumirlumir

src/playground/components/CodeEditor.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import React, { useImperativeHandle, useMemo, useRef } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { history } from "@codemirror/history";
 import { bracketMatching } from "@codemirror/matchbrackets";
@@ -10,65 +10,63 @@ import {
 } from "../utils/codemirror-theme";
 import "../scss/editor.scss";
 
-const CodeEditor = forwardRef(
-	({ codeValue, onUpdate, eslintOptions, eslintInstance }, ref) => {
-		const editorRef = useRef(null);
+export default function CodeEditor({
+	codeValue,
+	onUpdate,
+	eslintOptions,
+	eslintInstance,
+	ref,
+}) {
+	const editorRef = useRef(null);
 
-		const extensions = useMemo(
-			() => [
-				history(),
-				bracketMatching(),
-				linter(esLint(eslintInstance, eslintOptions), { delay: 0 }),
-				javascript({ typescript: true }),
-				ESLintPlaygroundTheme,
-				ESLintPlaygroundHighlightStyle,
-			],
-			[eslintOptions, eslintInstance],
-		);
+	const extensions = useMemo(
+		() => [
+			history(),
+			bracketMatching(),
+			linter(esLint(eslintInstance, eslintOptions), { delay: 0 }),
+			javascript({ typescript: true }),
+			ESLintPlaygroundTheme,
+			ESLintPlaygroundHighlightStyle,
+		],
+		[eslintOptions, eslintInstance],
+	);
 
-		useImperativeHandle(ref, () => ({
-			scrollToPosition(line, col) {
-				const editorView = editorRef.current.view;
-				const { state } = editorView;
-				const pos = state.doc.line(line).from + col;
+	useImperativeHandle(ref, () => ({
+		scrollToPosition(line, col) {
+			const editorView = editorRef.current.view;
+			const { state } = editorView;
+			const pos = state.doc.line(line).from + col;
 
-				// Set the cursor selection to the position
-				editorView.dispatch({
-					selection: { anchor: pos },
-					scrollIntoView: true,
-				});
+			// Set the cursor selection to the position
+			editorView.dispatch({
+				selection: { anchor: pos },
+				scrollIntoView: true,
+			});
 
-				const linePos = editorView.coordsAtPos(
-					state.doc.line(line).from,
-				);
+			const linePos = editorView.coordsAtPos(state.doc.line(line).from);
 
-				// Calculate to try to center the line in the editor
-				if (linePos) {
-					const editorRect = editorView.dom.getBoundingClientRect();
-					const offset =
-						linePos.top - editorRect.top - editorRect.height / 2;
-					editorView.scrollDOM.scrollTop += offset;
-				}
+			// Calculate to try to center the line in the editor
+			if (linePos) {
+				const editorRect = editorView.dom.getBoundingClientRect();
+				const offset =
+					linePos.top - editorRect.top - editorRect.height / 2;
+				editorView.scrollDOM.scrollTop += offset;
+			}
 
-				editorView.focus();
-			},
-		}));
+			editorView.focus();
+		},
+	}));
 
-		return (
-			<CodeMirror
-				value={codeValue}
-				minWidth="100%"
-				height="100%"
-				ref={editorRef}
-				extensions={extensions}
-				onChange={value => {
-					onUpdate(value);
-				}}
-			/>
-		);
-	},
-);
-
-CodeEditor.displayName = "CodeEditor";
-
-export default CodeEditor;
+	return (
+		<CodeMirror
+			value={codeValue}
+			minWidth="100%"
+			height="100%"
+			ref={editorRef}
+			extensions={extensions}
+			onChange={value => {
+				onUpdate(value);
+			}}
+		/>
+	);
+}