facebook · mayrang · Aug 7, 2026 · Aug 7, 2026 · Aug 7, 2026
@@ -56,6 +56,7 @@ module.name_mapper='^@lexical/overflow$' -> '<PROJECT_ROOT>/packages/lexical-ove
 module.name_mapper='^@lexical/plain-text$' -> '<PROJECT_ROOT>/packages/lexical-plain-text/flow/LexicalPlainText.js.flow'
 module.name_mapper='^@lexical/react/ExtensionComponent$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalExtensionComponent.js.flow'
 module.name_mapper='^@lexical/react/LexicalAutoEmbedPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoEmbedPlugin.js.flow'
+module.name_mapper='^@lexical/react/LexicalAutoEmbedPluginUtils$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoEmbedPluginUtils.js.flow'
 module.name_mapper='^@lexical/react/LexicalAutoFocusPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoFocusPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalAutoLinkPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalAutoLinkPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalBlockWithAlignableContents$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalBlockWithAlignableContents.js.flow'
@@ -64,6 +65,7 @@ module.name_mapper='^@lexical/react/LexicalCheckListPlugin$' -> '<PROJECT_ROOT>/
 module.name_mapper='^@lexical/react/LexicalClearEditorPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalClearEditorPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalClickableLinkPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalClickableLinkPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalCollaborationContext$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalCollaborationContext.js.flow'
+module.name_mapper='^@lexical/react/LexicalCollaborationContextUtils$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalCollaborationContextUtils.js.flow'
 module.name_mapper='^@lexical/react/LexicalCollaborationPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalCollaborationPlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalComposer$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalComposer.js.flow'
 module.name_mapper='^@lexical/react/LexicalComposerContext$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalComposerContext.js.flow'
@@ -94,6 +96,7 @@ module.name_mapper='^@lexical/react/LexicalTableOfContentsPlugin$' -> '<PROJECT_
 module.name_mapper='^@lexical/react/LexicalTablePlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTablePlugin.js.flow'
 module.name_mapper='^@lexical/react/LexicalTreeView$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTreeView.js.flow'
 module.name_mapper='^@lexical/react/LexicalTypeaheadMenuPlugin$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTypeaheadMenuPlugin.js.flow'
+module.name_mapper='^@lexical/react/LexicalTypeaheadMenuPluginUtils$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalTypeaheadMenuPluginUtils.js.flow'
 module.name_mapper='^@lexical/react/ReactExtension$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalReactExtension.js.flow'
 module.name_mapper='^@lexical/react/ReactPluginHostExtension$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalReactPluginHostExtension.js.flow'
 module.name_mapper='^@lexical/react/ReactProviderExtension$' -> '<PROJECT_ROOT>/packages/lexical-react/flow/LexicalReactProviderExtension.js.flow'

@@ -0,0 +1,17 @@
+# Lexical HMR Example
+
+A minimal [Vite](https://vitejs.dev/) + React app that demonstrates
+`HMRExtension` from `@lexical/extension`. Editor content, the editable flag,
+and undo/redo history are preserved across hot module reloads.
+
+## Running
+
+From the repository root:
+
+```sh
+pnpm install
+pnpm -C dev-examples/hmr dev
+```
+
+Then open the printed URL, type something, and edit `src/App.tsx`. The editor
+state survives the reload.
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical HMR Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/src/main.tsx" type="module"></script>
+  </body>
+</html>
@@ -0,0 +1,33 @@
+{
+  "name": "@lexical/dev-hmr-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lexical/extension": "workspace:*",
+    "@lexical/history": "workspace:*",
+    "@lexical/react": "workspace:*",
+    "@lexical/rich-text": "workspace:*",
+    "lexical": "workspace:*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^6.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.61.0",
+    "@rollup/rollup-darwin-arm64": "4.61.0",
+    "@rollup/rollup-win32-x64-msvc": "4.61.0",
+    "@rollup/wasm-node": "4.61.0"
+  }
+}
@@ -0,0 +1,48 @@
+/**
+ * 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.
+ *
+ */
+import type {JSX} from 'react';
+
+import {AutoFocusExtension, HMRExtension} from '@lexical/extension';
+import {HistoryExtension} from '@lexical/history';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
+import {RichTextExtension} from '@lexical/rich-text';
+import {configExtension, defineExtension} from 'lexical';
+
+const extension = defineExtension({
+  dependencies: [
+    RichTextExtension,
+    HistoryExtension,
+    AutoFocusExtension,
+    configExtension(HMRExtension, {hot: import.meta.hot ?? null}),
+  ],
+  name: '@lexical/examples/hmr',
+  namespace: 'HMR Demo',
+});
+
+const placeholder = 'Type here — edits survive HMR reloads…';
+
+export default function App(): JSX.Element {
+  return (
+    <div>
+      <h1>Lexical HMR Example</h1>
+      <p>
+        Edit <code>src/App.tsx</code> and save. The editor content, editable
+        flag, and undo history are preserved across hot module reloads.
+      </p>
+      <LexicalExtensionComposer extension={extension} contentEditable={null}>
+        <div style={{border: '1px solid #ccc', borderRadius: 4, padding: 8}}>
+          <ContentEditable
+            aria-placeholder={placeholder}
+            placeholder={<div style={{color: '#999'}}>{placeholder}</div>}
+          />
+        </div>
+      </LexicalExtensionComposer>
+    </div>
+  );
+}
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+/// <reference types="vite/client" />
@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "types": ["node"]
+  },
+  "include": ["src", "../../libdefs/globals.d.ts"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+
+import lexicalMonorepoPlugin from '../../scripts/vite/lexicalMonorepoPlugin';
+
+export default defineConfig({
+  plugins: [react(), lexicalMonorepoPlugin()],
+  preview: {port: 4328, strictPort: true},
+  server: {port: 4328, strictPort: true},
+});
@@ -60,6 +60,9 @@
       "@lexical/react/LexicalAutoEmbedPlugin": [
         "../lexical-react/src/LexicalAutoEmbedPlugin.tsx"
       ],
+      "@lexical/react/LexicalAutoEmbedPluginUtils": [
+        "../lexical-react/src/LexicalAutoEmbedPluginUtils.ts"
+      ],
       "@lexical/react/LexicalAutoFocusPlugin": [
         "../lexical-react/src/LexicalAutoFocusPlugin.ts"
       ],
@@ -84,6 +87,9 @@
       "@lexical/react/LexicalCollaborationContext": [
         "../lexical-react/src/LexicalCollaborationContext.tsx"
       ],
+      "@lexical/react/LexicalCollaborationContextUtils": [
+        "../lexical-react/src/LexicalCollaborationContextUtils.ts"
+      ],
       "@lexical/react/LexicalCollaborationPlugin": [
         "../lexical-react/src/LexicalCollaborationPlugin.tsx"
       ],
@@ -174,6 +180,9 @@
       "@lexical/react/LexicalTypeaheadMenuPlugin": [
         "../lexical-react/src/LexicalTypeaheadMenuPlugin.tsx"
       ],
+      "@lexical/react/LexicalTypeaheadMenuPluginUtils": [
+        "../lexical-react/src/LexicalTypeaheadMenuPluginUtils.ts"
+      ],
       "@lexical/react/ReactExtension": [
         "../lexical-react/src/ReactExtension.tsx"
       ],