@payloadcms/richtext-lexical 3.0.0-beta.34 → 3.0.0-beta.36

package/dist/field/features/blocks/component/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form } from '@payloadcms/ui/forms/Form';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 const baseClass = 'lexical-block';
@@ -102,7 +103,7 @@ export const BlockComponent = (props)=>{
     ].filter(Boolean).join(' ');
     // Memoized Form JSX
     const formContent = useMemo(()=>{
-        return reducedBlock && initialState !== false ? /*#__PURE__*/ React.createElement(Form, {
+        return reducedBlock && initialState !== false ? /*#__PURE__*/ _jsx(Form, {
             beforeSubmit: [
                 onChange
             ],
@@ -113,32 +114,40 @@ export const BlockComponent = (props)=>{
                 onChange
             ],
             submitted: submitted,
-            uuid: uuid()
-        }, /*#__PURE__*/ React.createElement(BlockContent, {
-            baseClass: baseClass,
-            field: parentLexicalRichTextField,
-            formData: formData,
-            formSchema: Array.isArray(fieldMap) ? fieldMap : [],
-            nodeKey: nodeKey,
-            path: `${path}.feature.blocks.${formData.blockType}`,
-            reducedBlock: reducedBlock,
-            schemaPath: schemaFieldsPath
-        })) : /*#__PURE__*/ React.createElement(Collapsible, {
+            uuid: uuid(),
+            children: /*#__PURE__*/ _jsx(BlockContent, {
+                baseClass: baseClass,
+                field: parentLexicalRichTextField,
+                formData: formData,
+                formSchema: Array.isArray(fieldMap) ? fieldMap : [],
+                nodeKey: nodeKey,
+                path: `${path}.feature.blocks.${formData.blockType}`,
+                reducedBlock: reducedBlock,
+                schemaPath: schemaFieldsPath
+            })
+        }) : /*#__PURE__*/ _jsx(Collapsible, {
             className: classNames,
             collapsibleStyle: "default",
-            header: /*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__block-header`
-            }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(Pill, {
-                className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
-                pillStyle: "white"
-            }, typeof reducedBlock.labels.singular === 'string' ? getTranslation(reducedBlock.labels.singular, i18n) : '[Singular Label]'), /*#__PURE__*/ React.createElement(SectionTitle, {
-                path: "blockName",
-                readOnly: parentLexicalRichTextField?.readOnly
-            }))),
-            key: 0
-        }, /*#__PURE__*/ React.createElement(ShimmerEffect, {
-            height: "35vh"
-        }));
+            header: /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__block-header`,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx(Pill, {
+                            className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
+                            pillStyle: "white",
+                            children: typeof reducedBlock.labels.singular === 'string' ? getTranslation(reducedBlock.labels.singular, i18n) : '[Singular Label]'
+                        }),
+                        /*#__PURE__*/ _jsx(SectionTitle, {
+                            path: "blockName",
+                            readOnly: parentLexicalRichTextField?.readOnly
+                        })
+                    ]
+                })
+            }),
+            children: /*#__PURE__*/ _jsx(ShimmerEffect, {
+                height: "35vh"
+            })
+        }, 0);
     }, [
         fieldMap,
         parentLexicalRichTextField,
@@ -153,9 +162,10 @@ export const BlockComponent = (props)=>{
         path
     ]) // Adding formData to the dependencies here might break it
     ;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass + ' ' + baseClass + '-' + formData.blockType
-    }, formContent);
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass + ' ' + baseClass + '-' + formData.blockType,
+        children: formContent
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\n\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { type BlockFields } from '../nodes/BlocksNode.js'\nconst baseClass = 'lexical-block'\nimport type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { FormState } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Collapsible } from '@payloadcms/ui/elements/Collapsible'\nimport { Pill } from '@payloadcms/ui/elements/Pill'\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { SectionTitle } from '@payloadcms/ui/fields/Blocks/SectionTitle'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useFormSubmitted } from '@payloadcms/ui/forms/Form'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { getFormState } from '@payloadcms/ui/utilities/getFormState'\nimport { v4 as uuid } from 'uuid'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n  blockFieldWrapperName: string\n  children?: React.ReactNode\n\n  formData: BlockFields\n  nodeKey?: string\n  /**\n   * This transformedFormData already comes wrapped in blockFieldWrapperName\n   */\n  transformedFormData: BlockFields\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { blockFieldWrapperName, formData, nodeKey } = props\n  const config = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.blocks.fields.${formData?.blockType}`\n  const schemaFieldsPath = `${schemaPath}.feature.blocks.${formData?.blockType}`\n\n  const reducedBlock: ReducedBlock = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks?.find((block) => block.slug === formData?.blockType)\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath)\n  // Field Schema\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: JSON.parse(JSON.stringify(formData)),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      if (state) {\n        setInitialState({\n          ...removeEmptyArrayValues({ fields: state }),\n          blockName: {\n            initialValue: '',\n            passesCondition: true,\n            valid: true,\n            value: formData.blockName,\n          },\n        })\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const formState = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return {\n        ...formState,\n        blockName: {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        },\n      }\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id, formData.blockName],\n  )\n  const { i18n } = useTranslation()\n\n  const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ')\n\n  // Memoized Form JSX\n  const formContent = useMemo(() => {\n    return reducedBlock && initialState !== false ? (\n      <Form\n        beforeSubmit={[onChange]}\n        // @ts-expect-error TODO: Fix this\n        fields={fieldMap}\n        initialState={initialState}\n        onChange={[onChange]}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          field={parentLexicalRichTextField}\n          formData={formData}\n          formSchema={Array.isArray(fieldMap) ? fieldMap : []}\n          nodeKey={nodeKey}\n          path={`${path}.feature.blocks.${formData.blockType}`}\n          reducedBlock={reducedBlock}\n          schemaPath={schemaFieldsPath}\n        />\n      </Form>\n    ) : (\n      <Collapsible\n        className={classNames}\n        collapsibleStyle=\"default\"\n        header={\n          <div className={`${baseClass}__block-header`}>\n            <div>\n              <Pill\n                className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                pillStyle=\"white\"\n              >\n                {typeof reducedBlock.labels.singular === 'string'\n                  ? getTranslation(reducedBlock.labels.singular, i18n)\n                  : '[Singular Label]'}\n              </Pill>\n              <SectionTitle path=\"blockName\" readOnly={parentLexicalRichTextField?.readOnly} />\n            </div>\n          </div>\n        }\n        key={0}\n      >\n        <ShimmerEffect height=\"35vh\" />\n      </Collapsible>\n    )\n  }, [\n    fieldMap,\n    parentLexicalRichTextField,\n    nodeKey,\n    i18n,\n    submitted,\n    initialState,\n    reducedBlock,\n    blockFieldWrapperName,\n    onChange,\n    schemaFieldsPath,\n    path,\n  ]) // Adding formData to the dependencies here might break it\n  return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"names":["Form","React","useCallback","useEffect","useMemo","useState","baseClass","getTranslation","Collapsible","Pill","ShimmerEffect","SectionTitle","useFieldProps","useFormSubmitted","useConfig","useDocumentInfo","useTranslation","getFormState","v4","uuid","useEditorConfigContext","BlockContent","removeEmptyArrayValues","BlockComponent","props","blockFieldWrapperName","formData","nodeKey","config","submitted","id","path","schemaPath","editorConfig","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","componentMapRenderedFieldsPath","blockType","schemaFieldsPath","reducedBlock","resolvedFeatureMap","get","clientFeatureProps","reducedBlocks","find","block","slug","fieldMap","awaitInitialState","state","apiRoute","routes","api","body","data","JSON","parse","stringify","operation","serverURL","fields","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","i18n","classNames","filter","Boolean","join","formContent","beforeSubmit","formSchema","Array","isArray","className","collapsibleStyle","header","div","pillStyle","labels","singular","readOnly","key","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui/forms/Form'\n\nimport { Form } from '@payloadcms/ui/forms/Form'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { type BlockFields } from '../nodes/BlocksNode.js'\nconst baseClass = 'lexical-block'\nimport type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'\nimport type { FormState } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Collapsible } from '@payloadcms/ui/elements/Collapsible'\nimport { Pill } from '@payloadcms/ui/elements/Pill'\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { SectionTitle } from '@payloadcms/ui/fields/Blocks/SectionTitle'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useFormSubmitted } from '@payloadcms/ui/forms/Form'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { getFormState } from '@payloadcms/ui/utilities/getFormState'\nimport { v4 as uuid } from 'uuid'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n  blockFieldWrapperName: string\n  children?: React.ReactNode\n\n  formData: BlockFields\n  nodeKey?: string\n  /**\n   * This transformedFormData already comes wrapped in blockFieldWrapperName\n   */\n  transformedFormData: BlockFields\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { blockFieldWrapperName, formData, nodeKey } = props\n  const config = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const componentMapRenderedFieldsPath = `feature.blocks.fields.${formData?.blockType}`\n  const schemaFieldsPath = `${schemaPath}.feature.blocks.${formData?.blockType}`\n\n  const reducedBlock: ReducedBlock = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks?.find((block) => block.slug === formData?.blockType)\n\n  const fieldMap = richTextComponentMap.get(componentMapRenderedFieldsPath)\n  // Field Schema\n  useEffect(() => {\n    const awaitInitialState = async () => {\n      const state = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          data: JSON.parse(JSON.stringify(formData)),\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      }) // Form State\n\n      if (state) {\n        setInitialState({\n          ...removeEmptyArrayValues({ fields: state }),\n          blockName: {\n            initialValue: '',\n            passesCondition: true,\n            valid: true,\n            value: formData.blockName,\n          },\n        })\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id])\n\n  const onChange: FormProps['onChange'][0] = useCallback(\n    async ({ formState: prevFormState }) => {\n      const formState = await getFormState({\n        apiRoute: config.routes.api,\n        body: {\n          id,\n          formState: prevFormState,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      return {\n        ...formState,\n        blockName: {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        },\n      }\n    },\n\n    [config.routes.api, config.serverURL, schemaFieldsPath, id, formData.blockName],\n  )\n  const { i18n } = useTranslation()\n\n  const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ')\n\n  // Memoized Form JSX\n  const formContent = useMemo(() => {\n    return reducedBlock && initialState !== false ? (\n      <Form\n        beforeSubmit={[onChange]}\n        // @ts-expect-error TODO: Fix this\n        fields={fieldMap}\n        initialState={initialState}\n        onChange={[onChange]}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          field={parentLexicalRichTextField}\n          formData={formData}\n          formSchema={Array.isArray(fieldMap) ? fieldMap : []}\n          nodeKey={nodeKey}\n          path={`${path}.feature.blocks.${formData.blockType}`}\n          reducedBlock={reducedBlock}\n          schemaPath={schemaFieldsPath}\n        />\n      </Form>\n    ) : (\n      <Collapsible\n        className={classNames}\n        collapsibleStyle=\"default\"\n        header={\n          <div className={`${baseClass}__block-header`}>\n            <div>\n              <Pill\n                className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n                pillStyle=\"white\"\n              >\n                {typeof reducedBlock.labels.singular === 'string'\n                  ? getTranslation(reducedBlock.labels.singular, i18n)\n                  : '[Singular Label]'}\n              </Pill>\n              <SectionTitle path=\"blockName\" readOnly={parentLexicalRichTextField?.readOnly} />\n            </div>\n          </div>\n        }\n        key={0}\n      >\n        <ShimmerEffect height=\"35vh\" />\n      </Collapsible>\n    )\n  }, [\n    fieldMap,\n    parentLexicalRichTextField,\n    nodeKey,\n    i18n,\n    submitted,\n    initialState,\n    reducedBlock,\n    blockFieldWrapperName,\n    onChange,\n    schemaFieldsPath,\n    path,\n  ]) // Adding formData to the dependencies here might break it\n  return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"names":["Form","React","useCallback","useEffect","useMemo","useState","baseClass","getTranslation","Collapsible","Pill","ShimmerEffect","SectionTitle","useFieldProps","useFormSubmitted","useConfig","useDocumentInfo","useTranslation","getFormState","v4","uuid","useEditorConfigContext","BlockContent","removeEmptyArrayValues","BlockComponent","props","blockFieldWrapperName","formData","nodeKey","config","submitted","id","path","schemaPath","editorConfig","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","componentMapRenderedFieldsPath","blockType","schemaFieldsPath","reducedBlock","resolvedFeatureMap","get","clientFeatureProps","reducedBlocks","find","block","slug","fieldMap","awaitInitialState","state","apiRoute","routes","api","body","data","JSON","parse","stringify","operation","serverURL","fields","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","i18n","classNames","filter","Boolean","join","formContent","beforeSubmit","formSchema","Array","isArray","className","collapsibleStyle","header","div","pillStyle","labels","singular","readOnly","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -106,10 +106,6 @@
     line-height: unset;
   }
 
-  &__error-wrap {
-    position: relative;
-  }
-
   &__rows {
     display: flex;
     flex-direction: column;

package/dist/field/features/blocks/drawer/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer';
@@ -70,7 +71,7 @@ export const BlocksDrawerComponent = ()=>{
         drawerSlug,
         openModal
     ]);
-    return /*#__PURE__*/ React.createElement(BlocksDrawer, {
+    return /*#__PURE__*/ _jsx(BlocksDrawer, {
         addRow: addRow,
         addRowIndex: 0,
         blocks: reducedBlocks,

package/dist/field/features/blocks/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { $createBlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from '../plugin/commands.js'\nconst baseClass = 'lexical-blocks-drawer'\n\nexport const INSERT_BLOCK_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_BLOCK_WITH_DRAWER_COMMAND')\n\nconst insertBlock = ({\n  blockType,\n  editor,\n  replaceNodeKey,\n}: {\n  blockType: string\n  editor: LexicalEditor\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n      id: null,\n      blockName: '',\n      blockType,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createBlockNode({\n            id: null,\n            blockName: '',\n            blockType,\n          }),\n        )\n      }\n    })\n  }\n}\n\nexport const BlocksDrawerComponent: React.FC = () => {\n  const { useModal } = facelessUIImport\n\n  const [editor] = useLexicalComposerContext()\n  const { editorConfig, uuid } = useEditorConfigContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n  const editDepth = useEditDepth()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n\n  const labels = {\n    plural: t('fields:blocks') || 'Blocks',\n    singular: t('fields:block') || 'Block',\n  }\n\n  const addRow = useCallback(\n    (rowIndex: number, blockType: string) => {\n      insertBlock({\n        blockType,\n        editor,\n        replaceNodeKey,\n      })\n    },\n    [editor, replaceNodeKey],\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-blocks-` + uuid,\n    depth: editDepth,\n  })\n\n  const reducedBlocks = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_BLOCK_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openModal(drawerSlug)\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, drawerSlug, openModal])\n\n  return (\n    <BlocksDrawer\n      addRow={addRow}\n      addRowIndex={0}\n      blocks={reducedBlocks}\n      drawerSlug={drawerSlug}\n      labels={labels}\n    />\n  )\n}\n"],"names":["facelessUIImport","useLexicalComposerContext","formatDrawerSlug","BlocksDrawer","useEditDepth","useTranslation","$getNodeByKey","COMMAND_PRIORITY_EDITOR","createCommand","React","useCallback","useEffect","useState","useEditorConfigContext","$createBlockNode","INSERT_BLOCK_COMMAND","baseClass","INSERT_BLOCK_WITH_DRAWER_COMMAND","insertBlock","blockType","editor","replaceNodeKey","dispatchCommand","id","blockName","update","node","replace","BlocksDrawerComponent","useModal","editorConfig","uuid","setReplaceNodeKey","editDepth","t","openModal","labels","plural","singular","addRow","rowIndex","drawerSlug","slug","depth","reducedBlocks","resolvedFeatureMap","get","clientFeatureProps","registerCommand","payload","nodeKey","addRowIndex","blocks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,YAAYA,sBAAsB,qBAAoB;AACtD,SAASC,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,gBAAgB,QAAQ,iCAAgC;AACjE,SAASC,YAAY,QAAQ,4CAA2C;AACxE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,EAAEC,aAAa,QAAQ,UAAS;AAC/E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/D,SAASC,sBAAsB,QAAQ,yDAAwD;AAC/F,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,MAAMC,YAAY;AAElB,OAAO,MAAMC,mCAERT,cAAc,oCAAmC;AAEtD,MAAMU,cAAc,CAAC,EACnBC,SAAS,EACTC,MAAM,EACNC,cAAc,EAKf;IACC,IAAI,CAACA,gBAAgB;QACnBD,OAAOE,eAAe,CAACP,sBAAsB;YAC3CQ,IAAI;YACJC,WAAW;YACXL;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOpB,cAAce;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVb,iBAAiB;oBACfS,IAAI;oBACJC,WAAW;oBACXL;gBACF;YAEJ;QACF;IACF;AACF;AAEA,OAAO,MAAMS,wBAAkC;IAC7C,MAAM,EAAEC,QAAQ,EAAE,GAAG7B;IAErB,MAAM,CAACoB,OAAO,GAAGnB;IACjB,MAAM,EAAE6B,YAAY,EAAEC,IAAI,EAAE,GAAGlB;IAE/B,MAAM,CAACQ,gBAAgBW,kBAAkB,GAAGpB,SAAwB;IACpE,MAAMqB,YAAY7B;IAClB,MAAM,EAAE8B,CAAC,EAAE,GAAG7B;IACd,MAAM,EAAE8B,SAAS,EAAE,GAAGN;IAEtB,MAAMO,SAAS;QACbC,QAAQH,EAAE,oBAAoB;QAC9BI,UAAUJ,EAAE,mBAAmB;IACjC;IAEA,MAAMK,SAAS7B,YACb,CAAC8B,UAAkBrB;QACjBD,YAAY;YACVC;YACAC;YACAC;QACF;IACF,GACA;QAACD;QAAQC;KAAe;IAG1B,MAAMoB,aAAavC,iBAAiB;QAClCwC,MAAM,CAAC,yBAAyB,CAAC,GAAGX;QACpCY,OAAOV;IACT;IAEA,MAAMW,gBACJd,cAAce,oBAAoBC,IAAI,WAClCC,oBACHH;IAEHjC,UAAU;QACR,OAAOS,OAAO4B,eAAe,CAG3B/B,kCACA,CAACgC;YACCjB,kBAAkBiB,SAAStB,UAAUsB,SAAStB,QAAQuB,UAAU;YAChEf,UAAUM;YACV,OAAO;QACT,GACAlC;IAEJ,GAAG;QAACa;QAAQqB;QAAYN;KAAU;IAElC,qBACE,oBAAChC;QACCoC,QAAQA;QACRY,aAAa;QACbC,QAAQR;QACRH,YAAYA;QACZL,QAAQA;;AAGd,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/drawer/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalCommand, LexicalEditor } from 'lexical'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'\nimport { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'\nimport { useEditDepth } from '@payloadcms/ui/providers/EditDepth'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { ClientComponentProps } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\n\nimport { useEditorConfigContext } from '../../../lexical/config/client/EditorConfigProvider.js'\nimport { $createBlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from '../plugin/commands.js'\nconst baseClass = 'lexical-blocks-drawer'\n\nexport const INSERT_BLOCK_WITH_DRAWER_COMMAND: LexicalCommand<{\n  replace: { nodeKey: string } | false\n}> = createCommand('INSERT_BLOCK_WITH_DRAWER_COMMAND')\n\nconst insertBlock = ({\n  blockType,\n  editor,\n  replaceNodeKey,\n}: {\n  blockType: string\n  editor: LexicalEditor\n  replaceNodeKey: null | string\n}) => {\n  if (!replaceNodeKey) {\n    editor.dispatchCommand(INSERT_BLOCK_COMMAND, {\n      id: null,\n      blockName: '',\n      blockType,\n    })\n  } else {\n    editor.update(() => {\n      const node = $getNodeByKey(replaceNodeKey)\n      if (node) {\n        node.replace(\n          $createBlockNode({\n            id: null,\n            blockName: '',\n            blockType,\n          }),\n        )\n      }\n    })\n  }\n}\n\nexport const BlocksDrawerComponent: React.FC = () => {\n  const { useModal } = facelessUIImport\n\n  const [editor] = useLexicalComposerContext()\n  const { editorConfig, uuid } = useEditorConfigContext()\n\n  const [replaceNodeKey, setReplaceNodeKey] = useState<null | string>(null)\n  const editDepth = useEditDepth()\n  const { t } = useTranslation()\n  const { openModal } = useModal()\n\n  const labels = {\n    plural: t('fields:blocks') || 'Blocks',\n    singular: t('fields:block') || 'Block',\n  }\n\n  const addRow = useCallback(\n    (rowIndex: number, blockType: string) => {\n      insertBlock({\n        blockType,\n        editor,\n        replaceNodeKey,\n      })\n    },\n    [editor, replaceNodeKey],\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-rich-text-blocks-` + uuid,\n    depth: editDepth,\n  })\n\n  const reducedBlocks = (\n    editorConfig?.resolvedFeatureMap?.get('blocks')\n      ?.clientFeatureProps as ClientComponentProps<BlocksFeatureClientProps>\n  )?.reducedBlocks\n\n  useEffect(() => {\n    return editor.registerCommand<{\n      replace: { nodeKey: string } | false\n    }>(\n      INSERT_BLOCK_WITH_DRAWER_COMMAND,\n      (payload) => {\n        setReplaceNodeKey(payload?.replace ? payload?.replace.nodeKey : null)\n        openModal(drawerSlug)\n        return true\n      },\n      COMMAND_PRIORITY_EDITOR,\n    )\n  }, [editor, drawerSlug, openModal])\n\n  return (\n    <BlocksDrawer\n      addRow={addRow}\n      addRowIndex={0}\n      blocks={reducedBlocks}\n      drawerSlug={drawerSlug}\n      labels={labels}\n    />\n  )\n}\n"],"names":["facelessUIImport","useLexicalComposerContext","formatDrawerSlug","BlocksDrawer","useEditDepth","useTranslation","$getNodeByKey","COMMAND_PRIORITY_EDITOR","createCommand","React","useCallback","useEffect","useState","useEditorConfigContext","$createBlockNode","INSERT_BLOCK_COMMAND","baseClass","INSERT_BLOCK_WITH_DRAWER_COMMAND","insertBlock","blockType","editor","replaceNodeKey","dispatchCommand","id","blockName","update","node","replace","BlocksDrawerComponent","useModal","editorConfig","uuid","setReplaceNodeKey","editDepth","t","openModal","labels","plural","singular","addRow","rowIndex","drawerSlug","slug","depth","reducedBlocks","resolvedFeatureMap","get","clientFeatureProps","registerCommand","payload","nodeKey","addRowIndex","blocks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAGA,YAAYA,sBAAsB,qBAAoB;AACtD,SAASC,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,gBAAgB,QAAQ,iCAAgC;AACjE,SAASC,YAAY,QAAQ,4CAA2C;AACxE,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,aAAa,EAAEC,uBAAuB,EAAEC,aAAa,QAAQ,UAAS;AAC/E,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAK/D,SAASC,sBAAsB,QAAQ,yDAAwD;AAC/F,SAASC,gBAAgB,QAAQ,yBAAwB;AACzD,SAASC,oBAAoB,QAAQ,wBAAuB;AAC5D,MAAMC,YAAY;AAElB,OAAO,MAAMC,mCAERT,cAAc,oCAAmC;AAEtD,MAAMU,cAAc,CAAC,EACnBC,SAAS,EACTC,MAAM,EACNC,cAAc,EAKf;IACC,IAAI,CAACA,gBAAgB;QACnBD,OAAOE,eAAe,CAACP,sBAAsB;YAC3CQ,IAAI;YACJC,WAAW;YACXL;QACF;IACF,OAAO;QACLC,OAAOK,MAAM,CAAC;YACZ,MAAMC,OAAOpB,cAAce;YAC3B,IAAIK,MAAM;gBACRA,KAAKC,OAAO,CACVb,iBAAiB;oBACfS,IAAI;oBACJC,WAAW;oBACXL;gBACF;YAEJ;QACF;IACF;AACF;AAEA,OAAO,MAAMS,wBAAkC;IAC7C,MAAM,EAAEC,QAAQ,EAAE,GAAG7B;IAErB,MAAM,CAACoB,OAAO,GAAGnB;IACjB,MAAM,EAAE6B,YAAY,EAAEC,IAAI,EAAE,GAAGlB;IAE/B,MAAM,CAACQ,gBAAgBW,kBAAkB,GAAGpB,SAAwB;IACpE,MAAMqB,YAAY7B;IAClB,MAAM,EAAE8B,CAAC,EAAE,GAAG7B;IACd,MAAM,EAAE8B,SAAS,EAAE,GAAGN;IAEtB,MAAMO,SAAS;QACbC,QAAQH,EAAE,oBAAoB;QAC9BI,UAAUJ,EAAE,mBAAmB;IACjC;IAEA,MAAMK,SAAS7B,YACb,CAAC8B,UAAkBrB;QACjBD,YAAY;YACVC;YACAC;YACAC;QACF;IACF,GACA;QAACD;QAAQC;KAAe;IAG1B,MAAMoB,aAAavC,iBAAiB;QAClCwC,MAAM,CAAC,yBAAyB,CAAC,GAAGX;QACpCY,OAAOV;IACT;IAEA,MAAMW,gBACJd,cAAce,oBAAoBC,IAAI,WAClCC,oBACHH;IAEHjC,UAAU;QACR,OAAOS,OAAO4B,eAAe,CAG3B/B,kCACA,CAACgC;YACCjB,kBAAkBiB,SAAStB,UAAUsB,SAAStB,QAAQuB,UAAU;YAChEf,UAAUM;YACV,OAAO;QACT,GACAlC;IAEJ,GAAG;QAACa;QAAQqB;QAAYN;KAAU;IAElC,qBACE,KAAChC;QACCoC,QAAQA;QACRY,aAAa;QACbC,QAAQR;QACRH,YAAYA;QACZL,QAAQA;;AAGd,EAAC"}

package/dist/field/features/blocks/nodes/BlocksNode.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
 import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementFormatType, LexicalEditor, LexicalNode, NodeKey, Spread } from 'lexical';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
+import { type JSX } from 'react';
 export type BlockFields = {
     /** Block form data */
     [key: string]: any;

package/dist/field/features/blocks/nodes/BlocksNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/nodes/BlocksNode.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAC/F,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACP,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAIhF,MAAM,MAAM,WAAW,GAAG;IACxB,sBAAsB;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAQD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,MAAM,EAAE,WAAW,CAAA;CACpB,EACD,4BAA4B,CAC7B,CAAA;AAED,qBAAa,SAAU,SAAQ,kBAAkB;IAC/C,QAAQ,EAAE,WAAW,CAAA;gBAET,EACV,MAAM,EACN,MAAM,EACN,GAAG,GACJ,EAAE;QACD,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAQxC,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAI3D,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS;IAgBjE,MAAM,CAAC,QAAQ,IAAI,KAAK;IAGxB,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO;IAKlE,SAAS,IAAI,eAAe;IAQ5B,UAAU,IAAI,mBAAmB;IASjC,SAAS,IAAI,WAAW;IAIxB,cAAc,IAAI,MAAM;IAIxB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;CAMrC;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,SAAS,CAO9E;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEhG"}
+{"version":3,"file":"BlocksNode.d.ts","sourceRoot":"","sources":["../../../../../src/field/features/blocks/nodes/BlocksNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAA;AAC/F,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACP,MAAM,SAAS,CAAA;AAEhB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAA;AAEhF,OAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,MAAM,WAAW,GAAG;IACxB,sBAAsB;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAQD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,MAAM,EAAE,WAAW,CAAA;CACpB,EACD,4BAA4B,CAC7B,CAAA;AAED,qBAAa,SAAU,SAAQ,kBAAkB;IAC/C,QAAQ,EAAE,WAAW,CAAA;gBAET,EACV,MAAM,EACN,MAAM,EACN,GAAG,GACJ,EAAE;QACD,MAAM,EAAE,WAAW,CAAA;QACnB,MAAM,CAAC,EAAE,iBAAiB,CAAA;QAC1B,GAAG,CAAC,EAAE,OAAO,CAAA;KACd;IAKD,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAQxC,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,SAAS,IAAI,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI;IAI3D,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS;IAgBjE,MAAM,CAAC,QAAQ,IAAI,KAAK;IAGxB,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO;IAKlE,SAAS,IAAI,eAAe;IAQ5B,UAAU,IAAI,mBAAmB;IASjC,SAAS,IAAI,WAAW;IAIxB,cAAc,IAAI,MAAM;IAIxB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;CAMrC;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG,SAAS,CAO9E;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEhG"}

package/dist/field/features/blocks/nodes/BlocksNode.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js';
 import ObjectID from 'bson-objectid';
 import React from 'react';
@@ -43,7 +44,7 @@ export class BlockNode extends DecoratorBlockNode {
     }
     decorate(editor, config) {
         // @ts-expect-error
-        return /*#__PURE__*/ React.createElement(BlockComponent, {
+        return /*#__PURE__*/ _jsx(BlockComponent, {
             formData: this.getFields(),
             nodeKey: this.getKey()
         });

package/dist/field/features/blocks/nodes/BlocksNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/nodes/BlocksNode.tsx"],"sourcesContent":["import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport type {\n  DOMConversionMap,\n  DOMExportOutput,\n  EditorConfig,\n  ElementFormatType,\n  LexicalEditor,\n  LexicalNode,\n  NodeKey,\n  Spread,\n} from 'lexical'\n\nimport { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport ObjectID from 'bson-objectid'\nimport React from 'react'\n\nexport type BlockFields = {\n  /** Block form data */\n  [key: string]: any\n  blockName: string\n  blockType: string\n  id: string\n}\n\nconst BlockComponent = React.lazy(() =>\n  import('../component/index.js').then((module) => ({\n    default: module.BlockComponent,\n  })),\n)\n\nexport type SerializedBlockNode = Spread<\n  {\n    fields: BlockFields\n  },\n  SerializedDecoratorBlockNode\n>\n\nexport class BlockNode extends DecoratorBlockNode {\n  __fields: BlockFields\n\n  constructor({\n    fields,\n    format,\n    key,\n  }: {\n    fields: BlockFields\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__fields = fields\n  }\n\n  static clone(node: BlockNode): BlockNode {\n    return new BlockNode({\n      fields: node.__fields,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'block'\n  }\n\n  static importDOM(): DOMConversionMap<HTMLDivElement> | null {\n    return {}\n  }\n\n  static importJSON(serializedNode: SerializedBlockNode): BlockNode {\n    if (serializedNode.version === 1) {\n      // Convert (version 1 had the fields wrapped in another, unnecessary data property)\n      serializedNode = {\n        ...serializedNode,\n        fields: {\n          ...(serializedNode as any).fields.data,\n        },\n        version: 2,\n      }\n    }\n    const node = $createBlockNode(serializedNode.fields)\n    node.setFormat(serializedNode.format)\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {\n    // @ts-expect-error\n    return <BlockComponent formData={this.getFields()} nodeKey={this.getKey()} />\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('div')\n\n    const text = document.createTextNode(this.getTextContent())\n    element.append(text)\n    return { element }\n  }\n\n  exportJSON(): SerializedBlockNode {\n    return {\n      ...super.exportJSON(),\n      type: this.getType(),\n      fields: this.getFields(),\n      version: 2,\n    }\n  }\n\n  getFields(): BlockFields {\n    return this.getLatest().__fields\n  }\n\n  getTextContent(): string {\n    return `Block Field`\n  }\n\n  setFields(fields: BlockFields): void {\n    const fieldsCopy = JSON.parse(JSON.stringify(fields)) as BlockFields\n\n    const writable = this.getWritable()\n    writable.__fields = fieldsCopy\n  }\n}\n\nexport function $createBlockNode(fields: Exclude<BlockFields, 'id'>): BlockNode {\n  return new BlockNode({\n    fields: {\n      ...fields,\n      id: fields?.id || new ObjectID.default().toHexString(),\n    },\n  })\n}\n\nexport function $isBlockNode(node: BlockNode | LexicalNode | null | undefined): node is BlockNode {\n  return node instanceof BlockNode\n}\n"],"names":["DecoratorBlockNode","ObjectID","React","BlockComponent","lazy","then","module","default","BlockNode","__fields","constructor","fields","format","key","clone","node","__format","__key","getType","importDOM","importJSON","serializedNode","version","data","$createBlockNode","setFormat","isInline","decorate","editor","config","formData","getFields","nodeKey","getKey","exportDOM","element","document","createElement","text","createTextNode","getTextContent","append","exportJSON","type","getLatest","setFields","fieldsCopy","JSON","parse","stringify","writable","getWritable","id","toHexString","$isBlockNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAYA,SAASA,kBAAkB,QAAQ,8CAA6C;AAChF,OAAOC,cAAc,gBAAe;AACpC,OAAOC,WAAW,QAAO;AAUzB,MAAMC,+BAAiBD,MAAME,IAAI,CAAC,IAChC,MAAM,CAAC,yBAAyBC,IAAI,CAAC,CAACC,SAAY,CAAA;YAChDC,SAASD,OAAOH,cAAc;QAChC,CAAA;AAUF,OAAO,MAAMK,kBAAkBR;IAC7BS,SAAqB;IAErBC,YAAY,EACVC,MAAM,EACNC,MAAM,EACNC,GAAG,EAKJ,CAAE;QACD,KAAK,CAACD,QAAQC;QACd,IAAI,CAACJ,QAAQ,GAAGE;IAClB;IAEA,OAAOG,MAAMC,IAAe,EAAa;QACvC,OAAO,IAAIP,UAAU;YACnBG,QAAQI,KAAKN,QAAQ;YACrBG,QAAQG,KAAKC,QAAQ;YACrBH,KAAKE,KAAKE,KAAK;QACjB;IACF;IAEA,OAAOC,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,YAAqD;QAC1D,OAAO,CAAC;IACV;IAEA,OAAOC,WAAWC,cAAmC,EAAa;QAChE,IAAIA,eAAeC,OAAO,KAAK,GAAG;YAChC,mFAAmF;YACnFD,iBAAiB;gBACf,GAAGA,cAAc;gBACjBV,QAAQ;oBACN,GAAG,AAACU,eAAuBV,MAAM,CAACY,IAAI;gBACxC;gBACAD,SAAS;YACX;QACF;QACA,MAAMP,OAAOS,iBAAiBH,eAAeV,MAAM;QACnDI,KAAKU,SAAS,CAACJ,eAAeT,MAAM;QACpC,OAAOG;IACT;IAEA,OAAOW,WAAkB;QACvB,OAAO;IACT;IACAC,SAASC,MAAqB,EAAEC,MAAoB,EAAe;QACjE,mBAAmB;QACnB,qBAAO,oBAAC1B;YAAe2B,UAAU,IAAI,CAACC,SAAS;YAAIC,SAAS,IAAI,CAACC,MAAM;;IACzE;IAEAC,YAA6B;QAC3B,MAAMC,UAAUC,SAASC,aAAa,CAAC;QAEvC,MAAMC,OAAOF,SAASG,cAAc,CAAC,IAAI,CAACC,cAAc;QACxDL,QAAQM,MAAM,CAACH;QACf,OAAO;YAAEH;QAAQ;IACnB;IAEAO,aAAkC;QAChC,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrBC,MAAM,IAAI,CAACzB,OAAO;YAClBP,QAAQ,IAAI,CAACoB,SAAS;YACtBT,SAAS;QACX;IACF;IAEAS,YAAyB;QACvB,OAAO,IAAI,CAACa,SAAS,GAAGnC,QAAQ;IAClC;IAEA+B,iBAAyB;QACvB,OAAO,CAAC,WAAW,CAAC;IACtB;IAEAK,UAAUlC,MAAmB,EAAQ;QACnC,MAAMmC,aAAaC,KAAKC,KAAK,CAACD,KAAKE,SAAS,CAACtC;QAE7C,MAAMuC,WAAW,IAAI,CAACC,WAAW;QACjCD,SAASzC,QAAQ,GAAGqC;IACtB;AACF;AAEA,OAAO,SAAStB,iBAAiBb,MAAkC;IACjE,OAAO,IAAIH,UAAU;QACnBG,QAAQ;YACN,GAAGA,MAAM;YACTyC,IAAIzC,QAAQyC,MAAM,IAAInD,SAASM,OAAO,GAAG8C,WAAW;QACtD;IACF;AACF;AAEA,OAAO,SAASC,aAAavC,IAAgD;IAC3E,OAAOA,gBAAgBP;AACzB"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/nodes/BlocksNode.tsx"],"sourcesContent":["import type { SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport type {\n  DOMConversionMap,\n  DOMExportOutput,\n  EditorConfig,\n  ElementFormatType,\n  LexicalEditor,\n  LexicalNode,\n  NodeKey,\n  Spread,\n} from 'lexical'\n\nimport { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode.js'\nimport ObjectID from 'bson-objectid'\nimport React, { type JSX } from 'react'\n\nexport type BlockFields = {\n  /** Block form data */\n  [key: string]: any\n  blockName: string\n  blockType: string\n  id: string\n}\n\nconst BlockComponent = React.lazy(() =>\n  import('../component/index.js').then((module) => ({\n    default: module.BlockComponent,\n  })),\n)\n\nexport type SerializedBlockNode = Spread<\n  {\n    fields: BlockFields\n  },\n  SerializedDecoratorBlockNode\n>\n\nexport class BlockNode extends DecoratorBlockNode {\n  __fields: BlockFields\n\n  constructor({\n    fields,\n    format,\n    key,\n  }: {\n    fields: BlockFields\n    format?: ElementFormatType\n    key?: NodeKey\n  }) {\n    super(format, key)\n    this.__fields = fields\n  }\n\n  static clone(node: BlockNode): BlockNode {\n    return new BlockNode({\n      fields: node.__fields,\n      format: node.__format,\n      key: node.__key,\n    })\n  }\n\n  static getType(): string {\n    return 'block'\n  }\n\n  static importDOM(): DOMConversionMap<HTMLDivElement> | null {\n    return {}\n  }\n\n  static importJSON(serializedNode: SerializedBlockNode): BlockNode {\n    if (serializedNode.version === 1) {\n      // Convert (version 1 had the fields wrapped in another, unnecessary data property)\n      serializedNode = {\n        ...serializedNode,\n        fields: {\n          ...(serializedNode as any).fields.data,\n        },\n        version: 2,\n      }\n    }\n    const node = $createBlockNode(serializedNode.fields)\n    node.setFormat(serializedNode.format)\n    return node\n  }\n\n  static isInline(): false {\n    return false\n  }\n  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {\n    // @ts-expect-error\n    return <BlockComponent formData={this.getFields()} nodeKey={this.getKey()} />\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement('div')\n\n    const text = document.createTextNode(this.getTextContent())\n    element.append(text)\n    return { element }\n  }\n\n  exportJSON(): SerializedBlockNode {\n    return {\n      ...super.exportJSON(),\n      type: this.getType(),\n      fields: this.getFields(),\n      version: 2,\n    }\n  }\n\n  getFields(): BlockFields {\n    return this.getLatest().__fields\n  }\n\n  getTextContent(): string {\n    return `Block Field`\n  }\n\n  setFields(fields: BlockFields): void {\n    const fieldsCopy = JSON.parse(JSON.stringify(fields)) as BlockFields\n\n    const writable = this.getWritable()\n    writable.__fields = fieldsCopy\n  }\n}\n\nexport function $createBlockNode(fields: Exclude<BlockFields, 'id'>): BlockNode {\n  return new BlockNode({\n    fields: {\n      ...fields,\n      id: fields?.id || new ObjectID.default().toHexString(),\n    },\n  })\n}\n\nexport function $isBlockNode(node: BlockNode | LexicalNode | null | undefined): node is BlockNode {\n  return node instanceof BlockNode\n}\n"],"names":["DecoratorBlockNode","ObjectID","React","BlockComponent","lazy","then","module","default","BlockNode","__fields","constructor","fields","format","key","clone","node","__format","__key","getType","importDOM","importJSON","serializedNode","version","data","$createBlockNode","setFormat","isInline","decorate","editor","config","formData","getFields","nodeKey","getKey","exportDOM","element","document","createElement","text","createTextNode","getTextContent","append","exportJSON","type","getLatest","setFields","fieldsCopy","JSON","parse","stringify","writable","getWritable","id","toHexString","$isBlockNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAYA,SAASA,kBAAkB,QAAQ,8CAA6C;AAChF,OAAOC,cAAc,gBAAe;AACpC,OAAOC,WAAyB,QAAO;AAUvC,MAAMC,+BAAiBD,MAAME,IAAI,CAAC,IAChC,MAAM,CAAC,yBAAyBC,IAAI,CAAC,CAACC,SAAY,CAAA;YAChDC,SAASD,OAAOH,cAAc;QAChC,CAAA;AAUF,OAAO,MAAMK,kBAAkBR;IAC7BS,SAAqB;IAErBC,YAAY,EACVC,MAAM,EACNC,MAAM,EACNC,GAAG,EAKJ,CAAE;QACD,KAAK,CAACD,QAAQC;QACd,IAAI,CAACJ,QAAQ,GAAGE;IAClB;IAEA,OAAOG,MAAMC,IAAe,EAAa;QACvC,OAAO,IAAIP,UAAU;YACnBG,QAAQI,KAAKN,QAAQ;YACrBG,QAAQG,KAAKC,QAAQ;YACrBH,KAAKE,KAAKE,KAAK;QACjB;IACF;IAEA,OAAOC,UAAkB;QACvB,OAAO;IACT;IAEA,OAAOC,YAAqD;QAC1D,OAAO,CAAC;IACV;IAEA,OAAOC,WAAWC,cAAmC,EAAa;QAChE,IAAIA,eAAeC,OAAO,KAAK,GAAG;YAChC,mFAAmF;YACnFD,iBAAiB;gBACf,GAAGA,cAAc;gBACjBV,QAAQ;oBACN,GAAG,AAACU,eAAuBV,MAAM,CAACY,IAAI;gBACxC;gBACAD,SAAS;YACX;QACF;QACA,MAAMP,OAAOS,iBAAiBH,eAAeV,MAAM;QACnDI,KAAKU,SAAS,CAACJ,eAAeT,MAAM;QACpC,OAAOG;IACT;IAEA,OAAOW,WAAkB;QACvB,OAAO;IACT;IACAC,SAASC,MAAqB,EAAEC,MAAoB,EAAe;QACjE,mBAAmB;QACnB,qBAAO,KAAC1B;YAAe2B,UAAU,IAAI,CAACC,SAAS;YAAIC,SAAS,IAAI,CAACC,MAAM;;IACzE;IAEAC,YAA6B;QAC3B,MAAMC,UAAUC,SAASC,aAAa,CAAC;QAEvC,MAAMC,OAAOF,SAASG,cAAc,CAAC,IAAI,CAACC,cAAc;QACxDL,QAAQM,MAAM,CAACH;QACf,OAAO;YAAEH;QAAQ;IACnB;IAEAO,aAAkC;QAChC,OAAO;YACL,GAAG,KAAK,CAACA,YAAY;YACrBC,MAAM,IAAI,CAACzB,OAAO;YAClBP,QAAQ,IAAI,CAACoB,SAAS;YACtBT,SAAS;QACX;IACF;IAEAS,YAAyB;QACvB,OAAO,IAAI,CAACa,SAAS,GAAGnC,QAAQ;IAClC;IAEA+B,iBAAyB;QACvB,OAAO,CAAC,WAAW,CAAC;IACtB;IAEAK,UAAUlC,MAAmB,EAAQ;QACnC,MAAMmC,aAAaC,KAAKC,KAAK,CAACD,KAAKE,SAAS,CAACtC;QAE7C,MAAMuC,WAAW,IAAI,CAACC,WAAW;QACjCD,SAASzC,QAAQ,GAAGqC;IACtB;AACF;AAEA,OAAO,SAAStB,iBAAiBb,MAAkC;IACjE,OAAO,IAAIH,UAAU;QACnBG,QAAQ;YACN,GAAGA,MAAM;YACTyC,IAAIzC,QAAQyC,MAAM,IAAInD,SAASM,OAAO,GAAG8C,WAAW;QACtD;IACF;AACF;AAEA,OAAO,SAASC,aAAavC,IAAgD;IAC3E,OAAOA,gBAAgBP;AACzB"}

package/dist/field/features/blocks/plugin/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils';
 import { $getPreviousSelection, $getSelection, $isParagraphNode, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
@@ -35,7 +36,7 @@ export const BlocksPlugin = ()=>{
     }, [
         editor
     ]);
-    return /*#__PURE__*/ React.createElement(BlocksDrawerComponent, null);
+    return /*#__PURE__*/ _jsx(BlocksDrawerComponent, {});
 };
 
 //# sourceMappingURL=index.js.map

package/dist/field/features/blocks/plugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/field/features/blocks/plugin/index.tsx"],"sourcesContent":["'use client'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'\nimport {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n} from 'lexical'\nimport React, { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\nimport type { BlockFields } from '../nodes/BlocksNode.js'\n\nimport { BlocksDrawerComponent } from '../drawer/index.js'\nimport { $createBlockNode, BlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from './commands.js'\n\nexport type InsertBlockPayload = Exclude<BlockFields, 'id'>\n\nexport const BlocksPlugin: PluginComponent<BlocksFeatureClientProps> = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    if (!editor.hasNodes([BlockNode])) {\n      throw new Error('BlocksPlugin: BlocksNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertBlockPayload>(\n        INSERT_BLOCK_COMMAND,\n        (payload: InsertBlockPayload) => {\n          editor.update(() => {\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const blockNode = $createBlockNode(payload)\n              // Insert blocks node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n              $insertNodeToNearestRoot(blockNode)\n\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <BlocksDrawerComponent />\n}\n"],"names":["useLexicalComposerContext","$insertNodeToNearestRoot","mergeRegister","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","React","useEffect","BlocksDrawerComponent","$createBlockNode","BlockNode","INSERT_BLOCK_COMMAND","BlocksPlugin","editor","hasNodes","Error","registerCommand","payload","update","selection","blockNode","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,iBAAgB;AACxE,SACEC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,QAClB,UAAS;AAChB,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAMxC,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,gBAAgB,EAAEC,SAAS,QAAQ,yBAAwB;AACpE,SAASC,oBAAoB,QAAQ,gBAAe;AAIpD,OAAO,MAAMC,eAA0D;IACrE,MAAM,CAACC,OAAO,GAAGf;IAEjBS,UAAU;QACR,IAAI,CAACM,OAAOC,QAAQ,CAAC;YAACJ;SAAU,GAAG;YACjC,MAAM,IAAIK,MAAM;QAClB;QAEA,OAAOf,cACLa,OAAOG,eAAe,CACpBL,sBACA,CAACM;YACCJ,OAAOK,MAAM,CAAC;gBACZ,MAAMC,YAAYjB,mBAAmBD;gBAErC,IAAIG,kBAAkBe,YAAY;oBAChC,MAAMC,YAAYX,iBAAiBQ;oBACnC,8HAA8H;oBAC9HlB,yBAAyBqB;oBAEzB,MAAM,EAAEC,KAAK,EAAE,GAAGF;oBAClB,MAAMG,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACEpB,iBAAiBmB,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAASzB,iBAAiByB,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;gBACF;YACF;YAEA,OAAO;QACT,GACAzB;IAGN,GAAG;QAACQ;KAAO;IAEX,qBAAO,oBAACL;AACV,EAAC"}
+{"version":3,"sources":["../../../../../src/field/features/blocks/plugin/index.tsx"],"sourcesContent":["'use client'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'\nimport {\n  $getPreviousSelection,\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  COMMAND_PRIORITY_EDITOR,\n} from 'lexical'\nimport React, { useEffect } from 'react'\n\nimport type { PluginComponent } from '../../types.js'\nimport type { BlocksFeatureClientProps } from '../feature.client.js'\nimport type { BlockFields } from '../nodes/BlocksNode.js'\n\nimport { BlocksDrawerComponent } from '../drawer/index.js'\nimport { $createBlockNode, BlockNode } from '../nodes/BlocksNode.js'\nimport { INSERT_BLOCK_COMMAND } from './commands.js'\n\nexport type InsertBlockPayload = Exclude<BlockFields, 'id'>\n\nexport const BlocksPlugin: PluginComponent<BlocksFeatureClientProps> = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    if (!editor.hasNodes([BlockNode])) {\n      throw new Error('BlocksPlugin: BlocksNode not registered on editor')\n    }\n\n    return mergeRegister(\n      editor.registerCommand<InsertBlockPayload>(\n        INSERT_BLOCK_COMMAND,\n        (payload: InsertBlockPayload) => {\n          editor.update(() => {\n            const selection = $getSelection() || $getPreviousSelection()\n\n            if ($isRangeSelection(selection)) {\n              const blockNode = $createBlockNode(payload)\n              // Insert blocks node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist\n              $insertNodeToNearestRoot(blockNode)\n\n              const { focus } = selection\n              const focusNode = focus.getNode()\n\n              // First, delete currently selected node if it's an empty paragraph and if there are sufficient\n              // paragraph nodes (more than 1) left in the parent node, so that we don't \"trap\" the user\n              if (\n                $isParagraphNode(focusNode) &&\n                focusNode.getTextContentSize() === 0 &&\n                focusNode\n                  .getParent()\n                  .getChildren()\n                  .filter((node) => $isParagraphNode(node)).length > 1\n              ) {\n                focusNode.remove()\n              }\n            }\n          })\n\n          return true\n        },\n        COMMAND_PRIORITY_EDITOR,\n      ),\n    )\n  }, [editor])\n\n  return <BlocksDrawerComponent />\n}\n"],"names":["useLexicalComposerContext","$insertNodeToNearestRoot","mergeRegister","$getPreviousSelection","$getSelection","$isParagraphNode","$isRangeSelection","COMMAND_PRIORITY_EDITOR","React","useEffect","BlocksDrawerComponent","$createBlockNode","BlockNode","INSERT_BLOCK_COMMAND","BlocksPlugin","editor","hasNodes","Error","registerCommand","payload","update","selection","blockNode","focus","focusNode","getNode","getTextContentSize","getParent","getChildren","filter","node","length","remove"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,yBAAyB,QAAQ,2CAA0C;AACpF,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,iBAAgB;AACxE,SACEC,qBAAqB,EACrBC,aAAa,EACbC,gBAAgB,EAChBC,iBAAiB,EACjBC,uBAAuB,QAClB,UAAS;AAChB,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAMxC,SAASC,qBAAqB,QAAQ,qBAAoB;AAC1D,SAASC,gBAAgB,EAAEC,SAAS,QAAQ,yBAAwB;AACpE,SAASC,oBAAoB,QAAQ,gBAAe;AAIpD,OAAO,MAAMC,eAA0D;IACrE,MAAM,CAACC,OAAO,GAAGf;IAEjBS,UAAU;QACR,IAAI,CAACM,OAAOC,QAAQ,CAAC;YAACJ;SAAU,GAAG;YACjC,MAAM,IAAIK,MAAM;QAClB;QAEA,OAAOf,cACLa,OAAOG,eAAe,CACpBL,sBACA,CAACM;YACCJ,OAAOK,MAAM,CAAC;gBACZ,MAAMC,YAAYjB,mBAAmBD;gBAErC,IAAIG,kBAAkBe,YAAY;oBAChC,MAAMC,YAAYX,iBAAiBQ;oBACnC,8HAA8H;oBAC9HlB,yBAAyBqB;oBAEzB,MAAM,EAAEC,KAAK,EAAE,GAAGF;oBAClB,MAAMG,YAAYD,MAAME,OAAO;oBAE/B,+FAA+F;oBAC/F,0FAA0F;oBAC1F,IACEpB,iBAAiBmB,cACjBA,UAAUE,kBAAkB,OAAO,KACnCF,UACGG,SAAS,GACTC,WAAW,GACXC,MAAM,CAAC,CAACC,OAASzB,iBAAiByB,OAAOC,MAAM,GAAG,GACrD;wBACAP,UAAUQ,MAAM;oBAClB;gBACF;YACF;YAEA,OAAO;QACT,GACAzB;IAGN,GAAG;QAACQ;KAAO;IAEX,qBAAO,KAACL;AACV,EAAC"}

package/dist/field/features/blocks/validate.js

@@ -27,7 +27,7 @@ export const blockValidationHOC = (props)=>{
             }
         }
         if (errorPaths.length) {
-            return 'Block validation failed: ' + errorPaths.join(', ');
+            return 'The following fields are invalid: ' + errorPaths.join(', ');
         }
         return true;
     };

package/dist/field/features/blocks/validate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/field/features/blocks/validate.ts"],"sourcesContent":["import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'\n\nimport type { NodeValidation } from '../types.js'\nimport type { BlocksFeatureProps } from './feature.server.js'\nimport type { BlockFields, SerializedBlockNode } from './nodes/BlocksNode.js'\n\nexport const blockValidationHOC = (\n  props: BlocksFeatureProps,\n): NodeValidation<SerializedBlockNode> => {\n  return async ({ node, validation }) => {\n    const blockFieldData = node.fields ?? ({} as BlockFields)\n\n    const {\n      options: { id, operation, preferences, req },\n    } = validation\n\n    // find block\n    const block = props.blocks.find((block) => block.slug === blockFieldData.blockType)\n\n    // validate block\n    if (!block) {\n      return 'Block not found'\n    }\n\n    /**\n     * Run buildStateFromSchema as that properly validates block and block sub-fields\n     */\n\n    const result = await buildStateFromSchema({\n      id,\n      data: blockFieldData,\n      fieldSchema: block.fields,\n      operation: operation === 'create' || operation === 'update' ? operation : 'update',\n      preferences,\n      req,\n      siblingData: blockFieldData,\n    })\n\n    let errorPaths = []\n    for (const fieldKey in result) {\n      if (result[fieldKey].errorPaths) {\n        errorPaths = errorPaths.concat(result[fieldKey].errorPaths)\n      }\n    }\n\n    if (errorPaths.length) {\n      return 'Block validation failed: ' + errorPaths.join(', ')\n    }\n\n    return true\n  }\n}\n"],"names":["buildStateFromSchema","blockValidationHOC","props","node","validation","blockFieldData","fields","options","id","operation","preferences","req","block","blocks","find","slug","blockType","result","data","fieldSchema","siblingData","errorPaths","fieldKey","concat","length","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,oBAAoB,QAAQ,4CAA2C;AAMhF,OAAO,MAAMC,qBAAqB,CAChCC;IAEA,OAAO,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAE;QAChC,MAAMC,iBAAiBF,KAAKG,MAAM,IAAK,CAAC;QAExC,MAAM,EACJC,SAAS,EAAEC,EAAE,EAAEC,SAAS,EAAEC,WAAW,EAAEC,GAAG,EAAE,EAC7C,GAAGP;QAEJ,aAAa;QACb,MAAMQ,QAAQV,MAAMW,MAAM,CAACC,IAAI,CAAC,CAACF,QAAUA,MAAMG,IAAI,KAAKV,eAAeW,SAAS;QAElF,iBAAiB;QACjB,IAAI,CAACJ,OAAO;YACV,OAAO;QACT;QAEA;;KAEC,GAED,MAAMK,SAAS,MAAMjB,qBAAqB;YACxCQ;YACAU,MAAMb;YACNc,aAAaP,MAAMN,MAAM;YACzBG,WAAWA,cAAc,YAAYA,cAAc,WAAWA,YAAY;YAC1EC;YACAC;YACAS,aAAaf;QACf;QAEA,IAAIgB,aAAa,EAAE;QACnB,IAAK,MAAMC,YAAYL,OAAQ;YAC7B,IAAIA,MAAM,CAACK,SAAS,CAACD,UAAU,EAAE;gBAC/BA,aAAaA,WAAWE,MAAM,CAACN,MAAM,CAACK,SAAS,CAACD,UAAU;YAC5D;QACF;QAEA,IAAIA,WAAWG,MAAM,EAAE;YACrB,OAAO,8BAA8BH,WAAWI,IAAI,CAAC;QACvD;QAEA,OAAO;IACT;AACF,EAAC"}
+{"version":3,"sources":["../../../../src/field/features/blocks/validate.ts"],"sourcesContent":["import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'\n\nimport type { NodeValidation } from '../types.js'\nimport type { BlocksFeatureProps } from './feature.server.js'\nimport type { BlockFields, SerializedBlockNode } from './nodes/BlocksNode.js'\n\nexport const blockValidationHOC = (\n  props: BlocksFeatureProps,\n): NodeValidation<SerializedBlockNode> => {\n  return async ({ node, validation }) => {\n    const blockFieldData = node.fields ?? ({} as BlockFields)\n\n    const {\n      options: { id, operation, preferences, req },\n    } = validation\n\n    // find block\n    const block = props.blocks.find((block) => block.slug === blockFieldData.blockType)\n\n    // validate block\n    if (!block) {\n      return 'Block not found'\n    }\n\n    /**\n     * Run buildStateFromSchema as that properly validates block and block sub-fields\n     */\n\n    const result = await buildStateFromSchema({\n      id,\n      data: blockFieldData,\n      fieldSchema: block.fields,\n      operation: operation === 'create' || operation === 'update' ? operation : 'update',\n      preferences,\n      req,\n      siblingData: blockFieldData,\n    })\n\n    let errorPaths = []\n    for (const fieldKey in result) {\n      if (result[fieldKey].errorPaths) {\n        errorPaths = errorPaths.concat(result[fieldKey].errorPaths)\n      }\n    }\n\n    if (errorPaths.length) {\n      return 'The following fields are invalid: ' + errorPaths.join(', ')\n    }\n\n    return true\n  }\n}\n"],"names":["buildStateFromSchema","blockValidationHOC","props","node","validation","blockFieldData","fields","options","id","operation","preferences","req","block","blocks","find","slug","blockType","result","data","fieldSchema","siblingData","errorPaths","fieldKey","concat","length","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,oBAAoB,QAAQ,4CAA2C;AAMhF,OAAO,MAAMC,qBAAqB,CAChCC;IAEA,OAAO,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAE;QAChC,MAAMC,iBAAiBF,KAAKG,MAAM,IAAK,CAAC;QAExC,MAAM,EACJC,SAAS,EAAEC,EAAE,EAAEC,SAAS,EAAEC,WAAW,EAAEC,GAAG,EAAE,EAC7C,GAAGP;QAEJ,aAAa;QACb,MAAMQ,QAAQV,MAAMW,MAAM,CAACC,IAAI,CAAC,CAACF,QAAUA,MAAMG,IAAI,KAAKV,eAAeW,SAAS;QAElF,iBAAiB;QACjB,IAAI,CAACJ,OAAO;YACV,OAAO;QACT;QAEA;;KAEC,GAED,MAAMK,SAAS,MAAMjB,qBAAqB;YACxCQ;YACAU,MAAMb;YACNc,aAAaP,MAAMN,MAAM;YACzBG,WAAWA,cAAc,YAAYA,cAAc,WAAWA,YAAY;YAC1EC;YACAC;YACAS,aAAaf;QACf;QAEA,IAAIgB,aAAa,EAAE;QACnB,IAAK,MAAMC,YAAYL,OAAQ;YAC7B,IAAIA,MAAM,CAACK,SAAS,CAACD,UAAU,EAAE;gBAC/BA,aAAaA,WAAWE,MAAM,CAACN,MAAM,CAACK,SAAS,CAACD,UAAU;YAC5D;QACF;QAEA,IAAIA,WAAWG,MAAM,EAAE;YACrB,OAAO,uCAAuCH,WAAWI,IAAI,CAAC;QAChE;QAEA,OAAO;IACT;AACF,EAAC"}

package/dist/field/features/debug/testRecorder/plugin/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical';
 import * as React from 'react';
@@ -387,7 +388,7 @@ ${steps.map(formatStep).join(`\n`)}
     }, [
         generateTestContent
     ]);
-    const button = /*#__PURE__*/ React.createElement("button", {
+    const button = /*#__PURE__*/ _jsx("button", {
         className: `editor-dev-button ${isRecording ? 'active' : ''}`,
         id: "test-recorder-button",
         onClick: (e)=>{
@@ -395,43 +396,57 @@ ${steps.map(formatStep).join(`\n`)}
             e.preventDefault();
         },
         title: isRecording ? 'Disable test recorder' : 'Enable test recorder',
-        type: "button"
-    }, isRecording ? 'Disable test recorder' : 'Enable test recorder');
-    const output = isRecording ? /*#__PURE__*/ React.createElement("div", {
-        className: "test-recorder-output"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "test-recorder-toolbar"
-    }, /*#__PURE__*/ React.createElement("button", {
-        className: "test-recorder-button",
-        id: "test-recorder-button-snapshot",
-        onClick: (e)=>{
-            onSnapshotClick();
-            e.preventDefault();
-        },
-        title: "Insert snapshot",
-        type: "button"
-    }, "Insert Snapshot"), /*#__PURE__*/ React.createElement("button", {
-        className: "test-recorder-button",
-        id: "test-recorder-button-copy",
-        onClick: (e)=>{
-            onCopyClick();
-            e.preventDefault();
-        },
-        title: "Copy to clipboard",
-        type: "button"
-    }, "Copy"), /*#__PURE__*/ React.createElement("button", {
-        className: "test-recorder-button",
-        id: "test-recorder-button-download",
-        onClick: (e)=>{
-            onDownloadClick();
-            e.preventDefault();
-        },
-        title: "Download as a file",
-        type: "button"
-    }, "Download")), /*#__PURE__*/ React.createElement("pre", {
-        id: "test-recorder",
-        ref: preRef
-    }, templatedTest)) : null;
+        type: "button",
+        children: isRecording ? 'Disable test recorder' : 'Enable test recorder'
+    });
+    const output = isRecording ? /*#__PURE__*/ _jsxs("div", {
+        className: "test-recorder-output",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "test-recorder-toolbar",
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "test-recorder-button",
+                        id: "test-recorder-button-snapshot",
+                        onClick: (e)=>{
+                            onSnapshotClick();
+                            e.preventDefault();
+                        },
+                        title: "Insert snapshot",
+                        type: "button",
+                        children: "Insert Snapshot"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "test-recorder-button",
+                        id: "test-recorder-button-copy",
+                        onClick: (e)=>{
+                            onCopyClick();
+                            e.preventDefault();
+                        },
+                        title: "Copy to clipboard",
+                        type: "button",
+                        children: "Copy"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: "test-recorder-button",
+                        id: "test-recorder-button-download",
+                        onClick: (e)=>{
+                            onDownloadClick();
+                            e.preventDefault();
+                        },
+                        title: "Download as a file",
+                        type: "button",
+                        children: "Download"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("pre", {
+                id: "test-recorder",
+                ref: preRef,
+                children: templatedTest
+            })
+        ]
+    }) : null;
     return [
         button,
         output
@@ -440,7 +455,18 @@ ${steps.map(formatStep).join(`\n`)}
 export const TestRecorderPlugin = ()=>{
     const [editor] = useLexicalComposerContext();
     const [testRecorderButton, testRecorderOutput] = useTestRecorder(editor);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", null, "HI"), testRecorderButton, testRecorderOutput, /*#__PURE__*/ React.createElement("p", null, "DONE"));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: "HI"
+            }),
+            testRecorderButton,
+            testRecorderOutput,
+            /*#__PURE__*/ _jsx("p", {
+                children: "DONE"
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map