style: issue details page, feat: add to cycles

pages/editor.tsx

@@ -1,41 +1,26 @@
-import React, { useEffect, useRef } from "react";
-// next
-import type { NextPage } from "next";
-// prose mirror
-import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { Schema, DOMParser } from "prosemirror-model";
-import { schema } from "prosemirror-schema-basic";
-import { addListNodes } from "prosemirror-schema-list";
-import { exampleSetup } from "prosemirror-example-setup";
+import React from "react";
+import dynamic from "next/dynamic";
 
-const Editor: NextPage = () => {
-  const editorRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
+const RichTextEditor = dynamic(() => import("../components/lexical/editor"), {
+  ssr: false,
+});
 
-  useEffect(() => {
-    if (!editorRef.current || !contentRef.current) return;
-
-    const mySchema = new Schema({
-      nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
-      marks: schema.spec.marks,
-    });
-
-    const myEditorView = new EditorView(editorRef.current, {
-      state: EditorState.create({
-        doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
-        plugins: exampleSetup({ schema: mySchema }),
-      }),
-    });
-
-    return () => myEditorView.destroy();
-  }, []);
+const LexicalViewer = dynamic(() => import("../components/lexical/viewer"), {
+  ssr: false,
+});
 
+const Home = () => {
+  const [value, setValue] = React.useState("");
+  const onChange: any = (value: any) => {
+    console.log(value);
+    setValue(value);
+  };
   return (
-    <div id="editor" ref={editorRef}>
-      <div id="content" ref={contentRef} />
-    </div>
+    <>
+      <RichTextEditor onChange={onChange} value={value} id="editor" />
+      <LexicalViewer id="institution_viewer" value={value} />
+    </>
   );
 };
 
-export default Editor;
+export default Home;