@payloadcms/richtext-lexical 3.70.0 → 3.71.0-internal-debug.80dab4c

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","_jsx","buttonStyle","disabled","icon","onClick","e","preventDefault","round","size","tooltip","label","EditButton","el","InlineBlockContainer","children","filter","Boolean","join","ref","Label","_jsxs","beforeSubmit","disableValidationOnSubmit","onSubmit","title","_Fragment","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","programmaticSubmit","height","width"],"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"],"mappings":"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","ignoreList":[]}
+{"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,100 @@
+@import '~@payloadcms/ui/scss';
+
+@layer payload-default {
+  .LexicalEditorTheme__inlineBlock {
+    display: inline-block;
+
+    &.decorator-selected {
+      box-shadow: unset !important;
+      outline: unset !important;
+
+      .LexicalEditorTheme__inlineBlock__container {
+        box-shadow: $focus-box-shadow;
+        outline: none;
+      }
+    }
+
+    &__container {
+      @extend %body;
+      @include shadow-sm;
+      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);
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        outline: 1px solid var(--theme-elevation-150);
+      }
+    }
+
+    &-not-found {
+      max-width: calc(var(--base) * 20);
+      color: var(--theme-error-500);
+    }
+
+    &::selection {
+      background: transparent;
+    }
+
+    &__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,18 +1,23 @@
-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", {
-    alt: imageAltText ?? 'Block Image',
-    className: "lexical-block-custom-image",
-    src: imageURL,
-    style: {
-      maxHeight: 20,
-      maxWidth: 20
+    if (!imageURL) {
+        return BlockIcon;
     }
-  });
+    return ()=>/*#__PURE__*/ _jsxDEV("img", {
+            alt: imageAltText ?? 'Block Image',
+            className: "lexical-block-custom-image",
+            src: imageURL,
+            style: {
+                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,"file":"getBlockImageComponent.js","names":["React","BlockIcon","getBlockImageComponent","imageURL","imageAltText","_jsx","alt","className","src","style","maxHeight","maxWidth"],"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"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAE1B,OAAO,SAASC,uBAAuBC,QAAiB,EAAEC,YAAqB;EAC7E,IAAI,CAACD,QAAA,EAAU;IACb,OAAOF,SAAA;EACT;EAEA,OAAO,mBACLI,IAAA,CAAC;IACCC,GAAA,EAAKF,YAAA,IAAgB;IACrBG,SAAA,EAAU;IACVC,GAAA,EAAKL,QAAA;IACLM,KAAA,EAAO;MAAEC,SAAA,EAAW;MAAIC,QAAA,EAAU;IAAG;;AAG3C","ignoreList":[]}
+{"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/index.js

@@ -1,5 +1,4 @@
 'use client';
-
 import { getTranslation } from '@payloadcms/translations';
 import { BlockIcon } from '../../../lexical/ui/icons/Block/index.js';
 import { InlineBlocksIcon } from '../../../lexical/ui/icons/InlineBlocks/index.js';
@@ -10,153 +9,149 @@ import { BlockNode } from './nodes/BlocksNode.js';
 import { InlineBlockNode } from './nodes/InlineBlocksNode.js';
 import { INSERT_BLOCK_COMMAND, INSERT_INLINE_BLOCK_COMMAND } from './plugin/commands.js';
 import { BlocksPlugin } from './plugin/index.js';
-export const BlocksFeatureClient = createClientFeature(({
-  config,
-  featureClientSchemaMap,
-  props,
-  schemaPath
-}) => {
-  const schemaMapRenderedBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks`;
-  const schemaMapRenderedInlineBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks`;
-  const clientSchema = featureClientSchemaMap['blocks'];
-  if (!clientSchema) {
-    return {};
-  }
-  const blocksFields = Object.entries(clientSchema).filter(([key]) => key.startsWith(schemaMapRenderedBlockPathPrefix + '.') && !key.replace(schemaMapRenderedBlockPathPrefix + '.', '').includes('.')).map(([, value]) => value[0]);
-  const inlineBlocksFields = Object.entries(clientSchema).filter(([key]) => key.startsWith(schemaMapRenderedInlineBlockPathPrefix + '.') && !key.replace(schemaMapRenderedInlineBlockPathPrefix + '.', '').includes('.')).map(([, value]) => value[0]);
-  const clientBlocks = blocksFields.map(field => {
-    return field.blockReferences ? typeof field.blockReferences[0] === 'string' ? config.blocksMap[field.blockReferences[0]] : field.blockReferences[0] : field.blocks[0];
-  }).filter(block => block !== undefined);
-  const clientInlineBlocks = inlineBlocksFields.map(field => {
-    return field.blockReferences ? typeof field.blockReferences[0] === 'string' ? config.blocksMap[field.blockReferences[0]] : field.blockReferences[0] : field.blocks[0];
-  }).filter(block => block !== undefined);
-  return {
-    markdownTransformers: getBlockMarkdownTransformers({
-      blocks: clientBlocks,
-      inlineBlocks: clientInlineBlocks
-    }),
-    nodes: [BlockNode, InlineBlockNode],
-    plugins: [{
-      Component: BlocksPlugin,
-      position: 'normal'
-    }],
-    sanitizedClientFeatureProps: props,
-    slashMenu: {
-      groups: [clientBlocks?.length ? {
-        items: clientBlocks.map(block => {
-          return {
-            Icon: getBlockImageComponent(block.imageURL, block.imageAltText),
-            key: 'block-' + block.slug,
-            keywords: ['block', 'blocks', block.slug],
-            label: ({
-              i18n
-            }) => {
-              const blockDisplayName = block?.labels?.singular ? getTranslation(block.labels.singular, i18n) : block?.slug;
-              return blockDisplayName;
-            },
-            onSelect: ({
-              editor
-            }) => {
-              editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
-                blockName: '',
-                blockType: block.slug
-              });
-            }
-          };
+export const BlocksFeatureClient = createClientFeature(({ config, featureClientSchemaMap, props, schemaPath })=>{
+    const schemaMapRenderedBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks`;
+    const schemaMapRenderedInlineBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks`;
+    const clientSchema = featureClientSchemaMap['blocks'];
+    if (!clientSchema) {
+        return {};
+    }
+    const blocksFields = Object.entries(clientSchema).filter(([key])=>key.startsWith(schemaMapRenderedBlockPathPrefix + '.') && !key.replace(schemaMapRenderedBlockPathPrefix + '.', '').includes('.')).map(([, value])=>value[0]);
+    const inlineBlocksFields = Object.entries(clientSchema).filter(([key])=>key.startsWith(schemaMapRenderedInlineBlockPathPrefix + '.') && !key.replace(schemaMapRenderedInlineBlockPathPrefix + '.', '').includes('.')).map(([, value])=>value[0]);
+    const clientBlocks = blocksFields.map((field)=>{
+        return field.blockReferences ? typeof field.blockReferences[0] === 'string' ? config.blocksMap[field.blockReferences[0]] : field.blockReferences[0] : field.blocks[0];
+    }).filter((block)=>block !== undefined);
+    const clientInlineBlocks = inlineBlocksFields.map((field)=>{
+        return field.blockReferences ? typeof field.blockReferences[0] === 'string' ? config.blocksMap[field.blockReferences[0]] : field.blockReferences[0] : field.blocks[0];
+    }).filter((block)=>block !== undefined);
+    return {
+        markdownTransformers: getBlockMarkdownTransformers({
+            blocks: clientBlocks,
+            inlineBlocks: clientInlineBlocks
         }),
-        key: 'blocks',
-        label: ({
-          i18n
-        }) => {
-          return i18n.t('lexical:blocks:label');
-        }
-      } : null, clientInlineBlocks?.length ? {
-        items: clientInlineBlocks.map(inlineBlock => {
-          return {
-            Icon: InlineBlocksIcon,
-            key: 'inlineBlocks-' + inlineBlock.slug,
-            keywords: ['inlineBlock', 'inline block', inlineBlock.slug],
-            label: ({
-              i18n
-            }) => {
-              const blockDisplayName = inlineBlock?.labels?.singular ? getTranslation(inlineBlock.labels.singular, i18n) : inlineBlock?.slug;
-              return blockDisplayName;
-            },
-            onSelect: ({
-              editor
-            }) => {
-              editor.dispatchCommand(INSERT_INLINE_BLOCK_COMMAND, {
-                blockName: '',
-                blockType: inlineBlock.slug
-              });
+        nodes: [
+            BlockNode,
+            InlineBlockNode
+        ],
+        plugins: [
+            {
+                Component: BlocksPlugin,
+                position: 'normal'
             }
-          };
-        }),
-        key: 'inlineBlocks',
-        label: ({
-          i18n
-        }) => {
-          return i18n.t('lexical:blocks:inlineBlocks:label');
+        ],
+        sanitizedClientFeatureProps: props,
+        slashMenu: {
+            groups: [
+                clientBlocks?.length ? {
+                    items: clientBlocks.map((block)=>{
+                        return {
+                            Icon: getBlockImageComponent(block.imageURL, block.imageAltText),
+                            key: 'block-' + block.slug,
+                            keywords: [
+                                'block',
+                                'blocks',
+                                block.slug
+                            ],
+                            label: ({ i18n })=>{
+                                const blockDisplayName = block?.labels?.singular ? getTranslation(block.labels.singular, i18n) : block?.slug;
+                                return blockDisplayName;
+                            },
+                            onSelect: ({ editor })=>{
+                                editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
+                                    blockName: '',
+                                    blockType: block.slug
+                                });
+                            }
+                        };
+                    }),
+                    key: 'blocks',
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:blocks:label');
+                    }
+                } : null,
+                clientInlineBlocks?.length ? {
+                    items: clientInlineBlocks.map((inlineBlock)=>{
+                        return {
+                            Icon: InlineBlocksIcon,
+                            key: 'inlineBlocks-' + inlineBlock.slug,
+                            keywords: [
+                                'inlineBlock',
+                                'inline block',
+                                inlineBlock.slug
+                            ],
+                            label: ({ i18n })=>{
+                                const blockDisplayName = inlineBlock?.labels?.singular ? getTranslation(inlineBlock.labels.singular, i18n) : inlineBlock?.slug;
+                                return blockDisplayName;
+                            },
+                            onSelect: ({ editor })=>{
+                                editor.dispatchCommand(INSERT_INLINE_BLOCK_COMMAND, {
+                                    blockName: '',
+                                    blockType: inlineBlock.slug
+                                });
+                            }
+                        };
+                    }),
+                    key: 'inlineBlocks',
+                    label: ({ i18n })=>{
+                        return i18n.t('lexical:blocks:inlineBlocks:label');
+                    }
+                } : null
+            ].filter(Boolean)
+        },
+        toolbarFixed: {
+            groups: [
+                clientBlocks.length ? {
+                    type: 'dropdown',
+                    ChildComponent: BlockIcon,
+                    items: clientBlocks.map((block, index)=>{
+                        return {
+                            ChildComponent: getBlockImageComponent(block.imageURL, block.imageAltText),
+                            isActive: undefined,
+                            // At this point, we would be inside a sub-richtext-editor. And at this point this will be run against the focused sub-editor, not the parent editor which has the actual block. Thus, no point in running this
+                            key: 'block-' + block.slug,
+                            label: ({ i18n })=>{
+                                const blockDisplayName = block?.labels?.singular ? getTranslation(block.labels.singular, i18n) : block?.slug;
+                                return blockDisplayName;
+                            },
+                            onSelect: ({ editor })=>{
+                                editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
+                                    blockName: '',
+                                    blockType: block.slug
+                                });
+                            },
+                            order: index
+                        };
+                    }),
+                    key: 'blocks',
+                    order: 20
+                } : null,
+                clientInlineBlocks?.length ? {
+                    type: 'dropdown',
+                    ChildComponent: InlineBlocksIcon,
+                    items: clientInlineBlocks.map((inlineBlock, index)=>{
+                        return {
+                            ChildComponent: inlineBlock.imageURL ? getBlockImageComponent(inlineBlock.imageURL, inlineBlock.imageAltText) : InlineBlocksIcon,
+                            isActive: undefined,
+                            key: 'inlineBlock-' + inlineBlock.slug,
+                            label: ({ i18n })=>{
+                                const blockDisplayName = inlineBlock?.labels?.singular ? getTranslation(inlineBlock.labels.singular, i18n) : inlineBlock?.slug;
+                                return blockDisplayName;
+                            },
+                            onSelect: ({ editor })=>{
+                                editor.dispatchCommand(INSERT_INLINE_BLOCK_COMMAND, {
+                                    blockName: '',
+                                    blockType: inlineBlock.slug
+                                });
+                            },
+                            order: index
+                        };
+                    }),
+                    key: 'inlineBlocks',
+                    order: 25
+                } : null
+            ].filter(Boolean)
         }
-      } : null].filter(Boolean)
-    },
-    toolbarFixed: {
-      groups: [clientBlocks.length ? {
-        type: 'dropdown',
-        ChildComponent: BlockIcon,
-        items: clientBlocks.map((block, index) => {
-          return {
-            ChildComponent: getBlockImageComponent(block.imageURL, block.imageAltText),
-            isActive: undefined,
-            key: 'block-' + block.slug,
-            label: ({
-              i18n
-            }) => {
-              const blockDisplayName = block?.labels?.singular ? getTranslation(block.labels.singular, i18n) : block?.slug;
-              return blockDisplayName;
-            },
-            onSelect: ({
-              editor
-            }) => {
-              editor.dispatchCommand(INSERT_BLOCK_COMMAND, {
-                blockName: '',
-                blockType: block.slug
-              });
-            },
-            order: index
-          };
-        }),
-        key: 'blocks',
-        order: 20
-      } : null, clientInlineBlocks?.length ? {
-        type: 'dropdown',
-        ChildComponent: InlineBlocksIcon,
-        items: clientInlineBlocks.map((inlineBlock, index) => {
-          return {
-            ChildComponent: inlineBlock.imageURL ? getBlockImageComponent(inlineBlock.imageURL, inlineBlock.imageAltText) : InlineBlocksIcon,
-            isActive: undefined,
-            key: 'inlineBlock-' + inlineBlock.slug,
-            label: ({
-              i18n
-            }) => {
-              const blockDisplayName = inlineBlock?.labels?.singular ? getTranslation(inlineBlock.labels.singular, i18n) : inlineBlock?.slug;
-              return blockDisplayName;
-            },
-            onSelect: ({
-              editor
-            }) => {
-              editor.dispatchCommand(INSERT_INLINE_BLOCK_COMMAND, {
-                blockName: '',
-                blockType: inlineBlock.slug
-              });
-            },
-            order: index
-          };
-        }),
-        key: 'inlineBlocks',
-        order: 25
-      } : null].filter(Boolean)
-    }
-  };
+    };
 });
+
 //# sourceMappingURL=index.js.map