feat(richtext-lexical): mdx support (#9160)

Supports bi-directional import/export between MDX <=> Lexical. JSX will
be mapped to lexical blocks back and forth.

This will allow editing our mdx docs in payload while keeping mdx as the
source of truth

---------

Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>

Author: AlessioGr

docs/admin/overview.mdx

@@ -177,7 +177,7 @@ The following options are available:
 
 <Banner type="success">
   <strong>Tip:</strong>
-   You can easily add _new_ routes to the Admin Panel through [Custom Endpoints](../rest-api/overview#custom-endpoints) and [Custom Views](./views).
+  You can easily add _new_ routes to the Admin Panel through [Custom Endpoints](../rest-api/overview#custom-endpoints) and [Custom Views](./views).
 </Banner>
 
 #### Customizing Root-level Routes

docs/lexical/converters.mdx

@@ -334,8 +334,7 @@ This has been taken from the [lexical serialization & deserialization docs](http
 Convert markdown content to the Lexical editor format with the following:
 
 ```ts
-import { $convertFromMarkdownString } from '@lexical/markdown'
-import { sanitizeServerEditorConfig } from '@payloadcms/richtext-lexical'
+import { sanitizeServerEditorConfig, $convertFromMarkdownString } from '@payloadcms/richtext-lexical'
 
 const yourSanitizedEditorConfig = sanitizeServerEditorConfig(yourEditorConfig, payloadConfig) // <= your editor config & Payload Config here
 const markdown = `# Hello World`

eslint.config.js

@@ -28,7 +28,7 @@ export const rootParserOptions = {
   ecmaVersion: 'latest',
   projectService: {
     maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 40,
-    allowDefaultProject: ['scripts/*.ts', '*.js', '*.mjs', '*.spec.ts', '*.d.ts'],
+    allowDefaultProject: ['scripts/*.ts', '*.js', '*.mjs', '*.d.ts'],
   },
 }
 

packages/next/src/layouts/Root/index.tsx

@@ -40,6 +40,7 @@ let checkedDependencies = false
 export const RootLayout = async ({
   children,
   config: configPromise,
+  importMap,
   serverFunction,
 }: {
   readonly children: React.ReactNode
@@ -136,6 +137,7 @@ export const RootLayout = async ({
   const clientConfig = await getClientConfig({
     config,
     i18n,
+    importMap,
   })
 
   return (

packages/next/src/utilities/getClientConfig.ts

@@ -1,16 +1,21 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ClientConfig, SanitizedConfig } from 'payload'
+import type { ClientConfig, ImportMap, SanitizedConfig } from 'payload'
 
 import { createClientConfig } from 'payload'
 import { cache } from 'react'
 
 export const getClientConfig = cache(
-  async (args: { config: SanitizedConfig; i18n: I18nClient }): Promise<ClientConfig> => {
-    const { config, i18n } = args
+  async (args: {
+    config: SanitizedConfig
+    i18n: I18nClient
+    importMap: ImportMap
+  }): Promise<ClientConfig> => {
+    const { config, i18n, importMap } = args
 
     const clientConfig = createClientConfig({
       config,
       i18n,
+      importMap,
     })
 
     return Promise.resolve(clientConfig)

packages/next/src/views/Document/handleServerFunction.tsx

@@ -4,6 +4,7 @@ import type {
   Data,
   DocumentPreferences,
   FormState,
+  ImportMap,
   PayloadRequest,
   SanitizedConfig,
   VisibleEntities,
@@ -23,8 +24,9 @@ if (!cachedClientConfig) {
 export const getClientConfig = (args: {
   config: SanitizedConfig
   i18n: I18nClient
+  importMap: ImportMap
 }): ClientConfig => {
-  const { config, i18n } = args
+  const { config, i18n, importMap } = args
 
   if (cachedClientConfig && process.env.NODE_ENV !== 'development') {
     return cachedClientConfig
@@ -33,6 +35,7 @@ export const getClientConfig = (args: {
   cachedClientConfig = createClientConfig({
     config,
     i18n,
+    importMap,
   })
 
   return cachedClientConfig
@@ -112,6 +115,7 @@ export const renderDocumentHandler = async (args: {
   const clientConfig = getClientConfig({
     config,
     i18n,
+    importMap: req.payload.importMap,
   })
 
   let preferences: DocumentPreferences

packages/next/src/views/List/handleServerFunction.tsx

@@ -2,6 +2,7 @@ import type { I18nClient } from '@payloadcms/translations'
 import type { ListPreferences } from '@payloadcms/ui'
 import type {
   ClientConfig,
+  ImportMap,
   ListQuery,
   PayloadRequest,
   SanitizedConfig,
@@ -22,8 +23,9 @@ if (!cachedClientConfig) {
 export const getClientConfig = (args: {
   config: SanitizedConfig
   i18n: I18nClient
+  importMap: ImportMap
 }): ClientConfig => {
-  const { config, i18n } = args
+  const { config, i18n, importMap } = args
 
   if (cachedClientConfig && process.env.NODE_ENV !== 'development') {
     return cachedClientConfig
@@ -32,6 +34,7 @@ export const getClientConfig = (args: {
   cachedClientConfig = createClientConfig({
     config,
     i18n,
+    importMap,
   })
 
   return cachedClientConfig
@@ -114,6 +117,7 @@ export const renderListHandler = async (args: {
   const clientConfig = getClientConfig({
     config,
     i18n,
+    importMap: payload.importMap,
   })
 
   const preferencesKey = `${collectionSlug}-list`

packages/next/src/views/Root/index.tsx

@@ -124,6 +124,7 @@ export const RootPage = async ({
   const clientConfig = await getClientConfig({
     config,
     i18n: initPageResult?.req.i18n,
+    importMap,
   })
 
   const RenderedView = (

packages/payload/src/bin/generateImportMap/getFromImportMap.ts

@@ -0,0 +1,34 @@
+import type { PayloadComponent } from '../../config/types.js'
+import type { ImportMap } from './index.js'
+
+import { parsePayloadComponent } from './parsePayloadComponent.js'
+
+export const getFromImportMap = <TOutput>(args: {
+  importMap: ImportMap
+  PayloadComponent: PayloadComponent
+  schemaPath?: string
+  silent?: boolean
+}): TOutput => {
+  const { importMap, PayloadComponent, schemaPath, silent } = args
+
+  const { exportName, path } = parsePayloadComponent(PayloadComponent)
+
+  const key = path + '#' + exportName
+
+  const importMapEntry = importMap[key]
+
+  if (!importMapEntry && !silent) {
+    // eslint-disable-next-line no-console
+    console.error(
+      `getFromImportMap: PayloadComponent not found in importMap`,
+      {
+        key,
+        PayloadComponent,
+        schemaPath,
+      },
+      'You may need to run the `payload generate:importmap` command to generate the importMap ahead of runtime.',
+    )
+  }
+
+  return importMapEntry
+}

packages/payload/src/bin/generateImportMap/iterateConfig.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import type { AdminViewConfig } from '../../admin/views/types.js'
 import type { SanitizedConfig } from '../../config/types.js'
 import type { AddToImportMap, Imports, InternalImportMap } from './index.js'