@payloadcms/richtext-lexical 3.71.0-canary.3 → 3.71.0-internal-debug.dea9d74

package/dist/features/blocks/client/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","Collapsible","Drawer","EditDepthProvider","ErrorPill","Form","formatDrawerSlug","FormSubmit","Pill","RenderFields","SectionTitle","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useFormSubmitted","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","useCallback","useEffect","useMemo","useRef","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isBlockNode","BlockContent","removeEmptyArrayValues","BlockComponent","props","cacheBuster","className","baseClass","formData","nodeKey","submitted","id","collectionSlug","globalSlug","fieldProps","featureClientSchemaMap","field","parentLexicalRichTextField","initialLexicalFormState","schemaPath","uuidFromContext","fields","parentDocumentFields","onChangeAbortControllerRef","AbortController","editDepth","errorCount","setErrorCount","useState","config","drawerSlug","slug","depth","toggleDrawer","getDocPreferences","setDocFieldPreferences","editor","isEditable","blockType","getFormState","schemaFieldsPath","initialState","setInitialState","cachedFormState","formState","mergedState","Object","fromEntries","entries","map","fieldName","fieldState","initialValue","value","blockName","passesCondition","valid","hasMounted","prevCacheBuster","current","CustomLabel","setCustomLabel","customComponents","BlockLabel","undefined","CustomBlock","setCustomBlock","Block","abortController","awaitInitialState","state","data","docPermissions","docPreferences","documentFormState","initialBlockData","operation","readOnly","renderAllFields","signal","newFormStateData","update","node","newData","setFields","_components","isCollapsed","setIsCollapsed","collapsed","componentMapRenderedBlockPath","clientSchemaMap","blocksField","clientBlock","blockReferences","blocksMap","blocks","i18n","t","onChange","prevFormState","submit","controller","newFormState","initialBlockFormState","setTimeout","rowErrorCount","formField","values","removeBlock","remove","blockDisplayName","labels","singular","onCollapsedChange","changedCollapsed","then","currentDocPreferences","currentFieldPreferences","name","collapsedArray","newCollapsed","length","includes","push","splice","indexOf","hello","EditButton","_jsx","buttonStyle","disabled","el","icon","onClick","e","preventDefault","stopPropagation","onMouseDown","round","size","tooltip","label","RemoveButton","BlockCollapsible","Actions","children","collapsibleProps","disableBlockName","editButton","fieldHasErrors","Label","CustomPill","removeButton","filter","Boolean","join","collapsibleStyle","header","_jsxs","pillStyle","admin","path","count","withMessage","_Fragment","onToggle","incomingCollapsedState","blockID","BlockDrawer","title","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","programmaticSubmit","beforeSubmit","onSubmit","formSchema"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Collapsible,\n  Drawer,\n  EditDepthProvider,\n  ErrorPill,\n  Form,\n  formatDrawerSlug,\n  FormSubmit,\n  Pill,\n  RenderFields,\n  SectionTitle,\n  useConfig,\n  useDocumentForm,\n  useDocumentInfo,\n  useEditDepth,\n  useFormSubmitted,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { $getNodeByKey } from 'lexical'\nimport {\n  type BlocksFieldClient,\n  type ClientBlock,\n  type CollapsedPreferences,\n  type FormState,\n} from 'payload'\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isBlockNode } from '../nodes/BlocksNode.js'\nimport { type BlockCollapsibleWithErrorProps, BlockContent } from './BlockContent.js'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n  /**\n   * Can be modified by the node in order to trigger the re-fetch of the initial state based on the\n   * formData. This is useful when node.setFields() is explicitly called from outside of the form - in\n   * this case, the new field state is likely not reflected in the form state, so we need to re-fetch\n   */\n  readonly cacheBuster: number\n  readonly className: string\n  readonly formData: BlockFields\n  readonly nodeKey: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { cacheBuster, className: baseClass, formData, nodeKey } = props\n  const submitted = useFormSubmitted()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n  const {\n    fieldProps: {\n      featureClientSchemaMap,\n      field: parentLexicalRichTextField,\n      initialLexicalFormState,\n      schemaPath,\n    },\n    uuid: uuidFromContext,\n  } = useEditorConfigContext()\n\n  const { fields: parentDocumentFields } = useDocumentForm()\n  const onChangeAbortControllerRef = useRef(new AbortController())\n  const editDepth = useEditDepth()\n  const [errorCount, setErrorCount] = React.useState(0)\n\n  const { config } = useConfig()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug)\n\n  // Used for saving collapsed to preferences (and gettin' it from there again)\n  // Remember, these preferences are scoped to the whole document, not just this form. This\n  // is important to consider for the data path used in setDocFieldPreferences\n  const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo()\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n\n  const blockType = formData.blockType\n\n  const { getFormState } = useServerFunctions()\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`\n\n  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(() => {\n    // Initial form state that was calculated server-side. May have stale values\n    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState\n    if (!cachedFormState) {\n      return false\n    }\n\n    // Merge current formData values into the cached form state\n    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits\n    const mergedState = Object.fromEntries(\n      Object.entries(cachedFormState).map(([fieldName, fieldState]) => [\n        fieldName,\n        fieldName in formData\n          ? {\n              ...fieldState,\n              initialValue: formData[fieldName],\n              value: formData[fieldName],\n            }\n          : fieldState,\n      ]),\n    )\n\n    // Manually add blockName, as it's not part of cachedFormState\n    mergedState.blockName = {\n      initialValue: formData.blockName,\n      passesCondition: true,\n      valid: true,\n      value: formData.blockName,\n    }\n\n    return mergedState\n  })\n\n  const hasMounted = useRef(false)\n  const prevCacheBuster = useRef(cacheBuster)\n  useEffect(() => {\n    if (hasMounted.current) {\n      if (prevCacheBuster.current !== cacheBuster) {\n        setInitialState(false)\n      }\n      prevCacheBuster.current = cacheBuster\n    } else {\n      hasMounted.current = true\n    }\n  }, [cacheBuster])\n\n  const [CustomLabel, setCustomLabel] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.BlockLabel ?? undefined,\n  )\n\n  const [CustomBlock, setCustomBlock] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.Block ?? undefined,\n  )\n\n  // Initial state for newly created blocks\n  useEffect(() => {\n    const abortController = new AbortController()\n\n    const awaitInitialState = async () => {\n      /*\n       * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,\n       * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side\n       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n       */\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data: formData,\n        docPermissions: { fields: true },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        globalSlug,\n        initialBlockData: formData,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: true,\n        schemaPath: schemaFieldsPath,\n        signal: abortController.signal,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: formData.blockName,\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        const newFormStateData: BlockFields = reduceFieldsToValues(\n          deepCopyObjectSimpleWithoutReactComponents(state),\n          true,\n        ) as BlockFields\n\n        // Things like default values may come back from the server => update the node with the new data\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = blockType\n\n            node.setFields(newData, true)\n          }\n        })\n\n        setInitialState(state)\n        setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined)\n        setCustomBlock(state._components?.customComponents?.Block ?? undefined)\n      }\n    }\n\n    if (formData && !initialState) {\n      void awaitInitialState()\n    }\n\n    return () => {\n      abortAndIgnore(abortController)\n    }\n  }, [\n    getFormState,\n    schemaFieldsPath,\n    isEditable,\n    id,\n    formData,\n    editor,\n    nodeKey,\n    initialState,\n    collectionSlug,\n    globalSlug,\n    getDocPreferences,\n    parentDocumentFields,\n    blockType,\n  ])\n\n  const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\n    initialLexicalFormState?.[formData.id]?.collapsed ?? false,\n  )\n\n  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`\n\n  const clientSchemaMap = featureClientSchemaMap['blocks']\n\n  const blocksField: BlocksFieldClient | undefined = clientSchemaMap?.[\n    componentMapRenderedBlockPath\n  ]?.[0] as BlocksFieldClient\n\n  const clientBlock: ClientBlock | undefined = blocksField.blockReferences\n    ? typeof blocksField?.blockReferences?.[0] === 'string'\n      ? config.blocksMap[blocksField?.blockReferences?.[0]]\n      : blocksField?.blockReferences?.[0]\n    : blocksField?.blocks?.[0]\n\n  const { i18n, t } = useTranslation<object, string>()\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState, submit }: { formState: FormState; submit?: boolean }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state: newFormState } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        formState: prevFormState,\n        globalSlug,\n        initialBlockFormState: prevFormState,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: submit ? true : false,\n        schemaPath: schemaFieldsPath,\n        signal: controller.signal,\n      })\n\n      if (!newFormState) {\n        return prevFormState\n      }\n\n      if (prevFormState.blockName) {\n        newFormState.blockName = prevFormState.blockName\n      }\n\n      const newFormStateData: BlockFields = reduceFieldsToValues(\n        removeEmptyArrayValues({\n          fields: deepCopyObjectSimpleWithoutReactComponents(newFormState),\n        }),\n        true,\n      ) as BlockFields\n\n      setTimeout(() => {\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = blockType\n            node.setFields(newData, true)\n          }\n        })\n      }, 0)\n\n      if (submit) {\n        setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined)\n        setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined)\n\n        let rowErrorCount = 0\n        for (const formField of Object.values(newFormState)) {\n          if (formField?.valid === false) {\n            rowErrorCount++\n          }\n        }\n        setErrorCount(rowErrorCount)\n      }\n\n      return newFormState\n    },\n\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      getDocPreferences,\n      globalSlug,\n      schemaFieldsPath,\n      blockType,\n      parentDocumentFields,\n      isEditable,\n      editor,\n      nodeKey,\n    ],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  const removeBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const blockDisplayName = clientBlock?.labels?.singular\n    ? getTranslation(clientBlock.labels.singular, i18n)\n    : clientBlock?.slug\n\n  const onCollapsedChange = useCallback(\n    (changedCollapsed: boolean) => {\n      void getDocPreferences().then((currentDocPreferences) => {\n        const currentFieldPreferences =\n          currentDocPreferences?.fields?.[parentLexicalRichTextField.name]\n\n        const collapsedArray = currentFieldPreferences?.collapsed\n\n        const newCollapsed: CollapsedPreferences =\n          collapsedArray && collapsedArray?.length ? collapsedArray : []\n\n        if (changedCollapsed) {\n          if (!newCollapsed.includes(formData.id)) {\n            newCollapsed.push(formData.id)\n          }\n        } else {\n          if (newCollapsed.includes(formData.id)) {\n            newCollapsed.splice(newCollapsed.indexOf(formData.id), 1)\n          }\n        }\n\n        setDocFieldPreferences(parentLexicalRichTextField.name, {\n          collapsed: newCollapsed,\n          hello: 'hi',\n        })\n      })\n    },\n    [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={!isEditable}\n        el=\"button\"\n        icon=\"edit\"\n        onClick={(e) => {\n          e.preventDefault()\n          e.stopPropagation()\n          toggleDrawer()\n          return false\n        }}\n        onMouseDown={(e) => {\n          // Needed to preserve lexical selection for toggleDrawer lexical selection restore.\n          // I believe this is needed due to this button (usually) being inside of a collapsible.\n          e.preventDefault()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, isEditable, t, blockDisplayName, toggleDrawer],\n  )\n\n  const RemoveButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__removeButton`}\n        disabled={!isEditable}\n        icon=\"x\"\n        onClick={(e) => {\n          e.preventDefault()\n          removeBlock()\n        }}\n        round\n        tooltip=\"Remove Block\"\n      />\n    ),\n    [baseClass, isEditable, removeBlock],\n  )\n\n  const BlockCollapsible = useMemo(\n    () =>\n      ({\n        Actions,\n        children,\n        className,\n        collapsibleProps,\n        disableBlockName,\n        editButton,\n        errorCount,\n        fieldHasErrors,\n        Label,\n        Pill: CustomPill,\n        removeButton,\n      }: BlockCollapsibleWithErrorProps) => {\n        return (\n          <div className={`${baseClass}__container ${baseClass}-${blockType}`}>\n            <Collapsible\n              className={[\n                `${baseClass}__row`,\n                fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n                className,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n              header={\n                <div className={`${baseClass}__block-header`}>\n                  {typeof Label !== 'undefined' ? (\n                    Label\n                  ) : typeof CustomLabel !== 'undefined' ? (\n                    CustomLabel\n                  ) : (\n                    <div className={`${baseClass}__block-label`}>\n                      {typeof CustomPill !== 'undefined' ? (\n                        CustomPill\n                      ) : (\n                        <Pill\n                          className={`${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`}\n                          pillStyle=\"white\"\n                          size=\"small\"\n                        >\n                          {blockDisplayName ?? blockType}\n                        </Pill>\n                      )}\n                      {!disableBlockName && !clientBlock?.admin?.disableBlockName && (\n                        <SectionTitle path=\"blockName\" readOnly={!isEditable} />\n                      )}\n\n                      {fieldHasErrors && (\n                        <ErrorPill count={errorCount ?? 0} i18n={i18n} withMessage />\n                      )}\n                    </div>\n                  )}\n\n                  <div className={`${baseClass}__block-actions`}>\n                    {typeof Actions !== 'undefined' ? (\n                      Actions\n                    ) : (\n                      <>\n                        {(CustomBlock && editButton !== false) || (!CustomBlock && editButton) ? (\n                          <EditButton />\n                        ) : null}\n                        {removeButton !== false && isEditable ? <RemoveButton /> : null}\n                      </>\n                    )}\n                  </div>\n                </div>\n              }\n              isCollapsed={isCollapsed}\n              key={0}\n              onToggle={(incomingCollapsedState) => {\n                onCollapsedChange(incomingCollapsedState)\n                setIsCollapsed(incomingCollapsedState)\n              }}\n              {...(collapsibleProps || {})}\n            >\n              {children}\n            </Collapsible>\n          </div>\n        )\n      },\n    [\n      CustomBlock,\n      CustomLabel,\n      EditButton,\n      RemoveButton,\n      blockDisplayName,\n      baseClass,\n      clientBlock?.admin?.disableBlockName,\n      blockType,\n      i18n,\n      isCollapsed,\n      onCollapsedChange,\n      isEditable,\n    ],\n  )\n\n  const blockID = formData?.id\n\n  const BlockDrawer = useMemo(\n    () => () => (\n      <EditDepthProvider>\n        <Drawer\n          className={''}\n          slug={drawerSlug}\n          title={t(`lexical:blocks:inlineBlocks:${blockID ? 'edit' : 'create'}`, {\n            label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n          })}\n        >\n          {initialState ? (\n            <>\n              <RenderFields\n                fields={clientBlock?.fields ?? []}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\" // See Blocks feature path for details as for why this is empty\n                parentSchemaPath={schemaFieldsPath}\n                permissions={true}\n                readOnly={!isEditable}\n              />\n              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>\n            </>\n          ) : null}\n        </Drawer>\n      </EditDepthProvider>\n    ),\n    [\n      initialState,\n      drawerSlug,\n      blockID,\n      blockDisplayName,\n      t,\n      isEditable,\n      clientBlock?.fields,\n      schemaFieldsPath,\n      // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    ],\n  )\n\n  // Memoized Form JSX\n  const Block = useMemo(() => {\n    if (!initialState) {\n      return null\n    }\n    return (\n      <Form\n        beforeSubmit={[\n          async ({ formState }) => {\n            // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n            return await onChange({ formState, submit: true })\n          },\n        ]}\n        el=\"div\"\n        fields={clientBlock?.fields ?? []}\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={(formState, newData) => {\n          // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n          newData.blockType = blockType\n          editor.update(() => {\n            const node = $getNodeByKey(nodeKey)\n            if (node && $isBlockNode(node)) {\n              node.setFields(newData as BlockFields, true)\n            }\n          })\n          toggleDrawer()\n        }}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          BlockDrawer={BlockDrawer}\n          Collapsible={BlockCollapsible}\n          CustomBlock={CustomBlock}\n          EditButton={EditButton}\n          errorCount={errorCount}\n          formSchema={clientBlock?.fields ?? []}\n          initialState={initialState}\n          nodeKey={nodeKey}\n          RemoveButton={RemoveButton}\n        />\n      </Form>\n    )\n  }, [\n    BlockCollapsible,\n    BlockDrawer,\n    CustomBlock,\n    blockType,\n    RemoveButton,\n    EditButton,\n    baseClass,\n    editor,\n    errorCount,\n    toggleDrawer,\n    clientBlock?.fields,\n    // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    initialState,\n    nodeKey,\n    onChange,\n    submitted,\n  ])\n\n  if (!clientBlock) {\n    return (\n      <BlockCollapsible disableBlockName={true} fieldHasErrors={true}>\n        <div className={`${baseClass}-not-found`}>\n          Error: Block '{blockType}' not found in the config but exists in the lexical data\n        </div>\n      </BlockCollapsible>\n    )\n  }\n\n  return Block\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Collapsible,\n  Drawer,\n  EditDepthProvider,\n  ErrorPill,\n  Form,\n  formatDrawerSlug,\n  FormSubmit,\n  Pill,\n  RenderFields,\n  SectionTitle,\n  useConfig,\n  useDocumentForm,\n  useDocumentInfo,\n  useEditDepth,\n  useFormSubmitted,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { $getNodeByKey } from 'lexical'\nimport {\n  type BlocksFieldClient,\n  type ClientBlock,\n  type CollapsedPreferences,\n  type FormState,\n} from 'payload'\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport './index.scss'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isBlockNode } from '../nodes/BlocksNode.js'\nimport { type BlockCollapsibleWithErrorProps, BlockContent } from './BlockContent.js'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n  /**\n   * Can be modified by the node in order to trigger the re-fetch of the initial state based on the\n   * formData. This is useful when node.setFields() is explicitly called from outside of the form - in\n   * this case, the new field state is likely not reflected in the form state, so we need to re-fetch\n   */\n  readonly cacheBuster: number\n  readonly className: string\n  readonly formData: BlockFields\n  readonly nodeKey: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { cacheBuster, className: baseClass, formData, nodeKey } = props\n  const submitted = useFormSubmitted()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n  const {\n    fieldProps: {\n      featureClientSchemaMap,\n      field: parentLexicalRichTextField,\n      initialLexicalFormState,\n      schemaPath,\n    },\n    uuid: uuidFromContext,\n  } = useEditorConfigContext()\n\n  const { fields: parentDocumentFields } = useDocumentForm()\n  const onChangeAbortControllerRef = useRef(new AbortController())\n  const editDepth = useEditDepth()\n  const [errorCount, setErrorCount] = React.useState(0)\n\n  const { config } = useConfig()\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug)\n\n  // Used for saving collapsed to preferences (and gettin' it from there again)\n  // Remember, these preferences are scoped to the whole document, not just this form. This\n  // is important to consider for the data path used in setDocFieldPreferences\n  const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo()\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n\n  const blockType = formData.blockType\n\n  const { getFormState } = useServerFunctions()\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`\n\n  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(() => {\n    // Initial form state that was calculated server-side. May have stale values\n    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState\n    if (!cachedFormState) {\n      return false\n    }\n\n    // Merge current formData values into the cached form state\n    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits\n    const mergedState = Object.fromEntries(\n      Object.entries(cachedFormState).map(([fieldName, fieldState]) => [\n        fieldName,\n        fieldName in formData\n          ? {\n              ...fieldState,\n              initialValue: formData[fieldName],\n              value: formData[fieldName],\n            }\n          : fieldState,\n      ]),\n    )\n\n    // Manually add blockName, as it's not part of cachedFormState\n    mergedState.blockName = {\n      initialValue: formData.blockName,\n      passesCondition: true,\n      valid: true,\n      value: formData.blockName,\n    }\n\n    return mergedState\n  })\n\n  const hasMounted = useRef(false)\n  const prevCacheBuster = useRef(cacheBuster)\n  useEffect(() => {\n    if (hasMounted.current) {\n      if (prevCacheBuster.current !== cacheBuster) {\n        setInitialState(false)\n      }\n      prevCacheBuster.current = cacheBuster\n    } else {\n      hasMounted.current = true\n    }\n  }, [cacheBuster])\n\n  const [CustomLabel, setCustomLabel] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.BlockLabel ?? undefined,\n  )\n\n  const [CustomBlock, setCustomBlock] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.Block ?? undefined,\n  )\n\n  // Initial state for newly created blocks\n  useEffect(() => {\n    const abortController = new AbortController()\n\n    const awaitInitialState = async () => {\n      /*\n       * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,\n       * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side\n       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n       */\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data: formData,\n        docPermissions: { fields: true },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        globalSlug,\n        initialBlockData: formData,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: true,\n        schemaPath: schemaFieldsPath,\n        signal: abortController.signal,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: formData.blockName,\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        const newFormStateData: BlockFields = reduceFieldsToValues(\n          deepCopyObjectSimpleWithoutReactComponents(state),\n          true,\n        ) as BlockFields\n\n        // Things like default values may come back from the server => update the node with the new data\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = blockType\n\n            node.setFields(newData, true)\n          }\n        })\n\n        setInitialState(state)\n        setCustomLabel(state._components?.customComponents?.BlockLabel ?? undefined)\n        setCustomBlock(state._components?.customComponents?.Block ?? undefined)\n      }\n    }\n\n    if (formData && !initialState) {\n      void awaitInitialState()\n    }\n\n    return () => {\n      abortAndIgnore(abortController)\n    }\n  }, [\n    getFormState,\n    schemaFieldsPath,\n    isEditable,\n    id,\n    formData,\n    editor,\n    nodeKey,\n    initialState,\n    collectionSlug,\n    globalSlug,\n    getDocPreferences,\n    parentDocumentFields,\n    blockType,\n  ])\n\n  const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\n    initialLexicalFormState?.[formData.id]?.collapsed ?? false,\n  )\n\n  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`\n\n  const clientSchemaMap = featureClientSchemaMap['blocks']\n\n  const blocksField: BlocksFieldClient | undefined = clientSchemaMap?.[\n    componentMapRenderedBlockPath\n  ]?.[0] as BlocksFieldClient\n\n  const clientBlock: ClientBlock | undefined = blocksField.blockReferences\n    ? typeof blocksField?.blockReferences?.[0] === 'string'\n      ? config.blocksMap[blocksField?.blockReferences?.[0]]\n      : blocksField?.blockReferences?.[0]\n    : blocksField?.blocks?.[0]\n\n  const { i18n, t } = useTranslation<object, string>()\n\n  const onChange = useCallback(\n    async ({ formState: prevFormState, submit }: { formState: FormState; submit?: boolean }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state: newFormState } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        formState: prevFormState,\n        globalSlug,\n        initialBlockFormState: prevFormState,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: submit ? true : false,\n        schemaPath: schemaFieldsPath,\n        signal: controller.signal,\n      })\n\n      if (!newFormState) {\n        return prevFormState\n      }\n\n      if (prevFormState.blockName) {\n        newFormState.blockName = prevFormState.blockName\n      }\n\n      const newFormStateData: BlockFields = reduceFieldsToValues(\n        removeEmptyArrayValues({\n          fields: deepCopyObjectSimpleWithoutReactComponents(newFormState),\n        }),\n        true,\n      ) as BlockFields\n\n      setTimeout(() => {\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = blockType\n            node.setFields(newData, true)\n          }\n        })\n      }, 0)\n\n      if (submit) {\n        setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined)\n        setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined)\n\n        let rowErrorCount = 0\n        for (const formField of Object.values(newFormState)) {\n          if (formField?.valid === false) {\n            rowErrorCount++\n          }\n        }\n        setErrorCount(rowErrorCount)\n      }\n\n      return newFormState\n    },\n\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      getDocPreferences,\n      globalSlug,\n      schemaFieldsPath,\n      blockType,\n      parentDocumentFields,\n      isEditable,\n      editor,\n      nodeKey,\n    ],\n  )\n\n  useEffect(() => {\n    return () => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [])\n\n  const removeBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const blockDisplayName = clientBlock?.labels?.singular\n    ? getTranslation(clientBlock.labels.singular, i18n)\n    : clientBlock?.slug\n\n  const onCollapsedChange = useCallback(\n    (changedCollapsed: boolean) => {\n      void getDocPreferences().then((currentDocPreferences) => {\n        const currentFieldPreferences =\n          currentDocPreferences?.fields?.[parentLexicalRichTextField.name]\n\n        const collapsedArray = currentFieldPreferences?.collapsed\n\n        const newCollapsed: CollapsedPreferences =\n          collapsedArray && collapsedArray?.length ? collapsedArray : []\n\n        if (changedCollapsed) {\n          if (!newCollapsed.includes(formData.id)) {\n            newCollapsed.push(formData.id)\n          }\n        } else {\n          if (newCollapsed.includes(formData.id)) {\n            newCollapsed.splice(newCollapsed.indexOf(formData.id), 1)\n          }\n        }\n\n        setDocFieldPreferences(parentLexicalRichTextField.name, {\n          collapsed: newCollapsed,\n          hello: 'hi',\n        })\n      })\n    },\n    [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={!isEditable}\n        el=\"button\"\n        icon=\"edit\"\n        onClick={(e) => {\n          e.preventDefault()\n          e.stopPropagation()\n          toggleDrawer()\n          return false\n        }}\n        onMouseDown={(e) => {\n          // Needed to preserve lexical selection for toggleDrawer lexical selection restore.\n          // I believe this is needed due to this button (usually) being inside of a collapsible.\n          e.preventDefault()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, isEditable, t, blockDisplayName, toggleDrawer],\n  )\n\n  const RemoveButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__removeButton`}\n        disabled={!isEditable}\n        icon=\"x\"\n        onClick={(e) => {\n          e.preventDefault()\n          removeBlock()\n        }}\n        round\n        tooltip=\"Remove Block\"\n      />\n    ),\n    [baseClass, isEditable, removeBlock],\n  )\n\n  const BlockCollapsible = useMemo(\n    () =>\n      ({\n        Actions,\n        children,\n        className,\n        collapsibleProps,\n        disableBlockName,\n        editButton,\n        errorCount,\n        fieldHasErrors,\n        Label,\n        Pill: CustomPill,\n        removeButton,\n      }: BlockCollapsibleWithErrorProps) => {\n        return (\n          <div className={`${baseClass}__container ${baseClass}-${blockType}`}>\n            <Collapsible\n              className={[\n                `${baseClass}__row`,\n                fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n                className,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n              header={\n                <div className={`${baseClass}__block-header`}>\n                  {typeof Label !== 'undefined' ? (\n                    Label\n                  ) : typeof CustomLabel !== 'undefined' ? (\n                    CustomLabel\n                  ) : (\n                    <div className={`${baseClass}__block-label`}>\n                      {typeof CustomPill !== 'undefined' ? (\n                        CustomPill\n                      ) : (\n                        <Pill\n                          className={`${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`}\n                          pillStyle=\"white\"\n                          size=\"small\"\n                        >\n                          {blockDisplayName ?? blockType}\n                        </Pill>\n                      )}\n                      {!disableBlockName && !clientBlock?.admin?.disableBlockName && (\n                        <SectionTitle path=\"blockName\" readOnly={!isEditable} />\n                      )}\n\n                      {fieldHasErrors && (\n                        <ErrorPill count={errorCount ?? 0} i18n={i18n} withMessage />\n                      )}\n                    </div>\n                  )}\n\n                  <div className={`${baseClass}__block-actions`}>\n                    {typeof Actions !== 'undefined' ? (\n                      Actions\n                    ) : (\n                      <>\n                        {(CustomBlock && editButton !== false) || (!CustomBlock && editButton) ? (\n                          <EditButton />\n                        ) : null}\n                        {removeButton !== false && isEditable ? <RemoveButton /> : null}\n                      </>\n                    )}\n                  </div>\n                </div>\n              }\n              isCollapsed={isCollapsed}\n              key={0}\n              onToggle={(incomingCollapsedState) => {\n                onCollapsedChange(incomingCollapsedState)\n                setIsCollapsed(incomingCollapsedState)\n              }}\n              {...(collapsibleProps || {})}\n            >\n              {children}\n            </Collapsible>\n          </div>\n        )\n      },\n    [\n      CustomBlock,\n      CustomLabel,\n      EditButton,\n      RemoveButton,\n      blockDisplayName,\n      baseClass,\n      clientBlock?.admin?.disableBlockName,\n      blockType,\n      i18n,\n      isCollapsed,\n      onCollapsedChange,\n      isEditable,\n    ],\n  )\n\n  const blockID = formData?.id\n\n  const BlockDrawer = useMemo(\n    () => () => (\n      <EditDepthProvider>\n        <Drawer\n          className={''}\n          slug={drawerSlug}\n          title={t(`lexical:blocks:inlineBlocks:${blockID ? 'edit' : 'create'}`, {\n            label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n          })}\n        >\n          {initialState ? (\n            <>\n              <RenderFields\n                fields={clientBlock?.fields ?? []}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\" // See Blocks feature path for details as for why this is empty\n                parentSchemaPath={schemaFieldsPath}\n                permissions={true}\n                readOnly={!isEditable}\n              />\n              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>\n            </>\n          ) : null}\n        </Drawer>\n      </EditDepthProvider>\n    ),\n    [\n      initialState,\n      drawerSlug,\n      blockID,\n      blockDisplayName,\n      t,\n      isEditable,\n      clientBlock?.fields,\n      schemaFieldsPath,\n      // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    ],\n  )\n\n  // Memoized Form JSX\n  const Block = useMemo(() => {\n    if (!initialState) {\n      return null\n    }\n    return (\n      <Form\n        beforeSubmit={[\n          async ({ formState }) => {\n            // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n            return await onChange({ formState, submit: true })\n          },\n        ]}\n        el=\"div\"\n        fields={clientBlock?.fields ?? []}\n        initialState={initialState}\n        onChange={[onChange]}\n        onSubmit={(formState, newData) => {\n          // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n          newData.blockType = blockType\n          editor.update(() => {\n            const node = $getNodeByKey(nodeKey)\n            if (node && $isBlockNode(node)) {\n              node.setFields(newData as BlockFields, true)\n            }\n          })\n          toggleDrawer()\n        }}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          BlockDrawer={BlockDrawer}\n          Collapsible={BlockCollapsible}\n          CustomBlock={CustomBlock}\n          EditButton={EditButton}\n          errorCount={errorCount}\n          formSchema={clientBlock?.fields ?? []}\n          initialState={initialState}\n          nodeKey={nodeKey}\n          RemoveButton={RemoveButton}\n        />\n      </Form>\n    )\n  }, [\n    BlockCollapsible,\n    BlockDrawer,\n    CustomBlock,\n    blockType,\n    RemoveButton,\n    EditButton,\n    baseClass,\n    editor,\n    errorCount,\n    toggleDrawer,\n    clientBlock?.fields,\n    // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n    initialState,\n    nodeKey,\n    onChange,\n    submitted,\n  ])\n\n  if (!clientBlock) {\n    return (\n      <BlockCollapsible disableBlockName={true} fieldHasErrors={true}>\n        <div className={`${baseClass}-not-found`}>\n          Error: Block '{blockType}' not found in the config but exists in the lexical data\n        </div>\n      </BlockCollapsible>\n    )\n  }\n\n  return Block\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","Collapsible","Drawer","EditDepthProvider","ErrorPill","Form","formatDrawerSlug","FormSubmit","Pill","RenderFields","SectionTitle","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useFormSubmitted","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","useCallback","useEffect","useMemo","useRef","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isBlockNode","BlockContent","removeEmptyArrayValues","BlockComponent","props","cacheBuster","className","baseClass","formData","nodeKey","submitted","id","collectionSlug","globalSlug","fieldProps","featureClientSchemaMap","field","parentLexicalRichTextField","initialLexicalFormState","schemaPath","uuidFromContext","fields","parentDocumentFields","onChangeAbortControllerRef","AbortController","editDepth","errorCount","setErrorCount","useState","config","drawerSlug","slug","depth","toggleDrawer","getDocPreferences","setDocFieldPreferences","editor","isEditable","blockType","getFormState","schemaFieldsPath","initialState","setInitialState","cachedFormState","formState","mergedState","Object","fromEntries","entries","map","fieldName","fieldState","initialValue","value","blockName","passesCondition","valid","hasMounted","prevCacheBuster","current","CustomLabel","setCustomLabel","customComponents","BlockLabel","undefined","CustomBlock","setCustomBlock","Block","abortController","awaitInitialState","state","data","docPermissions","docPreferences","documentFormState","initialBlockData","operation","readOnly","renderAllFields","signal","newFormStateData","update","node","newData","setFields","_components","isCollapsed","setIsCollapsed","collapsed","componentMapRenderedBlockPath","clientSchemaMap","blocksField","clientBlock","blockReferences","blocksMap","blocks","i18n","t","onChange","prevFormState","submit","controller","newFormState","initialBlockFormState","setTimeout","rowErrorCount","formField","values","removeBlock","remove","blockDisplayName","labels","singular","onCollapsedChange","changedCollapsed","then","currentDocPreferences","currentFieldPreferences","name","collapsedArray","newCollapsed","length","includes","push","splice","indexOf","hello","EditButton","buttonStyle","disabled","el","icon","onClick","e","preventDefault","stopPropagation","onMouseDown","round","size","tooltip","label","RemoveButton","BlockCollapsible","Actions","children","collapsibleProps","disableBlockName","editButton","fieldHasErrors","Label","CustomPill","removeButton","div","filter","Boolean","join","collapsibleStyle","header","pillStyle","admin","path","count","withMessage","onToggle","incomingCollapsedState","blockID","BlockDrawer","title","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","programmaticSubmit","beforeSubmit","onSubmit","formSchema"],"mappings":"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"}

package/dist/features/blocks/client/component/index.scss

@@ -0,0 +1,188 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__block {
+    @extend %body;
+    margin-block: base(0.4);
+    // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
+    z-index: 1;
+    color: var(--theme-text);
+
+    &[data-lexical-decorator='true'] {
+      // Increase specifity
+      width: auto;
+    }
+
+    &__container {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
+
+    &__row {
+      .collapsible__toggle-wrap {
+        padding-inline-start: base(0.4);
+      }
+    }
+
+    &__header {
+      h3 {
+        margin: 0;
+      }
+    }
+
+    &__header-wrap {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    &__heading-with-error {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    &--has-no-error {
+      > .array-field__header .array-field__heading-with-error {
+        color: var(--theme-text);
+      }
+    }
+
+    &--has-error {
+      > .array-field__header {
+        color: var(--theme-error-500);
+      }
+    }
+
+    &__error-pill {
+      align-self: center;
+    }
+
+    &__header-actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+    }
+
+    &__header-action {
+      @extend %btn-reset;
+      cursor: pointer;
+      margin-left: calc(var(--base) * 0.5);
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    .collapsible {
+      &__header-wrap {
+        //  Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
+        right: calc(var(--base) * 1.5);
+      }
+    }
+
+    &__removeButton.btn {
+      margin: 0;
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
+
+    &__editButton.btn {
+      margin: 0;
+      width: 24px;
+
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
+    }
+
+    &__block-header {
+      pointer-events: none;
+    }
+
+    &__block-header * {
+      pointer-events: all;
+    }
+
+    &__block-header,
+    &__block-header > div:first-child {
+      display: flex;
+      max-width: 100%;
+      width: 100%;
+      overflow: hidden;
+      gap: calc(var(--base) * 0.375);
+      justify-content: flex-start;
+      pointer-events: none;
+
+      & > * {
+        pointer-events: all;
+      }
+    }
+
+    &__block-header > div:nth-child(2) {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &__block-number {
+      flex-shrink: 0;
+    }
+
+    &__block-pill {
+      flex-shrink: 0;
+      display: block;
+      line-height: unset;
+    }
+
+    &__rows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
+
+    &__drawer-toggler {
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      border: none;
+      align-self: flex-start;
+
+      .btn {
+        color: var(--theme-elevation-400);
+        margin: 0;
+
+        &:hover {
+          color: var(--theme-elevation-800);
+        }
+      }
+    }
+
+    &-not-found {
+      color: var(--theme-error-500);
+      font-size: 1.1rem;
+    }
+  }
+
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-750);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-500);
+      }
+    }
+  }
+}

package/dist/features/blocks/client/component/removeEmptyArrayValues.js

@@ -1,20 +1,17 @@
 'use client';
-
 /**
  * By default, if an array field is empty, it will be included in the form state with a value of 0.
  * We do not need this behavior here, By setting `disableFormData` to true, we can prevent the field from being included in the form state
  * like that.
  * @param fields form state
- */
-export function removeEmptyArrayValues({
-  fields
-}) {
-  for (const key in fields) {
-    const field = fields[key];
-    if (Array.isArray(field?.rows) && 'value' in field) {
-      field.disableFormData = true;
+ */ export function removeEmptyArrayValues({ fields }) {
+    for(const key in fields){
+        const field = fields[key];
+        if (Array.isArray(field?.rows) && 'value' in field) {
+            field.disableFormData = true;
+        }
     }
-  }
-  return fields;
+    return fields;
 }
+
 //# sourceMappingURL=removeEmptyArrayValues.js.map

package/dist/features/blocks/client/component/removeEmptyArrayValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"removeEmptyArrayValues.js","names":["removeEmptyArrayValues","fields","key","field","Array","isArray","rows","disableFormData"],"sources":["../../../../../src/features/blocks/client/component/removeEmptyArrayValues.ts"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\n/**\n * By default, if an array field is empty, it will be included in the form state with a value of 0.\n * We do not need this behavior here, By setting `disableFormData` to true, we can prevent the field from being included in the form state\n * like that.\n * @param fields form state\n */\nexport function removeEmptyArrayValues({ fields }: { fields: FormState }): FormState {\n  for (const key in fields) {\n    const field = fields[key]\n    if (Array.isArray(field?.rows) && 'value' in field) {\n      field.disableFormData = true\n    }\n  }\n  return fields\n}\n"],"mappings":"AAAA;;AAGA;;;;;;AAMA,OAAO,SAASA,uBAAuB;EAAEC;AAAM,CAAyB;EACtE,KAAK,MAAMC,GAAA,IAAOD,MAAA,EAAQ;IACxB,MAAME,KAAA,GAAQF,MAAM,CAACC,GAAA,CAAI;IACzB,IAAIE,KAAA,CAAMC,OAAO,CAACF,KAAA,EAAOG,IAAA,KAAS,WAAWH,KAAA,EAAO;MAClDA,KAAA,CAAMI,eAAe,GAAG;IAC1B;EACF;EACA,OAAON,MAAA;AACT","ignoreList":[]}
+{"version":3,"sources":["../../../../../src/features/blocks/client/component/removeEmptyArrayValues.ts"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\n/**\n * By default, if an array field is empty, it will be included in the form state with a value of 0.\n * We do not need this behavior here, By setting `disableFormData` to true, we can prevent the field from being included in the form state\n * like that.\n * @param fields form state\n */\nexport function removeEmptyArrayValues({ fields }: { fields: FormState }): FormState {\n  for (const key in fields) {\n    const field = fields[key]\n    if (Array.isArray(field?.rows) && 'value' in field) {\n      field.disableFormData = true\n    }\n  }\n  return fields\n}\n"],"names":["removeEmptyArrayValues","fields","key","field","Array","isArray","rows","disableFormData"],"mappings":"AAAA;AAGA;;;;;CAKC,GACD,OAAO,SAASA,uBAAuB,EAAEC,MAAM,EAAyB;IACtE,IAAK,MAAMC,OAAOD,OAAQ;QACxB,MAAME,QAAQF,MAAM,CAACC,IAAI;QACzB,IAAIE,MAAMC,OAAO,CAACF,OAAOG,SAAS,WAAWH,OAAO;YAClDA,MAAMI,eAAe,GAAG;QAC1B;IACF;IACA,OAAON;AACT"}

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js

@@ -1,28 +1,16 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useInlineBlockComponentContext } from '../index.js';
-export const InlineBlockContainer = t0 => {
-  const $ = _c(3);
-  const {
-    children
-  } = t0;
-  const {
-    InlineBlockContainer
-  } = useInlineBlockComponentContext();
-  let t1;
-  if ($[0] !== InlineBlockContainer || $[1] !== children) {
-    t1 = InlineBlockContainer ? _jsx(InlineBlockContainer, {
-      children
-    }) : null;
-    $[0] = InlineBlockContainer;
-    $[1] = children;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+export const InlineBlockContainer = ({ children })=>{
+    const { InlineBlockContainer } = useInlineBlockComponentContext();
+    return InlineBlockContainer ? /*#__PURE__*/ _jsxDEV(InlineBlockContainer, {
+        children: children
+    }, void 0, false, {
+        fileName: "src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx",
+        lineNumber: 9,
+        columnNumber: 33
+    }, this) : null;
 };
+
 //# sourceMappingURL=InlineBlockContainer.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBlockContainer.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockContainer","t0","$","children","t1","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockContainer = ({ children }: { children: React.ReactNode }) => {\n  const { InlineBlockContainer } = useInlineBlockComponentContext()\n\n  return InlineBlockContainer ? <InlineBlockContainer>{children}</InlineBlockContainer> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM;EAAA,IAAAF,EAA2C;EAC9E;IAAAD;EAAA,IAAiCD,8BAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAF,oBAAA,IAAAE,CAAA,QAAAC,QAAA;IAE1BC,EAAA,GAAAJ,oBAAA,GAAuBK,IAAA,CAACL,oBAAA;MAAAG;IAAA,C,QAAyD;IAAAD,CAAA,MAAAF,oBAAA;IAAAE,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAjFE,EAAiF;AAAA,CAC1F","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockContainer = ({ children }: { children: React.ReactNode }) => {\n  const { InlineBlockContainer } = useInlineBlockComponentContext()\n\n  return InlineBlockContainer ? <InlineBlockContainer>{children}</InlineBlockContainer> : null\n}\n"],"names":["React","useInlineBlockComponentContext","InlineBlockContainer","children"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,8BAA8B,QAAQ,cAAa;AAE5D,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,QAAQ,EAAiC;IAC9E,MAAM,EAAED,oBAAoB,EAAE,GAAGD;IAEjC,OAAOC,qCAAuB,QAACA;kBAAsBC;;;;;eAAmC;AAC1F,EAAC"}

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js

@@ -1,22 +1,14 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useInlineBlockComponentContext } from '../index.js';
-export const InlineBlockEditButton = () => {
-  const $ = _c(2);
-  const {
-    EditButton
-  } = useInlineBlockComponentContext();
-  let t0;
-  if ($[0] !== EditButton) {
-    t0 = EditButton ? _jsx(EditButton, {}) : null;
-    $[0] = EditButton;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
+export const InlineBlockEditButton = ()=>{
+    const { EditButton } = useInlineBlockComponentContext();
+    return EditButton ? /*#__PURE__*/ _jsxDEV(EditButton, {}, void 0, false, {
+        fileName: "src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx",
+        lineNumber: 9,
+        columnNumber: 23
+    }, this) : null;
 };
+
 //# sourceMappingURL=InlineBlockEditButton.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBlockEditButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockEditButton","$","EditButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockEditButton = () => {\n  const { EditButton } = useInlineBlockComponentContext()\n\n  return EditButton ? <EditButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,qBAAA,GAAwBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACnC;IAAAK;EAAA,IAAuBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,UAAA;IAEhBC,EAAA,GAAAD,UAAA,GAAaE,IAAA,CAACF,UAAA,YAAgB;IAAAD,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAA9BE,EAA8B;AAAA,CACvC","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockEditButton = () => {\n  const { EditButton } = useInlineBlockComponentContext()\n\n  return EditButton ? <EditButton /> : null\n}\n"],"names":["React","useInlineBlockComponentContext","InlineBlockEditButton","EditButton"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,8BAA8B,QAAQ,cAAa;AAE5D,OAAO,MAAMC,wBAAwB;IACnC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,OAAOE,2BAAa,QAACA;;;;eAAgB;AACvC,EAAC"}

package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js

@@ -1,22 +1,14 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useInlineBlockComponentContext } from '../index.js';
-export const InlineBlockLabel = () => {
-  const $ = _c(2);
-  const {
-    Label
-  } = useInlineBlockComponentContext();
-  let t0;
-  if ($[0] !== Label) {
-    t0 = Label ? _jsx(Label, {}) : null;
-    $[0] = Label;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
+export const InlineBlockLabel = ()=>{
+    const { Label } = useInlineBlockComponentContext();
+    return Label ? /*#__PURE__*/ _jsxDEV(Label, {}, void 0, false, {
+        fileName: "src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx",
+        lineNumber: 9,
+        columnNumber: 18
+    }, this) : null;
 };
+
 //# sourceMappingURL=InlineBlockLabel.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBlockLabel.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockLabel","$","Label","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockLabel = () => {\n  const { Label } = useInlineBlockComponentContext()\n\n  return Label ? <Label /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,gBAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAC9B;IAAAK;EAAA,IAAkBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,KAAA;IAEXC,EAAA,GAAAD,KAAA,GAAQE,IAAA,CAACF,KAAA,YAAW;IAAAD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAApBE,EAAoB;AAAA,CAC7B","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockLabel = () => {\n  const { Label } = useInlineBlockComponentContext()\n\n  return Label ? <Label /> : null\n}\n"],"names":["React","useInlineBlockComponentContext","InlineBlockLabel","Label"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,8BAA8B,QAAQ,cAAa;AAE5D,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,OAAOE,sBAAQ,QAACA;;;;eAAW;AAC7B,EAAC"}

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js

@@ -1,22 +1,14 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { useInlineBlockComponentContext } from '../index.js';
-export const InlineBlockRemoveButton = () => {
-  const $ = _c(2);
-  const {
-    RemoveButton
-  } = useInlineBlockComponentContext();
-  let t0;
-  if ($[0] !== RemoveButton) {
-    t0 = RemoveButton ? _jsx(RemoveButton, {}) : null;
-    $[0] = RemoveButton;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
+export const InlineBlockRemoveButton = ()=>{
+    const { RemoveButton } = useInlineBlockComponentContext();
+    return RemoveButton ? /*#__PURE__*/ _jsxDEV(RemoveButton, {}, void 0, false, {
+        fileName: "src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx",
+        lineNumber: 9,
+        columnNumber: 25
+    }, this) : null;
 };
+
 //# sourceMappingURL=InlineBlockRemoveButton.js.map

package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineBlockRemoveButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockRemoveButton","$","RemoveButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockRemoveButton = () => {\n  const { RemoveButton } = useInlineBlockComponentContext()\n\n  return RemoveButton ? <RemoveButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,uBAAA,GAA0BA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACrC;IAAAK;EAAA,IAAyBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA;IAElBC,EAAA,GAAAD,YAAA,GAAeE,IAAA,CAACF,YAAA,YAAkB;IAAAD,CAAA,MAAAC,YAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAlCE,EAAkC;AAAA,CAC3C","ignoreList":[]}
+{"version":3,"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockRemoveButton = () => {\n  const { RemoveButton } = useInlineBlockComponentContext()\n\n  return RemoveButton ? <RemoveButton /> : null\n}\n"],"names":["React","useInlineBlockComponentContext","InlineBlockRemoveButton","RemoveButton"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,8BAA8B,QAAQ,cAAa;AAE5D,OAAO,MAAMC,0BAA0B;IACrC,MAAM,EAAEC,YAAY,EAAE,GAAGF;IAEzB,OAAOE,6BAAe,QAACA;;;;eAAkB;AAC3C,EAAC"}