[build] Chore: Upgrade rollup and vite to latest versions (#6018)

.eslintrc.js

@@ -36,7 +36,7 @@ module.exports = {
         'packages/*/__tests__/**/*.?(m)js',
         'packages/*/src/**/*.jsx',
       ],
-      parser: 'babel-eslint',
+      parser: '@babel/eslint-parser',
       parserOptions: {
         allowImportExportEverywhere: true,
         sourceType: 'module',
@@ -97,7 +97,7 @@ module.exports = {
     },
   ],
 
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
 
   parserOptions: {
     ecmaFeatures: {
@@ -137,9 +137,9 @@ module.exports = {
     'eol-last': ERROR,
     eqeqeq: [ERROR, 'allow-null'],
     // Prettier forces semicolons in a few places
-    'flowtype/object-type-delimiter': OFF,
+    'ft-flow/object-type-delimiter': OFF,
 
-    'flowtype/sort-keys': ERROR,
+    'ft-flow/sort-keys': ERROR,
 
     'header/header': [2, 'scripts/www/headerTemplate.js'],
 

.github/workflows/devtools-extension-publish.yml

@@ -14,22 +14,22 @@ jobs:
     if: github.repository_owner == 'facebook'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Configure Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
           cache: 'npm'
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: devtools-cache
         with:
           path: |
             node_modules
             packages/lexical-devtools/.wxt
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
 
       - name: Install dependencies
         if: steps.devtools-cache.outputs.cache-hit != 'true'

.github/workflows/test.yml

@@ -26,19 +26,19 @@ jobs:
       CI: true
       GITHUB_TOKEN: ${{ secrets.DANGER_GITHUB_API_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -55,19 +55,19 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -82,19 +82,19 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -114,20 +114,20 @@ jobs:
       E2E_EDITOR_MODE: ${{ matrix.editor-mode }}
       E2E_EVENTS_MODE: ${{ matrix.events-mode }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/Library/Caches/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -156,9 +156,9 @@ jobs:
       E2E_EDITOR_MODE: ${{ matrix.editor-mode }}
       E2E_EVENTS_MODE: ${{ matrix.events-mode }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: install required packages
@@ -166,14 +166,14 @@ jobs:
           sudo apt-get update
           sudo apt-get install xvfb
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -202,19 +202,19 @@ jobs:
       E2E_EDITOR_MODE: ${{ matrix.editor-mode }}
       E2E_EVENTS_MODE: ${{ matrix.events-mode }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      # - uses: actions/cache@v3
+      # - uses: actions/cache@v4
       #   id: cache
       #   with:
       #     path: |
       #       node_modules
       #       C:\Users\runneradmin\AppData\Local\ms-playwright
-      #     key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+      #     key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       # - name: Install dependencies
       #   if: steps.cache.outputs.cache-hit != 'true'
       - run: npm ci
@@ -239,20 +239,20 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/Library/Caches/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -277,9 +277,9 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
@@ -287,14 +287,14 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install xvfb
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/.cache/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -319,19 +319,19 @@ jobs:
     env:
       CI: true
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             C:\Users\runneradmin\AppData\Local\ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         #   if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -360,20 +360,20 @@ jobs:
       E2E_EDITOR_MODE: ${{ matrix.editor-mode }}
       E2E_EVENTS_MODE: ${{ matrix.events-mode }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/Library/Caches/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
@@ -402,20 +402,20 @@ jobs:
       E2E_EDITOR_MODE: ${{ matrix.editor-mode }}
       E2E_EVENTS_MODE: ${{ matrix.events-mode }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm i -g npm@8
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: cache
         with:
           path: |
             node_modules
             packages/playwright-core/node_modules
             ~/Library/Caches/ms-playwright
-          key: ${{ runner.os }}-${{ runner.arch }}v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-v${{ secrets.CACHE_VERSION }}-${{ hashFiles('package-lock.json') }}
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci

examples/react-rich/package.json

@@ -19,6 +19,6 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.2.11"
   }
 }

examples/vanilla-js-plugin/package.json

@@ -18,6 +18,6 @@
   },
   "devDependencies": {
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.2.11"
   }
 }

examples/vanilla-js/package.json

@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "typescript": "^5.2.2",
-    "vite": "^5.1.4"
+    "vite": "^5.2.11"
   }
 }

package.json

@@ -20,6 +20,7 @@
     "start-test-server": "npm run preview --prefix packages/lexical-playground -- --port 4000",
     "build": "node scripts/build.js",
     "build-prod": "npm run clean && npm run build -- --prod",
+    "build-playground-dev": "npm run build && npm run build-dev --prefix packages/lexical-playground",
     "build-playground-prod": "npm run build-prod && npm run build-prod --prefix packages/lexical-playground",
     "build-release": "npm run build-prod -- --release",
     "build-www": "npm run clean && npm run build -- --www && npm run build -- --www --prod && npm run prepare-www",
@@ -89,7 +90,7 @@
     "prettier": "prettier --list-different .",
     "ci-check": "npm-run-all --parallel tsc tsc-extension flow prettier lint",
     "prettier:fix": "prettier --write .",
-    "prepare-ci": "npm run build-dev --prefix packages/lexical-playground",
+    "prepare-ci": "npm run build-playground-dev",
     "prepare-ci-prod": "npm run build-playground-prod",
     "prepare-release": "npm run build-release && node ./scripts/npm/prepare-release.js && node ./scripts/validate-tsc-types.js",
     "prepare": "husky install",
@@ -110,17 +111,19 @@
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
-    "@babel/plugin-transform-optional-catch-binding": "^7.22.11",
+    "@babel/core": "^7.24.5",
-    "@babel/preset-flow": "^7.14.5",
+    "@babel/eslint-parser": "^7.24.5",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/plugin-transform-optional-catch-binding": "^7.24.1",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-flow": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@playwright/test": "^1.41.2",
-    "@rollup/plugin-alias": "^3.1.4",
+    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^5.0.2",
+    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@size-limit/preset-big-lib": "^11.1.2",
     "@types/child-process-promise": "^2.2.6",
@@ -131,29 +134,28 @@
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^7.8.0",
-    "babel-eslint": "^10.1.0",
     "child-process-promise": "^2.2.1",
     "chokidar": "^3.5.2",
     "concurrently": "^6.2.0",
     "confusing-browser-globals": "^1.0.10",
     "cross-env": "^7.0.3",
-    "eslint": "^7.31.0",
+    "eslint": "^8.57.0",
-    "eslint-config-fbjs": "^3.1.1",
+    "eslint-config-fbjs": "^4.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-ft-flow": "^3.0.7",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-jest": "^28.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-lexical": "file:./eslint-plugin",
     "eslint-plugin-no-function-declare-after-return": "^1.1.0",
-    "eslint-plugin-no-only-tests": "^2.6.0",
+    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "flow-bin": "^0.226.0",
     "fs-extra": "^10.0.0",
@@ -174,13 +176,14 @@
     "prettier-plugin-organize-attributes": "^0.0.5",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "react-test-renderer": "^17.0.2",
-    "rollup": "^2.75.5",
+    "rollup": "^4.17.2",
     "size-limit": "^11.1.2",
     "tmp": "^0.2.1",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.12",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "vite": "^5.2.11"
   },
   "dependencies": {
     "yjs": "^13.5.42"

packages/lexical-devtools/wxt.config.ts

@@ -127,7 +127,7 @@ export default defineConfig({
           find: 'lexicalOriginal',
           replacement: path.resolve('../lexical/src/index.ts'),
         },
-        ...moduleResolution,
+        ...moduleResolution('preview'),
       ],
     },
   }),

packages/lexical-playground/__tests__/utils/index.mjs

@@ -7,12 +7,22 @@
  */
 
 import {expect, test as base} from '@playwright/test';
+import glob from 'glob';
 import {randomUUID} from 'node:crypto';
 import prettier from 'prettier';
 import {URLSearchParams} from 'url';
 
 import {selectAll} from '../keyboardShortcuts/index.mjs';
 
+function findAsset(pattern) {
+  const prefix = './packages/lexical-playground/build';
+  const resolvedPattern = `${prefix}/assets/${pattern}`;
+  for (const fn of glob.sync(resolvedPattern)) {
+    return fn.slice(prefix.length);
+  }
+  throw new Error(`Missing asset at ${resolvedPattern}`);
+}
+
 export const E2E_PORT = process.env.E2E_PORT || 3000;
 export const E2E_BROWSER = process.env.E2E_BROWSER;
 export const IS_MAC = process.platform === 'darwin';
@@ -26,11 +36,9 @@ export const LEGACY_EVENTS = process.env.E2E_EVENTS_MODE === 'legacy-events';
 export const SAMPLE_IMAGE_URL =
   E2E_PORT === 3000
     ? '/src/images/yellow-flower.jpg'
-    : '/assets/yellow-flower.a2a7c7a2.jpg';
+    : findAsset('yellow-flower*.jpg');
 export const SAMPLE_LANDSCAPE_IMAGE_URL =
-  E2E_PORT === 3000
+  E2E_PORT === 3000 ? '/src/images/landscape.jpg' : findAsset('landscape*.jpg');
-    ? '/src/images/landscape.jpg'
-    : '/assets/landscape.21352c66.jpg';
 export const LEXICAL_IMAGE_BASE64 =
   'data:image/png;base64,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';
 export const YOUTUBE_SAMPLE_URL =

packages/lexical-playground/package.json

@@ -2,11 +2,12 @@
   "name": "lexical-playground",
   "version": "0.14.5",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite --host",
     "build-dev": "vite build",
     "build-prod": "vite build --config vite.prod.config.ts",
-    "build-vercel": "(cd ../../ && node ./scripts/build.js --prod) && npm run build-prod",
+    "build-vercel": "(cd ../../ && node ./scripts/build.js) && npm run build-dev",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -36,11 +37,12 @@
     "yjs": ">=13.5.42"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@types/lodash-es": "^4.14.182",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^4.2.1",
     "rollup-plugin-copy": "^3.5.0",
-    "vite": "^2.9.16",
+    "vite": "^5.2.11",
-    "vite-plugin-replace": "0.1.1"
+    "vite-plugin-replace": "^0.1.1"
   },
   "sideEffects": false
 }

packages/lexical-playground/src/Settings.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import * as React from 'react';
+import {CAN_USE_BEFORE_INPUT} from '@lexical/utils';
-import {useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 
-import {isDevPlayground} from './appSettings';
+import {INITIAL_SETTINGS, isDevPlayground} from './appSettings';
 import {useSettings} from './context/SettingsContext';
 import Switch from './ui/Switch';
 
@@ -32,6 +32,13 @@ export default function Settings(): JSX.Element {
       shouldUseLexicalContextMenu,
     },
   } = useSettings();
+  useEffect(() => {
+    if (INITIAL_SETTINGS.disableBeforeInput && CAN_USE_BEFORE_INPUT) {
+      console.error(
+        `Legacy events are enabled (disableBeforeInput) but CAN_USE_BEFORE_INPUT is true`,
+      );
+    }
+  }, []);
   const [showSettings, setShowSettings] = useState(false);
   const [isSplitScreen, search] = useMemo(() => {
     const parentWindow = window.parent;

packages/lexical-playground/src/appSettings.ts

@@ -27,8 +27,13 @@ export const DEFAULT_SETTINGS = {
   showTreeView: true,
   tableCellBackgroundColor: true,
   tableCellMerge: true,
+} as const;
+
+// These are mutated in setupEnv
+export const INITIAL_SETTINGS: Record<SettingName, boolean> = {
+  ...DEFAULT_SETTINGS,
 };
 
 export type SettingName = keyof typeof DEFAULT_SETTINGS;
 
-export type Settings = typeof DEFAULT_SETTINGS;
+export type Settings = typeof INITIAL_SETTINGS;

packages/lexical-playground/src/context/SettingsContext.tsx

@@ -18,7 +18,7 @@ import {
   useState,
 } from 'react';
 
-import {DEFAULT_SETTINGS} from '../appSettings';
+import {DEFAULT_SETTINGS, INITIAL_SETTINGS} from '../appSettings';
 
 type SettingsContextShape = {
   setOption: (name: SettingName, value: boolean) => void;
@@ -29,7 +29,7 @@ const Context: React.Context<SettingsContextShape> = createContext({
   setOption: (name: SettingName, value: boolean) => {
     return;
   },
-  settings: DEFAULT_SETTINGS,
+  settings: INITIAL_SETTINGS,
 });
 
 export const SettingsContext = ({
@@ -37,18 +37,14 @@ export const SettingsContext = ({
 }: {
   children: ReactNode;
 }): JSX.Element => {
-  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [settings, setSettings] = useState(INITIAL_SETTINGS);
 
   const setOption = useCallback((setting: SettingName, value: boolean) => {
     setSettings((options) => ({
       ...options,
-      [setting as string]: value,
+      [setting]: value,
     }));
-    if (DEFAULT_SETTINGS[setting] === value) {
-      setURLParam(setting, null);
-    } else {
     setURLParam(setting, value);
-    }
   }, []);
 
   const contextValue = useMemo(() => {
@@ -65,17 +61,11 @@ export const useSettings = (): SettingsContextShape => {
 function setURLParam(param: SettingName, value: null | boolean) {
   const url = new URL(window.location.href);
   const params = new URLSearchParams(url.search);
-  if (value !== null) {
+  if (value !== DEFAULT_SETTINGS[param]) {
-    if (params.has(param)) {
     params.set(param, String(value));
   } else {
-      params.append(param, String(value));
-    }
-  } else {
-    if (params.has(param)) {
     params.delete(param);
   }
-  }
   url.search = params.toString();
   window.history.pushState(null, '', url.toString());
 }

packages/lexical-playground/src/index.tsx

@@ -6,7 +6,10 @@
  *
  */
 
-import './setupEnv';
+// setupEnv must load before App because lexical computes CAN_USE_BEFORE_INPUT
+// at import time (disableBeforeInput is used to test legacy events)
+// eslint-disable-next-line simple-import-sort/imports
+import setupEnv from './setupEnv';
 import './index.css';
 
 import * as React from 'react';
@@ -14,6 +17,11 @@ import {createRoot} from 'react-dom/client';
 
 import App from './App';
 
+if (setupEnv.disableBeforeInput) {
+  // vite is really aggressive about tree-shaking, this
+  // ensures that the side-effects of importing setupEnv happens
+}
+
 // Handle runtime errors
 const showErrorOverlay = (err: Event) => {
   const ErrorOverlay = customElements.get('vite-error-overlay');

packages/lexical-playground/src/nodes/MentionNode.ts

@@ -6,9 +6,8 @@
  *
  */
 
-import type {Spread} from 'lexical';
-
 import {
+  $applyNodeReplacement,
   type DOMConversionMap,
   type DOMConversionOutput,
   type DOMExportOutput,
@@ -16,7 +15,7 @@ import {
   type LexicalNode,
   type NodeKey,
   type SerializedTextNode,
-  $applyNodeReplacement,
+  type Spread,
   TextNode,
 } from 'lexical';
 

packages/lexical-playground/src/plugins/ContextMenuPlugin/index.tsx

@@ -13,12 +13,12 @@ import {
   MenuOption,
 } from '@lexical/react/LexicalContextMenuPlugin';
 import {
-  type LexicalNode,
   $getNearestNodeFromDOMNode,
   $getSelection,
   $isRangeSelection,
   COPY_COMMAND,
   CUT_COMMAND,
+  type LexicalNode,
   PASTE_COMMAND,
 } from 'lexical';
 import {useCallback, useMemo} from 'react';

packages/lexical-playground/src/setupEnv.ts

@@ -6,23 +6,29 @@
  *
  */
 
-import {DEFAULT_SETTINGS, Settings} from './appSettings';
+import {INITIAL_SETTINGS, Settings} from './appSettings';
 
-// override default options with query parameters if any
+// Export a function so this is not tree-shaken,
-const urlSearchParams = new URLSearchParams(window.location.search);
+// but evaluate it immediately so it executes before
+// lexical computes CAN_USE_BEFORE_INPUT
+export default (() => {
+  // override default options with query parameters if any
+  const urlSearchParams = new URLSearchParams(window.location.search);
 
-for (const param of Object.keys(DEFAULT_SETTINGS)) {
+  for (const param of Object.keys(INITIAL_SETTINGS)) {
     if (urlSearchParams.has(param)) {
       try {
         const value = JSON.parse(urlSearchParams.get(param) ?? 'true');
-      DEFAULT_SETTINGS[param as keyof Settings] = Boolean(value);
+        INITIAL_SETTINGS[param as keyof Settings] = Boolean(value);
       } catch (error) {
         console.warn(`Unable to parse query parameter "${param}"`);
       }
     }
-}
+  }
 
-if (DEFAULT_SETTINGS.disableBeforeInput) {
+  if (INITIAL_SETTINGS.disableBeforeInput) {
     // @ts-expect-error
     delete window.InputEvent.prototype.getTargetRanges;
-}
+  }
+  return INITIAL_SETTINGS;
+})();

packages/lexical-playground/vite.config.ts

@@ -7,15 +7,20 @@
  */
 
 import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 import react from '@vitejs/plugin-react';
+import {createRequire} from 'node:module';
 import {defineConfig} from 'vite';
 import {replaceCodePlugin} from 'vite-plugin-replace';
 
 import moduleResolution from '../shared/viteModuleResolution';
 import viteCopyEsm from './viteCopyEsm';
 
+const require = createRequire(import.meta.url);
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({command}) => {
+  return {
     build: {
       outDir: 'build',
       rollupOptions: {
@@ -23,6 +28,18 @@ export default defineConfig({
           main: new URL('./index.html', import.meta.url).pathname,
           split: new URL('./split/index.html', import.meta.url).pathname,
         },
+        onwarn(warning, warn) {
+          if (
+            warning.code === 'EVAL' &&
+            warning.id &&
+            /[\\/]node_modules[\\/]@excalidraw\/excalidraw[\\/]/.test(
+              warning.id,
+            )
+          ) {
+            return;
+          }
+          warn(warning);
+        },
       },
     },
     define: {
@@ -56,8 +73,10 @@ export default defineConfig({
       }),
       react(),
       viteCopyEsm(),
+      commonjs(),
     ],
     resolve: {
-    alias: moduleResolution,
+      alias: moduleResolution(command === 'serve' ? 'source' : 'development'),
     },
+  };
 });

packages/lexical-playground/vite.prod.config.ts

@@ -7,6 +7,7 @@
  */
 
 import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
 import react from '@vitejs/plugin-react';
 import {defineConfig} from 'vite';
 import {replaceCodePlugin} from 'vite-plugin-replace';
@@ -17,7 +18,6 @@ import viteCopyEsm from './viteCopyEsm';
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
-    commonjsOptions: {include: []},
     minify: 'terser',
     outDir: 'build',
     rollupOptions: {
@@ -25,11 +25,22 @@ export default defineConfig({
         main: new URL('./index.html', import.meta.url).pathname,
         split: new URL('./split/index.html', import.meta.url).pathname,
       },
+      onwarn(warning, warn) {
+        if (
+          warning.code === 'EVAL' &&
+          warning.id &&
+          /[\\/]node_modules[\\/]@excalidraw\/excalidraw[\\/]/.test(warning.id)
+        ) {
+          return;
+        }
+        warn(warning);
+      },
     },
     terserOptions: {
       compress: {
         toplevel: true,
       },
+      keep_classnames: true,
     },
   },
   define: {
@@ -40,7 +51,7 @@ export default defineConfig({
       replacements: [
         {
           from: /__DEV__/g,
-          to: 'true',
+          to: 'false',
         },
       ],
     }),
@@ -55,8 +66,9 @@ export default defineConfig({
     }),
     react(),
     viteCopyEsm(),
+    commonjs(),
   ],
   resolve: {
-    alias: moduleResolution,
+    alias: moduleResolution('production'),
   },
 });

packages/lexical-table/src/LexicalTableObserver.ts

@@ -29,9 +29,9 @@ import invariant from 'shared/invariant';
 import {$isTableCellNode} from './LexicalTableCellNode';
 import {$isTableNode} from './LexicalTableNode';
 import {
-  type TableSelection,
   $createTableSelection,
   $isTableSelection,
+  type TableSelection,
 } from './LexicalTableSelection';
 import {
   $findTableNode,

packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx

@@ -8,12 +8,12 @@
 
 import {$createTableSelection} from '@lexical/table';
 import {
-  type LexicalEditor,
   $createParagraphNode,
   $createTextNode,
   $getRoot,
   $setSelection,
   EditorState,
+  type LexicalEditor,
   ParagraphNode,
   RootNode,
   TextNode,

packages/lexical-utils/src/__tests__/unit/LexicalNodeHelpers.test.ts

@@ -222,7 +222,7 @@ describe('LexicalNodeHelpers tests', () => {
         root.append(paragraph, paragraph2);
       });
       await editor.update(() => {
-        const paragraph = $getNodeByKey(paragraphKey);
+        const paragraph = $getNodeByKey(paragraphKey)!;
 
         expect($dfs(paragraph ?? undefined)).toEqual([
           {

packages/lexical-utils/src/markSelection.ts

@@ -7,11 +7,11 @@
  */
 
 import {
-  type EditorState,
-  type LexicalEditor,
   $getSelection,
   $isRangeSelection,
+  type EditorState,
   ElementNode,
+  type LexicalEditor,
   TextNode,
 } from 'lexical';
 import invariant from 'shared/invariant';

packages/lexical-website/docusaurus.config.js

@@ -189,7 +189,7 @@ const docusaurusPluginTypedocConfig = {
     autoConfiguration: false,
     position: 5,
   },
-  tsconfig: '../../tsconfig.json',
+  tsconfig: '../../tsconfig.build.json',
   watch: process.env.TYPEDOC_WATCH === 'true',
 };
 

packages/lexical-website/package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.2.1",
+    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/preset-classic": "^3.2.1",
+    "@docusaurus/preset-classic": "^3.3.2",
-    "@docusaurus/theme-search-algolia": "^3.2.1",
+    "@docusaurus/theme-search-algolia": "^3.3.2",
     "@mdx-js/react": "^3.0.1",
     "@radix-ui/react-tabs": "^1.0.4",
     "@vercel/analytics": "^1.0.1",

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -18,8 +18,6 @@ import {
   TableRowNode,
 } from '@lexical/table';
 import {
-  type LexicalEditor,
-  type LexicalNode,
   $createLineBreakNode,
   $createNodeSelection,
   $createParagraphNode,
@@ -35,6 +33,8 @@ import {
   createCommand,
   EditorState,
   ElementNode,
+  type LexicalEditor,
+  type LexicalNode,
   ParagraphNode,
   RootNode,
   TextNode,

packages/shared/viteModuleResolution.ts

@@ -8,19 +8,27 @@
 
 import type {
   ModuleExportEntry,
+  NpmModuleExportEntry,
   PackageMetadata,
 } from '../../scripts/shared/PackageMetadata';
 
-import {packagesManager} from '../../scripts/shared/packagesManager';
+import * as fs from 'node:fs';
+import {createRequire} from 'node:module';
+import * as path from 'node:path';
 
-function toAlias(pkg: PackageMetadata, entry: ModuleExportEntry) {
+const require = createRequire(import.meta.url);
+const {packagesManager} =
+  require('../../scripts/shared/packagesManager') as typeof import('../../scripts/shared/packagesManager');
+
+const sourceModuleResolution = () => {
+  function toAlias(pkg: PackageMetadata, entry: ModuleExportEntry) {
     return {
       find: entry.name,
       replacement: pkg.resolve('src', entry.sourceFileName),
     };
-}
+  }
 
-const moduleResolution = [
+  return [
     ...packagesManager
       .getPublicPackages()
       .flatMap((pkg) =>
@@ -31,6 +39,50 @@ const moduleResolution = [
       .flatMap((pkg) =>
         pkg.getPrivateModuleEntries().map(toAlias.bind(null, pkg)),
       ),
-];
+  ];
+};
 
-export default moduleResolution;
+const distModuleResolution = (environment: 'development' | 'production') => {
+  return [
+    ...packagesManager.getPublicPackages().flatMap((pkg) =>
+      pkg
+        .getNormalizedNpmModuleExportEntries()
+        .map((entry: NpmModuleExportEntry) => {
+          const [name, moduleExports] = entry;
+          const replacements = ([environment, 'default'] as const).map(
+            (condition) => pkg.resolve('dist', moduleExports.import[condition]),
+          );
+          const replacement = replacements.find(fs.existsSync.bind(fs));
+          if (!replacement) {
+            throw new Error(
+              `ERROR: Missing ./${path.relative(
+                '../..',
+                replacements[1],
+              )}. Did you run \`npm run build\` in the monorepo first?`,
+            );
+          }
+          return {
+            find: name,
+            replacement,
+          };
+        }),
+    ),
+    ...[packagesManager.getPackageByDirectoryName('shared')].flatMap(
+      (pkg: PackageMetadata) =>
+        pkg.getPrivateModuleEntries().map((entry: ModuleExportEntry) => {
+          return {
+            find: entry.name,
+            replacement: pkg.resolve('src', entry.sourceFileName),
+          };
+        }),
+    ),
+  ];
+};
+
+export default function moduleResolution(
+  environment: 'source' | 'development' | 'production',
+) {
+  return environment === 'source'
+    ? sourceModuleResolution()
+    : distModuleResolution(environment);
+}

scripts/build.js

@@ -258,7 +258,7 @@ async function build(name, inputFile, outputPath, outputFile, isProd, format) {
     file: outputFile,
     format, // change between es and cjs modules
     freeze: false,
-    interop: format === 'esm' ? 'esModule' : false,
+    interop: format === 'esm' ? 'esModule' : undefined,
     paths: format === 'esm' ? resolveExternalEsm : undefined,
   };
   const result = await rollup.rollup(inputOptions);

scripts/npm/packages.js

@@ -1,45 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-'use strict';
-
-const LEXICAL_PKG = 'lexical';
-const DEFAULT_PKGS = [
-  'lexical-react',
-  'lexical-yjs',
-  'lexical-list',
-  'lexical-table',
-  'lexical-file',
-  'lexical-clipboard',
-  'lexical-hashtag',
-  'lexical-headless',
-  'lexical-html',
-  'lexical-history',
-  'lexical-selection',
-  'lexical-offset',
-  'lexical-code',
-  'lexical-plain-text',
-  'lexical-rich-text',
-  'lexical-utils',
-  'lexical-dragon',
-  'lexical-overflow',
-  'lexical-link',
-  'lexical-text',
-  'lexical-markdown',
-  'lexical-mark',
-  'lexical-devtools-core',
-];
-const SHARED_PKG = 'shared';
-
-module.exports = {
-  DEFAULT_PKGS,
-  LEXICAL_PKG,
-  SHARED_PKG,
-};

scripts/shared/PackageMetadata.js

@@ -34,7 +34,9 @@ const npmToWwwName = require('../www/npmToWwwName');
  */
 
 /**
- * @typedef {readonly [string, Record<'import'|'require', Object>]} NpmModuleExportEntry
+ * @typedef {Record<'types' | 'development' | 'production' | 'node' | 'default', string>} ImportCondition
+ * @typedef {Record<'types' | 'development' | 'production' | 'default', string>} RequireCondition
+ * @typedef {readonly [string, { import: ImportCondition; require: RequireCondition }]} NpmModuleExportEntry
  */
 
 /**