Bugfix: Uncaught error on adding new content block

src/app/(payload)/admin/importMap.js

@@ -1,4 +1,5 @@
 import { QueriedPostsComponent as QueriedPostsComponent_a2ad38d8499118f1bebc7752c0fff51e } from '@/blocks/BlogList/fields/QueriedPostsComponent'
+import { DefaultColumnAdder as DefaultColumnAdder_006f8c6c8800e6fe3753b3785f2c4a01 } from '@/blocks/Content/components/DefaultColumnAdder'
 import { SponsorsLayoutDescription as SponsorsLayoutDescription_6f00823041b5b0999b9929fb565110de } from '@/blocks/SponsorsBlock/components/SponsorsLayoutDescription'
 import { DuplicatePageFor as DuplicatePageFor_8f1d8961a356bec6784e5c591c016925 } from '@/collections/Pages/components/DuplicatePageFor'
 import { ViewPageButton as ViewPageButton_5587abba969d5f30cb1f479b0a70bb80 } from '@/collections/Pages/components/ViewPageButton'
@@ -98,6 +99,8 @@ export const importMap = {
   '@/blocks/BlogList/fields/QueriedPostsComponent#QueriedPostsComponent':
     QueriedPostsComponent_a2ad38d8499118f1bebc7752c0fff51e,
   '@/components/ColumnLayoutPicker#default': default_923dc5ccc0b72de4298251644cbfe39e,
+  '@/blocks/Content/components/DefaultColumnAdder#DefaultColumnAdder':
+    DefaultColumnAdder_006f8c6c8800e6fe3753b3785f2c4a01,
   '@payloadcms/plugin-seo/client#OverviewComponent':
     OverviewComponent_a8a977ebc872c5d5ea7ee689724c0860,
   '@payloadcms/plugin-seo/client#MetaImageComponent':

src/blocks/Content/components/DefaultColumnAdder.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useField, useForm } from '@payloadcms/ui'
+import { UIFieldClientComponent } from 'payload'
+import { useEffect, useRef } from 'react'
+
+export const DefaultColumnAdder: UIFieldClientComponent = ({ schemaPath, path, field }) => {
+  const { addFieldRow } = useForm()
+  const hasAddedRowRef = useRef<boolean>(false)
+
+  const parentPath = path.split(`.${field.name}`)[0]
+  const columnsPath = `${parentPath}.columns`
+
+  const parentSchemaPath = schemaPath?.split(`.${field.name}`)[0]
+  const columnsSchemaPath = `${parentSchemaPath}.columns`
+
+  const { value: numColumns } = useField<number>({ path: columnsPath })
+
+  useEffect(
+    function addDefaultColumnIfNoneExist() {
+      if (numColumns === 0 && !hasAddedRowRef.current) {
+        addFieldRow({ path: columnsPath, schemaPath: columnsSchemaPath || '' })
+        hasAddedRowRef.current = true
+      }
+    },
+    [addFieldRow, columnsPath, columnsSchemaPath, numColumns],
+  )
+
+  return null
+}

src/blocks/Content/config.ts

@@ -37,6 +37,28 @@ const validateColumnLayout: SelectFieldValidation = (value, { siblingData }) =>
   return true
 }
 
+const DEFAULT_LEXICAL_NODE = {
+  root: {
+    type: 'root',
+    format: '',
+    indent: 0,
+    version: 1,
+    children: [
+      {
+        type: 'paragraph',
+        format: '',
+        indent: 0,
+        version: 1,
+        children: [],
+        direction: 'ltr',
+        textStyle: '',
+        textFormat: 0,
+      },
+    ],
+    direction: 'ltr',
+  },
+}
+
 export const Content: Block = {
   slug: 'content',
   interfaceName: 'ContentBlock',
@@ -68,6 +90,15 @@ export const Content: Block = {
       },
       validate: validateColumnLayout,
     },
+    {
+      type: 'ui',
+      name: 'defaultColumnAdder',
+      admin: {
+        components: {
+          Field: '@/blocks/Content/components/DefaultColumnAdder#DefaultColumnAdder',
+        },
+      },
+    },
     {
       name: 'columns',
       label: false,
@@ -76,16 +107,17 @@ export const Content: Block = {
         singular: 'Column',
       },
       required: true,
-      defaultValue: [{}],
       type: 'array',
       admin: {
         initCollapsed: false,
       },
       maxRows: 4,
+      minRows: 1,
       fields: [
         {
           name: 'richText',
           type: 'richText',
+          defaultValue: DEFAULT_LEXICAL_NODE,
           editor: lexicalEditor({
             features: ({ rootFeatures }) => {
               return [