Upgrade codemirror 5 to 6 (breaking change) uiwjs/react-codemirror#216

frontend/package.json

@@ -38,20 +38,26 @@
 		"webpack-dev-server": "^5.0.4"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.16.3",
+		"@codemirror/commands": "^6.6.0",
+		"@codemirror/lang-javascript": "^6.2.2",
+		"@codemirror/language": "^6.10.2",
+		"@codemirror/lint": "^6.8.1",
+		"@codemirror/search": "^6.5.6",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.28.1",
 		"@emotion/react": "^11.11.4",
 		"@emotion/styled": "^11.11.5",
 		"@fontsource/roboto": "^5.0.13",
 		"@loadable/component": "^5.12.0",
 		"@mui/icons-material": "^5.15.19",
 		"@mui/material": "^5.15.19",
-		"codemirror": "^5.65.16",
+		"@uiw/react-codemirror": "^4.22.2",
 		"core-js": "^3.1.4",
 		"file-saver": "^2.0.5",
 		"jszip": "^3.6.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-github-btn": "^1.2.0",
-		"react-github-button": "^0.1.11",
 		"react-router-dom": "^6.23.1",
 		"styled-components": "^5.2.3"
 	},

frontend/src/pages/runjs/index.js

@@ -1,19 +1,27 @@
-import React, { useEffect, useCallback, useRef, useState } from "react";
-import { initCodeEditor, createNode } from "./lib";
+import React, { useRef, useState } from "react";
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
 
-import init from "./init";
 import "./bulma.min.css";
 import "./index.less";
 
 import AppBar from './components/AppBar'
 
+// TODO:
 // material UI Layout
 // import Grid from '@mui/material/Unstable_Grid2';
+// https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text
 
 export default () => {
 	const [editorMode, setEditorMode] = useState("js");
 	const [autoRun, setAutoRun] = useState(false);
 
+	const [value, setValue] = React.useState("console.log('hello world!');");
+	const onChange = React.useCallback((val, viewUpdate) => {
+		console.log('val:', val);
+		setValue(val);
+	}, []);
+
 	let staticRef = useRef({
 		isAuto: false,
 		js: null,
@@ -22,74 +30,6 @@ export default () => {
 		lib: ["https://unpkg.com/babel-standalone/babel.min.js", "https://unpkg.com/react/umd/react.development.js", "https://unpkg.com/react-dom/umd/react-dom.development.js"],
 	});
 
-	const onFormat = useCallback((type) => {
-		let editor = staticRef.current[type];
-		editor.execCommand("selectAll");
-		editor.autoFormatRange(editor.getCursor(true), editor.getCursor(false));
-		editor.execCommand("goDocEnd");
-	}, []);
-
-	const onLoad = useCallback(() => {
-		let iframe = document.getElementById("preview"),
-			html = staticRef.current.html.getValue(),
-			css = staticRef.current.css.getValue(),
-			js = staticRef.current.js.getValue();
-		var preview;
-		if (iframe.contentDocument) {
-			preview = iframe.contentDocument;
-		} else if (iframe.contentWindow) {
-			preview = iframe.contentWindow.document;
-		} else {
-			preview = iframe.document;
-		}
-		let lib = `<script src="static/console.js"></script>`;
-		staticRef.current.lib.map((item) => {
-			lib += `<script src="${item}"></script>`;
-		});
-		preview.open();
-		preview.write(`${lib}${html}<script  type="text/babel" data-presets="react">${js}</script>`);
-		preview.close();
-		preview.head.innerHTML = `
-			<link rel="stylesheet" href="./static/view.css">
-			<style>${css}</style>
-		`;
-	}, []);
-
-	const onRun = useCallback(() => {
-		let iframe = document.getElementById("preview");
-		iframe.contentWindow.location.reload(true);
-	}, []);
-
-	const onAutoRun = useCallback(() => {
-		if (staticRef.current.isAuto) onRun();
-	}, [autoRun]);
-
-	useEffect(() => {
-		if (staticRef.current.js == null && staticRef.current.html == null && staticRef.current.css == null) {
-			staticRef.current.js = initCodeEditor(document.getElementById("js"), "javascript", init.javascript, onAutoRun);
-			staticRef.current.html = initCodeEditor(document.getElementById("html"), "htmlmixed", init.html, onAutoRun);
-			staticRef.current.css = initCodeEditor(document.getElementById("css"), "css", init.css, onAutoRun);
-			onFormat("js");
-			onFormat("css");
-			onFormat("html");
-			onRun();
-		}
-
-		function showMessage(data) {
-			if (data.data && ["log", "error", "info", 'warn'].includes(data.data.type)) {
-				let console = document.getElementById("console");
-				console.appendChild(createNode(data.data.data));
-				console.scrollTop = console.scrollHeight;
-			}
-		}
-		window.addEventListener("message", showMessage);
-
-		// https://stackoverflow.com/questions/71795406/react-useeffect-cleanup-for-event-listener
-		return () => {
-			window.removeEventListener("message", showMessage);
-		}
-	}, []);
-
 	return (
 		<div className="runjs">
 			<AppBar
@@ -100,23 +40,7 @@ export default () => {
 				autoRun={autoRun}
 			/>
 
-			<div className="runjs__editor">
-				<div id="html-wrap" style={{ visibility: editorMode == "html" ? "visible" : "hidden" }}>
-					<textarea class="form-control" id="html"></textarea>
-				</div>
-				<div id="css-wrap" style={{ visibility: editorMode == "css" ? "visible" : "hidden" }}>
-					<textarea class="form-control" id="css"></textarea>
-				</div>
-				<div id="js-wrap" style={{ visibility: editorMode == "js" ? "visible" : "hidden" }}>
-					<textarea class="form-control" id="js"></textarea>
-				</div>
-			</div>
-
-			<div className="runjs__preview">
-				<iframe onLoad={onLoad} id="preview" src="./static/view.html" seamless width="100%" height="100%"></iframe>
-			</div>
-
-			<div className="runjs__console" id="console"></div>
+			<CodeMirror value={value} height="200px" extensions={[javascript({ jsx: true })]} onChange={onChange} />
 		</div>
 	);
 };