chore: functional bin

.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
+    },
   }),
 )

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-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
-    "dev:generate-types": "NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.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",

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",

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",

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/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",

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 },
           },
         }),
       }

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",

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()

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
+        <FormQueryParamsProvider
-          CustomComponent={
+          initialParams={{
-            typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
+            depth: 0,
-          }
+            'fallback-locale': 'null',
-          DefaultComponent={EditView}
+            locale: locale.code,
-          componentProps={serverSideProps}
+            uploadEdits: undefined,
-        />
+          }}
+        >
+          <RenderCustomComponent
+            CustomComponent={
+              typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined
+            }
+            DefaultComponent={EditView}
+            componentProps={serverSideProps}
+          />
+        </FormQueryParamsProvider>
       </DocumentInfoProvider>
     )
   }

packages/payload/bin.js

@@ -1,18 +1,13 @@
-#!/usr/bin/env ts-node
+#!/usr/bin/env node
-/* eslint-disable @typescript-eslint/no-var-requires */
 
 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 { bin } from './dist/bin/index.js'
-import { loadEnv } from './dist/bin/loadEnv.js'
-import { findConfig } from './dist/config/find.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({})
+bin()
-
-const start = async () => {
-  loadEnv()
-  const configPath = findConfig()
-
-  // const sanitized = configPath.replace('.ts', '')
-  const configPromise = await import(configPath)
-  const config = await configPromise
-
-  bin(config)
-}
-
-start()

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",

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 const bin = async () => {
-export default async (config: SanitizedConfig) => {
+  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 = (typeof args._[0] === 'string' ? args._[0] : '').toLowerCase()
-  const script = scriptIndex === -1 ? args._[0] : args._[scriptIndex]
+
-  const userBinScript = config.bin.find(({ key }) => key === script)
+  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))
+    return 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
-    }
   }
+
+  if (script === 'generate:types') {
+    return generateTypes(config)
+  }
+
+  console.log(`Unknown script: "${script}".`)
+  process.exit(1)
 }

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",

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",

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, TypeWithID } from 'payload/types'
-import type { CollectionConfig, FileData, PayloadRequest } from 'payload/types'
 
 export interface File {
   buffer: Buffer

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",

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",

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 lexicalRichTextImport from '@lexical/rich-text'
-import { $setBlocksType } from '@lexical/selection'
+const { $createQuoteNode, QuoteNode } = lexicalRichTextImport
-import { $getSelection } from 'lexical'
+
+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 lexicalRichTextImport from '@lexical/rich-text'
-import { $createLineBreakNode } from 'lexical'
+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 * as facelessUIImport from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
+const { useLexicalComposerContext } = lexicalComposerContextImport
 import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui'
-import {
+import lexicalImport from 'lexical'
-  $getNodeByKey,
+const { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport
-  COMMAND_PRIORITY_EDITOR,
+
-  type LexicalCommand,
+import type { LexicalCommand, LexicalEditor } from 'lexical'
-  type LexicalEditor,
+
-  createCommand,
-} 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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import {
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical'
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { TreeView } from '@lexical/react/LexicalTreeView.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 lexicalRichTextImport from '@lexical/rich-text'
-import { $createHeadingNode } from '@lexical/rich-text'
+const { $createHeadingNode, HeadingNode } = lexicalRichTextImport
-import { $setBlocksType } from '@lexical/selection'
+
-import { $getSelection } from 'lexical'
+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 lexicalUtilsImport from '@lexical/utils'
-import { $getSelection, $isRangeSelection } from 'lexical'
+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 {
+import type { ElementNode, LexicalNode, RangeSelection } from 'lexical'
-  $applyNodeReplacement,
+
-  $isElementNode,
+import lexicalImport from 'lexical'
-  type ElementNode,
+const { $applyNodeReplacement, $isElementNode } = lexicalImport
-  type LexicalNode,
-  type RangeSelection,
-} from 'lexical'
 
 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 lexicalUtilsImport from '@lexical/utils'
-import {
+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 lexicalUtilsImport from '@lexical/utils'
-import { mergeRegister } from '@lexical/utils'
+const { mergeRegister } = lexicalUtilsImport
-import {
+
+import lexicalImport from 'lexical'
+const {
   $createTextNode,
   $getSelection,
   $isElementNode,
@@ -11,8 +14,12 @@ import {
   $isNodeSelection,
   $isRangeSelection,
   $isTextNode,
-  TextNode,
+  TextNode: TextNodeValue,
-} from 'lexical'
+} = 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 * as facelessUIImport from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { $findMatchingParent, mergeRegister } from '@lexical/utils'
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import {
+import lexicalUtilsImport from '@lexical/utils'
-  $getSelection,
+const { mergeRegister } = lexicalUtilsImport
-  $isElementNode,
+
-  $isRangeSelection,
+import lexicalImport from 'lexical'
-  COMMAND_PRIORITY_LOW,
+const { $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } =
-  PASTE_COMMAND,
+  lexicalImport
-} from 'lexical'
+
 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 lexicalListImport from '@lexical/list'
-import { INSERT_ORDERED_LIST_COMMAND, ListItemNode, ListNode } 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 lexicalUtilsImport from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+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 lexicalUtilsImport from '@lexical/utils'
-import { DecoratorNode, type EditorConfig, type LexicalNode, type NodeKey } from 'lexical'
+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 lexicalSelectionImport from '@lexical/selection'
-import { $createParagraphNode, $getSelection } from 'lexical'
+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 {
+import lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
-  DecoratorBlockNode,
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
-  type SerializedDecoratorBlockNode,
+
-} from '@lexical/react/LexicalDecoratorBlockNode.js'
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot } from '@lexical/utils'
+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 * as facelessUIImport from '@faceless-ui/modal'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
+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 lexicalDecoratorBlockNodeImport from '@lexical/react/LexicalDecoratorBlockNode.js'
-import {
+const { DecoratorBlockNode } = lexicalDecoratorBlockNodeImport
-  $applyNodeReplacement,
+
-  type DOMConversionMap,
+import lexicalImport from 'lexical'
-  type DOMConversionOutput,
+const { $applyNodeReplacement } = lexicalImport
-  type DOMExportOutput,
+
-  type LexicalNode,
+import type {
-  type Spread,
+  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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+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 lexicalHistoryPluginImport from '@lexical/react/LexicalHistoryPlugin.js'
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin.js'
+const { HistoryPlugin } = lexicalHistoryPluginImport
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
+
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin.js'
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import { $getSelection } from 'lexical'
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import { $getSelection } from 'lexical'
+
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import {
+
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import {
+
+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 lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
-import { mergeRegister } from '@lexical/utils'
+const { useLexicalComposerContext } = lexicalComposerContextImport
-import {
+
-  $getSelection,
+import lexicalUtilsImport from '@lexical/utils'
-  $isRangeSelection,
+const { mergeRegister } = lexicalUtilsImport
-  $isTextNode,
+
-  COMMAND_PRIORITY_LOW,
+import lexicalImport from 'lexical'
-  createCommand,
+const { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, createCommand } =
-} from 'lexical'
+  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/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))

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

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

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",

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/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",

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"