Use a real code editor for CSS editing. Closes #1843

web/components/config/EditCustomStyles.tsx

@@ -1,6 +1,8 @@
 // EDIT CUSTOM CSS STYLES
 import React, { useState, useEffect, useContext, FC } from 'react';
 import { Typography, Button } from 'antd';
+import CodeMirror from '@uiw/react-codemirror';
+import { css } from '@codemirror/lang-css';
 
 import { ServerStatusContext } from '../../utils/server-status-context';
 import {
@@ -16,13 +18,11 @@ import {
   STATUS_SUCCESS,
 } from '../../utils/input-statuses';
 import { FormStatusIndicator } from './FormStatusIndicator';
-import { TextField, TEXTFIELD_TYPE_TEXTAREA } from './TextField';
-import { UpdateArgs } from '../../types/config-section';
 
 const { Title } = Typography;
 
 export const EditCustomStyles: FC = () => {
-  const [content, setContent] = useState('');
+  const [content, setContent] = useState('/* Enter custom CSS here */');
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
   const [hasChanged, setHasChanged] = useState(false);
 
@@ -34,15 +34,6 @@ export const EditCustomStyles: FC = () => {
 
   let resetTimer = null;
 
-  function handleFieldChange({ value }: UpdateArgs) {
-    setContent(value);
-    if (value !== initialContent && !hasChanged) {
-      setHasChanged(true);
-    } else if (value === initialContent && hasChanged) {
-      setHasChanged(false);
-    }
-  }
-
   // Clear out any validation states and messaging
   const resetStates = () => {
     setSubmitStatus(null);
@@ -76,6 +67,15 @@ export const EditCustomStyles: FC = () => {
     setContent(initialContent);
   }, [instanceDetails]);
 
+  const onCSSValueChange = React.useCallback(value => {
+    setContent(value);
+    if (value !== initialContent && !hasChanged) {
+      setHasChanged(true);
+    } else if (value === initialContent && hasChanged) {
+      setHasChanged(false);
+    }
+  }, []);
+
   return (
     <div className="edit-custom-css">
       <Title level={3} className="section-title">
@@ -94,14 +94,14 @@ export const EditCustomStyles: FC = () => {
         Please input plain CSS text, as this will be directly injected onto your page during load.
       </p>
 
-      <TextField
+      <CodeMirror
-        fieldName="customStyles"
-        type={TEXTFIELD_TYPE_TEXTAREA}
         value={content}
-        maxLength={null}
-        onChange={handleFieldChange}
         placeholder="/* Enter custom CSS here */"
+        height="200px"
+        extensions={[css()]}
+        onChange={onCSSValueChange}
       />
+
       <br />
       <div className="page-content-actions">
         {hasChanged && (

web/package-lock.json

@@ -9,9 +9,12 @@
 			"version": "0.1.0",
 			"dependencies": {
 				"@ant-design/icons": "4.7.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-markdown": "^6.0.2",
 				"@fontsource/open-sans": "4.5.12",
 				"@fontsource/poppins": "4.5.10",
 				"@storybook/react": "6.5.12",
+				"@uiw/react-codemirror": "^4.12.4",
 				"@xstate/react": "3.0.1",
 				"antd": "4.23.4",
 				"autoprefixer": "10.4.12",
@@ -1965,6 +1968,146 @@
 				"node": ">=0.1.95"
 			}
 		},
+		"node_modules/@codemirror/autocomplete": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.3.0.tgz",
+			"integrity": "sha512-4jEvh3AjJZTDKazd10J6ZsCIqaYxDMCeua5ouQxY8hlFIml+nr7le0SgBhT3SIytFBmdzPK3AUhXGuW3T79nVg==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.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.1.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.1.1.tgz",
+			"integrity": "sha512-ibDohwkk7vyu3VsnZNlQhwk0OETBtlkYV+6AHfn5Zgq0sxa+yGVX+apwtC3M4wh6AH7yU5si/NysoECs5EGS3Q==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/lang-css": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz",
+			"integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==",
+			"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.1.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.2.tgz",
+			"integrity": "sha512-e8JAUWyOo7N26tmek+WK0+Zg+pZRe+dQi8TZq0OOVVygpLV+mNAT2n5b5JhknY+TVZIVGLjuhdsoizw1SDFfPg==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-javascript": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.2.2",
+				"@lezer/common": "^1.0.0",
+				"@lezer/html": "^1.0.1"
+			}
+		},
+		"node_modules/@codemirror/lang-javascript": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.0.tgz",
+			"integrity": "sha512-wAWEY1Wdis2cKDy9A5q/rUmzLHFbZgoupJBcGaeMMsDPi68Rm90NsmzAEODE5kW8mYdRKFhQ157WJghOZ3yYdg==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.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-markdown": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.2.tgz",
+			"integrity": "sha512-wsUGGP8ihCVJKzVciOpsZXteSY1IRTe/C4eYb2QUEDl41ZiRfmdhA4llechqDaRdGOJuc45oCjBVjOo94CBHtA==",
+			"dependencies": {
+				"@codemirror/lang-html": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/markdown": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/language": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
+			"integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+			"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/lint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
+			"integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/search": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.1.tgz",
+			"integrity": "sha512-Q1JgUSBjQZRPIddlXzad/AVDigdhriLxQNFyP0gfrDTq6LDHNhr95U/tW3bpVssGenkaLzujtu/7XoK4kyvL3g==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/state": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
+			"integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
+		},
+		"node_modules/@codemirror/theme-one-dark": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
+			"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/view": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.3.1.tgz",
+			"integrity": "sha512-NKPBphoV9W2Q6tKXk+ge4q5EhMOOC0rpwdGS80/slNSfsVqkN4gwXIEqSprXJFlf9aUKZU7WhPvqRBMNH+hJkQ==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"style-mod": "^4.0.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"node_modules/@colors/colors": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2602,6 +2745,64 @@
 				"@jridgewell/sourcemap-codec": "1.4.14"
 			}
 		},
+		"node_modules/@lezer/common": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.1.tgz",
+			"integrity": "sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw=="
+		},
+		"node_modules/@lezer/css": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.1.tgz",
+			"integrity": "sha512-kLGsbzXdp1ntzO2jDwFf+2w76EBlLiD4FKofx7tgkdqeFRoslFiMS2qqbNtAauXw8ihZ4cE5YpxSpfsKXSs5Sg==",
+			"dependencies": {
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/highlight": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.1.tgz",
+			"integrity": "sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/html": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.1.tgz",
+			"integrity": "sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/javascript": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
+			"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
+			"dependencies": {
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/lr": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
+			"integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
+			"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/@lit-labs/react": {
 			"version": "1.0.9",
 			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz",
@@ -10248,6 +10449,51 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/@uiw/codemirror-extensions-basic-setup": {
+			"version": "4.12.4",
+			"resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.12.4.tgz",
+			"integrity": "sha512-owSCcRBtS2wYjxgBFkuIjfjWJHsR8AxgsQtqPpHB/6U0zCLuzKS/OM5ZRS2T3rdOizg0hCPztVvmshWeKjF+qw==",
+			"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"
+			},
+			"peerDependencies": {
+				"@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/@uiw/react-codemirror": {
+			"version": "4.12.4",
+			"resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.12.4.tgz",
+			"integrity": "sha512-92TAvN2z5snPjPtJDLmbqrqsXXYFYlBnWraXZuDc1XGaw80tB26ZkdEW79CD2QM4Y9LhFIt+sauwlmiAVDs/5A==",
+			"dependencies": {
+				"@babel/runtime": "^7.18.6",
+				"@codemirror/commands": "^6.1.0",
+				"@codemirror/state": "^6.1.1",
+				"@codemirror/theme-one-dark": "^6.0.0",
+				"@uiw/codemirror-extensions-basic-setup": "4.12.4",
+				"codemirror": "^6.0.0"
+			},
+			"peerDependencies": {
+				"@babel/runtime": ">=7.11.0",
+				"@codemirror/state": ">=6.0.0",
+				"@codemirror/theme-one-dark": ">=6.0.0",
+				"@codemirror/view": ">=6.0.0",
+				"codemirror": ">=6.0.0",
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/@videojs/http-streaming": {
 			"version": "2.14.2",
 			"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.2.tgz",
@@ -12719,6 +12965,20 @@
 				"node": ">=6"
 			}
 		},
+		"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/collapse-white-space": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -13520,6 +13780,11 @@
 				"sha.js": "^2.4.8"
 			}
 		},
+		"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",
@@ -26262,6 +26527,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/style-to-object": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -27841,6 +28111,11 @@
 			"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
 			"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
 		},
+		"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/walker": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -29843,6 +30118,140 @@
 				"minimist": "^1.2.0"
 			}
 		},
+		"@codemirror/autocomplete": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.3.0.tgz",
+			"integrity": "sha512-4jEvh3AjJZTDKazd10J6ZsCIqaYxDMCeua5ouQxY8hlFIml+nr7le0SgBhT3SIytFBmdzPK3AUhXGuW3T79nVg==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@codemirror/commands": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.1.1.tgz",
+			"integrity": "sha512-ibDohwkk7vyu3VsnZNlQhwk0OETBtlkYV+6AHfn5Zgq0sxa+yGVX+apwtC3M4wh6AH7yU5si/NysoECs5EGS3Q==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@codemirror/lang-css": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz",
+			"integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==",
+			"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.1.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.2.tgz",
+			"integrity": "sha512-e8JAUWyOo7N26tmek+WK0+Zg+pZRe+dQi8TZq0OOVVygpLV+mNAT2n5b5JhknY+TVZIVGLjuhdsoizw1SDFfPg==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/lang-css": "^6.0.0",
+				"@codemirror/lang-javascript": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.2.2",
+				"@lezer/common": "^1.0.0",
+				"@lezer/html": "^1.0.1"
+			}
+		},
+		"@codemirror/lang-javascript": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.0.tgz",
+			"integrity": "sha512-wAWEY1Wdis2cKDy9A5q/rUmzLHFbZgoupJBcGaeMMsDPi68Rm90NsmzAEODE5kW8mYdRKFhQ157WJghOZ3yYdg==",
+			"requires": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.0.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-markdown": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.2.tgz",
+			"integrity": "sha512-wsUGGP8ihCVJKzVciOpsZXteSY1IRTe/C4eYb2QUEDl41ZiRfmdhA4llechqDaRdGOJuc45oCjBVjOo94CBHtA==",
+			"requires": {
+				"@codemirror/lang-html": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/markdown": "^1.0.0"
+			}
+		},
+		"@codemirror/language": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
+			"integrity": "sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==",
+			"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/lint": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.0.0.tgz",
+			"integrity": "sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/search": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.1.tgz",
+			"integrity": "sha512-Q1JgUSBjQZRPIddlXzad/AVDigdhriLxQNFyP0gfrDTq6LDHNhr95U/tW3bpVssGenkaLzujtu/7XoK4kyvL3g==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"@codemirror/state": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.2.tgz",
+			"integrity": "sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA=="
+		},
+		"@codemirror/theme-one-dark": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
+			"integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
+			"requires": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/highlight": "^1.0.0"
+			}
+		},
+		"@codemirror/view": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.3.1.tgz",
+			"integrity": "sha512-NKPBphoV9W2Q6tKXk+ge4q5EhMOOC0rpwdGS80/slNSfsVqkN4gwXIEqSprXJFlf9aUKZU7WhPvqRBMNH+hJkQ==",
+			"requires": {
+				"@codemirror/state": "^6.0.0",
+				"style-mod": "^4.0.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"@colors/colors": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -30358,6 +30767,64 @@
 				"@jridgewell/sourcemap-codec": "1.4.14"
 			}
 		},
+		"@lezer/common": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.1.tgz",
+			"integrity": "sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw=="
+		},
+		"@lezer/css": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.1.tgz",
+			"integrity": "sha512-kLGsbzXdp1ntzO2jDwFf+2w76EBlLiD4FKofx7tgkdqeFRoslFiMS2qqbNtAauXw8ihZ4cE5YpxSpfsKXSs5Sg==",
+			"requires": {
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"@lezer/highlight": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.1.tgz",
+			"integrity": "sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==",
+			"requires": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"@lezer/html": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.1.tgz",
+			"integrity": "sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==",
+			"requires": {
+				"@lezer/common": "^1.0.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"@lezer/javascript": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
+			"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
+			"requires": {
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"@lezer/lr": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.3.tgz",
+			"integrity": "sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==",
+			"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"
+			}
+		},
 		"@lit-labs/react": {
 			"version": "1.0.9",
 			"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz",
@@ -36008,6 +36475,33 @@
 				"eslint-visitor-keys": "^3.3.0"
 			}
 		},
+		"@uiw/codemirror-extensions-basic-setup": {
+			"version": "4.12.4",
+			"resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.12.4.tgz",
+			"integrity": "sha512-owSCcRBtS2wYjxgBFkuIjfjWJHsR8AxgsQtqPpHB/6U0zCLuzKS/OM5ZRS2T3rdOizg0hCPztVvmshWeKjF+qw==",
+			"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"
+			}
+		},
+		"@uiw/react-codemirror": {
+			"version": "4.12.4",
+			"resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.12.4.tgz",
+			"integrity": "sha512-92TAvN2z5snPjPtJDLmbqrqsXXYFYlBnWraXZuDc1XGaw80tB26ZkdEW79CD2QM4Y9LhFIt+sauwlmiAVDs/5A==",
+			"requires": {
+				"@babel/runtime": "^7.18.6",
+				"@codemirror/commands": "^6.1.0",
+				"@codemirror/state": "^6.1.1",
+				"@codemirror/theme-one-dark": "^6.0.0",
+				"@uiw/codemirror-extensions-basic-setup": "4.12.4",
+				"codemirror": "^6.0.0"
+			}
+		},
 		"@videojs/http-streaming": {
 			"version": "2.14.2",
 			"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.2.tgz",
@@ -37939,6 +38433,20 @@
 			"integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==",
 			"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"
+			}
+		},
 		"collapse-white-space": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
@@ -38602,6 +39110,11 @@
 				"sha.js": "^2.4.8"
 			}
 		},
+		"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",
@@ -48131,6 +48644,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=="
+		},
 		"style-to-object": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -49307,6 +49825,11 @@
 			"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
 			"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
 		},
+		"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=="
+		},
 		"walker": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",

web/package.json

@@ -13,9 +13,12 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "4.7.0",
+		"@codemirror/lang-css": "^6.0.0",
+		"@codemirror/lang-markdown": "^6.0.2",
 		"@fontsource/open-sans": "4.5.12",
 		"@fontsource/poppins": "4.5.10",
 		"@storybook/react": "6.5.12",
+		"@uiw/react-codemirror": "^4.12.4",
 		"@xstate/react": "3.0.1",
 		"antd": "4.23.4",
 		"autoprefixer": "10.4.12",