fix: focus moves to editor when typing in title

streetwriters/notesnook#153

apps/web/__e2e__/editor.test.js

@@ -1,6 +1,16 @@
 const { Page, test, expect } = require("@playwright/test");
-const { createNote, NOTE, getTestId } = require("./utils");
-const { checkNotePresence } = require("./utils/conditions");
+const {
+  createNote,
+  NOTE,
+  getTestId,
+  getEditorTitle,
+  getEditorContent,
+  getEditorContentAsHTML,
+} = require("./utils");
+const {
+  checkNotePresence,
+  createNoteAndCheckPresence,
+} = require("./utils/conditions");
 /**
  * @type {Page}
  */
@@ -78,3 +88,99 @@ test("normal mode from focus mode", async () => {
     await page.screenshot({ fullPage: true, quality: 100, type: "jpeg" })
   ).toMatchSnapshot("normal-mode-from-focus-mode.jpg", { threshold: 99 });
 });
+
+test("creating a new note should clear the editor contents & title", async () => {
+  await createNoteAndCheckPresence();
+
+  await page.click(getTestId("notes-action-button"));
+
+  expect(await getEditorTitle()).toBe("");
+
+  expect(await getEditorContent()).toBe("");
+});
+
+test("creating a new note should clear the word count", async () => {
+  const selector = await createNoteAndCheckPresence();
+
+  await page.click(getTestId("notes-action-button"));
+
+  await page.click(selector);
+
+  await createNote({ title: "Hello World" }, "notes");
+
+  await expect(page.innerText(getTestId("editor-word-count"))).resolves.toBe(
+    "0 words"
+  );
+});
+
+test("creating a new title-only note should add it to the list", async () => {
+  const selector = await createNoteAndCheckPresence();
+
+  await page.click(getTestId("notes-action-button"));
+
+  await page.click(selector);
+
+  await createNoteAndCheckPresence({ title: "Hello World" });
+});
+
+test("format changes should get saved", async () => {
+  const selector = await createNoteAndCheckPresence();
+
+  await page.click(getTestId("notes-action-button"));
+
+  await page.click(selector);
+
+  await page.waitForSelector(".mce-content-body");
+
+  await page.keyboard.press("Control+a");
+
+  await page.click(`#editorToolbar button[title="Bold"]`);
+
+  await page.waitForTimeout(200);
+
+  await page.click(getTestId("notes-action-button"));
+
+  await page.click(selector);
+
+  const content = await getEditorContentAsHTML();
+
+  expect(content).toMatchSnapshot(`format-changes-should-get-saved.txt`);
+});
+
+test("opening an empty titled note should empty out editor contents", async () => {
+  await createNoteAndCheckPresence();
+
+  const onlyTitle = await createNoteAndCheckPresence({
+    title: "Only a title",
+  });
+
+  await page.click(getTestId("notes-action-button"));
+
+  await page.reload();
+
+  const fullNote = await checkNotePresence("home", 1, NOTE);
+
+  await page.click(fullNote);
+
+  await expect(getEditorContent()).resolves.toBe(NOTE.content);
+
+  await expect(getEditorTitle()).resolves.toBe(NOTE.title);
+
+  await page.click(onlyTitle);
+
+  await expect(getEditorTitle()).resolves.toBe("Only a title");
+
+  await expect(getEditorContent()).resolves.toBe("");
+});
+
+test("focus should not jump to editor while typing in title input", async () => {
+  await page.click(getTestId("notes-action-button"));
+
+  await page.waitForSelector(".mce-content-body");
+
+  await page.type(getTestId("editor-title"), "Hello", { delay: 200 });
+
+  await expect(getEditorTitle()).resolves.toBe("Hello");
+
+  await expect(getEditorContent()).resolves.toBe("");
+});

apps/web/__e2e__/editor.test.js-snapshots/format-changes-should-get-saved-Firefox-linux.txt

@@ -0,0 +1 @@
+<p>This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1<br></p>

apps/web/__e2e__/notes.test.js

@@ -8,14 +8,12 @@ const { Page, test, expect } = require("@playwright/test");
 
 const {
   getTestId,
-  createNote,
   NOTE,
   downloadFile,
   PASSWORD,
   editNote,
   getEditorTitle,
   getEditorContent,
-  getEditorContentAsHTML,
 } = require("./utils");
 const {
   navigateTo,
@@ -30,6 +28,7 @@ const {
   isPresent,
   isAbsent,
   checkNotePresence,
+  createNoteAndCheckPresence,
 } = require("./utils/conditions");
 const List = require("./utils/listitemidbuilder");
 const Menu = require("./utils/menuitemidbuilder");
@@ -40,23 +39,6 @@ const { LoremIpsum } = require("lorem-ipsum");
  */
 var page = null;
 
-async function createNoteAndCheckPresence(
-  note = NOTE,
-  viewId = "home",
-  index = 0
-) {
-  await createNote(note, "notes");
-
-  // make sure the note has saved.
-  await page.waitForTimeout(200);
-
-  let noteSelector = await checkNotePresence(viewId, index, note);
-
-  await page.click(noteSelector, { button: "left" });
-
-  return noteSelector;
-}
-
 async function deleteNoteAndCheckAbsence(viewId = "home") {
   const noteSelector = await createNoteAndCheckPresence(undefined, viewId);
 
@@ -484,86 +466,6 @@ test.describe("run tests independently", () => {
       `${content}${NOTE.content}`
     );
   });
-
-  test("creating a new note should clear the editor contents & title", async () => {
-    await createNoteAndCheckPresence();
-
-    await page.click(getTestId("notes-action-button"));
-
-    expect(await getEditorTitle()).toBe("");
-
-    expect(await getEditorContent()).toBe("");
-  });
-
-  test("creating a new note should clear the word count", async () => {
-    const selector = await createNoteAndCheckPresence();
-
-    await page.click(getTestId("notes-action-button"));
-
-    await page.click(selector);
-
-    await createNote({ title: "Hello World" }, "notes");
-
-    await expect(page.innerText(getTestId("editor-word-count"))).resolves.toBe(
-      "0 words"
-    );
-  });
-
-  test("creating a new title-only note should add it to the list", async () => {
-    const selector = await createNoteAndCheckPresence();
-
-    await page.click(getTestId("notes-action-button"));
-
-    await page.click(selector);
-
-    await createNoteAndCheckPresence({ title: "Hello World" });
-  });
-
-  test("format changes should get saved", async () => {
-    const selector = await createNoteAndCheckPresence();
-
-    await page.click(getTestId("notes-action-button"));
-
-    await page.click(selector);
-
-    await page.keyboard.press("Control+a");
-
-    await page.click(`#editorToolbar button[title="Bold"]`);
-
-    await page.click(getTestId("notes-action-button"));
-
-    await page.click(selector);
-
-    const content = await getEditorContentAsHTML();
-
-    expect(content).toMatchSnapshot(`format-changes-should-get-saved.txt`);
-  });
-
-  test("opening an empty titled note should empty out editor contents", async () => {
-    await createNoteAndCheckPresence();
-
-    const onlyTitle = await createNoteAndCheckPresence({
-      title: "Only a title",
-    });
-
-    await page.click(getTestId("notes-action-button"));
-
-    await page.reload();
-
-    const fullNote = await checkNotePresence("home", 1, NOTE);
-
-    await page.click(fullNote);
-
-    await expect(getEditorContent()).resolves.toBe(NOTE.content);
-
-    await expect(getEditorTitle()).resolves.toBe(NOTE.title);
-
-    await page.click(onlyTitle);
-
-    await expect(getEditorTitle()).resolves.toBe("Only a title");
-
-    await expect(getEditorContent()).resolves.toBe("");
-  });
 });
 
 test.describe("stress tests", () => {

apps/web/__e2e__/notes.test.js-snapshots/format-changes-should-get-saved-Firefox-linux.txt

@@ -1 +0,0 @@
-<p><br></p>

apps/web/__e2e__/utils/conditions.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
 
 const { expect } = require("@playwright/test");
-const { getTestId, NOTE } = require(".");
+const { getTestId, NOTE, createNote } = require(".");
 const List = require("./listitemidbuilder");
 
 async function isPresent(selector) {
@@ -42,4 +42,27 @@ async function checkNotePresence(viewId, index = 0, note = NOTE) {
   return noteSelector.build();
 }
 
-module.exports = { isPresent, isAbsent, isToastPresent, checkNotePresence };
+async function createNoteAndCheckPresence(
+  note = NOTE,
+  viewId = "home",
+  index = 0
+) {
+  await createNote(note, "notes");
+
+  // make sure the note has saved.
+  await page.waitForTimeout(200);
+
+  let noteSelector = await checkNotePresence(viewId, index, note);
+
+  await page.click(noteSelector, { button: "left" });
+
+  return noteSelector;
+}
+
+module.exports = {
+  isPresent,
+  isAbsent,
+  isToastPresent,
+  checkNotePresence,
+  createNoteAndCheckPresence,
+};

apps/web/src/components/editor/index.js

@@ -105,10 +105,11 @@ function Editor({ noteId, nonce }) {
   );
 
   useEffect(
-    function openSesion() {
+    function openSession() {
+      const { title, nonce } = editorstore.get().session;
       // there can be notes that only have a title so we need to
       // handle that.
-      if (!contentId && !editorstore.get().session.title) return;
+      if (!contentId && (!title || !!nonce)) return;
       setContent();
     },
     [sessionId, contentId, setContent, clearContent]