From 564352582946561551bf83c6a2589c931a0dc3c2 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Thu, 22 Sep 2022 13:20:02 +0500
Subject: [PATCH] web: fix editor content resets on rerender

this was an annoying issue where any kind of re-render caused the editor
content to be reset.
---
 apps/web/__e2e__/editor.test.ts          | 15 +++++++++++++++
 apps/web/playwright.config.ts            |  2 +-
 apps/web/src/components/editor/index.tsx | 16 +++++-----------
 apps/web/src/stores/editor-store.js      | 23 ++++++-----------------
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/apps/web/__e2e__/editor.test.ts b/apps/web/__e2e__/editor.test.ts
index ce9fa070b..7c585a204 100644
--- a/apps/web/__e2e__/editor.test.ts
+++ b/apps/web/__e2e__/editor.test.ts
@@ -261,3 +261,18 @@ test("editing a note and toggling read-only mode should show updated content", a
     `readonly-edited-note.txt`
   );
 });
+
+test("creating a new note and toggling read-only mode should not empty editor content", async ({
+  page
+}) => {
+  const app = new AppModel(page);
+  await app.goto();
+  const notes = await app.goToNotes();
+  const note = await notes.createNote(NOTE);
+
+  await note?.properties.readonly();
+
+  expect(await note?.properties.isReadonly()).toBeTruthy();
+  expect(await notes.editor.getContent("text")).not.toHaveLength(0);
+  expect(await notes.editor.getContent("text")).toBe(NOTE.content);
+});
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index 548d49a94..10c756282 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -32,7 +32,7 @@ const config: PlaywrightTestConfig = {
   testDir: "__e2e__",
 
   // Each test is given 30 seconds
-  timeout: IS_CI ? 30000 : 15000,
+  timeout: 30000,
   workers: IS_CI ? 2 : 2,
   reporter: "list",
   retries: IS_CI ? 1 : 0,
diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx
index ba0886c1f..32c1e2e9f 100644
--- a/apps/web/src/components/editor/index.tsx
+++ b/apps/web/src/components/editor/index.tsx
@@ -73,7 +73,6 @@ export default function EditorManager({
   // update.
   const [timestamp, setTimestamp] = useState<number>(0);
 
-  const content = useRef<string>("");
   const previewSession = useRef<PreviewSession>();
   const [dropRef, overlayRef] = useDragOverlay();
   const editorInstance = useEditorInstance();
@@ -116,12 +115,7 @@ export default function EditorManager({
 
   const openSession = useCallback(async (noteId: string | number) => {
     await editorstore.get().openSession(noteId);
-
-    const { getSessionContent } = editorstore.get();
-    const sessionContent = await getSessionContent();
-
     previewSession.current = undefined;
-    content.current = sessionContent?.data;
     setTimestamp(Date.now());
   }, []);
 
@@ -132,7 +126,7 @@ export default function EditorManager({
         previewSession.current.content,
         true
       );
-    } else if (noteId && content.current) {
+    } else if (noteId && editorstore.get().session.content) {
       await db.attachments?.downloadImages(noteId);
     }
   }, [noteId]);
@@ -143,7 +137,6 @@ export default function EditorManager({
     (async function () {
       await editorstore.newSession(nonce);
 
-      content.current = "";
       setTimestamp(Date.now());
     })();
   }, [isNewSession, nonce]);
@@ -175,7 +168,10 @@ export default function EditorManager({
       )}
       <Editor
         nonce={timestamp}
-        content={content.current}
+        content={
+          previewSession.current?.content?.data ||
+          editorstore.get().session?.content?.data
+        }
         options={{
           readonly: isReadonly || isPreviewSession,
           onRequestFocus: () => toggleProperties(false),
@@ -186,8 +182,6 @@ export default function EditorManager({
       {arePropertiesVisible && (
         <Properties
           onOpenPreviewSession={async (session: PreviewSession) => {
-            const { content: sessionContent } = session;
-            content.current = sessionContent.data;
             previewSession.current = session;
             setTimestamp(Date.now());
           }}
diff --git a/apps/web/src/stores/editor-store.js b/apps/web/src/stores/editor-store.js
index b467f97eb..853bb3016 100644
--- a/apps/web/src/stores/editor-store.js
+++ b/apps/web/src/stores/editor-store.js
@@ -134,11 +134,13 @@ class EditorStore extends BaseStore {
     if (note.conflicted)
       return hashNavigate(`/notes/${noteId}/conflict`, { replace: true });
 
+    const content = await db.content.raw(note.contentId);
     this.set((state) => {
       const defaultSession = getDefaultSession(note.dateEdited);
       state.session = {
         ...defaultSession,
         ...note,
+        content,
         state: SESSION_STATES.new,
         attachmentsLength: db.attachments.ofNote(note.id, "all")?.length || 0
       };
@@ -194,11 +196,14 @@ class EditorStore extends BaseStore {
         attachmentStore.refresh();
       }
 
+      if (session.content) {
+        this.get().session.content = session.content;
+      }
       this.set((state) => {
         if (!!state.session.id && state.session.id !== note.id) return;
 
         for (let key in session) {
-          if (key === "content" && !state.session.locked) continue;
+          if (key === "content") continue;
           state.session[key] = session[key];
         }
 
@@ -266,18 +271,6 @@ class EditorStore extends BaseStore {
     return this.saveSession(noteId, { sessionId, content });
   };
 
-  getSessionContent = async () => {
-    const session = this.get().session;
-    switch (session.sessionType) {
-      case "default":
-        return await db.content.raw(session.contentId);
-      case "locked":
-        return session.content;
-      default:
-        return;
-    }
-  };
-
   setTag = (tag) => {
     return this._setTag(tag);
   };
@@ -338,7 +331,3 @@ class EditorStore extends BaseStore {
  */
 const [useStore, store] = createStore(EditorStore);
 export { useStore, store, SESSION_STATES };
-
-function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}