@strapi/content-manager 5.51.0 → 5.51.2

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

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/List.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography } from '@strapi/design-system';\nimport { BulletList, NumberList } from '@strapi/icons';\nimport { Schema } from '@strapi/types';\nimport { type Text, Editor, Node, Transforms, Path, Element } from 'slate';\nimport { type RenderElementProps, ReactEditor } from 'slate-react';\nimport { styled, type CSSProperties, css } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst listStyle = css`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.spaces[2]};\n  margin-inline-start: ${({ theme }) => theme.spaces[0]};\n  margin-inline-end: ${({ theme }) => theme.spaces[0]};\n  padding-inline-start: ${({ theme }) => theme.spaces[2]};\n\n  ol,\n  ul {\n    margin-block-start: ${({ theme }) => theme.spaces[0]};\n    margin-block-end: ${({ theme }) => theme.spaces[0]};\n  }\n\n  li {\n    margin-inline-start: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst Orderedlist = styled.ol<{ $listStyleType: CSSProperties['listStyleType'] }>`\n  list-style-type: ${(props) => props.$listStyleType};\n  ${listStyle}\n`;\n\nconst Unorderedlist = styled.ul<{ $listStyleType: CSSProperties['listStyleType'] }>`\n  list-style-type: ${(props) => props.$listStyleType};\n  ${listStyle}\n`;\n\nconst orderedStyles = ['decimal', 'lower-alpha', 'upper-roman'];\nconst unorderedStyles = ['disc', 'circle', 'square'];\n\nconst isListNode = (element: Element): element is Schema.Attribute.ListBlockNode => {\n  return element.type === 'list';\n};\n\nconst List = ({ attributes, children, element }: RenderElementProps) => {\n  if (!isListNode(element)) {\n    return null;\n  }\n\n  // Decide the subsequent style by referencing the given styles according to the format,\n  // allowing for infinite nested lists\n  const listStyles = element.format === 'ordered' ? orderedStyles : unorderedStyles;\n  const nextIndex = (element.indentLevel || 0) % listStyles!.length;\n  const listStyleType = listStyles![nextIndex];\n\n  if (element.format === 'ordered') {\n    return (\n      <Orderedlist $listStyleType={listStyleType} {...attributes}>\n        {children}\n      </Orderedlist>\n    );\n  }\n\n  return (\n    <Unorderedlist $listStyleType={listStyleType} {...attributes}>\n      {children}\n    </Unorderedlist>\n  );\n};\n\nconst replaceListWithEmptyBlock = (editor: Editor, currentListPath: Path) => {\n  // Delete the empty list\n  Transforms.removeNodes(editor, { at: currentListPath });\n\n  if (currentListPath[0] === 0) {\n    // If the list was the only (or first) block element then insert empty paragraph as editor needs default value\n    Transforms.insertNodes(\n      editor,\n      {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      },\n      { at: currentListPath }\n    );\n    Transforms.select(editor, currentListPath);\n  }\n};\n\nconst isText = (node: unknown): node is Text => {\n  return Node.isNode(node) && !Editor.isEditor(node) && node.type === 'text';\n};\n\n/**\n * Common handler for the backspace event on ordered and unordered lists\n */\nconst handleBackspaceKeyOnList = (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => {\n  if (!editor.selection) return;\n\n  const [currentListItem, currentListItemPath] = Editor.parent(editor, editor.selection.anchor);\n  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);\n  const isListEmpty =\n    currentList.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isListItemEmpty =\n    currentListItem.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isFocusAtTheBeginningOfAChild =\n    editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-2) === 0;\n\n  if (isListEmpty) {\n    const parentListEntry = Editor.above(editor, {\n      at: currentListPath,\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n    });\n    if (!parentListEntry) {\n      event.preventDefault();\n      replaceListWithEmptyBlock(editor, currentListPath);\n    }\n  } else if (isFocusAtTheBeginningOfAChild) {\n    // If the focus is at the beginning of a child node we need to replace it with a paragraph\n    Transforms.liftNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n    });\n    Transforms.setNodes(editor, { type: 'paragraph' });\n  } else if (isListItemEmpty) {\n    const previousEntry = Editor.previous(editor, {\n      at: currentListItemPath,\n    });\n    const nextEntry = Editor.next(editor, {\n      at: currentListItemPath,\n    });\n\n    if (previousEntry && nextEntry) {\n      // If previous and next nodes are lists or list-items, delete empty list item\n      event.preventDefault();\n      Transforms.removeNodes(editor, {\n        at: currentListItemPath,\n      });\n\n      // If previous and next nodes are lists with same format and indent Levels, then merge the nodes\n      const [previousList] = previousEntry;\n      const [nextList] = nextEntry;\n      if (\n        !Editor.isEditor(previousList) &&\n        !isText(previousList) &&\n        isListNode(previousList) &&\n        !Editor.isEditor(nextList) &&\n        !isText(nextList) &&\n        isListNode(nextList)\n      ) {\n        if (\n          previousList.type === 'list' &&\n          nextList.type === 'list' &&\n          previousList.format === nextList.format &&\n          previousList.indentLevel === nextList.indentLevel\n        ) {\n          Transforms.mergeNodes(editor, {\n            at: currentListItemPath,\n          });\n        }\n      }\n    }\n  }\n};\n\n/**\n * Common handler for the enter key on ordered and unordered lists\n */\nconst handleEnterKeyOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [currentListItem, currentListItemPath] = currentListItemEntry;\n  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);\n  const isListEmpty =\n    currentList.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isListItemEmpty =\n    currentListItem.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isFocusAtTheBeginningOfAChild =\n    editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-1) === 0;\n\n  if (isListEmpty) {\n    replaceListWithEmptyBlock(editor, currentListPath);\n  } else if (isFocusAtTheBeginningOfAChild && !isListItemEmpty) {\n    // If the focus is at the beginning of a child node, shift below the list item and create a new list-item\n    const currentNode = Editor.above(editor, { at: editor.selection.anchor });\n    Transforms.insertNodes(editor, { type: 'list-item', children: [{ type: 'text', text: '' }] });\n    if (currentNode) {\n      const path = currentNode[1];\n      const updatedPath = [...path.slice(0, -1), path[path.length - 1] + 1];\n      Transforms.select(editor, {\n        anchor: { path: updatedPath.concat(0), offset: 0 },\n        focus: { path: updatedPath.concat(0), offset: 0 },\n      });\n    }\n  } else if (isListItemEmpty) {\n    // Check if there is a list above the current list and shift list-item under it\n    if (\n      !Editor.isEditor(currentList) &&\n      isListNode(currentList) &&\n      currentList?.indentLevel &&\n      currentList.indentLevel > 0\n    ) {\n      const previousIndentLevel = currentList.indentLevel - 1;\n\n      const parentListNodeEntry = Editor.above(editor, {\n        match: (node) =>\n          !Editor.isEditor(node) &&\n          node.type === 'list' &&\n          (node.indentLevel || 0) === previousIndentLevel,\n      });\n\n      if (parentListNodeEntry) {\n        // Get the parent list path and add 1 to it to exit from the current list\n        const modifiedPath = currentListItemPath.slice(0, -1);\n        if (modifiedPath.length > 0) {\n          modifiedPath[modifiedPath.length - 1] += 1;\n        }\n\n        // Shift list-item under parent list\n        Transforms.moveNodes(editor, {\n          at: currentListItemPath,\n          to: modifiedPath,\n        });\n        return;\n      }\n    }\n\n    // Otherwise delete the empty list item and create a new paragraph below the parent list\n    Transforms.removeNodes(editor, { at: currentListItemPath });\n\n    const createdParagraphPath = Path.next(currentListPath);\n    Transforms.insertNodes(\n      editor,\n      {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      },\n      { at: createdParagraphPath }\n    );\n\n    // Move the selection to the newly created paragraph\n    Transforms.select(editor, createdParagraphPath);\n  } else {\n    // Check if the cursor is at the end of the list item\n    const isNodeEnd = Editor.isEnd(editor, editor.selection.anchor, currentListItemPath);\n\n    if (isNodeEnd) {\n      // If there was nothing after the cursor, create a fresh new list item,\n      // in order to avoid carrying over the modifiers from the previous list item\n      Transforms.insertNodes(editor, { type: 'list-item', children: [{ type: 'text', text: '' }] });\n    } else {\n      // If there is something after the cursor, split the current list item,\n      // so that we keep the content and the modifiers\n      Transforms.splitNodes(editor);\n    }\n  }\n};\n\n/**\n * Common handler for converting a node to a list\n */\nconst handleConvertToList = (editor: Editor, format: Block<'list'>['format']) => {\n  const convertedPath = baseHandleConvert<Block<'list-item'>>(editor, { type: 'list-item' });\n\n  if (!convertedPath) return;\n\n  Transforms.wrapNodes(editor, { type: 'list', format, children: [] }, { at: convertedPath });\n};\n\n/**\n * Common handler for the tab key on ordered and unordered lists\n */\nconst handleTabOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [currentListItem, currentListItemPath] = currentListItemEntry;\n  const [currentList] = Editor.parent(editor, currentListItemPath);\n\n  // Skip tabbing if list-item is the first item in the list\n  if (currentListItem === currentList.children[0]) return;\n\n  const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);\n  const previousNode = currentList.children[currentListItemIndex - 1];\n\n  // If previous node is a list block then move the list-item under it\n  if (previousNode.type === 'list') {\n    const nodePath = ReactEditor.findPath(editor, previousNode);\n    const insertAtPath = previousNode.children.length;\n\n    Transforms.moveNodes(editor, {\n      at: currentListItemPath,\n      to: nodePath.concat(insertAtPath),\n    });\n    return;\n  }\n\n  if (!Editor.isEditor(currentList) && isListNode(currentList)) {\n    // Wrap list-item with list block on tab\n    Transforms.wrapNodes(editor, {\n      type: 'list',\n      format: currentList.format,\n      indentLevel: (currentList.indentLevel || 0) + 1,\n      children: [],\n    });\n  }\n};\n\n/**\n * Common handler for the shift+tab key on ordered and unordered lists (un-indentation)\n */\n\nconst hasChildren = (node: unknown): node is { children: unknown[] } => {\n  return typeof node === 'object' && node !== null && 'children' in node;\n};\n\nconst isNestedListNode = (node: unknown): node is { type: 'list'; children: unknown[] } => {\n  return hasChildren(node) && 'type' in node && node.type === 'list';\n};\n\nconst handleShiftTabOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [, currentListItemPath] = currentListItemEntry;\n\n  const [currentList] = Editor.parent(editor, currentListItemPath);\n\n  if (!Editor.isEditor(currentList) && isNestedListNode(currentList)) {\n    const parentListPath = Path.parent(currentListItemPath);\n\n    const [parentList] = Editor.parent(editor, parentListPath);\n\n    // Case 1: The parent of the current list is the editor itself.\n    if (Editor.isEditor(parentList)) {\n      // Lift the list item to the top level of the editor's children.\n      Transforms.liftNodes(editor, {\n        at: currentListItemPath,\n        match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n      });\n      // Change the type of the newly lifted node from 'list-item' to 'paragraph'.\n      Transforms.setNodes(editor, { type: 'paragraph' });\n      return;\n    }\n\n    // Case 2: The parent of the current list is another list.\n    if (isNestedListNode(parentList)) {\n      Transforms.liftNodes(editor, {\n        at: currentListItemPath,\n        match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n      });\n\n      try {\n        const [remainingList, remainingListPath] = Editor.node(editor, parentListPath);\n\n        if (isNestedListNode(remainingList) && remainingList.children.length === 0) {\n          Transforms.removeNodes(editor, { at: remainingListPath });\n        }\n      } catch (error) {\n        // The path might no longer exist if the structure changed, which is fine\n      }\n    }\n  }\n};\n\n// All that's in common between ordered and unordered list blocks\nconst baseListBlock = {\n  renderElement: (props) => <List {...props} />,\n  isInBlocksSelector: true,\n  handleEnterKey: handleEnterKeyOnList,\n  handleBackspaceKey: handleBackspaceKeyOnList,\n  handleTab: handleTabOnList,\n  isDraggable: (element) => {\n    if (!isListNode(element)) {\n      throw Error();\n    }\n    const indentLevel = element.indentLevel ?? 0;\n    return indentLevel === 0;\n  },\n} satisfies Partial<BlocksStore['list-ordered' | 'list-unordered']>;\n\nconst listBlocks: Pick<BlocksStore, 'list-ordered' | 'list-unordered' | 'list-item'> = {\n  'list-ordered': {\n    ...baseListBlock,\n    label: {\n      id: 'components.Blocks.blocks.orderedList',\n      defaultMessage: 'Numbered list',\n    },\n    icon: NumberList,\n    matchNode: (node) => node.type === 'list' && node.format === 'ordered',\n    handleConvert: (editor) => handleConvertToList(editor, 'ordered'),\n    handleShiftTab: handleShiftTabOnList,\n    snippets: ['1.'],\n  },\n  'list-unordered': {\n    ...baseListBlock,\n    label: {\n      id: 'components.Blocks.blocks.unorderedList',\n      defaultMessage: 'Bulleted list',\n    },\n    icon: BulletList,\n    matchNode: (node) => node.type === 'list' && node.format === 'unordered',\n    handleConvert: (editor) => handleConvertToList(editor, 'unordered'),\n    handleShiftTab: handleShiftTabOnList,\n    snippets: ['-', '*', '+'],\n  },\n  'list-item': {\n    renderElement: (props) => (\n      <Typography tag=\"li\" {...props.attributes}>\n        {props.children}\n      </Typography>\n    ),\n    // No handleConvert, list items are created when converting to the parent list\n    matchNode: (node) => node.type === 'list-item',\n    isInBlocksSelector: false,\n    dragHandleTopMargin: '-2px',\n    isDraggable: () => false,\n  },\n};\n\nexport { listBlocks };\n"],"names":["listStyle","css","theme","spaces","Orderedlist","styled","ol","props","$listStyleType","Unorderedlist","ul","orderedStyles","unorderedStyles","isListNode","element","type","List","attributes","children","listStyles","format","nextIndex","indentLevel","length","listStyleType","_jsx","replaceListWithEmptyBlock","editor","currentListPath","Transforms","removeNodes","at","insertNodes","text","select","isText","node","Node","isNode","Editor","isEditor","handleBackspaceKeyOnList","event","selection","currentListItem","currentListItemPath","parent","anchor","currentList","isListEmpty","isListItemEmpty","isFocusAtTheBeginningOfAChild","focus","offset","path","parentListEntry","above","match","preventDefault","liftNodes","setNodes","previousEntry","previous","nextEntry","next","previousList","nextList","mergeNodes","handleEnterKeyOnList","currentListItemEntry","currentNode","updatedPath","slice","concat","previousIndentLevel","parentListNodeEntry","modifiedPath","moveNodes","to","createdParagraphPath","Path","isNodeEnd","isEnd","splitNodes","handleConvertToList","convertedPath","baseHandleConvert","wrapNodes","handleTabOnList","currentListItemIndex","findIndex","item","previousNode","nodePath","ReactEditor","findPath","insertAtPath","hasChildren","isNestedListNode","handleShiftTabOnList","parentListPath","parentList","remainingList","remainingListPath","error","baseListBlock","renderElement","isInBlocksSelector","handleEnterKey","handleBackspaceKey","handleTab","isDraggable","Error","listBlocks","label","id","defaultMessage","icon","NumberList","matchNode","handleConvert","handleShiftTab","snippets","BulletList","Typography","tag","dragHandleTopMargin"],"mappings":"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"}
+{"version":3,"file":"List.mjs","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/List.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography } from '@strapi/design-system';\nimport { BulletList, NumberList } from '@strapi/icons';\nimport { Schema } from '@strapi/types';\nimport { type Text, Editor, Node, Transforms, Path, Element } from 'slate';\nimport { type RenderElementProps, ReactEditor } from 'slate-react';\nimport { styled, type CSSProperties, css } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst listStyle = css`\n  display: flex;\n  flex-direction: column;\n  gap: ${({ theme }) => theme.spaces[2]};\n  margin-inline-start: ${({ theme }) => theme.spaces[0]};\n  margin-inline-end: ${({ theme }) => theme.spaces[0]};\n  padding-inline-start: ${({ theme }) => theme.spaces[2]};\n\n  ol,\n  ul {\n    margin-block-start: ${({ theme }) => theme.spaces[0]};\n    margin-block-end: ${({ theme }) => theme.spaces[0]};\n  }\n\n  li {\n    margin-inline-start: ${({ theme }) => theme.spaces[3]};\n  }\n`;\n\nconst Orderedlist = styled.ol<{ $listStyleType: CSSProperties['listStyleType'] }>`\n  list-style-type: ${(props) => props.$listStyleType};\n  ${listStyle}\n`;\n\nconst Unorderedlist = styled.ul<{ $listStyleType: CSSProperties['listStyleType'] }>`\n  list-style-type: ${(props) => props.$listStyleType};\n  ${listStyle}\n`;\n\nconst orderedStyles = ['decimal', 'lower-alpha', 'upper-roman'];\nconst unorderedStyles = ['disc', 'circle', 'square'];\n\nconst isListNode = (element: Element): element is Schema.Attribute.ListBlockNode => {\n  return element.type === 'list';\n};\n\nconst List = ({ attributes, children, element }: RenderElementProps) => {\n  if (!isListNode(element)) {\n    return null;\n  }\n\n  // Decide the subsequent style by referencing the given styles according to the format,\n  // allowing for infinite nested lists\n  const listStyles = element.format === 'ordered' ? orderedStyles : unorderedStyles;\n  const nextIndex = (element.indentLevel || 0) % listStyles!.length;\n  const listStyleType = listStyles![nextIndex];\n\n  if (element.format === 'ordered') {\n    return (\n      <Orderedlist $listStyleType={listStyleType} {...attributes}>\n        {children}\n      </Orderedlist>\n    );\n  }\n\n  return (\n    <Unorderedlist $listStyleType={listStyleType} {...attributes}>\n      {children}\n    </Unorderedlist>\n  );\n};\n\nconst replaceListWithEmptyBlock = (editor: Editor, currentListPath: Path) => {\n  // Delete the empty list\n  Transforms.removeNodes(editor, { at: currentListPath });\n\n  if (currentListPath[0] === 0) {\n    // If the list was the only (or first) block element then insert empty paragraph as editor needs default value\n    Transforms.insertNodes(\n      editor,\n      {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      },\n      { at: currentListPath }\n    );\n    Transforms.select(editor, currentListPath);\n  }\n};\n\nconst isText = (node: unknown): node is Text => {\n  return Node.isNode(node) && !Editor.isEditor(node) && node.type === 'text';\n};\n\n/**\n * Common handler for the backspace event on ordered and unordered lists\n */\nconst handleBackspaceKeyOnList = (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => {\n  if (!editor.selection) return;\n\n  const [currentListItem, currentListItemPath] = Editor.parent(editor, editor.selection.anchor);\n  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);\n  const isListEmpty =\n    currentList.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isListItemEmpty =\n    currentListItem.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isFocusAtTheBeginningOfAChild =\n    editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-2) === 0;\n\n  if (isListEmpty) {\n    const parentListEntry = Editor.above(editor, {\n      at: currentListPath,\n      match: (node) => !Editor.isEditor(node) && node.type === 'list',\n    });\n    if (!parentListEntry) {\n      event.preventDefault();\n      replaceListWithEmptyBlock(editor, currentListPath);\n    }\n  } else if (isFocusAtTheBeginningOfAChild) {\n    // If the focus is at the beginning of a child node we need to replace it with a paragraph\n    Transforms.liftNodes(editor, {\n      match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n    });\n    Transforms.setNodes(editor, { type: 'paragraph' });\n  } else if (isListItemEmpty) {\n    const previousEntry = Editor.previous(editor, {\n      at: currentListItemPath,\n    });\n    const nextEntry = Editor.next(editor, {\n      at: currentListItemPath,\n    });\n\n    if (previousEntry && nextEntry) {\n      // If previous and next nodes are lists or list-items, delete empty list item\n      event.preventDefault();\n      Transforms.removeNodes(editor, {\n        at: currentListItemPath,\n      });\n\n      // If previous and next nodes are lists with same format and indent Levels, then merge the nodes\n      const [previousList] = previousEntry;\n      const [nextList] = nextEntry;\n      if (\n        !Editor.isEditor(previousList) &&\n        !isText(previousList) &&\n        isListNode(previousList) &&\n        !Editor.isEditor(nextList) &&\n        !isText(nextList) &&\n        isListNode(nextList)\n      ) {\n        if (\n          previousList.type === 'list' &&\n          nextList.type === 'list' &&\n          previousList.format === nextList.format &&\n          previousList.indentLevel === nextList.indentLevel\n        ) {\n          Transforms.mergeNodes(editor, {\n            at: currentListItemPath,\n          });\n        }\n      }\n    }\n  }\n};\n\n/**\n * Common handler for the enter key on ordered and unordered lists\n */\nconst handleEnterKeyOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [currentListItem, currentListItemPath] = currentListItemEntry;\n  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);\n  const isListEmpty =\n    currentList.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isListItemEmpty =\n    currentListItem.children.length === 1 &&\n    isText(currentListItem.children[0]) &&\n    currentListItem.children[0].text === '';\n  const isFocusAtTheBeginningOfAChild =\n    editor.selection.focus.offset === 0 && editor.selection.focus.path.at(-1) === 0;\n\n  if (isListEmpty) {\n    replaceListWithEmptyBlock(editor, currentListPath);\n  } else if (isFocusAtTheBeginningOfAChild && !isListItemEmpty) {\n    // If the focus is at the beginning of a child node, shift below the list item and create a new list-item\n    const currentNode = Editor.above(editor, { at: editor.selection.anchor });\n    Transforms.insertNodes(editor, { type: 'list-item', children: [{ type: 'text', text: '' }] });\n    if (currentNode) {\n      const path = currentNode[1];\n      const updatedPath = [...path.slice(0, -1), path[path.length - 1] + 1];\n      Transforms.select(editor, {\n        anchor: { path: updatedPath.concat(0), offset: 0 },\n        focus: { path: updatedPath.concat(0), offset: 0 },\n      });\n    }\n  } else if (isListItemEmpty) {\n    // Check if there is a list above the current list and shift list-item under it\n    if (\n      !Editor.isEditor(currentList) &&\n      isListNode(currentList) &&\n      currentList?.indentLevel &&\n      currentList.indentLevel > 0\n    ) {\n      const previousIndentLevel = currentList.indentLevel - 1;\n\n      const parentListNodeEntry = Editor.above(editor, {\n        match: (node) =>\n          !Editor.isEditor(node) &&\n          node.type === 'list' &&\n          (node.indentLevel || 0) === previousIndentLevel,\n      });\n\n      if (parentListNodeEntry) {\n        // Get the parent list path and add 1 to it to exit from the current list\n        const modifiedPath = currentListItemPath.slice(0, -1);\n        if (modifiedPath.length > 0) {\n          modifiedPath[modifiedPath.length - 1] += 1;\n        }\n\n        // Shift list-item under parent list\n        Transforms.moveNodes(editor, {\n          at: currentListItemPath,\n          to: modifiedPath,\n        });\n        return;\n      }\n    }\n\n    // Otherwise delete the empty list item and create a new paragraph below the parent list\n    Transforms.removeNodes(editor, { at: currentListItemPath });\n\n    const createdParagraphPath = Path.next(currentListPath);\n    Transforms.insertNodes(\n      editor,\n      {\n        type: 'paragraph',\n        children: [{ type: 'text', text: '' }],\n      },\n      { at: createdParagraphPath }\n    );\n\n    // Move the selection to the newly created paragraph\n    Transforms.select(editor, createdParagraphPath);\n  } else {\n    // Check if the cursor is at the end of the list item\n    const isNodeEnd = Editor.isEnd(editor, editor.selection.anchor, currentListItemPath);\n\n    if (isNodeEnd) {\n      // If there was nothing after the cursor, create a fresh new list item,\n      // in order to avoid carrying over the modifiers from the previous list item\n      Transforms.insertNodes(editor, { type: 'list-item', children: [{ type: 'text', text: '' }] });\n    } else {\n      // If there is something after the cursor, split the current list item,\n      // so that we keep the content and the modifiers\n      Transforms.splitNodes(editor);\n    }\n  }\n};\n\n/**\n * Common handler for converting a node to a list\n */\nconst handleConvertToList = (editor: Editor, format: Block<'list'>['format']) => {\n  const convertedPath = baseHandleConvert<Block<'list-item'>>(editor, { type: 'list-item' });\n\n  if (!convertedPath) return;\n\n  Transforms.wrapNodes(editor, { type: 'list', format, children: [] }, { at: convertedPath });\n};\n\n/**\n * Common handler for the tab key on ordered and unordered lists\n */\nconst handleTabOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [currentListItem, currentListItemPath] = currentListItemEntry;\n  const [currentList] = Editor.parent(editor, currentListItemPath);\n\n  // Skip tabbing if list-item is the first item in the list\n  if (currentListItem === currentList.children[0]) return;\n\n  const currentListItemIndex = currentList.children.findIndex((item) => item === currentListItem);\n  const previousNode = currentList.children[currentListItemIndex - 1];\n\n  // If previous node is a list block then move the list-item under it\n  if (previousNode.type === 'list') {\n    const nodePath = ReactEditor.findPath(editor, previousNode);\n    const insertAtPath = previousNode.children.length;\n\n    Transforms.moveNodes(editor, {\n      at: currentListItemPath,\n      to: nodePath.concat(insertAtPath),\n    });\n    return;\n  }\n\n  if (!Editor.isEditor(currentList) && isListNode(currentList)) {\n    // Wrap list-item with list block on tab\n    Transforms.wrapNodes(editor, {\n      type: 'list',\n      format: currentList.format,\n      indentLevel: (currentList.indentLevel || 0) + 1,\n      children: [],\n    });\n  }\n};\n\n/**\n * Common handler for the shift+tab key on ordered and unordered lists (un-indentation)\n */\n\nconst hasChildren = (node: unknown): node is { children: unknown[] } => {\n  return typeof node === 'object' && node !== null && 'children' in node;\n};\n\nconst isNestedListNode = (node: unknown): node is { type: 'list'; children: unknown[] } => {\n  return hasChildren(node) && 'type' in node && node.type === 'list';\n};\n\nconst handleShiftTabOnList = (editor: Editor) => {\n  const currentListItemEntry = Editor.above(editor, {\n    match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n  });\n\n  if (!currentListItemEntry || !editor.selection) {\n    return;\n  }\n\n  const [, currentListItemPath] = currentListItemEntry;\n\n  const [currentList] = Editor.parent(editor, currentListItemPath);\n\n  if (!Editor.isEditor(currentList) && isNestedListNode(currentList)) {\n    const parentListPath = Path.parent(currentListItemPath);\n\n    const [parentList] = Editor.parent(editor, parentListPath);\n\n    // Case 1: The parent of the current list is the editor itself.\n    if (Editor.isEditor(parentList)) {\n      // Lift the list item to the top level of the editor's children.\n      Transforms.liftNodes(editor, {\n        at: currentListItemPath,\n        match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n      });\n      // Change the type of the newly lifted node from 'list-item' to 'paragraph'.\n      Transforms.setNodes(editor, { type: 'paragraph' });\n      return;\n    }\n\n    // Case 2: The parent of the current list is another list.\n    if (isNestedListNode(parentList)) {\n      Transforms.liftNodes(editor, {\n        at: currentListItemPath,\n        match: (node) => !Editor.isEditor(node) && 'type' in node && node.type === 'list-item',\n      });\n\n      try {\n        const [remainingList, remainingListPath] = Editor.node(editor, parentListPath);\n\n        if (isNestedListNode(remainingList) && remainingList.children.length === 0) {\n          Transforms.removeNodes(editor, { at: remainingListPath });\n        }\n      } catch {\n        // The path might no longer exist if the structure changed, which is fine\n      }\n    }\n  }\n};\n\n// All that's in common between ordered and unordered list blocks\nconst baseListBlock = {\n  renderElement: (props) => <List {...props} />,\n  isInBlocksSelector: true,\n  handleEnterKey: handleEnterKeyOnList,\n  handleBackspaceKey: handleBackspaceKeyOnList,\n  handleTab: handleTabOnList,\n  isDraggable: (element) => {\n    if (!isListNode(element)) {\n      throw Error();\n    }\n    const indentLevel = element.indentLevel ?? 0;\n    return indentLevel === 0;\n  },\n} satisfies Partial<BlocksStore['list-ordered' | 'list-unordered']>;\n\nconst listBlocks: Pick<BlocksStore, 'list-ordered' | 'list-unordered' | 'list-item'> = {\n  'list-ordered': {\n    ...baseListBlock,\n    label: {\n      id: 'components.Blocks.blocks.orderedList',\n      defaultMessage: 'Numbered list',\n    },\n    icon: NumberList,\n    matchNode: (node) => node.type === 'list' && node.format === 'ordered',\n    handleConvert: (editor) => handleConvertToList(editor, 'ordered'),\n    handleShiftTab: handleShiftTabOnList,\n    snippets: ['1.'],\n  },\n  'list-unordered': {\n    ...baseListBlock,\n    label: {\n      id: 'components.Blocks.blocks.unorderedList',\n      defaultMessage: 'Bulleted list',\n    },\n    icon: BulletList,\n    matchNode: (node) => node.type === 'list' && node.format === 'unordered',\n    handleConvert: (editor) => handleConvertToList(editor, 'unordered'),\n    handleShiftTab: handleShiftTabOnList,\n    snippets: ['-', '*', '+'],\n  },\n  'list-item': {\n    renderElement: (props) => (\n      <Typography tag=\"li\" {...props.attributes}>\n        {props.children}\n      </Typography>\n    ),\n    // No handleConvert, list items are created when converting to the parent list\n    matchNode: (node) => node.type === 'list-item',\n    isInBlocksSelector: false,\n    dragHandleTopMargin: '-2px',\n    isDraggable: () => false,\n  },\n};\n\nexport { listBlocks };\n"],"names":["listStyle","css","theme","spaces","Orderedlist","styled","ol","props","$listStyleType","Unorderedlist","ul","orderedStyles","unorderedStyles","isListNode","element","type","List","attributes","children","listStyles","format","nextIndex","indentLevel","length","listStyleType","_jsx","replaceListWithEmptyBlock","editor","currentListPath","Transforms","removeNodes","at","insertNodes","text","select","isText","node","Node","isNode","Editor","isEditor","handleBackspaceKeyOnList","event","selection","currentListItem","currentListItemPath","parent","anchor","currentList","isListEmpty","isListItemEmpty","isFocusAtTheBeginningOfAChild","focus","offset","path","parentListEntry","above","match","preventDefault","liftNodes","setNodes","previousEntry","previous","nextEntry","next","previousList","nextList","mergeNodes","handleEnterKeyOnList","currentListItemEntry","currentNode","updatedPath","slice","concat","previousIndentLevel","parentListNodeEntry","modifiedPath","moveNodes","to","createdParagraphPath","Path","isNodeEnd","isEnd","splitNodes","handleConvertToList","convertedPath","baseHandleConvert","wrapNodes","handleTabOnList","currentListItemIndex","findIndex","item","previousNode","nodePath","ReactEditor","findPath","insertAtPath","hasChildren","isNestedListNode","handleShiftTabOnList","parentListPath","parentList","remainingList","remainingListPath","baseListBlock","renderElement","isInBlocksSelector","handleEnterKey","handleBackspaceKey","handleTab","isDraggable","Error","listBlocks","label","id","defaultMessage","icon","NumberList","matchNode","handleConvert","handleShiftTab","snippets","BulletList","Typography","tag","dragHandleTopMargin"],"mappings":";;;;;;;;;AAaA,MAAMA,SAAAA,GAAYC,GAAG;;;OAGd,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;uBACjB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;qBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;wBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;wBAIjC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;yBAI9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;AAE1D,CAAC;AAED,MAAMC,WAAAA,GAAcC,MAAAA,CAAOC,EAAsD;AAC9D,mBAAA,EAAE,CAACC,KAAAA,GAAUA,KAAAA,CAAMC,cAAc,CAAC;AACnD,EAAA,EAAER,SAAAA;AACJ,CAAC;AAED,MAAMS,aAAAA,GAAgBJ,MAAAA,CAAOK,EAAsD;AAChE,mBAAA,EAAE,CAACH,KAAAA,GAAUA,KAAAA,CAAMC,cAAc,CAAC;AACnD,EAAA,EAAER,SAAAA;AACJ,CAAC;AAED,MAAMW,aAAAA,GAAgB;AAAC,IAAA,SAAA;AAAW,IAAA,aAAA;AAAe,IAAA;AAAc,CAAA;AAC/D,MAAMC,eAAAA,GAAkB;AAAC,IAAA,MAAA;AAAQ,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA;AAEpD,MAAMC,aAAa,CAACC,OAAAA,GAAAA;IAClB,OAAOA,OAAAA,CAAQC,IAAI,KAAK,MAAA;AAC1B,CAAA;AAEA,MAAMC,IAAAA,GAAO,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAAEJ,OAAO,EAAsB,GAAA;IACjE,IAAI,CAACD,WAAWC,OAAAA,CAAAA,EAAU;QACxB,OAAO,IAAA;AACT,IAAA;;;AAIA,IAAA,MAAMK,UAAAA,GAAaL,OAAAA,CAAQM,MAAM,KAAK,YAAYT,aAAAA,GAAgBC,eAAAA;IAClE,MAAMS,SAAAA,GAAY,CAACP,OAAAA,CAAQQ,WAAW,IAAI,CAAA,IAAKH,UAAAA,CAAYI,MAAM;IACjE,MAAMC,aAAAA,GAAgBL,UAAW,CAACE,SAAAA,CAAU;IAE5C,IAAIP,OAAAA,CAAQM,MAAM,KAAK,SAAA,EAAW;AAChC,QAAA,qBACEK,GAAA,CAACrB,WAAAA,EAAAA;YAAYI,cAAAA,EAAgBgB,aAAAA;AAAgB,YAAA,GAAGP,UAAU;AACvDC,YAAAA,QAAAA,EAAAA;;AAGP,IAAA;AAEA,IAAA,qBACEO,GAAA,CAAChB,aAAAA,EAAAA;QAAcD,cAAAA,EAAgBgB,aAAAA;AAAgB,QAAA,GAAGP,UAAU;AACzDC,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;AAEA,MAAMQ,yBAAAA,GAA4B,CAACC,MAAAA,EAAgBC,eAAAA,GAAAA;;IAEjDC,UAAAA,CAAWC,WAAW,CAACH,MAAAA,EAAQ;QAAEI,EAAAA,EAAIH;AAAgB,KAAA,CAAA;AAErD,IAAA,IAAIA,eAAe,CAAC,CAAA,CAAE,KAAK,CAAA,EAAG;;QAE5BC,UAAAA,CAAWG,WAAW,CACpBL,MAAAA,EACA;YACEZ,IAAAA,EAAM,WAAA;YACNG,QAAAA,EAAU;AAAC,gBAAA;oBAAEH,IAAAA,EAAM,MAAA;oBAAQkB,IAAAA,EAAM;AAAG;AAAE;SACxC,EACA;YAAEF,EAAAA,EAAIH;AAAgB,SAAA,CAAA;QAExBC,UAAAA,CAAWK,MAAM,CAACP,MAAAA,EAAQC,eAAAA,CAAAA;AAC5B,IAAA;AACF,CAAA;AAEA,MAAMO,SAAS,CAACC,IAAAA,GAAAA;IACd,OAAOC,IAAAA,CAAKC,MAAM,CAACF,IAAAA,CAAAA,IAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAASA,IAAAA,CAAKrB,IAAI,KAAK,MAAA;AACtE,CAAA;AAEA;;IAGA,MAAM0B,wBAAAA,GAA2B,CAACd,MAAAA,EAAgBe,KAAAA,GAAAA;IAChD,IAAI,CAACf,MAAAA,CAAOgB,SAAS,EAAE;IAEvB,MAAM,CAACC,eAAAA,EAAiBC,mBAAAA,CAAoB,GAAGN,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQA,MAAAA,CAAOgB,SAAS,CAACI,MAAM,CAAA;AAC5F,IAAA,MAAM,CAACC,WAAAA,EAAapB,eAAAA,CAAgB,GAAGW,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQkB,mBAAAA,CAAAA;AAC7D,IAAA,MAAMI,cACJD,WAAAA,CAAY9B,QAAQ,CAACK,MAAM,KAAK,KAChCY,MAAAA,CAAOS,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,KAClC0B,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,CAACe,IAAI,KAAK,EAAA;AACvC,IAAA,MAAMiB,kBACJN,eAAAA,CAAgB1B,QAAQ,CAACK,MAAM,KAAK,KACpCY,MAAAA,CAAOS,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,KAClC0B,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,CAACe,IAAI,KAAK,EAAA;AACvC,IAAA,MAAMkB,gCACJxB,MAAAA,CAAOgB,SAAS,CAACS,KAAK,CAACC,MAAM,KAAK,CAAA,IAAK1B,OAAOgB,SAAS,CAACS,KAAK,CAACE,IAAI,CAACvB,EAAE,CAAC,EAAC,CAAA,KAAO,CAAA;AAEhF,IAAA,IAAIkB,WAAAA,EAAa;AACf,QAAA,MAAMM,eAAAA,GAAkBhB,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;YAC3CI,EAAAA,EAAIH,eAAAA;YACJ6B,KAAAA,EAAO,CAACrB,OAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAASA,IAAAA,CAAKrB,IAAI,KAAK;AAC3D,SAAA,CAAA;AACA,QAAA,IAAI,CAACwC,eAAAA,EAAiB;AACpBb,YAAAA,KAAAA,CAAMgB,cAAc,EAAA;AACpBhC,YAAAA,yBAAAA,CAA0BC,MAAAA,EAAQC,eAAAA,CAAAA;AACpC,QAAA;AACF,IAAA,CAAA,MAAO,IAAIuB,6BAAAA,EAA+B;;QAExCtB,UAAAA,CAAW8B,SAAS,CAAChC,MAAAA,EAAQ;YAC3B8B,KAAAA,EAAO,CAACrB,OAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAASA,IAAAA,CAAKrB,IAAI,KAAK;AAC3D,SAAA,CAAA;QACAc,UAAAA,CAAW+B,QAAQ,CAACjC,MAAAA,EAAQ;YAAEZ,IAAAA,EAAM;AAAY,SAAA,CAAA;AAClD,IAAA,CAAA,MAAO,IAAImC,eAAAA,EAAiB;AAC1B,QAAA,MAAMW,aAAAA,GAAgBtB,MAAAA,CAAOuB,QAAQ,CAACnC,MAAAA,EAAQ;YAC5CI,EAAAA,EAAIc;AACN,SAAA,CAAA;AACA,QAAA,MAAMkB,SAAAA,GAAYxB,MAAAA,CAAOyB,IAAI,CAACrC,MAAAA,EAAQ;YACpCI,EAAAA,EAAIc;AACN,SAAA,CAAA;AAEA,QAAA,IAAIgB,iBAAiBE,SAAAA,EAAW;;AAE9BrB,YAAAA,KAAAA,CAAMgB,cAAc,EAAA;YACpB7B,UAAAA,CAAWC,WAAW,CAACH,MAAAA,EAAQ;gBAC7BI,EAAAA,EAAIc;AACN,aAAA,CAAA;;YAGA,MAAM,CAACoB,aAAa,GAAGJ,aAAAA;YACvB,MAAM,CAACK,SAAS,GAAGH,SAAAA;AACnB,YAAA,IACE,CAACxB,MAAAA,CAAOC,QAAQ,CAACyB,YAAAA,CAAAA,IACjB,CAAC9B,OAAO8B,YAAAA,CAAAA,IACRpD,UAAAA,CAAWoD,iBACX,CAAC1B,MAAAA,CAAOC,QAAQ,CAAC0B,QAAAA,CAAAA,IACjB,CAAC/B,MAAAA,CAAO+B,QAAAA,CAAAA,IACRrD,WAAWqD,QAAAA,CAAAA,EACX;AACA,gBAAA,IACED,aAAalD,IAAI,KAAK,UACtBmD,QAAAA,CAASnD,IAAI,KAAK,MAAA,IAClBkD,YAAAA,CAAa7C,MAAM,KAAK8C,QAAAA,CAAS9C,MAAM,IACvC6C,YAAAA,CAAa3C,WAAW,KAAK4C,QAAAA,CAAS5C,WAAW,EACjD;oBACAO,UAAAA,CAAWsC,UAAU,CAACxC,MAAAA,EAAQ;wBAC5BI,EAAAA,EAAIc;AACN,qBAAA,CAAA;AACF,gBAAA;AACF,YAAA;AACF,QAAA;AACF,IAAA;AACF,CAAA;AAEA;;IAGA,MAAMuB,uBAAuB,CAACzC,MAAAA,GAAAA;AAC5B,IAAA,MAAM0C,oBAAAA,GAAuB9B,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;QAChD8B,KAAAA,EAAO,CAACrB,OAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAASA,IAAAA,CAAKrB,IAAI,KAAK;AAC3D,KAAA,CAAA;AAEA,IAAA,IAAI,CAACsD,oBAAAA,IAAwB,CAAC1C,MAAAA,CAAOgB,SAAS,EAAE;AAC9C,QAAA;AACF,IAAA;IAEA,MAAM,CAACC,eAAAA,EAAiBC,mBAAAA,CAAoB,GAAGwB,oBAAAA;AAC/C,IAAA,MAAM,CAACrB,WAAAA,EAAapB,eAAAA,CAAgB,GAAGW,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQkB,mBAAAA,CAAAA;AAC7D,IAAA,MAAMI,cACJD,WAAAA,CAAY9B,QAAQ,CAACK,MAAM,KAAK,KAChCY,MAAAA,CAAOS,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,KAClC0B,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,CAACe,IAAI,KAAK,EAAA;AACvC,IAAA,MAAMiB,kBACJN,eAAAA,CAAgB1B,QAAQ,CAACK,MAAM,KAAK,KACpCY,MAAAA,CAAOS,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,KAClC0B,eAAAA,CAAgB1B,QAAQ,CAAC,CAAA,CAAE,CAACe,IAAI,KAAK,EAAA;AACvC,IAAA,MAAMkB,gCACJxB,MAAAA,CAAOgB,SAAS,CAACS,KAAK,CAACC,MAAM,KAAK,CAAA,IAAK1B,OAAOgB,SAAS,CAACS,KAAK,CAACE,IAAI,CAACvB,EAAE,CAAC,EAAC,CAAA,KAAO,CAAA;AAEhF,IAAA,IAAIkB,WAAAA,EAAa;AACfvB,QAAAA,yBAAAA,CAA0BC,MAAAA,EAAQC,eAAAA,CAAAA;IACpC,CAAA,MAAO,IAAIuB,6BAAAA,IAAiC,CAACD,eAAAA,EAAiB;;AAE5D,QAAA,MAAMoB,WAAAA,GAAc/B,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;YAAEI,EAAAA,EAAIJ,MAAAA,CAAOgB,SAAS,CAACI;AAAO,SAAA,CAAA;QACvElB,UAAAA,CAAWG,WAAW,CAACL,MAAAA,EAAQ;YAAEZ,IAAAA,EAAM,WAAA;YAAaG,QAAAA,EAAU;AAAC,gBAAA;oBAAEH,IAAAA,EAAM,MAAA;oBAAQkB,IAAAA,EAAM;AAAG;AAAE;AAAC,SAAA,CAAA;AAC3F,QAAA,IAAIqC,WAAAA,EAAa;YACf,MAAMhB,IAAAA,GAAOgB,WAAW,CAAC,CAAA,CAAE;AAC3B,YAAA,MAAMC,WAAAA,GAAc;mBAAIjB,IAAAA,CAAKkB,KAAK,CAAC,CAAA,EAAG,EAAC,CAAA;AAAIlB,gBAAAA,IAAI,CAACA,IAAAA,CAAK/B,MAAM,GAAG,EAAE,GAAG;AAAE,aAAA;YACrEM,UAAAA,CAAWK,MAAM,CAACP,MAAAA,EAAQ;gBACxBoB,MAAAA,EAAQ;oBAAEO,IAAAA,EAAMiB,WAAAA,CAAYE,MAAM,CAAC,CAAA,CAAA;oBAAIpB,MAAAA,EAAQ;AAAE,iBAAA;gBACjDD,KAAAA,EAAO;oBAAEE,IAAAA,EAAMiB,WAAAA,CAAYE,MAAM,CAAC,CAAA,CAAA;oBAAIpB,MAAAA,EAAQ;AAAE;AAClD,aAAA,CAAA;AACF,QAAA;AACF,IAAA,CAAA,MAAO,IAAIH,eAAAA,EAAiB;;AAE1B,QAAA,IACE,CAACX,MAAAA,CAAOC,QAAQ,CAACQ,WAAAA,CAAAA,IACjBnC,UAAAA,CAAWmC,WAAAA,CAAAA,IACXA,WAAAA,EAAa1B,WAAAA,IACb0B,WAAAA,CAAY1B,WAAW,GAAG,CAAA,EAC1B;YACA,MAAMoD,mBAAAA,GAAsB1B,WAAAA,CAAY1B,WAAW,GAAG,CAAA;AAEtD,YAAA,MAAMqD,mBAAAA,GAAsBpC,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;AAC/C8B,gBAAAA,KAAAA,EAAO,CAACrB,IAAAA,GACN,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IACjBA,IAAAA,CAAKrB,IAAI,KAAK,UACd,CAACqB,KAAKd,WAAW,IAAI,CAAA,MAAOoD;AAChC,aAAA,CAAA;AAEA,YAAA,IAAIC,mBAAAA,EAAqB;;AAEvB,gBAAA,MAAMC,YAAAA,GAAe/B,mBAAAA,CAAoB2B,KAAK,CAAC,GAAG,EAAC,CAAA;gBACnD,IAAII,YAAAA,CAAarD,MAAM,GAAG,CAAA,EAAG;AAC3BqD,oBAAAA,YAAY,CAACA,YAAAA,CAAarD,MAAM,GAAG,EAAE,IAAI,CAAA;AAC3C,gBAAA;;gBAGAM,UAAAA,CAAWgD,SAAS,CAAClD,MAAAA,EAAQ;oBAC3BI,EAAAA,EAAIc,mBAAAA;oBACJiC,EAAAA,EAAIF;AACN,iBAAA,CAAA;AACA,gBAAA;AACF,YAAA;AACF,QAAA;;QAGA/C,UAAAA,CAAWC,WAAW,CAACH,MAAAA,EAAQ;YAAEI,EAAAA,EAAIc;AAAoB,SAAA,CAAA;QAEzD,MAAMkC,oBAAAA,GAAuBC,IAAAA,CAAKhB,IAAI,CAACpC,eAAAA,CAAAA;QACvCC,UAAAA,CAAWG,WAAW,CACpBL,MAAAA,EACA;YACEZ,IAAAA,EAAM,WAAA;YACNG,QAAAA,EAAU;AAAC,gBAAA;oBAAEH,IAAAA,EAAM,MAAA;oBAAQkB,IAAAA,EAAM;AAAG;AAAE;SACxC,EACA;YAAEF,EAAAA,EAAIgD;AAAqB,SAAA,CAAA;;QAI7BlD,UAAAA,CAAWK,MAAM,CAACP,MAAAA,EAAQoD,oBAAAA,CAAAA;IAC5B,CAAA,MAAO;;QAEL,MAAME,SAAAA,GAAY1C,OAAO2C,KAAK,CAACvD,QAAQA,MAAAA,CAAOgB,SAAS,CAACI,MAAM,EAAEF,mBAAAA,CAAAA;AAEhE,QAAA,IAAIoC,SAAAA,EAAW;;;YAGbpD,UAAAA,CAAWG,WAAW,CAACL,MAAAA,EAAQ;gBAAEZ,IAAAA,EAAM,WAAA;gBAAaG,QAAAA,EAAU;AAAC,oBAAA;wBAAEH,IAAAA,EAAM,MAAA;wBAAQkB,IAAAA,EAAM;AAAG;AAAE;AAAC,aAAA,CAAA;QAC7F,CAAA,MAAO;;;AAGLJ,YAAAA,UAAAA,CAAWsD,UAAU,CAACxD,MAAAA,CAAAA;AACxB,QAAA;AACF,IAAA;AACF,CAAA;AAEA;;IAGA,MAAMyD,mBAAAA,GAAsB,CAACzD,MAAAA,EAAgBP,MAAAA,GAAAA;IAC3C,MAAMiE,aAAAA,GAAgBC,kBAAsC3D,MAAAA,EAAQ;QAAEZ,IAAAA,EAAM;AAAY,KAAA,CAAA;AAExF,IAAA,IAAI,CAACsE,aAAAA,EAAe;IAEpBxD,UAAAA,CAAW0D,SAAS,CAAC5D,MAAAA,EAAQ;QAAEZ,IAAAA,EAAM,MAAA;AAAQK,QAAAA,MAAAA;AAAQF,QAAAA,QAAAA,EAAU;KAAG,EAAG;QAAEa,EAAAA,EAAIsD;AAAc,KAAA,CAAA;AAC3F,CAAA;AAEA;;IAGA,MAAMG,kBAAkB,CAAC7D,MAAAA,GAAAA;AACvB,IAAA,MAAM0C,oBAAAA,GAAuB9B,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;QAChD8B,KAAAA,EAAO,CAACrB,OAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAASA,IAAAA,CAAKrB,IAAI,KAAK;AAC3D,KAAA,CAAA;AAEA,IAAA,IAAI,CAACsD,oBAAAA,IAAwB,CAAC1C,MAAAA,CAAOgB,SAAS,EAAE;AAC9C,QAAA;AACF,IAAA;IAEA,MAAM,CAACC,eAAAA,EAAiBC,mBAAAA,CAAoB,GAAGwB,oBAAAA;AAC/C,IAAA,MAAM,CAACrB,WAAAA,CAAY,GAAGT,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQkB,mBAAAA,CAAAA;;AAG5C,IAAA,IAAID,eAAAA,KAAoBI,WAAAA,CAAY9B,QAAQ,CAAC,EAAE,EAAE;IAEjD,MAAMuE,oBAAAA,GAAuBzC,YAAY9B,QAAQ,CAACwE,SAAS,CAAC,CAACC,OAASA,IAAAA,KAAS/C,eAAAA,CAAAA;AAC/E,IAAA,MAAMgD,YAAAA,GAAe5C,WAAAA,CAAY9B,QAAQ,CAACuE,uBAAuB,CAAA,CAAE;;IAGnE,IAAIG,YAAAA,CAAa7E,IAAI,KAAK,MAAA,EAAQ;AAChC,QAAA,MAAM8E,QAAAA,GAAWC,WAAAA,CAAYC,QAAQ,CAACpE,MAAAA,EAAQiE,YAAAA,CAAAA;AAC9C,QAAA,MAAMI,YAAAA,GAAeJ,YAAAA,CAAa1E,QAAQ,CAACK,MAAM;QAEjDM,UAAAA,CAAWgD,SAAS,CAAClD,MAAAA,EAAQ;YAC3BI,EAAAA,EAAIc,mBAAAA;YACJiC,EAAAA,EAAIe,QAAAA,CAASpB,MAAM,CAACuB,YAAAA;AACtB,SAAA,CAAA;AACA,QAAA;AACF,IAAA;AAEA,IAAA,IAAI,CAACzD,MAAAA,CAAOC,QAAQ,CAACQ,WAAAA,CAAAA,IAAgBnC,WAAWmC,WAAAA,CAAAA,EAAc;;QAE5DnB,UAAAA,CAAW0D,SAAS,CAAC5D,MAAAA,EAAQ;YAC3BZ,IAAAA,EAAM,MAAA;AACNK,YAAAA,MAAAA,EAAQ4B,YAAY5B,MAAM;AAC1BE,YAAAA,WAAAA,EAAa,CAAC0B,WAAAA,CAAY1B,WAAW,IAAI,CAAA,IAAK,CAAA;AAC9CJ,YAAAA,QAAAA,EAAU;AACZ,SAAA,CAAA;AACF,IAAA;AACF,CAAA;AAEA;;IAIA,MAAM+E,cAAc,CAAC7D,IAAAA,GAAAA;AACnB,IAAA,OAAO,OAAOA,IAAAA,KAAS,QAAA,IAAYA,IAAAA,KAAS,QAAQ,UAAA,IAAcA,IAAAA;AACpE,CAAA;AAEA,MAAM8D,mBAAmB,CAAC9D,IAAAA,GAAAA;AACxB,IAAA,OAAO6D,YAAY7D,IAAAA,CAAAA,IAAS,MAAA,IAAUA,IAAAA,IAAQA,IAAAA,CAAKrB,IAAI,KAAK,MAAA;AAC9D,CAAA;AAEA,MAAMoF,uBAAuB,CAACxE,MAAAA,GAAAA;AAC5B,IAAA,MAAM0C,oBAAAA,GAAuB9B,MAAAA,CAAOiB,KAAK,CAAC7B,MAAAA,EAAQ;QAChD8B,KAAAA,EAAO,CAACrB,IAAAA,GAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAAS,MAAA,IAAUA,IAAAA,IAAQA,IAAAA,CAAKrB,IAAI,KAAK;AAC7E,KAAA,CAAA;AAEA,IAAA,IAAI,CAACsD,oBAAAA,IAAwB,CAAC1C,MAAAA,CAAOgB,SAAS,EAAE;AAC9C,QAAA;AACF,IAAA;IAEA,MAAM,GAAGE,oBAAoB,GAAGwB,oBAAAA;AAEhC,IAAA,MAAM,CAACrB,WAAAA,CAAY,GAAGT,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQkB,mBAAAA,CAAAA;AAE5C,IAAA,IAAI,CAACN,MAAAA,CAAOC,QAAQ,CAACQ,WAAAA,CAAAA,IAAgBkD,iBAAiBlD,WAAAA,CAAAA,EAAc;QAClE,MAAMoD,cAAAA,GAAiBpB,IAAAA,CAAKlC,MAAM,CAACD,mBAAAA,CAAAA;AAEnC,QAAA,MAAM,CAACwD,UAAAA,CAAW,GAAG9D,MAAAA,CAAOO,MAAM,CAACnB,MAAAA,EAAQyE,cAAAA,CAAAA;;QAG3C,IAAI7D,MAAAA,CAAOC,QAAQ,CAAC6D,UAAAA,CAAAA,EAAa;;YAE/BxE,UAAAA,CAAW8B,SAAS,CAAChC,MAAAA,EAAQ;gBAC3BI,EAAAA,EAAIc,mBAAAA;gBACJY,KAAAA,EAAO,CAACrB,IAAAA,GAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAAS,MAAA,IAAUA,IAAAA,IAAQA,IAAAA,CAAKrB,IAAI,KAAK;AAC7E,aAAA,CAAA;;YAEAc,UAAAA,CAAW+B,QAAQ,CAACjC,MAAAA,EAAQ;gBAAEZ,IAAAA,EAAM;AAAY,aAAA,CAAA;AAChD,YAAA;AACF,QAAA;;AAGA,QAAA,IAAImF,iBAAiBG,UAAAA,CAAAA,EAAa;YAChCxE,UAAAA,CAAW8B,SAAS,CAAChC,MAAAA,EAAQ;gBAC3BI,EAAAA,EAAIc,mBAAAA;gBACJY,KAAAA,EAAO,CAACrB,IAAAA,GAAS,CAACG,MAAAA,CAAOC,QAAQ,CAACJ,IAAAA,CAAAA,IAAS,MAAA,IAAUA,IAAAA,IAAQA,IAAAA,CAAKrB,IAAI,KAAK;AAC7E,aAAA,CAAA;YAEA,IAAI;AACF,gBAAA,MAAM,CAACuF,aAAAA,EAAeC,iBAAAA,CAAkB,GAAGhE,MAAAA,CAAOH,IAAI,CAACT,MAAAA,EAAQyE,cAAAA,CAAAA;AAE/D,gBAAA,IAAIF,iBAAiBI,aAAAA,CAAAA,IAAkBA,aAAAA,CAAcpF,QAAQ,CAACK,MAAM,KAAK,CAAA,EAAG;oBAC1EM,UAAAA,CAAWC,WAAW,CAACH,MAAAA,EAAQ;wBAAEI,EAAAA,EAAIwE;AAAkB,qBAAA,CAAA;AACzD,gBAAA;AACF,YAAA,CAAA,CAAE,OAAM;;AAER,YAAA;AACF,QAAA;AACF,IAAA;AACF,CAAA;AAEA;AACA,MAAMC,aAAAA,GAAgB;IACpBC,aAAAA,EAAe,CAAClG,sBAAUkB,GAAA,CAACT,IAAAA,EAAAA;AAAM,YAAA,GAAGT;;IACpCmG,kBAAAA,EAAoB,IAAA;IACpBC,cAAAA,EAAgBvC,oBAAAA;IAChBwC,kBAAAA,EAAoBnE,wBAAAA;IACpBoE,SAAAA,EAAWrB,eAAAA;AACXsB,IAAAA,WAAAA,EAAa,CAAChG,OAAAA,GAAAA;QACZ,IAAI,CAACD,WAAWC,OAAAA,CAAAA,EAAU;YACxB,MAAMiG,KAAAA,EAAAA;AACR,QAAA;QACA,MAAMzF,WAAAA,GAAcR,OAAAA,CAAQQ,WAAW,IAAI,CAAA;AAC3C,QAAA,OAAOA,WAAAA,KAAgB,CAAA;AACzB,IAAA;AACF,CAAA;AAEA,MAAM0F,UAAAA,GAAiF;IACrF,cAAA,EAAgB;AACd,QAAA,GAAGR,aAAa;QAChBS,KAAAA,EAAO;YACLC,EAAAA,EAAI,sCAAA;YACJC,cAAAA,EAAgB;AAClB,SAAA;QACAC,IAAAA,EAAMC,UAAAA;QACNC,SAAAA,EAAW,CAAClF,OAASA,IAAAA,CAAKrB,IAAI,KAAK,MAAA,IAAUqB,IAAAA,CAAKhB,MAAM,KAAK,SAAA;QAC7DmG,aAAAA,EAAe,CAAC5F,MAAAA,GAAWyD,mBAAAA,CAAoBzD,MAAAA,EAAQ,SAAA,CAAA;QACvD6F,cAAAA,EAAgBrB,oBAAAA;QAChBsB,QAAAA,EAAU;AAAC,YAAA;AAAK;AAClB,KAAA;IACA,gBAAA,EAAkB;AAChB,QAAA,GAAGjB,aAAa;QAChBS,KAAAA,EAAO;YACLC,EAAAA,EAAI,wCAAA;YACJC,cAAAA,EAAgB;AAClB,SAAA;QACAC,IAAAA,EAAMM,UAAAA;QACNJ,SAAAA,EAAW,CAAClF,OAASA,IAAAA,CAAKrB,IAAI,KAAK,MAAA,IAAUqB,IAAAA,CAAKhB,MAAM,KAAK,WAAA;QAC7DmG,aAAAA,EAAe,CAAC5F,MAAAA,GAAWyD,mBAAAA,CAAoBzD,MAAAA,EAAQ,WAAA,CAAA;QACvD6F,cAAAA,EAAgBrB,oBAAAA;QAChBsB,QAAAA,EAAU;AAAC,YAAA,GAAA;AAAK,YAAA,GAAA;AAAK,YAAA;AAAI;AAC3B,KAAA;IACA,WAAA,EAAa;QACXhB,aAAAA,EAAe,CAAClG,sBACdkB,GAAA,CAACkG,UAAAA,EAAAA;gBAAWC,GAAAA,EAAI,IAAA;AAAM,gBAAA,GAAGrH,MAAMU,UAAU;AACtCV,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMW;;;AAIXoG,QAAAA,SAAAA,EAAW,CAAClF,IAAAA,GAASA,IAAAA,CAAKrB,IAAI,KAAK,WAAA;QACnC2F,kBAAAA,EAAoB,KAAA;QACpBmB,mBAAAA,EAAqB,MAAA;AACrBf,QAAAA,WAAAA,EAAa,IAAM;AACrB;AACF;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js

@@ -1,17 +1,109 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var upperFirst = require('lodash/upperFirst');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var ComponentIcon = require('../../../../../components/ComponentIcon.js');
+var previewImage = require('../../../../../utils/previewImage.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React__namespace.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Anchor, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React__namespace.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
 const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
     const { formatMessage } = reactIntl.useIntl();
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
@@ -32,7 +124,9 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                     paddingBottom: 4,
                     paddingLeft: 3,
                     paddingRight: 3,
-                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = previewImage.resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsxRuntime.jsx(ComponentBox, {
                             tag: "button",
                             type: "button",
                             background: "neutral100",
@@ -51,10 +145,10 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                 paddingLeft: 2,
                                 paddingRight: 2,
                                 children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentIcon.ComponentIcon, {
-                                        color: "currentColor",
-                                        background: "primary200",
-                                        icon: icon
+                                    /*#__PURE__*/ jsxRuntime.jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
                                         label: formatMessage({
@@ -74,7 +168,8 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                     })
                                 ]
                             })
-                        }, uid))
+                        }, uid);
+                    })
                 })
             })
         ]

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Tooltip, Typography } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\n\nimport type { Struct } from '@strapi/types';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                <Flex\n                  direction=\"column\"\n                  gap={1}\n                  alignItems=\"center\"\n                  justifyContent=\"center\"\n                  width=\"100%\"\n                  paddingLeft={2}\n                  paddingRight={2}\n                >\n                  <ComponentTileVisual\n                    previewUrl={previewUrl}\n                    icon={icon}\n                    displayName={displayName}\n                  />\n\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Typography>\n                  </Tooltip>\n                </Flex>\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs

@@ -1,11 +1,84 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Accordion, Box, Flex, Tooltip, Typography } from '@strapi/design-system';
+import * as React from 'react';
+import { Accordion, Box, Flex, Tooltip, Typography, Popover } from '@strapi/design-system';
 import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { ComponentIcon } from '../../../../../components/ComponentIcon.mjs';
+import { resolvePreviewImageUrl } from '../../../../../utils/previewImage.mjs';
 
+/**
+ * Renders a small preview thumbnail inside the component picker tile and, on hover,
+ * a larger portaled preview so authors can read the component at a glance without picking it.
+ * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes
+ * the accordion's overflow clipping.
+ */ const ComponentPreviewImage = ({ src, alt, onError })=>{
+    const [open, setOpen] = React.useState(false);
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ jsx(Popover.Anchor, {
+                children: /*#__PURE__*/ jsx(Box, {
+                    tag: "img",
+                    src: src,
+                    alt: alt,
+                    loading: "lazy",
+                    width: "100%",
+                    height: "5.2rem",
+                    hasRadius: true,
+                    style: {
+                        objectFit: 'cover'
+                    },
+                    onMouseEnter: ()=>setOpen(true),
+                    onMouseLeave: ()=>setOpen(false),
+                    onError: onError
+                })
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                side: "top",
+                sideOffset: 4,
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                style: {
+                    pointerEvents: 'none'
+                },
+                children: /*#__PURE__*/ jsx(Box, {
+                    padding: 2,
+                    children: /*#__PURE__*/ jsx(Box, {
+                        tag: "img",
+                        src: src,
+                        alt: alt,
+                        hasRadius: true,
+                        style: {
+                            display: 'block',
+                            maxWidth: 'min(60rem, 90vw)',
+                            maxHeight: 'min(45rem, 80vh)',
+                            objectFit: 'contain'
+                        }
+                    })
+                })
+            })
+        ]
+    });
+};
+/**
+ * Holds per-tile load-error state: when the preview image fails to load (missing file,
+ * unreachable CDN…), the tile falls back to the component icon instead of a broken image.
+ */ const ComponentTileVisual = ({ previewUrl, icon, displayName })=>{
+    const [hasLoadError, setHasLoadError] = React.useState(false);
+    if (!previewUrl || hasLoadError) {
+        return /*#__PURE__*/ jsx(ComponentIcon, {
+            color: "currentColor",
+            background: "primary200",
+            icon: icon
+        });
+    }
+    return /*#__PURE__*/ jsx(ComponentPreviewImage, {
+        src: previewUrl,
+        alt: displayName,
+        onError: ()=>setHasLoadError(true)
+    });
+};
 const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
     const { formatMessage } = useIntl();
     return /*#__PURE__*/ jsxs(Accordion.Item, {
@@ -26,7 +99,9 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                     paddingBottom: 4,
                     paddingLeft: 3,
                     paddingRight: 3,
-                    children: components.map(({ uid, displayName, icon })=>/*#__PURE__*/ jsx(ComponentBox, {
+                    children: components.map(({ uid, displayName, icon, preview })=>{
+                        const previewUrl = resolvePreviewImageUrl(preview);
+                        return /*#__PURE__*/ jsx(ComponentBox, {
                             tag: "button",
                             type: "button",
                             background: "neutral100",
@@ -45,10 +120,10 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                 paddingLeft: 2,
                                 paddingRight: 2,
                                 children: [
-                                    /*#__PURE__*/ jsx(ComponentIcon, {
-                                        color: "currentColor",
-                                        background: "primary200",
-                                        icon: icon
+                                    /*#__PURE__*/ jsx(ComponentTileVisual, {
+                                        previewUrl: previewUrl,
+                                        icon: icon,
+                                        displayName: displayName
                                     }),
                                     /*#__PURE__*/ jsx(Tooltip, {
                                         label: formatMessage({
@@ -68,7 +143,8 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                     })
                                 ]
                             })
-                        }, uid))
+                        }, uid);
+                    })
                 })
             })
         ]

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Tooltip, Typography } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Accordion,\n  Box,\n  Flex,\n  FlexComponent,\n  Popover,\n  Tooltip,\n  Typography,\n} from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\nimport { resolvePreviewImageUrl } from '../../../../../utils/previewImage';\n\nimport type { Struct } from '@strapi/types';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n    preview?: Struct.PreviewImageValue;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\ninterface ComponentPreviewImageProps {\n  src: string;\n  alt: string;\n  onError?: React.ReactEventHandler<HTMLImageElement>;\n}\n\n/**\n * Renders a small preview thumbnail inside the component picker tile and, on hover,\n * a larger portaled preview so authors can read the component at a glance without picking it.\n * Uses a controlled Popover anchored to the thumbnail — the content is portaled, so it escapes\n * the accordion's overflow clipping.\n */\nconst ComponentPreviewImage = ({ src, alt, onError }: ComponentPreviewImageProps) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Anchor>\n        <Box\n          tag=\"img\"\n          src={src}\n          alt={alt}\n          loading=\"lazy\"\n          width=\"100%\"\n          height=\"5.2rem\"\n          hasRadius\n          style={{ objectFit: 'cover' }}\n          onMouseEnter={() => setOpen(true)}\n          onMouseLeave={() => setOpen(false)}\n          onError={onError}\n        />\n      </Popover.Anchor>\n      <Popover.Content\n        side=\"top\"\n        sideOffset={4}\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        style={{ pointerEvents: 'none' }}\n      >\n        <Box padding={2}>\n          <Box\n            tag=\"img\"\n            src={src}\n            alt={alt}\n            hasRadius\n            style={{\n              display: 'block',\n              maxWidth: 'min(60rem, 90vw)',\n              maxHeight: 'min(45rem, 80vh)',\n              objectFit: 'contain',\n            }}\n          />\n        </Box>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\ninterface ComponentTileVisualProps {\n  previewUrl?: string;\n  icon?: string;\n  displayName: string;\n}\n\n/**\n * Holds per-tile load-error state: when the preview image fails to load (missing file,\n * unreachable CDN…), the tile falls back to the component icon instead of a broken image.\n */\nconst ComponentTileVisual = ({ previewUrl, icon, displayName }: ComponentTileVisualProps) => {\n  const [hasLoadError, setHasLoadError] = React.useState(false);\n\n  if (!previewUrl || hasLoadError) {\n    return <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />;\n  }\n\n  return (\n    <ComponentPreviewImage\n      src={previewUrl}\n      alt={displayName}\n      onError={() => setHasLoadError(true)}\n    />\n  );\n};\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon, preview }) => {\n            const previewUrl = resolvePreviewImageUrl(preview);\n\n            return (\n              <ComponentBox\n                key={uid}\n                tag=\"button\"\n                type=\"button\"\n                background=\"neutral100\"\n                justifyContent=\"center\"\n                onClick={onAddComponent(uid)}\n                hasRadius\n                height=\"8.4rem\"\n                shrink={0}\n                borderColor=\"neutral200\"\n              >\n                <Flex\n                  direction=\"column\"\n                  gap={1}\n                  alignItems=\"center\"\n                  justifyContent=\"center\"\n                  width=\"100%\"\n                  paddingLeft={2}\n                  paddingRight={2}\n                >\n                  <ComponentTileVisual\n                    previewUrl={previewUrl}\n                    icon={icon}\n                    displayName={displayName}\n                  />\n\n                  <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                    <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Typography>\n                  </Tooltip>\n                </Flex>\n              </ComponentBox>\n            );\n          })}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentPreviewImage","src","alt","onError","open","setOpen","React","useState","_jsxs","Popover","Root","onOpenChange","_jsx","Anchor","Box","tag","loading","width","height","hasRadius","style","objectFit","onMouseEnter","onMouseLeave","Content","side","sideOffset","onOpenAutoFocus","e","preventDefault","pointerEvents","padding","display","maxWidth","maxHeight","ComponentTileVisual","previewUrl","icon","displayName","hasLoadError","setHasLoadError","ComponentIcon","color","background","ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","Accordion","Item","value","Header","Trigger","id","defaultMessage","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","preview","resolvePreviewImageUrl","ComponentBox","type","justifyContent","onClick","shrink","borderColor","Flex","direction","gap","alignItems","Tooltip","label","Typography","fontWeight","ellipsis","styled","process","env","NODE_ENV","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/Field.js

@@ -97,7 +97,8 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             const component = {
                 uid: componentUid,
                 displayName: info.displayName,
-                icon: info.icon
+                icon: info.icon,
+                preview: info.preview
             };
             if (!acc[category]) {
                 acc[category] = [];