@strapi/content-manager 0.0.0-next.daa3d4c4db6322f58233f0ccb757d80dbd1b48e9 → 0.0.0-next.df0d99415fc543d9747f3946fd7d1a4c39052b95

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksEditor.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  snippets?: string[];\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  return { key, incrementSlateUpdatesCount: () => (slateUpdatesCount.current += 1) };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const handleSlateChange = (state: Descendant[]) => {\n      const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n      if (isAstChange) {\n        incrementSlateUpdatesCount();\n\n        onChange(name, state as Schema.Attribute.BlocksValue);\n      }\n    };\n\n    const blocks: BlocksStore = {\n      ...paragraphBlocks,\n      ...headingBlocks,\n      ...listBlocks,\n      ...linkBlocks,\n      ...imageBlocks,\n      ...quoteBlocks,\n      ...codeBlocks,\n    };\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","handleSlateChange","isAstChange","operations","some","op","type","blocks","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","children","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}
+{"version":3,"file":"BlocksEditor.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor, Transforms } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  snippets?: string[];\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  const incrementSlateUpdatesCount = React.useCallback(() => {\n    slateUpdatesCount.current += 1;\n  }, []);\n\n  return { key, incrementSlateUpdatesCount };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n    const handleSlateChange = React.useCallback(\n      (state: Descendant[]) => {\n        const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n        if (isAstChange) {\n          /**\n           * Slate handles the state of the editor internally. We just need to keep Strapi's form\n           * state in sync with it in order to make sure that things like the \"modified\" state\n           * isn't broken. Updating the whole state on every change is very expensive however,\n           * so we debounce calls to onChange to mitigate input lag.\n           */\n          if (debounceTimeout.current) {\n            clearTimeout(debounceTimeout.current);\n          }\n\n          // Set a new debounce timeout\n          debounceTimeout.current = setTimeout(() => {\n            incrementSlateUpdatesCount();\n            onChange(name, state as Schema.Attribute.BlocksValue);\n            debounceTimeout.current = null;\n          }, 300);\n        }\n      },\n      [editor.operations, incrementSlateUpdatesCount, name, onChange]\n    );\n\n    // Clean up the timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        if (debounceTimeout.current) {\n          clearTimeout(debounceTimeout.current);\n        }\n      };\n    }, []);\n\n    // Ensure the editor is in sync after discard\n    React.useEffect(() => {\n      // Compare the field value with the editor state to check for a stale selection\n      if (value && JSON.stringify(editor.children) !== JSON.stringify(value)) {\n        // When there is a diff, unset selection to avoid an invalid state\n        Transforms.deselect(editor);\n      }\n    }, [editor, value]);\n\n    const blocks = React.useMemo(\n      () => ({\n        ...paragraphBlocks,\n        ...headingBlocks,\n        ...listBlocks,\n        ...linkBlocks,\n        ...imageBlocks,\n        ...quoteBlocks,\n        ...codeBlocks,\n      }),\n      []\n    ) satisfies BlocksStore;\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","useCallback","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","debounceTimeout","handleSlateChange","isAstChange","operations","some","op","type","clearTimeout","setTimeout","JSON","stringify","children","Transforms","deselect","blocks","useMemo","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAMA,iBAAoB,GAAA;AACxB,IAAA,WAAA;AACA,IAAA,aAAA;AACA,IAAA,aAAA;AACA,IAAA,eAAA;AACA,IAAA,cAAA;AACA,IAAA,cAAA;AACA,IAAA,aAAA;AACA,IAAA,cAAA;AACA,IAAA,gBAAA;AACA,IAAA,OAAA;AACA,IAAA,OAAA;AACA,IAAA;AACD,CAAA;AAID,MAAMC,qBAAqB,CAACC,GAAAA,GAAAA;AAC1B,IAAA,OAAO,OAAOA,GAAAA,KAAQ,QAAYF,IAAAA,iBAAAA,CAAkBG,QAAQ,CAACD,GAAAA,CAAAA;AAC/D;AAiBA,MAAM,CAACE,oBAAAA,EAAsBC,6BAA8B,CAAA,GACzDC,yBAAwC,CAAA,cAAA;AAE1C,SAASC,uBACPC,YAAoB,EAAA;AAEpB,IAAA,MAAMC,OAAUJ,GAAAA,6BAAAA,CAA8BG,YAAc,EAAA,CAACE,KAAUA,GAAAA,KAAAA,CAAAA;AACvE,IAAA,MAAMC,MAASC,GAAAA,mBAAAA,EAAAA;IAEf,OAAO;AACL,QAAA,GAAGH,OAAO;AACVE,QAAAA;AACF,KAAA;AACF;AAEA;;AAEkG,qGAElG,MAAME,aAAAA,GAAgBC,uBAAOC,CAAAA,oBAAAA,CAAQ;cACvB,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;AACvD,CAAC;AAED;;;;;;;IAQA,SAASC,YAAYC,KAAoC,EAAA;;IAKvD,MAAMC,iBAAAA,GAAoBC,gBAAMC,CAAAA,MAAM,CAAC,CAAA,CAAA;;IAEvC,MAAMC,iBAAAA,GAAoBF,gBAAMC,CAAAA,MAAM,CAAC,CAAA,CAAA;;AAEvC,IAAA,MAAM,CAACrB,GAAKuB,EAAAA,MAAAA,CAAO,GAAGH,gBAAAA,CAAMI,QAAQ,CAAC,CAAA,CAAA;AAErCJ,IAAAA,gBAAAA,CAAMK,SAAS,CAAC,IAAA;AACdH,QAAAA,iBAAAA,CAAkBI,OAAO,IAAI,CAAA;;AAG7B,QAAA,IAAIJ,iBAAkBI,CAAAA,OAAO,KAAKP,iBAAAA,CAAkBO,OAAO,EAAE;;;YAG3DH,MAAO,CAAA,CAACI,cAAgBA,WAAc,GAAA,CAAA,CAAA;;YAGtCR,iBAAkBO,CAAAA,OAAO,GAAGJ,iBAAAA,CAAkBI,OAAO;AACvD;KACC,EAAA;AAACR,QAAAA;AAAM,KAAA,CAAA;IAEV,MAAMU,0BAAAA,GAA6BR,gBAAMS,CAAAA,WAAW,CAAC,IAAA;AACnDV,QAAAA,iBAAAA,CAAkBO,OAAO,IAAI,CAAA;AAC/B,KAAA,EAAG,EAAE,CAAA;IAEL,OAAO;AAAE1B,QAAAA,GAAAA;AAAK4B,QAAAA;AAA2B,KAAA;AAC3C;AAEA,MAAME,IACJ,GAAA,CAAC,GAAGC,GAAAA,GACJ,CAACb,KAAAA,GACCa,GAAIC,CAAAA,MAAM,CAAS,CAACC,IAAMC,EAAAA,EAAAA,GAAOA,GAAGD,IAAOf,CAAAA,EAAAA,KAAAA,CAAAA;AAS/C,MAAMiB,6BAAef,gBAAMgB,CAAAA,UAAU,CACnC,CAAC,EAAEC,WAAW,KAAK,EAAEC,IAAI,EAAEC,QAAQ,EAAErB,KAAK,EAAEsB,KAAK,EAAE,GAAGC,cAAc,EAAEC,YAAAA,GAAAA;IACpE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACnC,MAAAA,CAAO,GAAGW,gBAAAA,CAAMI,QAAQ,CAAC,IAC9BM,IAAAA,CAAKe,wBAAaC,EAAAA,qBAAAA,EAAYC,iCAAkBC,EAAAA,oBAAAA,EAAWC,mBAAWC,CAAAA,CAAAA,kBAAAA,EAAAA,CAAAA,CAAAA;AAExE,IAAA,MAAM,CAACC,QAAUC,EAAAA,WAAAA,CAAY,GAAGhC,gBAAAA,CAAMI,QAAQ,CAAC,EAAA,CAAA;IAC/C,MAAM6B,iBAAAA,GAAoBjC,iBAAMkC,KAAK,EAAA;IACrC,MAAM,CAACC,cAAgBC,EAAAA,kBAAAA,CAAmB,GAAGpC,gBAAAA,CAAMqC,UAAU,CAAC,CAACxB,IAAS,GAAA,CAACA,IAAM,EAAA,KAAA,CAAA;AAE/E;;;;AAIC,QACDb,gBAAMsC,CAAAA,mBAAmB,CACvBhB,YAAAA,EACA,KAAO;AACLiB,YAAAA,KAAAA,CAAAA,GAAAA;AACEC,gBAAAA,sBAAAA,CAAYD,KAAK,CAAClD,MAAAA,CAAAA;AACpB;AACF,SAAA,CACA,EAAA;AAACA,QAAAA;AAAO,KAAA,CAAA;AAGV,IAAA,MAAM,EAAET,GAAG,EAAE4B,0BAA0B,EAAE,GAAGX,WAAYC,CAAAA,KAAAA,CAAAA;IAExD,MAAM2C,eAAAA,GAAkBzC,gBAAMC,CAAAA,MAAM,CAAwB,IAAA,CAAA;AAE5D,IAAA,MAAMyC,iBAAoB1C,GAAAA,gBAAAA,CAAMS,WAAW,CACzC,CAACrB,KAAAA,GAAAA;QACC,MAAMuD,WAAAA,GAActD,MAAOuD,CAAAA,UAAU,CAACC,IAAI,CAAC,CAACC,EAAAA,GAAOA,EAAGC,CAAAA,IAAI,KAAK,eAAA,CAAA;AAE/D,QAAA,IAAIJ,WAAa,EAAA;AACf;;;;;cAMA,IAAIF,eAAgBnC,CAAAA,OAAO,EAAE;AAC3B0C,gBAAAA,YAAAA,CAAaP,gBAAgBnC,OAAO,CAAA;AACtC;;YAGAmC,eAAgBnC,CAAAA,OAAO,GAAG2C,UAAW,CAAA,IAAA;AACnCzC,gBAAAA,0BAAAA,EAAAA;AACAW,gBAAAA,QAAAA,CAASD,IAAM9B,EAAAA,KAAAA,CAAAA;AACfqD,gBAAAA,eAAAA,CAAgBnC,OAAO,GAAG,IAAA;aACzB,EAAA,GAAA,CAAA;AACL;KAEF,EAAA;AAACjB,QAAAA,MAAAA,CAAOuD,UAAU;AAAEpC,QAAAA,0BAAAA;AAA4BU,QAAAA,IAAAA;AAAMC,QAAAA;AAAS,KAAA,CAAA;;AAIjEnB,IAAAA,gBAAAA,CAAMK,SAAS,CAAC,IAAA;QACd,OAAO,IAAA;YACL,IAAIoC,eAAAA,CAAgBnC,OAAO,EAAE;AAC3B0C,gBAAAA,YAAAA,CAAaP,gBAAgBnC,OAAO,CAAA;AACtC;AACF,SAAA;AACF,KAAA,EAAG,EAAE,CAAA;;AAGLN,IAAAA,gBAAAA,CAAMK,SAAS,CAAC,IAAA;;QAEd,IAAIP,KAAAA,IAASoD,IAAKC,CAAAA,SAAS,CAAC9D,MAAAA,CAAO+D,QAAQ,CAAMF,KAAAA,IAAAA,CAAKC,SAAS,CAACrD,KAAQ,CAAA,EAAA;;AAEtEuD,YAAAA,gBAAAA,CAAWC,QAAQ,CAACjE,MAAAA,CAAAA;AACtB;KACC,EAAA;AAACA,QAAAA,MAAAA;AAAQS,QAAAA;AAAM,KAAA,CAAA;AAElB,IAAA,MAAMyD,MAASvD,GAAAA,gBAAAA,CAAMwD,OAAO,CAC1B,KAAO;AACL,YAAA,GAAGC,yBAAe;AAClB,YAAA,GAAGC,qBAAa;AAChB,YAAA,GAAGC,eAAU;AACb,YAAA,GAAGC,eAAU;AACb,YAAA,GAAGC,iBAAW;AACd,YAAA,GAAGC,iBAAW;AACd,YAAA,GAAGC;AACL,SAAA,GACA,EAAE,CAAA;IAGJ,qBACEC,eAAA,CAAAC,mBAAA,EAAA;;0BACEC,cAACC,CAAAA,2BAAAA,EAAAA;gBAAeC,EAAInC,EAAAA,iBAAAA;0BACjBV,aAAc,CAAA;AACb6C,oBAAAA,EAAAA,EAAIC,2BAAe,CAAA,mCAAA,CAAA;oBACnBC,cAAgB,EAAA,CAAC,0FAA0F;AAC7G,iBAAA;;0BAEFJ,cAACC,CAAAA,2BAAAA,EAAAA;gBAAeI,WAAU,EAAA,WAAA;AAAaxC,gBAAAA,QAAAA,EAAAA;;0BACvCmC,cAACM,CAAAA,gBAAAA,EAAAA;gBACCnF,MAAQA,EAAAA,MAAAA;AACRoF,gBAAAA,YAAAA,EAAc3E,KAAS,IAAA;AAAC,oBAAA;wBAAEiD,IAAM,EAAA,WAAA;wBAAaK,QAAU,EAAA;AAAC,4BAAA;gCAAEL,IAAM,EAAA,MAAA;gCAAQ2B,IAAM,EAAA;AAAG;AAAE;AAAC;AAAE,iBAAA;gBACtFvD,QAAUuB,EAAAA,iBAAAA;AAGV,gBAAA,QAAA,gBAAAwB,cAACpF,CAAAA,oBAAAA,EAAAA;oBACCyE,MAAQA,EAAAA,MAAAA;oBACRoB,SAAWA,EAAAA,mBAAAA;oBACX1D,QAAUA,EAAAA,QAAAA;oBACVC,IAAMA,EAAAA,IAAAA;oBACNc,WAAaA,EAAAA,WAAAA;oBACbG,cAAgBA,EAAAA,cAAAA;AAEhB,oBAAA,QAAA,gBAAA6B,eAACY,CAAAA,yBAAAA,EAAAA;wBACCxD,KAAOA,EAAAA,KAAAA;wBACPH,QAAUA,EAAAA,QAAAA;wBACV4D,cAAgBzC,EAAAA,kBAAAA;wBAChBH,iBAAmBA,EAAAA,iBAAAA;;0CAEnBiC,cAACY,CAAAA,2BAAAA,EAAAA,EAAAA,CAAAA;0CACDZ,cAAC3E,CAAAA,aAAAA,EAAAA;gCAAcwF,KAAM,EAAA;;0CACrBb,cAACc,CAAAA,2BAAAA,EAAAA;AAAe,gCAAA,GAAG3D;;AAClB,4BAAA,CAACc,gCACA+B,cAACe,CAAAA,uBAAAA,EAAAA;gCACCC,QAAS,EAAA,UAAA;gCACTC,MAAO,EAAA,QAAA;gCACPC,KAAM,EAAA,QAAA;gCACNC,MAAO,EAAA,cAAA;AACPC,gCAAAA,KAAAA,EAAO/D,aAAc,CAAA;AACnB6C,oCAAAA,EAAAA,EAAIC,2BAAe,CAAA,0BAAA,CAAA;oCACnBC,cAAgB,EAAA;AAClB,iCAAA,CAAA;gCACAiB,OAASnD,EAAAA,kBAAAA;AAET,gCAAA,QAAA,gBAAA8B,cAACsB,CAAAA,YAAAA,EAAAA,EAAAA;;;;;AA/BJ5G,aAAAA,EAAAA,GAAAA;;;AAuCb,CAAA;;;;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs

@@ -4,7 +4,7 @@ import { createContext } from '@strapi/admin/strapi-admin';
 import { Divider, VisuallyHidden, IconButton } from '@strapi/design-system';
 import { Expand } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { createEditor } from 'slate';
+import { createEditor, Transforms } from 'slate';
 import { withHistory } from 'slate-history';
 import { ReactEditor, Slate, useSlate, withReact } from 'slate-react';
 import { styled } from 'styled-components';
@@ -82,9 +82,12 @@ function useBlocksEditorContext(consumerName) {
     }, [
         value
     ]);
+    const incrementSlateUpdatesCount = React.useCallback(()=>{
+        slateUpdatesCount.current += 1;
+    }, []);
     return {
         key,
-        incrementSlateUpdatesCount: ()=>slateUpdatesCount.current += 1
+        incrementSlateUpdatesCount
     };
 }
 const pipe = (...fns)=>(value)=>fns.reduce((prev, fn)=>fn(prev), value);
@@ -106,22 +109,59 @@ const BlocksEditor = /*#__PURE__*/ React.forwardRef(({ disabled = false, name, o
         editor
     ]);
     const { key, incrementSlateUpdatesCount } = useResetKey(value);
-    const handleSlateChange = (state)=>{
+    const debounceTimeout = React.useRef(null);
+    const handleSlateChange = React.useCallback((state)=>{
         const isAstChange = editor.operations.some((op)=>op.type !== 'set_selection');
         if (isAstChange) {
-            incrementSlateUpdatesCount();
-            onChange(name, state);
+            /**
+           * Slate handles the state of the editor internally. We just need to keep Strapi's form
+           * state in sync with it in order to make sure that things like the "modified" state
+           * isn't broken. Updating the whole state on every change is very expensive however,
+           * so we debounce calls to onChange to mitigate input lag.
+           */ if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+            // Set a new debounce timeout
+            debounceTimeout.current = setTimeout(()=>{
+                incrementSlateUpdatesCount();
+                onChange(name, state);
+                debounceTimeout.current = null;
+            }, 300);
         }
-    };
-    const blocks = {
-        ...paragraphBlocks,
-        ...headingBlocks,
-        ...listBlocks,
-        ...linkBlocks,
-        ...imageBlocks,
-        ...quoteBlocks,
-        ...codeBlocks
-    };
+    }, [
+        editor.operations,
+        incrementSlateUpdatesCount,
+        name,
+        onChange
+    ]);
+    // Clean up the timeout on unmount
+    React.useEffect(()=>{
+        return ()=>{
+            if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+        };
+    }, []);
+    // Ensure the editor is in sync after discard
+    React.useEffect(()=>{
+        // Compare the field value with the editor state to check for a stale selection
+        if (value && JSON.stringify(editor.children) !== JSON.stringify(value)) {
+            // When there is a diff, unset selection to avoid an invalid state
+            Transforms.deselect(editor);
+        }
+    }, [
+        editor,
+        value
+    ]);
+    const blocks = React.useMemo(()=>({
+            ...paragraphBlocks,
+            ...headingBlocks,
+            ...listBlocks,
+            ...linkBlocks,
+            ...imageBlocks,
+            ...quoteBlocks,
+            ...codeBlocks
+        }), []);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(VisuallyHidden, {

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  snippets?: string[];\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  return { key, incrementSlateUpdatesCount: () => (slateUpdatesCount.current += 1) };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const handleSlateChange = (state: Descendant[]) => {\n      const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n      if (isAstChange) {\n        incrementSlateUpdatesCount();\n\n        onChange(name, state as Schema.Attribute.BlocksValue);\n      }\n    };\n\n    const blocks: BlocksStore = {\n      ...paragraphBlocks,\n      ...headingBlocks,\n      ...listBlocks,\n      ...linkBlocks,\n      ...imageBlocks,\n      ...quoteBlocks,\n      ...codeBlocks,\n    };\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","handleSlateChange","isAstChange","operations","some","op","type","blocks","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","children","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}
+{"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor, Transforms } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  snippets?: string[];\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  const incrementSlateUpdatesCount = React.useCallback(() => {\n    slateUpdatesCount.current += 1;\n  }, []);\n\n  return { key, incrementSlateUpdatesCount };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n    const handleSlateChange = React.useCallback(\n      (state: Descendant[]) => {\n        const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n        if (isAstChange) {\n          /**\n           * Slate handles the state of the editor internally. We just need to keep Strapi's form\n           * state in sync with it in order to make sure that things like the \"modified\" state\n           * isn't broken. Updating the whole state on every change is very expensive however,\n           * so we debounce calls to onChange to mitigate input lag.\n           */\n          if (debounceTimeout.current) {\n            clearTimeout(debounceTimeout.current);\n          }\n\n          // Set a new debounce timeout\n          debounceTimeout.current = setTimeout(() => {\n            incrementSlateUpdatesCount();\n            onChange(name, state as Schema.Attribute.BlocksValue);\n            debounceTimeout.current = null;\n          }, 300);\n        }\n      },\n      [editor.operations, incrementSlateUpdatesCount, name, onChange]\n    );\n\n    // Clean up the timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        if (debounceTimeout.current) {\n          clearTimeout(debounceTimeout.current);\n        }\n      };\n    }, []);\n\n    // Ensure the editor is in sync after discard\n    React.useEffect(() => {\n      // Compare the field value with the editor state to check for a stale selection\n      if (value && JSON.stringify(editor.children) !== JSON.stringify(value)) {\n        // When there is a diff, unset selection to avoid an invalid state\n        Transforms.deselect(editor);\n      }\n    }, [editor, value]);\n\n    const blocks = React.useMemo(\n      () => ({\n        ...paragraphBlocks,\n        ...headingBlocks,\n        ...listBlocks,\n        ...linkBlocks,\n        ...imageBlocks,\n        ...quoteBlocks,\n        ...codeBlocks,\n      }),\n      []\n    ) satisfies BlocksStore;\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","useCallback","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","debounceTimeout","handleSlateChange","isAstChange","operations","some","op","type","clearTimeout","setTimeout","JSON","stringify","children","Transforms","deselect","blocks","useMemo","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksToolbar.js

@@ -3,7 +3,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Toolbar = require('@radix-ui/react-toolbar');
-require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
@@ -45,6 +44,8 @@ const ToolbarSeparator = styledComponents.styled(Toolbar__namespace.Separator)`
   background: ${({ theme })=>theme.colors.neutral150};
   width: 1px;
   height: 2.4rem;
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
 `;
 const FlexButton = styledComponents.styled(designSystem.Flex)`
   // Inherit the not-allowed cursor from ToolbarWrapper when disabled
@@ -294,7 +295,7 @@ const BlockOption = ({ value, icon: Icon, label, blockSelected })=>{
     const isSelected = value === blockSelected;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
         startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icon, {
-            fill: isSelected ? 'primary600' : 'neutral600'
+            fill: isSelected ? 'primary600' : 'neutral500'
         }),
         value: value,
         children: formatMessage(label)
@@ -304,8 +305,8 @@ const isListNode = (node)=>{
     return slate.Node.isNode(node) && !slate.Editor.isEditor(node) && node.type === 'list';
 };
 const ListButton = ({ block, format, location = 'toolbar' })=>{
-    const { editor, disabled, blocks } = BlocksEditor.useBlocksEditorContext('ListButton');
     const { formatMessage } = reactIntl.useIntl();
+    const { editor, disabled, blocks } = BlocksEditor.useBlocksEditorContext('ListButton');
     const isListActive = ()=>{
         if (!editor.selection) return false;
         // Get the parent list at selection anchor node
@@ -383,14 +384,12 @@ const ListButton = ({ block, format, location = 'toolbar' })=>{
     };
     if (location === 'menu') {
         const Icon = block.icon;
-        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+        return /*#__PURE__*/ jsxRuntime.jsx(StyledMenuItem, {
+            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
             onSelect: ()=>toggleList(format),
             isActive: isListActive(),
             disabled: isListDisabled(),
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
-                formatMessage(block.label)
-            ]
+            children: formatMessage(block.label)
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
@@ -450,14 +449,12 @@ const LinkButton = ({ disabled, location = 'toolbar' })=>{
         defaultMessage: 'Link'
     };
     if (location === 'menu') {
-        return /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+        return /*#__PURE__*/ jsxRuntime.jsx(StyledMenuItem, {
+            startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
             onSelect: addLink,
             isActive: isLinkActive(),
             disabled: isLinkDisabled(),
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {}),
-                formatMessage(label)
-            ]
+            children: formatMessage(label)
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsx(ToolbarButton, {
@@ -470,25 +467,13 @@ const LinkButton = ({ disabled, location = 'toolbar' })=>{
     });
 };
 const StyledMenuItem = styledComponents.styled(designSystem.Menu.Item)`
-  &:hover {
-    background-color: ${({ theme })=>theme.colors.primary100};
-  }
-
   ${(props)=>props.isActive && styledComponents.css`
-      font-weight: bold;
-      background-color: ${({ theme })=>theme.colors.primary100};
       color: ${({ theme })=>theme.colors.primary600};
-      font-weight: bold;
+      font-weight: 600;
     `}
 
-  > span {
-    display: inline-flex;
-    gap: ${({ theme })=>theme.spaces[2]};
-    align-items: center;
-  }
-
   svg {
-    fill: ${({ theme, isActive })=>isActive ? theme.colors.primary600 : theme.colors.neutral600};
+    fill: ${({ theme, isActive })=>isActive ? theme.colors.primary600 : theme.colors.neutral500};
   }
 `;
 const BlocksToolbar = ()=>{
@@ -505,6 +490,7 @@ const BlocksToolbar = ()=>{
             return false;
         }
         const selectedNode = editor.children[editor.selection.anchor.path[0]];
+        if (!selectedNode) return true;
         if ([
             'image',
             'code'
@@ -534,13 +520,11 @@ const BlocksToolbar = ()=>{
                     handleClick: handleSelect,
                     disabled: isButtonDisabled
                 }, name),
-                menu: /*#__PURE__*/ jsxRuntime.jsxs(StyledMenuItem, {
+                menu: /*#__PURE__*/ jsxRuntime.jsx(StyledMenuItem, {
+                    startIcon: /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
                     onSelect: handleSelect,
                     isActive: isActive,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(Icon, {}),
-                        formatMessage(modifier.label)
-                    ]
+                    children: formatMessage(modifier.label)
                 }),
                 key: `modifier.${name}`
             };
@@ -560,9 +544,12 @@ const BlocksToolbar = ()=>{
             // List buttons can only be rendered together when in the toolbar
             toolbar: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 direction: "row",
-                gap: 1,
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(ToolbarSeparator, {
+                        style: {
+                            marginLeft: '0.4rem'
+                        }
+                    }),
                     /*#__PURE__*/ jsxRuntime.jsx(Toolbar__namespace.ToggleGroup, {
                         type: "single",
                         asChild: true,
@@ -606,7 +593,6 @@ const BlocksToolbar = ()=>{
         "aria-disabled": disabled,
         asChild: true,
         children: /*#__PURE__*/ jsxRuntime.jsxs(ToolbarWrapper, {
-            gap: 2,
             padding: 2,
             width: "100%",
             children: [