add initial toast

src/components/Editor.tsx

@@ -2,8 +2,9 @@ import { EditorContent, Editor as TiptapEditor } from "@tiptap/react";
 import { lazy, Suspense, useEffect, useMemo } from "react";
 import { loadExtensions } from "@/lib/extensions";
 import { LoaderCircle } from "lucide-react";
-import { useDoc } from "@/hooks/use-doc";
+import { dbExistsResource, useDoc } from "@/hooks/use-doc";
 import * as Y from "yjs";
+import { toast } from "sonner";
 
 const EditorMenu = lazy(() => import("./EditorMenu"));
 
@@ -16,20 +17,23 @@ const Loading = () => {
   );
 };
 
-const EditorView = ({ doc }: { doc: Y.Doc }) => {
-  const editor = useMemo(
-    () =>
-      new TiptapEditor({
-        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]",
-          },
+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]",
         },
-      }),
-    [doc]
-  );
+      },
+    });
+    if (firstLoad) {
+      editor.chain().setContent("<p></p>".repeat(10)).focus("end").run();
+    }
+    return editor;
+  }, [doc, firstLoad]);
 
   useEffect(() => {
     if (!editor.isFocused) {
@@ -45,12 +49,24 @@ const EditorView = ({ doc }: { doc: Y.Doc }) => {
   );
 };
 
-const Editor = () => {
+export const Editor = () => {
+  const dbExists = dbExistsResource.read();
   const doc = useDoc();
 
+  useEffect(() => {
+    if (!dbExists) {
+      // Display welcome toast
+      const timer = setTimeout(() => {
+        toast(<span>💜 Welcome to Strophe, your minimalistic notes</span>);
+      }, 100);
+
+      return () => clearTimeout(timer);
+    }
+  }, [dbExists, doc]);
+
   return (
     <Suspense fallback={<Loading />}>
-      <EditorView doc={doc} />
+      <EditorView doc={doc} firstLoad={!dbExists} />
     </Suspense>
   );
 };

src/hooks/use-doc.ts

@@ -2,10 +2,39 @@ import * as Y from "yjs";
 import { IndexeddbPersistence } from "y-indexeddb";
 import { useEffect } from "react";
 
+const dbName = "st-content";
+
+export const getDbExists = () => {
+  let status = "pending";
+  let exists: boolean;
+
+  const suspender = indexedDB.databases().then((databases) => {
+    const dbExists = databases.some((db) => db.name === dbName);
+    status = "success";
+    exists = dbExists;
+  }).catch(() => {
+    status = "error";
+  });
+
+  return {
+    read() {
+      if (status === "pending") {
+        throw suspender; // Suspend rendering until the promise resolves
+      } else if (status === "error") {
+        throw new Error("Database check failed");
+      } else {
+        return exists;
+      }
+    },
+  };
+};
+
+
 export const getSyncedDoc = () => {
   let status = "pending";
   const doc = new Y.Doc();
-  const persistence = new IndexeddbPersistence("st-content", doc);
+
+  const persistence = new IndexeddbPersistence(dbName, doc);
 
   const suspender = new Promise((resolve, reject) => {
     persistence.whenSynced
@@ -33,6 +62,7 @@ export const getSyncedDoc = () => {
 };
 
 export const docResource = getSyncedDoc();
+export const dbExistsResource = getDbExists();
 
 export const useDoc = () => {
   const doc = docResource.read();

src/lib/extensions.ts

@@ -41,6 +41,7 @@ export const loadExtensions = (doc: Y.Doc) => {
     Underline,
     StarterKit.configure({
       codeBlock: false,
+      history: false,
     }),
     CodeBlockLowlight.configure({
       lowlight,

tests/init.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from "./fixtures";
+
+test("on the first load, a welcome toast should be visible", async ({
+  newtab,
+}) => {
+  const toast = await newtab.waitForSelector(
+    'text="💜 Welcome to Strophe, your minimalistic notes"'
+  );
+  expect(toast).not.toBeNull();
+});