oofdefault-darkmode

1 files changed, 54 insertions, 0 deletions

diff --git a/apps/web/app/(editor)/editor.tsx b/apps/web/app/(editor)/editor.tsx
new file mode 100644
index 00000000..5b4a60ce
--- /dev/null
+++ b/apps/web/app/(editor)/editor.tsx
@@ -0,0 +1,54 @@
+"use client";
+import { defaultEditorContent } from "./lib/content";
+import { EditorContent, EditorRoot, type JSONContent } from "novel";
+import { ImageResizer } from "novel/extensions";
+import { useEffect, useState } from "react";
+import { defaultExtensions } from "./components/extensions";
+
+import { slashCommand } from "./components/slash-command";
+import { Updates } from "./lib/debouncedsave";
+import { editorProps } from "./lib/editorprops";
+import EditorCommands from "./components/editorcommands";
+import Aigenerate from "./components/aigenerate";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+import Topbar from "./components/topbar";
+
+const Editor = () => {
+  const [initialContent, setInitialContent] = useState<null | JSONContent>(
+    null
+  );
+  const [saveStatus, setSaveStatus] = useState("Saved");
+  const [charsCount, setCharsCount] = useState();
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const content = window.localStorage.getItem("novel-content");
+    if (content) setInitialContent(JSON.parse(content));
+    else setInitialContent(defaultEditorContent);
+  }, []);
+
+  if (!initialContent) return null;
+
+  return (
+    <div className="relative w-full max-w-screen-xl">
+      <Topbar charsCount={charsCount} saveStatus={saveStatus} />
+      <EditorRoot>
+        <EditorContent
+          initialContent={initialContent}
+          extensions={[...defaultExtensions, slashCommand]}
+          className="min-h-[55vh] mt-[8vh] w-full max-w-screen-xl bg-[#171B1F] mb-[40vh]"
+          editorProps={editorProps}
+          onUpdate={({ editor }) => {
+            Updates({ editor, setCharsCount, setSaveStatus });
+          }}
+          slotAfter={<ImageResizer />}
+        >
+          <EditorCommands />
+          <Aigenerate />
+        </EditorContent>
+      </EditorRoot>
+    </div>
+  );
+};
+
+export default Editor;