make markdown editable

isp-site/src/routes/mdui.jsx

@@ -18,6 +18,7 @@ import {
 	Table,
 	Checkbox,
 	Grid,
+	Alert,
 } from "@instructure/ui";
 import { useParams } from "react-router-dom";
 import { getStrings, getLang } from "utils/langs";
@@ -35,26 +36,39 @@ export default function MDUI() {
 	const l = getLang(useParams().language);
 	const s = getStrings(strings, l);
 	const md = markdownSample;
+	let init = true;
 
-	const [content, setContent] = useState(s.loading);
+	const [content, setContent] = useState(`${s.loading}`);
 
-	useEffect(() => {
-		fetch(md)
-			.then((response) => {
-				if (response.ok) return response.text();
-				return Promise.reject(s.fetch_fail);
-			})
-			.then((text) => {
-				setContent(text);
-			})
-			.catch((error) => console.error(error));
-	}, [md, s.fetch_fail]);
+	useEffect(
+		(text) => {
+			if (init) {
+				init = false;
+				const getMD = async () => {
+					await fetch(md)
+						.then((response) => {
+							if (response.ok) return response.text();
+							return Promise.reject(s.fetch_fail);
+						})
+						.then((text) => {
+							setContent(text);
+						})
+						.catch((error) => console.error(error));
+				};
+				getMD();
+				return;
+			}
+			setContent(text);
+		},
+		[md, init, s.fetch_fail],
+	);
 
 	return (
 		<>
 			<RenderTopNavBar language={l} />
 			<View
 				id="main"
+				className="mdui"
 				as="div"
 				padding="medium medium xx-large"
 				minWidth="20rem"
@@ -73,10 +87,17 @@ export default function MDUI() {
 							/>
 						</Grid.Col>
 						<Grid.Col>
+							<Alert
+								variant="info"
+								renderCloseButtonLabel={`${s.close}`}
+								margin="none none medium"
+							>
+								{s.try_editor}
+							</Alert>
 							<SourceCodeEditor
 								label={`${s.markdown_source}`}
 								language="markdown"
-								readOnly={true}
+								readOnly={false}
 								editable={true}
 								lineNumbers={true}
 								foldGutter={true}
@@ -85,7 +106,7 @@ export default function MDUI() {
 								lineWrapping={true}
 								value={content}
 								onChange={(value) => {
-									this.setState({ value });
+									setContent(value);
 								}}
 							/>
 						</Grid.Col>

isp-site/src/strings/mdui.js

@@ -17,5 +17,17 @@ const strings = {
 		PT_BR: "Fonte de Markdown",
 		DE: "Markdown-Quelle",
 	},
+	try_editor: {
+		EN: "Try editing the markdown below.",
+		ES_LA: "Intenta editar el markdown abajo.",
+		PT_BR: "Tente editar o markdown abaixo.",
+		DE: "Versuche den Markdown unten zu bearbeiten.",
+	},
+	close: {
+		EN: "Close",
+		ES_LA: "Cerrar",
+		PT_BR: "Fechar",
+		DE: "Schließen",
+	},
 };
 export default strings;

isp-site/src/variables/markdownSample.md

@@ -2,6 +2,8 @@
 
 This page is rendered from [github-flavored markdown](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) and passing the content through [react-markdown](https://github.com/remarkjs/react-markdown) to [Instructure UI](https://instructure.design/).  The result is accessible, well styled, and modular content created simply with markdown.
 
+<hr />
+
 ## Tables
 
 ### Normal table
@@ -19,6 +21,7 @@ This page is rendered from [github-flavored markdown](https://docs.github.com/en
 | `git diff` | Show file differences that **haven't been** staged |
 
 ### Table with columnar alignment
+
 | Left-aligned | Center-aligned | Right-aligned |
 | :---         |     :---:      |          ---: |
 | git status   | git status     | git status    |