diff --git a/apps/web/__e2e__/notes.test.js b/apps/web/__e2e__/notes.test.js index 16bfedbea..e4a6f1615 100644 --- a/apps/web/__e2e__/notes.test.js +++ b/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", () => { diff --git a/apps/web/__e2e__/notes.test.js-snapshots/format-changes-should-get-saved-Chromium-linux.txt b/apps/web/__e2e__/notes.test.js-snapshots/format-changes-should-get-saved-Chromium-linux.txt new file mode 100644 index 000000000..711bdf038 --- /dev/null +++ b/apps/web/__e2e__/notes.test.js-snapshots/format-changes-should-get-saved-Chromium-linux.txt @@ -0,0 +1 @@ +

This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1

\ No newline at end of file diff --git a/apps/web/__e2e__/utils/index.js b/apps/web/__e2e__/utils/index.js index 3b69243dc..024a7c972 100644 --- a/apps/web/__e2e__/utils/index.js +++ b/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, }; diff --git a/apps/web/playwright.config.js b/apps/web/playwright.config.js index c5dbe4cae..d471cca05 100644 --- a/apps/web/playwright.config.js +++ b/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 diff --git a/apps/web/src/components/editor/tinymce.js b/apps/web/src/components/editor/tinymce.js index ed7d784fe..8c30b2882 100644 --- a/apps/web/src/components/editor/tinymce.js +++ b/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); });