chore: functional bin

2024-03-08 12:33:37 -05:00
parent 349ae8ed27 0066b858d6
commit ab186c0608
182 changed files with 1028 additions and 635 deletions
--- a/.idea/runConfigurations/Playwright_test.xml
+++ b/.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>
--- a/.vscode/settings.json
+++ b/.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"
+  }
 }
--- a/next.config.mjs
+++ b/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
+    },
  }),
 )
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "payload-monorepo",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "private": true,
  "type": "module",
  "workspaces:": [
@@ -40,14 +40,14 @@
    "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
    "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
    "dev": "cross-env node --no-deprecation ./test/dev.js",
-    "dev:generate-graphql-schema": "NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
-    "dev:generate-types": "NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
+    "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
+    "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
    "dev:postgres": "pnpm --filter payload run dev:postgres",
    "docker:restart": "pnpm docker:stop --remove-orphans && pnpm docker:start",
    "docker:start": "docker-compose -f packages/plugin-cloud-storage/docker-compose.yml up -d",
    "docker:stop": "docker-compose -f packages/plugin-cloud-storage/docker-compose.yml down",
    "fix": "eslint \"packages/**/*.ts\" --fix",
-    "generate:types": "PAYLOAD_CONFIG_PATH=./test/_community/config.ts ts-node ./packages/payload/bin.js",
+    "generate:types": "PAYLOAD_CONFIG_PATH=./test/_community/config.ts node --no-deprecation ./packages/payload/bin.js generate:types",
    "lint": "eslint \"packages/**/*.ts\"",
    "lint-staged": "lint-staged",
    "prepare": "husky install",
@@ -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",
@@ -169,7 +171,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",
--- a/packages/db-mongodb/package.json
+++ b/packages/db-mongodb/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-mongodb",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "description": "The officially supported MongoDB database adapter for Payload - Update 2",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/db-postgres/package.json
+++ b/packages/db-postgres/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-postgres",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "description": "The officially supported Postgres database adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/db-postgres/src/connect.ts
+++ b/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
--- a/packages/db-postgres/src/utilities/parseError.ts
+++ b/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
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/graphql",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "main": "./src/index.ts",
  "types": "./src/index.d.ts",
  "type": "module",
--- a/packages/graphql/src/schema/fieldToWhereInputSchemaMap.ts
+++ b/packages/graphql/src/schema/fieldToWhereInputSchemaMap.ts
@@ -1,5 +1,5 @@
 import { GraphQLEnumType, GraphQLInputObjectType } from 'graphql'
-import GraphQLJSON from 'graphql-type-json'
+import GraphQLJSONImport from 'graphql-type-json'

 import type {
  ArrayField,
@@ -28,6 +28,9 @@ import formatName from '../utilities/formatName.js'
 import recursivelyBuildNestedPaths from './recursivelyBuildNestedPaths.js'
 import { withOperators } from './withOperators.js'

+const GraphQLJSON = (GraphQLJSONImport ||
+  GraphQLJSONImport.default) as unknown as typeof GraphQLJSONImport.default
+
 type Args = {
  nestedFieldName?: string
  parentName: string
@@ -96,7 +99,7 @@ const fieldToSchemaMap = ({ nestedFieldName, parentName }: Args): any => ({
                ),
              }),
            },
-            value: { type: GraphQLJSON.default },
+            value: { type: GraphQLJSON },
          },
        }),
      }
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/next",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "main": "./src/index.ts",
  "types": "./src/index.d.ts",
  "type": "module",
--- a/packages/next/src/utilities/getDataAndFile.ts
+++ b/packages/next/src/utilities/getDataAndFile.ts
@@ -15,7 +15,7 @@ export const getDataAndFile: GetDataAndFile = async ({ collection, config, reque
  let file: CustomPayloadRequest['file'] = undefined

  if (['PATCH', 'POST', 'PUT'].includes(request.method.toUpperCase()) && request.body) {
-    const [contentType] = request.headers.get('Content-Type').split(';')
+    const [contentType] = (request.headers.get('Content-Type') || '').split(';')

    if (contentType === 'application/json') {
      data = await request.json()
--- a/packages/next/src/views/Account/index.tsx
+++ b/packages/next/src/views/Account/index.tsx
@@ -3,6 +3,7 @@ import type { Data, DocumentPreferences, ServerSideEditViewProps } from 'payload
 import {
  DocumentHeader,
  DocumentInfoProvider,
+  FormQueryParamsProvider,
  HydrateClientUser,
  RenderCustomComponent,
  buildStateFromSchema,
@@ -22,6 +23,7 @@ export { generateAccountMetadata } from './meta.js'
 export const Account: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
  const {
    permissions,
+    locale,
    req: {
      i18n,
      payload,
@@ -118,13 +120,22 @@ export const Account: React.FC<AdminViewProps> = async ({ initPageResult, search
          i18n={i18n}
        />
        <HydrateClientUser permissions={permissions} user={user} />
-        <RenderCustomComponent
-          CustomComponent={
-            typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
-          }
-          DefaultComponent={EditView}
-          componentProps={serverSideProps}
-        />
+        <FormQueryParamsProvider
+          initialParams={{
+            depth: 0,
+            'fallback-locale': 'null',
+            locale: locale.code,
+            uploadEdits: undefined,
+          }}
+        >
+          <RenderCustomComponent
+            CustomComponent={
+              typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
+            }
+            DefaultComponent={EditView}
+            componentProps={serverSideProps}
+          />
+        </FormQueryParamsProvider>
      </DocumentInfoProvider>
    )
  }
--- a/packages/payload/bin.js
+++ b/packages/payload/bin.js
@@ -1,18 +1,13 @@
-#!/usr/bin/env ts-node
-/* eslint-disable @typescript-eslint/no-var-requires */
+#!/usr/bin/env node

 import { register } from 'node:module'
 import path from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
-// import * as tsNode from 'ts-node'

-import bin from './dist/bin/index.js'
-import { loadEnv } from './dist/bin/loadEnv.js'
-import { findConfig } from './dist/config/find.js'
+import { bin } from './dist/bin/index.js'

 // Allow disabling SWC for debugging
 if (process.env.DISABLE_SWC !== 'true') {
-  // const oldURL = pathToFileURL('./').toString()
  const filename = fileURLToPath(import.meta.url)
  const dirname = path.dirname(filename)
  const url = pathToFileURL(dirname).toString() + '/'
@@ -20,17 +15,4 @@ if (process.env.DISABLE_SWC !== 'true') {
  register('./dist/bin/register/index.js', url)
 }

-// tsNode.register({})
-
-const start = async () => {
-  loadEnv()
-  const configPath = findConfig()
-
-  // const sanitized = configPath.replace('.ts', '')
-  const configPromise = await import(configPath)
-  const config = await configPromise
-
-  bin(config)
-}
-
-start()
+bin()
--- a/packages/payload/package.json
+++ b/packages/payload/package.json
@@ -1,6 +1,6 @@
 {
  "name": "payload",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "description": "Node, React and MongoDB Headless CMS and Application Framework",
  "license": "MIT",
  "main": "./src/index.js",
@@ -44,15 +44,11 @@
  "dependencies": {
    "@payloadcms/translations": "workspace:*",
    "@swc-node/core": "^1.13.0",
-    "@swc-node/register": "^1.9.0",
    "@swc-node/sourcemap-support": "^0.5.0",
-    "@swc/register": "^0.1.10",
    "bson-objectid": "2.0.4",
-    "colorette": "^2.0.20",
    "conf": "10.2.0",
    "console-table-printer": "2.11.2",
    "dataloader": "2.2.2",
-    "debug": "^4.3.4",
    "deepmerge": "4.3.1",
    "dotenv": "8.6.0",
    "file-type": "16.5.4",
--- a/packages/payload/src/bin/index.ts
+++ b/packages/payload/src/bin/index.ts
@@ -1,18 +1,26 @@
 /* eslint-disable no-console */
 import minimist from 'minimist'

-import type { BinScript, SanitizedConfig } from '../config/types.js'
+import type { BinScript } from '../config/types.js'

-// import loadConfig from '../config/load.js'
+import { findConfig } from '../config/find.js'
 import { generateTypes } from './generateTypes.js'
+import { loadEnv } from './loadEnv.js'
 import { migrate } from './migrate.js'

-// eslint-disable-next-line no-restricted-exports
-export default async (config: SanitizedConfig) => {
+export const bin = async () => {
+  loadEnv()
+  const configPath = findConfig()
+  const configPromise = await import(configPath)
+  let config = await configPromise
+  if (config.default) config = await config.default
+
  const args = minimist(process.argv.slice(2))
-  const scriptIndex = args._.findIndex((x) => x === 'build')
-  const script = scriptIndex === -1 ? args._[0] : args._[scriptIndex]
-  const userBinScript = config.bin.find(({ key }) => key === script)
+  const script = (typeof args._[0] === 'string' ? args._[0] : '').toLowerCase()
+
+  const userBinScript = Array.isArray(config.bin)
+    ? config.bin.find(({ key }) => key === script)
+    : false

  if (userBinScript) {
    try {
@@ -27,17 +35,13 @@ export default async (config: SanitizedConfig) => {
  }

  if (script.startsWith('migrate')) {
-    void migrate({ config, parsedArgs: args }).then(() => process.exit(0))
-  } else {
-    switch (script.toLowerCase()) {
-      case 'generate:types': {
-        generateTypes(config)
-        break
-      }
-
-      default:
-        console.log(`Unknown script "${script}".`)
-        break
-    }
+    return migrate({ config, parsedArgs: args }).then(() => process.exit(0))
  }
+
+  if (script === 'generate:types') {
+    return generateTypes(config)
+  }
+
+  console.log(`Unknown script: "${script}".`)
+  process.exit(1)
 }
--- a/packages/plugin-cloud-storage/package.json
+++ b/packages/plugin-cloud-storage/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@payloadcms/plugin-cloud-storage",
  "description": "The official cloud storage plugin for Payload CMS",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
--- a/packages/plugin-cloud/package.json
+++ b/packages/plugin-cloud/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@payloadcms/plugin-cloud",
  "description": "The official Payload Cloud plugin",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
--- a/packages/plugin-cloud/src/types.ts
+++ b/packages/plugin-cloud/src/types.ts
@@ -1,7 +1,5 @@
-import type { Response } from 'express'
 import type { Config } from 'payload/config'
-import type { TypeWithID } from 'payload/types'
-import type { CollectionConfig, FileData, PayloadRequest } from 'payload/types'
+import type { CollectionConfig, FileData, PayloadRequest, TypeWithID } from 'payload/types'

 export interface File {
  buffer: Buffer
--- a/packages/plugin-seo/package.json
+++ b/packages/plugin-seo/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-seo",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "homepage:": "https://payloadcms.com",
  "repository": "git@github.com:payloadcms/plugin-seo.git",
  "description": "SEO plugin for Payload",
--- a/packages/richtext-lexical/package.json
+++ b/packages/richtext-lexical/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/richtext-lexical",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "description": "The officially supported Lexical richtext adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/richtext-lexical/src/cell/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/align/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/blockquote/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/blockquote/feature.server.ts
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/blockquote/markdownTransformer.ts
+++ b/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],
--- a/packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx
+++ b/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()

--- a/packages/richtext-lexical/src/field/features/blocks/nodes/BlocksNode.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/blocks/plugin/commands.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/blocks/plugin/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/debug/testrecorder/plugin/index.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/debug/treeview/plugin/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/format/bold/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/inlinecode/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/italic/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/strikethrough/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/subscript/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/superscript/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/format/underline/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/heading/feature.client.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/heading/feature.server.ts
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/heading/markdownTransformer.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/indent/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/link/feature.client.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/link/nodes/AutoLinkNode.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/link/nodes/LinkNode.ts
+++ b/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) => {
--- a/packages/richtext-lexical/src/field/features/link/plugins/autoLink/index.tsx
+++ b/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)) {
--- a/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/commands.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx
+++ b/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)
--- a/packages/richtext-lexical/src/field/features/link/plugins/link/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/lists/checklist/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/checklist/feature.server.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/checklist/markdownTransformers.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/checklist/plugin/index.tsx
+++ b/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() {
--- a/packages/richtext-lexical/src/field/features/lists/common/markdown.ts
+++ b/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
--- a/packages/richtext-lexical/src/field/features/lists/htmlConverter.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/orderedlist/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/orderedlist/feature.server.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/orderedlist/markdownTransformer.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/plugin/index.tsx
+++ b/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() {
--- a/packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/unorderedlist/feature.server.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/lists/unorderedlist/markdownTransformer.ts
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/migrations/lexicalPluginToLexical/nodes/unknownConvertedNode/index.tsx
+++ b/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 = {
--- a/packages/richtext-lexical/src/field/features/migrations/slateToLexical/nodes/unknownConvertedNode/index.tsx
+++ b/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 = {
--- a/packages/richtext-lexical/src/field/features/paragraph/feature.client.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/relationship/drawer/commands.ts
+++ b/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
--- a/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/relationship/nodes/RelationshipNode.tsx
+++ b/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(() =>
--- a/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx
+++ b/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,
--- a/packages/richtext-lexical/src/field/features/upload/component/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/upload/drawer/commands.ts
+++ b/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
--- a/packages/richtext-lexical/src/field/features/upload/drawer/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/features/upload/nodes/UploadNode.tsx
+++ b/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(() =>
--- a/packages/richtext-lexical/src/field/features/upload/plugin/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/LexicalEditor.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarButton/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/ToolbarDropdown/DropDown.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/FloatingSelectToolbar/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/MarkdownShortcut/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/index.tsx
+++ b/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'

--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.ts
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/plugins/handles/utils/getTopLevelNodeKeys.ts
+++ b/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())
--- a/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.tsx
+++ b/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'
--- a/packages/richtext-lexical/src/field/lexical/utils/cloneDeep.ts
+++ b/packages/richtext-lexical/src/field/lexical/utils/cloneDeep.ts
@@ -37,6 +37,10 @@ export function cloneDeep<T>(object: T, cache: WeakMap<any, any> = new WeakMap()

  // Handle Array and Object
  if (typeof object === 'object' && object !== null) {
+    if ('$$typeof' in object && typeof object.$$typeof === 'symbol') {
+      return object
+    }
+
    const clonedObject: any = Array.isArray(object)
      ? []
      : Object.create(Object.getPrototypeOf(object))
--- a/packages/richtext-lexical/src/field/lexical/utils/getSelectedNode.ts
+++ b/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
--- a/packages/richtext-slate/package.json
+++ b/packages/richtext-slate/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/richtext-slate",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "description": "The officially supported Slate richtext adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/richtext-slate/src/field/elements/link/Button/index.tsx
+++ b/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>({})

--- a/packages/richtext-slate/src/field/elements/link/Element/index.tsx
+++ b/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}`

--- a/packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx
+++ b/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
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/translations",
-  "version": "3.0.0-alpha.31",
+  "version": "3.0.0-alpha.34",
  "main": "./dist/exports/index.ts",
  "types": "./dist/types.d.ts",
  "type": "module",
--- a/packages/translations/src/_generatedFiles_/client/nl.json
+++ b/packages/translations/src/_generatedFiles_/client/nl.json
@@ -210,7 +210,7 @@
    "near": "nabij"
  },
  "upload": {
-    "crop": "Gewas",
+    "crop": "Bijsnijden",
    "cropToolDescription": "Sleep de hoeken van het geselecteerde gebied, teken een nieuw gebied of pas de waarden hieronder aan.",
    "dragAndDrop": "Sleep een bestand",
    "editImage": "Afbeelding bewerken",
@@ -220,7 +220,7 @@
    "previewSizes": "Voorbeeldgroottes",
    "selectCollectionToBrowse": "Selecteer een collectie om door te bladeren",
    "selectFile": "Selecteer een bestand",
-    "setCropArea": "Stel oogstgebied in",
+    "setCropArea": "Stel bijsnijdgebied in",
    "setFocalPoint": "Stel het brandpunt in",
    "sizesFor": "Maten voor {{label}}",
    "width": "Breedte"
--- a/Show More
+++ b/Show More