Feat story creator

package.json

@@ -8,17 +8,22 @@
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "expr-eval": "^2.0.2",
+ "grommet": "^2.13.0",
+ "grommet-icons": "^4.4.0",
  "numeral": "^2.0.6",
  "parsimmon": "^1.13.0",
  "prettier": "^2.0.5",
  "prismjs": "^1.20.0",
+ "quill-mention": "^2.2.5",
  "raw-loader": "^4.0.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-emoji-render": "^1.2.2",
  "react-hamburger-menu": "^1.2.1",
+ "react-quill": "^2.0.0-beta.2",
  "react-router-dom": "^5.1.2",
- "react-scripts": "3.4.1"
+ "react-scripts": "3.4.1",
+ "styled-components": "^5.1.1"
  },
  "scripts": {
  "start": "react-scripts start",

src/App.js

@@ -2,6 +2,7 @@ import "util";
 import parse from "./smarter-text";
 import React from "react";
 import { useParams, Redirect } from "react-router-dom";
+import Creator from "./creator/Creator";
 
 import "./App.css";
 import Section from "./Section";
@@ -36,14 +37,26 @@ const textVars = textFiles.reduce(
 );
 
 function App() {
- let { page } = useParams();
+ let { page, creator } = useParams();
  if (!textVars[page]) return <Redirect to="/soda" />;
- const [ast, astState, rawText] = textVars[page];
+ const [ast, astState, markdown] = textVars[page];
 
  return (
  <div className="App">
  <Nav textVars={textVars} />
- <Section ast={ast} astState={astState} rawText={rawText} page={page} />
+ {creator ? (
+ <>
+ <h1>Creator</h1>
+ <Creator />
+ </>
+ ) : (
+ <Section
+ ast={ast}
+ astState={astState}
+ markdown={markdown}
+ page={page}
+ />
+ )}
  </div>
  );
 }

src/Nav.css

@@ -1,51 +1,50 @@
 .burger {
-  position:fixed;
-  margin-top: 15px;
-  margin-left: 15px;
+ position: fixed;
+ margin-top: 15px;
+ margin-left: 15px;
 }
 
 #nav {
- font-size:125%;
- right:0px;
- position:fixed;
- width:100%;
- height:100%;
- background:slategray;
- color:white;
- top:55px;
- left:0;
- right:100px;
- padding:1em 0 0 2em;
- left:-120%;
- transition:left 0.2s;
- overflow-y:scroll;
+ font-size: 125%;
+ right: 0px;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background: slategray;
+ color: white;
+ top: 55px;
+ left: 0;
+ right: 100px;
+ padding: 1em 0 0 2em;
+ left: -120%;
+ transition: left 0.2s;
+ overflow-y: scroll;
+ z-index: 1;
 }
 
 div#nav.hamburger-true {
-  visibility:visible;
-  left:0;
-  transition:left 0.2s;
+ visibility: visible;
+ left: 0;
+ transition: left 0.2s;
 }
 div#nav.hamburger-false {
-
- visibility:none;
+ visibility: none;
 }
 
 #inner-nav {
- height:60%;
- overflow-y:scroll; 
-
+ height: 60%;
+ overflow-y: scroll;
 }
 #nav a {
-  color:white;
+ color: white;
 }
 
 #footer {
-  font-size:12pt;
-  line-height:1.25em;
-  width:200px;
-  bottom:5em;
-  position:absolute;
-  right:70px;
-  background:slategray;
+ font-size: 12pt;
+ line-height: 1.25em;
+ width: 200px;
+ bottom: 5em;
+ position: absolute;
+ right: 70px;
+ background: slategray;
 }

src/Section.js

@@ -20,7 +20,7 @@ Prism.languages.account = {
  },
 };
 
-function Section({ ast, astState, page, rawText }) {
+function Section({ ast, astState, page, markdown }) {
  const [viewSource, setViewSource] = useState();
  const searchParams = useSearchParams("replace");
  const state = useMemo(readFields, [astState, searchParams]);
@@ -113,7 +113,7 @@ function Section({ ast, astState, page, rawText }) {
  {viewSource && (
  <div className="source">
  <pre className="language-account">
- <code>{rawText}</code>
+ <code>{markdown}</code>
  </pre>
  </div>
  )}

src/Source.css

@@ -27,7 +27,7 @@ pre[class*="language-"] {
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
- z-index: -1;
+ z-index: 0;
 }
 
 /* Code blocks */

src/creator/Creator.css

@@ -0,0 +1,28 @@
+p,
+portal-element {
+ display: inline-block;
+}
+
+.ql-formats button {
+ margin: 0;
+}
+
+.ql-toolbar.ql-snow {
+ border: none !important;
+ border-bottom: 1px solid #cacaca !important;
+ padding: 0 !important;
+}
+
+.ql-container.ql-snow {
+ border: none !important;
+}
+
+.ql-editor {
+ border: none !important;
+ border-bottom: 1px solid #cacaca !important;
+ min-height: 200px;
+}
+
+.language-account {
+ z-index: 0;
+}