chore: flaky test and implemented comments feedback (#1481)

Author: matthewlipski

packages/core/src/editor/BlockNoteEditor.ts

@@ -1426,6 +1426,11 @@ export class BlockNoteEditor<
     );
   }
 
+  // `forceSelectionVisible` determines whether the editor selection is shows
+  // even when the editor is not focused. This is useful for e.g. creating new
+  // links, so the user still sees the affected content when an input field is
+  // focused.
+  // TODO: Reconsider naming?
   public getForceSelectionVisible() {
     return this.showSelectionPlugin.getEnabled();
   }

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -33,9 +33,11 @@ export const FloatingComposerController = <
 
   const comments = editor.comments;
   useEffect(() => {
-    comments.onUpdate((state) =>
+    const offUpdate = comments.onUpdate((state) =>
       editor.setForceSelectionVisible(state.pendingComment)
     );
+
+    return () => offUpdate();
   }, [comments, editor]);
 
   const state = useUIPluginState(comments.onUpdate.bind(comments));

tests/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "tsc",
     "lint": "eslint src --max-warnings 0",
-    "playwright": "npx playwright test",
+    "playwright": "npx playwright test --ui",
     "playwright:ui": "npx playwright test --ui",
     "test:updateSnaps": "docker run --rm  -e RUN_IN_DOCKER=true --network host -v $(pwd)/..:/work/ -w /work/tests -it mcr.microsoft.com/playwright:v1.49.1-noble npx playwright test -u",
     "test-ct": "playwright test -c playwright-ct.config.ts --headed",

tests/src/end-to-end/theming/theming.test.ts

@@ -43,13 +43,13 @@ test.describe("Check Dark Theme is Automatically Applied", () => {
     await page.waitForSelector(LINK_BUTTON_SELECTOR);
     await page.click(LINK_BUTTON_SELECTOR);
 
+    await page.waitForTimeout(500);
     await page.keyboard.type("link");
     await page.keyboard.press("Enter");
     await page.keyboard.press("ArrowLeft");
 
     await page.waitForTimeout(500);
-    // expect(await page.screenshot()).toMatchSnapshot("dark-link-toolbar.png");
-    expect(Date.now() < new Date('2025-03-04').getTime()).toBeTruthy();
+    expect(await page.screenshot()).toMatchSnapshot("dark-link-toolbar.png");
   });
   test("Should show dark slash menu", async ({ page }) => {
     await focusOnEditor(page);