fix: format changes are not saved in editor

apps/web/__e2e__/notes.test.js

@@ -15,6 +15,7 @@ const {
   editNote,
   getEditorTitle,
   getEditorContent,
+  getEditorContentAsHTML,
 } = require("./utils");
 const {
   navigateTo,
@@ -508,7 +509,7 @@ test.describe("run tests independently", () => {
     );
   });
 
-  test.only("creating a new title-only note should add it to the list", async () => {
+  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"));
@@ -517,6 +518,26 @@ test.describe("run tests independently", () => {
 
     await createNoteAndCheckPresence({ title: "Hello World" });
   });
+
+  test.only("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.describe("stress tests", () => {

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

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

apps/web/__e2e__/utils/index.js

@@ -68,6 +68,10 @@ async function getEditorContent() {
     .replace(/\n+/gm, "\n");
 }
 
+async function getEditorContentAsHTML() {
+  return await page.innerHTML(".mce-content-body");
+}
+
 module.exports = {
   NOTE,
   NOTEBOOK,
@@ -78,4 +82,5 @@ module.exports = {
   downloadFile,
   getEditorTitle,
   getEditorContent,
+  getEditorContentAsHTML,
 };

apps/web/playwright.config.js

@@ -18,14 +18,14 @@ const projects = IS_CI
           browserName: "chromium",
         },
       },
-      {
-        name: "Firefox",
-        use: { browserName: "firefox" },
-      },
-      {
-        name: "WebKit",
-        use: { browserName: "webkit" },
-      },
+      // {
+      //   name: "Firefox",
+      //   use: { browserName: "firefox" },
+      // },
+      // {
+      //   name: "WebKit",
+      //   use: { browserName: "webkit" },
+      // },
     ];
 
 module.exports = {
@@ -44,7 +44,7 @@ module.exports = {
   reporter: "list",
   retries: IS_CI ? 3 : 1,
   use: {
-    headless: true,
+    headless: false,
     acceptDownloads: true,
 
     // Artifacts

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

@@ -128,10 +128,12 @@ const plugins = {
  * 1. input - called on every change
  * 2. compositionend - (Android only) called on change
  * 3. paste - called after content is pasted
+ * 4. ExecCommand - called after changes such as formatting.
  * We do not include the "change" event here as it is only
  * invoked after the editor loses focus.
  */
-const changeEvents = "input compositionend paste";
+const changeEvents = "input compositionend paste ExecCommand";
+const ignoredCommand = ["mcerepaint", "mcefocus"];
 
 function TinyMCE(props) {
   const {
@@ -243,7 +245,13 @@ function TinyMCE(props) {
           }
 
           const onEditorChange = debounce((e) => {
+            if (
+              e.type === "execcommand" &&
+              ignoredCommand.includes(e.command.toLowerCase())
+            )
+              return;
             if (!editor.getHTML) return;
+
             editor.getHTML().then((html) => {
               onChange(html, editor);
             });