fix(richtext-lexical): lexicalHTML field was persisted in database even though it should not (#6795)

packages/richtext-lexical/src/field/features/converters/html/field/index.ts

@@ -1,5 +1,5 @@
 import type { SerializedEditorState } from 'lexical'
-import type { Field, RichTextField } from 'payload/types'
+import type { Field, FieldAffectingData, RichTextField } from 'payload/types'
 
 import type { AdapterProps, LexicalRichTextAdapter } from '../../../../../types.js'
 import type { SanitizedServerEditorConfig } from '../../../../lexical/config/types.js'
@@ -17,6 +17,12 @@ type Props = {
    */
   hidden?: boolean
   name: string
+  /**
+   * Whether the HTML should be stored in the database
+   *
+   * @default false
+   */
+  storeInDB?: boolean
 }
 
 /**
@@ -77,34 +83,11 @@ export const consolidateHTMLConverters = ({
   return filteredConverters
 }
 
-export const lexicalHTML: (
-  /**
-   * A string which matches the lexical field name you want to convert to HTML.
-   *
-   * This has to be a SIBLING field of this lexicalHTML field - otherwise, it won't be able to find the lexical field.
-   **/
-  lexicalFieldName: string,
-  props: Props,
-) => Field = (lexicalFieldName, props) => {
-  const { name = 'lexicalHTML', hidden = true } = props
-  return {
-    name,
-    type: 'code',
-    admin: {
-      editorOptions: {
-        language: 'html',
-      },
-      hidden,
-    },
-    hooks: {
-      afterRead: [
-        async ({ collection, field, global, req, siblingData }) => {
-          const fields = collection ? collection.fields : global.fields
-
 // find the path of this field, as well as its sibling fields, by looking for this `field` in fields and traversing it recursively
 function findFieldPathAndSiblingFields(
   fields: Field[],
   path: string[],
+  field: FieldAffectingData,
 ): {
   path: string[]
   siblingFields: Field[]
@@ -121,6 +104,7 @@ export const lexicalHTML: (
       const result = findFieldPathAndSiblingFields(
         curField.fields,
         'name' in curField ? [...path, curField.name] : [...path],
+        field,
       )
       if (result) {
         return result
@@ -130,6 +114,7 @@ export const lexicalHTML: (
         const result = findFieldPathAndSiblingFields(
           tab.fields,
           'name' in tab ? [...path, tab.name] : [...path],
+          field,
         )
         if (result) {
           return result
@@ -138,11 +123,11 @@ export const lexicalHTML: (
     } else if ('blocks' in curField) {
       for (const block of curField.blocks) {
         if (block?.fields?.length) {
-                    const result = findFieldPathAndSiblingFields(block.fields, [
-                      ...path,
-                      curField.name,
-                      block.slug,
-                    ])
+          const result = findFieldPathAndSiblingFields(
+            block.fields,
+            [...path, curField.name, block.slug],
+            field,
+          )
           if (result) {
             return result
           }
@@ -154,7 +139,31 @@ export const lexicalHTML: (
   return null
 }
 
-          const foundSiblingFields = findFieldPathAndSiblingFields(fields, [])
+export const lexicalHTML: (
+  /**
+   * A string which matches the lexical field name you want to convert to HTML.
+   *
+   * This has to be a SIBLING field of this lexicalHTML field - otherwise, it won't be able to find the lexical field.
+   **/
+  lexicalFieldName: string,
+  props: Props,
+) => Field = (lexicalFieldName, props) => {
+  const { name = 'lexicalHTML', hidden = true, storeInDB = false } = props
+  return {
+    name,
+    type: 'code',
+    admin: {
+      editorOptions: {
+        language: 'html',
+      },
+      hidden,
+    },
+    hooks: {
+      afterRead: [
+        async ({ collection, field, global, req, siblingData }) => {
+          const fields = collection ? collection.fields : global.fields
+
+          const foundSiblingFields = findFieldPathAndSiblingFields(fields, [], field)
 
           if (!foundSiblingFields)
             throw new Error(
@@ -204,6 +213,15 @@ export const lexicalHTML: (
           })
         },
       ],
+      beforeChange: [
+        ({ siblingData, value }) => {
+          if (storeInDB) {
+            return value
+          }
+          delete siblingData[name]
+          return null
+        },
+      ],
     },
   }
 }