📜 restore scroll after reload

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@fontsource-variable/fira-code": "^5.1.0",
+    "@fontsource/space-mono": "^5.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
@@ -81,4 +82,4 @@
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-static-copy": "^2.1.0"
   }
-}
+}

src/components/Editor.tsx

@@ -5,6 +5,7 @@ import { LoaderCircle } from "lucide-react";
 import { dbExistsResource, useDoc } from "@/hooks/use-doc";
 import * as Y from "yjs";
 import { toast } from "sonner";
+import { usePosition } from "@/hooks/use-position";
 
 const EditorMenu = lazy(() => import("./EditorMenu"));
 
@@ -20,12 +21,11 @@ const Loading = () => {
 const EditorView = ({ doc, firstLoad }: { doc: Y.Doc; firstLoad: boolean }) => {
   const editor = useMemo(() => {
     const editor = new TiptapEditor({
-      autofocus: true,
       extensions: [...loadExtensions(doc)],
       editorProps: {
         attributes: {
           class:
-            "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[90vh]",
+            "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[60vh]",
         },
       },
     });
@@ -35,17 +35,22 @@ const EditorView = ({ doc, firstLoad }: { doc: Y.Doc; firstLoad: boolean }) => {
     return editor;
   }, [doc, firstLoad]);
 
-  useEffect(() => {
-    if (!editor.isFocused) {
-      editor.commands.focus("end");
-    }
-  }, [editor]);
+  usePosition(doc);
 
   return (
-    <div className="flex px-8 pt-4 justify-center">
-      <EditorContent editor={editor} className="w-4/5 max-w-screen-xl" />
+    <>
+      <div className="flex flex-col px-8 pt-4 justify-center items-center">
+        <EditorContent
+          editor={editor}
+          className="w-5/6 max-w-screen-xl flex-1"
+        />
+        <div className="h-32 w-full" onClick={() => {
+          // Focus the editor at the end when clicking on the empty space
+          editor.commands.focus("end");
+        }}></div>
+      </div>
       <EditorMenu editor={editor} />
-    </div>
+    </>
   );
 };
 
@@ -57,7 +62,9 @@ export const Editor = () => {
     if (!dbExists) {
       // Display welcome toast
       const timer = setTimeout(() => {
-        toast(<span>✨ Welcome to Strophe. Add some sparkle to your notes.</span>);
+        toast(
+          <span>✨ Welcome to Strophe. Add some sparkle to your notes.</span>
+        );
       }, 100);
 
       return () => clearTimeout(timer);

src/constants.ts

@@ -0,0 +1 @@
+export const dbName = "st-content";

src/hooks/use-doc.ts

@@ -1,8 +1,9 @@
 import * as Y from "yjs";
 import { IndexeddbPersistence } from "y-indexeddb";
 import { useEffect } from "react";
+import { dbName } from "@/constants";
+
 
-const dbName = "st-content";
 
 export const getDbExists = () => {
   let status = "pending";

src/hooks/use-position.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from "react";
+import * as Y from "yjs";
+
+export const usePosition = (doc: Y.Doc) => {
+  const position = useMemo(() => {
+    const position: Y.Map<number | null> = doc.getMap("position");
+    return position;
+  }, [doc]);
+
+  useEffect(() => {
+    // scroll to the last known scroll position softly
+    const scroll = position.get("scroll");
+    if (scroll) {
+      window.scrollTo({ top: scroll, behavior: "smooth" });
+    } else {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [position]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      position.set("scroll", window.scrollY);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [position]);
+};

src/lib/extensions/ClearMarksOnEnter.ts

@@ -6,7 +6,6 @@ const ClearMarksOnEnter = Extension.create({
   addKeyboardShortcuts() {
     return {
       Enter: ({ editor }) => {
-        console.log("Enter key pressed");
         editor
           .chain()
           .unsetBold()

src/lib/extensions/index.ts

@@ -63,7 +63,7 @@ export const loadExtensions = (doc: Y.Doc) => {
       types: ["heading", "paragraph"],
     }),
     CommitUndo,
-    ClearMarksOnEnter
+    ClearMarksOnEnter,
   ];
 
   return extensions;

yarn.lock

@@ -373,6 +373,11 @@
   resolved "https://registry.npmjs.org/@fontsource-variable/fira-code/-/fira-code-5.1.0.tgz"
   integrity sha512-fwJbJLvyZ2BhgBSPYCNsrQ6IFQTpRu9GWXY8N20wHTpbhV0Ro5QJihiZV060Ay3kVR6IVH/oSVe/cr7Ube28gg==
 
+"@fontsource/space-mono@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@fontsource/space-mono/-/space-mono-5.1.1.tgz#578ca4313f669eac19a98ea0c64b926005a980fe"
+  integrity sha512-v72P4frEQhldHTKQv0GqOF2JRRGhMrPAIj50v88qmW1aJW1SJAvjMtFOk/3D+L+dQM0fP2A1ZVzVkDbv8JGf7A==
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz"