chore: update codemirror

package.json

@@ -119,15 +119,12 @@
     "yorkie": "^2.0.0"
   },
   "dependencies": {
-    "@codemirror/highlight": "0.19.7",
-    "@codemirror/history": "0.19.2",
-    "@codemirror/lang-javascript": "0.19.7",
-    "@codemirror/matchbrackets": "0.19.4",
-    "@codemirror/state": "0.19.9",
-    "@codemirror/tooltip": "0.19.16",
-    "@codemirror/view": "0.19.47",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.6",
     "@typescript-eslint/parser": "^8.46.2",
-    "@uiw/react-codemirror": "4.5.1",
+    "@uiw/react-codemirror": "^4.25.2",
     "algoliasearch": "^4.25.2",
     "crelt": "^1.0.6",
     "react": "^19.1.0",

src/assets/scss/tokens/themes.scss

@@ -95,6 +95,7 @@
 	--editor-comment-color: var(--color-success-700);
 	--editor-keyword-color: var(--color-primary-900);
 	--editor-name-color: var(--color-primary-700);
+	--editor-active-line-background-color: var(--color-neutral-100);
 	--editor-bracket-match-outline-color: var(--color-neutral-200);
 	--editor-bracket-match-background-color: var(--color-neutral-100);
 	--editor-bracket-match-color: none;
@@ -134,6 +135,7 @@
 		--editor-comment-color: var(--color-success-500);
 		--editor-keyword-color: var(--color-primary-500);
 		--editor-name-color: var(--color-primary-300);
+		--editor-active-line-background-color: var(--color-neutral-800);
 		--editor-bracket-match-outline-color: var(--color-neutral-600);
 		--editor-bracket-match-background-color: var(--color-neutral-700);
 		--editor-bracket-match-color: var(--color-neutral-25);
@@ -172,6 +174,7 @@ html[data-theme="light"] {
 	--editor-comment-color: var(--color-success-700);
 	--editor-keyword-color: var(--color-primary-900);
 	--editor-name-color: var(--color-primary-700);
+	--editor-active-line-background-color: var(--color-neutral-100);
 	--editor-bracket-match-outline-color: var(--color-neutral-200);
 	--editor-bracket-match-background-color: var(--color-neutral-100);
 	--editor-bracket-match-color: none;
@@ -209,6 +212,7 @@ html[data-theme="dark"] {
 	--editor-comment-color: var(--color-success-500);
 	--editor-keyword-color: var(--color-primary-500);
 	--editor-name-color: var(--color-primary-300);
+	--editor-active-line-background-color: var(--color-neutral-800);
 	--editor-bracket-match-outline-color: var(--color-neutral-600);
 	--editor-bracket-match-background-color: var(--color-neutral-700);
 	--editor-bracket-match-color: var(--color-neutral-25);

src/playground/components/CodeEditor.js

@@ -1,7 +1,5 @@
 import React, { useImperativeHandle, useMemo, useRef } from "react";
 import CodeMirror from "@uiw/react-codemirror";
-import { history } from "@codemirror/history";
-import { bracketMatching } from "@codemirror/matchbrackets";
 import { javascript, esLint } from "@codemirror/lang-javascript";
 import { linter } from "../utils/codemirror-linter-extension";
 import {
@@ -21,10 +19,14 @@ export default function CodeEditor({
 
 	const extensions = useMemo(
 		() => [
-			history(),
-			bracketMatching(),
 			linter(esLint(eslintInstance, eslintOptions), { delay: 0 }),
-			javascript({ typescript: true }),
+			javascript({
+				typescript: true,
+				jsx: Boolean(
+					eslintOptions.languageOptions.parserOptions.ecmaFeatures
+						.jsx,
+				),
+			}),
 			ESLintPlaygroundTheme,
 			ESLintPlaygroundHighlightStyle,
 		],

src/playground/scss/editor.scss

@@ -17,3 +17,11 @@
 .cm-tooltip.cm-tooltip-autocomplete > ul {
 	border-radius: 0.125rem;
 }
+
+.cm-editor:not(:has(.cm-selectionBackground)) .cm-activeLine {
+	background-color: var(--editor-active-line-background-color);
+}
+
+.cm-editor:has(.cm-selectionBackground) .cm-activeLine {
+	background-color: transparent;
+}

src/playground/utils/codemirror-linter-extension.js

@@ -9,13 +9,13 @@ import * as ReactDOM from "react-dom/client";
 import {
 	Decoration,
 	EditorView,
-	ViewPlugin,
+	hoverTooltip,
 	logException,
+	showPanel,
+	ViewPlugin,
 	WidgetType,
 } from "@codemirror/view";
 import { StateEffect, StateField, Facet } from "@codemirror/state";
-import { hoverTooltip } from "@codemirror/tooltip";
-import { showPanel } from "@codemirror/panel";
 import elt from "crelt";
 import Popup from "../components/Popup";
 

src/playground/utils/codemirror-theme.js

@@ -1,5 +1,6 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { EditorView } from "@codemirror/view";
-import { HighlightStyle, tags } from "@codemirror/highlight";
+import { tags } from "@lezer/highlight";
 
 export const ESLintPlaygroundTheme = EditorView.theme(
 	{
@@ -21,7 +22,7 @@ export const ESLintPlaygroundTheme = EditorView.theme(
 			paddingRight: "1px",
 			backgroundColor: "var(--body-background-color)",
 		},
-		".cm-activeLine, .cm-activeLineGutter": {
+		".cm-activeLineGutter": {
 			backgroundColor: "var(--body-background-color)",
 		},
 		".cm-content": {
@@ -60,8 +61,7 @@ export const ESLintPlaygroundTheme = EditorView.theme(
 	{ dark: true },
 );
 
-// The highlighting style for code in the ESLint playground theme.
-export const ESLintPlaygroundHighlightStyle = HighlightStyle.define([
+const HighlightDefinition = HighlightStyle.define([
 	{
 		tag: tags.string,
 		color: "var(--editor-string-color)",
@@ -104,7 +104,5 @@ export const ESLintPlaygroundHighlightStyle = HighlightStyle.define([
 	},
 ]);
 
-export const ESLintPlayground = [
-	ESLintPlaygroundTheme,
-	ESLintPlaygroundHighlightStyle,
-];
+export const ESLintPlaygroundHighlightStyle =
+	syntaxHighlighting(HighlightDefinition);