First pass at page content editor

web/package-lock.json

@@ -5512,6 +5512,33 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.0.4.tgz",
+      "integrity": "sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "linkify-it": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz",
+          "integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==",
+          "requires": {
+            "uc.micro": "^1.0.1"
+          }
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -5546,6 +5573,11 @@
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
       "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A=="
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -7310,6 +7342,11 @@
         "xtend": "^4.0.1"
       }
     },
+    "react-markdown-editor-lite": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-markdown-editor-lite/-/react-markdown-editor-lite-1.2.3.tgz",
+      "integrity": "sha512-t2O9Mi6fG1WcWFsmYFr/qxTZLVfoKu2rAFmb1FwUN28glOQd0b3NcbcsxjnEuPoNy6Uk/TnpJPkMyWlFLnG9uA=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

web/package.json

@@ -13,6 +13,7 @@
     "chart.js": "^2.9.4",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
+    "markdown-it": "^12.0.4",
     "next": "^10.0.0",
     "prop-types": "^15.7.2",
     "react": "16.13.1",
@@ -20,6 +21,7 @@
     "react-dom": "16.13.1",
     "react-linkify": "^1.0.0-alpha",
     "react-markdown": "^5.0.2",
+    "react-markdown-editor-lite": "^1.2.3",
     "sass": "^1.26.11"
   },
   "devDependencies": {

web/pages/edit-page-content.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+
+import MarkdownIt from 'markdown-it';
+const mdParser = new MarkdownIt(/* Markdown-it options */);
+
+import dynamic from 'next/dynamic';
+import 'react-markdown-editor-lite/lib/index.css';
+
+import { SERVER_CONFIG, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
+
+import { Table, Typography, Tooltip, Button } from "antd";
+
+const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
+    ssr: false
+});
+
+export default function PageContentEditor() {
+    const [content, setContent] = React.useState("");
+
+    function handleEditorChange({ html, text }) {
+        setContent(text);
+    }
+
+    function handleSave() {
+        console.log(content);
+        alert("Make API call to save here." + content)
+    }
+
+    async function setInitialContent() {
+        const serverConfig = await fetchData(SERVER_CONFIG);
+        const initialContent = serverConfig.instanceDetails.extraPageContent;
+        setContent(initialContent);
+    }
+
+    useEffect(() => {
+        setInitialContent();
+    }, []);
+
+    return (
+        <div>
+            <MdEditor
+                style={{ height: "500px" }}
+                value={content}
+                renderHTML={(content) => mdParser.render(content)}
+                onChange={handleEditorChange}
+                config={{ htmlClass: 'markdown-editor-preview-pane', markdownClass: 'markdown-editor-pane' }}
+            />
+            <Button onClick={handleSave}>Save</Button>
+        </div>
+    );
+}

web/styles/globals.scss

@@ -44,7 +44,6 @@ code {
 }
 
 
-// GENERAL ANT FORM OVERRIDES
 // GENERAL ANT FORM OVERRIDES
 .ant-card {
   border-radius: .5em;
@@ -75,3 +74,40 @@ code {
   transition-delay: 0s;
   transition-duration: 0.15s;
 }
+
+// markdown editor overrides
+@media (prefers-color-scheme: dark) {
+  .rc-md-editor {
+    // Set the background color of the preview container
+    .editor-container {
+      background-color: black;
+    }
+
+    // Custom CSS for formatting the preview text
+    .markdown-editor-preview-pane {
+      color:lightgrey;
+      a {
+        color: $owncast-purple;
+      }
+
+      h1 {
+        font-size: 2em;
+      }
+    }
+
+    // Custom CSS class used to format the text of the editor
+    .markdown-editor-pane {
+      color:lightgrey !important;
+    }
+
+    // Set the background color of the editor text input
+    textarea {
+      background-color: rgb(44,44,44) !important;
+    }
+
+    // Hide extra toolbar buttons.
+    .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
+      display: none !important;
+    }
+  }  
+}