From c2b898db97026d5d31d8fbf2a0b3ee40167ee38d Mon Sep 17 00:00:00 2001 From: Francisco Lopez Date: Wed, 22 Feb 2023 19:18:34 +0100 Subject: [PATCH 01/17] first component --- front/global.types.d.ts | 1 + front/package-lock.json | 800 ++++++++++++++++++ front/package.json | 2 + .../common/markdowneditor/markdownEditor.tsx | 58 ++ .../common/markdowneditor/styles.module.css | 12 + .../src/common/markdownview/markdownView.tsx | 15 + .../trainer/components/new-text.component.tsx | 6 +- .../trainer/components/select.component.tsx | 37 + 8 files changed, 930 insertions(+), 1 deletion(-) create mode 100644 front/src/common/markdowneditor/markdownEditor.tsx create mode 100644 front/src/common/markdowneditor/styles.module.css create mode 100644 front/src/common/markdownview/markdownView.tsx create mode 100644 front/src/pods/trainer/components/select.component.tsx diff --git a/front/global.types.d.ts b/front/global.types.d.ts index e238d01..5082d6b 100644 --- a/front/global.types.d.ts +++ b/front/global.types.d.ts @@ -1,2 +1,3 @@ declare module '*.png'; declare module '*.svg'; +declare module '*.css'; diff --git a/front/package-lock.json b/front/package-lock.json index 169c057..ebef762 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -9,12 +9,14 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@codemirror/language-data": "^6.1.0", "@emotion/css": "^11.10.5", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/icons-material": "^5.11.0", "@mui/material": "^5.11.8", "axios": "^1.3.2", + "codemirror": "^6.0.1", "lodash.merge": "^4.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1880,6 +1882,258 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@codemirror/autocomplete": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz", + "integrity": "sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.6.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz", + "integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-cpp": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz", + "integrity": "sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/cpp": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-css": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.2.tgz", + "integrity": "sha512-4V4zmUOl2Glx0GWw0HiO1oGD4zvMlIQ3zx5hXOE6ipCjhohig2bhWRAasrZylH9pRNTcl1VMa59Lsl8lZWlTzw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/css": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-html": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.2.tgz", + "integrity": "sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.2.2", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.0" + } + }, + "node_modules/@codemirror/lang-java": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.1.tgz", + "integrity": "sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/java": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.4.tgz", + "integrity": "sha512-OxLf7OfOZBTMRMi6BO/F72MNGmgOd9B0vetOLvHsDACFXayBzW8fm8aWnDM0yuy68wTK03MBf4HbjSBNRG5q7A==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-json": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", + "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-markdown": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.1.0.tgz", + "integrity": "sha512-HQDJg1Js19fPKKsI3Rp1X0J6mxyrRy2NX6+Evh0+/jGm6IZHL5ygMGKBYNWKXodoDQFvgdofNRG33gWOwV59Ag==", + "dependencies": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.3.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/markdown": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-php": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.1.tgz", + "integrity": "sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==", + "dependencies": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/php": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-python": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.1.1.tgz", + "integrity": "sha512-AddGMIKUssUAqaDKoxKWA5GAzy/CVE0eSY7/ANgNzdS1GYBkp6N49XKEyMElkuN04UsZ+bTIQdj+tVV75NMwJw==", + "dependencies": { + "@codemirror/autocomplete": "^6.3.2", + "@codemirror/language": "^6.0.0", + "@lezer/python": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-rust": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.1.tgz", + "integrity": "sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/rust": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-sql": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.4.0.tgz", + "integrity": "sha512-UWGK1+zc9+JtkiT+XxHByp4N6VLgLvC2x0tIudrJG26gyNtn0hWOVoB0A8kh/NABPWkKl3tLWDYf2qOBJS9Zdw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-wast": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.1.tgz", + "integrity": "sha512-sQLsqhRjl2MWG3rxZysX+2XAyed48KhLBHLgq9xcKxIJu3npH/G+BIXW5NM5mHeDUjG0jcGh9BcjP0NfMStuzA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-xml": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.0.2.tgz", + "integrity": "sha512-JQYZjHL2LAfpiZI2/qZ/qzDuSqmGKMwyApYmEUUCTxLM4MWS7sATUEfIguZQr9Zjx/7gcdnewb039smF6nC2zw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/xml": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.6.0.tgz", + "integrity": "sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/language-data": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.1.0.tgz", + "integrity": "sha512-g9V23fuLRI9AEbpM6bDy1oquqgpFlIDHTihUhL21NPmxp+x67ZJbsKk+V71W7/Bj8SCqEO1PtqQA/tDGgt1nfw==", + "dependencies": { + "@codemirror/lang-cpp": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/lang-java": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/lang-json": "^6.0.0", + "@codemirror/lang-markdown": "^6.0.0", + "@codemirror/lang-php": "^6.0.0", + "@codemirror/lang-python": "^6.0.0", + "@codemirror/lang-rust": "^6.0.0", + "@codemirror/lang-sql": "^6.0.0", + "@codemirror/lang-wast": "^6.0.0", + "@codemirror/lang-xml": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/legacy-modes": "^6.1.0" + } + }, + "node_modules/@codemirror/legacy-modes": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.1.tgz", + "integrity": "sha512-icXmCs4Mhst2F8mE0TNpmG6l7YTj1uxam3AbZaFaabINH5oWAdg2CfR/PVi+d/rqxJ+TuTnvkKK5GILHrNThtw==", + "dependencies": { + "@codemirror/language": "^6.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.1.tgz", + "integrity": "sha512-e+M543x0NVHGayNHQzLP4XByJsvbu/ojY6+0VF2Y4Uu66Rt1nADuxNflZwECLf7gS009smIsptSUa6bUj/U/rw==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz", + "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz", + "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==" + }, + "node_modules/@codemirror/view": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.1.tgz", + "integrity": "sha512-bzfSjJn9dAADVpabLKWKNmMG4ibyTV2e3eOGowjElNPTdTkSbi6ixPYHm2u0ADcETfKsi2/R84Rkmi91dH9yEg==", + "dependencies": { + "@codemirror/state": "^6.1.4", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -3031,6 +3285,127 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@lezer/common": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz", + "integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==" + }, + "node_modules/@lezer/cpp": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.0.tgz", + "integrity": "sha512-zUHrjNFuY/DOZCkOBJ6qItQIkcopHM/Zv/QOE0a4XNG3HDNahxTNu5fQYl8dIuKCpxCqRdMl5cEwl5zekFc7BA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/css": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.1.tgz", + "integrity": "sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/highlight": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.3.tgz", + "integrity": "sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/html": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.2.tgz", + "integrity": "sha512-LKGyDdqqDugXR/lKM9FwaKEfMerbZ/aqvhLf0P1FLLK/pVP7wKHXGcg6g3cJ7ckvFidn0tXA8jioG0irVsCBAQ==", + "dependencies": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/java": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.0.3.tgz", + "integrity": "sha512-kKN17wmgP1cgHb8juR4pwVSPMKkDMzY/lAPbBsZ1fpXwbk2sg3N1kIrf0q+LefxgrANaQb/eNO7+m2QPruTFng==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.1.tgz", + "integrity": "sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==", + "dependencies": { + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/json": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz", + "integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.3.tgz", + "integrity": "sha512-JPQe3mwJlzEVqy67iQiiGozhcngbO8QBgpqZM6oL1Wj/dXckrEexpBLeFkq0edtW5IqnPRFxA24BHJni8Js69w==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/markdown": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.2.tgz", + "integrity": "sha512-8CY0OoZ6V5EzPjSPeJ4KLVbtXdLBd8V6sRCooN5kHnO28ytreEGTyrtU/zUwo/XLRzGr/e1g44KlzKi3yWGB5A==", + "dependencies": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@lezer/php": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.1.tgz", + "integrity": "sha512-aqdCQJOXJ66De22vzdwnuC502hIaG9EnPK2rSi+ebXyUd+j7GAX1mRjWZOVOmf3GST1YUfUCu6WXDiEgDGOVwA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.1.0" + } + }, + "node_modules/@lezer/python": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.2.tgz", + "integrity": "sha512-ukm4VhDasFX7/9BUYHTyUNXH0xQ5B7/QBlZD8P51+dh6GtXRSCQqNxloez5d+MxVb2Sg+31S8E/33qoFREfkpA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/rust": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.0.tgz", + "integrity": "sha512-IpGAxIjNxYmX9ra6GfQTSPegdCAWNeq23WNmrsMMQI7YNSvKtYxO4TX5rgZUmbhEucWn0KTBMeDEPXg99YKtTA==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/xml": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.1.tgz", + "integrity": "sha512-jMDXrV953sDAUEMI25VNrI9dz94Ai96FfeglytFINhhwQ867HKlCE2jt3AwZTCT7M528WxdDWv/Ty8e9wizwmQ==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, "node_modules/@mui/base": { "version": "5.0.0-alpha.117", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.117.tgz", @@ -5967,6 +6342,20 @@ "node": ">= 0.12.0" } }, + "node_modules/codemirror": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", + "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -6310,6 +6699,11 @@ "node": ">=10" } }, + "node_modules/crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -15026,6 +15420,11 @@ "webpack": "^5.0.0" } }, + "node_modules/style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "node_modules/stylis": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", @@ -15710,6 +16109,11 @@ "node": ">= 0.8" } }, + "node_modules/w3c-keyname": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz", + "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==" + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", @@ -17840,6 +18244,252 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "@codemirror/autocomplete": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.2.tgz", + "integrity": "sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.6.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/commands": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.1.tgz", + "integrity": "sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==", + "requires": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "@codemirror/lang-cpp": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.2.tgz", + "integrity": "sha512-6oYEYUKHvrnacXxWxYa6t4puTlbN3dgV662BDfSH8+MfjQjVmP697/KYTDOqpxgerkvoNm7q5wlFMBeX8ZMocg==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/cpp": "^1.0.0" + } + }, + "@codemirror/lang-css": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.2.tgz", + "integrity": "sha512-4V4zmUOl2Glx0GWw0HiO1oGD4zvMlIQ3zx5hXOE6ipCjhohig2bhWRAasrZylH9pRNTcl1VMa59Lsl8lZWlTzw==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/css": "^1.0.0" + } + }, + "@codemirror/lang-html": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.2.tgz", + "integrity": "sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.2.2", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.0" + } + }, + "@codemirror/lang-java": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.1.tgz", + "integrity": "sha512-OOnmhH67h97jHzCuFaIEspbmsT98fNdhVhmA3zCxW0cn7l8rChDhZtwiwJ/JOKXgfm4J+ELxQihxaI7bj7mJRg==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/java": "^1.0.0" + } + }, + "@codemirror/lang-javascript": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.4.tgz", + "integrity": "sha512-OxLf7OfOZBTMRMi6BO/F72MNGmgOd9B0vetOLvHsDACFXayBzW8fm8aWnDM0yuy68wTK03MBf4HbjSBNRG5q7A==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "@codemirror/lang-json": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", + "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "@codemirror/lang-markdown": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.1.0.tgz", + "integrity": "sha512-HQDJg1Js19fPKKsI3Rp1X0J6mxyrRy2NX6+Evh0+/jGm6IZHL5ygMGKBYNWKXodoDQFvgdofNRG33gWOwV59Ag==", + "requires": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.3.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/markdown": "^1.0.0" + } + }, + "@codemirror/lang-php": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.1.tgz", + "integrity": "sha512-ublojMdw/PNWa7qdN5TMsjmqkNuTBD3k6ndZ4Z0S25SBAiweFGyY68AS3xNcIOlb6DDFDvKlinLQ40vSLqf8xA==", + "requires": { + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/php": "^1.0.0" + } + }, + "@codemirror/lang-python": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.1.1.tgz", + "integrity": "sha512-AddGMIKUssUAqaDKoxKWA5GAzy/CVE0eSY7/ANgNzdS1GYBkp6N49XKEyMElkuN04UsZ+bTIQdj+tVV75NMwJw==", + "requires": { + "@codemirror/autocomplete": "^6.3.2", + "@codemirror/language": "^6.0.0", + "@lezer/python": "^1.0.0" + } + }, + "@codemirror/lang-rust": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.1.tgz", + "integrity": "sha512-344EMWFBzWArHWdZn/NcgkwMvZIWUR1GEBdwG8FEp++6o6vT6KL9V7vGs2ONsKxxFUPXKI0SPcWhyYyl2zPYxQ==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/rust": "^1.0.0" + } + }, + "@codemirror/lang-sql": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.4.0.tgz", + "integrity": "sha512-UWGK1+zc9+JtkiT+XxHByp4N6VLgLvC2x0tIudrJG26gyNtn0hWOVoB0A8kh/NABPWkKl3tLWDYf2qOBJS9Zdw==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@codemirror/lang-wast": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-wast/-/lang-wast-6.0.1.tgz", + "integrity": "sha512-sQLsqhRjl2MWG3rxZysX+2XAyed48KhLBHLgq9xcKxIJu3npH/G+BIXW5NM5mHeDUjG0jcGh9BcjP0NfMStuzA==", + "requires": { + "@codemirror/language": "^6.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@codemirror/lang-xml": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.0.2.tgz", + "integrity": "sha512-JQYZjHL2LAfpiZI2/qZ/qzDuSqmGKMwyApYmEUUCTxLM4MWS7sATUEfIguZQr9Zjx/7gcdnewb039smF6nC2zw==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/xml": "^1.0.0" + } + }, + "@codemirror/language": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.6.0.tgz", + "integrity": "sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "@codemirror/language-data": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@codemirror/language-data/-/language-data-6.1.0.tgz", + "integrity": "sha512-g9V23fuLRI9AEbpM6bDy1oquqgpFlIDHTihUhL21NPmxp+x67ZJbsKk+V71W7/Bj8SCqEO1PtqQA/tDGgt1nfw==", + "requires": { + "@codemirror/lang-cpp": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/lang-java": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/lang-json": "^6.0.0", + "@codemirror/lang-markdown": "^6.0.0", + "@codemirror/lang-php": "^6.0.0", + "@codemirror/lang-python": "^6.0.0", + "@codemirror/lang-rust": "^6.0.0", + "@codemirror/lang-sql": "^6.0.0", + "@codemirror/lang-wast": "^6.0.0", + "@codemirror/lang-xml": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/legacy-modes": "^6.1.0" + } + }, + "@codemirror/legacy-modes": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.1.tgz", + "integrity": "sha512-icXmCs4Mhst2F8mE0TNpmG6l7YTj1uxam3AbZaFaabINH5oWAdg2CfR/PVi+d/rqxJ+TuTnvkKK5GILHrNThtw==", + "requires": { + "@codemirror/language": "^6.0.0" + } + }, + "@codemirror/lint": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.1.tgz", + "integrity": "sha512-e+M543x0NVHGayNHQzLP4XByJsvbu/ojY6+0VF2Y4Uu66Rt1nADuxNflZwECLf7gS009smIsptSUa6bUj/U/rw==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/search": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz", + "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==", + "requires": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "@codemirror/state": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz", + "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==" + }, + "@codemirror/view": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.9.1.tgz", + "integrity": "sha512-bzfSjJn9dAADVpabLKWKNmMG4ibyTV2e3eOGowjElNPTdTkSbi6ixPYHm2u0ADcETfKsi2/R84Rkmi91dH9yEg==", + "requires": { + "@codemirror/state": "^6.1.4", + "style-mod": "^4.0.0", + "w3c-keyname": "^2.2.4" + } + }, "@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -18713,6 +19363,127 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "@lezer/common": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz", + "integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==" + }, + "@lezer/cpp": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.0.tgz", + "integrity": "sha512-zUHrjNFuY/DOZCkOBJ6qItQIkcopHM/Zv/QOE0a4XNG3HDNahxTNu5fQYl8dIuKCpxCqRdMl5cEwl5zekFc7BA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/css": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.1.tgz", + "integrity": "sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/highlight": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.3.tgz", + "integrity": "sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/html": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.2.tgz", + "integrity": "sha512-LKGyDdqqDugXR/lKM9FwaKEfMerbZ/aqvhLf0P1FLLK/pVP7wKHXGcg6g3cJ7ckvFidn0tXA8jioG0irVsCBAQ==", + "requires": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/java": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.0.3.tgz", + "integrity": "sha512-kKN17wmgP1cgHb8juR4pwVSPMKkDMzY/lAPbBsZ1fpXwbk2sg3N1kIrf0q+LefxgrANaQb/eNO7+m2QPruTFng==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/javascript": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.1.tgz", + "integrity": "sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==", + "requires": { + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "@lezer/json": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz", + "integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/lr": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.3.tgz", + "integrity": "sha512-JPQe3mwJlzEVqy67iQiiGozhcngbO8QBgpqZM6oL1Wj/dXckrEexpBLeFkq0edtW5IqnPRFxA24BHJni8Js69w==", + "requires": { + "@lezer/common": "^1.0.0" + } + }, + "@lezer/markdown": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.2.tgz", + "integrity": "sha512-8CY0OoZ6V5EzPjSPeJ4KLVbtXdLBd8V6sRCooN5kHnO28ytreEGTyrtU/zUwo/XLRzGr/e1g44KlzKi3yWGB5A==", + "requires": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "@lezer/php": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.1.tgz", + "integrity": "sha512-aqdCQJOXJ66De22vzdwnuC502hIaG9EnPK2rSi+ebXyUd+j7GAX1mRjWZOVOmf3GST1YUfUCu6WXDiEgDGOVwA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.1.0" + } + }, + "@lezer/python": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.2.tgz", + "integrity": "sha512-ukm4VhDasFX7/9BUYHTyUNXH0xQ5B7/QBlZD8P51+dh6GtXRSCQqNxloez5d+MxVb2Sg+31S8E/33qoFREfkpA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/rust": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.0.tgz", + "integrity": "sha512-IpGAxIjNxYmX9ra6GfQTSPegdCAWNeq23WNmrsMMQI7YNSvKtYxO4TX5rgZUmbhEucWn0KTBMeDEPXg99YKtTA==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "@lezer/xml": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.1.tgz", + "integrity": "sha512-jMDXrV953sDAUEMI25VNrI9dz94Ai96FfeglytFINhhwQ867HKlCE2jt3AwZTCT7M528WxdDWv/Ty8e9wizwmQ==", + "requires": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, "@mui/base": { "version": "5.0.0-alpha.117", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.117.tgz", @@ -20842,6 +21613,20 @@ "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==", "dev": true }, + "codemirror": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", + "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "requires": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -21114,6 +21899,11 @@ "yaml": "^1.10.0" } }, + "crelt": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz", + "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==" + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -27608,6 +28398,11 @@ "dev": true, "requires": {} }, + "style-mod": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz", + "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==" + }, "stylis": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", @@ -28086,6 +28881,11 @@ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", "dev": true }, + "w3c-keyname": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz", + "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==" + }, "w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/front/package.json b/front/package.json index 88f61f1..a8c77fc 100644 --- a/front/package.json +++ b/front/package.json @@ -24,12 +24,14 @@ "license": "MIT", "homepage": "", "dependencies": { + "@codemirror/language-data": "^6.1.0", "@emotion/css": "^11.10.5", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mui/icons-material": "^5.11.0", "@mui/material": "^5.11.8", "axios": "^1.3.2", + "codemirror": "^6.0.1", "lodash.merge": "^4.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/front/src/common/markdowneditor/markdownEditor.tsx b/front/src/common/markdowneditor/markdownEditor.tsx new file mode 100644 index 0000000..db925df --- /dev/null +++ b/front/src/common/markdowneditor/markdownEditor.tsx @@ -0,0 +1,58 @@ +import type React from "react"; +import { basicSetup, EditorView } from 'codemirror' +import { EditorState } from '@codemirror/state' +import { useEffect, useRef, useState } from 'react' +import { markdown } from '@codemirror/lang-markdown' +import { languages } from '@codemirror/language-data' +import { tags } from '@lezer/highlight' +import { syntaxHighlighting, HighlightStyle} from '@codemirror/language' +import classes from './styles.module.css' + +const stylesEditor = HighlightStyle.define([ + { tag: tags.heading1, class: classes.h1}, + { tag: tags.heading2, class: classes.h2}, + { tag: tags.heading3, class: classes.h3}, +]) + +interface Props { + // en vez de eso llamar al value y en el onChange llamar al value actual + initialDoc: string + onChange?: (state: EditorState) => void +} + +export const MarkdownEditor = ( + props: Props + ): [React.MutableRefObject, EditorView?] => { + const refContainer = useRef(null) + const [editorView, setEditorView] = useState() + const { onChange } = props + + useEffect(() => { + if (!refContainer.current) return + const startState = EditorState.create({ + doc: props.initialDoc, + extensions: [ + basicSetup, + markdown({ + codeLanguages: languages, + }), + syntaxHighlighting(stylesEditor), + EditorView.lineWrapping, + EditorView.updateListener.of((update) => { + if (update.changes) { + onChange && onChange(update.state) + } + }), + ], + }); + const view = new EditorView({ + state: startState, + parent: refContainer.current, + }); + setEditorView(view) + return () => { + view.destroy() + } + }, [refContainer]) + return [refContainer, editorView] +} diff --git a/front/src/common/markdowneditor/styles.module.css b/front/src/common/markdowneditor/styles.module.css new file mode 100644 index 0000000..da981bf --- /dev/null +++ b/front/src/common/markdowneditor/styles.module.css @@ -0,0 +1,12 @@ +.h1 { + /* color: blueviolet; */ + font-size: 32px; +} + +.h2 { + font-size: 24px; +} + +.h3 { + font-size: 17px; +} diff --git a/front/src/common/markdownview/markdownView.tsx b/front/src/common/markdownview/markdownView.tsx new file mode 100644 index 0000000..e56bf0d --- /dev/null +++ b/front/src/common/markdownview/markdownView.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import ReactMarkdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; + +interface Props { + doc: string; +} + +export const MarkdownView: React.FC = (props) => { + return ( +
+ +
+ ); +}; diff --git a/front/src/pods/trainer/components/new-text.component.tsx b/front/src/pods/trainer/components/new-text.component.tsx index a0f55df..b2d1dcc 100644 --- a/front/src/pods/trainer/components/new-text.component.tsx +++ b/front/src/pods/trainer/components/new-text.component.tsx @@ -1,9 +1,12 @@ -import React from 'react'; +import React, { useCallback, useEffect } from 'react'; import { cx } from '@emotion/css'; import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; import Button from '@mui/material/Button'; import TextareaAutosize from '@mui/material/TextareaAutosize'; import * as innerClasses from './new-text.styles'; +import { SelectComponent } from './select.component'; +import { EditorState } from '@codemirror/state'; +import { MarkdownEditor } from 'common/markdowneditor/markdownEditor'; interface Props { handleAppendTrainerText: (trainerText: string) => void; @@ -30,6 +33,7 @@ export const NewTextComponent: React.FC = (props) => { + { + const [lang, setLang] = useState(''); + + const handleSelectChange = event => { + setLang(event.target.value as string); + }; + + return ( + + Language + + + ); +}; From 48eeb408a4273d052d62e18b2c3b4e242619a661 Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Mon, 27 Feb 2023 13:45:49 +0100 Subject: [PATCH 02/17] update Select component --- .../trainer/components/select.component.tsx | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/front/src/pods/trainer/components/select.component.tsx b/front/src/pods/trainer/components/select.component.tsx index fd1dd3c..a680b49 100644 --- a/front/src/pods/trainer/components/select.component.tsx +++ b/front/src/pods/trainer/components/select.component.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import InputLabel from '@mui/material/InputLabel'; import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; +import { MenuItem } from '@mui/material'; export const SelectComponent = () => { const [lang, setLang] = useState(''); @@ -18,19 +19,19 @@ export const SelectComponent = () => { value={lang} onChange={handleSelectChange} > - - - - - - - - - - - - + + HTML + CSS + JS + JSX + TS + TSX + JSON + Bash + Markdown + YAML + Diff + C# ); From d41b8dc7dfcb9914cab9a8b04c3c03b421fbbe6e Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Thu, 16 Mar 2023 19:39:19 +0100 Subject: [PATCH 03/17] Co-authored-by: Manolo Dorado --- .../common/markdowneditor/markdownEditor.tsx | 58 --------------- .../markdowneditor.component.tsx | 74 +++++++++++++++++++ .../markdowneditor/markdowneditor.styles.ts | 17 +++++ .../common/markdowneditor/styles.module.css | 12 --- .../trainer/components/new-text.component.tsx | 13 +++- .../trainer/components/select.component.tsx | 32 ++++---- front/src/pods/trainer/trainer.constants.ts | 56 ++++++++++++++ front/src/pods/trainer/trainer.vm.ts | 4 + 8 files changed, 174 insertions(+), 92 deletions(-) delete mode 100644 front/src/common/markdowneditor/markdownEditor.tsx create mode 100644 front/src/common/markdowneditor/markdowneditor.component.tsx create mode 100644 front/src/common/markdowneditor/markdowneditor.styles.ts delete mode 100644 front/src/common/markdowneditor/styles.module.css create mode 100644 front/src/pods/trainer/trainer.constants.ts create mode 100644 front/src/pods/trainer/trainer.vm.ts diff --git a/front/src/common/markdowneditor/markdownEditor.tsx b/front/src/common/markdowneditor/markdownEditor.tsx deleted file mode 100644 index db925df..0000000 --- a/front/src/common/markdowneditor/markdownEditor.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import type React from "react"; -import { basicSetup, EditorView } from 'codemirror' -import { EditorState } from '@codemirror/state' -import { useEffect, useRef, useState } from 'react' -import { markdown } from '@codemirror/lang-markdown' -import { languages } from '@codemirror/language-data' -import { tags } from '@lezer/highlight' -import { syntaxHighlighting, HighlightStyle} from '@codemirror/language' -import classes from './styles.module.css' - -const stylesEditor = HighlightStyle.define([ - { tag: tags.heading1, class: classes.h1}, - { tag: tags.heading2, class: classes.h2}, - { tag: tags.heading3, class: classes.h3}, -]) - -interface Props { - // en vez de eso llamar al value y en el onChange llamar al value actual - initialDoc: string - onChange?: (state: EditorState) => void -} - -export const MarkdownEditor = ( - props: Props - ): [React.MutableRefObject, EditorView?] => { - const refContainer = useRef(null) - const [editorView, setEditorView] = useState() - const { onChange } = props - - useEffect(() => { - if (!refContainer.current) return - const startState = EditorState.create({ - doc: props.initialDoc, - extensions: [ - basicSetup, - markdown({ - codeLanguages: languages, - }), - syntaxHighlighting(stylesEditor), - EditorView.lineWrapping, - EditorView.updateListener.of((update) => { - if (update.changes) { - onChange && onChange(update.state) - } - }), - ], - }); - const view = new EditorView({ - state: startState, - parent: refContainer.current, - }); - setEditorView(view) - return () => { - view.destroy() - } - }, [refContainer]) - return [refContainer, editorView] -} diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx new file mode 100644 index 0000000..ac5e6ae --- /dev/null +++ b/front/src/common/markdowneditor/markdowneditor.component.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { basicSetup, EditorView } from 'codemirror' +import { EditorState } from '@codemirror/state' +import { useEffect, useRef } from 'react' +import { markdown } from '@codemirror/lang-markdown' +import { languages } from '@codemirror/language-data' +import { tags } from '@lezer/highlight' +import { syntaxHighlighting, HighlightStyle} from '@codemirror/language' +import * as classes from './markdowneditor.styles'; + +const stylesEditor = HighlightStyle.define([ + { tag: tags.heading1, class: classes.headerH1}, + { tag: tags.heading2, class: classes.headerH2}, + { tag: tags.heading3, class: classes.headerH3}, +]) + +interface Props { + value: string + onChange?: (value: string) => void +} + +export const MarkdownEditor: React.FC = (props) => { + + const refContainer = useRef(null) + const editorView = useRef() + + useEffect(() => { + if (!refContainer.current) return + + editorView.current = new EditorView({ + state: EditorState.create({ + doc: props.value, + extensions: [ + basicSetup, + markdown({ + codeLanguages: languages, + }), + syntaxHighlighting(stylesEditor), + EditorView.lineWrapping, + EditorView.updateListener.of((update) => { + props.onChange(update.state.doc.toString()) + }), + EditorView.theme({ + '&': { + border: '1px solid #ccc', + height: '226px', + }, + }), + ] + }), + parent: refContainer.current + }); + + return () => editorView.current?.destroy() + }, []); + + useEffect(() => { + const state = editorView.current?.state + const currentValue = state?.doc.toString() + if (state && currentValue !== props.value) { + const update = state.update({ + changes: { from: 0, to: state.doc.length, insert: props.value } + }); + editorView.current?.update([update]) + } + EditorView.theme({ + '&':{ + border: '1px solid red' + }, + }) + }, [props.value]); + + return
+}; diff --git a/front/src/common/markdowneditor/markdowneditor.styles.ts b/front/src/common/markdowneditor/markdowneditor.styles.ts new file mode 100644 index 0000000..78994e7 --- /dev/null +++ b/front/src/common/markdowneditor/markdowneditor.styles.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/css'; + +export const headerH1 = ` + font-size: 2rem; +`; + +export const headerH2 = ` + font-size: 1rem; +`; + +export const headerH3 = ` + font-size: 0.5rem; +`; + +export const textContainer = ` + height: 200px; +`; \ No newline at end of file diff --git a/front/src/common/markdowneditor/styles.module.css b/front/src/common/markdowneditor/styles.module.css deleted file mode 100644 index da981bf..0000000 --- a/front/src/common/markdowneditor/styles.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.h1 { - /* color: blueviolet; */ - font-size: 32px; -} - -.h2 { - font-size: 24px; -} - -.h3 { - font-size: 17px; -} diff --git a/front/src/pods/trainer/components/new-text.component.tsx b/front/src/pods/trainer/components/new-text.component.tsx index b2d1dcc..a74fd80 100644 --- a/front/src/pods/trainer/components/new-text.component.tsx +++ b/front/src/pods/trainer/components/new-text.component.tsx @@ -1,12 +1,11 @@ -import React, { useCallback, useEffect } from 'react'; +import React from 'react'; import { cx } from '@emotion/css'; import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; import Button from '@mui/material/Button'; import TextareaAutosize from '@mui/material/TextareaAutosize'; import * as innerClasses from './new-text.styles'; import { SelectComponent } from './select.component'; -import { EditorState } from '@codemirror/state'; -import { MarkdownEditor } from 'common/markdowneditor/markdownEditor'; +import { MarkdownEditor } from 'common/markdowneditor/markdowneditor.component'; interface Props { handleAppendTrainerText: (trainerText: string) => void; @@ -14,6 +13,7 @@ interface Props { } export const NewTextComponent: React.FC = (props) => { + const [language, setLanguage] = React.useState(''); const { handleAppendTrainerText, className } = props; const [trainerText, setTrainerText] = React.useState(''); @@ -32,8 +32,13 @@ export const NewTextComponent: React.FC = (props) => {
- + + { - const [lang, setLang] = useState(''); +interface Props { + onChange: (value: string) => void; + value: string; +} + +export const SelectComponent: React.FC = (props) => { + const {onChange,value} = props; const handleSelectChange = event => { - setLang(event.target.value as string); + onChange(event.target.value as string); }; return ( @@ -16,22 +22,12 @@ export const SelectComponent = () => { Language ); diff --git a/front/src/pods/trainer/trainer.constants.ts b/front/src/pods/trainer/trainer.constants.ts new file mode 100644 index 0000000..b69720a --- /dev/null +++ b/front/src/pods/trainer/trainer.constants.ts @@ -0,0 +1,56 @@ +import { Language } from './trainer.vm' + +export const languageFormat: Language[] = [ + { + id: "", + label: "No Language", + }, + { + id: "html", + label: "HTML", + }, + { + id: "css", + label: "CSS", + }, + { + id: "js", + label: "JS", + }, + { + id: "jsx", + label: "JSX", + }, + { + id: "ts", + label: "TS", + }, + { + id: "tsx", + label: "TSX", + }, + { + id: "json", + label: "JSON", + }, + { + id: "bash", + label: "Bash", + }, + { + id: "markdown", + label: "Markdown", + }, + { + id: "yaml", + label: "YAML", + }, + { + id: "diff", + label: "Diff", + }, + { + id: "cs", + label: "C#", + }, +] \ No newline at end of file diff --git a/front/src/pods/trainer/trainer.vm.ts b/front/src/pods/trainer/trainer.vm.ts new file mode 100644 index 0000000..329fd7f --- /dev/null +++ b/front/src/pods/trainer/trainer.vm.ts @@ -0,0 +1,4 @@ +export interface Language { + id: string; + label: string; +} \ No newline at end of file From bcf08d78c6c87f972cbf3fff370572bf66fae09e Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Thu, 16 Mar 2023 19:45:05 +0100 Subject: [PATCH 04/17] delete error EditorView theme --- front/src/common/markdowneditor/markdowneditor.component.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx index ac5e6ae..7791a5f 100644 --- a/front/src/common/markdowneditor/markdowneditor.component.tsx +++ b/front/src/common/markdowneditor/markdowneditor.component.tsx @@ -63,11 +63,6 @@ export const MarkdownEditor: React.FC = (props) => { }); editorView.current?.update([update]) } - EditorView.theme({ - '&':{ - border: '1px solid red' - }, - }) }, [props.value]); return
From 3992438199edf6d4dc1e654f9d8885790995e33b Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Thu, 16 Mar 2023 21:05:31 +0100 Subject: [PATCH 05/17] update value MarkdownEditor --- front/src/pods/trainer/components/new-text.component.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/front/src/pods/trainer/components/new-text.component.tsx b/front/src/pods/trainer/components/new-text.component.tsx index a74fd80..d56725d 100644 --- a/front/src/pods/trainer/components/new-text.component.tsx +++ b/front/src/pods/trainer/components/new-text.component.tsx @@ -14,6 +14,9 @@ interface Props { export const NewTextComponent: React.FC = (props) => { const [language, setLanguage] = React.useState(''); + + const languageModify = (language: string): string => language === "" ? "" : `\`\`\`${language}\n\n\`\`\``; + const { handleAppendTrainerText, className } = props; const [trainerText, setTrainerText] = React.useState(''); @@ -32,13 +35,9 @@ export const NewTextComponent: React.FC = (props) => { - + Date: Wed, 22 Mar 2023 18:50:48 +0100 Subject: [PATCH 06/17] update makdown and new text --- .../markdowneditor.component.tsx | 23 ++++++++++------ .../markdowneditor/markdowneditor.styles.ts | 4 --- .../common/markdowneditor/styles.module.css | 11 ++++++++ .../trainer/components/new-text.component.tsx | 26 ++++++++++++------- 4 files changed, 43 insertions(+), 21 deletions(-) create mode 100644 front/src/common/markdowneditor/styles.module.css diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx index 7791a5f..69b481c 100644 --- a/front/src/common/markdowneditor/markdowneditor.component.tsx +++ b/front/src/common/markdowneditor/markdowneditor.component.tsx @@ -6,13 +6,20 @@ import { markdown } from '@codemirror/lang-markdown' import { languages } from '@codemirror/language-data' import { tags } from '@lezer/highlight' import { syntaxHighlighting, HighlightStyle} from '@codemirror/language' -import * as classes from './markdowneditor.styles'; +// import * as classes from './markdowneditor.styles'; +import classes from './styles.module.css'; + +// const stylesEditor = HighlightStyle.define([ +// { tag: tags.heading1, class: classes.headerH1}, +// { tag: tags.heading2, class: classes.headerH2}, +// { tag: tags.heading3, class: classes.headerH3}, +// ]); const stylesEditor = HighlightStyle.define([ - { tag: tags.heading1, class: classes.headerH1}, - { tag: tags.heading2, class: classes.headerH2}, - { tag: tags.heading3, class: classes.headerH3}, -]) + { tag: tags.heading1, class: classes.h1}, + { tag: tags.heading2, class: classes.h2}, + { tag: tags.heading3, class: classes.h3}, +]); interface Props { value: string @@ -42,8 +49,8 @@ export const MarkdownEditor: React.FC = (props) => { }), EditorView.theme({ '&': { - border: '1px solid #ccc', - height: '226px', + border: '2px solid #070707', + height: '300px', }, }), ] @@ -65,5 +72,5 @@ export const MarkdownEditor: React.FC = (props) => { } }, [props.value]); - return
+ return
}; diff --git a/front/src/common/markdowneditor/markdowneditor.styles.ts b/front/src/common/markdowneditor/markdowneditor.styles.ts index 78994e7..32eab09 100644 --- a/front/src/common/markdowneditor/markdowneditor.styles.ts +++ b/front/src/common/markdowneditor/markdowneditor.styles.ts @@ -10,8 +10,4 @@ export const headerH2 = ` export const headerH3 = ` font-size: 0.5rem; -`; - -export const textContainer = ` - height: 200px; `; \ No newline at end of file diff --git a/front/src/common/markdowneditor/styles.module.css b/front/src/common/markdowneditor/styles.module.css new file mode 100644 index 0000000..27e745c --- /dev/null +++ b/front/src/common/markdowneditor/styles.module.css @@ -0,0 +1,11 @@ +.h1 { + font-size: 2.3rem; + } + + .h2 { + font-size: 1.8rem; + } + + .h3 { + font-size: 1.3rem; + } \ No newline at end of file diff --git a/front/src/pods/trainer/components/new-text.component.tsx b/front/src/pods/trainer/components/new-text.component.tsx index d56725d..cd5441f 100644 --- a/front/src/pods/trainer/components/new-text.component.tsx +++ b/front/src/pods/trainer/components/new-text.component.tsx @@ -14,31 +14,39 @@ interface Props { export const NewTextComponent: React.FC = (props) => { const [language, setLanguage] = React.useState(''); + const [trainerText, setTrainerText] = React.useState(''); const languageModify = (language: string): string => language === "" ? "" : `\`\`\`${language}\n\n\`\`\``; const { handleAppendTrainerText, className } = props; - const [trainerText, setTrainerText] = React.useState(''); const handleAppendTrainerTextInternal = (): void => { if (trainerText) { handleAppendTrainerText(trainerText); - setTrainerText(''); + setTrainerText(languageModify(language)); + setLanguage(language); } }; - const handleOnChange = (e: React.ChangeEvent): void => { - setTrainerText(e.target.value); - }; + React.useEffect(() => { + if (language) { + setTrainerText(languageModify(language)); + } + + },[language]) + + // const handleOnChange = (e: React.ChangeEvent): void => { + // setTrainerText(e.target.value); + // }; return ( - - - + + {/* = (props) => { } }} value={trainerText} - /> + /> */} + /> */} + + setIsAutoScrollEnabled(e.target.checked)} + color="primary" + /> + } + /> ); }; diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts index 8d2b6de..8f456e4 100644 --- a/front/src/pods/trainer/components/session.styles.ts +++ b/front/src/pods/trainer/components/session.styles.ts @@ -4,15 +4,21 @@ import { theme } from 'core/theme'; const { palette, spacing, typography, breakpoints } = theme; const color = palette.customPalette; +// export const root = css` +// display: grid; +// grid-row-gap: 1rem; +// grid-column-gap: 1rem; +// grid-template-columns: auto 1fr; +// grid-template-areas: +// 'label label' +// 'textarea textarea' +// 'undo send'; +// `; + export const root = css` - display: grid; - grid-row-gap: 1rem; - grid-column-gap: 1rem; - grid-template-columns: auto 1fr; - grid-template-areas: - 'label label' - 'textarea textarea' - 'undo send'; + display: flex; + flex-direction: column; + `; export const label = css` @@ -41,6 +47,7 @@ export const sendButton = css` display: flex; align-items: center; padding: ${spacing(1.25)} ${spacing(1.875)}; + margin: 10px; flex: 1; font-size: 1.188rem; font-weight: 400; @@ -83,6 +90,7 @@ export const undoButton = css` display: flex; align-items: center; padding: ${spacing(1.25)} ${spacing(1.875)}; + margin: 10px; font-size: 1.188rem; font-weight: 400; text-transform: capitalize; From e003dd03b54d190470aca9ff6a7b143797af68e1 Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 28 Mar 2023 19:49:31 +0200 Subject: [PATCH 11/17] edit styles --- front/src/pods/student/student.styles.ts | 2 +- .../pods/trainer/components/session.styles.ts | 36 ++++++++----------- 2 files changed, 16 insertions(+), 22 deletions(-) diff --git a/front/src/pods/student/student.styles.ts b/front/src/pods/student/student.styles.ts index f0aee34..4c1642f 100644 --- a/front/src/pods/student/student.styles.ts +++ b/front/src/pods/student/student.styles.ts @@ -40,7 +40,7 @@ export const label = css` font-size: 1.125rem; `; -export const textarea = css` +export const textView = css` width: 100%; height: 600px; overflow: auto; diff --git a/front/src/pods/trainer/components/session.styles.ts b/front/src/pods/trainer/components/session.styles.ts index 8f456e4..29422c3 100644 --- a/front/src/pods/trainer/components/session.styles.ts +++ b/front/src/pods/trainer/components/session.styles.ts @@ -4,37 +4,29 @@ import { theme } from 'core/theme'; const { palette, spacing, typography, breakpoints } = theme; const color = palette.customPalette; -// export const root = css` -// display: grid; -// grid-row-gap: 1rem; -// grid-column-gap: 1rem; -// grid-template-columns: auto 1fr; -// grid-template-areas: -// 'label label' -// 'textarea textarea' -// 'undo send'; -// `; - export const root = css` - display: flex; - flex-direction: column; - + display: grid; + gap: 1rem; + grid-template-columns: auto 1fr; + grid-template-areas: + 'label label' + 'textEditor textEditor' + 'undo send' + 'autoScroll autoScroll'; `; export const label = css` grid-area: label; - display: block; font-size: 1.125rem; font-family: ${typography.fontFamily}; `; -export const textarea = css` - grid-area: textarea; +export const textEditor = css` + grid-area: textEditor; box-sizing: border-box; font-family: ${typography.fontFamily}; font-size: 1rem; background-color: ${color.background}; - border: 2px solid ${color.secondary}; white-space: pre-wrap; resize: none; &:focus { @@ -46,12 +38,11 @@ export const sendButton = css` grid-area: send; display: flex; align-items: center; - padding: ${spacing(1.25)} ${spacing(1.875)}; - margin: 10px; flex: 1; font-size: 1.188rem; font-weight: 400; text-transform: capitalize; + padding: ${spacing(1.25)} ${spacing(1.875)}; border-radius: 0; color: ${color.successLight}; background-color: white; @@ -90,7 +81,6 @@ export const undoButton = css` display: flex; align-items: center; padding: ${spacing(1.25)} ${spacing(1.875)}; - margin: 10px; font-size: 1.188rem; font-weight: 400; text-transform: capitalize; @@ -126,3 +116,7 @@ export const undoIcon = css` display: initial; } `; + +export const autoScroll = css` + grid-area: autoScroll; +`; From 0ff86d913d241cce9a2b907efcd5f841b573f720 Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 28 Mar 2023 19:51:07 +0200 Subject: [PATCH 12/17] update component --- .../markdowneditor.component.tsx | 3 ++- .../src/common/markdownview/markdownView.tsx | 3 ++- front/src/pods/student/student.component.tsx | 24 ++++--------------- .../trainer/components/session.component.tsx | 17 ++++--------- 4 files changed, 12 insertions(+), 35 deletions(-) diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx index d59760c..8dd6347 100644 --- a/front/src/common/markdowneditor/markdowneditor.component.tsx +++ b/front/src/common/markdowneditor/markdowneditor.component.tsx @@ -17,6 +17,7 @@ const stylesEditor = HighlightStyle.define([ interface Props { value: string onChange?: (value: string) => void + className?: string } export const MarkdownEditor: React.FC = (props) => { @@ -65,5 +66,5 @@ export const MarkdownEditor: React.FC = (props) => { } }, [props.value]); - return
+ return
}; diff --git a/front/src/common/markdownview/markdownView.tsx b/front/src/common/markdownview/markdownView.tsx index 73696aa..60f7bac 100644 --- a/front/src/common/markdownview/markdownView.tsx +++ b/front/src/common/markdownview/markdownView.tsx @@ -4,11 +4,12 @@ import remarkGfm from 'remark-gfm'; interface Props { value: string + className?: string; } export const MarkdownView: React.FC = (props) => { return ( -
+
); diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx index 7ae78c1..7f23ae2 100644 --- a/front/src/pods/student/student.component.tsx +++ b/front/src/pods/student/student.component.tsx @@ -1,18 +1,15 @@ import React from 'react'; -import TextareaAutosize from '@mui/material/TextareaAutosize'; import Typography from '@mui/material/Typography'; - import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; - -import * as innerClasses from './student.styles'; import { useAutoScroll } from 'common/hooks/auto-scroll.hook'; - import { MarkdownView } from 'common/markdownview/markdownView'; +import * as innerClasses from './student.styles'; interface Props { room: string; log: string; + className?: string; } export const StudentComponent: React.FC = props => { @@ -21,7 +18,6 @@ export const StudentComponent: React.FC = props => { const { isAutoScrollEnabled, setIsAutoScrollEnabled, - textAreaRef, doAutoScroll, } = useAutoScroll(); @@ -42,21 +38,9 @@ export const StudentComponent: React.FC = props => { -
- - {/* */} -
+ = (props) => { const { isAutoScrollEnabled, setIsAutoScrollEnabled, - textAreaRef, doAutoScroll, } = useAutoScroll(); @@ -51,15 +49,7 @@ export const SessionComponent: React.FC = (props) => { - - {/* */} + Date: Tue, 28 Mar 2023 20:55:58 +0200 Subject: [PATCH 13/17] update editor --- .../markdowneditor/markdowneditor.component.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx index 8dd6347..08494cc 100644 --- a/front/src/common/markdowneditor/markdowneditor.component.tsx +++ b/front/src/common/markdowneditor/markdowneditor.component.tsx @@ -54,6 +54,14 @@ export const MarkdownEditor: React.FC = (props) => { return () => editorView.current?.destroy() }, []); + + const scrollToEnd = () => { + if (!refContainer.current) return; + + const scrollHeight = refContainer.current.scrollHeight; + const clientHeight = refContainer.current.clientHeight; + editorView.current.scrollDOM.scrollTop = scrollHeight - clientHeight; + } useEffect(() => { const state = editorView.current?.state @@ -62,7 +70,8 @@ export const MarkdownEditor: React.FC = (props) => { const update = state.update({ changes: { from: 0, to: state.doc.length, insert: props.value } }); - editorView.current?.update([update]) + editorView.current?.update([update]); + scrollToEnd(); } }, [props.value]); From 1070b8775beb98aea79abedb81717ea056bc21bf Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 18 Apr 2023 19:28:56 +0200 Subject: [PATCH 14/17] Updated components --- .../markdown-editor.component.tsx | 93 +++++++++++++++++++ .../markdown-editor.styles.ts} | 2 +- .../markdown-view.tsx} | 6 +- .../markdowneditor.component.tsx | 79 ---------------- 4 files changed, 97 insertions(+), 83 deletions(-) create mode 100644 front/src/common/markdown-editor/markdown-editor.component.tsx rename front/src/common/{markdowneditor/markdowneditor.styles.ts => markdown-editor/markdown-editor.styles.ts} (98%) rename front/src/common/{markdownview/markdownView.tsx => markdown-view/markdown-view.tsx} (69%) delete mode 100644 front/src/common/markdowneditor/markdowneditor.component.tsx diff --git a/front/src/common/markdown-editor/markdown-editor.component.tsx b/front/src/common/markdown-editor/markdown-editor.component.tsx new file mode 100644 index 0000000..f964334 --- /dev/null +++ b/front/src/common/markdown-editor/markdown-editor.component.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { basicSetup, EditorView } from 'codemirror'; +import { EditorState } from '@codemirror/state'; +import { markdown } from '@codemirror/lang-markdown'; +import { languages } from '@codemirror/language-data'; +import { tags } from '@lezer/highlight'; +import { syntaxHighlighting, HighlightStyle } from '@codemirror/language'; +import * as classes from './markdown-editor.styles'; + +const editorStyles = HighlightStyle.define([ + { tag: tags.heading1, class: classes.headerH1 }, + { tag: tags.heading2, class: classes.headerH2 }, + { tag: tags.heading3, class: classes.headerH3 }, +]); + +interface Props { + value: string; + onChange?: (value: string) => void; + className?: string; + onAppendTrainerTextInternal?: () => void; +} + +export const MarkdownEditor: React.FC = (props) => { + const { value, onChange, className, onAppendTrainerTextInternal } = props; + + const refContainer = React.useRef(null); + const editorView = React.useRef(); + + React.useEffect(() => { + if (!refContainer.current) return; + + editorView.current = new EditorView({ + state: EditorState.create({ + doc: value, + extensions: [ + basicSetup, + markdown({ + codeLanguages: languages, + }), + syntaxHighlighting(editorStyles), + EditorView.lineWrapping, + EditorView.updateListener.of((update) => { + onChange(update.state.doc.toString()); + }), + EditorView.theme({ + '&': { + border: '2px solid #070707', + height: '300px', + }, + }), + ], + }), + parent: refContainer.current, + }); + + return () => editorView.current?.destroy(); + }, []); + + const scrollToEnd = () => { + if (!refContainer.current) return; + + const scrollHeight = refContainer.current.scrollHeight; + const clientHeight = refContainer.current.clientHeight; + editorView.current.scrollDOM.scrollTop = scrollHeight - clientHeight; + }; + + React.useEffect(() => { + const state = editorView.current?.state; + const currentValue = state?.doc.toString(); + if (state && currentValue !== value) { + const update = state.update({ + changes: { from: 0, to: state.doc.length, insert: value }, + }); + editorView.current?.update([update]); + scrollToEnd(); + } + }, [value]); + // TODO HAY QUE ARREGLARLO PARA EL SESION + // ?. si existe llama a la función, de lo contrario, se ignora + return ( +
{ + if (event.key === 'Enter' && event.ctrlKey) { + onAppendTrainerTextInternal?.(); + } + }} + /> + ); +}; diff --git a/front/src/common/markdowneditor/markdowneditor.styles.ts b/front/src/common/markdown-editor/markdown-editor.styles.ts similarity index 98% rename from front/src/common/markdowneditor/markdowneditor.styles.ts rename to front/src/common/markdown-editor/markdown-editor.styles.ts index 0ff8dc9..ae81377 100644 --- a/front/src/common/markdowneditor/markdowneditor.styles.ts +++ b/front/src/common/markdown-editor/markdown-editor.styles.ts @@ -10,4 +10,4 @@ export const headerH2 = css` export const headerH3 = css` font-size: 1.3rem; -`; \ No newline at end of file +`; diff --git a/front/src/common/markdownview/markdownView.tsx b/front/src/common/markdown-view/markdown-view.tsx similarity index 69% rename from front/src/common/markdownview/markdownView.tsx rename to front/src/common/markdown-view/markdown-view.tsx index 60f7bac..868514b 100644 --- a/front/src/common/markdownview/markdownView.tsx +++ b/front/src/common/markdown-view/markdown-view.tsx @@ -3,13 +3,13 @@ import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; interface Props { - value: string + value: string; className?: string; } -export const MarkdownView: React.FC = (props) => { +export const MarkdownViewer: React.FC = (props) => { return ( -
+
); diff --git a/front/src/common/markdowneditor/markdowneditor.component.tsx b/front/src/common/markdowneditor/markdowneditor.component.tsx deleted file mode 100644 index 08494cc..0000000 --- a/front/src/common/markdowneditor/markdowneditor.component.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { basicSetup, EditorView } from 'codemirror' -import { EditorState } from '@codemirror/state' -import { useEffect, useRef } from 'react' -import { markdown } from '@codemirror/lang-markdown' -import { languages } from '@codemirror/language-data' -import { tags } from '@lezer/highlight' -import { syntaxHighlighting, HighlightStyle} from '@codemirror/language' -import * as classes from './markdowneditor.styles'; - -const stylesEditor = HighlightStyle.define([ - { tag: tags.heading1, class: classes.headerH1}, - { tag: tags.heading2, class: classes.headerH2}, - { tag: tags.heading3, class: classes.headerH3}, -]); - -interface Props { - value: string - onChange?: (value: string) => void - className?: string -} - -export const MarkdownEditor: React.FC = (props) => { - - const refContainer = useRef(null) - const editorView = useRef() - - useEffect(() => { - if (!refContainer.current) return - - editorView.current = new EditorView({ - state: EditorState.create({ - doc: props.value, - extensions: [ - basicSetup, - markdown({ - codeLanguages: languages, - }), - syntaxHighlighting(stylesEditor), - EditorView.lineWrapping, - EditorView.updateListener.of((update) => { - props.onChange(update.state.doc.toString()) - }), - EditorView.theme({ - '&': { - border: '2px solid #070707', - height: '300px', - }, - }), - ] - }), - parent: refContainer.current - }); - - return () => editorView.current?.destroy() - }, []); - - const scrollToEnd = () => { - if (!refContainer.current) return; - - const scrollHeight = refContainer.current.scrollHeight; - const clientHeight = refContainer.current.clientHeight; - editorView.current.scrollDOM.scrollTop = scrollHeight - clientHeight; - } - - useEffect(() => { - const state = editorView.current?.state - const currentValue = state?.doc.toString() - if (state && currentValue !== props.value) { - const update = state.update({ - changes: { from: 0, to: state.doc.length, insert: props.value } - }); - editorView.current?.update([update]); - scrollToEnd(); - } - }, [props.value]); - - return
-}; From d5cb65166593e22929c08915ab7592f4b0a2e5bf Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 18 Apr 2023 19:30:20 +0200 Subject: [PATCH 15/17] updated prettier --- front/package-lock.json | 14 +++++++------- front/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/front/package-lock.json b/front/package-lock.json index 931f2e3..6d6550c 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -60,7 +60,7 @@ "lint-staged": "^13.1.1", "mini-css-extract-plugin": "^2.7.2", "npm-run-all": "^4.1.5", - "prettier": "^2.8.4", + "prettier": "^2.8.7", "pretty-quick": "^3.1.3", "react-test-renderer": "^18.2.0", "rimraf": "^4.1.2", @@ -14563,9 +14563,9 @@ } }, "node_modules/prettier": { - "version": "2.8.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", - "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", + "version": "2.8.7", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", + "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", "dev": true, "bin": { "prettier": "bin-prettier.js" @@ -28791,9 +28791,9 @@ "dev": true }, "prettier": { - "version": "2.8.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz", - "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==", + "version": "2.8.7", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.7.tgz", + "integrity": "sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==", "dev": true }, "prettier-linter-helpers": { diff --git a/front/package.json b/front/package.json index 96eba8a..7bc2408 100644 --- a/front/package.json +++ b/front/package.json @@ -75,7 +75,7 @@ "lint-staged": "^13.1.1", "mini-css-extract-plugin": "^2.7.2", "npm-run-all": "^4.1.5", - "prettier": "^2.8.4", + "prettier": "^2.8.7", "pretty-quick": "^3.1.3", "react-test-renderer": "^18.2.0", "rimraf": "^4.1.2", From 7e5d381f15d8be1ef97f1d28835dcad095d0d158 Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Tue, 18 Apr 2023 19:31:30 +0200 Subject: [PATCH 16/17] delete model .css dont need --- front/global.types.d.ts | 1 - front/src/common/index.ts | 2 ++ front/src/common/markdown-editor/index.ts | 1 + front/src/common/markdown-view/index.ts | 1 + front/src/pods/student/student.component.tsx | 17 ++++++------ .../trainer/components/new-text.component.tsx | 17 +++++++----- .../trainer/components/select.component.tsx | 20 +++++++------- .../trainer/components/session.component.tsx | 26 +++++++------------ front/tsconfig.json | 1 - 9 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 front/src/common/markdown-editor/index.ts create mode 100644 front/src/common/markdown-view/index.ts diff --git a/front/global.types.d.ts b/front/global.types.d.ts index 5082d6b..e238d01 100644 --- a/front/global.types.d.ts +++ b/front/global.types.d.ts @@ -1,3 +1,2 @@ declare module '*.png'; declare module '*.svg'; -declare module '*.css'; diff --git a/front/src/common/index.ts b/front/src/common/index.ts index 45bc727..ab59eae 100644 --- a/front/src/common/index.ts +++ b/front/src/common/index.ts @@ -1,2 +1,4 @@ export * from './hooks'; export * from './global-window'; +export * from './markdown-editor'; +export * from './markdown-view'; diff --git a/front/src/common/markdown-editor/index.ts b/front/src/common/markdown-editor/index.ts new file mode 100644 index 0000000..e354de0 --- /dev/null +++ b/front/src/common/markdown-editor/index.ts @@ -0,0 +1 @@ +export * from './markdown-editor.component'; \ No newline at end of file diff --git a/front/src/common/markdown-view/index.ts b/front/src/common/markdown-view/index.ts new file mode 100644 index 0000000..8c75a59 --- /dev/null +++ b/front/src/common/markdown-view/index.ts @@ -0,0 +1 @@ +export * from './markdown-view'; diff --git a/front/src/pods/student/student.component.tsx b/front/src/pods/student/student.component.tsx index 7f23ae2..2ebbe29 100644 --- a/front/src/pods/student/student.component.tsx +++ b/front/src/pods/student/student.component.tsx @@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import { useAutoScroll } from 'common/hooks/auto-scroll.hook'; -import { MarkdownView } from 'common/markdownview/markdownView'; +import { MarkdownViewer } from 'common/markdown-view/markdown-view'; import * as innerClasses from './student.styles'; interface Props { @@ -12,14 +12,11 @@ interface Props { className?: string; } -export const StudentComponent: React.FC = props => { +export const StudentComponent: React.FC = (props) => { const { room, log } = props; - const { - isAutoScrollEnabled, - setIsAutoScrollEnabled, - doAutoScroll, - } = useAutoScroll(); + const { isAutoScrollEnabled, setIsAutoScrollEnabled, doAutoScroll } = + useAutoScroll(); React.useEffect(() => { doAutoScroll(); @@ -38,13 +35,15 @@ export const StudentComponent: React.FC = props => { - +
+ +
setIsAutoScrollEnabled(e.target.checked)} + onChange={(e) => setIsAutoScrollEnabled(e.target.checked)} color="primary" /> } diff --git a/front/src/pods/trainer/components/new-text.component.tsx b/front/src/pods/trainer/components/new-text.component.tsx index 16ca6b5..6f65b7e 100644 --- a/front/src/pods/trainer/components/new-text.component.tsx +++ b/front/src/pods/trainer/components/new-text.component.tsx @@ -4,7 +4,7 @@ import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; import Button from '@mui/material/Button'; import * as innerClasses from './new-text.styles'; import { SelectComponent } from './select.component'; -import { MarkdownEditor } from 'common/markdowneditor/markdowneditor.component'; +import { MarkdownEditor } from 'common/markdown-editor/markdown-editor.component'; interface Props { handleAppendTrainerText: (trainerText: string) => void; @@ -15,23 +15,24 @@ export const NewTextComponent: React.FC = (props) => { const [language, setLanguage] = React.useState(''); const [trainerText, setTrainerText] = React.useState(''); - const languageModify = (language: string): string => language === "" ? "" : `\`\`\`${language}\n\n\`\`\``; + const applyLanguageSelected = (language: string): string => + language === '' ? '' : `\`\`\`${language}\n\n\`\`\``; const { handleAppendTrainerText, className } = props; const handleAppendTrainerTextInternal = (): void => { if (trainerText) { handleAppendTrainerText(trainerText); - setTrainerText(languageModify(language)); + setTrainerText(applyLanguageSelected(language)); setLanguage(language); } }; React.useEffect(() => { if (language) { - setTrainerText(languageModify(language)); + setTrainerText(applyLanguageSelected(language)); } - },[language]); + }, [language]); return (
@@ -39,7 +40,11 @@ export const NewTextComponent: React.FC = (props) => { New text - +