From 66fca4c6a0db6c48c57b02db4489e7d068925a75 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Fri, 7 May 2021 19:45:08 +0300 Subject: Install CodeMirror packages --- package.json | 3 + yarn.lock | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 259 insertions(+) diff --git a/package.json b/package.json index 5eefa87..d926446 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,9 @@ "private": false, "license": "MIT", "dependencies": { + "@codemirror/basic-setup": "0.18.0", + "@codemirror/lang-python": "0.18.0", + "@codemirror/theme-one-dark": "0.18.0", "@emotion/react": "11.1.5", "@fortawesome/fontawesome-svg-core": "1.2.34", "@fortawesome/free-brands-svg-icons": "5.15.2", diff --git a/yarn.lock b/yarn.lock index 593c0b1..cc6c310 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1077,6 +1077,228 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@codemirror/autocomplete@^0.18.0": + version "0.18.5" + resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.18.5.tgz#5c25ddbef858503920fa4912b48bf78be93ee462" + integrity sha512-Zp/HMTwvaP4B01HQx+5Ga0xBBLAwNaAlbALip355NPRBkYX9PZheX5b/F5IUAdI6kIrF2eYz1xAOChXgYg9maw== + dependencies: + "@codemirror/language" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/tooltip" "^0.18.4" + "@codemirror/view" "^0.18.0" + lezer-tree "^0.13.0" + +"@codemirror/basic-setup@0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/basic-setup/-/basic-setup-0.18.0.tgz#721c50ca06581d9c31e45e2ccea5a280b4933a35" + integrity sha512-3IU6gBIkVVCF+ZtKqzCmYU1GLfbA12OsPYPWWq9rSzEb5G/FrWCA51ERYJpS3CzOI7TfBFjZZYc5j0OiNIF2VQ== + dependencies: + "@codemirror/autocomplete" "^0.18.0" + "@codemirror/closebrackets" "^0.18.0" + "@codemirror/commands" "^0.18.0" + "@codemirror/comment" "^0.18.0" + "@codemirror/fold" "^0.18.0" + "@codemirror/gutter" "^0.18.0" + "@codemirror/highlight" "^0.18.0" + "@codemirror/history" "^0.18.0" + "@codemirror/language" "^0.18.0" + "@codemirror/lint" "^0.18.0" + "@codemirror/matchbrackets" "^0.18.0" + "@codemirror/rectangular-selection" "^0.18.0" + "@codemirror/search" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/closebrackets@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.18.0.tgz#4bd7e9227ed6e90e590fa6d289d34b0c065cb8cf" + integrity sha512-O1RAgUkzF4nq/B8IyXenZKZ1rJi2Mc7I6y4IhWhELiTnjyQy7YdAthTsJ40mNr8kZ6gRbasYe3K7TraITElZJA== + dependencies: + "@codemirror/language" "^0.18.0" + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/commands@^0.18.0": + version "0.18.2" + resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.18.2.tgz#a90067b1e3127ffe2c1be2daa68c0f4aeda59308" + integrity sha512-NeIpsQe5yUIhG7sD1HPaw/9TO5V7miMKwGwhT/0tkgkmgnMtJcgnguM1gjaUlaZ09BBJO6s61D8JHNDUvBI6tA== + dependencies: + "@codemirror/language" "^0.18.0" + "@codemirror/matchbrackets" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + lezer-tree "^0.13.0" + +"@codemirror/comment@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/comment/-/comment-0.18.0.tgz#f42e3baaacbeb57f22f4a3eabe5738b3d2bca1f7" + integrity sha512-yb/8dz/zIzXIa00L0Ed7/R8m2FupPZux/EMquwzbAOnTNcXeeaPVcp9kEMPf85b9D82csunXXdiOSalBVGjKWQ== + dependencies: + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/fold@^0.18.0": + version "0.18.1" + resolved "https://registry.yarnpkg.com/@codemirror/fold/-/fold-0.18.1.tgz#118019ad79f6e0d48dc932823385d4d9f2e0eaf5" + integrity sha512-vvMUgDeSmeVow7/75YoNTERxPsdnIBeEw1JL2YVpLyscsUlalqwuxdhiHDLT5zjAu6JvMoTC103mwqgAYwM9tA== + dependencies: + "@codemirror/gutter" "^0.18.0" + "@codemirror/language" "^0.18.0" + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/gutter@^0.18.0": + version "0.18.2" + resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.18.2.tgz#b47ad6ea2ae9f18eccf015610598dfb302d086d3" + integrity sha512-mrmzt6TG9sXSKOjL5LRLv/yPbVdQqVDNSUrisq9OpIHXwZgb2pg9jYhlhw8zdgB952BmENIMr2624I13uy568Q== + dependencies: + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/highlight@^0.18.0": + version "0.18.3" + resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.18.3.tgz#50e268630f113c322a2dc97c9f68d71934fffcb0" + integrity sha512-NmRmkmWl8ht6Y6Y39ghov84AMPCqhUPIH9fmILs2NaWxZFZf4jGCTzrULnmREGsTie+26+LbKUncIU+PBu1Qng== + dependencies: + "@codemirror/language" "^0.18.0" + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + lezer-tree "^0.13.0" + style-mod "^4.0.0" + +"@codemirror/history@^0.18.0": + version "0.18.1" + resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.18.1.tgz#853cde4b138b172235d58f945871f0fc08b7310a" + integrity sha512-Aad3p4zs6UYKCUMXYjh7cvPK0ajuL+rMib9yBZ61w81LLl6OkM31Xrn9J6CLJmPxCwP3OJFiqBmNSBQ05oIsTw== + dependencies: + "@codemirror/state" "^0.18.3" + "@codemirror/view" "^0.18.0" + +"@codemirror/lang-python@0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-0.18.0.tgz#d317566f7c51d906e3df98bf41a3c9a2ce03ef40" + integrity sha512-SZrt+TXD3uih4Cb8lTm7yt7JLIqehgI77PdGQXlPcYB/LHQdOuOPzXOXf8jqu/K+PRN72BFxfvb13teaxdERaQ== + dependencies: + "@codemirror/highlight" "^0.18.0" + "@codemirror/language" "^0.18.0" + lezer-python "^0.13.0" + +"@codemirror/language@^0.18.0": + version "0.18.1" + resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.18.1.tgz#23682324228606c4ae5b6a9f7cd0a4b9fdff83dd" + integrity sha512-j/TWV8sNmzU79kk/hPLb9NqSPoH59850kQSpgY11LxOEBlKVRKgaWabgNtUCSeVCAnfisGekupk3aq2ftILqug== + dependencies: + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + lezer "^0.13.4" + lezer-tree "^0.13.0" + +"@codemirror/lint@^0.18.0": + version "0.18.2" + resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.18.2.tgz#d80adb1767b486894e921785b5e82fa435d28ecf" + integrity sha512-WUZdlWNqwF6OIJFD/n3Pfsi1R3eIYrAmnnFhfEBUI/ftBh8RqjqOoPJvctHm++re85cwWzXSSZgSWxzse11PSA== + dependencies: + "@codemirror/panel" "^0.18.1" + "@codemirror/state" "^0.18.0" + "@codemirror/tooltip" "^0.18.4" + "@codemirror/view" "^0.18.0" + crelt "^1.0.5" + +"@codemirror/matchbrackets@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/matchbrackets/-/matchbrackets-0.18.0.tgz#64a493090d942de19f15a9ed3cb0fa19ed55f18b" + integrity sha512-dPDopnZVkD54sSYdmQbyQbPdiuIA83p7XxX6Hp1ScEkOjukwCiFXiA/84x10FUTsQpUYp8bDzm7gwII119bGIw== + dependencies: + "@codemirror/language" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + lezer-tree "^0.13.0" + +"@codemirror/panel@^0.18.1": + version "0.18.1" + resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.18.1.tgz#b2179cdfb7d7c2913ba682d61d00edff160cfad0" + integrity sha512-5Zo9cUw0QDlFzX4nhIDYjTARPOnPk5rzxAUQo1O35kTLV+6zRh7wsGlvU7VrZnBcIoaAmHfKrZ4lt6+h7fbFGw== + dependencies: + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/rangeset@^0.18.0": + version "0.18.1" + resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.18.1.tgz#0e51e1117fa5aae0134073735a07c659f334a699" + integrity sha512-Q+t92KlvDDD9oNXOvYHNL3kEUF1Y595OjSsl5GNZYI2JPY8IW9PoH1z37sgqgxMMuWQrDNp6AOrnd2j/7uBhFA== + dependencies: + "@codemirror/state" "^0.18.0" + +"@codemirror/rectangular-selection@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/rectangular-selection/-/rectangular-selection-0.18.0.tgz#87e1a4d319b5d55b4e97294e6df0070164e836c0" + integrity sha512-BQ4pp2zhXCVZNqct5LtLR3AOWVseENBF/3oOgBmwsCKH7c11NfTqIqgWG5EW8NLOXp8HP8cDm3np8eWez0VkGQ== + dependencies: + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/search@^0.18.0": + version "0.18.2" + resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-0.18.2.tgz#7f6311ce4d5749d92aefb41b2f8628d28d90918c" + integrity sha512-t90Ra34piJDF589hNDmuA1fVKCFDh0FTuTZTHDmmSaWS5OWq2++zAwRTQnOdQD+uGfEUwLQPiLJzu60NDhA5xw== + dependencies: + "@codemirror/panel" "^0.18.1" + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + "@codemirror/view" "^0.18.0" + crelt "^1.0.5" + +"@codemirror/state@^0.18.0", "@codemirror/state@^0.18.3": + version "0.18.7" + resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.18.7.tgz#3339a732387bb2c034987c57ccf0649ef2f7c4c1" + integrity sha512-cVyTiAC9vv90NKmGOfNtBjyIem3BqKui1L5Hfcxurp8K9votQj2oH9COcgWPnQ2Xs64yC70tEuTt9DF1pj5PFQ== + dependencies: + "@codemirror/text" "^0.18.0" + +"@codemirror/text@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.18.0.tgz#a4a98862989ccef5545e730b269136d524c6a7c7" + integrity sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg== + +"@codemirror/theme-one-dark@^0.18.0": + version "0.18.0" + resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-0.18.0.tgz#46fc508806deb0eb63956442c2d2c563b49b15b2" + integrity sha512-+CicflMb8Pydc2sXQPIQe6QwiPw8pstd7Dmb6ZjqtiOPPl8sHvf5gsTBxJfwRWZTEoJlsurCiQlG8X84IFGvcQ== + dependencies: + "@codemirror/highlight" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/tooltip@^0.18.4": + version "0.18.4" + resolved "https://registry.yarnpkg.com/@codemirror/tooltip/-/tooltip-0.18.4.tgz#981bc0ced792c6754148edbc1f60092f3fa54207" + integrity sha512-LDlDOSEfjoG24uapLN7exK3Z3JchYFKUwWqo1x/9YdlAkmD1ik7cMSQZboCquP1uJVcXhtbpKmaO6vENGVaarg== + dependencies: + "@codemirror/state" "^0.18.0" + "@codemirror/view" "^0.18.0" + +"@codemirror/view@^0.18.0": + version "0.18.11" + resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.18.11.tgz#3a9655758f0743cc57d718723b57ea49a72cdfa7" + integrity sha512-hNWTEGTpfFk1tjUnq4VjREe77rQQiS2nnhK9CDvU2M44g7wtkCFLB8ymvNp+Swo21hfUix33o2MKBeb830961g== + dependencies: + "@codemirror/rangeset" "^0.18.0" + "@codemirror/state" "^0.18.0" + "@codemirror/text" "^0.18.0" + style-mod "^4.0.0" + w3c-keyname "^2.2.4" + "@discoveryjs/json-ext@^0.5.0": version "0.5.2" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz#8f03a22a04de437254e8ce8cc84ba39689288752" @@ -3425,6 +3647,11 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" +crelt@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94" + integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA== + cross-spawn@^6.0.0: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -6241,6 +6468,25 @@ levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +lezer-python@^0.13.0: + version "0.13.6" + resolved "https://registry.yarnpkg.com/lezer-python/-/lezer-python-0.13.6.tgz#3d4c6bc56b9ba2a9d63e85f92ea33e80dc8a7b78" + integrity sha512-cUZSilL3BZ+ssDkvGSOdxfL0ioajEPijWuQ31Z5vAFW8Ons53d5FILYnxRcGhZlwmBnn4cDAtxZyny0K+l6AEw== + dependencies: + lezer "^0.13.2" + +lezer-tree@^0.13.0, lezer-tree@^0.13.2: + version "0.13.2" + resolved "https://registry.yarnpkg.com/lezer-tree/-/lezer-tree-0.13.2.tgz#00f4671309b15c27b131f637e430ce2d4d5f7065" + integrity sha512-15ZxW8TxVNAOkHIo43Iouv4zbSkQQ5chQHBpwXcD2bBFz46RB4jYLEEww5l1V0xyIx9U2clSyyrLes+hAUFrGQ== + +lezer@^0.13.2, lezer@^0.13.4: + version "0.13.4" + resolved "https://registry.yarnpkg.com/lezer/-/lezer-0.13.4.tgz#f0396a3447c7a8f40391623f3f47a4d95559c42f" + integrity sha512-cLQxUVY28VBBqKBt/R8CYeH57KQnIvscAnoahzvhlZTK8qxMkIyGExR6ecEpYYDX06ZhROZrEm1IiPvjLAsTig== + dependencies: + lezer-tree "^0.13.2" + lines-and-columns@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" @@ -8389,6 +8635,11 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-mod@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01" + integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw== + stylis@^4.0.3: version "4.0.6" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.6.tgz#0d8b97b6bc4748bea46f68602b6df27641b3c548" @@ -8956,6 +9207,11 @@ w3c-hr-time@^1.0.1, w3c-hr-time@^1.0.2: dependencies: browser-process-hrtime "^1.0.0" +w3c-keyname@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b" + integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw== + w3c-xmlserializer@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794" -- cgit v1.2.3 From 39704af82ccd7772ef47c7ec889f3db74efc5523 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Fri, 7 May 2021 19:46:28 +0300 Subject: Implement code field --- src/components/InputTypes/Code.tsx | 32 +++++++++++++++++++++++++++++--- src/components/InputTypes/index.tsx | 8 ++++++-- src/components/Question.tsx | 20 +++++++++++++++++++- 3 files changed, 54 insertions(+), 6 deletions(-) diff --git a/src/components/InputTypes/Code.tsx b/src/components/InputTypes/Code.tsx index 51ca98d..ca02cb5 100644 --- a/src/components/InputTypes/Code.tsx +++ b/src/components/InputTypes/Code.tsx @@ -1,11 +1,37 @@ /** @jsx jsx */ import { jsx } from "@emotion/react"; -import React, { ChangeEvent } from "react"; +import React, { useEffect } from "react"; + +import { basicSetup } from "@codemirror/basic-setup"; +import { python } from "@codemirror/lang-python"; +import { EditorState } from "@codemirror/state"; +import { oneDark } from "@codemirror/theme-one-dark"; +import { EditorView, ViewUpdate } from "@codemirror/view"; interface CodeProps { - handler: (event: ChangeEvent) => void + handler: (newContent: string) => void, + questionId: string, } export default function Code(props: CodeProps): JSX.Element { - return ; + const onUpdate = () => EditorView.updateListener.of((v: ViewUpdate) => { + props.handler(v.state.doc.toString()); + }); + + useEffect(() => { + const el = document.getElementById(`${props.questionId}-code`); + const state = EditorState.create({ + extensions: [basicSetup, python(), onUpdate(), oneDark] + }); + const view = new EditorView({ + state, + parent: el as Element + }); + + return () => view.destroy(); + }, []); + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return
; } diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx index c6a83f1..3e13652 100644 --- a/src/components/InputTypes/index.tsx +++ b/src/components/InputTypes/index.tsx @@ -9,6 +9,7 @@ import React, { ChangeEvent } from "react"; import { QuestionType } from "../../api/question"; import { QuestionProp } from "../Question"; +import Code from "./Code"; const require_options: Array = [ QuestionType.Radio, @@ -18,7 +19,7 @@ const require_options: Array = [ ]; // eslint-disable-next-line @typescript-eslint/no-explicit-any -export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent) => void, onBlurHandler: () => void, focus_ref: React.RefObject): JSX.Element | JSX.Element[] { +export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent | string) => void, onBlurHandler: () => void, focus_ref: React.RefObject): JSX.Element | JSX.Element[] { let result: JSX.Element | JSX.Element[]; // eslint-disable-next-line @@ -37,7 +38,10 @@ export default function create_input({ question, public_state }: QuestionProp, h /* eslint-disable react/react-in-jsx-scope */ switch (question.type) { - case QuestionType.Code: // TODO: Implement + case QuestionType.Code: + result = ; + break; + case QuestionType.TextArea: result =