[lexical][lexical-clipboard][lexical-playground][lexical-react][lexical-selection][lexical-table][lexical-utils] Fix using getComposedRanges for all browsers

Author: aleksandr-konovalov

packages/lexical-clipboard/src/clipboard.ts

@@ -26,7 +26,7 @@ import {
   BaseSelection,
   COMMAND_PRIORITY_CRITICAL,
   COPY_COMMAND,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   isSelectionWithinEditor,
   LexicalEditor,
   LexicalNode,
@@ -467,9 +467,8 @@ export async function copyToClipboard(
   }
 
   const rootElement = editor.getRootElement();
-  const editorWindow = editor._window || window;
   const windowDocument = window.document;
-  const domSelection = getDOMSelection(editorWindow, rootElement);
+  const domSelection = getDOMSelectionForEditor(editor);
   if (rootElement === null || domSelection === null) {
     return false;
   }
@@ -518,10 +517,7 @@ function $copyToClipboardEvent(
   data?: LexicalClipboardData,
 ): boolean {
   if (data === undefined) {
-    const domSelection = getDOMSelection(
-      editor._window,
-      editor.getRootElement(),
-    );
+    const domSelection = getDOMSelectionForEditor(editor);
     if (!domSelection) {
       return false;
     }

packages/lexical-playground/src/Settings.tsx

@@ -141,10 +141,7 @@ export default function Settings(): JSX.Element {
             text="Autocomplete"
           />
           <Switch
-            onClick={() => {
-              setOption('isShadowDOM', !isShadowDOM);
-              setTimeout(() => window.location.reload(), 500);
-            }}
+            onClick={() => setOption('isShadowDOM', !isShadowDOM)}
             checked={isShadowDOM}
             text="Shadow DOM"
           />

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

@@ -50,7 +50,7 @@ import {
   COMMAND_PRIORITY_EDITOR,
   COMMAND_PRIORITY_NORMAL,
   createCommand,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   KEY_ESCAPE_COMMAND,
 } from 'lexical';
 import {
@@ -933,10 +933,7 @@ export default function CommentPlugin({
       editor.registerCommand(
         INSERT_INLINE_COMMAND,
         () => {
-          const domSelection = getDOMSelection(
-            editor._window,
-            editor.getRootElement(),
-          );
+          const domSelection = getDOMSelectionForEditor(editor);
           if (domSelection !== null) {
             domSelection.removeAllRanges();
           }

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

@@ -27,7 +27,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   KEY_ESCAPE_COMMAND,
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
@@ -104,10 +104,7 @@ function FloatingLinkEditor({
     }
 
     const editorElem = editorRef.current;
-    const nativeSelection = getDOMSelection(
-      editor._window,
-      editor.getRootElement(),
-    );
+    const nativeSelection = getDOMSelectionForEditor(editor);
     const activeElement = document.activeElement;
 
     if (editorElem === null) {

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

@@ -21,7 +21,7 @@ import {
   $isTextNode,
   COMMAND_PRIORITY_LOW,
   FORMAT_TEXT_COMMAND,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -122,10 +122,7 @@ function TextFormatFloatingToolbar({
     const selection = $getSelection();
 
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
-    const nativeSelection = getDOMSelection(
-      editor._window,
-      editor.getRootElement(),
-    );
+    const nativeSelection = getDOMSelectionForEditor(editor);
 
     if (popupCharStylesEditorElem === null) {
       return;
@@ -345,10 +342,7 @@ function useFloatingTextFormatToolbar(
         return;
       }
       const selection = $getSelection();
-      const nativeSelection = getDOMSelection(
-        editor._window,
-        editor.getRootElement(),
-      );
+      const nativeSelection = getDOMSelectionForEditor(editor);
       const rootElement = editor.getRootElement();
 
       if (

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

@@ -41,7 +41,7 @@ import {
   $isTextNode,
   $setSelection,
   COMMAND_PRIORITY_CRITICAL,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   isDOMNode,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -729,10 +729,7 @@ function TableCellActionMenuContainer({
   const $moveMenu = useCallback(() => {
     const menu = menuButtonRef.current;
     const selection = $getSelection();
-    const nativeSelection = getDOMSelection(
-      editor._window,
-      editor.getRootElement(),
-    );
+    const nativeSelection = getDOMSelectionForEditor(editor);
     const activeElement = document.activeElement;
     function disable() {
       if (menu) {

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

@@ -15,7 +15,7 @@ import {
   $createParagraphNode,
   $createTextNode,
   $getRoot,
-  getDOMSelection,
+  getDOMSelectionForEditor,
 } from 'lexical';
 import * as React from 'react';
 import {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
@@ -172,10 +172,7 @@ function useTestRecorder(
 
   const generateTestContent = useCallback(() => {
     const rootElement = editor.getRootElement();
-    const browserSelection = getDOMSelection(
-      editor._window,
-      editor.getRootElement(),
-    );
+    const browserSelection = getDOMSelectionForEditor(editor);
 
     if (
       rootElement == null ||
@@ -330,10 +327,7 @@ ${steps.map(formatStep).join(`\n`)}
             dirtyElements.size === 0 &&
             !skipNextSelectionChange
           ) {
-            const browserSelection = getDOMSelection(
-              editor._window,
-              editor.getRootElement(),
-            );
+            const browserSelection = getDOMSelectionForEditor(editor);
             if (
               browserSelection &&
               (browserSelection.anchorNode == null ||
@@ -390,11 +384,7 @@ ${steps.map(formatStep).join(`\n`)}
     if (!isRecording) {
       return;
     }
-    const currentEditor = getCurrentEditor();
-    const browserSelection = getDOMSelection(
-      currentEditor._window,
-      currentEditor.getRootElement(),
-    );
+    const browserSelection = getDOMSelectionForEditor(getCurrentEditor());
     if (
       browserSelection === null ||
       browserSelection.anchorNode == null ||

packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx

@@ -22,7 +22,7 @@ import {
   COMMAND_PRIORITY_LOW,
   CommandListenerPriority,
   createCommand,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   LexicalCommand,
   LexicalEditor,
   RangeSelection,
@@ -52,10 +52,9 @@ function getTextUpToAnchor(selection: RangeSelection): string | null {
 function tryToPositionRange(
   leadOffset: number,
   range: Range,
-  editorWindow: Window,
-  rootElement?: HTMLElement | null,
+  editor: LexicalEditor,
 ): boolean {
-  const domSelection = getDOMSelection(editorWindow, rootElement);
+  const domSelection = getDOMSelectionForEditor(editor);
   if (domSelection === null || !domSelection.isCollapsed) {
     return false;
   }
@@ -289,8 +288,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
           const isRangePositioned = tryToPositionRange(
             match.leadOffset,
             range,
-            editorWindow,
-            editor.getRootElement(),
+            editor,
           );
           if (isRangePositioned !== null) {
             startTransition(() =>

packages/lexical-selection/src/utils.ts

@@ -7,7 +7,12 @@
  */
 import type {ElementNode, LexicalEditor, LexicalNode} from 'lexical';
 
-import {$getEditor, $isRootNode, $isTextNode} from 'lexical';
+import {
+  $getEditor,
+  $isRootNode,
+  $isTextNode,
+  getDocumentFromElement,
+} from 'lexical';
 
 import {CSS_TO_STYLES} from './constants';
 
@@ -54,7 +59,8 @@ export function createDOMRange(
   const anchorKey = anchorNode.getKey();
   const focusKey = focusNode.getKey();
   const rootElement = editor.getRootElement();
-  const doc = rootElement ? rootElement.ownerDocument || document : document;
+  const doc = getDocumentFromElement(rootElement);
+
   const range = doc.createRange();
   let anchorDOM: Node | Text | null = editor.getElementByKey(anchorKey);
   let focusDOM: Node | Text | null = editor.getElementByKey(focusKey);

packages/lexical-table/src/LexicalTableObserver.ts

@@ -23,7 +23,7 @@ import {
   $isParagraphNode,
   $isRootNode,
   $setSelection,
-  getDOMSelection,
+  getDOMSelectionForEditor,
   INSERT_PARAGRAPH_COMMAND,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
@@ -320,10 +320,7 @@ export class TableObserver {
   /** @internal */
   updateDOMSelection() {
     if (this.anchorCell !== null && this.focusCell !== null) {
-      const domSelection = getDOMSelection(
-        this.editor._window,
-        this.editor.getRootElement(),
-      );
+      const domSelection = getDOMSelectionForEditor(this.editor);
       // We are not using a native selection for tables, and if we
       // set one then the reconciler will undo it.
       // TODO - it would make sense to have one so that native