@payloadcms/richtext-lexical 3.68.0-internal-debug.2eb12b9 → 3.68.0-internal-debug.dafc24d

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

@@ -1,11 +1,12 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
 import { Button, Drawer, EditDepthProvider, Form, formatDrawerSlug, FormSubmit, RenderFields, ShimmerEffect, useConfig, useDocumentForm, useDocumentInfo, useEditDepth, useServerFunctions, useTranslation } from '@payloadcms/ui';
 import { abortAndIgnore } from '@payloadcms/ui/shared';
 import { $getNodeByKey } from 'lexical';
+import './index.scss';
 import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
 import React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
@@ -242,7 +243,7 @@ export const InlineBlockComponent = (props)=>{
         nodeKey,
         formData
     ]);
-    const RemoveButton = useMemo(()=>()=>/*#__PURE__*/ _jsx(Button, {
+    const RemoveButton = useMemo(()=>()=>/*#__PURE__*/ _jsxDEV(Button, {
                 buttonStyle: "icon-label",
                 className: `${baseClass}__removeButton`,
                 disabled: !isEditable,
@@ -256,14 +257,18 @@ export const InlineBlockComponent = (props)=>{
                 tooltip: t('lexical:blocks:inlineBlocks:remove', {
                     label: blockDisplayName
                 })
-            }), [
+            }, void 0, false, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 341,
+                columnNumber: 7
+            }, this), [
         baseClass,
         blockDisplayName,
         isEditable,
         removeInlineBlock,
         t
     ]);
-    const EditButton = useMemo(()=>()=>/*#__PURE__*/ _jsx(Button, {
+    const EditButton = useMemo(()=>()=>/*#__PURE__*/ _jsxDEV(Button, {
                 buttonStyle: "icon-label",
                 className: `${baseClass}__editButton`,
                 disabled: !isEditable,
@@ -277,14 +282,18 @@ export const InlineBlockComponent = (props)=>{
                 tooltip: t('lexical:blocks:inlineBlocks:edit', {
                     label: blockDisplayName
                 })
-            }), [
+            }, void 0, false, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 360,
+                columnNumber: 7
+            }, this), [
         baseClass,
         blockDisplayName,
         isEditable,
         t,
         toggleDrawer
     ]);
-    const InlineBlockContainer = useMemo(()=>({ children, className })=>/*#__PURE__*/ _jsx("div", {
+    const InlineBlockContainer = useMemo(()=>({ children, className })=>/*#__PURE__*/ _jsxDEV("div", {
                 className: [
                     `${baseClass}__container`,
                     baseClass + '-' + formData.blockType,
@@ -292,7 +301,11 @@ export const InlineBlockComponent = (props)=>{
                 ].filter(Boolean).join(' '),
                 ref: inlineBlockElemElemRef,
                 children: children
-            }), [
+            }, void 0, false, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 380,
+                columnNumber: 9
+            }, this), [
         baseClass,
         formData.blockType
     ]);
@@ -300,9 +313,13 @@ export const InlineBlockComponent = (props)=>{
         if (CustomLabel) {
             return ()=>CustomLabel;
         } else {
-            return ()=>/*#__PURE__*/ _jsx("div", {
+            return ()=>/*#__PURE__*/ _jsxDEV("div", {
                     children: clientBlock?.labels ? getTranslation(clientBlock?.labels.singular, i18n) : ''
-                });
+                }, void 0, false, {
+                    fileName: "src/features/blocks/client/componentInline/index.tsx",
+                    lineNumber: 397,
+                    columnNumber: 9
+                }, this);
         }
     }, [
         CustomLabel,
@@ -310,24 +327,40 @@ export const InlineBlockComponent = (props)=>{
         i18n
     ]);
     if (!clientBlock) {
-        return /*#__PURE__*/ _jsxs(InlineBlockContainer, {
+        return /*#__PURE__*/ _jsxDEV(InlineBlockContainer, {
             className: `${baseClass}-not-found`,
             children: [
-                /*#__PURE__*/ _jsxs("span", {
+                /*#__PURE__*/ _jsxDEV("span", {
                     children: [
                         "Error: Block '",
                         formData.blockType,
                         "' not found"
                     ]
-                }),
-                isEditable ? /*#__PURE__*/ _jsx("div", {
+                }, void 0, true, {
+                    fileName: "src/features/blocks/client/componentInline/index.tsx",
+                    lineNumber: 405,
+                    columnNumber: 9
+                }, this),
+                isEditable ? /*#__PURE__*/ _jsxDEV("div", {
                     className: `${baseClass}__actions`,
-                    children: /*#__PURE__*/ _jsx(RemoveButton, {})
-                }) : null
+                    children: /*#__PURE__*/ _jsxDEV(RemoveButton, {}, void 0, false, {
+                        fileName: "src/features/blocks/client/componentInline/index.tsx",
+                        lineNumber: 408,
+                        columnNumber: 13
+                    }, this)
+                }, void 0, false, {
+                    fileName: "src/features/blocks/client/componentInline/index.tsx",
+                    lineNumber: 407,
+                    columnNumber: 11
+                }, this) : null
             ]
-        });
+        }, void 0, true, {
+            fileName: "src/features/blocks/client/componentInline/index.tsx",
+            lineNumber: 404,
+            columnNumber: 7
+        }, this);
     }
-    return /*#__PURE__*/ _jsxs(Form, {
+    return /*#__PURE__*/ _jsxDEV(Form, {
         beforeSubmit: [
             async ({ formState })=>{
                 // This is only called when form is submitted from drawer
@@ -350,16 +383,16 @@ export const InlineBlockComponent = (props)=>{
         },
         uuid: uuid(),
         children: [
-            /*#__PURE__*/ _jsx(EditDepthProvider, {
-                children: /*#__PURE__*/ _jsx(Drawer, {
+            /*#__PURE__*/ _jsxDEV(EditDepthProvider, {
+                children: /*#__PURE__*/ _jsxDEV(Drawer, {
                     className: '',
                     slug: drawerSlug,
                     title: t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {
                         label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label')
                     }),
-                    children: initialState ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: initialState ? /*#__PURE__*/ _jsxDEV(_Fragment, {
                         children: [
-                            /*#__PURE__*/ _jsx(RenderFields, {
+                            /*#__PURE__*/ _jsxDEV(RenderFields, {
                                 fields: clientBlock?.fields,
                                 forceRender: true,
                                 parentIndexPath: "",
@@ -368,16 +401,32 @@ export const InlineBlockComponent = (props)=>{
                                 parentSchemaPath: schemaFieldsPath,
                                 permissions: true,
                                 readOnly: !isEditable
-                            }),
-                            /*#__PURE__*/ _jsx(FormSubmit, {
+                            }, void 0, false, {
+                                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                                lineNumber: 444,
+                                columnNumber: 15
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(FormSubmit, {
                                 programmaticSubmit: true,
                                 children: t('fields:saveChanges')
-                            })
+                            }, void 0, false, {
+                                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                                lineNumber: 453,
+                                columnNumber: 15
+                            }, this)
                         ]
-                    }) : null
-                })
-            }),
-            CustomBlock ? /*#__PURE__*/ _jsx(InlineBlockComponentContext, {
+                    }, void 0, true) : null
+                }, void 0, false, {
+                    fileName: "src/features/blocks/client/componentInline/index.tsx",
+                    lineNumber: 435,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 434,
+                columnNumber: 7
+            }, this),
+            CustomBlock ? /*#__PURE__*/ _jsxDEV(InlineBlockComponentContext, {
                 value: {
                     EditButton,
                     initialState,
@@ -387,23 +436,55 @@ export const InlineBlockComponent = (props)=>{
                     RemoveButton
                 },
                 children: CustomBlock
-            }) : /*#__PURE__*/ _jsxs(InlineBlockContainer, {
+            }, void 0, false, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 459,
+                columnNumber: 9
+            }, this) : /*#__PURE__*/ _jsxDEV(InlineBlockContainer, {
                 children: [
-                    initialState ? /*#__PURE__*/ _jsx(Label, {}) : /*#__PURE__*/ _jsx(ShimmerEffect, {
+                    initialState ? /*#__PURE__*/ _jsxDEV(Label, {}, void 0, false, {
+                        fileName: "src/features/blocks/client/componentInline/index.tsx",
+                        lineNumber: 473,
+                        columnNumber: 27
+                    }, this) : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                         height: "15px",
                         width: "40px"
-                    }),
-                    isEditable ? /*#__PURE__*/ _jsxs("div", {
+                    }, void 0, false, {
+                        fileName: "src/features/blocks/client/componentInline/index.tsx",
+                        lineNumber: 473,
+                        columnNumber: 39
+                    }, this),
+                    isEditable ? /*#__PURE__*/ _jsxDEV("div", {
                         className: `${baseClass}__actions`,
                         children: [
-                            /*#__PURE__*/ _jsx(EditButton, {}),
-                            /*#__PURE__*/ _jsx(RemoveButton, {})
+                            /*#__PURE__*/ _jsxDEV(EditButton, {}, void 0, false, {
+                                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                                lineNumber: 476,
+                                columnNumber: 15
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(RemoveButton, {}, void 0, false, {
+                                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                                lineNumber: 477,
+                                columnNumber: 15
+                            }, this)
                         ]
-                    }) : null
+                    }, void 0, true, {
+                        fileName: "src/features/blocks/client/componentInline/index.tsx",
+                        lineNumber: 475,
+                        columnNumber: 13
+                    }, this) : null
                 ]
-            })
+            }, void 0, true, {
+                fileName: "src/features/blocks/client/componentInline/index.tsx",
+                lineNumber: 472,
+                columnNumber: 9
+            }, this)
         ]
-    });
+    }, void 0, true, {
+        fileName: "src/features/blocks/client/componentInline/index.tsx",
+        lineNumber: 416,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/blocks/client/componentInline/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BlocksFieldClient, ClientBlock, Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Drawer,\n  EditDepthProvider,\n  Form,\n  formatDrawerSlug,\n  FormSubmit,\n  RenderFields,\n  ShimmerEffect,\n  useConfig,\n  useDocumentForm,\n  useDocumentInfo,\n  useEditDepth,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { $getNodeByKey } from 'lexical'\n\nimport './index.scss'\n\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { InlineBlockFields } from '../../server/nodes/InlineBlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isInlineBlockNode } from '../nodes/InlineBlocksNode.js'\n\ntype Props = {\n  /**\n   * Can be modified by the node in order to trigger the re-fetch of the initial state based on the\n   * formData. This is useful when node.setFields() is explicitly called from outside of the form - in\n   * this case, the new field state is likely not reflected in the form state, so we need to re-fetch\n   */\n  readonly cacheBuster: number\n  readonly className: string\n  readonly formData: InlineBlockFields\n  readonly nodeKey: string\n}\n\ntype InlineBlockComponentContextType = {\n  EditButton?: React.FC\n  initialState: false | FormState | undefined\n  InlineBlockContainer?: React.FC<{ children: React.ReactNode }>\n  Label?: React.FC\n  nodeKey?: string\n  RemoveButton?: React.FC\n}\n\nconst InlineBlockComponentContext = createContext<InlineBlockComponentContextType>({\n  initialState: false,\n})\n\nexport const useInlineBlockComponentContext = () => React.use(InlineBlockComponentContext)\n\nexport const InlineBlockComponent: React.FC<Props> = (props) => {\n  const { cacheBuster, className: baseClass, formData, nodeKey } = props\n\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation<object, string>()\n  const {\n    createdInlineBlock,\n    fieldProps: { featureClientSchemaMap, initialLexicalFormState, schemaPath },\n    setCreatedInlineBlock,\n    uuid: uuidFromContext,\n  } = useEditorConfigContext()\n  const { fields: parentDocumentFields } = useDocumentForm()\n\n  const { getFormState } = useServerFunctions()\n  const editDepth = useEditDepth()\n  const firstTimeDrawer = useRef(false)\n\n  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(() => {\n    // Initial form state that was calculated server-side. May have stale values\n    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState\n    if (!cachedFormState) {\n      return false\n    }\n\n    // Merge current formData values into the cached form state\n    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits\n    return Object.fromEntries(\n      Object.entries(cachedFormState).map(([fieldName, fieldState]) => [\n        fieldName,\n        fieldName in formData\n          ? {\n              ...fieldState,\n              initialValue: formData[fieldName],\n              value: formData[fieldName],\n            }\n          : fieldState,\n      ]),\n    )\n  })\n\n  const hasMounted = useRef(false)\n  const prevCacheBuster = useRef(cacheBuster)\n  useEffect(() => {\n    if (hasMounted.current) {\n      if (prevCacheBuster.current !== cacheBuster) {\n        setInitialState(false)\n      }\n      prevCacheBuster.current = cacheBuster\n    } else {\n      hasMounted.current = true\n    }\n  }, [cacheBuster])\n\n  const [CustomLabel, setCustomLabel] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.BlockLabel,\n  )\n\n  const [CustomBlock, setCustomBlock] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.Block,\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-inlineBlocks-create-${uuidFromContext}-${formData.id}`,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\n  const inlineBlockElemElemRef = useRef<HTMLDivElement | null>(null)\n  const { id, collectionSlug, getDocPreferences, globalSlug } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${formData.blockType}`\n\n  const clientSchemaMap = featureClientSchemaMap['blocks']\n\n  const blocksField: BlocksFieldClient = clientSchemaMap?.[\n    componentMapRenderedBlockPath\n  ]?.[0] as BlocksFieldClient\n\n  const clientBlock: ClientBlock | undefined = blocksField.blockReferences\n    ? typeof blocksField?.blockReferences?.[0] === 'string'\n      ? config.blocksMap[blocksField?.blockReferences?.[0]]\n      : blocksField?.blockReferences?.[0]\n    : blocksField?.blocks?.[0]\n\n  const clientBlockFields = clientBlock?.fields ?? []\n\n  // Open drawer on \"mount\"\n  useEffect(() => {\n    if (!firstTimeDrawer.current && createdInlineBlock?.getKey() === nodeKey) {\n      // > 2 because they always have \"id\" and \"blockName\" fields\n      if (clientBlockFields.length > 2) {\n        toggleDrawer()\n      }\n      setCreatedInlineBlock?.(undefined)\n      firstTimeDrawer.current = true\n    }\n  }, [clientBlockFields.length, createdInlineBlock, nodeKey, setCreatedInlineBlock, toggleDrawer])\n\n  const removeInlineBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const blockDisplayName = clientBlock?.labels?.singular\n    ? getTranslation(clientBlock?.labels.singular, i18n)\n    : clientBlock?.slug\n\n  const onChangeAbortControllerRef = useRef(new AbortController())\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${clientBlock?.slug}.fields`\n\n  // Initial state for newly created blocks\n  useEffect(() => {\n    const abortController = new AbortController()\n\n    const awaitInitialState = async () => {\n      /*\n       * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,\n       * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side\n       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n       */\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data: formData,\n        docPermissions: { fields: true },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        globalSlug,\n        initialBlockData: formData,\n        initialBlockFormState: formData,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: true,\n        schemaPath: schemaFieldsPath,\n        signal: abortController.signal,\n      })\n\n      if (state) {\n        const newFormStateData: InlineBlockFields = reduceFieldsToValues(\n          deepCopyObjectSimpleWithoutReactComponents(state),\n          true,\n        ) as InlineBlockFields\n\n        // Things like default values may come back from the server => update the node with the new data\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isInlineBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = formData.blockType\n\n            node.setFields(newData, true)\n          }\n        })\n\n        setInitialState(state)\n        setCustomLabel(state['_components']?.customComponents?.BlockLabel)\n        setCustomBlock(state['_components']?.customComponents?.Block)\n      }\n    }\n\n    if (formData && !initialState) {\n      void awaitInitialState()\n    }\n\n    return () => {\n      abortAndIgnore(abortController)\n    }\n  }, [\n    getFormState,\n    editor,\n    nodeKey,\n    isEditable,\n    schemaFieldsPath,\n    id,\n    formData,\n    initialState,\n    collectionSlug,\n    globalSlug,\n    getDocPreferences,\n    parentDocumentFields,\n  ])\n\n  /**\n   * HANDLE ONCHANGE\n   */\n  const onChange = useCallback(\n    async ({ formState: prevFormState, submit }: { formState: FormState; submit?: boolean }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        formState: prevFormState,\n        globalSlug,\n        initialBlockFormState: prevFormState,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: submit ? true : false,\n        schemaPath: schemaFieldsPath,\n        signal: controller.signal,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      if (submit) {\n        setCustomLabel(state['_components']?.customComponents?.BlockLabel)\n        setCustomBlock(state['_components']?.customComponents?.Block)\n      }\n\n      return state\n    },\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      getDocPreferences,\n      parentDocumentFields,\n      globalSlug,\n      isEditable,\n      schemaFieldsPath,\n    ],\n  )\n  // cleanup effect\n  useEffect(() => {\n    const isStateOutOfSync = (formData: InlineBlockFields, initialState: FormState) => {\n      return Object.keys(initialState).some(\n        (key) => initialState[key] && formData[key] !== initialState[key].value,\n      )\n    }\n\n    return () => {\n      // If the component is unmounted (either via removeInlineBlock or via lexical itself) and the form state got changed before,\n      // we need to reset the initial state to force a re-fetch of the initial state when it gets mounted again (e.g. via lexical history undo).\n      // Otherwise it would use an outdated initial state.\n      if (initialState && isStateOutOfSync(formData, initialState)) {\n        setInitialState(false)\n      }\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [formData, initialState])\n\n  /**\n   * HANDLE FORM SUBMIT\n   */\n  const onFormSubmit = useCallback(\n    (formState: FormState, newData: Data) => {\n      newData.blockType = formData.blockType\n\n      editor.update(() => {\n        const node = $getNodeByKey(nodeKey)\n        if (node && $isInlineBlockNode(node)) {\n          node.setFields(newData as InlineBlockFields, true)\n        }\n      })\n    },\n    [editor, nodeKey, formData],\n  )\n\n  const RemoveButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__removeButton`}\n        disabled={!isEditable}\n        icon=\"x\"\n        onClick={(e) => {\n          e.preventDefault()\n          removeInlineBlock()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:remove', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, blockDisplayName, isEditable, removeInlineBlock, t],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={!isEditable}\n        el=\"button\"\n        icon=\"edit\"\n        onClick={() => {\n          toggleDrawer()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, blockDisplayName, isEditable, t, toggleDrawer],\n  )\n\n  const InlineBlockContainer = useMemo(\n    () =>\n      ({ children, className }: { children: React.ReactNode; className?: string }) => (\n        <div\n          className={[`${baseClass}__container`, baseClass + '-' + formData.blockType, className]\n            .filter(Boolean)\n            .join(' ')}\n          ref={inlineBlockElemElemRef}\n        >\n          {children}\n        </div>\n      ),\n    [baseClass, formData.blockType],\n  )\n\n  const Label = useMemo(() => {\n    if (CustomLabel) {\n      return () => CustomLabel\n    } else {\n      return () => (\n        <div>{clientBlock?.labels ? getTranslation(clientBlock?.labels.singular, i18n) : ''}</div>\n      )\n    }\n  }, [CustomLabel, clientBlock?.labels, i18n])\n\n  if (!clientBlock) {\n    return (\n      <InlineBlockContainer className={`${baseClass}-not-found`}>\n        <span>Error: Block '{formData.blockType}' not found</span>\n        {isEditable ? (\n          <div className={`${baseClass}__actions`}>\n            <RemoveButton />\n          </div>\n        ) : null}\n      </InlineBlockContainer>\n    )\n  }\n\n  return (\n    <Form\n      beforeSubmit={[\n        async ({ formState }) => {\n          // This is only called when form is submitted from drawer\n          return await onChange({ formState, submit: true })\n        },\n      ]}\n      disableValidationOnSubmit\n      el=\"div\"\n      fields={clientBlock?.fields}\n      initialState={initialState || {}}\n      onChange={[onChange]}\n      onSubmit={(formState, data) => {\n        onFormSubmit(formState, data)\n        toggleDrawer()\n      }}\n      uuid={uuid()}\n    >\n      <EditDepthProvider>\n        <Drawer\n          className={''}\n          slug={drawerSlug}\n          title={t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {\n            label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n          })}\n        >\n          {initialState ? (\n            <>\n              <RenderFields\n                fields={clientBlock?.fields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\" // See Blocks feature path for details as for why this is empty\n                parentSchemaPath={schemaFieldsPath}\n                permissions={true}\n                readOnly={!isEditable}\n              />\n              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>\n            </>\n          ) : null}\n        </Drawer>\n      </EditDepthProvider>\n      {CustomBlock ? (\n        <InlineBlockComponentContext\n          value={{\n            EditButton,\n            initialState,\n            InlineBlockContainer,\n            Label,\n            nodeKey,\n            RemoveButton,\n          }}\n        >\n          {CustomBlock}\n        </InlineBlockComponentContext>\n      ) : (\n        <InlineBlockContainer>\n          {initialState ? <Label /> : <ShimmerEffect height=\"15px\" width=\"40px\" />}\n          {isEditable ? (\n            <div className={`${baseClass}__actions`}>\n              <EditButton />\n              <RemoveButton />\n            </div>\n          ) : null}\n        </InlineBlockContainer>\n      )}\n    </Form>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","Drawer","EditDepthProvider","Form","formatDrawerSlug","FormSubmit","RenderFields","ShimmerEffect","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","createContext","useCallback","useEffect","useMemo","useRef","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isInlineBlockNode","InlineBlockComponentContext","initialState","useInlineBlockComponentContext","use","InlineBlockComponent","props","cacheBuster","className","baseClass","formData","nodeKey","editor","isEditable","i18n","t","createdInlineBlock","fieldProps","featureClientSchemaMap","initialLexicalFormState","schemaPath","setCreatedInlineBlock","uuidFromContext","fields","parentDocumentFields","getFormState","editDepth","firstTimeDrawer","setInitialState","useState","cachedFormState","id","formState","Object","fromEntries","entries","map","fieldName","fieldState","initialValue","value","hasMounted","prevCacheBuster","current","CustomLabel","setCustomLabel","customComponents","BlockLabel","CustomBlock","setCustomBlock","Block","drawerSlug","slug","depth","toggleDrawer","inlineBlockElemElemRef","collectionSlug","getDocPreferences","globalSlug","config","componentMapRenderedBlockPath","blockType","clientSchemaMap","blocksField","clientBlock","blockReferences","blocksMap","blocks","clientBlockFields","getKey","length","undefined","removeInlineBlock","update","remove","blockDisplayName","labels","singular","onChangeAbortControllerRef","AbortController","schemaFieldsPath","abortController","awaitInitialState","state","data","docPermissions","docPreferences","documentFormState","initialBlockData","initialBlockFormState","operation","readOnly","renderAllFields","signal","newFormStateData","node","newData","setFields","onChange","prevFormState","submit","controller","isStateOutOfSync","keys","some","key","onFormSubmit","RemoveButton","buttonStyle","disabled","icon","onClick","e","preventDefault","round","size","tooltip","label","EditButton","el","InlineBlockContainer","children","div","filter","Boolean","join","ref","Label","span","beforeSubmit","disableValidationOnSubmit","onSubmit","title","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","programmaticSubmit","height","width"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/features/blocks/client/componentInline/index.tsx"],"sourcesContent":["'use client'\n\nimport type { BlocksFieldClient, ClientBlock, Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\nimport { getTranslation } from '@payloadcms/translations'\nimport {\n  Button,\n  Drawer,\n  EditDepthProvider,\n  Form,\n  formatDrawerSlug,\n  FormSubmit,\n  RenderFields,\n  ShimmerEffect,\n  useConfig,\n  useDocumentForm,\n  useDocumentInfo,\n  useEditDepth,\n  useServerFunctions,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { $getNodeByKey } from 'lexical'\n\nimport './index.scss'\n\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { v4 as uuid } from 'uuid'\n\nimport type { InlineBlockFields } from '../../server/nodes/InlineBlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isInlineBlockNode } from '../nodes/InlineBlocksNode.js'\n\ntype Props = {\n  /**\n   * Can be modified by the node in order to trigger the re-fetch of the initial state based on the\n   * formData. This is useful when node.setFields() is explicitly called from outside of the form - in\n   * this case, the new field state is likely not reflected in the form state, so we need to re-fetch\n   */\n  readonly cacheBuster: number\n  readonly className: string\n  readonly formData: InlineBlockFields\n  readonly nodeKey: string\n}\n\ntype InlineBlockComponentContextType = {\n  EditButton?: React.FC\n  initialState: false | FormState | undefined\n  InlineBlockContainer?: React.FC<{ children: React.ReactNode }>\n  Label?: React.FC\n  nodeKey?: string\n  RemoveButton?: React.FC\n}\n\nconst InlineBlockComponentContext = createContext<InlineBlockComponentContextType>({\n  initialState: false,\n})\n\nexport const useInlineBlockComponentContext = () => React.use(InlineBlockComponentContext)\n\nexport const InlineBlockComponent: React.FC<Props> = (props) => {\n  const { cacheBuster, className: baseClass, formData, nodeKey } = props\n\n  const [editor] = useLexicalComposerContext()\n  const isEditable = useLexicalEditable()\n  const { i18n, t } = useTranslation<object, string>()\n  const {\n    createdInlineBlock,\n    fieldProps: { featureClientSchemaMap, initialLexicalFormState, schemaPath },\n    setCreatedInlineBlock,\n    uuid: uuidFromContext,\n  } = useEditorConfigContext()\n  const { fields: parentDocumentFields } = useDocumentForm()\n\n  const { getFormState } = useServerFunctions()\n  const editDepth = useEditDepth()\n  const firstTimeDrawer = useRef(false)\n\n  const [initialState, setInitialState] = React.useState<false | FormState | undefined>(() => {\n    // Initial form state that was calculated server-side. May have stale values\n    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState\n    if (!cachedFormState) {\n      return false\n    }\n\n    // Merge current formData values into the cached form state\n    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits\n    return Object.fromEntries(\n      Object.entries(cachedFormState).map(([fieldName, fieldState]) => [\n        fieldName,\n        fieldName in formData\n          ? {\n              ...fieldState,\n              initialValue: formData[fieldName],\n              value: formData[fieldName],\n            }\n          : fieldState,\n      ]),\n    )\n  })\n\n  const hasMounted = useRef(false)\n  const prevCacheBuster = useRef(cacheBuster)\n  useEffect(() => {\n    if (hasMounted.current) {\n      if (prevCacheBuster.current !== cacheBuster) {\n        setInitialState(false)\n      }\n      prevCacheBuster.current = cacheBuster\n    } else {\n      hasMounted.current = true\n    }\n  }, [cacheBuster])\n\n  const [CustomLabel, setCustomLabel] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.BlockLabel,\n  )\n\n  const [CustomBlock, setCustomBlock] = React.useState<React.ReactNode | undefined>(\n    // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n    initialState?.['_components']?.customComponents?.Block,\n  )\n\n  const drawerSlug = formatDrawerSlug({\n    slug: `lexical-inlineBlocks-create-${uuidFromContext}-${formData.id}`,\n    depth: editDepth,\n  })\n  const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\n  const inlineBlockElemElemRef = useRef<HTMLDivElement | null>(null)\n  const { id, collectionSlug, getDocPreferences, globalSlug } = useDocumentInfo()\n  const { config } = useConfig()\n\n  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${formData.blockType}`\n\n  const clientSchemaMap = featureClientSchemaMap['blocks']\n\n  const blocksField: BlocksFieldClient = clientSchemaMap?.[\n    componentMapRenderedBlockPath\n  ]?.[0] as BlocksFieldClient\n\n  const clientBlock: ClientBlock | undefined = blocksField.blockReferences\n    ? typeof blocksField?.blockReferences?.[0] === 'string'\n      ? config.blocksMap[blocksField?.blockReferences?.[0]]\n      : blocksField?.blockReferences?.[0]\n    : blocksField?.blocks?.[0]\n\n  const clientBlockFields = clientBlock?.fields ?? []\n\n  // Open drawer on \"mount\"\n  useEffect(() => {\n    if (!firstTimeDrawer.current && createdInlineBlock?.getKey() === nodeKey) {\n      // > 2 because they always have \"id\" and \"blockName\" fields\n      if (clientBlockFields.length > 2) {\n        toggleDrawer()\n      }\n      setCreatedInlineBlock?.(undefined)\n      firstTimeDrawer.current = true\n    }\n  }, [clientBlockFields.length, createdInlineBlock, nodeKey, setCreatedInlineBlock, toggleDrawer])\n\n  const removeInlineBlock = useCallback(() => {\n    editor.update(() => {\n      $getNodeByKey(nodeKey)?.remove()\n    })\n  }, [editor, nodeKey])\n\n  const blockDisplayName = clientBlock?.labels?.singular\n    ? getTranslation(clientBlock?.labels.singular, i18n)\n    : clientBlock?.slug\n\n  const onChangeAbortControllerRef = useRef(new AbortController())\n  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.${clientBlock?.slug}.fields`\n\n  // Initial state for newly created blocks\n  useEffect(() => {\n    const abortController = new AbortController()\n\n    const awaitInitialState = async () => {\n      /*\n       * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,\n       * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side\n       * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n       */\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        data: formData,\n        docPermissions: { fields: true },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        globalSlug,\n        initialBlockData: formData,\n        initialBlockFormState: formData,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: true,\n        schemaPath: schemaFieldsPath,\n        signal: abortController.signal,\n      })\n\n      if (state) {\n        const newFormStateData: InlineBlockFields = reduceFieldsToValues(\n          deepCopyObjectSimpleWithoutReactComponents(state),\n          true,\n        ) as InlineBlockFields\n\n        // Things like default values may come back from the server => update the node with the new data\n        editor.update(() => {\n          const node = $getNodeByKey(nodeKey)\n          if (node && $isInlineBlockNode(node)) {\n            const newData = newFormStateData\n            newData.blockType = formData.blockType\n\n            node.setFields(newData, true)\n          }\n        })\n\n        setInitialState(state)\n        setCustomLabel(state['_components']?.customComponents?.BlockLabel)\n        setCustomBlock(state['_components']?.customComponents?.Block)\n      }\n    }\n\n    if (formData && !initialState) {\n      void awaitInitialState()\n    }\n\n    return () => {\n      abortAndIgnore(abortController)\n    }\n  }, [\n    getFormState,\n    editor,\n    nodeKey,\n    isEditable,\n    schemaFieldsPath,\n    id,\n    formData,\n    initialState,\n    collectionSlug,\n    globalSlug,\n    getDocPreferences,\n    parentDocumentFields,\n  ])\n\n  /**\n   * HANDLE ONCHANGE\n   */\n  const onChange = useCallback(\n    async ({ formState: prevFormState, submit }: { formState: FormState; submit?: boolean }) => {\n      abortAndIgnore(onChangeAbortControllerRef.current)\n\n      const controller = new AbortController()\n      onChangeAbortControllerRef.current = controller\n\n      const { state } = await getFormState({\n        id,\n        collectionSlug,\n        docPermissions: {\n          fields: true,\n        },\n        docPreferences: await getDocPreferences(),\n        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields),\n        formState: prevFormState,\n        globalSlug,\n        initialBlockFormState: prevFormState,\n        operation: 'update',\n        readOnly: !isEditable,\n        renderAllFields: submit ? true : false,\n        schemaPath: schemaFieldsPath,\n        signal: controller.signal,\n      })\n\n      if (!state) {\n        return prevFormState\n      }\n\n      if (submit) {\n        setCustomLabel(state['_components']?.customComponents?.BlockLabel)\n        setCustomBlock(state['_components']?.customComponents?.Block)\n      }\n\n      return state\n    },\n    [\n      getFormState,\n      id,\n      collectionSlug,\n      getDocPreferences,\n      parentDocumentFields,\n      globalSlug,\n      isEditable,\n      schemaFieldsPath,\n    ],\n  )\n  // cleanup effect\n  useEffect(() => {\n    const isStateOutOfSync = (formData: InlineBlockFields, initialState: FormState) => {\n      return Object.keys(initialState).some(\n        (key) => initialState[key] && formData[key] !== initialState[key].value,\n      )\n    }\n\n    return () => {\n      // If the component is unmounted (either via removeInlineBlock or via lexical itself) and the form state got changed before,\n      // we need to reset the initial state to force a re-fetch of the initial state when it gets mounted again (e.g. via lexical history undo).\n      // Otherwise it would use an outdated initial state.\n      if (initialState && isStateOutOfSync(formData, initialState)) {\n        setInitialState(false)\n      }\n      abortAndIgnore(onChangeAbortControllerRef.current)\n    }\n  }, [formData, initialState])\n\n  /**\n   * HANDLE FORM SUBMIT\n   */\n  const onFormSubmit = useCallback(\n    (formState: FormState, newData: Data) => {\n      newData.blockType = formData.blockType\n\n      editor.update(() => {\n        const node = $getNodeByKey(nodeKey)\n        if (node && $isInlineBlockNode(node)) {\n          node.setFields(newData as InlineBlockFields, true)\n        }\n      })\n    },\n    [editor, nodeKey, formData],\n  )\n\n  const RemoveButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__removeButton`}\n        disabled={!isEditable}\n        icon=\"x\"\n        onClick={(e) => {\n          e.preventDefault()\n          removeInlineBlock()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:remove', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, blockDisplayName, isEditable, removeInlineBlock, t],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={!isEditable}\n        el=\"button\"\n        icon=\"edit\"\n        onClick={() => {\n          toggleDrawer()\n        }}\n        round\n        size=\"small\"\n        tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n      />\n    ),\n    [baseClass, blockDisplayName, isEditable, t, toggleDrawer],\n  )\n\n  const InlineBlockContainer = useMemo(\n    () =>\n      ({ children, className }: { children: React.ReactNode; className?: string }) => (\n        <div\n          className={[`${baseClass}__container`, baseClass + '-' + formData.blockType, className]\n            .filter(Boolean)\n            .join(' ')}\n          ref={inlineBlockElemElemRef}\n        >\n          {children}\n        </div>\n      ),\n    [baseClass, formData.blockType],\n  )\n\n  const Label = useMemo(() => {\n    if (CustomLabel) {\n      return () => CustomLabel\n    } else {\n      return () => (\n        <div>{clientBlock?.labels ? getTranslation(clientBlock?.labels.singular, i18n) : ''}</div>\n      )\n    }\n  }, [CustomLabel, clientBlock?.labels, i18n])\n\n  if (!clientBlock) {\n    return (\n      <InlineBlockContainer className={`${baseClass}-not-found`}>\n        <span>Error: Block '{formData.blockType}' not found</span>\n        {isEditable ? (\n          <div className={`${baseClass}__actions`}>\n            <RemoveButton />\n          </div>\n        ) : null}\n      </InlineBlockContainer>\n    )\n  }\n\n  return (\n    <Form\n      beforeSubmit={[\n        async ({ formState }) => {\n          // This is only called when form is submitted from drawer\n          return await onChange({ formState, submit: true })\n        },\n      ]}\n      disableValidationOnSubmit\n      el=\"div\"\n      fields={clientBlock?.fields}\n      initialState={initialState || {}}\n      onChange={[onChange]}\n      onSubmit={(formState, data) => {\n        onFormSubmit(formState, data)\n        toggleDrawer()\n      }}\n      uuid={uuid()}\n    >\n      <EditDepthProvider>\n        <Drawer\n          className={''}\n          slug={drawerSlug}\n          title={t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {\n            label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n          })}\n        >\n          {initialState ? (\n            <>\n              <RenderFields\n                fields={clientBlock?.fields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\" // See Blocks feature path for details as for why this is empty\n                parentSchemaPath={schemaFieldsPath}\n                permissions={true}\n                readOnly={!isEditable}\n              />\n              <FormSubmit programmaticSubmit={true}>{t('fields:saveChanges')}</FormSubmit>\n            </>\n          ) : null}\n        </Drawer>\n      </EditDepthProvider>\n      {CustomBlock ? (\n        <InlineBlockComponentContext\n          value={{\n            EditButton,\n            initialState,\n            InlineBlockContainer,\n            Label,\n            nodeKey,\n            RemoveButton,\n          }}\n        >\n          {CustomBlock}\n        </InlineBlockComponentContext>\n      ) : (\n        <InlineBlockContainer>\n          {initialState ? <Label /> : <ShimmerEffect height=\"15px\" width=\"40px\" />}\n          {isEditable ? (\n            <div className={`${baseClass}__actions`}>\n              <EditButton />\n              <RemoveButton />\n            </div>\n          ) : null}\n        </InlineBlockContainer>\n      )}\n    </Form>\n  )\n}\n"],"names":["useLexicalComposerContext","useLexicalEditable","getTranslation","Button","Drawer","EditDepthProvider","Form","formatDrawerSlug","FormSubmit","RenderFields","ShimmerEffect","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","createContext","useCallback","useEffect","useMemo","useRef","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isInlineBlockNode","InlineBlockComponentContext","initialState","useInlineBlockComponentContext","use","InlineBlockComponent","props","cacheBuster","className","baseClass","formData","nodeKey","editor","isEditable","i18n","t","createdInlineBlock","fieldProps","featureClientSchemaMap","initialLexicalFormState","schemaPath","setCreatedInlineBlock","uuidFromContext","fields","parentDocumentFields","getFormState","editDepth","firstTimeDrawer","setInitialState","useState","cachedFormState","id","formState","Object","fromEntries","entries","map","fieldName","fieldState","initialValue","value","hasMounted","prevCacheBuster","current","CustomLabel","setCustomLabel","customComponents","BlockLabel","CustomBlock","setCustomBlock","Block","drawerSlug","slug","depth","toggleDrawer","inlineBlockElemElemRef","collectionSlug","getDocPreferences","globalSlug","config","componentMapRenderedBlockPath","blockType","clientSchemaMap","blocksField","clientBlock","blockReferences","blocksMap","blocks","clientBlockFields","getKey","length","undefined","removeInlineBlock","update","remove","blockDisplayName","labels","singular","onChangeAbortControllerRef","AbortController","schemaFieldsPath","abortController","awaitInitialState","state","data","docPermissions","docPreferences","documentFormState","initialBlockData","initialBlockFormState","operation","readOnly","renderAllFields","signal","newFormStateData","node","newData","setFields","onChange","prevFormState","submit","controller","isStateOutOfSync","keys","some","key","onFormSubmit","RemoveButton","buttonStyle","disabled","icon","onClick","e","preventDefault","round","size","tooltip","label","EditButton","el","InlineBlockContainer","children","div","filter","Boolean","join","ref","Label","span","beforeSubmit","disableValidationOnSubmit","onSubmit","title","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","programmaticSubmit","height","width"],"mappings":"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"}

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

@@ -0,0 +1,90 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__inlineBlock {
+    @extend %body;
+    @include shadow-sm;
+    display: inline-block;
+    margin-right: base(0.2);
+    margin-left: base(0.2);
+    padding: base(0.1);
+    padding-inline-start: base(0.4);
+    background: var(--theme-input-bg);
+    outline: 1px solid var(--theme-elevation-100);
+    border-radius: $style-radius-s;
+    max-width: calc(var(--base) * 15);
+    font-family: var(--font-body);
+
+    &__container {
+      display: flex;
+      align-items: center;
+    }
+
+    &-not-found {
+      max-width: calc(var(--base) * 20);
+      color: var(--theme-error-500);
+    }
+
+    &::selection {
+      background: transparent;
+    }
+
+    &:hover {
+      outline: 1px solid var(--theme-elevation-150);
+    }
+
+    &__wrap {
+      flex-grow: 1;
+      overflow: hidden;
+    }
+
+    &__editButton.btn {
+      margin: 0;
+    }
+
+    &__editButton {
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: base(0.4);
+
+      & > .btn {
+        width: base(1);
+        height: base(1);
+
+        &:not(:disabled):hover {
+          background: var(--theme-elevation-100);
+        }
+
+        & > * {
+          height: 100%;
+        }
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &__removeButton.btn {
+      margin: 0;
+
+      line {
+        stroke-width: base(0.2);
+      }
+
+      &:disabled {
+        color: var(--theme-elevation-300);
+        pointer-events: none;
+      }
+    }
+  }
+}

package/dist/features/blocks/client/getBlockImageComponent.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { BlockIcon } from '../../../lexical/ui/icons/Block/index.js';
 export function getBlockImageComponent(imageURL, imageAltText) {
     if (!imageURL) {
         return BlockIcon;
     }
-    return ()=>/*#__PURE__*/ _jsx("img", {
+    return ()=>/*#__PURE__*/ _jsxDEV("img", {
             alt: imageAltText ?? 'Block Image',
             className: "lexical-block-custom-image",
             src: imageURL,
@@ -13,7 +13,11 @@ export function getBlockImageComponent(imageURL, imageAltText) {
                 maxHeight: 20,
                 maxWidth: 20
             }
-        });
+        }, void 0, false, {
+            fileName: "src/features/blocks/client/getBlockImageComponent.tsx",
+            lineNumber: 11,
+            columnNumber: 5
+        }, this);
 }
 
 //# sourceMappingURL=getBlockImageComponent.js.map

package/dist/features/blocks/client/getBlockImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/features/blocks/client/getBlockImageComponent.tsx"],"sourcesContent":["import React from 'react'\n\nimport { BlockIcon } from '../../../lexical/ui/icons/Block/index.js'\n\nexport function getBlockImageComponent(imageURL?: string, imageAltText?: string) {\n  if (!imageURL) {\n    return BlockIcon\n  }\n\n  return () => (\n    <img\n      alt={imageAltText ?? 'Block Image'}\n      className=\"lexical-block-custom-image\"\n      src={imageURL}\n      style={{ maxHeight: 20, maxWidth: 20 }}\n    />\n  )\n}\n"],"names":["React","BlockIcon","getBlockImageComponent","imageURL","imageAltText","img","alt","className","src","style","maxHeight","maxWidth"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,2CAA0C;AAEpE,OAAO,SAASC,uBAAuBC,QAAiB,EAAEC,YAAqB;IAC7E,IAAI,CAACD,UAAU;QACb,OAAOF;IACT;IAEA,OAAO,kBACL,KAACI;YACCC,KAAKF,gBAAgB;YACrBG,WAAU;YACVC,KAAKL;YACLM,OAAO;gBAAEC,WAAW;gBAAIC,UAAU;YAAG;;AAG3C"}
+{"version":3,"sources":["../../../../src/features/blocks/client/getBlockImageComponent.tsx"],"sourcesContent":["import React from 'react'\n\nimport { BlockIcon } from '../../../lexical/ui/icons/Block/index.js'\n\nexport function getBlockImageComponent(imageURL?: string, imageAltText?: string) {\n  if (!imageURL) {\n    return BlockIcon\n  }\n\n  return () => (\n    <img\n      alt={imageAltText ?? 'Block Image'}\n      className=\"lexical-block-custom-image\"\n      src={imageURL}\n      style={{ maxHeight: 20, maxWidth: 20 }}\n    />\n  )\n}\n"],"names":["React","BlockIcon","getBlockImageComponent","imageURL","imageAltText","img","alt","className","src","style","maxHeight","maxWidth"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,2CAA0C;AAEpE,OAAO,SAASC,uBAAuBC,QAAiB,EAAEC,YAAqB;IAC7E,IAAI,CAACD,UAAU;QACb,OAAOF;IACT;IAEA,OAAO,kBACL,QAACI;YACCC,KAAKF,gBAAgB;YACrBG,WAAU;YACVC,KAAKL;YACLM,OAAO;gBAAEC,WAAW;gBAAIC,UAAU;YAAG;;;;;;AAG3C"}

package/dist/features/blocks/client/markdown/markdownTransformer.js

@@ -276,6 +276,7 @@ function getMarkdownTransformerForBlock(block, isInlineBlock) {
                         const children = $parseSerializedNode(nextNodes[0])?.getChildren();
                         if (children?.length) {
                             for (const child of children){
+                                ;
                                 lastChild.append(child);
                             }
                         }