@strapi/content-manager 5.12.5 → 5.13.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/dist/admin/hooks/useDocumentActions.js +5 -1
  2. package/dist/admin/hooks/useDocumentActions.js.map +1 -1
  3. package/dist/admin/hooks/useDocumentActions.mjs +5 -1
  4. package/dist/admin/hooks/useDocumentActions.mjs.map +1 -1
  5. package/dist/admin/hooks/useDocumentContext.js.map +1 -1
  6. package/dist/admin/hooks/useDocumentContext.mjs.map +1 -1
  7. package/dist/admin/pages/EditView/components/DocumentActions.js +206 -21
  8. package/dist/admin/pages/EditView/components/DocumentActions.js.map +1 -1
  9. package/dist/admin/pages/EditView/components/DocumentActions.mjs +208 -23
  10. package/dist/admin/pages/EditView/components/DocumentActions.mjs.map +1 -1
  11. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js +7 -12
  12. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js.map +1 -1
  13. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs +8 -13
  14. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs.map +1 -1
  15. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js +46 -95
  16. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.js.map +1 -1
  17. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs +48 -78
  18. package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.mjs.map +1 -1
  19. package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js +2 -0
  20. package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js.map +1 -1
  21. package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.mjs +2 -0
  22. package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.mjs.map +1 -1
  23. package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.js +199 -137
  24. package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.js.map +1 -1
  25. package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.mjs +199 -137
  26. package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.mjs.map +1 -1
  27. package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.js +89 -50
  28. package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.js.map +1 -1
  29. package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.mjs +91 -52
  30. package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.mjs.map +1 -1
  31. package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js +50 -97
  32. package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.js.map +1 -1
  33. package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs +51 -79
  34. package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs.map +1 -1
  35. package/dist/admin/preview/components/PreviewHeader.js +1 -1
  36. package/dist/admin/preview/components/PreviewHeader.js.map +1 -1
  37. package/dist/admin/preview/components/PreviewHeader.mjs +1 -1
  38. package/dist/admin/preview/components/PreviewHeader.mjs.map +1 -1
  39. package/dist/admin/services/homepage.js +9 -5
  40. package/dist/admin/services/homepage.js.map +1 -1
  41. package/dist/admin/services/homepage.mjs +9 -5
  42. package/dist/admin/services/homepage.mjs.map +1 -1
  43. package/dist/admin/src/hooks/useDocumentContext.d.ts +1 -1
  44. package/dist/admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.d.ts +2 -2
  45. package/dist/admin/src/pages/EditView/components/FormInputs/Relations/RelationModal.d.ts +26 -5
  46. package/dist/admin/translations/en.json.js +2 -1
  47. package/dist/admin/translations/en.json.js.map +1 -1
  48. package/dist/admin/translations/en.json.mjs +2 -1
  49. package/dist/admin/translations/en.json.mjs.map +1 -1
  50. package/dist/server/controllers/index.js +3 -1
  51. package/dist/server/controllers/index.js.map +1 -1
  52. package/dist/server/controllers/index.mjs +3 -1
  53. package/dist/server/controllers/index.mjs.map +1 -1
  54. package/dist/server/homepage/controllers/homepage.js +57 -0
  55. package/dist/server/homepage/controllers/homepage.js.map +1 -0
  56. package/dist/server/homepage/controllers/homepage.mjs +36 -0
  57. package/dist/server/homepage/controllers/homepage.mjs.map +1 -0
  58. package/dist/server/homepage/controllers/index.js +10 -0
  59. package/dist/server/homepage/controllers/index.js.map +1 -0
  60. package/dist/server/homepage/controllers/index.mjs +8 -0
  61. package/dist/server/homepage/controllers/index.mjs.map +1 -0
  62. package/dist/server/homepage/index.js +14 -0
  63. package/dist/server/homepage/index.js.map +1 -0
  64. package/dist/server/homepage/index.mjs +12 -0
  65. package/dist/server/homepage/index.mjs.map +1 -0
  66. package/dist/server/homepage/routes/homepage.js +25 -0
  67. package/dist/server/homepage/routes/homepage.js.map +1 -0
  68. package/dist/server/homepage/routes/homepage.mjs +23 -0
  69. package/dist/server/homepage/routes/homepage.mjs.map +1 -0
  70. package/dist/server/homepage/routes/index.js +13 -0
  71. package/dist/server/homepage/routes/index.js.map +1 -0
  72. package/dist/server/homepage/routes/index.mjs +11 -0
  73. package/dist/server/homepage/routes/index.mjs.map +1 -0
  74. package/dist/server/homepage/services/homepage.js +157 -0
  75. package/dist/server/homepage/services/homepage.js.map +1 -0
  76. package/dist/server/homepage/services/homepage.mjs +155 -0
  77. package/dist/server/homepage/services/homepage.mjs.map +1 -0
  78. package/dist/server/homepage/services/index.js +10 -0
  79. package/dist/server/homepage/services/index.js.map +1 -0
  80. package/dist/server/homepage/services/index.mjs +8 -0
  81. package/dist/server/homepage/services/index.mjs.map +1 -0
  82. package/dist/server/preview/services/preview.js +0 -1
  83. package/dist/server/preview/services/preview.js.map +1 -1
  84. package/dist/server/preview/services/preview.mjs +0 -1
  85. package/dist/server/preview/services/preview.mjs.map +1 -1
  86. package/dist/server/routes/index.js +3 -1
  87. package/dist/server/routes/index.js.map +1 -1
  88. package/dist/server/routes/index.mjs +3 -1
  89. package/dist/server/routes/index.mjs.map +1 -1
  90. package/dist/server/services/index.js +3 -1
  91. package/dist/server/services/index.js.map +1 -1
  92. package/dist/server/services/index.mjs +3 -1
  93. package/dist/server/services/index.mjs.map +1 -1
  94. package/dist/server/src/controllers/index.d.ts.map +1 -1
  95. package/dist/server/src/homepage/controllers/homepage.d.ts +7 -0
  96. package/dist/server/src/homepage/controllers/homepage.d.ts.map +1 -0
  97. package/dist/server/src/homepage/controllers/index.d.ts +2 -0
  98. package/dist/server/src/homepage/controllers/index.d.ts.map +1 -0
  99. package/dist/server/src/homepage/index.d.ts +16 -0
  100. package/dist/server/src/homepage/index.d.ts.map +1 -0
  101. package/dist/server/src/homepage/routes/homepage.d.ts +4 -0
  102. package/dist/server/src/homepage/routes/homepage.d.ts.map +1 -0
  103. package/dist/server/src/homepage/routes/index.d.ts +8 -0
  104. package/dist/server/src/homepage/routes/index.d.ts.map +1 -0
  105. package/dist/server/src/{services → homepage/services}/homepage.d.ts +1 -1
  106. package/dist/server/src/homepage/services/homepage.d.ts.map +1 -0
  107. package/dist/server/src/homepage/services/index.d.ts +9 -0
  108. package/dist/server/src/homepage/services/index.d.ts.map +1 -0
  109. package/dist/server/src/index.d.ts +7 -0
  110. package/dist/server/src/index.d.ts.map +1 -1
  111. package/dist/server/src/preview/services/preview.d.ts.map +1 -1
  112. package/dist/server/src/routes/index.d.ts +1 -0
  113. package/dist/server/src/routes/index.d.ts.map +1 -1
  114. package/dist/server/src/services/index.d.ts +6 -0
  115. package/dist/server/src/services/index.d.ts.map +1 -1
  116. package/package.json +7 -7
  117. package/dist/server/src/services/homepage.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n renderElement: (props: RenderElementProps) => React.JSX.Element;\n matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n handleEnterKey?: (editor: Editor) => void;\n handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n handleTab?: (editor: Editor) => void;\n snippets?: string[];\n dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n isInBlocksSelector: true;\n icon: React.ComponentType;\n label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n 'paragraph',\n 'heading-one',\n 'heading-two',\n 'heading-three',\n 'heading-four',\n 'heading-five',\n 'heading-six',\n 'list-ordered',\n 'list-unordered',\n 'image',\n 'quote',\n 'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n [K in SelectorBlockKey]: SelectorBlock;\n} & {\n [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n blocks: BlocksStore;\n modifiers: ModifiersStore;\n disabled: boolean;\n name: string;\n setLiveText: (text: string) => void;\n isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n const editor = useSlate();\n\n return {\n ...context,\n editor,\n };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n background: ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandIconButton = styled(IconButton)`\n position: absolute;\n bottom: 1.2rem;\n right: 1.2rem;\n box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n key: number;\n incrementSlateUpdatesCount: () => void;\n} {\n // Keep track how many times Slate detected a change from a user interaction in the editor\n const slateUpdatesCount = React.useRef(0);\n // Keep track of how many times the value prop was updated, whether from within editor or from outside\n const valueUpdatesCount = React.useRef(0);\n // Use a key to force a rerender of the Slate editor when needed\n const [key, setKey] = React.useState(0);\n\n React.useEffect(() => {\n valueUpdatesCount.current += 1;\n\n // If the 2 refs are not equal, it means the value was updated from outside\n if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n // So we change the key to force a rerender of the Slate editor,\n // which will pick up the new value through its initialValue prop\n setKey((previousKey) => previousKey + 1);\n\n // Then bring the 2 refs back in sync\n slateUpdatesCount.current = valueUpdatesCount.current;\n }\n }, [value]);\n\n return { key, incrementSlateUpdatesCount: () => (slateUpdatesCount.current += 1) };\n}\n\nconst pipe =\n (...fns: ((baseEditor: Editor) => Editor)[]) =>\n (value: Editor) =>\n fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n BlocksContentProps {\n disabled?: boolean;\n name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n const { formatMessage } = useIntl();\n const [editor] = React.useState(() =>\n pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n );\n const [liveText, setLiveText] = React.useState('');\n const ariaDescriptionId = React.useId();\n const [isExpandedMode, setIsExpandedMode] = React.useState(false);\n\n const handleToggleExpand = () => {\n setIsExpandedMode((prev) => !prev);\n };\n\n /**\n * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n * also not passing forwarded ref here, gives console warning.\n */\n React.useImperativeHandle(\n forwardedRef,\n () => ({\n focus() {\n ReactEditor.focus(editor);\n },\n }),\n [editor]\n );\n\n const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n const handleSlateChange = (state: Descendant[]) => {\n const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n if (isAstChange) {\n incrementSlateUpdatesCount();\n\n onChange(name, state as Schema.Attribute.BlocksValue);\n }\n };\n\n const blocks: BlocksStore = {\n ...paragraphBlocks,\n ...headingBlocks,\n ...listBlocks,\n ...linkBlocks,\n ...imageBlocks,\n ...quoteBlocks,\n ...codeBlocks,\n };\n\n return (\n <>\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('components.Blocks.dnd.instruction'),\n defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <Slate\n editor={editor}\n initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n onChange={handleSlateChange}\n key={key}\n >\n <BlocksEditorProvider\n blocks={blocks}\n modifiers={modifiers}\n disabled={disabled}\n name={name}\n setLiveText={setLiveText}\n isExpandedMode={isExpandedMode}\n >\n <EditorLayout\n error={error}\n disabled={disabled}\n onCollapse={handleToggleExpand}\n ariaDescriptionId={ariaDescriptionId}\n >\n <BlocksToolbar />\n <EditorDivider width=\"100%\" />\n <BlocksContent {...contentProps} />\n {!isExpandedMode && (\n <ExpandIconButton\n label={formatMessage({\n id: getTranslation('components.Blocks.expand'),\n defaultMessage: 'Expand',\n })}\n onClick={handleToggleExpand}\n >\n <Expand />\n </ExpandIconButton>\n )}\n </EditorLayout>\n </BlocksEditorProvider>\n </Slate>\n </>\n );\n }\n);\n\nexport {\n type BlocksStore,\n type SelectorBlockKey,\n BlocksEditor,\n BlocksEditorProvider,\n useBlocksEditorContext,\n isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","ExpandIconButton","IconButton","shadows","filterShadow","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","setIsExpandedMode","handleToggleExpand","useImperativeHandle","focus","ReactEditor","handleSlateChange","isAstChange","operations","some","op","type","blocks","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","children","text","modifiers","EditorLayout","onCollapse","BlocksToolbar","width","BlocksContent","label","onClick","Expand"],"mappings":"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"}
1
+ {"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withImages } from './plugins/withImages';\nimport { withLinks } from './plugins/withLinks';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n renderElement: (props: RenderElementProps) => React.JSX.Element;\n matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n handleEnterKey?: (editor: Editor) => void;\n handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n handleTab?: (editor: Editor) => void;\n snippets?: string[];\n dragHandleTopMargin?: CSSProperties['marginTop'];\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n isInBlocksSelector: true;\n icon: React.ComponentType;\n label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n 'paragraph',\n 'heading-one',\n 'heading-two',\n 'heading-three',\n 'heading-four',\n 'heading-five',\n 'heading-six',\n 'list-ordered',\n 'list-unordered',\n 'image',\n 'quote',\n 'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n [K in SelectorBlockKey]: SelectorBlock;\n} & {\n [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n blocks: BlocksStore;\n modifiers: ModifiersStore;\n disabled: boolean;\n name: string;\n setLiveText: (text: string) => void;\n isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n const editor = useSlate();\n\n return {\n ...context,\n editor,\n };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n key: number;\n incrementSlateUpdatesCount: () => void;\n} {\n // Keep track how many times Slate detected a change from a user interaction in the editor\n const slateUpdatesCount = React.useRef(0);\n // Keep track of how many times the value prop was updated, whether from within editor or from outside\n const valueUpdatesCount = React.useRef(0);\n // Use a key to force a rerender of the Slate editor when needed\n const [key, setKey] = React.useState(0);\n\n React.useEffect(() => {\n valueUpdatesCount.current += 1;\n\n // If the 2 refs are not equal, it means the value was updated from outside\n if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n // So we change the key to force a rerender of the Slate editor,\n // which will pick up the new value through its initialValue prop\n setKey((previousKey) => previousKey + 1);\n\n // Then bring the 2 refs back in sync\n slateUpdatesCount.current = valueUpdatesCount.current;\n }\n }, [value]);\n\n return { key, incrementSlateUpdatesCount: () => (slateUpdatesCount.current += 1) };\n}\n\nconst pipe =\n (...fns: ((baseEditor: Editor) => Editor)[]) =>\n (value: Editor) =>\n fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\ninterface BlocksEditorProps\n extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n BlocksContentProps {\n disabled?: boolean;\n name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n const { formatMessage } = useIntl();\n const [editor] = React.useState(() =>\n pipe(withHistory, withImages, withStrapiSchema, withReact, withLinks)(createEditor())\n );\n const [liveText, setLiveText] = React.useState('');\n const ariaDescriptionId = React.useId();\n const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n /**\n * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n * also not passing forwarded ref here, gives console warning.\n */\n React.useImperativeHandle(\n forwardedRef,\n () => ({\n focus() {\n ReactEditor.focus(editor);\n },\n }),\n [editor]\n );\n\n const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n const handleSlateChange = (state: Descendant[]) => {\n const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n if (isAstChange) {\n incrementSlateUpdatesCount();\n\n onChange(name, state as Schema.Attribute.BlocksValue);\n }\n };\n\n const blocks: BlocksStore = {\n ...paragraphBlocks,\n ...headingBlocks,\n ...listBlocks,\n ...linkBlocks,\n ...imageBlocks,\n ...quoteBlocks,\n ...codeBlocks,\n };\n\n return (\n <>\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('components.Blocks.dnd.instruction'),\n defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <Slate\n editor={editor}\n initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}\n onChange={handleSlateChange}\n key={key}\n >\n <BlocksEditorProvider\n blocks={blocks}\n modifiers={modifiers}\n disabled={disabled}\n name={name}\n setLiveText={setLiveText}\n isExpandedMode={isExpandedMode}\n >\n <EditorLayout\n error={error}\n disabled={disabled}\n onToggleExpand={handleToggleExpand}\n ariaDescriptionId={ariaDescriptionId}\n >\n <BlocksToolbar />\n <EditorDivider width=\"100%\" />\n <BlocksContent {...contentProps} />\n {!isExpandedMode && (\n <IconButton\n position=\"absolute\"\n bottom=\"1.2rem\"\n right=\"1.2rem\"\n shadow=\"filterShadow\"\n label={formatMessage({\n id: getTranslation('components.Blocks.expand'),\n defaultMessage: 'Expand',\n })}\n onClick={handleToggleExpand}\n >\n <Expand />\n </IconButton>\n )}\n </EditorLayout>\n </BlocksEditorProvider>\n </Slate>\n </>\n );\n }\n);\n\nexport {\n type BlocksStore,\n type SelectorBlockKey,\n BlocksEditor,\n BlocksEditorProvider,\n useBlocksEditorContext,\n isSelectorBlockKey,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","pipe","fns","reduce","prev","fn","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","withHistory","withImages","withStrapiSchema","withReact","withLinks","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","handleSlateChange","isAstChange","operations","some","op","type","blocks","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","children","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var React = require('react');
4
+ require('react');
5
5
  var designSystem = require('@strapi/design-system');
6
6
  var Icons = require('@strapi/icons');
7
7
  var reactIntl = require('react-intl');
@@ -9,105 +9,56 @@ var styledComponents = require('styled-components');
9
9
  var translations = require('../../../../../utils/translations.js');
10
10
  var BlocksEditor = require('./BlocksEditor.js');
11
11
 
12
- function _interopNamespaceDefault(e) {
13
- var n = Object.create(null);
14
- if (e) {
15
- Object.keys(e).forEach(function (k) {
16
- if (k !== 'default') {
17
- var d = Object.getOwnPropertyDescriptor(e, k);
18
- Object.defineProperty(n, k, d.get ? d : {
19
- enumerable: true,
20
- get: function () { return e[k]; }
21
- });
22
- }
23
- });
24
- }
25
- n.default = e;
26
- return Object.freeze(n);
27
- }
28
-
29
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
30
-
31
- const CollapseIconButton = styledComponents.styled(designSystem.IconButton)`
32
- position: absolute;
33
- bottom: 1.2rem;
34
- right: 1.2rem;
35
- `;
36
- const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
37
- // Background with 20% opacity
38
- background: ${({ theme })=>`${theme.colors.neutral800}1F`};
39
- `;
40
- const EditorLayout = ({ children, error, disabled, onCollapse, ariaDescriptionId })=>{
12
+ const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescriptionId })=>{
41
13
  const { formatMessage } = reactIntl.useIntl();
42
14
  const { isExpandedMode } = BlocksEditor.useBlocksEditorContext('editorLayout');
43
- React__namespace.useEffect(()=>{
44
- if (isExpandedMode) {
45
- document.body.classList.add('lock-body-scroll');
46
- }
47
- return ()=>{
48
- document.body.classList.remove('lock-body-scroll');
49
- };
50
- }, [
51
- isExpandedMode
52
- ]);
53
- if (isExpandedMode) {
54
- return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Portal, {
55
- role: "dialog",
56
- "aria-modal": false,
57
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
58
- onEscape: onCollapse,
59
- children: /*#__PURE__*/ jsxRuntime.jsx(ExpandWrapper, {
60
- position: "fixed",
61
- top: 0,
62
- left: 0,
63
- right: 0,
64
- bottom: 0,
65
- zIndex: 4,
66
- justifyContent: "center",
67
- onClick: onCollapse,
68
- children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
69
- background: "neutral0",
70
- hasRadius: true,
71
- shadow: "popupShadow",
72
- overflow: "hidden",
73
- width: "90%",
74
- height: "90%",
75
- onClick: (e)=>e.stopPropagation(),
76
- "aria-describedby": ariaDescriptionId,
77
- position: "relative",
78
- children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
79
- height: "100%",
80
- alignItems: "flex-start",
81
- direction: "column",
82
- children: [
83
- children,
84
- /*#__PURE__*/ jsxRuntime.jsx(CollapseIconButton, {
85
- label: formatMessage({
86
- id: translations.getTranslation('components.Blocks.collapse'),
87
- defaultMessage: 'Collapse'
88
- }),
89
- onClick: onCollapse,
90
- children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
91
- })
92
- ]
93
- })
15
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
16
+ children: [
17
+ isExpandedMode && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
18
+ open: isExpandedMode,
19
+ onOpenChange: onToggleExpand,
20
+ children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
21
+ style: {
22
+ maxWidth: 'unset',
23
+ width: 'unset'
24
+ },
25
+ children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
26
+ height: "90vh",
27
+ width: "90vw",
28
+ alignItems: "flex-start",
29
+ direction: "column",
30
+ children: [
31
+ children,
32
+ /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
33
+ position: "absolute",
34
+ bottom: "1.2rem",
35
+ right: "1.2rem",
36
+ shadow: "filterShadow",
37
+ label: formatMessage({
38
+ id: translations.getTranslation('components.Blocks.collapse'),
39
+ defaultMessage: 'Collapse'
40
+ }),
41
+ onClick: onToggleExpand,
42
+ children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
43
+ })
44
+ ]
94
45
  })
95
46
  })
47
+ }),
48
+ /*#__PURE__*/ jsxRuntime.jsx(InputWrapper, {
49
+ direction: "column",
50
+ alignItems: "flex-start",
51
+ height: "512px",
52
+ $disabled: disabled,
53
+ $hasError: Boolean(error),
54
+ style: {
55
+ overflow: 'hidden'
56
+ },
57
+ "aria-describedby": ariaDescriptionId,
58
+ position: "relative",
59
+ children: !isExpandedMode && children
96
60
  })
97
- });
98
- }
99
- return /*#__PURE__*/ jsxRuntime.jsx(InputWrapper, {
100
- direction: "column",
101
- alignItems: "flex-start",
102
- height: "512px",
103
- $disabled: disabled,
104
- $hasError: Boolean(error),
105
- style: {
106
- overflow: 'hidden'
107
- },
108
- "aria-describedby": ariaDescriptionId,
109
- position: "relative",
110
- children: children
61
+ ]
111
62
  });
112
63
  };
113
64
  const InputWrapper = styledComponents.styled(designSystem.Flex)`
@@ -1 +1 @@
1
- {"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, FocusTrap, Portal, IconButton, FlexComponent } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\nconst CollapseIconButton = styled(IconButton)`\n position: absolute;\n bottom: 1.2rem;\n right: 1.2rem;\n`;\n\nconst ExpandWrapper = styled<FlexComponent>(Flex)`\n // Background with 20% opacity\n background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n error?: string;\n onCollapse: () => void;\n disabled: boolean;\n ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n children,\n error,\n disabled,\n onCollapse,\n ariaDescriptionId,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n React.useEffect(() => {\n if (isExpandedMode) {\n document.body.classList.add('lock-body-scroll');\n }\n\n return () => {\n document.body.classList.remove('lock-body-scroll');\n };\n }, [isExpandedMode]);\n\n if (isExpandedMode) {\n return (\n <Portal role=\"dialog\" aria-modal={false}>\n <FocusTrap onEscape={onCollapse}>\n <ExpandWrapper\n position=\"fixed\"\n top={0}\n left={0}\n right={0}\n bottom={0}\n zIndex={4}\n justifyContent=\"center\"\n onClick={onCollapse}\n >\n <Box<'div'>\n background=\"neutral0\"\n hasRadius\n shadow=\"popupShadow\"\n overflow=\"hidden\"\n width=\"90%\"\n height=\"90%\"\n onClick={(e) => e.stopPropagation()}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n <Flex height=\"100%\" alignItems=\"flex-start\" direction=\"column\">\n {children}\n <CollapseIconButton\n label={formatMessage({\n id: getTranslation('components.Blocks.collapse'),\n defaultMessage: 'Collapse',\n })}\n onClick={onCollapse}\n >\n <Collapse />\n </CollapseIconButton>\n </Flex>\n </Box>\n </ExpandWrapper>\n </FocusTrap>\n </Portal>\n );\n }\n\n return (\n <InputWrapper\n direction=\"column\"\n alignItems=\"flex-start\"\n height=\"512px\"\n $disabled={disabled}\n $hasError={Boolean(error)}\n style={{ overflow: 'hidden' }}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n {children}\n </InputWrapper>\n );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n border: 1px solid\n ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme }) => theme.colors.neutral0};\n\n ${({ theme, $hasError = false }) => css`\n outline: none;\n box-shadow: 0;\n transition-property: border-color, box-shadow, fill;\n transition-duration: 0.2s;\n\n &:focus-within {\n border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n }\n `}\n\n ${({ theme, $disabled }) =>\n $disabled\n ? css`\n color: ${theme.colors.neutral600};\n background: ${theme.colors.neutral150};\n `\n : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["CollapseIconButton","styled","IconButton","ExpandWrapper","Flex","theme","colors","neutral800","EditorLayout","children","error","disabled","onCollapse","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","React","useEffect","document","body","classList","add","remove","_jsx","Portal","role","aria-modal","FocusTrap","onEscape","position","top","left","right","bottom","zIndex","justifyContent","onClick","Box","background","hasRadius","shadow","overflow","width","height","e","stopPropagation","aria-describedby","_jsxs","alignItems","direction","label","id","getTranslation","defaultMessage","Collapse","InputWrapper","$disabled","$hasError","Boolean","style","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
1
+ {"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n error?: string;\n onToggleExpand: () => void;\n disabled: boolean;\n ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n children,\n error,\n disabled,\n onToggleExpand,\n ariaDescriptionId,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n return (\n <>\n {isExpandedMode && (\n <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\" direction=\"column\">\n {children}\n <IconButton\n position=\"absolute\"\n bottom=\"1.2rem\"\n right=\"1.2rem\"\n shadow=\"filterShadow\"\n label={formatMessage({\n id: getTranslation('components.Blocks.collapse'),\n defaultMessage: 'Collapse',\n })}\n onClick={onToggleExpand}\n >\n <Collapse />\n </IconButton>\n </Flex>\n </Modal.Content>\n </Modal.Root>\n )}\n <InputWrapper\n direction=\"column\"\n alignItems=\"flex-start\"\n height=\"512px\"\n $disabled={disabled}\n $hasError={Boolean(error)}\n style={{ overflow: 'hidden' }}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n {!isExpandedMode && children}\n </InputWrapper>\n </>\n );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n border: 1px solid\n ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme }) => theme.colors.neutral0};\n\n ${({ theme, $hasError = false }) => css`\n outline: none;\n box-shadow: 0;\n transition-property: border-color, box-shadow, fill;\n transition-duration: 0.2s;\n\n &:focus-within {\n border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n }\n `}\n\n ${({ theme, $disabled }) =>\n $disabled\n ? css`\n color: ${theme.colors.neutral600};\n background: ${theme.colors.neutral150};\n `\n : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
@@ -1,92 +1,62 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import * as React from 'react';
3
- import { IconButton, Flex, Portal, FocusTrap, Box } from '@strapi/design-system';
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
+ import 'react';
3
+ import { Flex, Modal, IconButton } from '@strapi/design-system';
4
4
  import { Collapse } from '@strapi/icons';
5
5
  import { useIntl } from 'react-intl';
6
6
  import { styled, css } from 'styled-components';
7
7
  import { getTranslation } from '../../../../../utils/translations.mjs';
8
8
  import { useBlocksEditorContext } from './BlocksEditor.mjs';
9
9
 
10
- const CollapseIconButton = styled(IconButton)`
11
- position: absolute;
12
- bottom: 1.2rem;
13
- right: 1.2rem;
14
- `;
15
- const ExpandWrapper = styled(Flex)`
16
- // Background with 20% opacity
17
- background: ${({ theme })=>`${theme.colors.neutral800}1F`};
18
- `;
19
- const EditorLayout = ({ children, error, disabled, onCollapse, ariaDescriptionId })=>{
10
+ const EditorLayout = ({ children, error, disabled, onToggleExpand, ariaDescriptionId })=>{
20
11
  const { formatMessage } = useIntl();
21
12
  const { isExpandedMode } = useBlocksEditorContext('editorLayout');
22
- React.useEffect(()=>{
23
- if (isExpandedMode) {
24
- document.body.classList.add('lock-body-scroll');
25
- }
26
- return ()=>{
27
- document.body.classList.remove('lock-body-scroll');
28
- };
29
- }, [
30
- isExpandedMode
31
- ]);
32
- if (isExpandedMode) {
33
- return /*#__PURE__*/ jsx(Portal, {
34
- role: "dialog",
35
- "aria-modal": false,
36
- children: /*#__PURE__*/ jsx(FocusTrap, {
37
- onEscape: onCollapse,
38
- children: /*#__PURE__*/ jsx(ExpandWrapper, {
39
- position: "fixed",
40
- top: 0,
41
- left: 0,
42
- right: 0,
43
- bottom: 0,
44
- zIndex: 4,
45
- justifyContent: "center",
46
- onClick: onCollapse,
47
- children: /*#__PURE__*/ jsx(Box, {
48
- background: "neutral0",
49
- hasRadius: true,
50
- shadow: "popupShadow",
51
- overflow: "hidden",
52
- width: "90%",
53
- height: "90%",
54
- onClick: (e)=>e.stopPropagation(),
55
- "aria-describedby": ariaDescriptionId,
56
- position: "relative",
57
- children: /*#__PURE__*/ jsxs(Flex, {
58
- height: "100%",
59
- alignItems: "flex-start",
60
- direction: "column",
61
- children: [
62
- children,
63
- /*#__PURE__*/ jsx(CollapseIconButton, {
64
- label: formatMessage({
65
- id: getTranslation('components.Blocks.collapse'),
66
- defaultMessage: 'Collapse'
67
- }),
68
- onClick: onCollapse,
69
- children: /*#__PURE__*/ jsx(Collapse, {})
70
- })
71
- ]
72
- })
13
+ return /*#__PURE__*/ jsxs(Fragment, {
14
+ children: [
15
+ isExpandedMode && /*#__PURE__*/ jsx(Modal.Root, {
16
+ open: isExpandedMode,
17
+ onOpenChange: onToggleExpand,
18
+ children: /*#__PURE__*/ jsx(Modal.Content, {
19
+ style: {
20
+ maxWidth: 'unset',
21
+ width: 'unset'
22
+ },
23
+ children: /*#__PURE__*/ jsxs(Flex, {
24
+ height: "90vh",
25
+ width: "90vw",
26
+ alignItems: "flex-start",
27
+ direction: "column",
28
+ children: [
29
+ children,
30
+ /*#__PURE__*/ jsx(IconButton, {
31
+ position: "absolute",
32
+ bottom: "1.2rem",
33
+ right: "1.2rem",
34
+ shadow: "filterShadow",
35
+ label: formatMessage({
36
+ id: getTranslation('components.Blocks.collapse'),
37
+ defaultMessage: 'Collapse'
38
+ }),
39
+ onClick: onToggleExpand,
40
+ children: /*#__PURE__*/ jsx(Collapse, {})
41
+ })
42
+ ]
73
43
  })
74
44
  })
45
+ }),
46
+ /*#__PURE__*/ jsx(InputWrapper, {
47
+ direction: "column",
48
+ alignItems: "flex-start",
49
+ height: "512px",
50
+ $disabled: disabled,
51
+ $hasError: Boolean(error),
52
+ style: {
53
+ overflow: 'hidden'
54
+ },
55
+ "aria-describedby": ariaDescriptionId,
56
+ position: "relative",
57
+ children: !isExpandedMode && children
75
58
  })
76
- });
77
- }
78
- return /*#__PURE__*/ jsx(InputWrapper, {
79
- direction: "column",
80
- alignItems: "flex-start",
81
- height: "512px",
82
- $disabled: disabled,
83
- $hasError: Boolean(error),
84
- style: {
85
- overflow: 'hidden'
86
- },
87
- "aria-describedby": ariaDescriptionId,
88
- position: "relative",
89
- children: children
59
+ ]
90
60
  });
91
61
  };
92
62
  const InputWrapper = styled(Flex)`
@@ -1 +1 @@
1
- {"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, FocusTrap, Portal, IconButton, FlexComponent } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\nconst CollapseIconButton = styled(IconButton)`\n position: absolute;\n bottom: 1.2rem;\n right: 1.2rem;\n`;\n\nconst ExpandWrapper = styled<FlexComponent>(Flex)`\n // Background with 20% opacity\n background: ${({ theme }) => `${theme.colors.neutral800}1F`};\n`;\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n error?: string;\n onCollapse: () => void;\n disabled: boolean;\n ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n children,\n error,\n disabled,\n onCollapse,\n ariaDescriptionId,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n React.useEffect(() => {\n if (isExpandedMode) {\n document.body.classList.add('lock-body-scroll');\n }\n\n return () => {\n document.body.classList.remove('lock-body-scroll');\n };\n }, [isExpandedMode]);\n\n if (isExpandedMode) {\n return (\n <Portal role=\"dialog\" aria-modal={false}>\n <FocusTrap onEscape={onCollapse}>\n <ExpandWrapper\n position=\"fixed\"\n top={0}\n left={0}\n right={0}\n bottom={0}\n zIndex={4}\n justifyContent=\"center\"\n onClick={onCollapse}\n >\n <Box<'div'>\n background=\"neutral0\"\n hasRadius\n shadow=\"popupShadow\"\n overflow=\"hidden\"\n width=\"90%\"\n height=\"90%\"\n onClick={(e) => e.stopPropagation()}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n <Flex height=\"100%\" alignItems=\"flex-start\" direction=\"column\">\n {children}\n <CollapseIconButton\n label={formatMessage({\n id: getTranslation('components.Blocks.collapse'),\n defaultMessage: 'Collapse',\n })}\n onClick={onCollapse}\n >\n <Collapse />\n </CollapseIconButton>\n </Flex>\n </Box>\n </ExpandWrapper>\n </FocusTrap>\n </Portal>\n );\n }\n\n return (\n <InputWrapper\n direction=\"column\"\n alignItems=\"flex-start\"\n height=\"512px\"\n $disabled={disabled}\n $hasError={Boolean(error)}\n style={{ overflow: 'hidden' }}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n {children}\n </InputWrapper>\n );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n border: 1px solid\n ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme }) => theme.colors.neutral0};\n\n ${({ theme, $hasError = false }) => css`\n outline: none;\n box-shadow: 0;\n transition-property: border-color, box-shadow, fill;\n transition-duration: 0.2s;\n\n &:focus-within {\n border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n }\n `}\n\n ${({ theme, $disabled }) =>\n $disabled\n ? css`\n color: ${theme.colors.neutral600};\n background: ${theme.colors.neutral150};\n `\n : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["CollapseIconButton","styled","IconButton","ExpandWrapper","Flex","theme","colors","neutral800","EditorLayout","children","error","disabled","onCollapse","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","React","useEffect","document","body","classList","add","remove","_jsx","Portal","role","aria-modal","FocusTrap","onEscape","position","top","left","right","bottom","zIndex","justifyContent","onClick","Box","background","hasRadius","shadow","overflow","width","height","e","stopPropagation","aria-describedby","_jsxs","alignItems","direction","label","id","getTranslation","defaultMessage","Collapse","InputWrapper","$disabled","$hasError","Boolean","style","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
1
+ {"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Flex, IconButton, FlexComponent, Modal } from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { useBlocksEditorContext } from './BlocksEditor';\n\ninterface EditorLayoutProps {\n children: React.ReactNode;\n error?: string;\n onToggleExpand: () => void;\n disabled: boolean;\n ariaDescriptionId: string;\n}\n\nconst EditorLayout = ({\n children,\n error,\n disabled,\n onToggleExpand,\n ariaDescriptionId,\n}: EditorLayoutProps) => {\n const { formatMessage } = useIntl();\n const { isExpandedMode } = useBlocksEditorContext('editorLayout');\n\n return (\n <>\n {isExpandedMode && (\n <Modal.Root open={isExpandedMode} onOpenChange={onToggleExpand}>\n <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n <Flex height=\"90vh\" width=\"90vw\" alignItems=\"flex-start\" direction=\"column\">\n {children}\n <IconButton\n position=\"absolute\"\n bottom=\"1.2rem\"\n right=\"1.2rem\"\n shadow=\"filterShadow\"\n label={formatMessage({\n id: getTranslation('components.Blocks.collapse'),\n defaultMessage: 'Collapse',\n })}\n onClick={onToggleExpand}\n >\n <Collapse />\n </IconButton>\n </Flex>\n </Modal.Content>\n </Modal.Root>\n )}\n <InputWrapper\n direction=\"column\"\n alignItems=\"flex-start\"\n height=\"512px\"\n $disabled={disabled}\n $hasError={Boolean(error)}\n style={{ overflow: 'hidden' }}\n aria-describedby={ariaDescriptionId}\n position=\"relative\"\n >\n {!isExpandedMode && children}\n </InputWrapper>\n </>\n );\n};\n\nconst InputWrapper = styled<FlexComponent>(Flex)<{ $disabled?: boolean; $hasError?: boolean }>`\n border: 1px solid\n ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};\n border-radius: ${({ theme }) => theme.borderRadius};\n background: ${({ theme }) => theme.colors.neutral0};\n\n ${({ theme, $hasError = false }) => css`\n outline: none;\n box-shadow: 0;\n transition-property: border-color, box-shadow, fill;\n transition-duration: 0.2s;\n\n &:focus-within {\n border: 1px solid ${$hasError ? theme.colors.danger600 : theme.colors.primary600};\n box-shadow: ${$hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;\n }\n `}\n\n ${({ theme, $disabled }) =>\n $disabled\n ? css`\n color: ${theme.colors.neutral600};\n background: ${theme.colors.neutral150};\n `\n : undefined}\n`;\n\nexport { EditorLayout };\n"],"names":["EditorLayout","children","error","disabled","onToggleExpand","ariaDescriptionId","formatMessage","useIntl","isExpandedMode","useBlocksEditorContext","_jsxs","_Fragment","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","Flex","height","alignItems","direction","IconButton","position","bottom","right","shadow","label","id","getTranslation","defaultMessage","onClick","Collapse","InputWrapper","$disabled","$hasError","Boolean","overflow","aria-describedby","styled","theme","colors","danger600","neutral200","borderRadius","neutral0","css","primary600","neutral600","neutral150","undefined"],"mappings":"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"}
@@ -359,6 +359,7 @@ const Component = ({ disabled, index, name, mainField = {
359
359
  /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Actions, {
360
360
  children: [
361
361
  /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
362
+ disabled: disabled,
362
363
  variant: "ghost",
363
364
  onClick: onDeleteComponent,
364
365
  label: formatMessage({
@@ -368,6 +369,7 @@ const Component = ({ disabled, index, name, mainField = {
368
369
  children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {})
369
370
  }),
370
371
  /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
372
+ disabled: disabled,
371
373
  ref: composedAccordionRefs,
372
374
  variant: "ghost",
373
375
  onClick: (e)=>e.stopPropagation(),