@payloadcms/richtext-lexical 3.59.0-internal.898dbd3 → 3.59.0-internal.917c03d

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","createContext","useCallback","useEffect","useMemo","useRef","baseClass","useLexicalComposerContext","getTranslation","Button","Drawer","EditDepthProvider","Form","formatDrawerSlug","FormSubmit","RenderFields","ShimmerEffect","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isInlineBlockNode","InlineBlockComponentContext","initialState","useInlineBlockComponentContext","use","InlineBlockComponent","props","cacheBuster","formData","nodeKey","editor","i18n","t","createdInlineBlock","fieldProps","featureClientSchemaMap","initialLexicalFormState","readOnly","schemaPath","setCreatedInlineBlock","uuidFromContext","fields","parentDocumentFields","getFormState","editDepth","firstTimeDrawer","setInitialState","useState","id","formState","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","renderAllFields","signal","newFormStateData","node","newData","setFields","onChange","prevFormState","submit","controller","isStateOutOfSync","Object","keys","some","key","value","onFormSubmit","RemoveButton","_jsx","buttonStyle","className","disabled","icon","onClick","e","preventDefault","round","size","tooltip","label","EditButton","el","InlineBlockContainer","children","filter","Boolean","join","ref","Label","_jsxs","isEditable","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 React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react'\nconst baseClass = 'inline-block'\n\nimport type { BlocksFieldClient, ClientBlock, Data, FormState } from 'payload'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\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 { 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 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, formData, nodeKey } = props\n\n  const [editor] = useLexicalComposerContext()\n  const { i18n, t } = useTranslation<object, string>()\n  const {\n    createdInlineBlock,\n    fieldProps: { featureClientSchemaMap, initialLexicalFormState, readOnly, 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    () => initialLexicalFormState?.[formData.id]?.formState,\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        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    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        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      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={readOnly}\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    [blockDisplayName, readOnly, removeInlineBlock, t],\n  )\n\n  const EditButton = useMemo(\n    () => () => (\n      <Button\n        buttonStyle=\"icon-label\"\n        className={`${baseClass}__editButton`}\n        disabled={readOnly}\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    [blockDisplayName, readOnly, t, toggleDrawer],\n  )\n\n  const InlineBlockContainer = useMemo(\n    () =>\n      ({ children, className }: { children: React.ReactNode; className?: string }) => (\n        <div\n          className={[baseClass, baseClass + '-' + formData.blockType, className]\n            .filter(Boolean)\n            .join(' ')}\n          ref={inlineBlockElemElemRef}\n        >\n          {children}\n        </div>\n      ),\n    [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        {editor.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={false}\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          {editor.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,"file":"index.js","names":["React","createContext","useCallback","useEffect","useMemo","useRef","baseClass","useLexicalComposerContext","useLexicalEditable","getTranslation","Button","Drawer","EditDepthProvider","Form","formatDrawerSlug","FormSubmit","RenderFields","ShimmerEffect","useConfig","useDocumentForm","useDocumentInfo","useEditDepth","useServerFunctions","useTranslation","abortAndIgnore","$getNodeByKey","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isInlineBlockNode","InlineBlockComponentContext","initialState","useInlineBlockComponentContext","use","InlineBlockComponent","props","cacheBuster","formData","nodeKey","editor","isEditable","i18n","t","createdInlineBlock","fieldProps","featureClientSchemaMap","initialLexicalFormState","schemaPath","setCreatedInlineBlock","uuidFromContext","fields","parentDocumentFields","getFormState","editDepth","firstTimeDrawer","setInitialState","useState","id","formState","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","Object","keys","some","key","value","onFormSubmit","RemoveButton","_jsx","buttonStyle","className","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 React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react'\nconst baseClass = 'inline-block'\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'\n\nimport './index.scss'\n\nimport { $getNodeByKey } from 'lexical'\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\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 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, 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    () => initialLexicalFormState?.[formData.id]?.formState,\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    [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    [blockDisplayName, isEditable, t, toggleDrawer],\n  )\n\n  const InlineBlockContainer = useMemo(\n    () =>\n      ({ children, className }: { children: React.ReactNode; className?: string }) => (\n        <div\n          className={[baseClass, baseClass + '-' + formData.blockType, className]\n            .filter(Boolean)\n            .join(' ')}\n          ref={inlineBlockElemElemRef}\n        >\n          {children}\n        </div>\n      ),\n    [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":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,aAAa,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ;AAC9E,MAAMC,SAAA,GAAY;AAIlB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SACEC,MAAM,EACNC,MAAM,EACNC,iBAAiB,EACjBC,IAAI,EACJC,gBAAgB,EAChBC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,YAAY,EACZC,kBAAkB,EAClBC,cAAc,QACT;AACP,SAASC,cAAc,QAAQ;AAI/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,0CAA0C,EAAEC,oBAAoB,QAAQ;AACjF,SAASC,EAAA,IAAMC,IAAI,QAAQ;AAI3B,SAASC,sBAAsB,QAAQ;AACvC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAsBnC,MAAMC,2BAAA,gBAA8BhC,aAAA,CAA+C;EACjFiC,YAAA,EAAc;AAChB;AAEA,OAAO,MAAMC,8BAAA,GAAiCA,CAAA,KAAMnC,KAAA,CAAMoC,GAAG,CAACH,2BAAA;AAE9D,OAAO,MAAMI,oBAAA,GAAyCC,KAAA;EACpD,MAAM;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAO,CAAE,GAAGH,KAAA;EAE3C,MAAM,CAACI,MAAA,CAAO,GAAGnC,yBAAA;EACjB,MAAMoC,UAAA,GAAanC,kBAAA;EACnB,MAAM;IAAEoC,IAAI;IAAEC;EAAC,CAAE,GAAGtB,cAAA;EACpB,MAAM;IACJuB,kBAAkB;IAClBC,UAAA,EAAY;MAAEC,sBAAsB;MAAEC,uBAAuB;MAAEC;IAAU,CAAE;IAC3EC,qBAAqB;IACrBtB,IAAA,EAAMuB;EAAe,CACtB,GAAGtB,sBAAA;EACJ,MAAM;IAAEuB,MAAA,EAAQC;EAAoB,CAAE,GAAGnC,eAAA;EAEzC,MAAM;IAAEoC;EAAY,CAAE,GAAGjC,kBAAA;EACzB,MAAMkC,SAAA,GAAYnC,YAAA;EAClB,MAAMoC,eAAA,GAAkBpD,MAAA,CAAO;EAE/B,MAAM,CAAC6B,YAAA,EAAcwB,eAAA,CAAgB,GAAG1D,KAAA,CAAM2D,QAAQ,CACpD,MAAMV,uBAAA,GAA0BT,QAAA,CAASoB,EAAE,CAAC,EAAEC,SAAA;EAGhD,MAAMC,UAAA,GAAazD,MAAA,CAAO;EAC1B,MAAM0D,eAAA,GAAkB1D,MAAA,CAAOkC,WAAA;EAC/BpC,SAAA,CAAU;IACR,IAAI2D,UAAA,CAAWE,OAAO,EAAE;MACtB,IAAID,eAAA,CAAgBC,OAAO,KAAKzB,WAAA,EAAa;QAC3CmB,eAAA,CAAgB;MAClB;MACAK,eAAA,CAAgBC,OAAO,GAAGzB,WAAA;IAC5B,OAAO;MACLuB,UAAA,CAAWE,OAAO,GAAG;IACvB;EACF,GAAG,CAACzB,WAAA,CAAY;EAEhB,MAAM,CAAC0B,WAAA,EAAaC,cAAA,CAAe,GAAGlE,KAAA,CAAM2D,QAAQ;EAClD;EACAzB,YAAA,GAAe,cAAc,EAAEiC,gBAAA,EAAkBC,UAAA;EAGnD,MAAM,CAACC,WAAA,EAAaC,cAAA,CAAe,GAAGtE,KAAA,CAAM2D,QAAQ;EAClD;EACAzB,YAAA,GAAe,cAAc,EAAEiC,gBAAA,EAAkBI,KAAA;EAGnD,MAAMC,UAAA,GAAa1D,gBAAA,CAAiB;IAClC2D,IAAA,EAAM,+BAA+BrB,eAAA,IAAmBZ,QAAA,CAASoB,EAAE,EAAE;IACrEc,KAAA,EAAOlB;EACT;EACA,MAAM;IAAEmB;EAAY,CAAE,GAAG5C,gBAAA,CAAiByC,UAAA,EAAY;EAEtD,MAAMI,sBAAA,GAAyBvE,MAAA,CAA8B;EAC7D,MAAM;IAAEuD,EAAE;IAAEiB,cAAc;IAAEC,iBAAiB;IAAEC;EAAU,CAAE,GAAG3D,eAAA;EAC9D,MAAM;IAAE4D;EAAM,CAAE,GAAG9D,SAAA;EAEnB,MAAM+D,6BAAA,GAAgC,GAAG/B,UAAA,0DAAoEV,QAAA,CAAS0C,SAAS,EAAE;EAEjI,MAAMC,eAAA,GAAkBnC,sBAAsB,CAAC,SAAS;EAExD,MAAMoC,WAAA,GAAiCD,eAAA,GACrCF,6BAAA,CACD,GAAG,EAAE;EAEN,MAAMI,WAAA,GAAuCD,WAAA,CAAYE,eAAe,GACpE,OAAOF,WAAA,EAAaE,eAAA,GAAkB,EAAE,KAAK,WAC3CN,MAAA,CAAOO,SAAS,CAACH,WAAA,EAAaE,eAAA,GAAkB,EAAE,CAAC,GACnDF,WAAA,EAAaE,eAAA,GAAkB,EAAE,GACnCF,WAAA,EAAaI,MAAA,GAAS,EAAE;EAE5B,MAAMC,iBAAA,GAAoBJ,WAAA,EAAahC,MAAA,IAAU,EAAE;EAEnD;EACAlD,SAAA,CAAU;IACR,IAAI,CAACsD,eAAA,CAAgBO,OAAO,IAAIlB,kBAAA,EAAoB4C,MAAA,OAAajD,OAAA,EAAS;MACxE;MACA,IAAIgD,iBAAA,CAAkBE,MAAM,GAAG,GAAG;QAChChB,YAAA;MACF;MACAxB,qBAAA,GAAwByC,SAAA;MACxBnC,eAAA,CAAgBO,OAAO,GAAG;IAC5B;EACF,GAAG,CAACyB,iBAAA,CAAkBE,MAAM,EAAE7C,kBAAA,EAAoBL,OAAA,EAASU,qBAAA,EAAuBwB,YAAA,CAAa;EAE/F,MAAMkB,iBAAA,GAAoB3F,WAAA,CAAY;IACpCwC,MAAA,CAAOoD,MAAM,CAAC;MACZrE,aAAA,CAAcgB,OAAA,GAAUsD,MAAA;IAC1B;EACF,GAAG,CAACrD,MAAA,EAAQD,OAAA,CAAQ;EAEpB,MAAMuD,gBAAA,GAAmBX,WAAA,EAAaY,MAAA,EAAQC,QAAA,GAC1CzF,cAAA,CAAe4E,WAAA,EAAaY,MAAA,CAAOC,QAAA,EAAUtD,IAAA,IAC7CyC,WAAA,EAAaZ,IAAA;EAEjB,MAAM0B,0BAAA,GAA6B9F,MAAA,CAAO,IAAI+F,eAAA;EAC9C,MAAMC,gBAAA,GAAmB,GAAGnD,UAAA,0DAAoEmC,WAAA,EAAaZ,IAAA,SAAa;EAE1H;EACAtE,SAAA,CAAU;IACR,MAAMmG,eAAA,GAAkB,IAAIF,eAAA;IAE5B,MAAMG,iBAAA,GAAoB,MAAAA,CAAA;MACxB;;;;;MAKA,MAAM;QAAEC;MAAK,CAAE,GAAG,MAAMjD,YAAA,CAAa;QACnCK,EAAA;QACAiB,cAAA;QACA4B,IAAA,EAAMjE,QAAA;QACNkE,cAAA,EAAgB;UAAErD,MAAA,EAAQ;QAAK;QAC/BsD,cAAA,EAAgB,MAAM7B,iBAAA;QACtB8B,iBAAA,EAAmBlF,0CAAA,CAA2C4B,oBAAA;QAC9DyB,UAAA;QACA8B,gBAAA,EAAkBrE,QAAA;QAClBsE,qBAAA,EAAuBtE,QAAA;QACvBuE,SAAA,EAAW;QACXC,QAAA,EAAU,CAACrE,UAAA;QACXsE,eAAA,EAAiB;QACjB/D,UAAA,EAAYmD,gBAAA;QACZa,MAAA,EAAQZ,eAAA,CAAgBY;MAC1B;MAEA,IAAIV,KAAA,EAAO;QACT,MAAMW,gBAAA,GAAsCxF,oBAAA,CAC1CD,0CAAA,CAA2C8E,KAAA,GAC3C;QAGF;QACA9D,MAAA,CAAOoD,MAAM,CAAC;UACZ,MAAMsB,IAAA,GAAO3F,aAAA,CAAcgB,OAAA;UAC3B,IAAI2E,IAAA,IAAQpF,kBAAA,CAAmBoF,IAAA,GAAO;YACpC,MAAMC,OAAA,GAAUF,gBAAA;YAChBE,OAAA,CAAQnC,SAAS,GAAG1C,QAAA,CAAS0C,SAAS;YAEtCkC,IAAA,CAAKE,SAAS,CAACD,OAAA,EAAS;UAC1B;QACF;QAEA3D,eAAA,CAAgB8C,KAAA;QAChBtC,cAAA,CAAesC,KAAK,CAAC,cAAc,EAAErC,gBAAA,EAAkBC,UAAA;QACvDE,cAAA,CAAekC,KAAK,CAAC,cAAc,EAAErC,gBAAA,EAAkBI,KAAA;MACzD;IACF;IAEA,IAAI/B,QAAA,IAAY,CAACN,YAAA,EAAc;MAC7B,KAAKqE,iBAAA;IACP;IAEA,OAAO;MACL/E,cAAA,CAAe8E,eAAA;IACjB;EACF,GAAG,CACD/C,YAAA,EACAb,MAAA,EACAD,OAAA,EACAE,UAAA,EACA0D,gBAAA,EACAzC,EAAA,EACApB,QAAA,EACAN,YAAA,EACA2C,cAAA,EACAE,UAAA,EACAD,iBAAA,EACAxB,oBAAA,CACD;EAED;;;EAGA,MAAMiE,QAAA,GAAWrH,WAAA,CACf,OAAO;IAAE2D,SAAA,EAAW2D,aAAa;IAAEC;EAAM,CAA8C;IACrFjG,cAAA,CAAe2E,0BAAA,CAA2BnC,OAAO;IAEjD,MAAM0D,UAAA,GAAa,IAAItB,eAAA;IACvBD,0BAAA,CAA2BnC,OAAO,GAAG0D,UAAA;IAErC,MAAM;MAAElB,KAAK,EAALA;IAAK,CAAE,GAAG,MAAMjD,YAAA,CAAa;MACnCK,EAAA;MACAiB,cAAA;MACA6B,cAAA,EAAgB;QACdrD,MAAA,EAAQ;MACV;MACAsD,cAAA,EAAgB,MAAM7B,iBAAA;MACtB8B,iBAAA,EAAmBlF,0CAAA,CAA2C4B,oBAAA;MAC9DO,SAAA,EAAW2D,aAAA;MACXzC,UAAA;MACA+B,qBAAA,EAAuBU,aAAA;MACvBT,SAAA,EAAW;MACXC,QAAA,EAAU,CAACrE,UAAA;MACXsE,eAAA,EAAiBQ,MAAA,GAAS,OAAO;MACjCvE,UAAA,EAAYmD,gBAAA;MACZa,MAAA,EAAQQ,UAAA,CAAWR;IACrB;IAEA,IAAI,CAACV,OAAA,EAAO;MACV,OAAOgB,aAAA;IACT;IAEA,IAAIC,MAAA,EAAQ;MACVvD,cAAA,CAAesC,OAAK,CAAC,cAAc,EAAErC,gBAAA,EAAkBC,UAAA;MACvDE,cAAA,CAAekC,OAAK,CAAC,cAAc,EAAErC,gBAAA,EAAkBI,KAAA;IACzD;IAEA,OAAOiC,OAAA;EACT,GACA,CACEjD,YAAA,EACAK,EAAA,EACAiB,cAAA,EACAC,iBAAA,EACAxB,oBAAA,EACAyB,UAAA,EACApC,UAAA,EACA0D,gBAAA,CACD;EAEH;EACAlG,SAAA,CAAU;IACR,MAAMwH,gBAAA,GAAmBA,CAACnF,UAAA,EAA6BN,cAAA;MACrD,OAAO0F,MAAA,CAAOC,IAAI,CAAC3F,cAAA,EAAc4F,IAAI,CAClCC,GAAA,IAAQ7F,cAAY,CAAC6F,GAAA,CAAI,IAAIvF,UAAQ,CAACuF,GAAA,CAAI,KAAK7F,cAAY,CAAC6F,GAAA,CAAI,CAACC,KAAK;IAE3E;IAEA,OAAO;MACL;MACA;MACA;MACA,IAAI9F,YAAA,IAAgByF,gBAAA,CAAiBnF,QAAA,EAAUN,YAAA,GAAe;QAC5DwB,eAAA,CAAgB;MAClB;MACAlC,cAAA,CAAe2E,0BAAA,CAA2BnC,OAAO;IACnD;EACF,GAAG,CAACxB,QAAA,EAAUN,YAAA,CAAa;EAE3B;;;EAGA,MAAM+F,YAAA,GAAe/H,WAAA,CACnB,CAAC2D,SAAA,EAAsBwD,SAAA;IACrBA,SAAA,CAAQnC,SAAS,GAAG1C,QAAA,CAAS0C,SAAS;IAEtCxC,MAAA,CAAOoD,MAAM,CAAC;MACZ,MAAMsB,MAAA,GAAO3F,aAAA,CAAcgB,OAAA;MAC3B,IAAI2E,MAAA,IAAQpF,kBAAA,CAAmBoF,MAAA,GAAO;QACpCA,MAAA,CAAKE,SAAS,CAACD,SAAA,EAA8B;MAC/C;IACF;EACF,GACA,CAAC3E,MAAA,EAAQD,OAAA,EAASD,QAAA,CAAS;EAG7B,MAAM0F,YAAA,GAAe9H,OAAA,CACnB,MAAM,mBACJ+H,IAAA,CAACzH,MAAA;IACC0H,WAAA,EAAY;IACZC,SAAA,EAAW,GAAG/H,SAAA,gBAAyB;IACvCgI,QAAA,EAAU,CAAC3F,UAAA;IACX4F,IAAA,EAAK;IACLC,OAAA,EAAUC,CAAA;MACRA,CAAA,CAAEC,cAAc;MAChB7C,iBAAA;IACF;IACA8C,KAAK;IACLC,IAAA,EAAK;IACLC,OAAA,EAAShG,CAAA,CAAE,sCAAsC;MAAEiG,KAAA,EAAO9C;IAAiB;MAG/E,CAACA,gBAAA,EAAkBrD,UAAA,EAAYkD,iBAAA,EAAmBhD,CAAA,CAAE;EAGtD,MAAMkG,UAAA,GAAa3I,OAAA,CACjB,MAAM,mBACJ+H,IAAA,CAACzH,MAAA;IACC0H,WAAA,EAAY;IACZC,SAAA,EAAW,GAAG/H,SAAA,cAAuB;IACrCgI,QAAA,EAAU,CAAC3F,UAAA;IACXqG,EAAA,EAAG;IACHT,IAAA,EAAK;IACLC,OAAA,EAASA,CAAA;MACP7D,YAAA;IACF;IACAgE,KAAK;IACLC,IAAA,EAAK;IACLC,OAAA,EAAShG,CAAA,CAAE,oCAAoC;MAAEiG,KAAA,EAAO9C;IAAiB;MAG7E,CAACA,gBAAA,EAAkBrD,UAAA,EAAYE,CAAA,EAAG8B,YAAA,CAAa;EAGjD,MAAMsE,oBAAA,GAAuB7I,OAAA,CAC3B,MACE,CAAC;IAAE8I,QAAQ;IAAEb;EAAS,CAAqD,kBACzEF,IAAA,CAAC;IACCE,SAAA,EAAW,CAAC/H,SAAA,EAAWA,SAAA,GAAY,MAAMkC,QAAA,CAAS0C,SAAS,EAAEmD,SAAA,CAAU,CACpEc,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,GAAA,EAAK1E,sBAAA;cAEJsE;MAGP,CAAC1G,QAAA,CAAS0C,SAAS,CAAC;EAGtB,MAAMqE,KAAA,GAAQnJ,OAAA,CAAQ;IACpB,IAAI6D,WAAA,EAAa;MACf,OAAO,MAAMA,WAAA;IACf,OAAO;MACL,OAAO,mBACLkE,IAAA,CAAC;kBAAK9C,WAAA,EAAaY,MAAA,GAASxF,cAAA,CAAe4E,WAAA,EAAaY,MAAA,CAAOC,QAAA,EAAUtD,IAAA,IAAQ;;IAErF;EACF,GAAG,CAACqB,WAAA,EAAaoB,WAAA,EAAaY,MAAA,EAAQrD,IAAA,CAAK;EAE3C,IAAI,CAACyC,WAAA,EAAa;IAChB,oBACEmE,KAAA,CAACP,oBAAA;MAAqBZ,SAAA,EAAW,GAAG/H,SAAA,YAAqB;8BACvDkJ,KAAA,CAAC;mBAAK,kBAAehH,QAAA,CAAS0C,SAAS,EAAC;UACvCvC,UAAA,gBACCwF,IAAA,CAAC;QAAIE,SAAA,EAAW,GAAG/H,SAAA,WAAoB;kBACrC,aAAA6H,IAAA,CAACD,YAAA;WAED;;EAGV;EAEA,oBACEsB,KAAA,CAAC3I,IAAA;IACC4I,YAAA,EAAc,CACZ,OAAO;MAAE5F,SAAS,EAATA;IAAS,CAAE;MAClB;MACA,OAAO,MAAM0D,QAAA,CAAS;QAAE1D,SAAA,EAAAA,WAAA;QAAW4D,MAAA,EAAQ;MAAK;IAClD,EACD;IACDiC,yBAAyB;IACzBV,EAAA,EAAG;IACH3F,MAAA,EAAQgC,WAAA,EAAahC,MAAA;IACrBnB,YAAA,EAAcA,YAAA,IAAgB,CAAC;IAC/BqF,QAAA,EAAU,CAACA,QAAA,CAAS;IACpBoC,QAAA,EAAUA,CAAC9F,WAAA,EAAW4C,IAAA;MACpBwB,YAAA,CAAapE,WAAA,EAAW4C,IAAA;MACxB9B,YAAA;IACF;IACA9C,IAAA,EAAMA,IAAA;4BAENsG,IAAA,CAACvH,iBAAA;gBACC,aAAAuH,IAAA,CAACxH,MAAA;QACC0H,SAAA,EAAW;QACX5D,IAAA,EAAMD,UAAA;QACNoF,KAAA,EAAO/G,CAAA,CAAE,+BAA+BL,QAAA,EAAUoB,EAAA,GAAK,SAAS,UAAU,EAAE;UAC1EkF,KAAA,EAAO9C,gBAAA,IAAoBnD,CAAA,CAAE;QAC/B;kBAECX,YAAA,gBACCsH,KAAA,CAAAK,SAAA;kCACE1B,IAAA,CAACnH,YAAA;YACCqC,MAAA,EAAQgC,WAAA,EAAahC,MAAA;YACrByG,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW,GAAG;YAAA;;YACdC,gBAAA,EAAkB5D,gBAAA;YAClB6D,WAAA,EAAa;YACblD,QAAA,EAAU,CAACrE;2BAEbwF,IAAA,CAACpH,UAAA;YAAWoJ,kBAAA,EAAoB;sBAAOtH,CAAA,CAAE;;aAEzC;;QAGPwB,WAAA,gBACC8D,IAAA,CAAClG,2BAAA;MACC+F,KAAA,EAAO;QACLe,UAAA;QACA7G,YAAA;QACA+G,oBAAA;QACAM,KAAA;QACA9G,OAAA;QACAyF;MACF;gBAEC7D;sBAGHmF,KAAA,CAACP,oBAAA;iBACE/G,YAAA,gBAAeiG,IAAA,CAACoB,KAAA,qBAAWpB,IAAA,CAAClH,aAAA;QAAcmJ,MAAA,EAAO;QAAOC,KAAA,EAAM;UAC9D1H,UAAA,gBACC6G,KAAA,CAAC;QAAInB,SAAA,EAAW,GAAG/H,SAAA,WAAoB;gCACrC6H,IAAA,CAACY,UAAA,O,aACDZ,IAAA,CAACD,YAAA;WAED;;;AAKd","ignoreList":[]}

package/dist/features/blocks/premade/CodeBlock/Component/Block.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import './index.scss';
+import React from 'react';
 import type { AdditionalCodeComponentProps } from './Code.js';
 export declare const CodeBlockBlockComponent: React.FC<Required<Pick<AdditionalCodeComponentProps, 'languages'>>>;
 //# sourceMappingURL=Block.d.ts.map

package/dist/features/blocks/premade/CodeBlock/Component/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAA;AAQ7D,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,QAAQ,CAAC,IAAI,CAAC,4BAA4B,EAAE,WAAW,CAAC,CAAC,CA+F1D,CAAA"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAA;AAWrB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAA;AAQ7D,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAC5C,QAAQ,CAAC,IAAI,CAAC,4BAA4B,EAAE,WAAW,CAAC,CAAC,CAmG1D,CAAA"}

package/dist/features/blocks/premade/CodeBlock/Component/Block.js

@@ -2,6 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { ChevronIcon, CopyToClipboard, Popup, PopupList, RenderFields, useForm, useFormFields } from '@payloadcms/ui';
 import React from 'react';
 import { CodeBlockIcon } from '../../../../../lexical/ui/icons/CodeBlock/index.js';
@@ -10,7 +11,7 @@ import { Collapse } from './Collapse/index.js';
 import { FloatingCollapse } from './FloatingCollapse/index.js';
 const baseClass = 'payload-richtext-code-block';
 export const CodeBlockBlockComponent = args => {
-  const $ = _c(14);
+  const $ = _c(15);
   const {
     languages
   } = args;
@@ -51,11 +52,12 @@ export const CodeBlockBlockComponent = args => {
     setSelectedLanguage
   } = useFormFields(t0);
   const selectedLanguageLabel = languages[selectedLanguageField?.value];
+  const isEditable = useLexicalEditable();
   const t1 = selectedLanguageField?.value;
   let t2;
-  if ($[2] !== BlockCollapsible || $[3] !== RemoveButton || $[4] !== codeField?.value || $[5] !== formSchema || $[6] !== languages || $[7] !== selectedLanguageLabel || $[8] !== setSelectedLanguage || $[9] !== t1) {
+  if ($[2] !== BlockCollapsible || $[3] !== RemoveButton || $[4] !== codeField?.value || $[5] !== formSchema || $[6] !== isEditable || $[7] !== languages || $[8] !== selectedLanguageLabel || $[9] !== setSelectedLanguage || $[10] !== t1) {
     let t3;
-    if ($[11] !== languages || $[12] !== setSelectedLanguage) {
+    if ($[12] !== languages || $[13] !== setSelectedLanguage) {
       t3 = t4 => {
         const {
           close
@@ -79,11 +81,11 @@ export const CodeBlockBlockComponent = args => {
           })
         });
       };
-      $[11] = languages;
-      $[12] = setSelectedLanguage;
-      $[13] = t3;
+      $[12] = languages;
+      $[13] = setSelectedLanguage;
+      $[14] = t3;
     } else {
-      t3 = $[13];
+      t3 = $[14];
     }
     t2 = _jsx(BlockCollapsible, {
       Actions: _jsxs("div", {
@@ -99,13 +101,14 @@ export const CodeBlockBlockComponent = args => {
             })]
           }),
           className: `${baseClass}__language-selector`,
+          disabled: !isEditable,
           horizontalAlign: "right",
           render: t3,
           showScrollbar: true,
           size: "large"
         }), _jsx(CopyToClipboard, {
           value: codeField?.value ?? ""
-        }), _jsx(Collapse, {}), _jsx(RemoveButton, {})]
+        }), _jsx(Collapse, {}), isEditable && _jsx(RemoveButton, {})]
       }),
       className: baseClass,
       collapsibleProps: {
@@ -124,7 +127,8 @@ export const CodeBlockBlockComponent = args => {
           parentIndexPath: "",
           parentPath: "",
           parentSchemaPath: "",
-          permissions: true
+          permissions: true,
+          readOnly: !isEditable
         })
       })
     });
@@ -132,13 +136,14 @@ export const CodeBlockBlockComponent = args => {
     $[3] = RemoveButton;
     $[4] = codeField?.value;
     $[5] = formSchema;
-    $[6] = languages;
-    $[7] = selectedLanguageLabel;
-    $[8] = setSelectedLanguage;
-    $[9] = t1;
-    $[10] = t2;
+    $[6] = isEditable;
+    $[7] = languages;
+    $[8] = selectedLanguageLabel;
+    $[9] = setSelectedLanguage;
+    $[10] = t1;
+    $[11] = t2;
   } else {
-    t2 = $[10];
+    t2 = $[11];
   }
   return t2;
 };

package/dist/features/blocks/premade/CodeBlock/Component/Block.js.map

@@ -1 +1 @@
-{"version":3,"file":"Block.js","names":["c","_c","ChevronIcon","CopyToClipboard","Popup","PopupList","RenderFields","useForm","useFormFields","React","CodeBlockIcon","useBlockComponentContext","Collapse","FloatingCollapse","baseClass","CodeBlockBlockComponent","args","$","languages","BlockCollapsible","formSchema","RemoveButton","setModified","codeField","_temp","t0","t1","fields_0","dispatch","selectedLanguageField","fields","language","setSelectedLanguage","type","path","value","selectedLanguageLabel","t2","t3","t4","close","_jsx","ButtonGroup","children","Object","entries","map","t5","languageCode","languageLabel","Button","active","disabled","onClick","className","Actions","_jsxs","button","horizontalAlign","render","disableHeaderToggle","disableToggleIndicator","Pill","_Fragment","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","code"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"sourcesContent":["'use client'\nimport type {} from 'payload'\n\nimport {\n  ChevronIcon,\n  CopyToClipboard,\n  Popup,\n  PopupList,\n  RenderFields,\n  useForm,\n  useFormFields,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.scss'\n\nimport type { AdditionalCodeComponentProps } from './Code.js'\n\nimport { CodeBlockIcon } from '../../../../../lexical/ui/icons/CodeBlock/index.js'\nimport { useBlockComponentContext } from '../../../client/component/BlockContent.js'\nimport { Collapse } from './Collapse/index.js'\nimport { FloatingCollapse } from './FloatingCollapse/index.js'\n\nconst baseClass = 'payload-richtext-code-block'\nexport const CodeBlockBlockComponent: React.FC<\n  Required<Pick<AdditionalCodeComponentProps, 'languages'>>\n> = (args) => {\n  const { languages } = args\n  const { BlockCollapsible, formSchema, RemoveButton } = useBlockComponentContext()\n  const { setModified } = useForm()\n\n  const { codeField } = useFormFields(([fields]) => ({\n    codeField: fields?.code,\n  }))\n\n  const { selectedLanguageField, setSelectedLanguage } = useFormFields(([fields, dispatch]) => ({\n    selectedLanguageField: fields?.language,\n    setSelectedLanguage: (language: string) => {\n      dispatch({\n        type: 'UPDATE',\n        path: 'language',\n        value: language,\n      })\n      setModified(true)\n    },\n  }))\n\n  const selectedLanguageLabel = languages[selectedLanguageField?.value as keyof typeof languages]\n\n  return (\n    <BlockCollapsible\n      Actions={\n        <div className={`${baseClass}__actions`}>\n          <Popup\n            button={\n              <div\n                className={`${baseClass}__language-selector-button`}\n                data-selected-language={selectedLanguageField?.value}\n              >\n                <span>{selectedLanguageLabel}</span>\n                <ChevronIcon className={`${baseClass}__chevron`} />\n              </div>\n            }\n            className={`${baseClass}__language-selector`}\n            horizontalAlign=\"right\"\n            render={({ close }) => (\n              <PopupList.ButtonGroup>\n                {Object.entries(languages).map(([languageCode, languageLabel]) => {\n                  return (\n                    <PopupList.Button\n                      active={false}\n                      disabled={false}\n                      key={languageCode}\n                      onClick={() => {\n                        setSelectedLanguage(languageCode)\n                        close()\n                      }}\n                    >\n                      <span className={`${baseClass}__language-code`} data-language={languageCode}>\n                        {languageLabel}\n                      </span>\n                    </PopupList.Button>\n                  )\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            showScrollbar\n            size=\"large\"\n          />\n          <CopyToClipboard value={(codeField?.value as string) ?? ''} />\n\n          <Collapse />\n\n          <RemoveButton />\n        </div>\n      }\n      className={baseClass}\n      collapsibleProps={{\n        AfterCollapsible: <FloatingCollapse />,\n        disableHeaderToggle: true,\n        disableToggleIndicator: true,\n      }}\n      Pill={\n        <div className={`${baseClass}__pill`}>\n          <CodeBlockIcon />\n        </div>\n      }\n    >\n      <>\n        <RenderFields\n          fields={formSchema}\n          forceRender={true}\n          parentIndexPath=\"\"\n          parentPath={''}\n          parentSchemaPath=\"\"\n          permissions={true}\n        />\n      </>\n    </BlockCollapsible>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,WAAW,EACXC,eAAe,EACfC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,OAAO,EACPC,aAAa,QACR;AACP,OAAOC,KAAA,MAAW;AAMlB,SAASC,aAAa,QAAQ;AAC9B,SAASC,wBAAwB,QAAQ;AACzC,SAASC,QAAQ,QAAQ;AACzB,SAASC,gBAAgB,QAAQ;AAEjC,MAAMC,SAAA,GAAY;AAClB,OAAO,MAAMC,uBAAA,GAETC,IAAA;EAAA,MAAAC,CAAA,GAAAhB,EAAA;EACF;IAAAiB;EAAA,IAAsBF,IAAA;EACtB;IAAAG,gBAAA;IAAAC,UAAA;IAAAC;EAAA,IAAuDV,wBAAA;EACvD;IAAAW;EAAA,IAAwBf,OAAA;EAExB;IAAAgB;EAAA,IAAsBf,aAAA,CAAAgB,KAEtB;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAK,WAAA;IAEqEG,EAAA,GAAAC,EAAA;MAAC,OAAAC,QAAA,EAAAC,QAAA,IAAAF,EAAkB;MAAA;QAAAG,qBAAA,EAC/DC,QAAA,EAAAC,QAAA;QAAAC,mBAAA,EAAAD,QAAA;UAErBH,QAAA;YAAAK,IAAA,EACQ;YAAAC,IAAA,EACA;YAAAC,KAAA,EACCJ;UAAA,CACT;UACAT,WAAA,KAAY;QAAA;MAAA;IAAA;IAEhBL,CAAA,MAAAK,WAAA;IAAAL,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAVA;IAAAY,qBAAA;IAAAG;EAAA,IAAuDxB,aAAA,CAAciB,EAUrE;EAEA,MAAAW,qBAAA,GAA8BlB,SAAS,CAACW,qBAAA,EAAAM,KAAA;EAUF,MAAAT,EAAA,GAAAG,qBAAA,EAAAM,KAAA;EAAuB,IAAAE,EAAA;EAAA,IAAApB,CAAA,QAAAE,gBAAA,IAAAF,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAM,SAAA,EAAAY,KAAA,IAAAlB,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAmB,qBAAA,IAAAnB,CAAA,QAAAe,mBAAA,IAAAf,CAAA,QAAAS,EAAA;IAAA,IAAAY,EAAA;IAAA,IAAArB,CAAA,SAAAC,SAAA,IAAAD,CAAA,SAAAe,mBAAA;MAQ3CM,EAAA,GAAAC,EAAA;QAAC;UAAAC;QAAA,IAAAD,EAAS;QAAA,OAChBE,IAAA,CAAApC,SAAA,CAAAqC,WAAA;UAAAC,QAAA,EACGC,MAAA,CAAAC,OAAA,CAAe3B,SAAA,EAAA4B,GAAA,CAAAC,EAAA;YAAgB,OAAAC,YAAA,EAAAC,aAAA,IAAAF,EAA6B;YAAA,OAEzDN,IAAA,CAAApC,SAAA,CAAA6C,MAAA;cAAAC,MAAA;cAAAC,QAAA;cAAAC,OAAA,EAAAA,CAAA;gBAKIrB,mBAAA,CAAoBgB,YAAA;gBACpBR,KAAA;cAAA;cAAAG,QAAA,EAGFF,IAAA,CAAC;gBAAAa,SAAA,EAAgB,GAAAxC,SAAA,iBAA6B;gBAAA,iBAAiBkC,YAAA;gBAAAL,QAAA,EAC5DM;cAAA,C;eAPED,YAAA;UAAA,CAWX;QAAA,C;;;;;;;;IAjCZX,EAAA,GAAAI,IAAA,CAACtB,gBAAA;MAAAoC,OAAA,EAEGC,KAAA,CAAC;QAAAF,SAAA,EAAe,GAAAxC,SAAA,WAAuB;QAAA6B,QAAA,GACrCF,IAAA,CAAArC,KAAA;UAAAqD,MAAA,EAEID,KAAA,CAAC;YAAAF,SAAA,EACY,GAAAxC,SAAA,4BAAwC;YAAA,0BAC3BY,EAAuB;YAAAiB,QAAA,GAE/CF,IAAA,CAAC;cAAAE,QAAA,EAAMP;YAAA,C,GACPK,IAAA,CAAAvC,WAAA;cAAAoD,SAAA,EAAwB,GAAAxC,SAAA;YAAuB,C;;qBAGxC,GAAAA,SAAA,qBAAiC;UAAA4C,eAAA,EAC5B;UAAAC,MAAA,EACRrB,E;;gBAsBH;QAAA,C,GAEPG,IAAA,CAAAtC,eAAA;UAAAgC,KAAA,EAAwBZ,SAAC,EAAAY,KAAA,IAA+B;QAAA,C,GAExDM,IAAA,CAAA7B,QAAA,IAAC,GAED6B,IAAA,CAACpB,YAAA;MAAA,C;;;0BAKeoB,IAAA,CAAA5B,gBAAA,IAAC;QAAA+C,mBAAA;QAAAC,sBAAA;MAAA;MAAAC,IAAA,EAKnBrB,IAAA,CAAC;QAAAa,SAAA,EAAe,GAAAxC,SAAA,QAAoB;QAAA6B,QAAA,EAClCF,IAAA,CAAA/B,aAAA,IAAC;MAAA,C;gBAIL+B,IAAA,CAAAsB,SAAA;QAAApB,QAAA,EACEF,IAAA,CAAAnC,YAAA;UAAAwB,MAAA,EACUV,UAAA;UAAA4C,WAAA;UAAAC,eAAA,EAEQ;UAAAC,UAAA,EACJ;UAAAC,gBAAA,EACK;UAAAC,WAAA;QAAA,C;;;;;;;;;;;;;;;SAhEvB/B,E;CAsEJ;AA9FI,SAAAb,MAAAC,EAAA;EAKmC,OAAAK,MAAA,IAAAL,EAAQ;EAAA;IAAAF,SAAA,EAChCO,MAAA,EAAAuC;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"Block.js","names":["c","_c","useLexicalEditable","ChevronIcon","CopyToClipboard","Popup","PopupList","RenderFields","useForm","useFormFields","React","CodeBlockIcon","useBlockComponentContext","Collapse","FloatingCollapse","baseClass","CodeBlockBlockComponent","args","$","languages","BlockCollapsible","formSchema","RemoveButton","setModified","codeField","_temp","t0","t1","fields_0","dispatch","selectedLanguageField","fields","language","setSelectedLanguage","type","path","value","selectedLanguageLabel","isEditable","t2","t3","t4","close","_jsx","ButtonGroup","children","Object","entries","map","t5","languageCode","languageLabel","Button","active","disabled","onClick","className","Actions","_jsxs","button","horizontalAlign","render","disableHeaderToggle","disableToggleIndicator","Pill","_Fragment","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions","readOnly","code"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Block.tsx"],"sourcesContent":["'use client'\nimport type {} from 'payload'\n\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable'\n\nimport './index.scss'\n\nimport {\n  ChevronIcon,\n  CopyToClipboard,\n  Popup,\n  PopupList,\n  RenderFields,\n  useForm,\n  useFormFields,\n} from '@payloadcms/ui'\nimport React from 'react'\n\nimport type { AdditionalCodeComponentProps } from './Code.js'\n\nimport { CodeBlockIcon } from '../../../../../lexical/ui/icons/CodeBlock/index.js'\nimport { useBlockComponentContext } from '../../../client/component/BlockContent.js'\nimport { Collapse } from './Collapse/index.js'\nimport { FloatingCollapse } from './FloatingCollapse/index.js'\n\nconst baseClass = 'payload-richtext-code-block'\nexport const CodeBlockBlockComponent: React.FC<\n  Required<Pick<AdditionalCodeComponentProps, 'languages'>>\n> = (args) => {\n  const { languages } = args\n  const { BlockCollapsible, formSchema, RemoveButton } = useBlockComponentContext()\n  const { setModified } = useForm()\n\n  const { codeField } = useFormFields(([fields]) => ({\n    codeField: fields?.code,\n  }))\n\n  const { selectedLanguageField, setSelectedLanguage } = useFormFields(([fields, dispatch]) => ({\n    selectedLanguageField: fields?.language,\n    setSelectedLanguage: (language: string) => {\n      dispatch({\n        type: 'UPDATE',\n        path: 'language',\n        value: language,\n      })\n      setModified(true)\n    },\n  }))\n\n  const selectedLanguageLabel = languages[selectedLanguageField?.value as keyof typeof languages]\n\n  const isEditable = useLexicalEditable()\n\n  return (\n    <BlockCollapsible\n      Actions={\n        <div className={`${baseClass}__actions`}>\n          <Popup\n            button={\n              <div\n                className={`${baseClass}__language-selector-button`}\n                data-selected-language={selectedLanguageField?.value}\n              >\n                <span>{selectedLanguageLabel}</span>\n                <ChevronIcon className={`${baseClass}__chevron`} />\n              </div>\n            }\n            className={`${baseClass}__language-selector`}\n            disabled={!isEditable}\n            horizontalAlign=\"right\"\n            render={({ close }) => (\n              <PopupList.ButtonGroup>\n                {Object.entries(languages).map(([languageCode, languageLabel]) => {\n                  return (\n                    <PopupList.Button\n                      active={false}\n                      disabled={false}\n                      key={languageCode}\n                      onClick={() => {\n                        setSelectedLanguage(languageCode)\n                        close()\n                      }}\n                    >\n                      <span className={`${baseClass}__language-code`} data-language={languageCode}>\n                        {languageLabel}\n                      </span>\n                    </PopupList.Button>\n                  )\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            showScrollbar\n            size=\"large\"\n          />\n          <CopyToClipboard value={(codeField?.value as string) ?? ''} />\n\n          <Collapse />\n\n          {isEditable && <RemoveButton />}\n        </div>\n      }\n      className={baseClass}\n      collapsibleProps={{\n        AfterCollapsible: <FloatingCollapse />,\n        disableHeaderToggle: true,\n        disableToggleIndicator: true,\n      }}\n      Pill={\n        <div className={`${baseClass}__pill`}>\n          <CodeBlockIcon />\n        </div>\n      }\n    >\n      <>\n        <RenderFields\n          fields={formSchema}\n          forceRender={true}\n          parentIndexPath=\"\"\n          parentPath={''}\n          parentSchemaPath=\"\"\n          permissions={true}\n          readOnly={!isEditable}\n        />\n      </>\n    </BlockCollapsible>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/blocks/premade/CodeBlock/Component/Code.d.ts

@@ -24,6 +24,14 @@ export type AdditionalCodeComponentProps = {
      * Configure typescript settings for the editor
      */
     typescript?: {
+        /**
+         * By default, the editor will not perform semantic validation. This means that
+         * while syntax errors will be highlighted, other issues like missing imports or incorrect
+         * types will not be.
+         *
+         * @default false
+         */
+        enableSemanticValidation?: boolean;
         /**
          * Additional types to fetch and include in the editor for autocompletion.
          *

package/dist/features/blocks/premade/CodeBlock/Component/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGpE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;;;;;WAMG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC;YACjB,QAAQ,EAAE,MAAM,CAAA;YAChB,GAAG,EAAE,MAAM,CAAA;SACZ,CAAC,CAAA;QACF;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAA;QACf;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;KACrB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,GAAG,oBAAoB,CAuGvF,CAAA"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGpE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;;;;;WAMG;QACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;QAClC;;;;;;WAMG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC;YACjB,QAAQ,EAAE,MAAM,CAAA;YAChB,GAAG,EAAE,MAAM,CAAA;SACZ,CAAC,CAAA;QACF;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAA;QACf;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;KACrB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,GAAG,oBAAoB,CAwHvF,CAAA"}

package/dist/features/blocks/premade/CodeBlock/Component/Code.js

@@ -29,6 +29,11 @@ export const CodeComponent = ({
     admin: {
       ...field.admin,
       editorOptions: {},
+      editorProps: {
+        // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().
+        // This is done through the `defaultPath` prop.
+        defaultPath: language === 'ts' ? 'file.tsx' : undefined
+      },
       language
     }
   }), [field, language]);
@@ -57,11 +62,21 @@ export const CodeComponent = ({
       monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
         allowNonTsExtensions: true,
         // Set module resolution to NodeJs to enable autocompletion
+        allowJs: true,
+        allowSyntheticDefaultImports: true,
+        esModuleInterop: true,
+        jsx: monaco.languages.typescript.JsxEmit.React,
         moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        noEmit: true,
         paths: typescript?.paths,
+        reactNamespace: 'React',
         target: monaco.languages.typescript.ScriptTarget[typescript?.target ?? 'ESNext'],
         typeRoots: typescript?.typeRoots ?? ['node_modules/@types']
       });
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: typescript?.enableSemanticValidation ? false : true,
+        noSyntaxValidation: false
+      });
       const run = async () => {
         if (typescript?.fetchTypes && Array.isArray(typescript.fetchTypes) && typescript.fetchTypes.length > 0) {
           await Promise.all(typescript.fetchTypes.map(async type => {

package/dist/features/blocks/premade/CodeBlock/Component/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","names":["CodeField","useFormFields","React","useMemo","CodeComponent","autoComplete","field","forceRender","languages","js","plaintext","ts","path","permissions","readOnly","renderedBlocks","schemaPath","typescript","validate","languageField","fields","language","value","initialValue","label","props","type","admin","editorOptions","key","name","_jsx","onMount","_editor","monaco","editor","defineTheme","base","colors","inherit","rules","typescriptDefaults","setCompilerOptions","allowNonTsExtensions","moduleResolution","ModuleResolutionKind","NodeJs","paths","target","ScriptTarget","typeRoots","run","fetchTypes","Array","isArray","length","Promise","all","map","types","fetch","url","typesText","text","addExtraLib","filePath"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"sourcesContent":["'use client'\n\nimport type { CodeFieldClient, CodeFieldClientProps } from 'payload'\n\nimport { CodeField, useFormFields } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\n\nexport type AdditionalCodeComponentProps = {\n  /**\n   * @default first key of the `languages` prop\n   */\n  defaultLanguage?: string\n  /**\n   * @default\n   * {\n   *  js: 'JavaScript',\n   *  plaintext: 'Plain Text',\n   *  ts: 'TypeScript',\n   * }\n   */\n  languages?: Record<string, string>\n  /**\n   * Override the name of the block.\n   *\n   * @default 'Code'\n   */\n  slug?: string\n  /**\n   * Configure typescript settings for the editor\n   */\n  typescript?: {\n    /**\n     * Additional types to fetch and include in the editor for autocompletion.\n     *\n     * For example, to include types for payload, you would set this to\n     *\n     * [{ url: 'https://unpkg.com/payload@latest/dist/index.d.ts', filePath: 'file:///node_modules/payload/index.d.ts' }]\n     */\n    fetchTypes?: Array<{\n      filePath: string\n      url: string\n    }>\n    /**\n     * @default undefined\n     */\n    paths?: Record<string, string[]>\n    /**\n     * @default \"ESNext\"\n     */\n    target?: string\n    /**\n     * @default ['node_modules/@types']\n     */\n    typeRoots?: string[]\n  }\n}\n\nexport const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldClientProps> = ({\n  autoComplete,\n  field,\n  forceRender,\n  languages = {\n    js: 'JavaScript',\n    plaintext: 'Plain Text',\n    ts: 'TypeScript',\n  },\n  path,\n  permissions,\n  readOnly,\n  renderedBlocks,\n  schemaPath,\n  typescript,\n  validate,\n}) => {\n  const languageField = useFormFields(([fields]) => fields['language'])\n\n  const language: string =\n    (languageField?.value as string) || (languageField?.initialValue as string) || 'typescript'\n\n  const label = languages[language]\n\n  const props: CodeFieldClient = useMemo<CodeFieldClient>(\n    () => ({\n      ...field,\n      type: 'code',\n      admin: {\n        ...field.admin,\n        editorOptions: {},\n        language,\n      },\n    }),\n    [field, language],\n  )\n\n  const key = `${field.name}-${language}-${label}`\n\n  return (\n    props && (\n      <CodeField\n        autoComplete={autoComplete}\n        field={props}\n        forceRender={forceRender}\n        key={key}\n        onMount={(_editor, monaco) => {\n          monaco.editor.defineTheme('vs-dark', {\n            base: 'vs-dark',\n            colors: {\n              'editor.background': '#222222',\n            },\n            inherit: true,\n            rules: [],\n          })\n\n          monaco.editor.defineTheme('vs', {\n            base: 'vs',\n            colors: {\n              'editor.background': '#f5f5f5',\n            },\n            inherit: true,\n            rules: [],\n          })\n          monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n            allowNonTsExtensions: true,\n            // Set module resolution to NodeJs to enable autocompletion\n            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,\n            paths: typescript?.paths,\n            target: monaco.languages.typescript.ScriptTarget[\n              typescript?.target ?? ('ESNext' as any)\n            ] as any,\n            typeRoots: typescript?.typeRoots ?? ['node_modules/@types'],\n          })\n          const run = async () => {\n            if (\n              typescript?.fetchTypes &&\n              Array.isArray(typescript.fetchTypes) &&\n              typescript.fetchTypes.length > 0\n            ) {\n              await Promise.all(\n                typescript.fetchTypes.map(async (type) => {\n                  const types = await fetch(type.url)\n                  const typesText = await types.text()\n                  monaco.languages.typescript.typescriptDefaults.addExtraLib(\n                    typesText,\n                    type.filePath,\n                  )\n                }),\n              )\n            }\n          }\n          void run()\n        }}\n        path={path}\n        permissions={permissions}\n        readOnly={readOnly}\n        renderedBlocks={renderedBlocks}\n        schemaPath={schemaPath}\n        validate={validate}\n      />\n    )\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Code.js","names":["CodeField","useFormFields","React","useMemo","CodeComponent","autoComplete","field","forceRender","languages","js","plaintext","ts","path","permissions","readOnly","renderedBlocks","schemaPath","typescript","validate","languageField","fields","language","value","initialValue","label","props","type","admin","editorOptions","editorProps","defaultPath","undefined","key","name","_jsx","onMount","_editor","monaco","editor","defineTheme","base","colors","inherit","rules","typescriptDefaults","setCompilerOptions","allowNonTsExtensions","allowJs","allowSyntheticDefaultImports","esModuleInterop","jsx","JsxEmit","moduleResolution","ModuleResolutionKind","NodeJs","noEmit","paths","reactNamespace","target","ScriptTarget","typeRoots","setDiagnosticsOptions","noSemanticValidation","enableSemanticValidation","noSyntaxValidation","run","fetchTypes","Array","isArray","length","Promise","all","map","types","fetch","url","typesText","text","addExtraLib","filePath"],"sources":["../../../../../../src/features/blocks/premade/CodeBlock/Component/Code.tsx"],"sourcesContent":["'use client'\n\nimport type { CodeFieldClient, CodeFieldClientProps } from 'payload'\n\nimport { CodeField, useFormFields } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\n\nexport type AdditionalCodeComponentProps = {\n  /**\n   * @default first key of the `languages` prop\n   */\n  defaultLanguage?: string\n  /**\n   * @default\n   * {\n   *  js: 'JavaScript',\n   *  plaintext: 'Plain Text',\n   *  ts: 'TypeScript',\n   * }\n   */\n  languages?: Record<string, string>\n  /**\n   * Override the name of the block.\n   *\n   * @default 'Code'\n   */\n  slug?: string\n  /**\n   * Configure typescript settings for the editor\n   */\n  typescript?: {\n    /**\n     * By default, the editor will not perform semantic validation. This means that\n     * while syntax errors will be highlighted, other issues like missing imports or incorrect\n     * types will not be.\n     *\n     * @default false\n     */\n    enableSemanticValidation?: boolean\n    /**\n     * Additional types to fetch and include in the editor for autocompletion.\n     *\n     * For example, to include types for payload, you would set this to\n     *\n     * [{ url: 'https://unpkg.com/payload@latest/dist/index.d.ts', filePath: 'file:///node_modules/payload/index.d.ts' }]\n     */\n    fetchTypes?: Array<{\n      filePath: string\n      url: string\n    }>\n    /**\n     * @default undefined\n     */\n    paths?: Record<string, string[]>\n    /**\n     * @default \"ESNext\"\n     */\n    target?: string\n    /**\n     * @default ['node_modules/@types']\n     */\n    typeRoots?: string[]\n  }\n}\n\nexport const CodeComponent: React.FC<AdditionalCodeComponentProps & CodeFieldClientProps> = ({\n  autoComplete,\n  field,\n  forceRender,\n  languages = {\n    js: 'JavaScript',\n    plaintext: 'Plain Text',\n    ts: 'TypeScript',\n  },\n  path,\n  permissions,\n  readOnly,\n  renderedBlocks,\n  schemaPath,\n  typescript,\n  validate,\n}) => {\n  const languageField = useFormFields(([fields]) => fields['language'])\n\n  const language: string =\n    (languageField?.value as string) || (languageField?.initialValue as string) || 'typescript'\n\n  const label = languages[language]\n\n  const props: CodeFieldClient = useMemo<CodeFieldClient>(\n    () => ({\n      ...field,\n      type: 'code',\n      admin: {\n        ...field.admin,\n        editorOptions: {},\n        editorProps: {\n          // If typescript is set, @monaco-editor/react needs to set the URI to a .ts or .tsx file when it calls createModel().\n          // This is done through the `defaultPath` prop.\n          defaultPath: language === 'ts' ? 'file.tsx' : undefined,\n        },\n        language,\n      },\n    }),\n    [field, language],\n  )\n\n  const key = `${field.name}-${language}-${label}`\n\n  return (\n    props && (\n      <CodeField\n        autoComplete={autoComplete}\n        field={props}\n        forceRender={forceRender}\n        key={key}\n        onMount={(_editor, monaco) => {\n          monaco.editor.defineTheme('vs-dark', {\n            base: 'vs-dark',\n            colors: {\n              'editor.background': '#222222',\n            },\n            inherit: true,\n            rules: [],\n          })\n\n          monaco.editor.defineTheme('vs', {\n            base: 'vs',\n            colors: {\n              'editor.background': '#f5f5f5',\n            },\n            inherit: true,\n            rules: [],\n          })\n          monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n            allowNonTsExtensions: true,\n            // Set module resolution to NodeJs to enable autocompletion\n            allowJs: true,\n            allowSyntheticDefaultImports: true,\n            esModuleInterop: true,\n            jsx: monaco.languages.typescript.JsxEmit.React,\n            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,\n            noEmit: true,\n            paths: typescript?.paths,\n            reactNamespace: 'React',\n            target: monaco.languages.typescript.ScriptTarget[\n              typescript?.target ?? ('ESNext' as any)\n            ] as any,\n            typeRoots: typescript?.typeRoots ?? ['node_modules/@types'],\n          })\n\n          monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n            noSemanticValidation: typescript?.enableSemanticValidation ? false : true,\n            noSyntaxValidation: false,\n          })\n\n          const run = async () => {\n            if (\n              typescript?.fetchTypes &&\n              Array.isArray(typescript.fetchTypes) &&\n              typescript.fetchTypes.length > 0\n            ) {\n              await Promise.all(\n                typescript.fetchTypes.map(async (type) => {\n                  const types = await fetch(type.url)\n                  const typesText = await types.text()\n                  monaco.languages.typescript.typescriptDefaults.addExtraLib(\n                    typesText,\n                    type.filePath,\n                  )\n                }),\n              )\n            }\n          }\n          void run()\n        }}\n        path={path}\n        permissions={permissions}\n        readOnly={readOnly}\n        renderedBlocks={renderedBlocks}\n        schemaPath={schemaPath}\n        validate={validate}\n      />\n    )\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/features/blocks/server/i18n.js

@@ -2,9 +2,9 @@ export const i18n = {
   ar: {
     inlineBlocks: {
       create: 'أنشئ {{label}}',
-      edit: 'تحرير {{التسمية}}',
+      edit: 'تحرير {{label}}',
       label: 'الكتل الداخلية',
-      remove: 'إزالة {{التسمية}}'
+      remove: 'إزالة {{label}}'
     },
     label: 'كتل'
   },
@@ -19,16 +19,16 @@ export const i18n = {
   },
   bg: {
     inlineBlocks: {
-      create: 'Създайте {{етикет}}',
-      edit: 'Редактирай {{етикет}}',
+      create: 'Създайте {{label}}',
+      edit: 'Редактирай {{label}}',
       label: 'Вградени блокове',
-      remove: 'Премахнете {{етикет}}'
+      remove: 'Премахнете {{label}}'
     },
     label: 'Блокове'
   },
   cs: {
     inlineBlocks: {
-      create: 'Vytvořte {{štítek}}',
+      create: 'Vytvořte {{label}}',
       edit: 'Upravit {{label}}',
       label: 'Inline bloky',
       remove: 'Odstraňte {{label}}'
@@ -64,8 +64,8 @@ export const i18n = {
   },
   es: {
     inlineBlocks: {
-      create: 'Crear {{etiqueta}}',
-      edit: 'Editar {{etiqueta}}',
+      create: 'Crear {{label}}',
+      edit: 'Editar {{label}}',
       label: 'Bloques en línea',
       remove: 'Eliminar {{label}}'
     },
@@ -82,10 +82,10 @@ export const i18n = {
   },
   fa: {
     inlineBlocks: {
-      create: 'ایجاد {{برچسب}}',
-      edit: 'ویرایش {{برچسب}}',
+      create: 'ایجاد {{label}}',
+      edit: 'ویرایش {{label}}',
       label: 'بلوک‌های درون خطی',
-      remove: 'حذف {{برچسب}}'
+      remove: 'حذف {{label}}'
     },
     label: 'بلوک ها'
   },
@@ -100,26 +100,26 @@ export const i18n = {
   },
   he: {
     inlineBlocks: {
-      create: 'צור {{תווית}}',
-      edit: 'ערוך {{תווית}}',
+      create: 'צור {{label}}',
+      edit: 'ערוך {{label}}',
       label: 'בלוקים משורשרים',
-      remove: 'הסר {{תווית}}'
+      remove: 'הסר {{label}}'
     },
     label: 'חסימות'
   },
   hr: {
     inlineBlocks: {
-      create: 'Stvori {{oznaka}}',
+      create: 'Stvori {{label}}',
       edit: 'Uredi {{label}}',
       label: 'Unutrašnji blokovi',
-      remove: 'Ukloni {{oznaka}}'
+      remove: 'Ukloni {{label}}'
     },
     label: 'Blokovi'
   },
   hu: {
     inlineBlocks: {
-      create: 'Hozzon létre {{címke}}',
-      edit: 'Szerkesztés {{címke}}',
+      create: 'Hozzon létre {{label}}',
+      edit: 'Szerkesztés {{label}}',
       label: 'Beágyazott blokkok',
       remove: 'Távolítsa el a {{label}}'
     },
@@ -127,7 +127,7 @@ export const i18n = {
   },
   it: {
     inlineBlocks: {
-      create: 'Crea {{etichetta}}',
+      create: 'Crea {{label}}',
       edit: 'Modifica {{label}}',
       label: 'Blocchi in linea',
       remove: 'Rimuovi {{label}}'
@@ -139,7 +139,7 @@ export const i18n = {
       create: '{{label}}を作成する',
       edit: '{{label}}を編集する',
       label: 'インラインブロック',
-      remove: '{{ラベル}}を削除します'
+      remove: '{{label}}を削除します'
     },
     label: 'ブロック'
   },
@@ -182,9 +182,9 @@ export const i18n = {
   pl: {
     inlineBlocks: {
       create: 'Utwórz {{label}}',
-      edit: 'Edytuj {{etykieta}}',
+      edit: 'Edytuj {{label}}',
       label: 'Blokowanie w linii',
-      remove: 'Usuń {{etykieta}}'
+      remove: 'Usuń {{label}}'
     },
     label: 'Bloki'
   },
@@ -199,10 +199,10 @@ export const i18n = {
   },
   ro: {
     inlineBlocks: {
-      create: 'Creează {{eticheta}}',
-      edit: 'Editați {{eticheta}}',
+      create: 'Creează {{label}}',
+      edit: 'Editați {{label}}',
       label: 'Blocuri in linie',
-      remove: 'Ștergeți {{etichetă}}'
+      remove: 'Ștergeți {{label}}'
     },
     label: 'Blocuri'
   },
@@ -220,22 +220,22 @@ export const i18n = {
       create: 'Kreiraj {{label}}',
       edit: 'Izmeni {{label}}',
       label: 'Umetnuti blokovi',
-      remove: 'Ukloni {{oznaka}}'
+      remove: 'Ukloni {{label}}'
     },
     label: 'Blokovi'
   },
   ru: {
     inlineBlocks: {
       create: 'Создать {{label}}',
-      edit: 'Изменить {{метка}}',
+      edit: 'Изменить {{label}}',
       label: 'Встроенные блоки',
-      remove: 'Удалить {{метка}}'
+      remove: 'Удалить {{label}}'
     },
     label: 'Блоки'
   },
   sk: {
     inlineBlocks: {
-      create: 'Vytvorte {{označenie}}',
+      create: 'Vytvorte {{label}}',
       edit: 'Upraviť {{label}}',
       label: 'Inline bloky',
       remove: 'Odstráňte {{label}}'
@@ -244,7 +244,7 @@ export const i18n = {
   },
   sl: {
     inlineBlocks: {
-      create: 'Ustvari {{oznaka}}',
+      create: 'Ustvari {{label}}',
       edit: 'Uredi {{label}}',
       label: 'Vrstični bloki',
       remove: 'Odstrani {{label}}'
@@ -254,9 +254,9 @@ export const i18n = {
   sv: {
     inlineBlocks: {
       create: 'Skapa {{label}}',
-      edit: 'Redigera {{etikett}}',
+      edit: 'Redigera {{label}}',
       label: 'Inline-blockar',
-      remove: 'Ta bort {{etikett}}'
+      remove: 'Ta bort {{label}}'
     },
     label: 'Block'
   },
@@ -280,10 +280,10 @@ export const i18n = {
   },
   tr: {
     inlineBlocks: {
-      create: '{{Etiketi}} oluşturun',
-      edit: "{{Etiket}}'i düzenleyin",
+      create: '{{label}} oluşturun',
+      edit: "{{label}}'i düzenleyin",
       label: 'Satır İçi Bloklar',
-      remove: '{{Etiketi}} kaldırın'
+      remove: '{{label}} kaldırın'
     },
     label: 'Bloklar'
   },
@@ -292,16 +292,16 @@ export const i18n = {
       create: 'Створити {{label}}',
       edit: 'Редагувати {{label}}',
       label: 'Вбудовані блоки',
-      remove: 'Видалити {{мітку}}'
+      remove: 'Видалити {{label}}'
     },
     label: 'Блоки'
   },
   vi: {
     inlineBlocks: {
       create: 'Tạo {{label}}',
-      edit: 'Chỉnh sửa {{nhãn}}',
+      edit: 'Chỉnh sửa {{label}}',
       label: 'Khối nội tuyến',
-      remove: 'Xóa {{nhãn}}'
+      remove: 'Xóa {{label}}'
     },
     label: 'Khối'
   },