use CAN_USE_DOM when accessing document object

facebook · Nov 5, 2024 · 9aeffa9 · 9aeffa9
1 parent 9df6c17
commit 9aeffa9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/packages/lexical-react/src/LexicalContextMenuPlugin.tsx b/packages/lexical-react/src/LexicalContextMenuPlugin.tsx
@@ -144,12 +144,14 @@ export function LexicalContextMenuPlugin<TOption extends MenuOption>({
     return () => document.removeEventListener('click', handleClick);
   }, [editor, handleClick]);
 
-  return resolution === null || editor === null ? null : (
+  return anchorElementRef.current === null ||
+    resolution === null ||
+    editor === null ? null : (
     <LexicalMenu
       close={closeNodeMenu}
       resolution={resolution}
       editor={editor}
-      anchorElementRef={anchorElementRef}
+      anchorElementRef={anchorElementRef as MutableRefObject<HTMLElement>}
       options={options}
       menuRenderFn={(anchorRef, itemProps) =>
         contextMenuRenderFn(anchorRef, itemProps, {

diff --git a/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx b/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx
@@ -110,12 +110,14 @@ export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
     }
   }, [editor, positionOrCloseMenu, nodeKey]);
 
-  return resolution === null || editor === null ? null : (
+  return anchorElementRef.current === null ||
+    resolution === null ||
+    editor === null ? null : (
     <LexicalMenu
       close={closeNodeMenu}
       resolution={resolution}
       editor={editor}
-      anchorElementRef={anchorElementRef}
+      anchorElementRef={anchorElementRef as React.MutableRefObject<HTMLElement>}
       options={options}
       menuRenderFn={menuRenderFn}
       onSelectOption={onSelectOption}

diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
@@ -28,7 +28,6 @@ import {
 } from 'lexical';
 import {useCallback, useEffect, useState} from 'react';
 import * as React from 'react';
-import {CAN_USE_DOM} from 'shared/canUseDOM';
 import {startTransition} from 'shared/reactPatches';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
@@ -241,13 +240,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
   useEffect(() => {
     const updateListener = () => {
       editor.getEditorState().read(() => {
-        const editorWindow = CAN_USE_DOM ? editor._window || window : null;
-
-        if (editorWindow === null) {
-          closeTypeahead();
-          return;
-        }
-
+        const editorWindow = editor._window || window;
         const range = editorWindow.document.createRange();
         const selection = $getSelection();
         const text = getQueryTextForSearch(editor);
@@ -302,12 +295,14 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
     openTypeahead,
   ]);
 
-  return resolution === null || editor === null ? null : (
+  return resolution === null ||
+    editor === null ||
+    anchorElementRef.current === null ? null : (
     <LexicalMenu
       close={closeTypeahead}
       resolution={resolution}
       editor={editor}
-      anchorElementRef={anchorElementRef}
+      anchorElementRef={anchorElementRef as React.MutableRefObject<HTMLElement>}
       options={options}
       menuRenderFn={menuRenderFn}
       shouldSplitNodeWithQuery={true}

diff --git a/packages/lexical-react/src/shared/LexicalMenu.ts b/packages/lexical-react/src/shared/LexicalMenu.ts
@@ -32,6 +32,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import {CAN_USE_DOM} from 'shared/canUseDOM';
 import useLayoutEffect from 'shared/useLayoutEffect';
 
 export type MenuTextMatch = {
@@ -481,12 +482,17 @@ export function useMenuAnchorRef(
   resolution: MenuResolution | null,
   setResolution: (r: MenuResolution | null) => void,
   className?: string,
-  parent: HTMLElement = document.body,
+  parent: HTMLElement | undefined = CAN_USE_DOM ? document.body : undefined,
   shouldIncludePageYOffset__EXPERIMENTAL: boolean = true,
-): MutableRefObject<HTMLElement> {
+): MutableRefObject<HTMLElement | null> {
   const [editor] = useLexicalComposerContext();
-  const anchorElementRef = useRef<HTMLElement>(document.createElement('div'));
+  const anchorElementRef = useRef<HTMLElement | null>(
+    CAN_USE_DOM ? document.createElement('div') : null,
+  );
   const positionMenu = useCallback(() => {
+    if (anchorElementRef.current === null) {
+      return;
+    }
     anchorElementRef.current.style.top = anchorElementRef.current.style.bottom;
     const rootElement = editor.getRootElement();
     const containerDiv = anchorElementRef.current;
@@ -531,7 +537,7 @@ export function useMenuAnchorRef(
         }
       }
 
-      if (!containerDiv.isConnected) {
+      if (!containerDiv.isConnected && parent !== undefined) {
         if (className != null) {
           containerDiv.className = className;
         }