chore: playwright support (#5262)

* working playwright

* chore: use zipped, local build of playwright instead of patching it

* chore: remove bloat

* chore: get playwright and lexical to work by fixing imports from cjs modules

.idea/runConfigurations/Playwright_test.xml

@@ -0,0 +1,15 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Playwright test" type="JavaScriptTestRunnerPlaywright">
+    <node-interpreter value="project" />
+    <playwright-package value="$PROJECT_DIR$/node_modules/playwright" />
+    <working-dir value="$PROJECT_DIR$" />
+    <envs />
+    <scope-kind value="TEST" />
+    <test-file value="$PROJECT_DIR$/test/_community/e2e.spec.ts" />
+    <test-names>
+      <test-name value="Admin Panel" />
+      <test-name value="example test" />
+    </test-names>
+    <method v="2" />
+  </configuration>
+</component>

.vscode/settings.json

@@ -40,25 +40,5 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  },
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#8cb5b6",
-    "activityBar.background": "#8cb5b6",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#9c639b",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#15202b99",
-    "sash.hoverBorder": "#8cb5b6",
-    "statusBar.background": "#6da1a2",
-    "statusBar.foreground": "#15202b",
-    "statusBarItem.hoverBackground": "#568586",
-    "statusBarItem.remoteBackground": "#6da1a2",
-    "statusBarItem.remoteForeground": "#15202b",
-    "titleBar.activeBackground": "#6da1a2",
-    "titleBar.activeForeground": "#15202b",
-    "titleBar.inactiveBackground": "#6da1a299",
-    "titleBar.inactiveForeground": "#15202b99"
-  },
-  "peacock.color": "#6da1a2"
+  }
 }

next.config.mjs

@@ -1,6 +1,7 @@
-import withPayload from './packages/next/src/withPayload.js'
 import bundleAnalyzer from '@next/bundle-analyzer'
 
+import withPayload from './packages/next/src/withPayload.js'
+
 const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 })
@@ -8,14 +9,6 @@ const withBundleAnalyzer = bundleAnalyzer({
 export default withBundleAnalyzer(
   withPayload({
     reactStrictMode: false,
-    webpack: (webpackConfig) => {
-      webpackConfig.resolve.extensionAlias = {
-        '.js': ['.ts', '.tsx', '.js', '.jsx'],
-        '.mjs': ['.mts', '.mjs'],
-        '.cjs': ['.cts', '.cjs'],
-      }
-      return webpackConfig
-    },
     async redirects() {
       return [
         {
@@ -25,5 +18,13 @@ export default withBundleAnalyzer(
         },
       ]
     },
+    webpack: (webpackConfig) => {
+      webpackConfig.resolve.extensionAlias = {
+        '.cjs': ['.cts', '.cjs'],
+        '.js': ['.ts', '.tsx', '.js', '.jsx'],
+        '.mjs': ['.mts', '.mjs'],
+      }
+      return webpackConfig
+    },
   }),
 )

next.config.mjs.disabled

@@ -0,0 +1,29 @@
+import withPayload from './packages/next/src/withPayload.js'
+import bundleAnalyzer from '@next/bundle-analyzer'
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+export default withBundleAnalyzer(
+  withPayload({
+    reactStrictMode: false,
+    webpack: (webpackConfig) => {
+      webpackConfig.resolve.extensionAlias = {
+        '.js': ['.ts', '.tsx', '.js', '.jsx'],
+        '.mjs': ['.mts', '.mjs'],
+        '.cjs': ['.cts', '.cjs'],
+      }
+      return webpackConfig
+    },
+    async redirects() {
+      return [
+        {
+          destination: '/admin',
+          permanent: true,
+          source: '/',
+        },
+      ]
+    },
+  }),
+)

package.json

@@ -122,6 +122,8 @@
     "nodemon": "3.0.3",
     "pino": "8.15.0",
     "pino-pretty": "10.2.0",
+    "playwright": "file:playwright-1.43.0-next.tgz",
+    "playwright-core": "file:playwright-core-1.43.0-next.tgz",
     "prettier": "^3.0.3",
     "prompts": "2.4.2",
     "qs": "6.11.2",
@@ -168,7 +170,9 @@
       "graphql": "^16.8.1",
       "react": "$react",
       "react-dom": "$react-dom",
-      "typescript": "$typescript"
+      "typescript": "$typescript",
+      "playwright": "file:playwright-1.43.0-next.tgz",
+      "playwright-core": "file:playwright-core-1.43.0-next.tgz"
     },
     "allowedDeprecatedVersions": {
       "uuid": "3.4.0",

packages/db-postgres/src/connect.ts

@@ -4,7 +4,7 @@ import type { Connect } from 'payload/database'
 import { eq, sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/node-postgres'
 import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
-import { Pool } from 'pg'
+import pg from 'pg'
 import prompts from 'prompts'
 
 import type { PostgresAdapter } from './types.js'
@@ -61,7 +61,7 @@ export const connect: Connect = async function connect(
   }
 
   try {
-    this.pool = new Pool(this.poolOptions)
+    this.pool = new pg.Pool(this.poolOptions)
     await connectWithReconnect({ adapter: this, payload: this.payload })
 
     const logger = this.logger || false

packages/db-postgres/src/utilities/parseError.ts

@@ -1,4 +1,5 @@
-import { DatabaseError } from 'pg'
+import pg from 'pg'
+const { DatabaseError } = pg
 
 /**
  * Format error message with hint if available

packages/richtext-lexical/src/cell/index.tsx

@@ -5,7 +5,8 @@ import { createHeadlessEditor } from '@lexical/headless'
 import { useTableCell } from '@payloadcms/ui/elements'
 import { useFieldPath } from '@payloadcms/ui/forms'
 import { useClientFunctions } from '@payloadcms/ui/providers'
-import { $getRoot } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getRoot } = lexicalImport
 import React, { useEffect, useState } from 'react'
 
 import type { FeatureProviderClient } from '../field/features/types.js'

packages/richtext-lexical/src/field/features/align/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { FORMAT_ELEMENT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { FORMAT_ELEMENT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/blockquote/feature.client.tsx

@@ -1,8 +1,13 @@
 'use client'
 
-import { $createQuoteNode, QuoteNode } from '@lexical/rich-text'
-import { $setBlocksType } from '@lexical/selection'
-import { $getSelection } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createQuoteNode, QuoteNode } = lexicalRichTextImport
+
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/blockquote/feature.server.ts

@@ -1,4 +1,5 @@
-import { QuoteNode, type SerializedQuoteNode } from '@lexical/rich-text'
+import lexicalRichTextImport, { type SerializedQuoteNode } from '@lexical/rich-text'
+const { QuoteNode } = lexicalRichTextImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 import type { FeatureProviderProviderServer } from '../types.js'

packages/richtext-lexical/src/field/features/blockquote/markdownTransformer.ts

@@ -1,7 +1,11 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'
-import { $createLineBreakNode } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createQuoteNode, $isQuoteNode, QuoteNode } = lexicalRichTextImport
+
+import lexicalImport from 'lexical'
+const { $createLineBreakNode } = lexicalImport
+
 export const MarkdownTransformer: ElementTransformer = {
   type: 'element',
   dependencies: [QuoteNode],

packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx

@@ -3,7 +3,8 @@ import type { ReducedBlock } from '@payloadcms/ui/types'
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
 import { RenderFields } from '@payloadcms/ui'
 import {
@@ -17,7 +18,8 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import isDeepEqual from 'deep-equal'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
 import React, { useCallback } from 'react'
 
 import type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'

packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx

@@ -1,14 +1,13 @@
 'use client'
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui'
-import {
-  $getNodeByKey,
-  COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
-  type LexicalEditor,
-  createCommand,
-} from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport
+
+import type { LexicalCommand, LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'
@@ -55,6 +54,8 @@ const insertBlock = ({
 }
 
 export const BlocksDrawerComponent: React.FC = () => {
+  const { useModal } = facelessUIImport
+
   const [editor] = useLexicalComposerContext()
   const { editorConfig, uuid } = useEditorConfigContext()
 

packages/richtext-lexical/src/field/features/blocks/nodes/BlocksNode.tsx

@@ -10,7 +10,8 @@ import type {
   Spread,
 } from 'lexical'
 
-import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
 import ObjectID from 'bson-objectid'
 import React from 'react'
 

packages/richtext-lexical/src/field/features/blocks/plugin/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 import type { InsertBlockPayload } from './index.js'
 

packages/richtext-lexical/src/field/features/blocks/plugin/index.tsx

@@ -1,13 +1,17 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-} from 'lexical'
+} = lexicalImport
+
 import React, { useEffect } from 'react'
 
 import type { BlockFields } from '../nodes/BlocksNode.js'

packages/richtext-lexical/src/field/features/debug/testrecorder/plugin/index.tsx

@@ -1,8 +1,10 @@
 'use client'
 import type { BaseSelection, LexicalEditor } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $createTextNode, $getRoot } = lexicalImport
 import * as React from 'react'
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 

packages/richtext-lexical/src/field/features/debug/treeview/plugin/index.tsx

@@ -1,6 +1,8 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { TreeView } from '@lexical/react/LexicalTreeView.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalTreeViewImport from '@lexical/react/LexicalTreeView.js'
+const { TreeView } = lexicalTreeViewImport
 import * as React from 'react'
 
 import './index.scss'

packages/richtext-lexical/src/field/features/format/bold/feature.client.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/inlinecode/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/italic/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/strikethrough/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/subscript/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/superscript/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/format/underline/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { $isRangeSelection, FORMAT_TEXT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/heading/feature.client.tsx

@@ -2,10 +2,14 @@
 
 import type { HeadingTagType } from '@lexical/rich-text'
 
-import { HeadingNode } from '@lexical/rich-text'
-import { $createHeadingNode } from '@lexical/rich-text'
-import { $setBlocksType } from '@lexical/selection'
-import { $getSelection } from 'lexical'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createHeadingNode, HeadingNode } = lexicalRichTextImport
+
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 import type { HeadingFeatureProps } from './feature.server.js'

packages/richtext-lexical/src/field/features/heading/feature.server.ts

@@ -1,6 +1,7 @@
-import type { HeadingTagType } from '@lexical/rich-text'
+import type { HeadingTagType, SerializedHeadingNode } from '@lexical/rich-text'
 
-import { HeadingNode, type SerializedHeadingNode } from '@lexical/rich-text'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { HeadingNode } = lexicalRichTextImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 import type { FeatureProviderProviderServer } from '../types.js'

packages/richtext-lexical/src/field/features/heading/markdownTransformer.ts

@@ -1,7 +1,8 @@
 import type { ElementTransformer } from '@lexical/markdown'
 import type { HeadingTagType } from '@lexical/rich-text'
 
-import { $createHeadingNode, $isHeadingNode, HeadingNode } from '@lexical/rich-text'
+import lexicalRichTextImport from '@lexical/rich-text'
+const { $createHeadingNode, $isHeadingNode, HeadingNode } = lexicalRichTextImport
 
 import { createBlockNode } from '../../lexical/utils/markdown/createBlockNode.js'
 

packages/richtext-lexical/src/field/features/indent/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from 'lexical'
+import lexicalImport from 'lexical'
+const { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/link/feature.client.tsx

@@ -1,7 +1,10 @@
 'use client'
 
-import { $findMatchingParent } from '@lexical/utils'
-import { $getSelection, $isRangeSelection } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { $findMatchingParent } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isRangeSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 import type { ExclusiveLinkCollectionsProps } from './feature.server.js'

packages/richtext-lexical/src/field/features/link/nodes/AutoLinkNode.ts

@@ -1,10 +1,7 @@
-import {
-  $applyNodeReplacement,
-  $isElementNode,
-  type ElementNode,
-  type LexicalNode,
-  type RangeSelection,
-} from 'lexical'
+import type { ElementNode, LexicalNode, RangeSelection } from 'lexical'
+
+import lexicalImport from 'lexical'
+const { $applyNodeReplacement, $isElementNode } = lexicalImport
 
 import type { LinkFields, SerializedAutoLinkNode } from './types.js'
 

packages/richtext-lexical/src/field/features/link/nodes/LinkNode.ts

@@ -1,21 +1,28 @@
 import type { BaseSelection } from 'lexical'
 
-import { addClassNamesToElement, isHTMLAnchorElement } from '@lexical/utils'
-import {
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement, isHTMLAnchorElement } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $applyNodeReplacement,
   $createTextNode,
   $getSelection,
   $isElementNode,
   $isRangeSelection,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type EditorConfig,
   ElementNode,
-  type LexicalCommand,
-  type LexicalNode,
-  type NodeKey,
-  type RangeSelection,
   createCommand,
+} = lexicalImport
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  EditorConfig,
+  ElementNode as ElementNodeType,
+  LexicalCommand,
+  LexicalNode,
+  NodeKey,
+  RangeSelection,
 } from 'lexical'
 
 import type { LinkPayload } from '../plugins/floatingLinkEditor/types.js'
@@ -143,7 +150,7 @@ export class LinkNode extends ElementNode {
     return this.getLatest().__fields
   }
 
-  insertNewAfter(selection: RangeSelection, restoreSelection = true): ElementNode | null {
+  insertNewAfter(selection: RangeSelection, restoreSelection = true): ElementNodeType | null {
     const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection)
     if ($isElementNode(element)) {
       const linkNode = $createLinkNode({ fields: this.__fields })
@@ -284,7 +291,7 @@ export function toggleLink(payload: LinkPayload): void {
       }
     }
 
-    let prevParent: ElementNode | LinkNode | null = null
+    let prevParent: ElementNodeType | LinkNode | null = null
     let linkNode: LinkNode | null = null
 
     nodes.forEach((node) => {

packages/richtext-lexical/src/field/features/link/plugins/autoLink/index.tsx

@@ -1,9 +1,12 @@
 'use client'
-import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $createTextNode,
   $getSelection,
   $isElementNode,
@@ -11,8 +14,12 @@ import {
   $isNodeSelection,
   $isRangeSelection,
   $isTextNode,
-  TextNode,
-} from 'lexical'
+  TextNode: TextNodeValue,
+} = lexicalImport
+
+import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
+
+import { type TextNode } from 'lexical'
 import { useEffect } from 'react'
 
 import type { LinkFields } from '../../nodes/types.js'
@@ -391,7 +398,7 @@ function useAutoLink(
     }
 
     return mergeRegister(
-      editor.registerNodeTransform(TextNode, (textNode: TextNode) => {
+      editor.registerNodeTransform(TextNodeValue, (textNode: TextNode) => {
         const parent = textNode.getParentOrThrow()
         const previous = textNode.getPreviousSibling()
         if ($isAutoLinkNode(parent)) {

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 import type { LinkPayload } from '../types.js'
 

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -2,19 +2,24 @@
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $findMatchingParent, mergeRegister } from '@lexical/utils'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { $findMatchingParent, mergeRegister } = lexicalUtilsImport
 import { getTranslation } from '@payloadcms/translations'
 import { formatDrawerSlug, useConfig, useEditDepth, useTranslation } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
   KEY_ESCAPE_COMMAND,
   SELECTION_CHANGE_COMMAND,
-} from 'lexical'
+} = lexicalImport
+
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { LinkNode } from '../../../nodes/LinkNode.js'
@@ -30,6 +35,8 @@ import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'
 import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'
 
 export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {
+  const { useModal } = facelessUIImport
+
   const [editor] = useLexicalComposerContext()
 
   const editorRef = useRef<HTMLDivElement | null>(null)

packages/richtext-lexical/src/field/features/link/plugins/link/index.tsx

@@ -1,13 +1,13 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  COMMAND_PRIORITY_LOW,
-  PASTE_COMMAND,
-} from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } =
+  lexicalImport
+
 import { useEffect } from 'react'
 
 import type { LinkFields } from '../../nodes/types.js'

packages/richtext-lexical/src/field/features/lists/checklist/feature.client.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { INSERT_CHECK_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_CHECK_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { ClientFeature, FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/markdownTransformers.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/lists/checklist/plugin/index.tsx

@@ -1,5 +1,7 @@
 'use client'
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin.js'
+import lexicalCheckListPluginImport from '@lexical/react/LexicalCheckListPlugin.js'
+const { CheckListPlugin } = lexicalCheckListPluginImport
+
 import React from 'react'
 
 export function LexicalCheckListPlugin() {

packages/richtext-lexical/src/field/features/lists/common/markdown.ts

@@ -4,7 +4,8 @@ import type { ListNode, ListType } from '@lexical/list'
 import type { ElementTransformer } from '@lexical/markdown'
 import type { ElementNode } from 'lexical'
 
-import { $createListItemNode, $createListNode, $isListItemNode, $isListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $createListItemNode, $createListNode, $isListItemNode, $isListNode } = lexicalListImport
 
 // Amount of spaces that define indentation level
 const LIST_INDENT_SIZE = 4

packages/richtext-lexical/src/field/features/lists/htmlConverter.ts

@@ -1,6 +1,7 @@
 import type { SerializedListItemNode, SerializedListNode } from '@lexical/list'
 
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { HTMLConverter } from '../converters/html/converter/types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/feature.client.tsx

@@ -1,6 +1,6 @@
 'use client'
-
-import { INSERT_ORDERED_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_ORDERED_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/orderedlist/markdownTransformer.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/lists/plugin/index.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { ListPlugin } from '@lexical/react/LexicalListPlugin.js'
+import lexicalListPluginImport from '@lexical/react/LexicalListPlugin.js'
+const { ListPlugin } = lexicalListPluginImport
 import React from 'react'
 
 export function LexicalListPlugin() {

packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderClient } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.server.ts

@@ -1,4 +1,5 @@
-import { ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { ListItemNode, ListNode } = lexicalListImport
 
 import type { FeatureProviderProviderServer } from '../../types.js'
 

packages/richtext-lexical/src/field/features/lists/unorderedlist/markdownTransformer.ts

@@ -1,6 +1,7 @@
 import type { ElementTransformer } from '@lexical/markdown'
 
-import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
+import lexicalListImport from '@lexical/list'
+const { $isListNode, ListItemNode, ListNode } = lexicalListImport
 
 import { listExport, listReplace } from '../common/markdown.js'
 

packages/richtext-lexical/src/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.tsx

@@ -1,7 +1,13 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 
-import { addClassNamesToElement } from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { DecoratorNode } = lexicalImport
+
+import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+
 import * as React from 'react'
 
 export type UnknownConvertedNodeData = {

packages/richtext-lexical/src/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.tsx

@@ -1,7 +1,12 @@
 import type { SerializedLexicalNode, Spread } from 'lexical'
 
-import { addClassNamesToElement } from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+import lexicalUtilsImport from '@lexical/utils'
+const { addClassNamesToElement } = lexicalUtilsImport
+import lexicalImport from 'lexical'
+const { DecoratorNode } = lexicalImport
+
+import type { EditorConfig, LexicalNode, NodeKey } from 'lexical'
+
 import * as React from 'react'
 
 export type UnknownConvertedNodeData = {

packages/richtext-lexical/src/field/features/paragraph/feature.client.tsx

@@ -1,7 +1,10 @@
 'use client'
 
-import { $setBlocksType } from '@lexical/selection'
-import { $createParagraphNode, $getSelection } from 'lexical'
+import lexicalSelectionImport from '@lexical/selection'
+const { $setBlocksType } = lexicalSelectionImport
+
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $getSelection } = lexicalImport
 
 import type { FeatureProviderProviderClient } from '../types.js'
 

packages/richtext-lexical/src/field/features/relationship/drawer/commands.ts

@@ -1,6 +1,7 @@
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 export const INSERT_RELATIONSHIP_WITH_DRAWER_COMMAND: LexicalCommand<{
   replace: { nodeKey: string } | false

packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useListDrawer } from '@payloadcms/ui'
-import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, type LexicalEditor } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
+
+import type { LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js'

packages/richtext-lexical/src/field/features/relationship/nodes/RelationshipNode.tsx

@@ -10,10 +10,11 @@ import type {
   Spread,
 } from 'lexical'
 
-import {
-  DecoratorBlockNode,
-  type SerializedDecoratorBlockNode,
-} from '@lexical/react/LexicalDecoratorBlockNode.js'
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
+
+import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
+
 import * as React from 'react'
 
 const RelationshipComponent = React.lazy(() =>

packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx

@@ -1,9 +1,14 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
 import { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui'
-import { $getNodeByKey, type ElementFormatType } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
+import type { ElementFormatType } from 'lexical'
+
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { RelationshipData } from '../RelationshipNode.js'

packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx

@@ -1,16 +1,21 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot } from '@lexical/utils'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot } = lexicalUtilsImport
 import { useConfig } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
+import type { LexicalCommand } from 'lexical'
+
 import { useEffect } from 'react'
 import React from 'react'
 

packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx

@@ -1,8 +1,9 @@
 'use client'
 import type { FormState, SanitizedCollectionConfig } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import * as facelessUIImport from '@faceless-ui/modal'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
 import {
   Drawer,
@@ -17,7 +18,9 @@ import {
   useFieldPath,
   useTranslation,
 } from '@payloadcms/ui'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
 import { deepCopyObject } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
@@ -37,6 +40,8 @@ export const ExtraFieldsUploadDrawer: React.FC<
     relatedCollection: SanitizedCollectionConfig
   }
 > = (props) => {
+  const { useModal } = facelessUIImport
+
   const {
     data: { fields, relationTo, value },
     drawerSlug,

packages/richtext-lexical/src/field/features/upload/component/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
 import {
@@ -15,7 +16,9 @@ import {
   useThumbnail,
   useTranslation,
 } from '@payloadcms/ui'
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
+
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'

packages/richtext-lexical/src/field/features/upload/drawer/commands.ts

@@ -1,7 +1,8 @@
 'use client'
 import type { LexicalCommand } from 'lexical'
 
-import { createCommand } from 'lexical'
+import lexicalImport from 'lexical'
+const { createCommand } = lexicalImport
 
 export const INSERT_UPLOAD_WITH_DRAWER_COMMAND: LexicalCommand<{
   replace: { nodeKey: string } | false

packages/richtext-lexical/src/field/features/upload/drawer/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useListDrawer } from '@payloadcms/ui'
-import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, type LexicalEditor } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
+
+import type { LexicalEditor } from 'lexical'
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'

packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx

@@ -1,15 +1,20 @@
 import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
 import type { ElementFormatType, NodeKey } from 'lexical'
 
-import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'
-import {
-  $applyNodeReplacement,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type DOMExportOutput,
-  type LexicalNode,
-  type Spread,
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
+
+import lexicalImport from 'lexical'
+const { $applyNodeReplacement } = lexicalImport
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  LexicalNode,
+  Spread,
 } from 'lexical'
+
 import * as React from 'react'
 
 const RawUploadComponent = React.lazy(() =>

packages/richtext-lexical/src/field/features/upload/plugin/index.tsx

@@ -1,16 +1,21 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport
 import { useConfig } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
+const {
   $getPreviousSelection,
   $getSelection,
   $isParagraphNode,
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
-  type LexicalCommand,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
+import type { LexicalCommand } from 'lexical'
+
 import React, { useEffect } from 'react'
 
 import type { RawUploadPayload } from '../nodes/UploadNode.js'

packages/richtext-lexical/src/field/lexical/LexicalEditor.tsx

@@ -1,10 +1,20 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin.js'
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin.js'
+import lexicalHistoryPluginImport from '@lexical/react/LexicalHistoryPlugin.js'
+const { HistoryPlugin } = lexicalHistoryPluginImport
+
+import lexicalOnChangePluginImport from '@lexical/react/LexicalOnChangePlugin.js'
+const { OnChangePlugin } = lexicalOnChangePluginImport
+
+import lexicalRichTextPluginImport from '@lexical/react/LexicalRichTextPlugin.js'
+const { RichTextPlugin } = lexicalRichTextPluginImport
+
+import lexicalTabIndentationPluginImport from '@lexical/react/LexicalTabIndentationPlugin.js'
+const { TabIndentationPlugin } = lexicalTabIndentationPluginImport
+
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 

packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx

@@ -3,7 +3,11 @@ import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorState, SerializedEditorState } from 'lexical'
 import type { LexicalEditor } from 'lexical'
 
-import { type InitialConfigType, LexicalComposer } from '@lexical/react/LexicalComposer.js'
+import lexicalComposerImport from '@lexical/react/LexicalComposer.js'
+const { LexicalComposer } = lexicalComposerImport
+
+import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
+
 import * as React from 'react'
 
 import type { SanitizedClientEditorConfig } from './config/types.js'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.tsx

@@ -1,7 +1,12 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import { $getSelection } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
+
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { FloatingToolbarSectionEntry } from '../types.js'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/DropDown.tsx

@@ -1,7 +1,13 @@
 'use client'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import { $getSelection } from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection } = lexicalImport
+
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import React from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx

@@ -1,15 +1,21 @@
 'use client'
 import type { LexicalEditor } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
   COMMAND_PRIORITY_LOW,
   SELECTION_CHANGE_COMMAND,
-} from 'lexical'
+} = lexicalImport
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/MarkdownShortcut/index.tsx

@@ -1,5 +1,9 @@
 'use client'
-import { MarkdownShortcutPlugin as LexicalMarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin.js'
+
+import lexicalMarkdownShortcutPluginImport from '@lexical/react/LexicalMarkdownShortcutPlugin.js'
+const { MarkdownShortcutPlugin: LexicalMarkdownShortcutPlugin } =
+  lexicalMarkdownShortcutPluginImport
+
 import * as React from 'react'
 
 import { useEditorConfigContext } from '../../config/client/EditorConfigProvider.js'

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx

@@ -2,9 +2,14 @@
 import type { LexicalCommand, LexicalEditor, TextNode } from 'lexical'
 import type { MutableRefObject, ReactPortal } from 'react'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const {
   $getSelection,
   $isRangeSelection,
   COMMAND_PRIORITY_LOW,
@@ -14,7 +19,8 @@ import {
   KEY_ESCAPE_COMMAND,
   KEY_TAB_COMMAND,
   createCommand,
-} from 'lexical'
+} = lexicalImport
+
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import type { MenuTextMatch } from '../useMenuTriggerMatch.js'

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx

@@ -7,15 +7,16 @@ import type {
   TextNode,
 } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
-import {
-  $getSelection,
-  $isRangeSelection,
-  $isTextNode,
-  COMMAND_PRIORITY_LOW,
-  createCommand,
-} from 'lexical'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
+import lexicalUtilsImport from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
+
+import lexicalImport from 'lexical'
+const { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, createCommand } =
+  lexicalImport
+
 import { useCallback, useEffect, useState } from 'react'
 import * as React from 'react'
 

packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx

@@ -1,7 +1,9 @@
 'use client'
 import type { TextNode } from 'lexical'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import { useTranslation } from '@payloadcms/ui'
 import { useCallback, useMemo, useState } from 'react'
 import * as React from 'react'

packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx

@@ -1,9 +1,11 @@
 'use client'
-import type { ParagraphNode } from 'lexical'
+import type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'
+
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+import lexicalImport from 'lexical'
+const { $createParagraphNode, $getNodeByKey } = lexicalImport
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { $createParagraphNode } from 'lexical'
-import { $getNodeByKey, type LexicalEditor, type LexicalNode } from 'lexical'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.ts

@@ -1,6 +1,7 @@
 import type { LexicalEditor, LexicalNode } from 'lexical'
 
-import { $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNodeByKey } = lexicalImport
 
 import { Point } from '../../../utils/point.js'
 import { Rect } from '../../../utils/rect.js'

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx

@@ -2,9 +2,12 @@
 import type { LexicalEditor } from 'lexical'
 import type { DragEvent as ReactDragEvent } from 'react'
 
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
+
 import { eventFiles } from '@lexical/rich-text'
-import { $getNearestNodeFromDOMNode, $getNodeByKey } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getNearestNodeFromDOMNode, $getNodeByKey } = lexicalImport
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'

packages/richtext-lexical/src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts

@@ -1,6 +1,7 @@
 import type { LexicalEditor } from 'lexical'
 
-import { $getRoot } from 'lexical'
+import lexicalImport from 'lexical'
+const { $getRoot } = lexicalImport
 
 export function getTopLevelNodeKeys(editor: LexicalEditor): string[] {
   return editor.getEditorState().read(() => $getRoot().getChildrenKeys())

packages/richtext-lexical/src/field/lexical/ui/ContentEditable.tsx

@@ -1,4 +1,6 @@
-import { ContentEditable } from '@lexical/react/LexicalContentEditable.js'
+import lexicalContentEditableImport from '@lexical/react/LexicalContentEditable.js'
+const { ContentEditable } = lexicalContentEditableImport
+
 import * as React from 'react'
 
 import './ContentEditable.scss'

packages/richtext-lexical/src/field/lexical/utils/getSelectedNode.ts

@@ -1,5 +1,7 @@
-import { $isAtNodeEnd } from '@lexical/selection'
-import { type ElementNode, type RangeSelection, type TextNode } from 'lexical'
+import lexicalSelectionImport from '@lexical/selection'
+const { $isAtNodeEnd } = lexicalSelectionImport
+
+import type { ElementNode, RangeSelection, TextNode } from 'lexical'
 
 export function getSelectedNode(selection: RangeSelection): ElementNode | TextNode {
   const { anchor } = selection

packages/richtext-slate/src/field/elements/link/Button/index.tsx

@@ -2,7 +2,7 @@
 
 import type { FormState } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import {
   getFormState,
   reduceFieldsToValues,
@@ -63,6 +63,8 @@ const insertLink = (editor, fields) => {
 }
 
 export const LinkButton: React.FC = () => {
+  const { useModal } = facelessUIImport
+
   const { fieldProps } = useElementButton()
   const [initialState, setInitialState] = useState<FormState>({})
 

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -2,7 +2,7 @@
 
 import type { FormState } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import {
   Button,
@@ -60,6 +60,7 @@ const insertChange = (editor, fields) => {
 export const LinkElement = () => {
   const { attributes, children, editorRef, element, fieldProps, schemaPath } =
     useElement<LinkElementType>()
+  const { useModal } = facelessUIImport
 
   const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`
 

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -3,7 +3,7 @@
 import type { FormFieldBase } from '@payloadcms/ui/types'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import {
   Drawer,
@@ -37,6 +37,8 @@ export const UploadDrawer: React.FC<{
   relatedCollection: SanitizedCollectionConfig
   schemaPath: string
 }> = (props) => {
+  const { useModal } = facelessUIImport
+
   const editor = useSlateStatic()
 
   const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props

packages/ui/src/elements/DeleteDocument/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -22,6 +22,7 @@ const baseClass = 'delete-document'
 
 const DeleteDocument: React.FC<Props> = (props) => {
   const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props
+  const { Modal, useModal } = facelessUIImport
 
   const {
     routes: { admin, api },

packages/ui/src/elements/DeleteMany/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
@@ -20,6 +20,8 @@ import './index.scss'
 const baseClass = 'delete-documents'
 
 export const DeleteMany: React.FC<Props> = (props) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { collection: { slug, labels: { plural } } = {} } = props
 
   const { permissions } = useAuth()

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -2,7 +2,7 @@
 
 import type { FormState } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import queryString from 'qs'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
@@ -33,6 +33,8 @@ const Content: React.FC<DocumentDrawerProps> = ({
   drawerSlug,
   onSave,
 }) => {
+  const { useModal } = facelessUIImport
+
   const config = useConfig()
 
   const {

packages/ui/src/elements/DocumentDrawer/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
 
@@ -64,6 +64,8 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {
 }
 
 export const useDocumentDrawer: UseDocumentDrawer = ({ id, collectionSlug }) => {
+  const { useModal } = facelessUIImport
+
   const drawerDepth = useEditDepth()
   const uuid = useId()
   const { closeModal, modalState, openModal, toggleModal } = useModal()

packages/ui/src/elements/Drawer/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Props, TogglerProps } from './types.js'
@@ -24,6 +24,8 @@ export const DrawerToggler: React.FC<TogglerProps> = ({
   onClick,
   ...rest
 }) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { openModal } = useModal()
 
   const handleClick = useCallback(
@@ -50,6 +52,8 @@ export const Drawer: React.FC<Props> = ({
   hoverTitle,
   title,
 }) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { t } = useTranslation()
   const { closeModal, modalState } = useModal()
   const drawerDepth = useEditDepth()

packages/ui/src/elements/DuplicateDocument/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -19,6 +19,8 @@ import './index.scss'
 const baseClass = 'duplicate'
 
 const Duplicate: React.FC<Props> = ({ id, slug, singularLabel }) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { push } = useRouter()
   const modified = useFormModified()
   const { toggleModal } = useModal()

packages/ui/src/elements/EditMany/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FormState } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useState } from 'react'
 
@@ -89,6 +89,8 @@ const SaveDraft: React.FC<{ action: string; disabled: boolean }> = ({ action, di
   )
 }
 export const EditMany: React.FC<Props> = (props) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { collection: { slug, fields, labels: { plural } } = {}, collection } = props
 
   const { permissions } = useAuth()

packages/ui/src/elements/EditUpload/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 import type { Data } from 'payload/types'
+import type CropType from 'react-image-crop'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import React, { useRef, useState } from 'react'
 import ReactCrop from 'react-image-crop'
-import type CropType from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
 
 import { editDrawerSlug } from '../../elements/Upload/index.js'
@@ -35,6 +35,8 @@ export const EditUpload: React.FC<{
   showCrop?: boolean
   showFocalPoint?: boolean
 }> = ({ fileName, fileSrc, imageCacheTag, showCrop, showFocalPoint }) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { closeModal } = useModal()
   const { t } = useTranslation()
   const { dispatchFormQueryParams, formQueryParams } = useFormQueryParams()

packages/ui/src/elements/GenerateConfirmation/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import React from 'react'
 import { toast } from 'react-toastify'
 
@@ -15,6 +15,8 @@ import './index.scss'
 const baseClass = 'generate-confirmation'
 
 const GenerateConfirmation: React.FC<Props> = (props) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { highlightField, setKey } = props
 
   const { id } = useDocumentInfo()

packages/ui/src/elements/ListControls/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useWindowInfo } from '@faceless-ui/window-info'
+import * as facelessUIImport from '@faceless-ui/window-info'
 import { getTranslation } from '@payloadcms/translations'
 import { fieldAffectsData } from 'payload/types'
 import React, { useState } from 'react'
@@ -44,6 +44,8 @@ export const ListControls: React.FC<Props> = (props) => {
     titleField,
   } = props
 
+  const { useWindowInfo } = facelessUIImport
+
   const { searchParams } = useSearchParams()
   const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)
 

packages/ui/src/elements/ListDrawer/DrawerContent.tsx

@@ -2,7 +2,7 @@
 import type { SanitizedCollectionConfig } from 'payload/types'
 import type { Where } from 'payload/types'
 
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useReducer, useState } from 'react'
 
@@ -51,6 +51,8 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   onSelect,
   selectedCollection,
 }) => {
+  const { useModal } = facelessUIImport
+
   const { i18n, t } = useTranslation()
   const { permissions } = useAuth()
   const { setPreference } = usePreferences()

packages/ui/src/elements/ListDrawer/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
 
 import type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'
@@ -55,6 +55,8 @@ export const useListDrawer: UseListDrawer = ({
   selectedCollection,
   uploads,
 }) => {
+  const { useModal } = facelessUIImport
+
   const { collections } = useConfig()
   const drawerDepth = useEditDepth()
   const uuid = useId()

packages/ui/src/elements/Nav/NavToggler/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useWindowInfo } from '@faceless-ui/window-info'
+import * as facelessUIImport from '@faceless-ui/window-info'
 import React from 'react'
 
 import { usePreferences } from '../../../providers/Preferences/index.js'
@@ -16,6 +16,7 @@ export const NavToggler: React.FC<{
   tabIndex?: number
 }> = (props) => {
   const { id, children, className, tabIndex = 0 } = props
+  const { useWindowInfo } = facelessUIImport
 
   const { t } = useTranslation()
 

packages/ui/src/elements/Nav/context.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useWindowInfo } from '@faceless-ui/window-info'
+import * as facelessUIImport from '@faceless-ui/window-info'
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import React, { useEffect, useRef } from 'react'
 
@@ -32,6 +32,8 @@ const getNavPreference = async (getPreference): Promise<boolean> => {
 export const NavProvider: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
+  const { useWindowInfo } = facelessUIImport
+
   const {
     breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },
   } = useWindowInfo()

packages/ui/src/elements/Popup/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useWindowInfo } from '@faceless-ui/window-info'
+import * as facelessUIImport from '@faceless-ui/window-info'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { Props } from './types.js'
@@ -29,6 +29,7 @@ const Popup: React.FC<Props> = (props) => {
     size = 'medium',
     verticalAlign: verticalAlignFromProps = 'top',
   } = props
+  const { useWindowInfo } = facelessUIImport
 
   const { height: windowHeight, width: windowWidth } = useWindowInfo()
   const [intersectionRef, intersectionEntry] = useIntersect({

packages/ui/src/elements/PublishMany/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
@@ -20,6 +20,8 @@ import './index.scss'
 const baseClass = 'publish-many'
 
 export const PublishMany: React.FC<Props> = (props) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { collection: { slug, labels: { plural }, versions } = {} } = props
 
   const {

packages/ui/src/elements/Status/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
@@ -16,6 +16,8 @@ import './index.scss'
 const baseClass = 'status'
 
 const Status: React.FC = () => {
+  const { Modal, useModal } = facelessUIImport
+
   const {
     id,
     collectionSlug,

packages/ui/src/elements/StayLoggedIn/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Modal, useModal } from '@faceless-ui/modal'
+import * as facelessUIImport from '@faceless-ui/modal'
 // TODO: abstract the `next/navigation` dependency out from this component
 import { useRouter } from 'next/navigation.js'
 import React from 'react'
@@ -16,6 +16,8 @@ const baseClass = 'stay-logged-in'
 const modalSlug = 'stay-logged-in'
 
 const StayLoggedInModal: React.FC<Props> = (props) => {
+  const { Modal, useModal } = facelessUIImport
+
   const { refreshCookie } = props
   const router = useRouter()
   const config = useConfig()