diff --git a/packages/lexical-devtools/tsconfig.json b/packages/lexical-devtools/tsconfig.json index a6fd399e833..74c92e8040d 100644 --- a/packages/lexical-devtools/tsconfig.json +++ b/packages/lexical-devtools/tsconfig.json @@ -165,6 +165,7 @@ "shared/invariant": ["../shared/src/invariant.ts"], "shared/normalizeClassNames": ["../shared/src/normalizeClassNames.ts"], "shared/react-test-utils": ["../shared/src/react-test-utils.ts"], + "shared/reactPatches": ["../shared/src/reactPatches.ts"], "shared/simpleDiffWithCursor": ["../shared/src/simpleDiffWithCursor.ts"], "shared/useLayoutEffect": ["../shared/src/useLayoutEffect.ts"], "shared/warnOnlyOnce": ["../shared/src/warnOnlyOnce.ts"] diff --git a/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx b/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx index 9b52a3791ad..3589ff55f62 100644 --- a/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx +++ b/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx @@ -18,17 +18,10 @@ import { } from 'lexical'; import {useCallback, useEffect, useState} from 'react'; import * as React from 'react'; +import {startTransition} from 'shared/reactPatches'; import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu'; -function startTransition(callback: () => void) { - if (React.startTransition) { - React.startTransition(callback); - } else { - callback(); - } -} - export type NodeMenuPluginProps = { onSelectOption: ( option: TOption, diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx index af59b530f59..d6bbd6014d4 100644 --- a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx +++ b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx @@ -28,6 +28,7 @@ import { } from 'lexical'; import {useCallback, useEffect, useState} from 'react'; import * as React from 'react'; +import {startTransition} from 'shared/reactPatches'; import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu'; @@ -105,14 +106,6 @@ function isSelectionOnEntityBoundary( }); } -function startTransition(callback: () => void) { - if (React.startTransition) { - React.startTransition(callback); - } else { - callback(); - } -} - // Got from https://stackoverflow.com/a/42543908/2013580 export function getScrollParent( element: HTMLElement, diff --git a/packages/shared/src/reactPatches.ts b/packages/shared/src/reactPatches.ts new file mode 100644 index 00000000000..9685cd89e95 --- /dev/null +++ b/packages/shared/src/reactPatches.ts @@ -0,0 +1,22 @@ +/** + * 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'; + +// Webpack + React 17 fails to compile on the usage of `React.startTransition` or +// `React["startTransition"]` even if it's behind a feature detection of +// `"startTransition" in React`. Moving this to a constant avoids the issue :/ +const START_TRANSITION = 'startTransition'; + +export function startTransition(callback: () => void) { + if (START_TRANSITION in React) { + React[START_TRANSITION](callback); + } else { + callback(); + } +} diff --git a/tsconfig.build.json b/tsconfig.build.json index febc18a834a..227dca5252a 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -168,6 +168,7 @@ "./packages/shared/src/normalizeClassNames.ts" ], "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"], + "shared/reactPatches": ["./packages/shared/src/reactPatches.ts"], "shared/simpleDiffWithCursor": [ "./packages/shared/src/simpleDiffWithCursor.ts" ], diff --git a/tsconfig.json b/tsconfig.json index a090e0449b2..50f67a71a8c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -176,6 +176,7 @@ "./packages/shared/src/normalizeClassNames.ts" ], "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"], + "shared/reactPatches": ["./packages/shared/src/reactPatches.ts"], "shared/simpleDiffWithCursor": [ "./packages/shared/src/simpleDiffWithCursor.ts" ],