feat: remirror for note editing (#1105)

* feat: remirror editor, round 1

* improve state mgmt, attempt mentions & emojis

* emojis save right, but suggestions still not working

* emoji popup working, style issues still

* merge upstream

* preload cdn image, dark mode styles, code extension

* update from 0-vortex fix

copy from https://github.com/open-sauced/open-sauced/blob/769-remirror-fix/package.json

* update shrinkwrap from 0-vortex fix

* fix state mgmt issues

* tried tests, cannot control aria-label for editor

* Prune unused imports

* per 0-vortex for tooling

* remove original NoteForm files

* Update README

* Update src/index.css

* Update NoteFormSocial.js

Co-authored-by: Matthew Foley <matthewfoley@Matthews-MacBook-Pro.local>
Co-authored-by: Brian Douglas <bdougie@users.noreply.github.com>

README.md

@@ -89,6 +89,10 @@ This project uses the sw-precache to kickstart an offline cache. The offline cac
 
 This project supports "dark mode" styling, and by default it will follow the color preference on your device. It also allows for overriding this using buttons at the top right of the screen, which will persist the preference to local storage on your device. More info about color preference web API's can be found here: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
 
+### 📝 Markdown Support
+
+This project leverages [Remirror](https://remirror.io/) for a delightful experience in documenting your Open Source goals. The editor supports markdown features including heading levels, bulleted lists, text formatting, code snippets, and emojis!
+
 ## 🍕 Community
 
 Got Questions? Join the conversation in our [Discord](https://discord.gg/U2peSNf23P).  

package.json

@@ -81,6 +81,15 @@
   "dependencies": {
     "@apollo/client": "^3.4.8",
     "@primer/octicons-react": "^15.0.1",
+    "@remirror/extension-bold": "^1.0.3",
+    "@remirror/extension-code": "^1.0.3",
+    "@remirror/extension-heading": "^1.0.3",
+    "@remirror/extension-italic": "^1.0.3",
+    "@remirror/extension-list": "^1.0.10",
+    "@remirror/extension-markdown": "^1.0.3",
+    "@remirror/extension-tables": "^1.0.4",
+    "@remirror/react": "^1.0.8",
+    "@remirror/styles": "^1.1.2",
     "contrast": "^1.0.1",
     "dayjs": "^1.10.6",
     "graphql": "^15.5.1",

src/components/NoteFormSocial.js

@@ -0,0 +1,149 @@
+import React, {useEffect, useState} from "react";
+import Button from "../styles/Button";
+import {RenderedNote} from "../styles/TextArea";
+import Card from "./Card";
+import {FlexCenter} from "../styles/Grid";
+import {PencilIcon} from "@primer/octicons-react";
+import ReactMarkdown from "react-markdown";
+import api from "../lib/apiGraphQL";
+import {AllStyledComponent} from "@remirror/styles/emotion";
+import {CodeExtension} from "@remirror/extension-code";
+import {BulletListExtension} from "@remirror/extension-list";
+import {HeadingExtension} from "@remirror/extension-heading";
+import {BoldExtension} from "@remirror/extension-bold";
+import {ItalicExtension} from "@remirror/extension-italic";
+import {TableExtension} from "@remirror/extension-react-tables";
+import {MarkdownExtension} from "@remirror/extension-markdown";
+import {EmojiExtension} from "@remirror/extension-emoji";
+import {EditorComponent, ThemeProvider, Remirror, useRemirror, useCommands, useEmoji} from "@remirror/react";
+import {EmojiPopupComponent} from "@remirror/react-components";
+import emojiData from "svgmoji/emoji-github";
+const extensions = () => [
+  new CodeExtension(),
+  new BulletListExtension(),
+  new HeadingExtension(),
+  new BoldExtension(),
+  new ItalicExtension(),
+  new TableExtension(),
+  new MarkdownExtension(),
+  new EmojiExtension({
+    data: emojiData,
+    moji:"noto",
+    fallback:":-)",
+    suggestionCharacter:":",
+    plainText:true
+  }),
+];
+const EmojiEditor = () => {
+  useEmoji();
+  return (
+    <EditorComponent />
+  );
+};
+const Menu = () => {
+  // Access the commands and the activity status of the editor.
+  const commands = useCommands();
+  const startNewNote = () => {
+    commands.insertMarkdown("### Notes for Repo\n- fork the repo\n\n- follow everybody on twitter\n-troll, troll, troll<Cursor>");
+  };
+  return (
+    <div>
+      <Button onClick={startNewNote}>
+        Basic Template
+      </Button>
+    </div>
+  );
+};
+
+const Editor = (props) => {
+  const {state, setState, manager} = useRemirror({
+    extensions,
+    selection:"end",
+    stringHandler:"markdown",
+    content:props.input
+  });
+  const _onChange = (param) => {
+    setState(param.state);
+    props.onChange(param);
+  };
+  return <AllStyledComponent>
+    <ThemeProvider>
+      <Remirror manager={manager} state={state} onChange={_onChange} >
+        <EmojiPopupComponent />
+        <Menu />
+        <EmojiEditor />
+      </Remirror>
+    </ThemeProvider>
+  </AllStyledComponent>;
+};
+
+function NoteForm({goalId, repoName, note}) {
+  const [previouslySavedValue, setPreviouslySavedValue] = useState(note);
+  const [input, setInput] = useState(note);
+  const [editing, setEditing] = useState(false);
+  const [editorValue, setEditorValue] = useState(note);
+  useEffect(() => {
+    setInput(note);
+  }, [note]);
+
+  const _handleNoteUpdate = () => {
+    api
+      .updateGoal(goalId, repoName, "OPEN", editorValue)
+      .then(() => {
+        _handleToggleEditing();
+        setInput(editorValue);
+        setPreviouslySavedValue(editorValue);
+      })
+      .catch(err => console.log(err));
+  };
+
+  const _handleToggleEditing = () => {
+    setEditing(!editing);
+  };
+
+  const _handleCancelEditing = () => {
+    setEditing(false);
+    setInput(previouslySavedValue);
+    setEditorValue(previouslySavedValue);
+  };
+
+  return (
+    <Card>
+      {!editing ? (
+        <RenderedNote data-testid="notes-content">
+          <ReactMarkdown className="noteContent" children={input} />
+        </RenderedNote>
+      ) : (
+        <div className={"remirror-theme"}>
+          <Editor input={input} onChange={(parameter) => {
+            const md = parameter.helpers.getMarkdown();
+            setEditorValue(md);
+          }}/>
+        </div>
+      )}
+      <FlexCenter>
+        {editing ? (
+          <Button onClick={_handleNoteUpdate}>
+            <PencilIcon verticalAlign="middle" />
+            Save Notes
+          </Button>
+        ) : (
+          <Button onClick={_handleToggleEditing}>
+            <PencilIcon verticalAlign="middle" />
+            Edit Notes
+          </Button>
+        )}
+        {editing ? (
+          <Button primary onClick={_handleCancelEditing}>
+            Cancel
+          </Button>
+        ) : (
+          ""
+        )}
+      </FlexCenter>
+      <img style={{display:"none"}} src="https://cdn.jsdelivr.net/npm/@svgmoji/noto@3.2.0/sprites/all.svg" />
+    </Card>
+  );
+}
+
+export default NoteForm;

src/components/Repository.js

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from "react";
-import Form from "../components/NoteForm";
+import Form from "../components/NoteFormSocial";
 import DangerZone from "../components/DangerZone";
 import Card from "../components/Card";
 import Issues from "../components/Issues";

src/index.css

@@ -117,4 +117,21 @@ body.dark .react-loading-skeleton{
     var(--backgroundGrey)
   );
 }
-
+// important is to manage the emoji sizing, so more appear while searching. 
+.remirror-editor {
+  min-height: 250px !important;
+}
+.remirror-floating-popover {
+  background: white;
+  outline: 0.25pt solid var(--lightestGrey);
+}
+.remirror-emoji-popup-highlight {
+  background: var(--lighterGrey);
+}
+body.dark .remirror-floating-popover {
+  background: var(--backgroundGrey);
+  outline: 0.25pt solid var(--lighterGrey);
+}
+body.dark .remirror-emoji-popup-highlight {
+  background: var(--lightGrey);
+}

src/styles/Card.js

@@ -69,7 +69,7 @@ const Card = styled.div`
   body.dark & {
     background-color: ${colors.darkestGrey};
     color: ${colors.lightestGrey};
-    h1 {
+    h1,h2,h3,h4,h5,h6 {
       color: ${colors.lightestGrey} !important;
     }
     a {

src/tests/NoteFormSocial.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import {render, cleanup} from "@testing-library/react";
+import NoteFormSocial from "../components/NoteFormSocial";
+import {axe, toHaveNoViolations} from "jest-axe";
+expect.extend(toHaveNoViolations);
+
+test("container component should have no violations", async() => {
+  const {container} = render(<NoteFormSocial />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+
+  cleanup();
+});
+