added css editor

Author: Hellscaped

package.json

@@ -1,5 +1,9 @@
 {
   "devDependencies": {
     "eslint-plugin-userscripts": "^0.4.0"
+  },
+  "dependencies": {
+    "codemirror": "^6.0.1",
+    "react-codemirror2": "^7.3.0"
   }
 }

userscript/package.json

@@ -3,6 +3,7 @@
     "version": "1.1.0",
     "private": true,
     "dependencies": {
+        "@uiw/react-textarea-code-editor": "^2.1.9",
         "react": "^17.0.2",
         "react-app-rewired": "^2.1.8",
         "react-dom": "^17.0.2",

userscript/src/PlusPage.js

@@ -1,14 +1,24 @@
 import React from "react";
 import "./App.css";
 
+import CodeEditor from '@uiw/react-textarea-code-editor';
+
 function PlusPage() {
+    function handleCSSChange(reactEvent) {
+        localStorage.setItem("customcss", reactEvent.target.value);
+    }
     return (
         <div className="App">
             <header className="App-header">
                 <h1>SYNTAX+</h1>
-                <p>SYNTAX+ is a userscript that brings Roblox+ features to the Syntax website.</p>
-                <p>It is currently in development.</p>
-                <p>Check back later!</p>
+                <p>Custom CSS</p>
+                <CodeEditor
+                    value={localStorage.getItem("customcss")}
+                    onChange={handleCSSChange}
+                    language="css"
+                    placeholder="/* Syntax+ Custom CSS */"
+                />
+
             </header>
         </div>
     );

userscript/src/index.js

@@ -26,7 +26,11 @@ async function main() {
     // the page has loaded enough for that element to exist.
 
     // get the synplus logo
-
+    if (!localStorage.getItem("customcss")) {
+        localStorage.setItem("customcss", "/* Syntax+ Custom CSS */");
+    }
+    // eslint-disable-next-line no-undef
+    GM_addStyle(localStorage.getItem("customcss"));
     if (window.location.pathname in route_overrides) {
         const oldcontainer = document.getElementsByClassName("d-flex align-items-center justify-content-center")[0];
         deleteAllChildren(oldcontainer);