@payloadcms/richtext-lexical 3.0.0-beta.85 → 3.0.0-beta.87

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

@@ -1,4 +1,5 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Collapsible, Form, Pill, RenderComponent, SectionTitle, ShimmerEffect, useConfig, useDocumentInfo, useFieldProps, useFormSubmitted, useTranslation } from '@payloadcms/ui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -8,150 +9,137 @@ import { getFormState } from '@payloadcms/ui/shared';
 import { v4 as uuid } from 'uuid';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { BlockContent } from './BlockContent.js';
-export const BlockComponent = (props)=>{
-    const { formData, nodeKey } = props;
-    const { config } = useConfig();
-    const submitted = useFormSubmitted();
-    const { id } = useDocumentInfo();
-    const { path, schemaPath } = useFieldProps();
-    const { field: parentLexicalRichTextField } = useEditorConfigContext();
-    const [initialState, setInitialState] = useState(false);
-    const { field: { richTextComponentMap } } = useEditorConfigContext();
-    const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`;
-    const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`;
-    const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
-    const clientBlock = blocksField.blocks.find((block)=>block.slug === formData.blockType);
-    // Field Schema
-    useEffect(()=>{
-        const awaitInitialState = async ()=>{
-            const state = await getFormState({
-                apiRoute: config.routes.api,
-                body: {
-                    id,
-                    data: formData,
-                    operation: 'update',
-                    schemaPath: schemaFieldsPath
-                },
-                serverURL: config.serverURL
-            });
-            if (state) {
-                state.blockName = {
-                    initialValue: '',
-                    passesCondition: true,
-                    valid: true,
-                    value: formData.blockName
-                };
-                setInitialState(state);
-            }
-        };
-        if (formData) {
-            void awaitInitialState();
-        }
-    }, [
-        config.routes.api,
-        config.serverURL,
-        schemaFieldsPath,
-        id
-    ]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
-    ;
-    const onChange = useCallback(async ({ formState: prevFormState })=>{
-        const formState = await getFormState({
-            apiRoute: config.routes.api,
-            body: {
-                id,
-                formState: prevFormState,
-                operation: 'update',
-                schemaPath: schemaFieldsPath
-            },
-            serverURL: config.serverURL
-        });
-        formState.blockName = {
-            initialValue: '',
-            passesCondition: true,
-            valid: true,
-            value: formData.blockName
+export const BlockComponent = props => {
+  const {
+    formData,
+    nodeKey
+  } = props;
+  const {
+    config
+  } = useConfig();
+  const submitted = useFormSubmitted();
+  const {
+    id
+  } = useDocumentInfo();
+  const {
+    path,
+    schemaPath
+  } = useFieldProps();
+  const {
+    field: parentLexicalRichTextField
+  } = useEditorConfigContext();
+  const [initialState, setInitialState] = useState(false);
+  const {
+    field: {
+      richTextComponentMap
+    }
+  } = useEditorConfigContext();
+  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`;
+  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`;
+  const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
+  const clientBlock = blocksField.blocks.find(block => block.slug === formData.blockType);
+  // Field Schema
+  useEffect(() => {
+    const awaitInitialState = async () => {
+      const state = await getFormState({
+        apiRoute: config.routes.api,
+        body: {
+          id,
+          data: formData,
+          operation: 'update',
+          schemaPath: schemaFieldsPath
+        },
+        serverURL: config.serverURL
+      });
+      if (state) {
+        state.blockName = {
+          initialValue: '',
+          passesCondition: true,
+          valid: true,
+          value: formData.blockName
         };
-        return formState;
-    }, [
-        config.routes.api,
-        config.serverURL,
+        setInitialState(state);
+      }
+    };
+    if (formData) {
+      void awaitInitialState();
+    }
+  }, [config.routes.api, config.serverURL, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
+  ;
+  const onChange = useCallback(async ({
+    formState: prevFormState
+  }) => {
+    const formState = await getFormState({
+      apiRoute: config.routes.api,
+      body: {
         id,
-        schemaFieldsPath,
-        formData.blockName
-    ]);
-    const { i18n } = useTranslation();
-    const classNames = [
-        `${baseClass}__row`,
-        `${baseClass}__row--no-errors`
-    ].filter(Boolean).join(' ');
-    // Memoized Form JSX
-    const formContent = useMemo(()=>{
-        return clientBlock && initialState !== false ? /*#__PURE__*/ _jsx(Form, {
-            beforeSubmit: [
-                onChange
-            ],
-            fields: clientBlock.fields,
-            initialState: initialState,
-            onChange: [
-                onChange
-            ],
-            submitted: submitted,
-            uuid: uuid(),
-            children: /*#__PURE__*/ _jsx(BlockContent, {
-                baseClass: baseClass,
-                clientBlock: clientBlock,
-                field: parentLexicalRichTextField,
-                formData: formData,
-                formSchema: clientBlock.fields,
-                nodeKey: nodeKey,
-                path: `${path}.lexical_internal_feature.blocks.${formData.blockType}`,
-                schemaPath: schemaFieldsPath
-            })
-        }) : /*#__PURE__*/ _jsx(Collapsible, {
-            className: classNames,
-            collapsibleStyle: "default",
-            header: clientBlock?.admin?.components?.Label ? /*#__PURE__*/ _jsx(RenderComponent, {
-                clientProps: {
-                    blockKind: 'lexicalBlock',
-                    formData
-                },
-                mappedComponent: clientBlock.admin.components.Label
-            }) : /*#__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: clientBlock && typeof clientBlock.labels.singular === 'string' ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug
-                        }),
-                        /*#__PURE__*/ _jsx(SectionTitle, {
-                            path: "blockName",
-                            readOnly: parentLexicalRichTextField?.admin?.readOnly
-                        })
-                    ]
-                })
-            }),
-            children: /*#__PURE__*/ _jsx(ShimmerEffect, {
-                height: "35vh"
-            })
-        }, 0);
-    }, [
-        clientBlock,
-        initialState,
-        onChange,
-        submitted,
-        parentLexicalRichTextField,
-        nodeKey,
-        path,
-        schemaFieldsPath,
-        classNames,
-        i18n
-    ]);
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass + ' ' + baseClass + '-' + formData.blockType,
-        children: formContent
+        formState: prevFormState,
+        operation: 'update',
+        schemaPath: schemaFieldsPath
+      },
+      serverURL: config.serverURL
     });
+    formState.blockName = {
+      initialValue: '',
+      passesCondition: true,
+      valid: true,
+      value: formData.blockName
+    };
+    return formState;
+  }, [config.routes.api, config.serverURL, id, schemaFieldsPath, formData.blockName]);
+  const {
+    i18n
+  } = useTranslation();
+  const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ');
+  // Memoized Form JSX
+  const formContent = useMemo(() => {
+    return clientBlock && initialState !== false ? /*#__PURE__*/_jsx(Form, {
+      beforeSubmit: [onChange],
+      fields: clientBlock.fields,
+      initialState: initialState,
+      onChange: [onChange],
+      submitted: submitted,
+      uuid: uuid(),
+      children: /*#__PURE__*/_jsx(BlockContent, {
+        baseClass: baseClass,
+        clientBlock: clientBlock,
+        field: parentLexicalRichTextField,
+        formData: formData,
+        formSchema: clientBlock.fields,
+        nodeKey: nodeKey,
+        path: `${path}.lexical_internal_feature.blocks.${formData.blockType}`,
+        schemaPath: schemaFieldsPath
+      })
+    }) : /*#__PURE__*/_jsx(Collapsible, {
+      className: classNames,
+      collapsibleStyle: "default",
+      header: clientBlock?.admin?.components?.Label ? /*#__PURE__*/_jsx(RenderComponent, {
+        clientProps: {
+          blockKind: 'lexicalBlock',
+          formData
+        },
+        mappedComponent: clientBlock.admin.components.Label
+      }) : /*#__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: clientBlock && typeof clientBlock.labels.singular === 'string' ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug
+          }), /*#__PURE__*/_jsx(SectionTitle, {
+            path: "blockName",
+            readOnly: parentLexicalRichTextField?.admin?.readOnly
+          })]
+        })
+      }),
+      children: /*#__PURE__*/_jsx(ShimmerEffect, {
+        height: "35vh"
+      })
+    }, 0);
+  }, [clientBlock, initialState, onChange, submitted, parentLexicalRichTextField, nodeKey, path, schemaFieldsPath, classNames, i18n]);
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass + ' ' + baseClass + '-' + formData.blockType,
+    children: formContent
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Collapsible,\n  Form,\n  Pill,\n  RenderComponent,\n  SectionTitle,\n  ShimmerEffect,\n  useConfig,\n  useDocumentInfo,\n  useFieldProps,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nconst baseClass = 'lexical-block'\nimport type { BlockFieldClient, FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { getFormState } from '@payloadcms/ui/shared'\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 { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n  readonly children?: React.ReactNode\n  readonly formData: BlockFields\n  readonly nodeKey?: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { formData, nodeKey } = props\n  const { config } = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`\n\n  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`\n  const blocksField: BlockFieldClient = richTextComponentMap.get(componentMapRenderedBlockPath)[0]\n\n  const clientBlock = blocksField.blocks.find((block) => block.slug === formData.blockType)\n\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: formData,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        setInitialState(state)\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\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      formState.blockName = {\n        initialValue: '',\n        passesCondition: true,\n        valid: true,\n        value: formData.blockName,\n      }\n\n      return formState\n    },\n\n    [config.routes.api, config.serverURL, id, schemaFieldsPath, 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 clientBlock && initialState !== false ? (\n      <Form\n        beforeSubmit={[onChange]}\n        fields={clientBlock.fields}\n        initialState={initialState}\n        onChange={[onChange]}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          clientBlock={clientBlock}\n          field={parentLexicalRichTextField}\n          formData={formData}\n          formSchema={clientBlock.fields}\n          nodeKey={nodeKey}\n          path={`${path}.lexical_internal_feature.blocks.${formData.blockType}`}\n          schemaPath={schemaFieldsPath}\n        />\n      </Form>\n    ) : (\n      <Collapsible\n        className={classNames}\n        collapsibleStyle=\"default\"\n        header={\n          clientBlock?.admin?.components?.Label ? (\n            <RenderComponent\n              clientProps={{ blockKind: 'lexicalBlock', formData }}\n              mappedComponent={clientBlock.admin.components.Label}\n            />\n          ) : (\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                  {clientBlock && typeof clientBlock.labels.singular === 'string'\n                    ? getTranslation(clientBlock.labels.singular, i18n)\n                    : clientBlock.slug}\n                </Pill>\n                <SectionTitle\n                  path=\"blockName\"\n                  readOnly={parentLexicalRichTextField?.admin?.readOnly}\n                />\n              </div>\n            </div>\n          )\n        }\n        key={0}\n      >\n        <ShimmerEffect height=\"35vh\" />\n      </Collapsible>\n    )\n  }, [\n    clientBlock,\n    initialState,\n    onChange,\n    submitted,\n    parentLexicalRichTextField,\n    nodeKey,\n    path,\n    schemaFieldsPath,\n    classNames,\n    i18n,\n  ])\n\n  return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"names":["Collapsible","Form","Pill","RenderComponent","SectionTitle","ShimmerEffect","useConfig","useDocumentInfo","useFieldProps","useFormSubmitted","useTranslation","React","useCallback","useEffect","useMemo","useState","baseClass","getTranslation","getFormState","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","formData","nodeKey","config","submitted","id","path","schemaPath","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","schemaFieldsPath","blockType","componentMapRenderedBlockPath","blocksField","get","clientBlock","blocks","find","block","slug","awaitInitialState","state","apiRoute","routes","api","body","data","operation","serverURL","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","i18n","classNames","filter","Boolean","join","formContent","beforeSubmit","fields","formSchema","className","collapsibleStyle","header","admin","components","Label","clientProps","blockKind","mappedComponent","div","pillStyle","labels","singular","readOnly","height"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Collapsible","Form","Pill","RenderComponent","SectionTitle","ShimmerEffect","useConfig","useDocumentInfo","useFieldProps","useFormSubmitted","useTranslation","React","useCallback","useEffect","useMemo","useState","baseClass","getTranslation","getFormState","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","formData","nodeKey","config","submitted","id","path","schemaPath","field","parentLexicalRichTextField","initialState","setInitialState","richTextComponentMap","schemaFieldsPath","blockType","componentMapRenderedBlockPath","blocksField","get","clientBlock","blocks","find","block","slug","awaitInitialState","state","apiRoute","routes","api","body","data","operation","serverURL","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","i18n","classNames","filter","Boolean","join","formContent","_jsx","beforeSubmit","fields","formSchema","className","collapsibleStyle","header","admin","components","Label","clientProps","blockKind","mappedComponent","_jsxs","pillStyle","labels","singular","readOnly","height"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FormProps } from '@payloadcms/ui'\n\nimport {\n  Collapsible,\n  Form,\n  Pill,\n  RenderComponent,\n  SectionTitle,\n  ShimmerEffect,\n  useConfig,\n  useDocumentInfo,\n  useFieldProps,\n  useFormSubmitted,\n  useTranslation,\n} from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nconst baseClass = 'lexical-block'\nimport type { BlockFieldClient, FormState } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { getFormState } from '@payloadcms/ui/shared'\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 { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n  readonly children?: React.ReactNode\n  readonly formData: BlockFields\n  readonly nodeKey?: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n  const { formData, nodeKey } = props\n  const { config } = useConfig()\n  const submitted = useFormSubmitted()\n  const { id } = useDocumentInfo()\n  const { path, schemaPath } = useFieldProps()\n  const { field: parentLexicalRichTextField } = useEditorConfigContext()\n\n  const [initialState, setInitialState] = useState<FormState | false>(false)\n  const {\n    field: { richTextComponentMap },\n  } = useEditorConfigContext()\n\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.lexical_blocks.${formData.blockType}`\n\n  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_blocks`\n  const blocksField: BlockFieldClient = richTextComponentMap.get(componentMapRenderedBlockPath)[0]\n\n  const clientBlock = blocksField.blocks.find((block) => block.slug === formData.blockType)\n\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: formData,\n          operation: 'update',\n          schemaPath: schemaFieldsPath,\n        },\n        serverURL: config.serverURL,\n      })\n\n      if (state) {\n        state.blockName = {\n          initialValue: '',\n          passesCondition: true,\n          valid: true,\n          value: formData.blockName,\n        }\n\n        setInitialState(state)\n      }\n    }\n\n    if (formData) {\n      void awaitInitialState()\n    }\n  }, [config.routes.api, config.serverURL, schemaFieldsPath, id]) // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\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      formState.blockName = {\n        initialValue: '',\n        passesCondition: true,\n        valid: true,\n        value: formData.blockName,\n      }\n\n      return formState\n    },\n\n    [config.routes.api, config.serverURL, id, schemaFieldsPath, 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 clientBlock && initialState !== false ? (\n      <Form\n        beforeSubmit={[onChange]}\n        fields={clientBlock.fields}\n        initialState={initialState}\n        onChange={[onChange]}\n        submitted={submitted}\n        uuid={uuid()}\n      >\n        <BlockContent\n          baseClass={baseClass}\n          clientBlock={clientBlock}\n          field={parentLexicalRichTextField}\n          formData={formData}\n          formSchema={clientBlock.fields}\n          nodeKey={nodeKey}\n          path={`${path}.lexical_internal_feature.blocks.${formData.blockType}`}\n          schemaPath={schemaFieldsPath}\n        />\n      </Form>\n    ) : (\n      <Collapsible\n        className={classNames}\n        collapsibleStyle=\"default\"\n        header={\n          clientBlock?.admin?.components?.Label ? (\n            <RenderComponent\n              clientProps={{ blockKind: 'lexicalBlock', formData }}\n              mappedComponent={clientBlock.admin.components.Label}\n            />\n          ) : (\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                  {clientBlock && typeof clientBlock.labels.singular === 'string'\n                    ? getTranslation(clientBlock.labels.singular, i18n)\n                    : clientBlock.slug}\n                </Pill>\n                <SectionTitle\n                  path=\"blockName\"\n                  readOnly={parentLexicalRichTextField?.admin?.readOnly}\n                />\n              </div>\n            </div>\n          )\n        }\n        key={0}\n      >\n        <ShimmerEffect height=\"35vh\" />\n      </Collapsible>\n    )\n  }, [\n    clientBlock,\n    initialState,\n    onChange,\n    submitted,\n    parentLexicalRichTextField,\n    nodeKey,\n    path,\n    schemaFieldsPath,\n    classNames,\n    i18n,\n  ])\n\n  return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/blocks/client/component/removeEmptyArrayValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"removeEmptyArrayValues.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/removeEmptyArrayValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAQnF"}
+{"version":3,"file":"removeEmptyArrayValues.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/removeEmptyArrayValues.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAQnF"}

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

@@ -1,16 +1,20 @@
+'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,"sources":["../../../../../src/features/blocks/client/component/removeEmptyArrayValues.ts"],"sourcesContent":["import 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":"AAEA;;;;;CAKC,GACD,OAAO,SAASA,uBAAuB,EAAEC,MAAM,EAAyB;IACtE,IAAK,MAAMC,OAAOD,OAAQ;QACxB,MAAME,QAAQF,MAAM,CAACC,IAAI;QACzB,IAAIE,MAAMC,OAAO,CAACF,MAAMG,IAAI,KAAK,WAAWH,OAAO;YACjDA,MAAMI,eAAe,GAAG;QAC1B;IACF;IACA,OAAON;AACT"}
+{"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,CAAMG,IAAI,KAAK,WAAWH,KAAA,EAAO;MACjDA,KAAA,CAAMI,eAAe,GAAG;IAC1B;EACF;EACA,OAAON,MAAA;AACT","ignoreList":[]}

package/dist/features/blocks/client/componentInline/index.js

@@ -1,4 +1,5 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef } from 'react';
 const baseClass = 'inline-block';
@@ -11,128 +12,111 @@ import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { $isInlineBlockNode } from '../nodes/InlineBlocksNode.js';
 import { OPEN_INLINE_BLOCK_DRAWER_COMMAND } from '../plugin/commands.js';
-export const InlineBlockComponent = (props)=>{
-    const { formData, nodeKey } = props;
-    const [editor] = useLexicalComposerContext();
-    const { i18n, t } = useTranslation();
-    const { field } = useEditorConfigContext();
-    const inlineBlockElemElemRef = useRef(null);
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const { field: { richTextComponentMap } } = useEditorConfigContext();
-    const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_inline_blocks`;
-    const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
-    const clientBlock = blocksField.blocks.find((block)=>block.slug === formData.blockType);
-    const removeInlineBlock = useCallback(()=>{
-        editor.update(()=>{
-            $getNodeByKey(nodeKey).remove();
-        });
-    }, [
-        editor,
-        nodeKey
-    ]);
-    const $onDelete = useCallback((event)=>{
-        if (isSelected && $isNodeSelection($getSelection())) {
-            event.preventDefault();
-            const node = $getNodeByKey(nodeKey);
-            if ($isInlineBlockNode(node)) {
-                node.remove();
-                return true;
-            }
-        }
-        return false;
-    }, [
-        isSelected,
-        nodeKey
-    ]);
-    const onClick = useCallback((payload)=>{
-        const event = payload;
-        // Check if inlineBlockElemElemRef.target or anything WITHIN inlineBlockElemElemRef.target was clicked
-        if (event.target === inlineBlockElemElemRef.current || inlineBlockElemElemRef.current?.contains(event.target)) {
-            if (event.shiftKey) {
-                setSelected(!isSelected);
-            } else {
-                if (!isSelected) {
-                    clearSelection();
-                    setSelected(true);
-                }
-            }
-            return true;
-        }
-        return false;
-    }, [
-        isSelected,
-        setSelected,
-        clearSelection
-    ]);
-    useEffect(()=>{
-        return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW));
-    }, [
-        clearSelection,
-        editor,
-        isSelected,
-        nodeKey,
-        $onDelete,
-        setSelected,
-        onClick
-    ]);
-    const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            baseClass,
-            baseClass + '-' + formData.blockType,
-            isSelected && `${baseClass}--selected`
-        ].filter(Boolean).join(' '),
-        ref: inlineBlockElemElemRef,
-        children: [
-            clientBlock?.admin?.components?.Label ? /*#__PURE__*/ _jsx(RenderComponent, {
-                clientProps: {
-                    blockKind: 'lexicalInlineBlock',
-                    formData
-                },
-                mappedComponent: clientBlock.admin.components.Label
-            }) : /*#__PURE__*/ _jsx("div", {
-                children: getTranslation(clientBlock.labels?.singular, i18n)
-            }),
-            editor.isEditable() && /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__actions`,
-                children: [
-                    /*#__PURE__*/ _jsx(Button, {
-                        buttonStyle: "icon-label",
-                        className: `${baseClass}__editButton`,
-                        disabled: field?.admin?.readOnly,
-                        el: "div",
-                        icon: "edit",
-                        onClick: ()=>{
-                            editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {
-                                fields: formData,
-                                nodeKey
-                            });
-                        },
-                        round: true,
-                        size: "small",
-                        tooltip: t('lexical:blocks:inlineBlocks:edit', {
-                            label: blockDisplayName
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        buttonStyle: "icon-label",
-                        className: `${baseClass}__removeButton`,
-                        disabled: field?.admin?.readOnly,
-                        icon: "x",
-                        onClick: (e)=>{
-                            e.preventDefault();
-                            removeInlineBlock();
-                        },
-                        round: true,
-                        size: "small",
-                        tooltip: t('lexical:blocks:inlineBlocks:remove', {
-                            label: blockDisplayName
-                        })
-                    })
-                ]
-            })
-        ]
+export const InlineBlockComponent = props => {
+  const {
+    formData,
+    nodeKey
+  } = props;
+  const [editor] = useLexicalComposerContext();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    field
+  } = useEditorConfigContext();
+  const inlineBlockElemElemRef = useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const {
+    field: {
+      richTextComponentMap
+    }
+  } = useEditorConfigContext();
+  const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_inline_blocks`;
+  const blocksField = richTextComponentMap.get(componentMapRenderedBlockPath)[0];
+  const clientBlock = blocksField.blocks.find(block => block.slug === formData.blockType);
+  const removeInlineBlock = useCallback(() => {
+    editor.update(() => {
+      $getNodeByKey(nodeKey).remove();
     });
+  }, [editor, nodeKey]);
+  const $onDelete = useCallback(event => {
+    if (isSelected && $isNodeSelection($getSelection())) {
+      event.preventDefault();
+      const node = $getNodeByKey(nodeKey);
+      if ($isInlineBlockNode(node)) {
+        node.remove();
+        return true;
+      }
+    }
+    return false;
+  }, [isSelected, nodeKey]);
+  const onClick = useCallback(payload => {
+    const event_0 = payload;
+    // Check if inlineBlockElemElemRef.target or anything WITHIN inlineBlockElemElemRef.target was clicked
+    if (event_0.target === inlineBlockElemElemRef.current || inlineBlockElemElemRef.current?.contains(event_0.target)) {
+      if (event_0.shiftKey) {
+        setSelected(!isSelected);
+      } else {
+        if (!isSelected) {
+          clearSelection();
+          setSelected(true);
+        }
+      }
+      return true;
+    }
+    return false;
+  }, [isSelected, setSelected, clearSelection]);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(CLICK_COMMAND, onClick, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW));
+  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick]);
+  const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock.slug;
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, baseClass + '-' + formData.blockType, isSelected && `${baseClass}--selected`].filter(Boolean).join(' '),
+    ref: inlineBlockElemElemRef,
+    children: [clientBlock?.admin?.components?.Label ? /*#__PURE__*/_jsx(RenderComponent, {
+      clientProps: {
+        blockKind: 'lexicalInlineBlock',
+        formData
+      },
+      mappedComponent: clientBlock.admin.components.Label
+    }) : /*#__PURE__*/_jsx("div", {
+      children: getTranslation(clientBlock.labels?.singular, i18n)
+    }), editor.isEditable() && /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__actions`,
+      children: [/*#__PURE__*/_jsx(Button, {
+        buttonStyle: "icon-label",
+        className: `${baseClass}__editButton`,
+        disabled: field?.admin?.readOnly,
+        el: "div",
+        icon: "edit",
+        onClick: () => {
+          editor.dispatchCommand(OPEN_INLINE_BLOCK_DRAWER_COMMAND, {
+            fields: formData,
+            nodeKey
+          });
+        },
+        round: true,
+        size: "small",
+        tooltip: t('lexical:blocks:inlineBlocks:edit', {
+          label: blockDisplayName
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "icon-label",
+        className: `${baseClass}__removeButton`,
+        disabled: field?.admin?.readOnly,
+        icon: "x",
+        onClick: e => {
+          e.preventDefault();
+          removeInlineBlock();
+        },
+        round: true,
+        size: "small",
+        tooltip: t('lexical:blocks:inlineBlocks:remove', {
+          label: blockDisplayName
+        })
+      })]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map