Fix iframe selection issues (facebook#3573)

.flowconfig

@@ -105,7 +105,6 @@ module.name_mapper='^@lexical/utils/LexicalUtils' -> '<PROJECT_ROOT>/packages/le
 
 module.name_mapper='^@lexical/yjs$' -> '<PROJECT_ROOT>/packages/lexical-yjs/flow/LexicalYjs.js.flow'
 
-module.name_mapper='^shared/getDOMSelection' -> '<PROJECT_ROOT>/packages/shared/src/getDOMSelection.js'
 module.name_mapper='^shared/simpleDiffWithCursor' -> '<PROJECT_ROOT>/packages/shared/src/simpleDiffWithCursor.js'
 module.name_mapper='^shared/invariant' -> '<PROJECT_ROOT>/packages/shared/src/invariant.js'
 module.name_mapper='^shared/warnOnlyOnce' -> '<PROJECT_ROOT>/packages/shared/src/warnOnlyOnce.js'

jest.config.js

@@ -93,8 +93,6 @@ module.exports = {
         '^shared/caretFromPoint$':
           '<rootDir>/packages/shared/src/caretFromPoint.ts',
         '^shared/environment$': '<rootDir>/packages/shared/src/environment.ts',
-        '^shared/getDOMSelection$':
-          '<rootDir>/packages/shared/src/getDOMSelection.ts',
         '^shared/invariant$': '<rootDir>/packages/shared/src/invariant.ts',
         '^shared/simpleDiffWithCursor$':
           '<rootDir>/packages/shared/src/simpleDiffWithCursor.ts',

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

@@ -27,7 +27,7 @@ import {
 } from 'lexical';
 import {useEffect, useRef, useState} from 'react';
 import * as React from 'react';
-import getSelection from 'shared/getDOMSelection';
+import {CAN_USE_DOM} from 'shared/canUseDOM';
 
 import landscapeImage from '../../images/landscape.jpg';
 import yellowFlowerImage from '../../images/yellow-flower.jpg';
@@ -44,6 +44,9 @@ import TextInput from '../../ui/TextInput';
 
 export type InsertImagePayload = Readonly<ImagePayload>;
 
+const getDOMSelection = (): Selection | null =>
+  CAN_USE_DOM ? window.getSelection() : null;
+
 export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
   createCommand('INSERT_IMAGE_COMMAND');
 
@@ -367,7 +370,7 @@ function canDropImage(event: DragEvent): boolean {
 
 function getDragSelection(event: DragEvent): Range | null | undefined {
   let range;
-  const domSelection = getSelection();
+  const domSelection = getDOMSelection();
   if (document.caretRangeFromPoint) {
     range = document.caretRangeFromPoint(event.clientX, event.clientY);
   } else if (event.rangeParent && domSelection !== null) {

packages/lexical-table/src/LexicalTableSelection.ts

@@ -28,7 +28,6 @@ import {
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
 import {CAN_USE_DOM} from 'shared/canUseDOM';
-import getDOMSelection from 'shared/getDOMSelection';
 import invariant from 'shared/invariant';
 
 import {$isTableCellNode} from './LexicalTableCellNode';
@@ -53,6 +52,9 @@ export type Grid = {
   rows: number;
 };
 
+const getDOMSelection = (): Selection | null =>
+  CAN_USE_DOM ? window.getSelection() : null;
+
 if (CAN_USE_DOM) {
   const disableNativeSelectionUi = document.createElement('style');
   disableNativeSelectionUi.innerHTML = `

packages/lexical/src/LexicalEditor.ts

@@ -9,7 +9,6 @@
 import type {EditorState, SerializedEditorState} from './LexicalEditorState';
 import type {DOMConversion, NodeKey} from './LexicalNode';
 
-import getDOMSelection from 'shared/getDOMSelection';
 import invariant from 'shared/invariant';
 
 import {$getRoot, $getSelection, TextNode} from '.';
@@ -30,6 +29,7 @@ import {
   dispatchCommand,
   getCachedClassNameArray,
   getDefaultView,
+  getDOMSelection,
   markAllNodesAsDirty,
 } from './LexicalUtils';
 import {DecoratorNode} from './nodes/LexicalDecoratorNode';

packages/lexical/src/LexicalEvents.ts

@@ -17,7 +17,6 @@ import {
   IS_IOS,
   IS_SAFARI,
 } from 'shared/environment';
-import getDOMSelection from 'shared/getDOMSelection';
 
 import {
   $getPreviousSelection,
@@ -85,6 +84,7 @@ import {
   dispatchCommand,
   doesContainGrapheme,
   getAnchorTextFromDOM,
+  getDOMSelection,
   getDOMTextNode,
   getEditorsToPropagate,
   getNearestEditorFromDOMNode,

packages/lexical/src/LexicalMutations.ts

@@ -15,7 +15,6 @@ import type {
 } from './LexicalSelection';
 
 import {IS_FIREFOX} from 'shared/environment';
-import getDOMSelection from 'shared/getDOMSelection';
 
 import {
   $getSelection,
@@ -30,6 +29,7 @@ import {updateEditor} from './LexicalUpdates';
 import {
   $getNearestNodeFromDOMNode,
   $updateTextNodeFromDOMContent,
+  getDOMSelection,
   getNodeFromDOMNode,
   getWindow,
   internalGetRoot,

packages/lexical/src/LexicalSelection.ts

@@ -13,7 +13,6 @@ import type {ElementNode} from './nodes/LexicalElementNode';
 import type {TextFormatType} from './nodes/LexicalTextNode';
 
 import {IS_CHROME} from 'shared/environment';
-import getDOMSelection from 'shared/getDOMSelection';
 import invariant from 'shared/invariant';
 
 import {
@@ -58,6 +57,7 @@ import {
   $isTokenOrSegmented,
   $setCompositionKey,
   doesContainGrapheme,
+  getDOMSelection,
   getDOMTextNode,
   getElementByKeyOrThrow,
   getNodeFromDOM,

packages/lexical/src/LexicalUpdates.ts

@@ -19,7 +19,6 @@ import type {
 import type {SerializedEditorState} from './LexicalEditorState';
 import type {LexicalNode, SerializedLexicalNode} from './LexicalNode';
 
-import getDOMSelection from 'shared/getDOMSelection';
 import invariant from 'shared/invariant';
 
 import {$isElementNode, $isTextNode} from '.';
@@ -47,6 +46,7 @@ import {
 } from './LexicalSelection';
 import {
   $getCompositionKey,
+  getDOMSelection,
   getEditorStateTextContent,
   getEditorsToPropagate,
   getRegisteredNodeOrThrow,
@@ -117,6 +117,10 @@ export function getActiveEditor(): LexicalEditor {
   return activeEditor;
 }
 
+export function internalGetActiveEditor(): LexicalEditor | null {
+  return activeEditor;
+}
+
 export function $applyTransforms(
   editor: LexicalEditor,
   node: LexicalNode,
@@ -963,7 +967,3 @@ export function updateEditor(
     beginUpdate(editor, updateFn, options);
   }
 }
-
-export function internalGetActiveEditor(): null | LexicalEditor {
-  return activeEditor;
-}

packages/lexical/src/LexicalUtils.ts

@@ -29,8 +29,8 @@ import type {
 import type {RootNode} from './nodes/LexicalRootNode';
 import type {TextFormatType, TextNode} from './nodes/LexicalTextNode';
 
+import {CAN_USE_DOM} from 'shared/canUseDOM';
 import {IS_APPLE, IS_IOS, IS_SAFARI} from 'shared/environment';
-import getDOMSelection from 'shared/getDOMSelection';
 import invariant from 'shared/invariant';
 
 import {
@@ -62,6 +62,7 @@ import {
   errorOnReadOnly,
   getActiveEditor,
   getActiveEditorState,
+  internalGetActiveEditor,
   isCurrentlyReadOnlyMode,
   triggerCommandListeners,
   updateEditor,
@@ -1446,3 +1447,12 @@ export function updateDOMBlockCursorElement(
     removeDOMBlockCursorElement(blockCursorElement, editor, rootElement);
   }
 }
+
+export function getDOMSelection(): null | Selection {
+  const editor = internalGetActiveEditor();
+  if (!CAN_USE_DOM) {
+    return null;
+  }
+  const win = (editor && editor._window) || window;
+  return win.getSelection();
+}

tsconfig.json

@@ -194,7 +194,6 @@
 
       "shared/canUseDOM": ["./packages/shared/src/canUseDOM.ts"],
       "shared/caretFromPoint": ["./packages/shared/src/caretFromPoint.ts"],
-      "shared/getDOMSelection": ["./packages/shared/src/getDOMSelection.ts"],
       "shared/simpleDiffWithCursor": [
         "packages/shared/src/simpleDiffWithCursor.ts"
       ],