[lexical-extension][lexical-react][lexical-playground] Chore: Add Vitest browser-mode tests via the Playwright runner

[etrepum]

Description

Our unit tests run under jsdom and lean heavily on hand-written polyfills in vitest.setup.mts (PointerEvent, DataTransfer, ClipboardEvent, execCommand, Range.getBoundingClientRect, contentEditable/Selection behavior, …) to stand in for functionality jsdom doesn't implement. That mocking is fragile and can drift from real browser behavior.

This PR adds a Vitest browser project that runs in a real browser through the Playwright runner, so tests that depend on a real layout/selection engine can be ported out of jsdom. Existing unit tests are untouched.

What's included:

• Vitest browser project (vitest.config.mts): Playwright provider, headless,
  collecting packages/**/__tests__/browser/**/*.test.{ts,tsx}. The browser set is
  driven by the comma-separated VITEST_BROWSER env var (default chromium), and
  React is deduped via optimizeDeps so browser tests share a single React instance
  with the source-aliased @lexical/react.

• Scripts: pnpm run test-browser and pnpm run test-browser-watch.

• CI:

  • Default (every PR/push): linux + chromium, wired into call-core-tests.yml via a
    new reusable call-browser-tests.yml.
  • Extended (tests-extended.yml): a fully-specified include matrix — ubuntu+firefox,
    macOS+{chromium,firefox,webkit}, windows+{chromium,firefox}. ubuntu+chromium is
    already the default job and WebKit only runs on macOS, so no combination is
    generated just to be skipped.

• Example tests using the extension APIs (not createEditor):

  • lexical-extension/…/BuildEditorFromExtensions.test.ts — builds an editor whose
    contentEditable is created in the extension's afterRegistration phase, and
    asserts real Range.getBoundingClientRect and the Selection API.
  • lexical-react/…/LexicalExtensionComposer.test.tsx — renders a real
    contentEditable and checks real layout.

  Both clean up with onTestFinished(() => editor.dispose()) rather than using:
  Explicit Resource Management (using / Symbol.dispose / Disposable) isn't
  supported in WebKit/Safari yet, so the syntax can't be relied on in browser tests
  (it stays fine in jsdom/Node unit tests). This is documented in AGENTS.md.

• Dependency bumps: vitest 4.1.5 → 4.1.8 (+ @vitest/browser-playwright,
  playwright); vite 8.0.10 → 8.0.16; @vitejs/plugin-react 6.0.1 → 6.0.2.

• Playground vite config: the newer vite types overflow TypeScript's recursive
  PluginOption comparison ("Excessive stack depth"). Binding the one array-valued
  plugin entry (react()) to PluginOption[] via a checked annotation lets the
  plugins array infer as PluginOption[] without an as cast.

• Ignore browser-mode artifact dirs (__screenshots__, .vitest-attachments) and
  document the workflow in AGENTS.md.

Test plan

Before

Behavior that needs a real layout/selection engine (Range.getBoundingClientRect, the
Selection API, contentEditable) could only be tested under jsdom by stubbing it in
vitest.setup.mts; there was no browser-mode harness.

After

pnpm run test-browser runs the new suite in a real browser (default chromium), and
passes on Chromium, Firefox, and WebKit (VITEST_BROWSER=webkit):

 RUN  v4.1.8

 Test Files  2 passed (2)
      Tests  4 passed (4)

pnpm run tsc, eslint, and prettier all pass.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Jun 2, 2026 10:10pm
lexical-playground	Ready	Preview, Comment	Jun 2, 2026 10:10pm

[potatowagon]

Review from Navi (on behalf of @potatowagon)

This is a well-structured infrastructure PR that adds Vitest browser-mode testing via the Playwright runner. Here's what I verified:

What this PR does:

• Adds a new Vitest "browser" project that runs tests in a real browser (Playwright) instead of jsdom
• Introduces pnpm run test-browser / test-browser-watch scripts
• CI integration: default linux+chromium on every PR, extended matrix (firefox, webkit, macOS, windows) in tests-extended.yml
• Example tests for buildEditorFromExtensions and LexicalExtensionComposer that exercise real layout/selection APIs
• Dependency bumps: vitest 4.1.5→4.1.8, vite 8.0.10→8.0.16, @vitejs/plugin-react 6.0.1→6.0.2
• Playground vite config fix for TypeScript 'Excessive stack depth' overflow with newer vite types
• Documents using/Disposable limitation in WebKit in AGENTS.md

What I checked:

1. ✅ CI status: All checks pass — browser test (1m21s), unit tests, integrity, e2e canary all green.
2. ✅ Correctness of vitest config: The browser project properly deduplicates React via optimizeDeps.include to avoid the null dispatcher error with hooks.
3. ✅ WebKit compatibility: The using/Disposable issue is properly handled — browser tests use onTestFinished(() => editor.dispose()) instead, well-documented.
4. ✅ CI workflow design: Reusable call-browser-tests.yml with matrix inputs is clean. Extended matrix avoids redundant combinations.
5. ✅ Type safety: The PluginOption[] widening for react() is a correct, minimal fix.
6. ✅ Test quality: Both example tests assert meaningful real-browser behavior that jsdom cannot provide.
7. ✅ No regressions: Existing unit tests are completely untouched. The new project is additive.

Verdict: Safe to approve. Clean infrastructure work from a maintainer with comprehensive CI coverage already green. No behavioral changes to existing code.

— via Navi on behalf of @potatowagon