feat(richtext-lexical): Slate to Lexical converter: add blockquote conversion, convert custom link fields (#4486)

packages/richtext-lexical/src/field/features/migrations/SlateToLexical/converter/converters/blockquote.ts

@@ -0,0 +1,24 @@
+import type { SerializedQuoteNode } from '@lexical/rich-text'
+
+import type { SlateNodeConverter } from '../types'
+
+import { convertSlateNodesToLexical } from '../index'
+
+export const SlateBlockquoteConverter: SlateNodeConverter = {
+  converter({ converters, slateNode }) {
+    return {
+      children: convertSlateNodesToLexical({
+        canContainParagraphs: false,
+        converters,
+        parentNodeType: 'quote',
+        slateNodes: slateNode.children || [],
+      }),
+      direction: 'ltr',
+      format: '',
+      indent: 0,
+      type: 'quote',
+      version: 1,
+    } as const as SerializedQuoteNode
+  },
+  nodeTypes: ['blockquote'],
+}

packages/richtext-lexical/src/field/features/migrations/SlateToLexical/converter/converters/link.ts

@@ -14,7 +14,8 @@ export const SlateLinkConverter: SlateNodeConverter = {
       }),
       direction: 'ltr',
       fields: {
-        doc: slateNode.doc || undefined,
+        ...(slateNode.fields || {}),
+        doc: slateNode.doc || null,
         linkType: slateNode.linkType || 'custom',
         newTab: slateNode.newTab || false,
         url: slateNode.url || undefined,

packages/richtext-lexical/src/field/features/migrations/SlateToLexical/converter/defaultConverters.ts

@@ -1,5 +1,6 @@
 import type { SlateNodeConverter } from './types'
 
+import { SlateBlockquoteConverter } from './converters/blockquote'
 import { SlateHeadingConverter } from './converters/heading'
 import { SlateIndentConverter } from './converters/indent'
 import { SlateLinkConverter } from './converters/link'
@@ -18,6 +19,7 @@ export const defaultSlateConverters: SlateNodeConverter[] = [
   SlateRelationshipConverter,
   SlateListItemConverter,
   SlateLinkConverter,
+  SlateBlockquoteConverter,
   SlateHeadingConverter,
   SlateIndentConverter,
 ]

packages/richtext-lexical/src/index.ts

@@ -277,10 +277,12 @@ export { OrderedListFeature } from './field/features/lists/OrderedList'
 export { UnorderedListFeature } from './field/features/lists/UnorderedList'
 export { LexicalPluginToLexicalFeature } from './field/features/migrations/LexicalPluginToLexical'
 export { SlateToLexicalFeature } from './field/features/migrations/SlateToLexical'
-export { SlateHeadingConverter } from './field/features/migrations/SlateToLexical/converter/converters/heading'
+export { SlateBlockquoteConverter } from './field/features/migrations/SlateToLexical/converter/converters/blockquote'
 
+export { SlateHeadingConverter } from './field/features/migrations/SlateToLexical/converter/converters/heading'
 export { SlateIndentConverter } from './field/features/migrations/SlateToLexical/converter/converters/indent'
 export { SlateLinkConverter } from './field/features/migrations/SlateToLexical/converter/converters/link'
+
 export { SlateListItemConverter } from './field/features/migrations/SlateToLexical/converter/converters/listItem'
 export { SlateOrderedListConverter } from './field/features/migrations/SlateToLexical/converter/converters/orderedList'
 export { SlateRelationshipConverter } from './field/features/migrations/SlateToLexical/converter/converters/relationship'

test/fields/collections/LexicalMigrate/data.ts

@@ -1,8 +1,20 @@
+import { generateSlateRichText } from '../RichText/generateSlateRichText'
 import { payloadPluginLexicalData } from './generatePayloadPluginLexicalData'
 
 export const lexicalMigrateDocData = {
   title: 'Rich Text',
   lexicalWithLexicalPluginData: payloadPluginLexicalData,
+  lexicalWithSlateData: [
+    ...generateSlateRichText(),
+    {
+      children: [
+        {
+          text: 'Some block quote',
+        },
+      ],
+      type: 'blockquote',
+    },
+  ],
   arrayWithLexicalField: [
     {
       lexicalInArrayField: getSimpleLexicalData('array 1'),

test/fields/collections/LexicalMigrate/index.ts

@@ -4,6 +4,7 @@ import {
   HTMLConverterFeature,
   LexicalPluginToLexicalFeature,
   LinkFeature,
+  SlateToLexicalFeature,
   TreeviewFeature,
   UploadFeature,
   lexicalEditor,
@@ -67,6 +68,46 @@ export const LexicalMigrateFields: CollectionConfig = {
         ],
       }),
     },
+    {
+      name: 'lexicalWithSlateData',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          SlateToLexicalFeature(),
+          TreeviewFeature(),
+          HTMLConverterFeature(),
+          LinkFeature({
+            fields: [
+              {
+                name: 'rel',
+                label: 'Rel Attribute',
+                type: 'select',
+                hasMany: true,
+                options: ['noopener', 'noreferrer', 'nofollow'],
+                admin: {
+                  description:
+                    'The rel attribute defines the relationship between a linked resource and the current document. This is a custom link field.',
+                },
+              },
+            ],
+          }),
+          UploadFeature({
+            collections: {
+              uploads: {
+                fields: [
+                  {
+                    name: 'caption',
+                    type: 'richText',
+                    editor: lexicalEditor(),
+                  },
+                ],
+              },
+            },
+          }),
+        ],
+      }),
+    },
     {
       name: 'lexicalSimple',
       type: 'richText',