fix: add rich text editor (#22)

components/Auth/UserAvatar.tsx

@@ -17,7 +17,6 @@ export function UserAvatar(props: Props) {
     popupId: "userAvatar",
   });
   const router = useRouter();
-  console.log(session);
 
   const user = useMemo(() => {
     return session.data?.user as any;

package.json

@@ -24,14 +24,16 @@
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
     "formik": "^2.2.9",
+    "lexical": "^0.6.5",
     "material-ui-popup-state": "^4.1.0",
     "next": "13.0.6",
     "next-auth": "^4.18.0",
     "notistack": "^2.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-qr-code": "^2.0.8",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "editor": "workspace:editor"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

packages/editor/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "editor",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@lexical/clipboard": "^0.6.5",
+    "@lexical/code": "^0.6.5",
+    "@lexical/link": "^0.6.5",
+    "@lexical/list": "^0.6.5",
+    "@lexical/markdown": "^0.6.5",
+    "@lexical/react": "^0.6.5",
+    "@lexical/rich-text": "^0.6.5",
+    "@lexical/selection": "^0.6.5",
+    "@lexical/table": "^0.6.5",
+    "@lexical/utils": "^0.6.5",
+    "lexical": "^0.6.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "yjs": "^13.5.43"
+  },
+  "devDependencies": {
+    "typescript": "4.9.3"
+  }
+}

packages/editor/src/Editor.tsx

@@ -0,0 +1,93 @@
+import Theme from "./themes/Theme";
+import {
+  InitialConfigType,
+  LexicalComposer,
+} from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+import React, { useMemo } from "react";
+import {
+  LexicalComposerContext,
+  useLexicalComposerContext,
+} from "@lexical/react/LexicalComposerContext";
+import { SaveAndLoadPlugin } from "./plugins/SaveAndLoadPlugin";
+
+function Placeholder() {
+  return <div className="editor-placeholder">Enter some rich text...</div>;
+}
+
+type Props = {
+  initialValue?: string;
+  onChange?: (value: string) => void;
+};
+
+export function Editor({ initialValue, onChange }: Props) {
+  const editorConfig: InitialConfigType = useMemo(() => {
+    return {
+      // The editor theme
+      theme: Theme,
+      // Handling of errors during update
+      onError(error: any) {
+        throw error;
+      },
+      namespace: "editor",
+      // Any custom nodes go here
+      nodes: [
+        HeadingNode,
+        ListNode,
+        ListItemNode,
+        QuoteNode,
+        CodeNode,
+        CodeHighlightNode,
+        TableNode,
+        TableCellNode,
+        TableRowNode,
+        AutoLinkNode,
+        LinkNode,
+      ],
+    };
+  }, [initialValue]);
+
+  return (
+    <LexicalComposer initialConfig={editorConfig}>
+      <div className="editor-container">
+        <ToolbarPlugin />
+        <div className="editor-inner">
+          <RichTextPlugin
+            contentEditable={<ContentEditable className="editor-input" />}
+            placeholder={<Placeholder />}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          <AutoFocusPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          <SaveAndLoadPlugin
+            value={initialValue}
+            onChange={(value) => {
+              if (onChange) {
+                onChange(value);
+              }
+            }}
+          />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+}
+
+export default Editor;

packages/editor/src/images/emoji/LICENSE.md

@@ -0,0 +1,5 @@
+OpenMoji
+https://openmoji.org
+
+Licensed under Attribution-ShareAlike 4.0 International
+https://creativecommons.org/licenses/by-sa/4.0/

packages/editor/src/images/icons/LICENSE.md

@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md

packages/editor/src/index.ts

@@ -0,0 +1 @@
+export { Editor } from "./Editor";

packages/editor/src/plugins/SaveAndLoadPlugin.tsx

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+type Props = {
+  value?: string;
+  onChange: (value: string) => void;
+};
+
+export function SaveAndLoadPlugin(props: Props) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (props.value) {
+      const state = editor.parseEditorState(props.value);
+      editor.setEditorState(state);
+    }
+  }, [editor]);
+
+  return (
+    <OnChangePlugin
+      onChange={(editorState, editor) => {
+        props.onChange(JSON.stringify(editorState));
+      }}
+    />
+  );
+}