@strapi/content-manager 5.37.1 → 5.38.0

package/dist/admin/pages/EditView/components/EditorToolbarObserver.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbarObserver.mjs","sources":["../../../../../admin/src/pages/EditView/components/EditorToolbarObserver.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useElementOnScreen } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton, Menu } from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * ObservedToolbarComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ObservedToolbarComponentProps {\n  index: number;\n  lastVisibleIndex: number;\n  setLastVisibleIndex: React.Dispatch<React.SetStateAction<number>>;\n  rootRef: React.RefObject<HTMLElement>;\n  children: React.ReactNode;\n}\n\nconst ObservedToolbarComponent = ({\n  index,\n  lastVisibleIndex,\n  setLastVisibleIndex,\n  rootRef,\n  children,\n}: ObservedToolbarComponentProps) => {\n  const isVisible = index <= lastVisibleIndex;\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(\n    (isVisible) => {\n      /**\n       * It's the MoreMenu's job to make an item not visible when there's not room for it.\n       * But we need to react here to the element becoming visible again.\n       */\n      if (isVisible) {\n        setLastVisibleIndex((prev) => Math.max(prev, index));\n      }\n    },\n    { threshold: 1, root: rootRef.current }\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        /**\n         * Use visibility so that the element occupies the space if requires even when there's not\n         * enough room for it to be visible. The empty reserved space will be clipped by the\n         * overflow:hidden rule on the parent, so it doesn't affect the UI.\n         * This way we can keep observing its visiblity and react to browser resize events.\n         */\n        visibility: isVisible ? 'visible' : 'hidden',\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EditorToolbarObserver\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface ObservedComponent {\n  toolbar: React.ReactNode;\n  menu: React.ReactNode;\n  key: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * MenuTriggerWrapper\n * -----------------------------------------------------------------------------------------------*/\n/**\n * The menu trigger is rendered by the observer, after the last visible toolbar item.\n * We use a wrapper with a ::before pseudo-element to render a vertical separator that\n * always appears immediately before the \"More\" menu button, regardless of which items\n * are visible or moved into the overflow menu.\n */\nconst MenuTriggerWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n\n  &::before {\n    content: '';\n    background: ${({ theme }) => theme.colors.neutral150};\n    width: 1px;\n    height: 2.4rem;\n    margin-left: ${({ theme }) => theme.spaces[1]};\n    margin-right: ${({ theme }) => theme.spaces[1]};\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      margin-left: ${({ theme }) => theme.spaces[2]};\n      margin-right: ${({ theme }) => theme.spaces[2]};\n    }\n  }\n\n  [data-hide-toolbar-separator='true'] &::before {\n    display: none;\n  }\n`;\n\nexport const EditorToolbarObserver = ({\n  observedComponents,\n  menuTriggerVariant = 'ghost',\n}: {\n  observedComponents: ObservedComponent[];\n  menuTriggerVariant?: Menu.TriggerProps['variant'];\n}) => {\n  const { formatMessage } = useIntl();\n  const toolbarRef = React.useRef<HTMLElement>(null);\n\n  const [lastVisibleIndex, setLastVisibleIndex] = React.useState<number>(\n    observedComponents.length - 1\n  );\n  const hasHiddenItems = lastVisibleIndex < observedComponents.length - 1;\n  const menuIndex = lastVisibleIndex + 1;\n\n  const [open, setOpen] = React.useState(false);\n  const isMenuOpenWithContent = open && hasHiddenItems;\n  const menuTriggerRef = useElementOnScreen<HTMLButtonElement>(\n    (isVisible) => {\n      // We only react to the menu becoming invisible. When that happens, we hide the last item.\n      if (!isVisible) {\n        /**\n         * If there's no room for any item, the index can be -1.\n         * This is intentional, in that case only the more menu will be visible.\n         **/\n        setLastVisibleIndex((prev) => prev - 1);\n        // Maintain the menu state if it has content\n        setOpen(isMenuOpenWithContent);\n      }\n    },\n    { threshold: 1, root: toolbarRef.current }\n  );\n\n  return observedComponents\n    .map((component, index) => {\n      return (\n        <ObservedToolbarComponent\n          key={component.key}\n          index={index}\n          lastVisibleIndex={lastVisibleIndex}\n          setLastVisibleIndex={setLastVisibleIndex}\n          rootRef={toolbarRef}\n        >\n          {component.toolbar}\n        </ObservedToolbarComponent>\n      );\n    })\n    .toSpliced(\n      menuIndex,\n      0,\n      <MenuTriggerWrapper\n        key=\"more-menu-wrapper\"\n        style={{ visibility: hasHiddenItems ? 'visible' : 'hidden' }}\n      >\n        <Menu.Root defaultOpen={false} open={isMenuOpenWithContent} onOpenChange={setOpen}>\n          <Menu.Trigger\n            paddingLeft={0}\n            paddingRight={0}\n            ref={menuTriggerRef}\n            variant={menuTriggerVariant}\n            label={formatMessage({ id: 'global.more', defaultMessage: 'More' })}\n            tag={IconButton}\n            icon={<More />}\n          />\n          <Menu.Content\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            maxHeight=\"100%\"\n            minWidth=\"256px\"\n            popoverPlacement=\"bottom-end\"\n            zIndex={2}\n          >\n            {observedComponents.slice(menuIndex).map((component) => (\n              <React.Fragment key={component.key}>{component.menu}</React.Fragment>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </MenuTriggerWrapper>\n    );\n};\n"],"names":["ObservedToolbarComponent","index","lastVisibleIndex","setLastVisibleIndex","rootRef","children","isVisible","containerRef","useElementOnScreen","prev","Math","max","threshold","root","current","_jsx","div","ref","style","visibility","MenuTriggerWrapper","styled","Box","theme","colors","neutral150","spaces","breakpoints","medium","EditorToolbarObserver","observedComponents","menuTriggerVariant","formatMessage","useIntl","toolbarRef","React","useRef","useState","length","hasHiddenItems","menuIndex","open","setOpen","isMenuOpenWithContent","menuTriggerRef","map","component","toolbar","key","toSpliced","_jsxs","Menu","Root","defaultOpen","onOpenChange","Trigger","paddingLeft","paddingRight","variant","label","id","defaultMessage","tag","IconButton","icon","More","Content","onCloseAutoFocus","e","preventDefault","maxHeight","minWidth","popoverPlacement","zIndex","slice","Fragment","menu"],"mappings":"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"}
+{"version":3,"file":"EditorToolbarObserver.mjs","sources":["../../../../../admin/src/pages/EditView/components/EditorToolbarObserver.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useElementOnScreen } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton, Menu } from '@strapi/design-system';\nimport { More } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\n/* -------------------------------------------------------------------------------------------------\n * ObservedToolbarComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ObservedToolbarComponentProps {\n  index: number;\n  lastVisibleIndex: number;\n  setLastVisibleIndex: React.Dispatch<React.SetStateAction<number>>;\n  rootRef: React.RefObject<HTMLElement>;\n  children: React.ReactNode;\n}\n\nconst ObservedToolbarComponent = ({\n  index,\n  lastVisibleIndex,\n  setLastVisibleIndex,\n  rootRef,\n  children,\n}: ObservedToolbarComponentProps) => {\n  const isVisible = index <= lastVisibleIndex;\n\n  const containerRef = useElementOnScreen<HTMLDivElement>(\n    (isVisible) => {\n      /**\n       * It's the MoreMenu's job to make an item not visible when there's not room for it.\n       * But we need to react here to the element becoming visible again.\n       */\n      if (isVisible) {\n        setLastVisibleIndex((prev) => Math.max(prev, index));\n      }\n    },\n    { threshold: 1, root: rootRef.current }\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        /**\n         * Use visibility so that the element occupies the space if requires even when there's not\n         * enough room for it to be visible. The empty reserved space will be clipped by the\n         * overflow:hidden rule on the parent, so it doesn't affect the UI.\n         * This way we can keep observing its visiblity and react to browser resize events.\n         */\n        visibility: isVisible ? 'visible' : 'hidden',\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EditorToolbarObserver\n * -----------------------------------------------------------------------------------------------*/\n\nexport interface ObservedComponent {\n  toolbar: React.ReactNode;\n  menu: React.ReactNode;\n  key: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * MenuTriggerWrapper\n * -----------------------------------------------------------------------------------------------*/\n/**\n * The menu trigger is rendered by the observer, after the last visible toolbar item.\n * We use a wrapper with a ::before pseudo-element to render a vertical separator that\n * always appears immediately before the \"More\" menu button, regardless of which items\n * are visible or moved into the overflow menu.\n */\nconst MenuTriggerWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n\n  &::before {\n    content: '';\n    background: ${({ theme }) => theme.colors.neutral150};\n    width: 1px;\n    height: 2.4rem;\n    margin-left: ${({ theme }) => theme.spaces[1]};\n    margin-right: ${({ theme }) => theme.spaces[1]};\n\n    ${({ theme }) => theme.breakpoints.medium} {\n      margin-left: ${({ theme }) => theme.spaces[2]};\n      margin-right: ${({ theme }) => theme.spaces[2]};\n    }\n  }\n\n  [data-hide-toolbar-separator='true'] &::before {\n    display: none;\n  }\n`;\n\nexport const EditorToolbarObserver = ({\n  observedComponents,\n  menuTriggerVariant = 'ghost',\n}: {\n  observedComponents: ObservedComponent[];\n  menuTriggerVariant?: Menu.TriggerProps['variant'];\n}) => {\n  const { formatMessage } = useIntl();\n  const toolbarRef = React.useRef<HTMLElement>(null);\n\n  const [lastVisibleIndex, setLastVisibleIndex] = React.useState<number>(\n    observedComponents.length - 1\n  );\n  const hasHiddenItems = lastVisibleIndex < observedComponents.length - 1;\n  const menuIndex = lastVisibleIndex + 1;\n\n  const [open, setOpen] = React.useState(false);\n  const isMenuOpenWithContent = open && hasHiddenItems;\n  const menuTriggerRef = useElementOnScreen<HTMLButtonElement>(\n    (isVisible) => {\n      // We only react to the menu becoming invisible. When that happens, we hide the last item.\n      if (!isVisible) {\n        /**\n         * If there's no room for any item, the index can be -1.\n         * This is intentional, in that case only the more menu will be visible.\n         **/\n        setLastVisibleIndex((prev) => prev - 1);\n        // Maintain the menu state if it has content\n        setOpen(isMenuOpenWithContent);\n      }\n    },\n    { threshold: 1, root: toolbarRef.current }\n  );\n\n  return observedComponents\n    .map((component, index) => {\n      return (\n        <ObservedToolbarComponent\n          key={component.key}\n          index={index}\n          lastVisibleIndex={lastVisibleIndex}\n          setLastVisibleIndex={setLastVisibleIndex}\n          rootRef={toolbarRef}\n        >\n          {component.toolbar}\n        </ObservedToolbarComponent>\n      );\n    })\n    .toSpliced(\n      menuIndex,\n      0,\n      <MenuTriggerWrapper\n        key=\"more-menu-wrapper\"\n        style={{ visibility: hasHiddenItems ? 'visible' : 'hidden' }}\n      >\n        <Menu.Root defaultOpen={false} open={isMenuOpenWithContent} onOpenChange={setOpen}>\n          <Menu.Trigger\n            paddingLeft={0}\n            paddingRight={0}\n            ref={menuTriggerRef}\n            variant={menuTriggerVariant}\n            label={formatMessage({ id: 'global.more', defaultMessage: 'More' })}\n            tag={IconButton}\n            icon={<More />}\n          />\n          <Menu.Content\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            maxHeight=\"100%\"\n            minWidth=\"256px\"\n            popoverPlacement=\"bottom-end\"\n            zIndex={2}\n          >\n            {observedComponents.slice(menuIndex).map((component) => (\n              <React.Fragment key={component.key}>{component.menu}</React.Fragment>\n            ))}\n          </Menu.Content>\n        </Menu.Root>\n      </MenuTriggerWrapper>\n    );\n};\n"],"names":["ObservedToolbarComponent","index","lastVisibleIndex","setLastVisibleIndex","rootRef","children","isVisible","containerRef","useElementOnScreen","prev","Math","max","threshold","root","current","_jsx","div","ref","style","visibility","MenuTriggerWrapper","styled","Box","theme","colors","neutral150","spaces","breakpoints","medium","EditorToolbarObserver","observedComponents","menuTriggerVariant","formatMessage","useIntl","toolbarRef","React","useRef","useState","length","hasHiddenItems","menuIndex","open","setOpen","isMenuOpenWithContent","menuTriggerRef","map","component","toolbar","key","toSpliced","_jsxs","Menu","Root","defaultOpen","onOpenChange","Trigger","paddingLeft","paddingRight","variant","label","id","defaultMessage","tag","IconButton","icon","More","Content","onCloseAutoFocus","e","preventDefault","maxHeight","minWidth","popoverPlacement","zIndex","slice","Fragment","menu"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { CodeBlock as CodeBlockIcon } from '@strapi/icons';\nimport * as Prism from 'prismjs';\nimport { useIntl } from 'react-intl';\nimport { BaseRange, Element, Editor, Node, NodeEntry, Transforms } from 'slate';\nimport { useSelected, type RenderElementProps, useFocused, ReactEditor } from 'slate-react';\nimport { styled } from 'styled-components';\n\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { codeLanguages } from '../utils/constants';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nimport 'prismjs/themes/prism-solarizedlight.css';\nimport 'prismjs/components/prism-asmatmel';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-basic';\nimport 'prismjs/components/prism-c';\nimport 'prismjs/components/prism-clojure';\nimport 'prismjs/components/prism-cobol';\nimport 'prismjs/components/prism-cpp';\nimport 'prismjs/components/prism-csharp';\nimport 'prismjs/components/prism-dart';\nimport 'prismjs/components/prism-docker';\nimport 'prismjs/components/prism-elixir';\nimport 'prismjs/components/prism-erlang';\nimport 'prismjs/components/prism-fortran';\nimport 'prismjs/components/prism-fsharp';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-graphql';\nimport 'prismjs/components/prism-groovy';\nimport 'prismjs/components/prism-haskell';\nimport 'prismjs/components/prism-haxe';\nimport 'prismjs/components/prism-ini';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-jsx';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-julia';\nimport 'prismjs/components/prism-kotlin';\nimport 'prismjs/components/prism-latex';\nimport 'prismjs/components/prism-lua';\nimport 'prismjs/components/prism-markdown';\nimport 'prismjs/components/prism-matlab';\nimport 'prismjs/components/prism-makefile';\nimport 'prismjs/components/prism-objectivec';\nimport 'prismjs/components/prism-perl';\nimport 'prismjs/components/prism-php';\nimport 'prismjs/components/prism-powershell';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-r';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-rust';\nimport 'prismjs/components/prism-sas';\nimport 'prismjs/components/prism-scala';\nimport 'prismjs/components/prism-scheme';\nimport 'prismjs/components/prism-sql';\nimport 'prismjs/components/prism-stata';\nimport 'prismjs/components/prism-swift';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-tsx';\nimport 'prismjs/components/prism-vbnet';\nimport 'prismjs/components/prism-yaml';\n\ntype BaseRangeCustom = BaseRange & { className: string };\n\nexport const decorateCode = ([node, path]: NodeEntry) => {\n  const ranges: BaseRangeCustom[] = [];\n\n  // make sure it is an Slate Element\n  if (!Element.isElement(node) || node.type !== 'code') return ranges;\n  // transform the Element into a string\n  const text = Node.string(node);\n  const language = codeLanguages.find((lang) => lang.value === node.language);\n  const decorateKey = language?.decorate ?? language?.value;\n\n  const selectedLanguage = Prism.languages[decorateKey || 'plaintext'];\n\n  // create \"tokens\" with \"prismjs\" and put them in \"ranges\"\n  const tokens = Prism.tokenize(text, selectedLanguage);\n  let start = 0;\n  for (const token of tokens) {\n    const length = token.length;\n    const end = start + length;\n    if (typeof token !== 'string') {\n      ranges.push({\n        anchor: { path, offset: start },\n        focus: { path, offset: end },\n        className: `token ${token.type}`,\n      });\n    }\n    start = end;\n  }\n\n  // these will be found in \"renderLeaf\" in \"leaf\" and their \"className\" will be applied\n  return ranges;\n};\n\nconst CodeBlock = styled.pre`\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background-color: ${({ theme }) => theme.colors.neutral100};\n  max-width: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  flex-shrink: 1;\n\n  & > code {\n    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,\n      monospace;\n    color: ${({ theme }) => theme.colors.neutral800};\n    overflow: auto;\n    max-width: 100%;\n  }\n`;\n\nconst CodeEditor = (props: RenderElementProps) => {\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n  const { formatMessage } = useIntl();\n  const [isSelectOpen, setIsSelectOpen] = React.useState(false);\n  const shouldDisplayLanguageSelect = (editorIsFocused && imageIsSelected) || isSelectOpen;\n\n  return (\n    <Box position=\"relative\" width=\"100%\">\n      <CodeBlock {...props.attributes}>\n        <code>{props.children}</code>\n      </CodeBlock>\n      {shouldDisplayLanguageSelect && (\n        <Box\n          position=\"absolute\"\n          background=\"neutral0\"\n          borderColor=\"neutral150\"\n          borderStyle=\"solid\"\n          borderWidth=\"0.5px\"\n          shadow=\"tableShadow\"\n          top=\"100%\"\n          marginTop={1}\n          right={0}\n          padding={1}\n          hasRadius\n        >\n          <SingleSelect\n            onChange={(open) => {\n              Transforms.setNodes(\n                editor,\n                { language: open.toString() },\n                { match: (node) => !Editor.isEditor(node) && node.type === 'code' }\n              );\n            }}\n            value={(props.element.type === 'code' && props.element.language) || 'plaintext'}\n            onOpenChange={(open) => {\n              setIsSelectOpen(open);\n\n              // Focus the editor again when closing the select so the user can continue typing\n              if (!open) {\n                ReactEditor.focus(editor);\n              }\n            }}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            aria-label={formatMessage({\n              id: 'components.Blocks.blocks.code.languageLabel',\n              defaultMessage: 'Select a language',\n            })}\n          >\n            {codeLanguages.map(({ value, label }) => (\n              <SingleSelectOption value={value} key={value}>\n                {label}\n              </SingleSelectOption>\n            ))}\n          </SingleSelect>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst withCode = (editor: Editor) => {\n  const { insertData } = editor;\n\n  editor.insertData = (data) => {\n    const pastedText = data.getData('text/plain');\n\n    if (pastedText && editor.selection) {\n      // Check if we're currently inside a code block\n      const codeBlockEntry = Editor.above(editor, {\n        match: (node) => !Editor.isEditor(node) && node.type === 'code',\n      });\n\n      if (codeBlockEntry) {\n        // We're inside a code block, handle the paste specially\n        // Replace the selected content with the pasted text, preserving newlines\n        Transforms.insertText(editor, pastedText);\n        return;\n      }\n    }\n\n    // For non-code blocks, use the default behavior\n    insertData(data);\n  };\n\n  return editor;\n};\n\nconst codeBlocks: Pick<BlocksStore, 'code'> = {\n  code: {\n    renderElement: (props) => <CodeEditor {...props} />,\n    icon: CodeBlockIcon,\n    label: {\n      id: 'components.Blocks.blocks.code',\n      defaultMessage: 'Code block',\n    },\n    matchNode: (node) => node.type === 'code',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'code'>>(editor, { type: 'code', language: 'plaintext' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['```'],\n    plugin: withCode,\n  },\n};\n\nexport { codeBlocks };\n"],"names":["decorateCode","node","path","ranges","Element","isElement","type","text","Node","string","language","codeLanguages","find","lang","value","decorateKey","decorate","selectedLanguage","Prism","languages","tokens","tokenize","start","token","length","end","push","anchor","offset","focus","className","CodeBlock","styled","pre","theme","borderRadius","colors","neutral100","spaces","neutral800","CodeEditor","props","editor","useBlocksEditorContext","editorIsFocused","useFocused","imageIsSelected","useSelected","formatMessage","useIntl","isSelectOpen","setIsSelectOpen","React","useState","shouldDisplayLanguageSelect","_jsxs","Box","position","width","_jsx","attributes","code","children","background","borderColor","borderStyle","borderWidth","shadow","top","marginTop","right","padding","hasRadius","SingleSelect","onChange","open","Transforms","setNodes","toString","match","Editor","isEditor","element","onOpenChange","ReactEditor","onCloseAutoFocus","e","preventDefault","aria-label","id","defaultMessage","map","label","SingleSelectOption","withCode","insertData","data","pastedText","getData","selection","codeBlockEntry","above","insertText","codeBlocks","renderElement","icon","CodeBlockIcon","matchNode","isInBlocksSelector","handleConvert","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets","plugin"],"mappings":"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"}
+{"version":3,"file":"Code.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { CodeBlock as CodeBlockIcon } from '@strapi/icons';\nimport * as Prism from 'prismjs';\nimport { useIntl } from 'react-intl';\nimport { BaseRange, Element, Editor, Node, NodeEntry, Transforms } from 'slate';\nimport { useSelected, type RenderElementProps, useFocused, ReactEditor } from 'slate-react';\nimport { styled } from 'styled-components';\n\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { codeLanguages } from '../utils/constants';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nimport 'prismjs/themes/prism-solarizedlight.css';\nimport 'prismjs/components/prism-asmatmel';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-basic';\nimport 'prismjs/components/prism-c';\nimport 'prismjs/components/prism-clojure';\nimport 'prismjs/components/prism-cobol';\nimport 'prismjs/components/prism-cpp';\nimport 'prismjs/components/prism-csharp';\nimport 'prismjs/components/prism-dart';\nimport 'prismjs/components/prism-docker';\nimport 'prismjs/components/prism-elixir';\nimport 'prismjs/components/prism-erlang';\nimport 'prismjs/components/prism-fortran';\nimport 'prismjs/components/prism-fsharp';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-graphql';\nimport 'prismjs/components/prism-groovy';\nimport 'prismjs/components/prism-haskell';\nimport 'prismjs/components/prism-haxe';\nimport 'prismjs/components/prism-ini';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-jsx';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-julia';\nimport 'prismjs/components/prism-kotlin';\nimport 'prismjs/components/prism-latex';\nimport 'prismjs/components/prism-lua';\nimport 'prismjs/components/prism-markdown';\nimport 'prismjs/components/prism-matlab';\nimport 'prismjs/components/prism-makefile';\nimport 'prismjs/components/prism-objectivec';\nimport 'prismjs/components/prism-perl';\nimport 'prismjs/components/prism-php';\nimport 'prismjs/components/prism-powershell';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-r';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-rust';\nimport 'prismjs/components/prism-sas';\nimport 'prismjs/components/prism-scala';\nimport 'prismjs/components/prism-scheme';\nimport 'prismjs/components/prism-sql';\nimport 'prismjs/components/prism-stata';\nimport 'prismjs/components/prism-swift';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-tsx';\nimport 'prismjs/components/prism-vbnet';\nimport 'prismjs/components/prism-yaml';\n\ntype BaseRangeCustom = BaseRange & { className: string };\n\nexport const decorateCode = ([node, path]: NodeEntry) => {\n  const ranges: BaseRangeCustom[] = [];\n\n  // make sure it is an Slate Element\n  if (!Element.isElement(node) || node.type !== 'code') return ranges;\n  // transform the Element into a string\n  const text = Node.string(node);\n  const language = codeLanguages.find((lang) => lang.value === node.language);\n  const decorateKey = language?.decorate ?? language?.value;\n\n  const selectedLanguage = Prism.languages[decorateKey || 'plaintext'];\n\n  // create \"tokens\" with \"prismjs\" and put them in \"ranges\"\n  const tokens = Prism.tokenize(text, selectedLanguage);\n  let start = 0;\n  for (const token of tokens) {\n    const length = token.length;\n    const end = start + length;\n    if (typeof token !== 'string') {\n      ranges.push({\n        anchor: { path, offset: start },\n        focus: { path, offset: end },\n        className: `token ${token.type}`,\n      });\n    }\n    start = end;\n  }\n\n  // these will be found in \"renderLeaf\" in \"leaf\" and their \"className\" will be applied\n  return ranges;\n};\n\nconst CodeBlock = styled.pre`\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background-color: ${({ theme }) => theme.colors.neutral100};\n  max-width: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  flex-shrink: 1;\n\n  & > code {\n    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,\n      monospace;\n    color: ${({ theme }) => theme.colors.neutral800};\n    overflow: auto;\n    max-width: 100%;\n  }\n`;\n\nconst CodeEditor = (props: RenderElementProps) => {\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n  const { formatMessage } = useIntl();\n  const [isSelectOpen, setIsSelectOpen] = React.useState(false);\n  const shouldDisplayLanguageSelect = (editorIsFocused && imageIsSelected) || isSelectOpen;\n\n  return (\n    <Box position=\"relative\" width=\"100%\">\n      <CodeBlock {...props.attributes}>\n        <code>{props.children}</code>\n      </CodeBlock>\n      {shouldDisplayLanguageSelect && (\n        <Box\n          position=\"absolute\"\n          background=\"neutral0\"\n          borderColor=\"neutral150\"\n          borderStyle=\"solid\"\n          borderWidth=\"0.5px\"\n          shadow=\"tableShadow\"\n          top=\"100%\"\n          marginTop={1}\n          right={0}\n          padding={1}\n          hasRadius\n        >\n          <SingleSelect\n            onChange={(open) => {\n              Transforms.setNodes(\n                editor,\n                { language: open.toString() },\n                { match: (node) => !Editor.isEditor(node) && node.type === 'code' }\n              );\n            }}\n            value={(props.element.type === 'code' && props.element.language) || 'plaintext'}\n            onOpenChange={(open) => {\n              setIsSelectOpen(open);\n\n              // Focus the editor again when closing the select so the user can continue typing\n              if (!open) {\n                ReactEditor.focus(editor);\n              }\n            }}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            aria-label={formatMessage({\n              id: 'components.Blocks.blocks.code.languageLabel',\n              defaultMessage: 'Select a language',\n            })}\n          >\n            {codeLanguages.map(({ value, label }) => (\n              <SingleSelectOption value={value} key={value}>\n                {label}\n              </SingleSelectOption>\n            ))}\n          </SingleSelect>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst withCode = (editor: Editor) => {\n  const { insertData } = editor;\n\n  editor.insertData = (data) => {\n    const pastedText = data.getData('text/plain');\n\n    if (pastedText && editor.selection) {\n      // Check if we're currently inside a code block\n      const codeBlockEntry = Editor.above(editor, {\n        match: (node) => !Editor.isEditor(node) && node.type === 'code',\n      });\n\n      if (codeBlockEntry) {\n        // We're inside a code block, handle the paste specially\n        // Replace the selected content with the pasted text, preserving newlines\n        Transforms.insertText(editor, pastedText);\n        return;\n      }\n    }\n\n    // For non-code blocks, use the default behavior\n    insertData(data);\n  };\n\n  return editor;\n};\n\nconst codeBlocks: Pick<BlocksStore, 'code'> = {\n  code: {\n    renderElement: (props) => <CodeEditor {...props} />,\n    icon: CodeBlockIcon,\n    label: {\n      id: 'components.Blocks.blocks.code',\n      defaultMessage: 'Code block',\n    },\n    matchNode: (node) => node.type === 'code',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'code'>>(editor, { type: 'code', language: 'plaintext' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['```'],\n    plugin: withCode,\n  },\n};\n\nexport { codeBlocks };\n"],"names":["decorateCode","node","path","ranges","Element","isElement","type","text","Node","string","language","codeLanguages","find","lang","value","decorateKey","decorate","selectedLanguage","Prism","languages","tokens","tokenize","start","token","length","end","push","anchor","offset","focus","className","CodeBlock","styled","pre","theme","borderRadius","colors","neutral100","spaces","neutral800","CodeEditor","props","editor","useBlocksEditorContext","editorIsFocused","useFocused","imageIsSelected","useSelected","formatMessage","useIntl","isSelectOpen","setIsSelectOpen","React","useState","shouldDisplayLanguageSelect","_jsxs","Box","position","width","_jsx","attributes","code","children","background","borderColor","borderStyle","borderWidth","shadow","top","marginTop","right","padding","hasRadius","SingleSelect","onChange","open","Transforms","setNodes","toString","match","Editor","isEditor","element","onOpenChange","ReactEditor","onCloseAutoFocus","e","preventDefault","aria-label","id","defaultMessage","map","label","SingleSelectOption","withCode","insertData","data","pastedText","getData","selection","codeBlockEntry","above","insertText","codeBlocks","renderElement","icon","CodeBlockIcon","matchNode","isInBlocksSelector","handleConvert","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets","plugin"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.mjs

@@ -4,7 +4,7 @@ import { Box, SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { CodeBlock as CodeBlock$1 } from '@strapi/icons';
 import * as Prism from 'prismjs';
 import { useIntl } from 'react-intl';
-import { Element, Node, Transforms, Editor } from 'slate';
+import { Editor, Transforms, Element, Node } from 'slate';
 import { useFocused, useSelected, ReactEditor } from 'slate-react';
 import { styled } from 'styled-components';
 import { useBlocksEditorContext } from '../BlocksEditor.mjs';

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

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { CodeBlock as CodeBlockIcon } from '@strapi/icons';\nimport * as Prism from 'prismjs';\nimport { useIntl } from 'react-intl';\nimport { BaseRange, Element, Editor, Node, NodeEntry, Transforms } from 'slate';\nimport { useSelected, type RenderElementProps, useFocused, ReactEditor } from 'slate-react';\nimport { styled } from 'styled-components';\n\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { codeLanguages } from '../utils/constants';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nimport 'prismjs/themes/prism-solarizedlight.css';\nimport 'prismjs/components/prism-asmatmel';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-basic';\nimport 'prismjs/components/prism-c';\nimport 'prismjs/components/prism-clojure';\nimport 'prismjs/components/prism-cobol';\nimport 'prismjs/components/prism-cpp';\nimport 'prismjs/components/prism-csharp';\nimport 'prismjs/components/prism-dart';\nimport 'prismjs/components/prism-docker';\nimport 'prismjs/components/prism-elixir';\nimport 'prismjs/components/prism-erlang';\nimport 'prismjs/components/prism-fortran';\nimport 'prismjs/components/prism-fsharp';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-graphql';\nimport 'prismjs/components/prism-groovy';\nimport 'prismjs/components/prism-haskell';\nimport 'prismjs/components/prism-haxe';\nimport 'prismjs/components/prism-ini';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-jsx';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-julia';\nimport 'prismjs/components/prism-kotlin';\nimport 'prismjs/components/prism-latex';\nimport 'prismjs/components/prism-lua';\nimport 'prismjs/components/prism-markdown';\nimport 'prismjs/components/prism-matlab';\nimport 'prismjs/components/prism-makefile';\nimport 'prismjs/components/prism-objectivec';\nimport 'prismjs/components/prism-perl';\nimport 'prismjs/components/prism-php';\nimport 'prismjs/components/prism-powershell';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-r';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-rust';\nimport 'prismjs/components/prism-sas';\nimport 'prismjs/components/prism-scala';\nimport 'prismjs/components/prism-scheme';\nimport 'prismjs/components/prism-sql';\nimport 'prismjs/components/prism-stata';\nimport 'prismjs/components/prism-swift';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-tsx';\nimport 'prismjs/components/prism-vbnet';\nimport 'prismjs/components/prism-yaml';\n\ntype BaseRangeCustom = BaseRange & { className: string };\n\nexport const decorateCode = ([node, path]: NodeEntry) => {\n  const ranges: BaseRangeCustom[] = [];\n\n  // make sure it is an Slate Element\n  if (!Element.isElement(node) || node.type !== 'code') return ranges;\n  // transform the Element into a string\n  const text = Node.string(node);\n  const language = codeLanguages.find((lang) => lang.value === node.language);\n  const decorateKey = language?.decorate ?? language?.value;\n\n  const selectedLanguage = Prism.languages[decorateKey || 'plaintext'];\n\n  // create \"tokens\" with \"prismjs\" and put them in \"ranges\"\n  const tokens = Prism.tokenize(text, selectedLanguage);\n  let start = 0;\n  for (const token of tokens) {\n    const length = token.length;\n    const end = start + length;\n    if (typeof token !== 'string') {\n      ranges.push({\n        anchor: { path, offset: start },\n        focus: { path, offset: end },\n        className: `token ${token.type}`,\n      });\n    }\n    start = end;\n  }\n\n  // these will be found in \"renderLeaf\" in \"leaf\" and their \"className\" will be applied\n  return ranges;\n};\n\nconst CodeBlock = styled.pre`\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background-color: ${({ theme }) => theme.colors.neutral100};\n  max-width: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  flex-shrink: 1;\n\n  & > code {\n    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,\n      monospace;\n    color: ${({ theme }) => theme.colors.neutral800};\n    overflow: auto;\n    max-width: 100%;\n  }\n`;\n\nconst CodeEditor = (props: RenderElementProps) => {\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n  const { formatMessage } = useIntl();\n  const [isSelectOpen, setIsSelectOpen] = React.useState(false);\n  const shouldDisplayLanguageSelect = (editorIsFocused && imageIsSelected) || isSelectOpen;\n\n  return (\n    <Box position=\"relative\" width=\"100%\">\n      <CodeBlock {...props.attributes}>\n        <code>{props.children}</code>\n      </CodeBlock>\n      {shouldDisplayLanguageSelect && (\n        <Box\n          position=\"absolute\"\n          background=\"neutral0\"\n          borderColor=\"neutral150\"\n          borderStyle=\"solid\"\n          borderWidth=\"0.5px\"\n          shadow=\"tableShadow\"\n          top=\"100%\"\n          marginTop={1}\n          right={0}\n          padding={1}\n          hasRadius\n        >\n          <SingleSelect\n            onChange={(open) => {\n              Transforms.setNodes(\n                editor,\n                { language: open.toString() },\n                { match: (node) => !Editor.isEditor(node) && node.type === 'code' }\n              );\n            }}\n            value={(props.element.type === 'code' && props.element.language) || 'plaintext'}\n            onOpenChange={(open) => {\n              setIsSelectOpen(open);\n\n              // Focus the editor again when closing the select so the user can continue typing\n              if (!open) {\n                ReactEditor.focus(editor);\n              }\n            }}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            aria-label={formatMessage({\n              id: 'components.Blocks.blocks.code.languageLabel',\n              defaultMessage: 'Select a language',\n            })}\n          >\n            {codeLanguages.map(({ value, label }) => (\n              <SingleSelectOption value={value} key={value}>\n                {label}\n              </SingleSelectOption>\n            ))}\n          </SingleSelect>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst withCode = (editor: Editor) => {\n  const { insertData } = editor;\n\n  editor.insertData = (data) => {\n    const pastedText = data.getData('text/plain');\n\n    if (pastedText && editor.selection) {\n      // Check if we're currently inside a code block\n      const codeBlockEntry = Editor.above(editor, {\n        match: (node) => !Editor.isEditor(node) && node.type === 'code',\n      });\n\n      if (codeBlockEntry) {\n        // We're inside a code block, handle the paste specially\n        // Replace the selected content with the pasted text, preserving newlines\n        Transforms.insertText(editor, pastedText);\n        return;\n      }\n    }\n\n    // For non-code blocks, use the default behavior\n    insertData(data);\n  };\n\n  return editor;\n};\n\nconst codeBlocks: Pick<BlocksStore, 'code'> = {\n  code: {\n    renderElement: (props) => <CodeEditor {...props} />,\n    icon: CodeBlockIcon,\n    label: {\n      id: 'components.Blocks.blocks.code',\n      defaultMessage: 'Code block',\n    },\n    matchNode: (node) => node.type === 'code',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'code'>>(editor, { type: 'code', language: 'plaintext' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['```'],\n    plugin: withCode,\n  },\n};\n\nexport { codeBlocks };\n"],"names":["decorateCode","node","path","ranges","Element","isElement","type","text","Node","string","language","codeLanguages","find","lang","value","decorateKey","decorate","selectedLanguage","Prism","languages","tokens","tokenize","start","token","length","end","push","anchor","offset","focus","className","CodeBlock","styled","pre","theme","borderRadius","colors","neutral100","spaces","neutral800","CodeEditor","props","editor","useBlocksEditorContext","editorIsFocused","useFocused","imageIsSelected","useSelected","formatMessage","useIntl","isSelectOpen","setIsSelectOpen","React","useState","shouldDisplayLanguageSelect","_jsxs","Box","position","width","_jsx","attributes","code","children","background","borderColor","borderStyle","borderWidth","shadow","top","marginTop","right","padding","hasRadius","SingleSelect","onChange","open","Transforms","setNodes","toString","match","Editor","isEditor","element","onOpenChange","ReactEditor","onCloseAutoFocus","e","preventDefault","aria-label","id","defaultMessage","map","label","SingleSelectOption","withCode","insertData","data","pastedText","getData","selection","codeBlockEntry","above","insertText","codeBlocks","renderElement","icon","CodeBlockIcon","matchNode","isInBlocksSelector","handleConvert","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets","plugin"],"mappings":"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"}
+{"version":3,"file":"Code.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { CodeBlock as CodeBlockIcon } from '@strapi/icons';\nimport * as Prism from 'prismjs';\nimport { useIntl } from 'react-intl';\nimport { BaseRange, Element, Editor, Node, NodeEntry, Transforms } from 'slate';\nimport { useSelected, type RenderElementProps, useFocused, ReactEditor } from 'slate-react';\nimport { styled } from 'styled-components';\n\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { codeLanguages } from '../utils/constants';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { pressEnterTwiceToExit } from '../utils/enterKey';\nimport { type Block } from '../utils/types';\n\nimport 'prismjs/themes/prism-solarizedlight.css';\nimport 'prismjs/components/prism-asmatmel';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-basic';\nimport 'prismjs/components/prism-c';\nimport 'prismjs/components/prism-clojure';\nimport 'prismjs/components/prism-cobol';\nimport 'prismjs/components/prism-cpp';\nimport 'prismjs/components/prism-csharp';\nimport 'prismjs/components/prism-dart';\nimport 'prismjs/components/prism-docker';\nimport 'prismjs/components/prism-elixir';\nimport 'prismjs/components/prism-erlang';\nimport 'prismjs/components/prism-fortran';\nimport 'prismjs/components/prism-fsharp';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-graphql';\nimport 'prismjs/components/prism-groovy';\nimport 'prismjs/components/prism-haskell';\nimport 'prismjs/components/prism-haxe';\nimport 'prismjs/components/prism-ini';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/components/prism-jsx';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-julia';\nimport 'prismjs/components/prism-kotlin';\nimport 'prismjs/components/prism-latex';\nimport 'prismjs/components/prism-lua';\nimport 'prismjs/components/prism-markdown';\nimport 'prismjs/components/prism-matlab';\nimport 'prismjs/components/prism-makefile';\nimport 'prismjs/components/prism-objectivec';\nimport 'prismjs/components/prism-perl';\nimport 'prismjs/components/prism-php';\nimport 'prismjs/components/prism-powershell';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-r';\nimport 'prismjs/components/prism-ruby';\nimport 'prismjs/components/prism-rust';\nimport 'prismjs/components/prism-sas';\nimport 'prismjs/components/prism-scala';\nimport 'prismjs/components/prism-scheme';\nimport 'prismjs/components/prism-sql';\nimport 'prismjs/components/prism-stata';\nimport 'prismjs/components/prism-swift';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-tsx';\nimport 'prismjs/components/prism-vbnet';\nimport 'prismjs/components/prism-yaml';\n\ntype BaseRangeCustom = BaseRange & { className: string };\n\nexport const decorateCode = ([node, path]: NodeEntry) => {\n  const ranges: BaseRangeCustom[] = [];\n\n  // make sure it is an Slate Element\n  if (!Element.isElement(node) || node.type !== 'code') return ranges;\n  // transform the Element into a string\n  const text = Node.string(node);\n  const language = codeLanguages.find((lang) => lang.value === node.language);\n  const decorateKey = language?.decorate ?? language?.value;\n\n  const selectedLanguage = Prism.languages[decorateKey || 'plaintext'];\n\n  // create \"tokens\" with \"prismjs\" and put them in \"ranges\"\n  const tokens = Prism.tokenize(text, selectedLanguage);\n  let start = 0;\n  for (const token of tokens) {\n    const length = token.length;\n    const end = start + length;\n    if (typeof token !== 'string') {\n      ranges.push({\n        anchor: { path, offset: start },\n        focus: { path, offset: end },\n        className: `token ${token.type}`,\n      });\n    }\n    start = end;\n  }\n\n  // these will be found in \"renderLeaf\" in \"leaf\" and their \"className\" will be applied\n  return ranges;\n};\n\nconst CodeBlock = styled.pre`\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background-color: ${({ theme }) => theme.colors.neutral100};\n  max-width: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  flex-shrink: 1;\n\n  & > code {\n    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,\n      monospace;\n    color: ${({ theme }) => theme.colors.neutral800};\n    overflow: auto;\n    max-width: 100%;\n  }\n`;\n\nconst CodeEditor = (props: RenderElementProps) => {\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n  const { formatMessage } = useIntl();\n  const [isSelectOpen, setIsSelectOpen] = React.useState(false);\n  const shouldDisplayLanguageSelect = (editorIsFocused && imageIsSelected) || isSelectOpen;\n\n  return (\n    <Box position=\"relative\" width=\"100%\">\n      <CodeBlock {...props.attributes}>\n        <code>{props.children}</code>\n      </CodeBlock>\n      {shouldDisplayLanguageSelect && (\n        <Box\n          position=\"absolute\"\n          background=\"neutral0\"\n          borderColor=\"neutral150\"\n          borderStyle=\"solid\"\n          borderWidth=\"0.5px\"\n          shadow=\"tableShadow\"\n          top=\"100%\"\n          marginTop={1}\n          right={0}\n          padding={1}\n          hasRadius\n        >\n          <SingleSelect\n            onChange={(open) => {\n              Transforms.setNodes(\n                editor,\n                { language: open.toString() },\n                { match: (node) => !Editor.isEditor(node) && node.type === 'code' }\n              );\n            }}\n            value={(props.element.type === 'code' && props.element.language) || 'plaintext'}\n            onOpenChange={(open) => {\n              setIsSelectOpen(open);\n\n              // Focus the editor again when closing the select so the user can continue typing\n              if (!open) {\n                ReactEditor.focus(editor);\n              }\n            }}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            aria-label={formatMessage({\n              id: 'components.Blocks.blocks.code.languageLabel',\n              defaultMessage: 'Select a language',\n            })}\n          >\n            {codeLanguages.map(({ value, label }) => (\n              <SingleSelectOption value={value} key={value}>\n                {label}\n              </SingleSelectOption>\n            ))}\n          </SingleSelect>\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nconst withCode = (editor: Editor) => {\n  const { insertData } = editor;\n\n  editor.insertData = (data) => {\n    const pastedText = data.getData('text/plain');\n\n    if (pastedText && editor.selection) {\n      // Check if we're currently inside a code block\n      const codeBlockEntry = Editor.above(editor, {\n        match: (node) => !Editor.isEditor(node) && node.type === 'code',\n      });\n\n      if (codeBlockEntry) {\n        // We're inside a code block, handle the paste specially\n        // Replace the selected content with the pasted text, preserving newlines\n        Transforms.insertText(editor, pastedText);\n        return;\n      }\n    }\n\n    // For non-code blocks, use the default behavior\n    insertData(data);\n  };\n\n  return editor;\n};\n\nconst codeBlocks: Pick<BlocksStore, 'code'> = {\n  code: {\n    renderElement: (props) => <CodeEditor {...props} />,\n    icon: CodeBlockIcon,\n    label: {\n      id: 'components.Blocks.blocks.code',\n      defaultMessage: 'Code block',\n    },\n    matchNode: (node) => node.type === 'code',\n    isInBlocksSelector: true,\n    handleConvert(editor) {\n      baseHandleConvert<Block<'code'>>(editor, { type: 'code', language: 'plaintext' });\n    },\n    handleEnterKey(editor) {\n      pressEnterTwiceToExit(editor);\n    },\n    snippets: ['```'],\n    plugin: withCode,\n  },\n};\n\nexport { codeBlocks };\n"],"names":["decorateCode","node","path","ranges","Element","isElement","type","text","Node","string","language","codeLanguages","find","lang","value","decorateKey","decorate","selectedLanguage","Prism","languages","tokens","tokenize","start","token","length","end","push","anchor","offset","focus","className","CodeBlock","styled","pre","theme","borderRadius","colors","neutral100","spaces","neutral800","CodeEditor","props","editor","useBlocksEditorContext","editorIsFocused","useFocused","imageIsSelected","useSelected","formatMessage","useIntl","isSelectOpen","setIsSelectOpen","React","useState","shouldDisplayLanguageSelect","_jsxs","Box","position","width","_jsx","attributes","code","children","background","borderColor","borderStyle","borderWidth","shadow","top","marginTop","right","padding","hasRadius","SingleSelect","onChange","open","Transforms","setNodes","toString","match","Editor","isEditor","element","onOpenChange","ReactEditor","onCloseAutoFocus","e","preventDefault","aria-label","id","defaultMessage","map","label","SingleSelectOption","withCode","insertData","data","pastedText","getData","selection","codeBlockEntry","above","insertText","codeBlocks","renderElement","icon","CodeBlockIcon","matchNode","isInBlocksSelector","handleConvert","baseHandleConvert","handleEnterKey","pressEnterTwiceToExit","snippets","plugin"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n  HeadingFive,\n  HeadingFour,\n  HeadingOne,\n  HeadingSix,\n  HeadingThree,\n  HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n  font-size: 2.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n  font-size: 2.2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n  font-size: 2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n  font-size: 1.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n  font-size: 1.6rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n  font-size: 1.4rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 1.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/**\n * Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n  baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n  BlocksStore,\n  'heading-one' | 'heading-two' | 'heading-three' | 'heading-four' | 'heading-five' | 'heading-six'\n> = {\n  'heading-one': {\n    renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n    icon: HeadingOne,\n    label: {\n      id: 'components.Blocks.blocks.heading1',\n      defaultMessage: 'Heading 1',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 1),\n    matchNode: (node) => node.type === 'heading' && node.level === 1,\n    isInBlocksSelector: true,\n    snippets: ['#'],\n    dragHandleTopMargin: '14px',\n  },\n  'heading-two': {\n    renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n    icon: HeadingTwo,\n    label: {\n      id: 'components.Blocks.blocks.heading2',\n      defaultMessage: 'Heading 2',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 2),\n    matchNode: (node) => node.type === 'heading' && node.level === 2,\n    isInBlocksSelector: true,\n    snippets: ['##'],\n    dragHandleTopMargin: '10px',\n  },\n  'heading-three': {\n    renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n    icon: HeadingThree,\n    label: {\n      id: 'components.Blocks.blocks.heading3',\n      defaultMessage: 'Heading 3',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 3),\n    matchNode: (node) => node.type === 'heading' && node.level === 3,\n    isInBlocksSelector: true,\n    snippets: ['###'],\n    dragHandleTopMargin: '7px',\n  },\n  'heading-four': {\n    renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n    icon: HeadingFour,\n    label: {\n      id: 'components.Blocks.blocks.heading4',\n      defaultMessage: 'Heading 4',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 4),\n    matchNode: (node) => node.type === 'heading' && node.level === 4,\n    isInBlocksSelector: true,\n    snippets: ['####'],\n    dragHandleTopMargin: '4px',\n  },\n  'heading-five': {\n    renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n    icon: HeadingFive,\n    label: {\n      id: 'components.Blocks.blocks.heading5',\n      defaultMessage: 'Heading 5',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 5),\n    matchNode: (node) => node.type === 'heading' && node.level === 5,\n    isInBlocksSelector: true,\n    snippets: ['#####'],\n  },\n  'heading-six': {\n    renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n    icon: HeadingSix,\n    label: {\n      id: 'components.Blocks.blocks.heading6',\n      defaultMessage: 'Heading 6',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 6),\n    matchNode: (node) => node.type === 'heading' && node.level === 6,\n    isInBlocksSelector: true,\n    snippets: ['######'],\n    dragHandleTopMargin: '-2px',\n  },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","breakpoints","medium","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":"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"}
+{"version":3,"file":"Heading.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n  HeadingFive,\n  HeadingFour,\n  HeadingOne,\n  HeadingSix,\n  HeadingThree,\n  HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n  font-size: 2.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n  font-size: 2.2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n  font-size: 2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n  font-size: 1.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n  font-size: 1.6rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n  font-size: 1.4rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 1.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/**\n * Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n  baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n  BlocksStore,\n  'heading-one' | 'heading-two' | 'heading-three' | 'heading-four' | 'heading-five' | 'heading-six'\n> = {\n  'heading-one': {\n    renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n    icon: HeadingOne,\n    label: {\n      id: 'components.Blocks.blocks.heading1',\n      defaultMessage: 'Heading 1',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 1),\n    matchNode: (node) => node.type === 'heading' && node.level === 1,\n    isInBlocksSelector: true,\n    snippets: ['#'],\n    dragHandleTopMargin: '14px',\n  },\n  'heading-two': {\n    renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n    icon: HeadingTwo,\n    label: {\n      id: 'components.Blocks.blocks.heading2',\n      defaultMessage: 'Heading 2',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 2),\n    matchNode: (node) => node.type === 'heading' && node.level === 2,\n    isInBlocksSelector: true,\n    snippets: ['##'],\n    dragHandleTopMargin: '10px',\n  },\n  'heading-three': {\n    renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n    icon: HeadingThree,\n    label: {\n      id: 'components.Blocks.blocks.heading3',\n      defaultMessage: 'Heading 3',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 3),\n    matchNode: (node) => node.type === 'heading' && node.level === 3,\n    isInBlocksSelector: true,\n    snippets: ['###'],\n    dragHandleTopMargin: '7px',\n  },\n  'heading-four': {\n    renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n    icon: HeadingFour,\n    label: {\n      id: 'components.Blocks.blocks.heading4',\n      defaultMessage: 'Heading 4',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 4),\n    matchNode: (node) => node.type === 'heading' && node.level === 4,\n    isInBlocksSelector: true,\n    snippets: ['####'],\n    dragHandleTopMargin: '4px',\n  },\n  'heading-five': {\n    renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n    icon: HeadingFive,\n    label: {\n      id: 'components.Blocks.blocks.heading5',\n      defaultMessage: 'Heading 5',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 5),\n    matchNode: (node) => node.type === 'heading' && node.level === 5,\n    isInBlocksSelector: true,\n    snippets: ['#####'],\n  },\n  'heading-six': {\n    renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n    icon: HeadingSix,\n    label: {\n      id: 'components.Blocks.blocks.heading6',\n      defaultMessage: 'Heading 6',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 6),\n    matchNode: (node) => node.type === 'heading' && node.level === 6,\n    isInBlocksSelector: true,\n    snippets: ['######'],\n    dragHandleTopMargin: '-2px',\n  },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","breakpoints","medium","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.mjs

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { Typography } from '@strapi/design-system';
-import { HeadingOne, HeadingTwo, HeadingThree, HeadingFour, HeadingFive, HeadingSix } from '@strapi/icons';
+import { HeadingSix, HeadingFive, HeadingFour, HeadingThree, HeadingTwo, HeadingOne } from '@strapi/icons';
 import { styled } from 'styled-components';
 import { baseHandleConvert } from '../utils/conversions.mjs';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Heading.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n  HeadingFive,\n  HeadingFour,\n  HeadingOne,\n  HeadingSix,\n  HeadingThree,\n  HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n  font-size: 2.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n  font-size: 2.2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n  font-size: 2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n  font-size: 1.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n  font-size: 1.6rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n  font-size: 1.4rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 1.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/**\n * Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n  baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n  BlocksStore,\n  'heading-one' | 'heading-two' | 'heading-three' | 'heading-four' | 'heading-five' | 'heading-six'\n> = {\n  'heading-one': {\n    renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n    icon: HeadingOne,\n    label: {\n      id: 'components.Blocks.blocks.heading1',\n      defaultMessage: 'Heading 1',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 1),\n    matchNode: (node) => node.type === 'heading' && node.level === 1,\n    isInBlocksSelector: true,\n    snippets: ['#'],\n    dragHandleTopMargin: '14px',\n  },\n  'heading-two': {\n    renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n    icon: HeadingTwo,\n    label: {\n      id: 'components.Blocks.blocks.heading2',\n      defaultMessage: 'Heading 2',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 2),\n    matchNode: (node) => node.type === 'heading' && node.level === 2,\n    isInBlocksSelector: true,\n    snippets: ['##'],\n    dragHandleTopMargin: '10px',\n  },\n  'heading-three': {\n    renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n    icon: HeadingThree,\n    label: {\n      id: 'components.Blocks.blocks.heading3',\n      defaultMessage: 'Heading 3',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 3),\n    matchNode: (node) => node.type === 'heading' && node.level === 3,\n    isInBlocksSelector: true,\n    snippets: ['###'],\n    dragHandleTopMargin: '7px',\n  },\n  'heading-four': {\n    renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n    icon: HeadingFour,\n    label: {\n      id: 'components.Blocks.blocks.heading4',\n      defaultMessage: 'Heading 4',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 4),\n    matchNode: (node) => node.type === 'heading' && node.level === 4,\n    isInBlocksSelector: true,\n    snippets: ['####'],\n    dragHandleTopMargin: '4px',\n  },\n  'heading-five': {\n    renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n    icon: HeadingFive,\n    label: {\n      id: 'components.Blocks.blocks.heading5',\n      defaultMessage: 'Heading 5',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 5),\n    matchNode: (node) => node.type === 'heading' && node.level === 5,\n    isInBlocksSelector: true,\n    snippets: ['#####'],\n  },\n  'heading-six': {\n    renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n    icon: HeadingSix,\n    label: {\n      id: 'components.Blocks.blocks.heading6',\n      defaultMessage: 'Heading 6',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 6),\n    matchNode: (node) => node.type === 'heading' && node.level === 6,\n    isInBlocksSelector: true,\n    snippets: ['######'],\n    dragHandleTopMargin: '-2px',\n  },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","breakpoints","medium","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":"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"}
+{"version":3,"file":"Heading.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n  HeadingFive,\n  HeadingFour,\n  HeadingOne,\n  HeadingSix,\n  HeadingThree,\n  HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n  font-size: 2.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n  font-size: 2.2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 3rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n  font-size: 2rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n  font-size: 1.8rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2.4rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n  font-size: 1.6rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 2rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n  font-size: 1.4rem;\n  ${({ theme }) => theme.breakpoints.medium} {\n    font-size: 1.6rem;\n  }\n  font-weight: 600;\n  line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/**\n * Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n  baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n  BlocksStore,\n  'heading-one' | 'heading-two' | 'heading-three' | 'heading-four' | 'heading-five' | 'heading-six'\n> = {\n  'heading-one': {\n    renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n    icon: HeadingOne,\n    label: {\n      id: 'components.Blocks.blocks.heading1',\n      defaultMessage: 'Heading 1',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 1),\n    matchNode: (node) => node.type === 'heading' && node.level === 1,\n    isInBlocksSelector: true,\n    snippets: ['#'],\n    dragHandleTopMargin: '14px',\n  },\n  'heading-two': {\n    renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n    icon: HeadingTwo,\n    label: {\n      id: 'components.Blocks.blocks.heading2',\n      defaultMessage: 'Heading 2',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 2),\n    matchNode: (node) => node.type === 'heading' && node.level === 2,\n    isInBlocksSelector: true,\n    snippets: ['##'],\n    dragHandleTopMargin: '10px',\n  },\n  'heading-three': {\n    renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n    icon: HeadingThree,\n    label: {\n      id: 'components.Blocks.blocks.heading3',\n      defaultMessage: 'Heading 3',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 3),\n    matchNode: (node) => node.type === 'heading' && node.level === 3,\n    isInBlocksSelector: true,\n    snippets: ['###'],\n    dragHandleTopMargin: '7px',\n  },\n  'heading-four': {\n    renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n    icon: HeadingFour,\n    label: {\n      id: 'components.Blocks.blocks.heading4',\n      defaultMessage: 'Heading 4',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 4),\n    matchNode: (node) => node.type === 'heading' && node.level === 4,\n    isInBlocksSelector: true,\n    snippets: ['####'],\n    dragHandleTopMargin: '4px',\n  },\n  'heading-five': {\n    renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n    icon: HeadingFive,\n    label: {\n      id: 'components.Blocks.blocks.heading5',\n      defaultMessage: 'Heading 5',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 5),\n    matchNode: (node) => node.type === 'heading' && node.level === 5,\n    isInBlocksSelector: true,\n    snippets: ['#####'],\n  },\n  'heading-six': {\n    renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n    icon: HeadingSix,\n    label: {\n      id: 'components.Blocks.blocks.heading6',\n      defaultMessage: 'Heading 6',\n    },\n    handleConvert: (editor) => handleConvertToHeading(editor, 6),\n    matchNode: (node) => node.type === 'heading' && node.level === 6,\n    isInBlocksSelector: true,\n    snippets: ['######'],\n    dragHandleTopMargin: '-2px',\n  },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","breakpoints","medium","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n  transition-property: box-shadow;\n  transition-duration: 0.2s;\n  ${(props) =>\n    props.$isFocused &&\n    css`\n      box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n    `}\n\n  & > img {\n    height: auto;\n    // The max-height is decided with the design team, the 56px is the height of the toolbar\n    max-height: calc(512px - 56px);\n    max-width: 100%;\n    object-fit: contain;\n  }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n  'name',\n  'alternativeText',\n  'url',\n  'caption',\n  'width',\n  'height',\n  'formats',\n  'hash',\n  'ext',\n  'mime',\n  'size',\n  'previewUrl',\n  'provider',\n  'provider_metadata',\n  'createdAt',\n  'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n  const entries = keys.map((key) => [key, object[key]]);\n  return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n  return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n\n  if (!isImage(element)) {\n    return null;\n  }\n  const { url, alternativeText, width, height } = element.image;\n\n  return (\n    <Box {...attributes}>\n      {children}\n      <ImageWrapper\n        background=\"neutral100\"\n        contentEditable={false}\n        justifyContent=\"center\"\n        $isFocused={editorIsFocused && imageIsSelected}\n        hasRadius\n      >\n        <img src={url} alt={alternativeText} width={width} height={height} />\n      </ImageWrapper>\n    </Box>\n  );\n};\n\nconst ImageDialog = () => {\n  const [isOpen, setIsOpen] = React.useState(true);\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n  if (!components || !isOpen) return null;\n\n  const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n    allowedTypes: Schema.Attribute.MediaKind[];\n    onClose: () => void;\n    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n  }>;\n\n  const insertImages = (images: Block<'image'>['image'][]) => {\n    // If the selection is inside a list, split the list so that the modified block is outside of it\n    Transforms.unwrapNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n      split: true,\n    });\n\n    // Save the path of the node that is being replaced by an image to insert the images there later\n    // It's the closest full block node above the selection\n    const nodeEntryBeingReplaced = Editor.above(editor, {\n      match(node) {\n        if (Editor.isEditor(node)) return false;\n\n        const isInlineNode = ['text', 'link'].includes(node.type);\n\n        return !isInlineNode;\n      },\n    });\n\n    if (!nodeEntryBeingReplaced) return;\n    const [, pathToInsert] = nodeEntryBeingReplaced;\n\n    // Remove the previous node that is being replaced by an image\n    Transforms.removeNodes(editor);\n\n    // Convert images to nodes and insert them\n    const nodesToInsert = images.map((image) => {\n      const imageNode: Block<'image'> = {\n        type: 'image',\n        image,\n        children: [{ type: 'text', text: '' }],\n      };\n      return imageNode;\n    });\n    Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n    // Set the selection on the image since it was cleared by calling removeNodes\n    Transforms.select(editor, pathToInsert);\n  };\n\n  const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n    const formattedImages = images.map((image) => {\n      // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n      const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n      const nodeImage: Block<'image'>['image'] = {\n        ...expectedImage,\n        alternativeText: expectedImage.alternativeText || expectedImage.name,\n        url: prefixFileUrlWithBackendUrl(image.url),\n      };\n\n      return nodeImage;\n    });\n\n    insertImages(formattedImages);\n    setIsOpen(false);\n  };\n\n  return (\n    <MediaLibraryDialog\n      allowedTypes={['images']}\n      onClose={() => setIsOpen(false)}\n      onSelectAssets={handleSelectAssets}\n    />\n  );\n};\n\n/**\n * Images are void elements. They handle the rendering of their children instead of Slate.\n * See the Slate documentation for more information:\n * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void\n * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements\n */\nconst withImages = (editor: Editor) => {\n  const { isVoid } = editor;\n\n  editor.isVoid = (element) => {\n    return element.type === 'image' ? true : isVoid(element);\n  };\n\n  return editor;\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n  image: {\n    renderElement: (props) => <Image {...props} />,\n    icon: Picture,\n    label: {\n      id: 'components.Blocks.blocks.image',\n      defaultMessage: 'Image',\n    },\n    matchNode: (node) => node.type === 'image',\n    isInBlocksSelector: true,\n    handleBackspaceKey(editor) {\n      // Prevent issue where the image remains when it's the only block in the document\n      if (editor.children.length === 1) {\n        Transforms.setNodes(editor, {\n          type: 'paragraph',\n          // @ts-expect-error we're only setting image as null so that Slate deletes it\n          image: null,\n          children: [{ type: 'text', text: '' }],\n        });\n      } else {\n        Transforms.removeNodes(editor);\n      }\n    },\n    handleEnterKey(editor) {\n      Transforms.insertNodes(editor, {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      });\n    },\n    handleConvert: () => {\n      /**\n       * All the logic is managed inside the ImageDialog component,\n       * because the blocks are only created when the user selects images in the modal and submits\n       * and if he closes the modal, then no changes are made to the editor\n       */\n      return () => <ImageDialog />;\n    },\n    snippets: ['!['],\n    plugin: withImages,\n  },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","withImages","isVoid","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets","plugin"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n  transition-property: box-shadow;\n  transition-duration: 0.2s;\n  ${(props) =>\n    props.$isFocused &&\n    css`\n      box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n    `}\n\n  & > img {\n    height: auto;\n    // The max-height is decided with the design team, the 56px is the height of the toolbar\n    max-height: calc(512px - 56px);\n    max-width: 100%;\n    object-fit: contain;\n  }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n  'name',\n  'alternativeText',\n  'url',\n  'caption',\n  'width',\n  'height',\n  'formats',\n  'hash',\n  'ext',\n  'mime',\n  'size',\n  'previewUrl',\n  'provider',\n  'provider_metadata',\n  'createdAt',\n  'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n  const entries = keys.map((key) => [key, object[key]]);\n  return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n  return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n\n  if (!isImage(element)) {\n    return null;\n  }\n  const { url, alternativeText, width, height } = element.image;\n\n  return (\n    <Box {...attributes}>\n      {children}\n      <ImageWrapper\n        background=\"neutral100\"\n        contentEditable={false}\n        justifyContent=\"center\"\n        $isFocused={editorIsFocused && imageIsSelected}\n        hasRadius\n      >\n        <img src={url} alt={alternativeText} width={width} height={height} />\n      </ImageWrapper>\n    </Box>\n  );\n};\n\nconst ImageDialog = () => {\n  const [isOpen, setIsOpen] = React.useState(true);\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n  if (!components || !isOpen) return null;\n\n  const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n    allowedTypes: Schema.Attribute.MediaKind[];\n    onClose: () => void;\n    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n  }>;\n\n  const insertImages = (images: Block<'image'>['image'][]) => {\n    // If the selection is inside a list, split the list so that the modified block is outside of it\n    Transforms.unwrapNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n      split: true,\n    });\n\n    // Save the path of the node that is being replaced by an image to insert the images there later\n    // It's the closest full block node above the selection\n    const nodeEntryBeingReplaced = Editor.above(editor, {\n      match(node) {\n        if (Editor.isEditor(node)) return false;\n\n        const isInlineNode = ['text', 'link'].includes(node.type);\n\n        return !isInlineNode;\n      },\n    });\n\n    if (!nodeEntryBeingReplaced) return;\n    const [, pathToInsert] = nodeEntryBeingReplaced;\n\n    // Remove the previous node that is being replaced by an image\n    Transforms.removeNodes(editor);\n\n    // Convert images to nodes and insert them\n    const nodesToInsert = images.map((image) => {\n      const imageNode: Block<'image'> = {\n        type: 'image',\n        image,\n        children: [{ type: 'text', text: '' }],\n      };\n      return imageNode;\n    });\n    Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n    // Set the selection on the image since it was cleared by calling removeNodes\n    Transforms.select(editor, pathToInsert);\n  };\n\n  const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n    const formattedImages = images.map((image) => {\n      // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n      const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n      const nodeImage: Block<'image'>['image'] = {\n        ...expectedImage,\n        alternativeText: expectedImage.alternativeText || expectedImage.name,\n        url: prefixFileUrlWithBackendUrl(image.url),\n      };\n\n      return nodeImage;\n    });\n\n    insertImages(formattedImages);\n    setIsOpen(false);\n  };\n\n  return (\n    <MediaLibraryDialog\n      allowedTypes={['images']}\n      onClose={() => setIsOpen(false)}\n      onSelectAssets={handleSelectAssets}\n    />\n  );\n};\n\n/**\n * Images are void elements. They handle the rendering of their children instead of Slate.\n * See the Slate documentation for more information:\n * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void\n * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements\n */\nconst withImages = (editor: Editor) => {\n  const { isVoid } = editor;\n\n  editor.isVoid = (element) => {\n    return element.type === 'image' ? true : isVoid(element);\n  };\n\n  return editor;\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n  image: {\n    renderElement: (props) => <Image {...props} />,\n    icon: Picture,\n    label: {\n      id: 'components.Blocks.blocks.image',\n      defaultMessage: 'Image',\n    },\n    matchNode: (node) => node.type === 'image',\n    isInBlocksSelector: true,\n    handleBackspaceKey(editor) {\n      // Prevent issue where the image remains when it's the only block in the document\n      if (editor.children.length === 1) {\n        Transforms.setNodes(editor, {\n          type: 'paragraph',\n          // @ts-expect-error we're only setting image as null so that Slate deletes it\n          image: null,\n          children: [{ type: 'text', text: '' }],\n        });\n      } else {\n        Transforms.removeNodes(editor);\n      }\n    },\n    handleEnterKey(editor) {\n      Transforms.insertNodes(editor, {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      });\n    },\n    handleConvert: () => {\n      /**\n       * All the logic is managed inside the ImageDialog component,\n       * because the blocks are only created when the user selects images in the modal and submits\n       * and if he closes the modal, then no changes are made to the editor\n       */\n      return () => <ImageDialog />;\n    },\n    snippets: ['!['],\n    plugin: withImages,\n  },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","withImages","isVoid","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets","plugin"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.mjs

@@ -5,7 +5,7 @@ import { Flex, Box } from '@strapi/design-system';
 import { Image as Image$1 } from '@strapi/icons';
 import { Transforms, Editor } from 'slate';
 import { useFocused, useSelected } from 'slate-react';
-import { styled, css } from 'styled-components';
+import { css, styled } from 'styled-components';
 import { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls.mjs';
 import { useBlocksEditorContext } from '../BlocksEditor.mjs';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n  transition-property: box-shadow;\n  transition-duration: 0.2s;\n  ${(props) =>\n    props.$isFocused &&\n    css`\n      box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n    `}\n\n  & > img {\n    height: auto;\n    // The max-height is decided with the design team, the 56px is the height of the toolbar\n    max-height: calc(512px - 56px);\n    max-width: 100%;\n    object-fit: contain;\n  }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n  'name',\n  'alternativeText',\n  'url',\n  'caption',\n  'width',\n  'height',\n  'formats',\n  'hash',\n  'ext',\n  'mime',\n  'size',\n  'previewUrl',\n  'provider',\n  'provider_metadata',\n  'createdAt',\n  'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n  const entries = keys.map((key) => [key, object[key]]);\n  return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n  return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n\n  if (!isImage(element)) {\n    return null;\n  }\n  const { url, alternativeText, width, height } = element.image;\n\n  return (\n    <Box {...attributes}>\n      {children}\n      <ImageWrapper\n        background=\"neutral100\"\n        contentEditable={false}\n        justifyContent=\"center\"\n        $isFocused={editorIsFocused && imageIsSelected}\n        hasRadius\n      >\n        <img src={url} alt={alternativeText} width={width} height={height} />\n      </ImageWrapper>\n    </Box>\n  );\n};\n\nconst ImageDialog = () => {\n  const [isOpen, setIsOpen] = React.useState(true);\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n  if (!components || !isOpen) return null;\n\n  const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n    allowedTypes: Schema.Attribute.MediaKind[];\n    onClose: () => void;\n    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n  }>;\n\n  const insertImages = (images: Block<'image'>['image'][]) => {\n    // If the selection is inside a list, split the list so that the modified block is outside of it\n    Transforms.unwrapNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n      split: true,\n    });\n\n    // Save the path of the node that is being replaced by an image to insert the images there later\n    // It's the closest full block node above the selection\n    const nodeEntryBeingReplaced = Editor.above(editor, {\n      match(node) {\n        if (Editor.isEditor(node)) return false;\n\n        const isInlineNode = ['text', 'link'].includes(node.type);\n\n        return !isInlineNode;\n      },\n    });\n\n    if (!nodeEntryBeingReplaced) return;\n    const [, pathToInsert] = nodeEntryBeingReplaced;\n\n    // Remove the previous node that is being replaced by an image\n    Transforms.removeNodes(editor);\n\n    // Convert images to nodes and insert them\n    const nodesToInsert = images.map((image) => {\n      const imageNode: Block<'image'> = {\n        type: 'image',\n        image,\n        children: [{ type: 'text', text: '' }],\n      };\n      return imageNode;\n    });\n    Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n    // Set the selection on the image since it was cleared by calling removeNodes\n    Transforms.select(editor, pathToInsert);\n  };\n\n  const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n    const formattedImages = images.map((image) => {\n      // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n      const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n      const nodeImage: Block<'image'>['image'] = {\n        ...expectedImage,\n        alternativeText: expectedImage.alternativeText || expectedImage.name,\n        url: prefixFileUrlWithBackendUrl(image.url),\n      };\n\n      return nodeImage;\n    });\n\n    insertImages(formattedImages);\n    setIsOpen(false);\n  };\n\n  return (\n    <MediaLibraryDialog\n      allowedTypes={['images']}\n      onClose={() => setIsOpen(false)}\n      onSelectAssets={handleSelectAssets}\n    />\n  );\n};\n\n/**\n * Images are void elements. They handle the rendering of their children instead of Slate.\n * See the Slate documentation for more information:\n * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void\n * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements\n */\nconst withImages = (editor: Editor) => {\n  const { isVoid } = editor;\n\n  editor.isVoid = (element) => {\n    return element.type === 'image' ? true : isVoid(element);\n  };\n\n  return editor;\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n  image: {\n    renderElement: (props) => <Image {...props} />,\n    icon: Picture,\n    label: {\n      id: 'components.Blocks.blocks.image',\n      defaultMessage: 'Image',\n    },\n    matchNode: (node) => node.type === 'image',\n    isInBlocksSelector: true,\n    handleBackspaceKey(editor) {\n      // Prevent issue where the image remains when it's the only block in the document\n      if (editor.children.length === 1) {\n        Transforms.setNodes(editor, {\n          type: 'paragraph',\n          // @ts-expect-error we're only setting image as null so that Slate deletes it\n          image: null,\n          children: [{ type: 'text', text: '' }],\n        });\n      } else {\n        Transforms.removeNodes(editor);\n      }\n    },\n    handleEnterKey(editor) {\n      Transforms.insertNodes(editor, {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      });\n    },\n    handleConvert: () => {\n      /**\n       * All the logic is managed inside the ImageDialog component,\n       * because the blocks are only created when the user selects images in the modal and submits\n       * and if he closes the modal, then no changes are made to the editor\n       */\n      return () => <ImageDialog />;\n    },\n    snippets: ['!['],\n    plugin: withImages,\n  },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","withImages","isVoid","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets","plugin"],"mappings":"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"}
+{"version":3,"file":"Image.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n  transition-property: box-shadow;\n  transition-duration: 0.2s;\n  ${(props) =>\n    props.$isFocused &&\n    css`\n      box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n    `}\n\n  & > img {\n    height: auto;\n    // The max-height is decided with the design team, the 56px is the height of the toolbar\n    max-height: calc(512px - 56px);\n    max-width: 100%;\n    object-fit: contain;\n  }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n  'name',\n  'alternativeText',\n  'url',\n  'caption',\n  'width',\n  'height',\n  'formats',\n  'hash',\n  'ext',\n  'mime',\n  'size',\n  'previewUrl',\n  'provider',\n  'provider_metadata',\n  'createdAt',\n  'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n  const entries = keys.map((key) => [key, object[key]]);\n  return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n  return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n  const editorIsFocused = useFocused();\n  const imageIsSelected = useSelected();\n\n  if (!isImage(element)) {\n    return null;\n  }\n  const { url, alternativeText, width, height } = element.image;\n\n  return (\n    <Box {...attributes}>\n      {children}\n      <ImageWrapper\n        background=\"neutral100\"\n        contentEditable={false}\n        justifyContent=\"center\"\n        $isFocused={editorIsFocused && imageIsSelected}\n        hasRadius\n      >\n        <img src={url} alt={alternativeText} width={width} height={height} />\n      </ImageWrapper>\n    </Box>\n  );\n};\n\nconst ImageDialog = () => {\n  const [isOpen, setIsOpen] = React.useState(true);\n  const { editor } = useBlocksEditorContext('ImageDialog');\n  const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n  if (!components || !isOpen) return null;\n\n  const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n    allowedTypes: Schema.Attribute.MediaKind[];\n    onClose: () => void;\n    onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n  }>;\n\n  const insertImages = (images: Block<'image'>['image'][]) => {\n    // If the selection is inside a list, split the list so that the modified block is outside of it\n    Transforms.unwrapNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n      split: true,\n    });\n\n    // Save the path of the node that is being replaced by an image to insert the images there later\n    // It's the closest full block node above the selection\n    const nodeEntryBeingReplaced = Editor.above(editor, {\n      match(node) {\n        if (Editor.isEditor(node)) return false;\n\n        const isInlineNode = ['text', 'link'].includes(node.type);\n\n        return !isInlineNode;\n      },\n    });\n\n    if (!nodeEntryBeingReplaced) return;\n    const [, pathToInsert] = nodeEntryBeingReplaced;\n\n    // Remove the previous node that is being replaced by an image\n    Transforms.removeNodes(editor);\n\n    // Convert images to nodes and insert them\n    const nodesToInsert = images.map((image) => {\n      const imageNode: Block<'image'> = {\n        type: 'image',\n        image,\n        children: [{ type: 'text', text: '' }],\n      };\n      return imageNode;\n    });\n    Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n    // Set the selection on the image since it was cleared by calling removeNodes\n    Transforms.select(editor, pathToInsert);\n  };\n\n  const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n    const formattedImages = images.map((image) => {\n      // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n      const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n      const nodeImage: Block<'image'>['image'] = {\n        ...expectedImage,\n        alternativeText: expectedImage.alternativeText || expectedImage.name,\n        url: prefixFileUrlWithBackendUrl(image.url),\n      };\n\n      return nodeImage;\n    });\n\n    insertImages(formattedImages);\n    setIsOpen(false);\n  };\n\n  return (\n    <MediaLibraryDialog\n      allowedTypes={['images']}\n      onClose={() => setIsOpen(false)}\n      onSelectAssets={handleSelectAssets}\n    />\n  );\n};\n\n/**\n * Images are void elements. They handle the rendering of their children instead of Slate.\n * See the Slate documentation for more information:\n * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void\n * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements\n */\nconst withImages = (editor: Editor) => {\n  const { isVoid } = editor;\n\n  editor.isVoid = (element) => {\n    return element.type === 'image' ? true : isVoid(element);\n  };\n\n  return editor;\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n  image: {\n    renderElement: (props) => <Image {...props} />,\n    icon: Picture,\n    label: {\n      id: 'components.Blocks.blocks.image',\n      defaultMessage: 'Image',\n    },\n    matchNode: (node) => node.type === 'image',\n    isInBlocksSelector: true,\n    handleBackspaceKey(editor) {\n      // Prevent issue where the image remains when it's the only block in the document\n      if (editor.children.length === 1) {\n        Transforms.setNodes(editor, {\n          type: 'paragraph',\n          // @ts-expect-error we're only setting image as null so that Slate deletes it\n          image: null,\n          children: [{ type: 'text', text: '' }],\n        });\n      } else {\n        Transforms.removeNodes(editor);\n      }\n    },\n    handleEnterKey(editor) {\n      Transforms.insertNodes(editor, {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      });\n    },\n    handleConvert: () => {\n      /**\n       * All the logic is managed inside the ImageDialog component,\n       * because the blocks are only created when the user selects images in the modal and submits\n       * and if he closes the modal, then no changes are made to the editor\n       */\n      return () => <ImageDialog />;\n    },\n    snippets: ['!['],\n    plugin: withImages,\n  },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","withImages","isVoid","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets","plugin"],"mappings":"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"}