From e0ee034fdfd80304c1eb1e07e2c090daea9ca5ae Mon Sep 17 00:00:00 2001 From: Chris Laplante Date: Sat, 11 May 2024 16:19:17 -0400 Subject: [PATCH] try adding ace editor --- package-lock.json | 43 ++++++++++++++++++++++++++++++++++-------- package.json | 2 ++ src/components/App.tsx | 21 ++++++++++++++++++--- 3 files changed, 55 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 921f304..c9611a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,11 @@ "@mantine/hooks": "^7.9.1", "@types/react": "^18.2.77", "@types/react-dom": "^18.2.25", + "ace-builds": "^1.33.1", "classnames": "^2.5.1", "pyodide": "^0.25.1", "react": "^18.2.0", + "react-ace": "^11.0.1", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.13" }, @@ -3031,6 +3033,11 @@ "node": ">= 0.6" } }, + "node_modules/ace-builds": { + "version": "1.33.1", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.1.tgz", + "integrity": "sha512-pj5mcXV1n3s86UI4SWUt8X0ltN8cTaYcvF76cSmvy5i2ZDtXX9KkjVcYTGkCV7ox6VUrzqHByeqH0xRsMjXi4g==" + }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", @@ -4346,6 +4353,11 @@ "node": ">=0.3.1" } }, + "node_modules/diff-match-patch": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz", + "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -7030,8 +7042,7 @@ "node_modules/lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", - "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", - "dev": true + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==" }, "node_modules/lodash.has": { "version": "4.5.2", @@ -7039,6 +7050,11 @@ "integrity": "sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==", "dev": true }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -7371,7 +7387,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -8113,7 +8128,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -8249,11 +8263,26 @@ "node": ">=0.10.0" } }, + "node_modules/react-ace": { + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-11.0.1.tgz", + "integrity": "sha512-ulk2851Fx2j59AAahZHTe7rmQ5bITW1xytskAt11F8dv3rPLtdwBXCyT2qSbRnJvOq8UpuAhWO4/JhKGqQBEDA==", + "dependencies": { + "ace-builds": "^1.32.8", + "diff-match-patch": "^1.0.5", + "lodash.get": "^4.4.2", + "lodash.isequal": "^4.5.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -8277,8 +8306,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-number-format": { "version": "5.3.4", @@ -8788,7 +8816,6 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index 519dd34..da8d80e 100644 --- a/package.json +++ b/package.json @@ -63,9 +63,11 @@ "@mantine/hooks": "^7.9.1", "@types/react": "^18.2.77", "@types/react-dom": "^18.2.25", + "ace-builds": "^1.33.1", "classnames": "^2.5.1", "pyodide": "^0.25.1", "react": "^18.2.0", + "react-ace": "^11.0.1", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.13" } diff --git a/src/components/App.tsx b/src/components/App.tsx index 0c1febc..4f612b7 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5,6 +5,7 @@ import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core' import FetchWithProgress from "./FetchWithProgress"; import PyodideLoader from "./PyodideLoader"; import pyodide from "pyodide"; +import AceEditor from "react-ace"; const myColor: MantineColorsTuple = [ '#e4f8ff', @@ -25,7 +26,7 @@ const theme = createTheme({ } }); -export const App: React.FC = () => { +const Inner: React.FC = () => { const [data, setData] = useState(null); const [pyodideModule, setPyodideModule] = useState(null); const [ran, setRan] = useState(false); @@ -181,10 +182,24 @@ print(sys.meta_path) go(); }, [data, pyodideModule, ran, setRan]); + + return <> + + + ; +} + +export const App: React.FC = () => { + return ( - - + + ); }; \ No newline at end of file