Skip to content

Commit 78760bf

Browse files
Smit3949Smit3949
committed
new code editor
1 parent 52bb873 commit 78760bf

File tree

3 files changed

+174
-105
lines changed

3 files changed

+174
-105
lines changed

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"@auth0/auth0-react": "^1.6.0",
77
"@chakra-ui/react": "^1.6.7",
8+
"@codeium/react-code-editor": "^1.0.12",
89
"@craco/craco": "^6.2.0",
910
"@emotion/react": "^11",
1011
"@emotion/styled": "^11",
@@ -49,9 +50,9 @@
4950
"not op_mini all"
5051
],
5152
"development": [
52-
"last 1 chrome version",
53-
"last 1 firefox version",
54-
"last 1 safari version"
53+
">0.2%",
54+
"not dead",
55+
"not op_mini all"
5556
]
5657
},
5758
"devDependencies": {

‎src/components/IDE.js‎

Lines changed: 77 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import "codemirror/mode/pascal/pascal";
1616
import "codemirror/mode/perl/perl";
1717
import "codemirror/mode/php/php";
1818
import "codemirror/mode/ruby/ruby";
19+
import { CodeiumEditor } from "@codeium/react-code-editor";
1920

2021
import Peer from "peerjs";
2122
import closeIcon from "../images/icons/close.png";
@@ -583,6 +584,15 @@ export default function IDE({
583584
reader.readAsText(file);
584585
};
585586

587+
const aWithHref = document.querySelectorAll("a[href]");
588+
aWithHref.forEach((a) => {
589+
if (
590+
a.getAttribute("href") === "https://codeium.com?referrer=codeium-editor"
591+
) {
592+
a.remove();
593+
}
594+
});
595+
586596
return (
587597
<>
588598
<div className="flex">
@@ -609,131 +619,99 @@ export default function IDE({
609619
/>
610620
</div>
611621
{selected === "python" && (
612-
<CodeMirror
613-
value={python}
614-
className="flex-grow text-base"
615-
options={{
616-
mode: "python",
617-
theme: "dracula",
618-
lineNumbers: true,
619-
scrollbarStyle: null,
620-
lineWrapping: true,
621-
}}
622-
onBeforeChange={(editor, data, changes) => {
623-
setpython(changes);
622+
<CodeiumEditor
623+
height={"100%"}
624+
language="python"
625+
onChange={(value) => {
626+
setpython(value);
624627
}}
628+
className="flex-grow text-base"
629+
defaultValue={python}
630+
theme="vs-dark"
631+
// value={python}
632+
// className="flex-grow text-base"
633+
// options={{
634+
// mode: "python",
635+
// theme: "dracula",
636+
// lineNumbers: true,
637+
// scrollbarStyle: null,
638+
// lineWrapping: true,
639+
// }}
640+
// onBeforeChange={(editor, data, changes) => {
641+
// setpython(changes);
642+
// }}
625643
/>
626644
)}
627645
{selected === "cpp" && (
628-
<CodeMirror
629-
value={cpp}
630-
className="flex-grow text-base"
631-
options={{
632-
mode: "text/x-csrc",
633-
theme: "dracula",
634-
lineNumbers: true,
635-
scrollbarStyle: null,
636-
lineWrapping: true,
637-
}}
638-
onBeforeChange={(editor, data, changes) => {
639-
setcpp(changes);
646+
<CodeiumEditor
647+
height={"100%"}
648+
language="cpp"
649+
onChange={(value) => {
650+
setcpp(value);
640651
}}
652+
className="flex-grow text-base"
653+
defaultValue={cpp}
654+
theme="vs-dark"
641655
/>
642656
)}
643657
{selected === "java" && (
644-
<CodeMirror
645-
value={java}
646-
className="flex-grow text-base"
647-
options={{
648-
mode: "text/x-java",
649-
theme: "dracula",
650-
lineNumbers: true,
651-
scrollbarStyle: null,
652-
lineWrapping: true,
653-
}}
654-
onBeforeChange={(editor, data, changes) => {
655-
setjava(changes);
658+
<CodeiumEditor
659+
height={"100%"}
660+
language="java"
661+
onChange={(value) => {
662+
setjava(value);
656663
}}
664+
className="flex-grow text-base"
665+
defaultValue={java}
666+
theme="vs-dark"
657667
/>
658668
)}
659669
{selected === "javascript" && (
660-
<CodeMirror
661-
value={js}
662-
className="flex-grow text-base"
663-
options={{
664-
mode: "text/ecmascript",
665-
theme: "dracula",
666-
lineNumbers: true,
667-
scrollbarStyle: null,
668-
lineWrapping: true,
669-
}}
670-
onBeforeChange={(editor, data, changes) => {
671-
setjs(changes);
670+
<CodeiumEditor
671+
height={"100%"}
672+
language="javascript"
673+
onChange={(value) => {
674+
setjs(value);
672675
}}
673-
/>
674-
)}
675-
{selected === "pascal" && (
676-
<CodeMirror
677-
value={pascal}
678676
className="flex-grow text-base"
679-
options={{
680-
mode: "text/x-pascal",
681-
theme: "dracula",
682-
lineNumbers: true,
683-
scrollbarStyle: null,
684-
lineWrapping: true,
685-
}}
686-
onBeforeChange={(editor, data, changes) => {
687-
setpascal(changes);
688-
}}
677+
defaultValue={js}
678+
theme="vs-dark"
689679
/>
690680
)}
691681
{selected === "ruby" && (
692-
<CodeMirror
693-
value={ruby}
694-
className="flex-grow text-base"
695-
options={{
696-
mode: "text/x-ruby",
697-
theme: "dracula",
698-
lineNumbers: true,
699-
scrollbarStyle: null,
700-
lineWrapping: true,
701-
}}
702-
onBeforeChange={(editor, data, changes) => {
703-
setruby(changes);
682+
<CodeiumEditor
683+
height={"100%"}
684+
language="ruby"
685+
onChange={(value) => {
686+
setruby(value);
704687
}}
688+
className="flex-grow text-base"
689+
defaultValue={ruby}
690+
theme="vs-dark"
705691
/>
706692
)}
707693
{selected === "php" && (
708-
<CodeMirror
709-
value={php}
710-
className="flex-grow text-base"
711-
options={{
712-
mode: "text/x-php",
713-
theme: "dracula",
714-
lineNumbers: true,
715-
scrollbarStyle: null,
716-
lineWrapping: true,
717-
}}
718-
onBeforeChange={(editor, data, changes) => {
719-
setphp(changes);
694+
<CodeiumEditor
695+
height={"100%"}
696+
language="php"
697+
onChange={(value) => {
698+
setphp(value);
720699
}}
700+
className="flex-grow text-base"
701+
defaultValue={php}
702+
theme="vs-dark"
721703
/>
722704
)}
723705
{selected === "perl" && (
724-
<CodeMirror
725-
value={perl}
726-
className="flex-grow text-base"
727-
options={{
728-
mode: "text/x-perl",
729-
theme: "dracula",
730-
lineNumbers: true,
731-
scrollbarStyle: null,
732-
lineWrapping: true,
733-
}}
734-
onBeforeChange={(editor, data, changes) => {
735-
setperl(changes);
706+
<CodeiumEditor
707+
height={"100%"}
708+
language="perl"
709+
onChange={(value) => {
710+
setperl(value);
736711
}}
712+
className="flex-grow text-base"
713+
defaultValue={perl}
714+
theme="vs-dark"
737715
/>
738716
)}
739717
</div>
@@ -966,9 +944,6 @@ function LanguageSelector({ language, setLanguage }) {
966944
<option className="bg-theme-dark-blue" value="ruby">
967945
ruby
968946
</option>
969-
<option className="bg-theme-dark-blue" value="pascal">
970-
pascal
971-
</option>
972947
</select>
973948
);
974949
}

‎yarn.lock‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1170,6 +1170,53 @@
11701170
resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
11711171
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
11721172

1173+
"@bufbuild/buf-darwin-arm64@1.28.1":
1174+
version "1.28.1"
1175+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-darwin-arm64/-/buf-darwin-arm64-1.28.1.tgz#ffe09c8b998d6cc714ab525999fe026b25c952e9"
1176+
integrity sha512-nAyvwKkcd8qQTExCZo5MtSRhXLK7e3vzKFKHjXfkveRakSUST2HFlFZAHfErZimN4wBrPTN0V0hNRU8PPjkMpQ==
1177+
1178+
"@bufbuild/buf-darwin-x64@1.28.1":
1179+
version "1.28.1"
1180+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-darwin-x64/-/buf-darwin-x64-1.28.1.tgz#03aa18f7961b651679e349a382f71f1bad3dadec"
1181+
integrity sha512-b0eT3xd3vX5a5lWAbo5h7FPuf9MsOJI4I39qs4TZnrlZ8BOuPfqzwzijiFf9UCwaX2vR1NQXexIoQ80Ci+fCHw==
1182+
1183+
"@bufbuild/buf-linux-aarch64@1.28.1":
1184+
version "1.28.1"
1185+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-linux-aarch64/-/buf-linux-aarch64-1.28.1.tgz#2af0683dd6a803bdaba7ea92148007393a058705"
1186+
integrity sha512-p5h9bZCVLMh8No9/7k7ulXzsFx5P7Lu6DiUMjSJ6aBXPMYo6Xl7r/6L2cQkpsZ53HMtIxCgMYS9a7zoS4K8wIw==
1187+
1188+
"@bufbuild/buf-linux-x64@1.28.1":
1189+
version "1.28.1"
1190+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-linux-x64/-/buf-linux-x64-1.28.1.tgz#dbac29d39fb4c0a509ebf49fb3a76d481aebe1e0"
1191+
integrity sha512-fVJ3DiRigIso06jgEl+JNp59Y5t2pxDHd10d3SA4r+14sXbZ2J7Gy/wBqVXPry4x/jW567KKlvmhg7M5ZBgCQQ==
1192+
1193+
"@bufbuild/buf-win32-arm64@1.28.1":
1194+
version "1.28.1"
1195+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-win32-arm64/-/buf-win32-arm64-1.28.1.tgz#69242d904c73368c2735aa9efc338dd1f5864bfa"
1196+
integrity sha512-KJiRJpugQRK/jXC46Xjlb68UydWhCZj2jHdWLIwNtgXd1WTJ3LngChZV7Y6pPK08pwBAVz0JYeVbD5IlTCD4TQ==
1197+
1198+
"@bufbuild/buf-win32-x64@1.28.1":
1199+
version "1.28.1"
1200+
resolved "https://registry.yarnpkg.com/@bufbuild/buf-win32-x64/-/buf-win32-x64-1.28.1.tgz#5014fd87ed29fd26c1c6d2e97eba9ac7b8a14e51"
1201+
integrity sha512-vMnc+7OVCkmlRWQsgYHgUqiBPRIjD8XeoRyApJ07YZzGs7DkRH4LhvmacJbLd3wORylbn6gLz3pQa8J/M61mzg==
1202+
1203+
"@bufbuild/buf@1.28.1":
1204+
version "1.28.1"
1205+
resolved "https://registry.yarnpkg.com/@bufbuild/buf/-/buf-1.28.1.tgz#b107bd1b01a676040b1112de9eb94642bea48a08"
1206+
integrity sha512-WRDagrf0uBjfV9s5eyrSPJDcdI4A5Q7JMCA4aMrHRR8fo/TTjniDBjJprszhaguqsDkn/LS4QIu92HVFZCrl9A==
1207+
optionalDependencies:
1208+
"@bufbuild/buf-darwin-arm64" "1.28.1"
1209+
"@bufbuild/buf-darwin-x64" "1.28.1"
1210+
"@bufbuild/buf-linux-aarch64" "1.28.1"
1211+
"@bufbuild/buf-linux-x64" "1.28.1"
1212+
"@bufbuild/buf-win32-arm64" "1.28.1"
1213+
"@bufbuild/buf-win32-x64" "1.28.1"
1214+
1215+
"@bufbuild/protobuf@1.4.2":
1216+
version "1.4.2"
1217+
resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.4.2.tgz#dc4faf21264a47b71a15806616043cb006e80ac8"
1218+
integrity sha512-JyEH8Z+OD5Sc2opSg86qMHn1EM1Sa+zj/Tc0ovxdwk56ByVNONJSabuCUbLQp+eKN3rWNfrho0X+3SEqEPXIow==
1219+
11731220
"@chakra-ui/accordion@1.3.6":
11741221
version "1.3.6"
11751222
resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.3.6.tgz#9ebbcec4d1871ab79bdac84187246ce1d34c8d8a"
@@ -1724,6 +1771,28 @@
17241771
exec-sh "^0.3.2"
17251772
minimist "^1.2.0"
17261773

1774+
"@codeium/react-code-editor@^1.0.12":
1775+
version "1.0.12"
1776+
resolved "https://registry.yarnpkg.com/@codeium/react-code-editor/-/react-code-editor-1.0.12.tgz#d806769f95f4db9814620222c2505ac03e63cfe1"
1777+
integrity sha512-ps0J00jGBs/mhr1R9u+UTW+uK/6ba0WhCr2qYr7M9/w4ZQQXYmiZ3zniZwJGAhle69y5AE7SiUTVWZK7BU/4UA==
1778+
dependencies:
1779+
"@bufbuild/buf" "1.28.1"
1780+
"@bufbuild/protobuf" "1.4.2"
1781+
"@connectrpc/connect" "1.1.3"
1782+
"@connectrpc/connect-web" "1.1.3"
1783+
"@monaco-editor/react" "^4.6.0"
1784+
dotenv "^16.3.1"
1785+
1786+
"@connectrpc/connect-web@1.1.3":
1787+
version "1.1.3"
1788+
resolved "https://registry.yarnpkg.com/@connectrpc/connect-web/-/connect-web-1.1.3.tgz#027922b4f1537ecb1eaaa31ec3a59dd471a65320"
1789+
integrity sha512-WfShOZt91duJngqivYF4wJFRbeRa4bF/fPMfDVN0MAYSX3VuaTMn8o9qgKN7tsg2H2ZClyOVQwMkZx6IdcP7Zw==
1790+
1791+
"@connectrpc/connect@1.1.3":
1792+
version "1.1.3"
1793+
resolved "https://registry.yarnpkg.com/@connectrpc/connect/-/connect-1.1.3.tgz#6099789e392bf3d4c3d831f294b1a9ff969703a1"
1794+
integrity sha512-AXkbsLQe2Nm7VuoN5nqp05GEb9mPa/f5oFzDqTbHME4i8TghTrlY03uefbhuAq4wjsnfDnmuxHZvn6ndlgXmbg==
1795+
17271796
"@craco/craco@^6.2.0":
17281797
version "6.2.0"
17291798
resolved "https://registry.npmjs.org/@craco/craco/-/craco-6.2.0.tgz"
@@ -2118,6 +2187,20 @@
21182187
"@types/yargs" "^16.0.0"
21192188
chalk "^4.0.0"
21202189

2190+
"@monaco-editor/loader@^1.4.0":
2191+
version "1.4.0"
2192+
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
2193+
integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
2194+
dependencies:
2195+
state-local "^1.0.6"
2196+
2197+
"@monaco-editor/react@^4.6.0":
2198+
version "4.6.0"
2199+
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
2200+
integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
2201+
dependencies:
2202+
"@monaco-editor/loader" "^1.4.0"
2203+
21212204
"@nodelib/fs.scandir@2.1.4":
21222205
version "2.1.4"
21232206
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -5130,6 +5213,11 @@ dotenv@8.2.0:
51305213
resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
51315214
integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
51325215

5216+
dotenv@^16.3.1:
5217+
version "16.4.5"
5218+
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
5219+
integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
5220+
51335221
duplexer@^0.1.1:
51345222
version "0.1.2"
51355223
resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -11562,6 +11650,11 @@ stackframe@^1.1.1:
1156211650
resolved "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz"
1156311651
integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
1156411652

11653+
state-local@^1.0.6:
11654+
version "1.0.7"
11655+
resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
11656+
integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
11657+
1156511658
static-extend@^0.1.1:
1156611659
version "0.1.2"
1156711660
resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz"

0 commit comments

Comments
 (0)