diff --git a/packages/lexical-playground/__tests__/unit/FloatingTextFormatToolbar.test.tsx b/packages/lexical-playground/__tests__/unit/FloatingTextFormatToolbar.test.tsx
new file mode 100644
index 00000000000..ed61d8e6e9f
--- /dev/null
+++ b/packages/lexical-playground/__tests__/unit/FloatingTextFormatToolbar.test.tsx
@@ -0,0 +1,111 @@
+/**
+ * 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 {RovingTabIndexExtension} from '@lexical/a11y';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
+import {RichTextExtension} from '@lexical/rich-text';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  $selectAll,
+  defineExtension,
+  type LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+import FloatingTextFormatToolbarPlugin from '../../src/plugins/FloatingTextFormatToolbarPlugin';
+
+const ToolbarTestExtension = /* @__PURE__ */ defineExtension({
+  $initialEditorState: () => {
+    $getRoot()
+      .clear()
+      .append($createParagraphNode().append($createTextNode('hello')));
+  },
+  dependencies: [RichTextExtension, RovingTabIndexExtension],
+  name: '[test-floating-toolbar]',
+});
+
+describe('FloatingTextFormatToolbarPlugin', () => {
+  let container: HTMLDivElement;
+  let anchorElem: HTMLDivElement;
+  let reactRoot: Root;
+  let editor: LexicalEditor;
+
+  function Capture() {
+    const [contextEditor] = useLexicalComposerContext();
+    editor = contextEditor;
+    return null;
+  }
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    anchorElem = document.createElement('div');
+    document.body.append(container, anchorElem);
+    reactRoot = createRoot(container);
+
+    await act(async () => {
+      reactRoot.render(
+        <LexicalExtensionComposer extension={ToolbarTestExtension}>
+          <Capture />
+          <FloatingTextFormatToolbarPlugin
+            anchorElem={anchorElem}
+            setIsLinkEditMode={vi.fn()}
+          />
+        </LexicalExtensionComposer>,
+      );
+    });
+
+    // The popup only opens for a non-collapsed selection whose DOM anchor is
+    // inside the root element, so set both.
+    await act(async () => {
+      editor.update(() => void $selectAll(), {discrete: true});
+      const textDOM = editor.getRootElement()!.querySelector('p')!.firstChild!
+        .firstChild!;
+      document
+        .getSelection()!
+        .setBaseAndExtent(textDOM, 0, textDOM, 'hello'.length);
+      document.dispatchEvent(new Event('selectionchange'));
+    });
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+    anchorElem.remove();
+  });
+
+  function formatButtonCount(): number {
+    return anchorElem.querySelectorAll(
+      '.floating-text-format-popup button[aria-label^="Format text"]',
+    ).length;
+  }
+
+  it('hides its format buttons when the editor becomes read-only', async () => {
+    expect(anchorElem.querySelector('.floating-text-format-popup')).not.toBe(
+      null,
+    );
+    expect(formatButtonCount()).toBeGreaterThan(0);
+
+    await act(async () => {
+      editor.setEditable(false);
+    });
+    expect(formatButtonCount()).toBe(0);
+
+    await act(async () => {
+      editor.setEditable(true);
+    });
+    expect(formatButtonCount()).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
index 88d56ebc83e..ccd4f0bcba7 100644
--- a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -12,6 +12,7 @@ import {useMergeRefs} from '@floating-ui/react';
 import {$isCodeNode} from '@lexical/code';
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {useLexicalRovingTabIndexRef} from '@lexical/react/useLexicalRovingTabIndexRef';
 import {
   $getSelection,
@@ -82,6 +83,9 @@ function TextFormatFloatingToolbar({
 }): JSX.Element {
   const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
   const rovingRef = useLexicalRovingTabIndexRef();
+  // Subscribed rather than read off the editor, so that setEditable() actually
+  // re-renders the toolbar.
+  const isEditable = useLexicalEditable();
   const mergedRef = useMergeRefs([popupCharStylesEditorRef, rovingRef, ref]);
 
   const insertLink = useCallback(() => {
@@ -224,7 +228,7 @@ function TextFormatFloatingToolbar({
       className="floating-text-format-popup"
       role="toolbar"
       aria-label="Floating text format toolbar">
-      {editor.isEditable() && (
+      {isEditable && (
         <>
           <button
             type="button"
diff --git a/packages/lexical-react/src/LexicalCollaborationPlugin.tsx b/packages/lexical-react/src/LexicalCollaborationPlugin.tsx
index f329465ea86..3187d5bdfb7 100644
--- a/packages/lexical-react/src/LexicalCollaborationPlugin.tsx
+++ b/packages/lexical-react/src/LexicalCollaborationPlugin.tsx
@@ -80,7 +80,15 @@ export function CollaborationPlugin({
   rootName,
 }: CollaborationPluginProps): JSX.Element {
   const isBindingInitialized = useRef(false);
-  const isProviderInitialized = useRef(false);
+  // The inputs that produced the current Provider. A ref rather than the effect
+  // deps alone because the effect must be idempotent: React StrictMode (and
+  // React 18+ remounts in general) re-runs the effect with unchanged inputs and
+  // must not create a second Provider.
+  const providerInputs = useRef<null | {
+    id: string;
+    providerFactory: ProviderFactory;
+    yjsDocMap: Map<string, Doc>;
+  }>(null);
 
   const collabContext = useCollaborationContext(username, cursorColor);
   const {yjsDocMap, name, color} = collabContext;
@@ -93,11 +101,17 @@ export function CollaborationPlugin({
   const [doc, setDoc] = useState<Doc>();
 
   useEffect(() => {
-    if (isProviderInitialized.current) {
+    const prevInputs = providerInputs.current;
+    if (
+      prevInputs !== null &&
+      prevInputs.id === id &&
+      prevInputs.providerFactory === providerFactory &&
+      prevInputs.yjsDocMap === yjsDocMap
+    ) {
       return;
     }
 
-    isProviderInitialized.current = true;
+    providerInputs.current = {id, providerFactory, yjsDocMap};
 
     const newProvider = providerFactory(id, yjsDocMap);
     setProvider(newProvider);
diff --git a/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx b/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
index addf3f56675..4f2f70c5533 100644
--- a/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
+++ b/packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
@@ -7,6 +7,7 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {eventFiles} from '@lexical/rich-text';
 import {calculateZoomLevel} from '@lexical/utils';
 import {
@@ -621,12 +622,16 @@ export function DraggableBlockPlugin_EXPERIMENTAL({
   onElementChanged?: (element: HTMLElement | null) => void;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
+  // Subscribed rather than read off the editor, so that setEditable() actually
+  // re-renders the handle. useLexicalEditable also handles StrictMode and
+  // concurrent rendering correctly.
+  const isEditable = useLexicalEditable();
   return useDraggableBlockMenu(
     editor,
     anchorElem,
     menuRef,
     targetLineRef,
-    editor._editable,
+    isEditable,
     menuComponent,
     targetLineComponent,
     isOnMenu,
diff --git a/packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx b/packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx
index 5fd7f4a40e4..e726b686334 100644
--- a/packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx
+++ b/packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx
@@ -221,6 +221,26 @@ const NodeContextMenuPlugin = forwardRef<
 
   useEffect(() => {
     function onContextMenu(e: MouseEvent) {
+      let visibleItems: ContextMenuType[] = [];
+      if (items) {
+        editor.read(() => {
+          const node =
+            $getNearestNodeFromDOMNode(e.target as Element) ?? $getRoot();
+          if (node) {
+            visibleItems = items!.filter(option =>
+              option.$showOn ? option.$showOn(node) : true,
+            );
+          }
+        });
+      }
+
+      // Every item is hidden for this node, so there is no menu to show. Let
+      // the browser's own context menu open rather than suppressing it and
+      // mounting a scroll-locking overlay around nothing.
+      if (visibleItems.length === 0) {
+        return;
+      }
+
       e.preventDefault();
 
       refs.setPositionReference({
@@ -238,19 +258,6 @@ const NodeContextMenuPlugin = forwardRef<
         },
       });
 
-      let visibleItems: ContextMenuType[] = [];
-      if (items) {
-        editor.read(() => {
-          const node =
-            $getNearestNodeFromDOMNode(e.target as Element) ?? $getRoot();
-          if (node) {
-            visibleItems = items!.filter(option =>
-              option.$showOn ? option.$showOn(node) : true,
-            );
-          }
-        });
-      }
-
       const renderableItems = visibleItems.map((option, index) => {
         if (option.type === 'separator') {
           return {
diff --git a/packages/lexical-react/src/LexicalTreeView.tsx b/packages/lexical-react/src/LexicalTreeView.tsx
index 9a2f909914c..8980733cc5a 100644
--- a/packages/lexical-react/src/LexicalTreeView.tsx
+++ b/packages/lexical-react/src/LexicalTreeView.tsx
@@ -16,6 +16,8 @@ import {type EditorState, type LexicalEditor, mergeRegister} from 'lexical';
 import * as React from 'react';
 import {type JSX, useEffect, useState} from 'react';
 
+import useLayoutEffect from './shared/useLayoutEffect';
+
 /**
  * TreeView is a React component that provides a visual representation of
  * the Lexical editor's state and enables debugging features like time travel
@@ -65,7 +67,14 @@ export function TreeView({
 
   const commandsLog = useLexicalCommandsLog(editor);
 
-  useEffect(() => {
+  // useLayoutEffect, like useCanShowPlaceholder and ContentEditableElement, so
+  // the state can be re-derived before subscribing without the cascading
+  // render that setState inside a useEffect body causes.
+  useLayoutEffect(() => {
+    // The state was seeded on the first render only, so re-read it here: when
+    // the editor prop changes, neither listener has fired yet for the new
+    // editor and the view would keep rendering the previous editor's state.
+    setEditorCurrentState(editor.getEditorState());
     // Registers listeners to update the tree view when the editor state changes
     return mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
diff --git a/packages/lexical-react/src/__tests__/browser/useMenuAnchorRefPosition.test.tsx b/packages/lexical-react/src/__tests__/browser/useMenuAnchorRefPosition.test.tsx
new file mode 100644
index 00000000000..8d35466dedc
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/browser/useMenuAnchorRefPosition.test.tsx
@@ -0,0 +1,131 @@
+/**
+ * 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 {defineExtension} from '@lexical/extension';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
+import {RichTextExtension} from '@lexical/rich-text';
+import {act, type ReactElement, useMemo} from 'react';
+import {createRoot} from 'react-dom/client';
+import {describe, expect, onTestFinished, test} from 'vitest';
+
+import {type MenuResolution, useMenuAnchorRef} from '../../shared/LexicalMenu';
+
+// The anchor is absolutely positioned, so where it lands depends on the
+// containing block its `parent` sits in. jsdom reports every rect as zero, so
+// this has to run against a real layout engine.
+const extension = defineExtension({
+  dependencies: [RichTextExtension],
+  name: '[root]',
+});
+
+// Where the caret would be, in viewport coordinates.
+const CARET_RECT = {height: 18, left: 150, top: 250, width: 2};
+
+function renderReact(ui: ReactElement): void {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(ui);
+  });
+  onTestFinished(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+}
+
+let anchorElement: HTMLElement | null = null;
+
+function MenuAnchorProbe({parent}: {parent?: HTMLElement}): null {
+  const resolution = useMemo<MenuResolution>(
+    () => ({
+      getRect: () =>
+        new DOMRect(
+          CARET_RECT.left,
+          CARET_RECT.top,
+          CARET_RECT.width,
+          CARET_RECT.height,
+        ),
+    }),
+    [],
+  );
+  anchorElement = useMenuAnchorRef(
+    resolution,
+    () => {},
+    'test-menu-anchor',
+    parent,
+  ).current;
+  return null;
+}
+
+function createPositionedParent(scrollable = false): HTMLElement {
+  const parent = document.createElement('div');
+  // A positioned ancestor establishes a containing block for the absolutely
+  // positioned anchor, so anchor coordinates are relative to this box.
+  parent.style.position = 'relative';
+  parent.style.marginLeft = '120px';
+  parent.style.marginTop = '200px';
+  parent.style.width = '400px';
+  parent.style.height = '300px';
+  if (scrollable) {
+    parent.style.overflow = 'auto';
+    const spacer = document.createElement('div');
+    spacer.style.height = '1000px';
+    parent.appendChild(spacer);
+  }
+  document.body.appendChild(parent);
+  onTestFinished(() => parent.remove());
+  return parent;
+}
+
+describe('useMenuAnchorRef positioning (browser)', () => {
+  test('anchors the menu at the caret when parent is the document body', () => {
+    renderReact(
+      <LexicalExtensionComposer extension={extension}>
+        <MenuAnchorProbe />
+      </LexicalExtensionComposer>,
+    );
+    expect(anchorElement).not.toBeNull();
+    const rect = anchorElement!.getBoundingClientRect();
+    expect(Math.round(rect.left)).toBe(CARET_RECT.left);
+    expect(Math.round(rect.top)).toBe(CARET_RECT.top + 3);
+  });
+
+  test('anchors the menu at the caret when parent is a positioned element', () => {
+    const parent = createPositionedParent();
+    renderReact(
+      <LexicalExtensionComposer extension={extension}>
+        <MenuAnchorProbe parent={parent} />
+      </LexicalExtensionComposer>,
+    );
+    expect(anchorElement).not.toBeNull();
+    expect(parent.contains(anchorElement!)).toBe(true);
+    // Without accounting for the containing block the anchor is pushed down
+    // and right by the parent's own offset.
+    const rect = anchorElement!.getBoundingClientRect();
+    expect(Math.round(rect.left)).toBe(CARET_RECT.left);
+    expect(Math.round(rect.top)).toBe(CARET_RECT.top + 3);
+  });
+
+  test('anchors the menu at the caret when the positioned parent is scrolled', () => {
+    const parent = createPositionedParent(true);
+    parent.scrollTop = 250;
+    expect(parent.scrollTop).toBe(250);
+    renderReact(
+      <LexicalExtensionComposer extension={extension}>
+        <MenuAnchorProbe parent={parent} />
+      </LexicalExtensionComposer>,
+    );
+    expect(anchorElement).not.toBeNull();
+    const rect = anchorElement!.getBoundingClientRect();
+    expect(Math.round(rect.left)).toBe(CARET_RECT.left);
+    expect(Math.round(rect.top)).toBe(CARET_RECT.top + 3);
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalCharacterLimitPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalCharacterLimitPlugin.test.tsx
new file mode 100644
index 00000000000..ef018ca0ed2
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/LexicalCharacterLimitPlugin.test.tsx
@@ -0,0 +1,119 @@
+/**
+ * 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 {OverflowNode} from '@lexical/overflow';
+import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {EditorRefPlugin} from '@lexical/react/LexicalEditorRefPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  type LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {act, createRef} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+const MAX_LENGTH = 5;
+
+describe('CharacterLimitPlugin', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+  let editor: LexicalEditor;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  /**
+   * Mount an editor that already holds `text`, then mount the plugin on top of
+   * it -- which is what toggling the character-limit setting on does.
+   */
+  async function mountWithText(
+    text: string,
+    charset: 'UTF-8' | 'UTF-16' = 'UTF-16',
+  ): Promise<void> {
+    const editorRef =
+      createRef<LexicalEditor>() as React.RefObject<LexicalEditor>;
+    await act(async () => {
+      reactRoot.render(
+        <LexicalComposer
+          initialConfig={{
+            editorState: () => {
+              $getRoot()
+                .clear()
+                .append($createParagraphNode().append($createTextNode(text)));
+            },
+            namespace: 'character-limit',
+            nodes: [OverflowNode],
+            onError: (error: Error) => {
+              throw error;
+            },
+          }}>
+          <EditorRefPlugin editorRef={editorRef} />
+          <RichTextPlugin
+            contentEditable={<ContentEditable />}
+            ErrorBoundary={({children}) => <>{children}</>}
+          />
+          <CharacterLimitPlugin charset={charset} maxLength={MAX_LENGTH} />
+        </LexicalComposer>,
+      );
+    });
+    editor = editorRef.current;
+  }
+
+  function remainingCharacters(): string {
+    const span = container.querySelector('.characters-limit');
+    expect(span).not.toBe(null);
+    return (span as HTMLElement).textContent ?? '';
+  }
+
+  function overflowNodeCount(): number {
+    return editor.read(
+      () =>
+        $getRoot()
+          .getAllTextNodes()
+          .filter(node => node.getParent() instanceof OverflowNode).length,
+    );
+  }
+
+  it('counts the text that is already in the editor when it mounts', async () => {
+    await mountWithText('hello world');
+
+    // 5 - 11
+    expect(remainingCharacters()).toBe('-6');
+    expect(overflowNodeCount()).toBeGreaterThan(0);
+  });
+
+  it('reports a full budget for an editor that is under the limit', async () => {
+    await mountWithText('hi');
+
+    expect(remainingCharacters()).toBe('3');
+    expect(overflowNodeCount()).toBe(0);
+  });
+
+  it('counts in the charset it was given', async () => {
+    // Three 3-byte characters: 3 UTF-16 code units, 9 UTF-8 bytes.
+    await mountWithText('一二三', 'UTF-8');
+
+    expect(remainingCharacters()).toBe('-4');
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalCollaborationPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalCollaborationPlugin.test.tsx
index e48e0e34c70..2540aad0848 100644
--- a/packages/lexical-react/src/__tests__/unit/LexicalCollaborationPlugin.test.tsx
+++ b/packages/lexical-react/src/__tests__/unit/LexicalCollaborationPlugin.test.tsx
@@ -6,6 +6,8 @@
  *
  */
 
+import type {Provider} from '@lexical/yjs';
+
 import {LexicalCollaboration} from '@lexical/react/LexicalCollaborationContext';
 import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
@@ -18,6 +20,37 @@ import {createRoot, type Root} from 'react-dom/client';
 import {beforeEach, describe, expect, test, vi} from 'vitest';
 import * as Y from 'yjs';
 
+type TestProvider = Provider & {
+  _connectCount: number;
+  _disconnectCount: number;
+};
+
+/** A minimal in-memory {@link Provider} that records connect/disconnect calls. */
+function createTestProvider(): TestProvider {
+  const provider: TestProvider = {
+    _connectCount: 0,
+    _disconnectCount: 0,
+    awareness: {
+      getLocalState: () => null,
+      getStates: () => new Map(),
+      off: () => {},
+      on: () => {},
+      setLocalState: () => {},
+      setLocalStateField: () => {},
+    },
+    connect: () => {
+      provider._connectCount++;
+    },
+    disconnect: () => {
+      provider._disconnectCount++;
+    },
+    off: () => {},
+    on: () => {},
+  };
+
+  return provider;
+}
+
 describe(`LexicalCollaborationPlugin`, () => {
   let container: HTMLDivElement;
   let reactRoot: Root;
@@ -98,4 +131,59 @@ describe(`LexicalCollaborationPlugin`, () => {
 
     expect(providerFactory).toHaveBeenCalledTimes(1);
   });
+
+  // https://github.com/facebook/lexical/issues/7136
+  test(`provider is replaced when providerFactory changes`, () => {
+    const doc = new Y.Doc();
+    const providerA = createTestProvider();
+    const providerB = createTestProvider();
+
+    const factoryA = vi.fn((id: string, yjsDocMap: Map<string, Y.Doc>) => {
+      yjsDocMap.set(id, doc);
+      return providerA;
+    });
+    const factoryB = vi.fn((id: string, yjsDocMap: Map<string, Y.Doc>) => {
+      yjsDocMap.set(id, doc);
+      return providerB;
+    });
+
+    function App({
+      providerFactory,
+    }: {
+      providerFactory: (id: string, yjsDocMap: Map<string, Y.Doc>) => Provider;
+    }) {
+      return (
+        <LexicalCollaboration>
+          <LexicalComposer initialConfig={editorConfig}>
+            <CollaborationPlugin
+              id="main"
+              providerFactory={providerFactory}
+              shouldBootstrap={false}
+            />
+            <RichTextPlugin
+              contentEditable={<ContentEditable />}
+              placeholder={<></>}
+              ErrorBoundary={LexicalErrorBoundary}
+            />
+          </LexicalComposer>
+        </LexicalCollaboration>
+      );
+    }
+
+    act(() => {
+      reactRoot.render(<App providerFactory={factoryA} />);
+    });
+
+    expect(factoryA).toHaveBeenCalledTimes(1);
+    expect(providerA._connectCount).toBe(1);
+
+    act(() => {
+      reactRoot.render(<App providerFactory={factoryB} />);
+    });
+
+    expect(factoryB).toHaveBeenCalledTimes(1);
+    expect(providerB._connectCount).toBe(1);
+    // The superseded provider is torn down.
+    expect(providerA._disconnectCount).toBeGreaterThan(0);
+  });
 });
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalDraggableBlockPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalDraggableBlockPlugin.test.tsx
new file mode 100644
index 00000000000..598e5f40d10
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/LexicalDraggableBlockPlugin.test.tsx
@@ -0,0 +1,137 @@
+/**
+ * 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 {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
+import {EditorRefPlugin} from '@lexical/react/LexicalEditorRefPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {type LexicalEditor} from 'lexical';
+import * as React from 'react';
+import {act, createRef} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+const MENU_CLASS = 'draggable-block-menu';
+
+describe('DraggableBlockPlugin_EXPERIMENTAL', () => {
+  let container: HTMLDivElement;
+  let anchorElem: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    anchorElem = document.createElement('div');
+    container.appendChild(anchorElem);
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    document.body.removeChild(container);
+  });
+
+  function Test({editorRef}: {editorRef: React.RefObject<LexicalEditor>}) {
+    const menuRef = React.useRef<HTMLDivElement | null>(null);
+    const targetLineRef = React.useRef<HTMLDivElement | null>(null);
+    return (
+      <LexicalComposer
+        initialConfig={{
+          namespace: 'draggable-block',
+          onError: (error: Error) => {
+            throw error;
+          },
+        }}>
+        <EditorRefPlugin editorRef={editorRef} />
+        <RichTextPlugin
+          contentEditable={<ContentEditable />}
+          ErrorBoundary={({children}) => <>{children}</>}
+        />
+        <DraggableBlockPlugin_EXPERIMENTAL
+          anchorElem={anchorElem}
+          menuRef={menuRef}
+          targetLineRef={targetLineRef}
+          menuComponent={<div ref={menuRef} className={MENU_CLASS} />}
+          targetLineComponent={<div ref={targetLineRef} />}
+          isOnMenu={element => element.closest(`.${MENU_CLASS}`) !== null}
+        />
+      </LexicalComposer>
+    );
+  }
+
+  function hasDragHandle(): boolean {
+    return anchorElem.querySelector(`.${MENU_CLASS}`) !== null;
+  }
+
+  it('follows setEditable', async () => {
+    const editorRef =
+      createRef<LexicalEditor>() as React.RefObject<LexicalEditor>;
+    await act(async () => {
+      reactRoot.render(<Test editorRef={editorRef} />);
+    });
+
+    expect(hasDragHandle()).toBe(true);
+
+    await act(async () => {
+      editorRef.current.setEditable(false);
+    });
+    expect(hasDragHandle()).toBe(false);
+
+    await act(async () => {
+      editorRef.current.setEditable(true);
+    });
+    expect(hasDragHandle()).toBe(true);
+  });
+
+  it('renders no drag handle for an editor that mounts read-only', async () => {
+    const editorRef =
+      createRef<LexicalEditor>() as React.RefObject<LexicalEditor>;
+
+    function ReadOnlyTest() {
+      const menuRef = React.useRef<HTMLDivElement | null>(null);
+      const targetLineRef = React.useRef<HTMLDivElement | null>(null);
+      return (
+        <LexicalComposer
+          initialConfig={{
+            editable: false,
+            namespace: 'draggable-block',
+            onError: (error: Error) => {
+              throw error;
+            },
+          }}>
+          <EditorRefPlugin editorRef={editorRef} />
+          <RichTextPlugin
+            contentEditable={<ContentEditable />}
+            ErrorBoundary={({children}) => <>{children}</>}
+          />
+          <DraggableBlockPlugin_EXPERIMENTAL
+            anchorElem={anchorElem}
+            menuRef={menuRef}
+            targetLineRef={targetLineRef}
+            menuComponent={<div ref={menuRef} className={MENU_CLASS} />}
+            targetLineComponent={<div ref={targetLineRef} />}
+            isOnMenu={element => element.closest(`.${MENU_CLASS}`) !== null}
+          />
+        </LexicalComposer>
+      );
+    }
+
+    await act(async () => {
+      reactRoot.render(<ReadOnlyTest />);
+    });
+    expect(hasDragHandle()).toBe(false);
+
+    await act(async () => {
+      editorRef.current.setEditable(true);
+    });
+    expect(hasDragHandle()).toBe(true);
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalMenuEmptyOptions.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalMenuEmptyOptions.test.tsx
new file mode 100644
index 00000000000..eeeff0c5a04
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/LexicalMenuEmptyOptions.test.tsx
@@ -0,0 +1,147 @@
+/**
+ * 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 {
+  COMMAND_PRIORITY_EDITOR,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  type LexicalCommand,
+  type LexicalEditor,
+} from 'lexical';
+import {createTestEditor} from 'lexical/src/__tests__/utils';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {
+  LexicalMenu,
+  MenuOption,
+  type MenuResolution,
+} from '../../shared/LexicalMenu';
+
+vi.mock('@lexical/react/LexicalComposerContext', () => ({
+  useLexicalComposerContext: () => [createTestEditor()],
+}));
+
+class TestOption extends MenuOption {
+  title: string;
+  constructor(title: string) {
+    super(title);
+    this.title = title;
+  }
+}
+
+function createTestResolution(): MenuResolution {
+  return {
+    getRect: () =>
+      ({
+        bottom: 100,
+        height: 20,
+        left: 10,
+        right: 110,
+        top: 80,
+        width: 100,
+        x: 10,
+        y: 80,
+      }) as DOMRect,
+    match: {leadOffset: 0, matchingString: 'zz', replaceableString: 'zz'},
+  };
+}
+
+describe('LexicalMenu arrow keys with no options', () => {
+  let container: HTMLDivElement;
+  let anchorElement: HTMLDivElement;
+  let rootElement: HTMLDivElement;
+  let reactRoot: Root;
+  let editor: LexicalEditor;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    anchorElement = document.createElement('div');
+    rootElement = document.createElement('div');
+    rootElement.contentEditable = 'true';
+    document.body.append(container, anchorElement, rootElement);
+    reactRoot = createRoot(container);
+    editor = createTestEditor();
+    editor.setRootElement(rootElement);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+    anchorElement.remove();
+    rootElement.remove();
+    vi.restoreAllMocks();
+  });
+
+  async function renderMenu(options: TestOption[]): Promise<void> {
+    await act(async () => {
+      reactRoot.render(
+        <LexicalMenu<TestOption>
+          close={vi.fn()}
+          editor={editor}
+          anchorElementRef={{current: anchorElement}}
+          resolution={createTestResolution()}
+          options={options}
+          onSelectOption={vi.fn()}
+        />,
+      );
+    });
+  }
+
+  function pressKey(command: LexicalCommand<KeyboardEvent>): {
+    handled: boolean;
+    defaultPrevented: boolean;
+    reachedEditor: boolean;
+  } {
+    let reachedEditor = false;
+    const removeFallback = editor.registerCommand(
+      command,
+      () => {
+        reachedEditor = true;
+        return false;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+    const event = new KeyboardEvent('keydown', {cancelable: true});
+    try {
+      const handled = editor.dispatchCommand(command, event);
+      return {defaultPrevented: event.defaultPrevented, handled, reachedEditor};
+    } finally {
+      removeFallback();
+    }
+  }
+
+  for (const [name, command] of [
+    ['ArrowDown', KEY_ARROW_DOWN_COMMAND],
+    ['ArrowUp', KEY_ARROW_UP_COMMAND],
+  ] as const) {
+    it(`lets ${name} through when there are no options`, async () => {
+      // An empty option list renders no menu at all, so the key must still
+      // reach whatever would otherwise move the caret.
+      await renderMenu([]);
+
+      const result = pressKey(command);
+      expect(result.handled).toBe(false);
+      expect(result.defaultPrevented).toBe(false);
+      expect(result.reachedEditor).toBe(true);
+    });
+
+    it(`still consumes ${name} when there are options`, async () => {
+      await renderMenu([new TestOption('a'), new TestOption('b')]);
+
+      const result = pressKey(command);
+      expect(result.handled).toBe(true);
+      expect(result.defaultPrevented).toBe(true);
+      expect(result.reachedEditor).toBe(false);
+    });
+  }
+});
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalNodeContextMenuPlugin.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalNodeContextMenuPlugin.test.tsx
new file mode 100644
index 00000000000..21c59561a02
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/LexicalNodeContextMenuPlugin.test.tsx
@@ -0,0 +1,99 @@
+/**
+ * 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 {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {
+  NodeContextMenuOption,
+  NodeContextMenuPlugin,
+} from '@lexical/react/LexicalNodeContextMenuPlugin';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+
+const MENU_CLASS = 'node-context-menu';
+
+describe('NodeContextMenuPlugin', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  async function renderPlugin(showOn: boolean): Promise<void> {
+    const items = [
+      new NodeContextMenuOption('Do a thing', {
+        $onSelect: vi.fn(),
+        $showOn: () => showOn,
+      }),
+    ];
+    await act(async () => {
+      reactRoot.render(
+        <LexicalComposer
+          initialConfig={{
+            namespace: 'context-menu',
+            onError: (error: Error) => {
+              throw error;
+            },
+          }}>
+          <RichTextPlugin
+            contentEditable={<ContentEditable />}
+            ErrorBoundary={({children}) => <>{children}</>}
+          />
+          <NodeContextMenuPlugin className={MENU_CLASS} items={items} />
+        </LexicalComposer>,
+      );
+    });
+  }
+
+  async function rightClick(): Promise<MouseEvent> {
+    const rootElement = container.querySelector(
+      '[contenteditable="true"]',
+    ) as HTMLElement;
+    const event = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    await act(async () => {
+      rootElement.dispatchEvent(event);
+    });
+    return event;
+  }
+
+  function isMenuOpen(): boolean {
+    return document.querySelector(`.${MENU_CLASS}`) !== null;
+  }
+
+  it('leaves the native context menu alone when no item is shown', async () => {
+    await renderPlugin(false);
+
+    const event = await rightClick();
+    expect(event.defaultPrevented).toBe(false);
+    expect(isMenuOpen()).toBe(false);
+  });
+
+  it('opens and replaces the native context menu when an item is shown', async () => {
+    await renderPlugin(true);
+
+    const event = await rightClick();
+    expect(event.defaultPrevented).toBe(true);
+    expect(isMenuOpen()).toBe(true);
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/LexicalTreeView.test.tsx b/packages/lexical-react/src/__tests__/unit/LexicalTreeView.test.tsx
new file mode 100644
index 00000000000..fc3c85baff1
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/LexicalTreeView.test.tsx
@@ -0,0 +1,82 @@
+/**
+ * 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 {TreeView} from '@lexical/react/LexicalTreeView';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  createEditor,
+  type LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+function makeEditor(text: string): LexicalEditor {
+  const editor = createEditor({
+    namespace: 'tree-view',
+    onError: error => {
+      throw error;
+    },
+  });
+  editor.setRootElement(document.createElement('div'));
+  editor.update(
+    () => {
+      $getRoot()
+        .clear()
+        .append($createParagraphNode().append($createTextNode(text)));
+    },
+    {discrete: true},
+  );
+  return editor;
+}
+
+describe('TreeView', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  /** The rendered tree is produced asynchronously, so let it settle. */
+  async function renderTreeFor(editor: LexicalEditor): Promise<string> {
+    await act(async () => {
+      reactRoot.render(<TreeView editor={editor} />);
+    });
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    const pre = container.querySelector('pre');
+    expect(pre).not.toBe(null);
+    return (pre as HTMLPreElement).textContent ?? '';
+  }
+
+  it('renders the tree of the editor it was given', async () => {
+    expect(await renderTreeFor(makeEditor('AAAAA'))).toContain('"AAAAA"');
+  });
+
+  it('re-renders when the editor prop changes', async () => {
+    expect(await renderTreeFor(makeEditor('AAAAA'))).toContain('"AAAAA"');
+
+    const tree = await renderTreeFor(makeEditor('BBBBB'));
+    expect(tree).toContain('"BBBBB"');
+    expect(tree).not.toContain('"AAAAA"');
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmptyResync.test.tsx b/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmptyResync.test.tsx
new file mode 100644
index 00000000000..fc8379fa45e
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/useLexicalIsTextContentEmptyResync.test.tsx
@@ -0,0 +1,97 @@
+/**
+ * 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 {useLexicalIsTextContentEmpty} from '@lexical/react/useLexicalIsTextContentEmpty';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  createEditor,
+  type LexicalEditor,
+  ParagraphNode,
+} from 'lexical';
+import * as React from 'react';
+import {act} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+describe('useLexicalIsTextContentEmpty re-derives its value', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  function makeEditor(text: string): LexicalEditor {
+    const editor = createEditor({
+      namespace: 'is-text-content-empty',
+      nodes: [ParagraphNode],
+      onError: error => {
+        throw error;
+      },
+    });
+    editor.update(
+      () => {
+        const paragraph = $createParagraphNode();
+        if (text !== '') {
+          paragraph.append($createTextNode(text));
+        }
+        $getRoot().clear().append(paragraph);
+      },
+      {discrete: true},
+    );
+    return editor;
+  }
+
+  let current = false;
+
+  // Declared once, so that re-rendering with different props updates the same
+  // component instance rather than mounting a fresh one (which would re-run
+  // the useState initializer and hide the bug).
+  function Test({editor, trim}: {editor: LexicalEditor; trim: boolean}) {
+    current = useLexicalIsTextContentEmpty(editor, trim);
+    return null;
+  }
+
+  async function render(
+    editor: LexicalEditor,
+    trim: boolean,
+  ): Promise<boolean> {
+    await act(async () => {
+      reactRoot.render(<Test editor={editor} trim={trim} />);
+    });
+    return current;
+  }
+
+  it('follows a change of the trim argument', async () => {
+    // Whitespace-only content is empty when trimmed and not empty otherwise,
+    // so the answer depends entirely on `trim`.
+    const editor = makeEditor('   ');
+
+    expect(await render(editor, false)).toBe(false);
+    expect(await render(editor, true)).toBe(true);
+  });
+
+  it('follows a change of the editor', async () => {
+    const withText = makeEditor('hello');
+    const empty = makeEditor('');
+
+    expect(await render(withText, true)).toBe(false);
+    expect(await render(empty, true)).toBe(true);
+  });
+});
diff --git a/packages/lexical-react/src/__tests__/unit/useLexicalNodeSelection.test.tsx b/packages/lexical-react/src/__tests__/unit/useLexicalNodeSelection.test.tsx
new file mode 100644
index 00000000000..84381da15ba
--- /dev/null
+++ b/packages/lexical-react/src/__tests__/unit/useLexicalNodeSelection.test.tsx
@@ -0,0 +1,162 @@
+/**
+ * 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 {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {EditorRefPlugin} from '@lexical/react/LexicalEditorRefPlugin';
+import {
+  $createHorizontalRuleNode,
+  HorizontalRuleNode,
+} from '@lexical/react/LexicalHorizontalRuleNode';
+import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
+import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getNodeByKey,
+  $getRoot,
+  $getSelection,
+  $isNodeSelection,
+  $isRangeSelection,
+  $selectAll,
+  type LexicalEditor,
+  type NodeKey,
+} from 'lexical';
+import * as React from 'react';
+import {act, createRef} from 'react';
+import {createRoot, type Root} from 'react-dom/client';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+describe('useLexicalNodeSelection', () => {
+  let container: HTMLDivElement;
+  let reactRoot: Root;
+  let editor: LexicalEditor;
+  let editorRef: React.RefObject<LexicalEditor>;
+  let setSelected: (selected: boolean) => void;
+  let ruleKey: NodeKey;
+
+  function Probe({nodeKey}: {nodeKey: NodeKey}) {
+    [, setSelected] = useLexicalNodeSelection(nodeKey);
+    return null;
+  }
+
+  function Seed({onSeeded}: {onSeeded: (key: NodeKey) => void}) {
+    const [contextEditor] = useLexicalComposerContext();
+    React.useEffect(() => {
+      let key = '';
+      contextEditor.update(
+        () => {
+          const rule = $createHorizontalRuleNode();
+          $getRoot()
+            .clear()
+            .append(
+              $createParagraphNode().append($createTextNode('hello')),
+              rule,
+            );
+          key = rule.getKey();
+        },
+        {discrete: true},
+      );
+      onSeeded(key);
+    }, [contextEditor, onSeeded]);
+    return null;
+  }
+
+  function Harness() {
+    const [key, setKey] = React.useState<NodeKey | null>(null);
+    const onSeeded = React.useCallback((seeded: NodeKey) => {
+      ruleKey = seeded;
+      setKey(seeded);
+    }, []);
+    return (
+      <LexicalComposer
+        initialConfig={{
+          namespace: 'node-selection',
+          nodes: [HorizontalRuleNode],
+          onError: (error: Error) => {
+            throw error;
+          },
+        }}>
+        <EditorRefPlugin editorRef={editorRef} />
+        <RichTextPlugin
+          contentEditable={<ContentEditable />}
+          ErrorBoundary={({children}) => <>{children}</>}
+        />
+        <Seed onSeeded={onSeeded} />
+        {key !== null && <Probe nodeKey={key} />}
+      </LexicalComposer>
+    );
+  }
+
+  beforeEach(async () => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    reactRoot = createRoot(container);
+    editorRef = createRef<LexicalEditor>() as React.RefObject<LexicalEditor>;
+
+    await act(async () => {
+      reactRoot.render(<Harness />);
+    });
+    editor = editorRef.current;
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      reactRoot.unmount();
+    });
+    container.remove();
+  });
+
+  it('keeps a range selection when asked to deselect', async () => {
+    editor.update(() => void $selectAll(), {discrete: true});
+    expect(editor.read(() => $isRangeSelection($getSelection()))).toBe(true);
+
+    // LexicalNode.isSelected() is true for a RangeSelection that covers the
+    // node, so the `setSelected(!isSelected)` toggle that this package's own
+    // HorizontalRuleComponent and BlockWithAlignableContents use arrives here
+    // with `false` while a range selection is active.
+    await act(async () => {
+      setSelected(false);
+    });
+
+    expect(editor.read(() => $isRangeSelection($getSelection()))).toBe(true);
+  });
+
+  it('still creates a node selection when asked to select', async () => {
+    editor.update(() => void $selectAll(), {discrete: true});
+
+    await act(async () => {
+      setSelected(true);
+    });
+
+    expect(
+      editor.read(() => {
+        const selection = $getSelection();
+        return $isNodeSelection(selection) && selection.has(ruleKey);
+      }),
+    ).toBe(true);
+  });
+
+  it('still removes the node from an existing node selection', async () => {
+    await act(async () => {
+      setSelected(true);
+    });
+    expect(
+      editor.read(() => {
+        const selection = $getSelection();
+        return $isNodeSelection(selection) && selection.has(ruleKey);
+      }),
+    ).toBe(true);
+
+    await act(async () => {
+      setSelected(false);
+    });
+    expect(editor.read(() => $getNodeByKey(ruleKey)!.isSelected())).toBe(false);
+  });
+});
diff --git a/packages/lexical-react/src/shared/LexicalMenu.tsx b/packages/lexical-react/src/shared/LexicalMenu.tsx
index 0559926a4ff..eb9c7f73135 100644
--- a/packages/lexical-react/src/shared/LexicalMenu.tsx
+++ b/packages/lexical-react/src/shared/LexicalMenu.tsx
@@ -18,6 +18,7 @@ import {
   getDOMShadowRoots,
   getRootOwnerDocument,
   isDOMShadowRoot,
+  isHTMLElement,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_UP_COMMAND,
   KEY_ENTER_COMMAND,
@@ -470,36 +471,37 @@ export function LexicalMenu<TOption extends MenuOption>({
         KEY_ARROW_DOWN_COMMAND,
         payload => {
           const event = payload;
-          if (options !== null && options.length) {
-            const newSelectedIndex =
-              selectedIndex === null
-                ? 0
-                : selectedIndex !== options.length - 1
-                  ? selectedIndex + 1
-                  : 0;
-
-            updateSelectedIndex(newSelectedIndex);
-
-            const option = options[newSelectedIndex];
-            if (!option) {
-              updateSelectedIndex(-1);
-              event.preventDefault();
-              event.stopImmediatePropagation();
-              return true;
-            }
-
-            if (option.ref && option.ref.current) {
-              editor.dispatchCommand(
-                SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND,
-                {
-                  index: newSelectedIndex,
-                  option,
-                },
-              );
-            }
+          if (options === null || !options.length) {
+            // There is nothing to move through, and an empty option list
+            // renders no menu, so the key has to keep propagating to whatever
+            // would otherwise move the caret.
+            return false;
+          }
+          const newSelectedIndex =
+            selectedIndex === null
+              ? 0
+              : selectedIndex !== options.length - 1
+                ? selectedIndex + 1
+                : 0;
+
+          updateSelectedIndex(newSelectedIndex);
+
+          const option = options[newSelectedIndex];
+          if (!option) {
+            updateSelectedIndex(-1);
             event.preventDefault();
             event.stopImmediatePropagation();
+            return true;
+          }
+
+          if (option.ref && option.ref.current) {
+            editor.dispatchCommand(SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND, {
+              index: newSelectedIndex,
+              option,
+            });
           }
+          event.preventDefault();
+          event.stopImmediatePropagation();
           return true;
         },
         commandPriority,
@@ -508,30 +510,32 @@ export function LexicalMenu<TOption extends MenuOption>({
         KEY_ARROW_UP_COMMAND,
         payload => {
           const event = payload;
-          if (options !== null && options.length) {
-            const newSelectedIndex =
-              selectedIndex === null
-                ? options.length - 1
-                : selectedIndex !== 0
-                  ? selectedIndex - 1
-                  : options.length - 1;
-
-            updateSelectedIndex(newSelectedIndex);
-
-            const option = options[newSelectedIndex];
-            if (!option) {
-              updateSelectedIndex(-1);
-              event.preventDefault();
-              event.stopImmediatePropagation();
-              return true;
-            }
-
-            if (option.ref && option.ref.current) {
-              scrollIntoViewIfNeeded(option.ref.current);
-            }
+          if (options === null || !options.length) {
+            // See KEY_ARROW_DOWN_COMMAND above.
+            return false;
+          }
+          const newSelectedIndex =
+            selectedIndex === null
+              ? options.length - 1
+              : selectedIndex !== 0
+                ? selectedIndex - 1
+                : options.length - 1;
+
+          updateSelectedIndex(newSelectedIndex);
+
+          const option = options[newSelectedIndex];
+          if (!option) {
+            updateSelectedIndex(-1);
             event.preventDefault();
             event.stopImmediatePropagation();
+            return true;
+          }
+
+          if (option.ref && option.ref.current) {
+            scrollIntoViewIfNeeded(option.ref.current);
           }
+          event.preventDefault();
+          event.stopImmediatePropagation();
           return true;
         },
         commandPriority,
@@ -631,6 +635,43 @@ function setContainerDivAttributes(
   containerDiv.style.position = 'absolute';
 }
 
+/**
+ * The anchor is absolutely positioned, so its `top`/`left` are resolved
+ * against its containing block. That is the initial containing block — i.e.
+ * document coordinates, which is why the page scroll offsets are added — only
+ * while the anchor's ancestors are all statically positioned, as is the case
+ * for the default `document.body` parent. A `parent` passed to
+ * {@link useMenuAnchorRef} is usually positioned so that it can contain the
+ * menu, and document coordinates then place the menu at the parent's own
+ * offset instead of at the caret.
+ *
+ * @returns The viewport coordinates of the origin that the anchor's `top`/
+ *   `left` are measured from, or `null` when that origin is the initial
+ *   containing block and document coordinates apply.
+ */
+function getContainingBlockOrigin(
+  containerDiv: HTMLElement,
+): null | {left: number; top: number} {
+  const {offsetParent} = containerDiv;
+  if (!isHTMLElement(offsetParent)) {
+    return null;
+  }
+  const view = offsetParent.ownerDocument.defaultView;
+  // `offsetParent` falls back to the body when nothing above the anchor is
+  // positioned, in which case the containing block is still the initial one.
+  if (
+    view === null ||
+    view.getComputedStyle(offsetParent).position === 'static'
+  ) {
+    return null;
+  }
+  const rect = offsetParent.getBoundingClientRect();
+  return {
+    left: rect.left + offsetParent.clientLeft - offsetParent.scrollLeft,
+    top: rect.top + offsetParent.clientTop - offsetParent.scrollTop,
+  };
+}
+
 function resolveMenuParent(
   editor: LexicalEditor,
 ): HTMLElement | ShadowRoot | undefined {
@@ -675,15 +716,22 @@ export function useMenuAnchorRef(
     if (rootElement !== null && resolution !== null) {
       const {left, top, width, height} = resolution.getRect();
       const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor
-      containerDiv.style.top = `${
-        top +
-        anchorHeight +
-        3 +
-        // eslint-disable-next-line no-restricted-syntax
-        (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)
-      }px`;
-      // eslint-disable-next-line no-restricted-syntax
-      containerDiv.style.left = `${left + window.pageXOffset}px`;
+      // `left`/`top` from getRect() are viewport coordinates; translate them
+      // into the coordinate space the anchor is actually positioned in.
+      const origin = getContainingBlockOrigin(containerDiv);
+      const toAnchorLeft = (viewportLeft: number) =>
+        origin !== null
+          ? viewportLeft - origin.left
+          : // eslint-disable-next-line no-restricted-syntax
+            viewportLeft + window.pageXOffset;
+      const toAnchorTop = (viewportTop: number) =>
+        origin !== null
+          ? viewportTop - origin.top
+          : viewportTop +
+            // eslint-disable-next-line no-restricted-syntax
+            (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0);
+      containerDiv.style.top = `${toAnchorTop(top + anchorHeight + 3)}px`;
+      containerDiv.style.left = `${toAnchorLeft(left)}px`;
       containerDiv.style.height = `${height}px`;
       containerDiv.style.width = `${width}px`;
       if (menuEle !== null) {
@@ -695,10 +743,9 @@ export function useMenuAnchorRef(
         const rootElementRect = rootElement.getBoundingClientRect();
 
         if (left + menuWidth > rootElementRect.right) {
-          containerDiv.style.left = `${
-            // eslint-disable-next-line no-restricted-syntax
-            rootElementRect.right - menuWidth + window.pageXOffset
-          }px`;
+          containerDiv.style.left = `${toAnchorLeft(
+            rootElementRect.right - menuWidth,
+          )}px`;
         }
         if (
           // eslint-disable-next-line no-restricted-syntax
@@ -706,13 +753,7 @@ export function useMenuAnchorRef(
             top + menuHeight > rootElementRect.bottom) &&
           top - rootElementRect.top > menuHeight + height
         ) {
-          containerDiv.style.top = `${
-            top -
-            menuHeight -
-            height +
-            // eslint-disable-next-line no-restricted-syntax
-            (shouldIncludePageYOffset__EXPERIMENTAL ? window.pageYOffset : 0)
-          }px`;
+          containerDiv.style.top = `${toAnchorTop(top - menuHeight - height)}px`;
         }
       }
 
diff --git a/packages/lexical-react/src/shared/useCharacterLimit.ts b/packages/lexical-react/src/shared/useCharacterLimit.ts
index 108c5d9aa0f..84d0c0b11b4 100644
--- a/packages/lexical-react/src/shared/useCharacterLimit.ts
+++ b/packages/lexical-react/src/shared/useCharacterLimit.ts
@@ -61,7 +61,38 @@ export function useCharacterLimit(
 
   useEffect(() => {
     let text = editor.read('latest', $rootTextContent);
-    let lastComputedTextLength = 0;
+    let lastComputedTextLength: null | number = null;
+
+    function $updateCharacterLimit(): void {
+      const textLength = strlen(text);
+      const textLengthAboveThreshold =
+        textLength > maxCharacters ||
+        (lastComputedTextLength !== null &&
+          lastComputedTextLength > maxCharacters);
+      const diff = maxCharacters - textLength;
+
+      remainingCharacters(diff);
+
+      if (lastComputedTextLength === null || textLengthAboveThreshold) {
+        const offset = findOffset(text, maxCharacters, strlen);
+        editor.update(
+          () => {
+            $wrapOverflowedNodes(offset);
+          },
+          {
+            tag: HISTORY_MERGE_TAG,
+          },
+        );
+      }
+
+      lastComputedTextLength = textLength;
+    }
+
+    // Derive the count from the content that is already there before
+    // subscribing. registerUpdateListener does not fire on registration, so
+    // otherwise both the reported count and the OverflowNode wrapping stay at
+    // their initial values until the next edit.
+    $updateCharacterLimit();
 
     return mergeRegister(
       editor.registerTextContentListener((currentText: string) => {
@@ -76,28 +107,7 @@ export function useCharacterLimit(
           return;
         }
 
-        const textLength = strlen(text);
-        const textLengthAboveThreshold =
-          textLength > maxCharacters ||
-          (lastComputedTextLength !== null &&
-            lastComputedTextLength > maxCharacters);
-        const diff = maxCharacters - textLength;
-
-        remainingCharacters(diff);
-
-        if (lastComputedTextLength === null || textLengthAboveThreshold) {
-          const offset = findOffset(text, maxCharacters, strlen);
-          editor.update(
-            () => {
-              $wrapOverflowedNodes(offset);
-            },
-            {
-              tag: HISTORY_MERGE_TAG,
-            },
-          );
-        }
-
-        lastComputedTextLength = textLength;
+        $updateCharacterLimit();
       }),
       editor.registerCommand(
         DELETE_CHARACTER_COMMAND,
diff --git a/packages/lexical-react/src/useLexicalIsTextContentEmpty.ts b/packages/lexical-react/src/useLexicalIsTextContentEmpty.ts
index c9196965783..ee44569dd91 100644
--- a/packages/lexical-react/src/useLexicalIsTextContentEmpty.ts
+++ b/packages/lexical-react/src/useLexicalIsTextContentEmpty.ts
@@ -24,7 +24,7 @@ export function useLexicalIsTextContentEmpty(
   editor: LexicalEditor,
   trim?: boolean,
 ): boolean {
-  const [isEmpty, setIsEmpty] = useState(
+  const [isEmpty, setIsEmpty] = useState(() =>
     editor.read(
       'latest',
       $isRootTextContentEmptyCurry(editor.isComposing(), trim),
@@ -32,6 +32,18 @@ export function useLexicalIsTextContentEmpty(
   );
 
   useLayoutEffect(() => {
+    function resetIsEmpty() {
+      setIsEmpty(
+        editor.read(
+          'latest',
+          $isRootTextContentEmptyCurry(editor.isComposing(), trim),
+        ),
+      );
+    }
+    // The state was seeded on the first render only, so re-derive it whenever
+    // the inputs the effect depends on change -- otherwise a new editor or a
+    // new trim keeps reporting the previous answer until the next update.
+    resetIsEmpty();
     return editor.registerUpdateListener(({editorState}) => {
       const isComposing = editor.isComposing();
       const currentIsEmpty = editorState.read(
diff --git a/packages/lexical-react/src/useLexicalNodeSelection.ts b/packages/lexical-react/src/useLexicalNodeSelection.ts
index c237989ddf5..0f09eb7f133 100644
--- a/packages/lexical-react/src/useLexicalNodeSelection.ts
+++ b/packages/lexical-react/src/useLexicalNodeSelection.ts
@@ -84,6 +84,13 @@ export function useLexicalNodeSelection(
         let selection = $getSelection();
 
         if (!$isNodeSelection(selection)) {
+          if (!selected) {
+            // There is no NodeSelection to remove the node from. Creating one
+            // would replace whatever selection the user has -- a RangeSelection
+            // covering this node, typically, since isSelected() is true for
+            // those too -- with an empty NodeSelection, discarding their caret.
+            return;
+          }
           selection = $createNodeSelection();
           $setSelection(selection);
         }