npm - @strapi/content-manager - Versions diffs - 5.33.3 → 5.34.0 - Mend

@strapi/content-manager 5.33.3 → 5.34.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 (164) hide show

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

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

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

@@ -10,37 +10,61 @@ var conversions = require('../utils/conversions.js');
 const H1 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h1'
 })`
-  font-size: 4.2rem;
+  font-size: 2.8rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 3.6rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H2 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h2'
 })`
-  font-size: 3.5rem;
+  font-size: 2.2rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 3rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H3 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h3'
 })`
-  font-size: 2.9rem;
+  font-size: 2rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2.4rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H4 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h4'
 })`
-  font-size: 2.4rem;
+  font-size: 1.8rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2.4rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H5 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h5'
 })`
-  font-size: 2rem;
+  font-size: 1.6rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H6 = styledComponents.styled(designSystem.Typography).attrs({
     tag: 'h6'
 })`
-  font-size: 1.6rem;
+  font-size: 1.4rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 1.6rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n HeadingFive,\n HeadingFour,\n HeadingOne,\n HeadingSix,\n HeadingThree,\n HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n font-size: 4.2rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n font-size: 3.5rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n font-size: 2.9rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n font-size: 2.4rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n font-size: 2rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n font-size: 1.6rem;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/*\n Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n BlocksStore,\n 'heading-one' \| 'heading-two' \| 'heading-three' \| 'heading-four' \| 'heading-five' \| 'heading-six'\n> = {\n 'heading-one': {\n renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n icon: HeadingOne,\n label: {\n id: 'components.Blocks.blocks.heading1',\n defaultMessage: 'Heading 1',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 1),\n matchNode: (node) => node.type === 'heading' && node.level === 1,\n isInBlocksSelector: true,\n snippets: ['#'],\n dragHandleTopMargin: '14px',\n },\n 'heading-two': {\n renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n icon: HeadingTwo,\n label: {\n id: 'components.Blocks.blocks.heading2',\n defaultMessage: 'Heading 2',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 2),\n matchNode: (node) => node.type === 'heading' && node.level === 2,\n isInBlocksSelector: true,\n snippets: ['##'],\n dragHandleTopMargin: '10px',\n },\n 'heading-three': {\n renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n icon: HeadingThree,\n label: {\n id: 'components.Blocks.blocks.heading3',\n defaultMessage: 'Heading 3',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 3),\n matchNode: (node) => node.type === 'heading' && node.level === 3,\n isInBlocksSelector: true,\n snippets: ['###'],\n dragHandleTopMargin: '7px',\n },\n 'heading-four': {\n renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n icon: HeadingFour,\n label: {\n id: 'components.Blocks.blocks.heading4',\n defaultMessage: 'Heading 4',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 4),\n matchNode: (node) => node.type === 'heading' && node.level === 4,\n isInBlocksSelector: true,\n snippets: ['####'],\n dragHandleTopMargin: '4px',\n },\n 'heading-five': {\n renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n icon: HeadingFive,\n label: {\n id: 'components.Blocks.blocks.heading5',\n defaultMessage: 'Heading 5',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 5),\n matchNode: (node) => node.type === 'heading' && node.level === 5,\n isInBlocksSelector: true,\n snippets: ['#####'],\n },\n 'heading-six': {\n renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n icon: HeadingSix,\n label: {\n id: 'components.Blocks.blocks.heading6',\n defaultMessage: 'Heading 6',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 6),\n matchNode: (node) => node.type === 'heading' && node.level === 6,\n isInBlocksSelector: true,\n snippets: ['######'],\n dragHandleTopMargin: '-2px',\n },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":";;;;;;;;;AAkBA,MAAMA,EAAKC,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED,MAAMC,EAAKN,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED,MAAME,EAAKP,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED,MAAMG,EAAKR,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED,MAAMI,EAAKT,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED,MAAMK,EAAKV,GAAAA,uBAAAA,CAAkCC,uBAAYC,CAAAA,CAAAA,KAAK,CAAC;IAAEC,GAAK,EAAA;AAAK,CAAA,CAAE;;eAE9D,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;AACrD,CAAC;AAED;;IAGA,MAAMM,sBAAyB,GAAA,CAACC,MAAgBC,EAAAA,KAAAA,GAAAA;AAC9CC,IAAAA,6BAAAA,CAAoCF,MAAQ,EAAA;QAAEG,IAAM,EAAA,SAAA;AAAWF,QAAAA;AAAM,KAAA,CAAA;AACvE,CAAA;AAEA,MAAMG,aAGF,GAAA;IACF,aAAe,EAAA;QACbC,aAAe,EAAA,CAACC,sBAAUC,cAACpB,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGmB,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMC,EAAAA,gBAAAA;QACNC,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAI,SAAA;QACfC,mBAAqB,EAAA;AACvB,KAAA;IACA,aAAe,EAAA;QACbf,aAAe,EAAA,CAACC,sBAAUC,cAACb,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGY,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMW,EAAAA,gBAAAA;QACNT,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAK,SAAA;QAChBC,mBAAqB,EAAA;AACvB,KAAA;IACA,eAAiB,EAAA;QACff,aAAe,EAAA,CAACC,sBAAUC,cAACZ,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGW,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMY,EAAAA,kBAAAA;QACNV,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAM,SAAA;QACjBC,mBAAqB,EAAA;AACvB,KAAA;IACA,cAAgB,EAAA;QACdf,aAAe,EAAA,CAACC,sBAAUC,cAACX,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGU,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMa,EAAAA,iBAAAA;QACNX,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAO,SAAA;QAClBC,mBAAqB,EAAA;AACvB,KAAA;IACA,cAAgB,EAAA;QACdf,aAAe,EAAA,CAACC,sBAAUC,cAACV,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGS,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMc,EAAAA,iBAAAA;QACNZ,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAQ;AACrB,KAAA;IACA,aAAe,EAAA;QACbd,aAAe,EAAA,CAACC,sBAAUC,cAACT,CAAAA,EAAAA,EAAAA;AAAI,gBAAA,GAAGQ,MAAME,UAAU;AAAGF,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMG;;QAC3DC,IAAMe,EAAAA,gBAAAA;QACNb,KAAO,EAAA;YACLC,EAAI,EAAA,mCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;QACAC,aAAe,EAAA,CAACf,MAAWD,GAAAA,sBAAAA,CAAuBC,MAAQ,EAAA,CAAA,CAAA;QAC1DgB,SAAW,EAAA,CAACC,OAASA,IAAKd,CAAAA,IAAI,KAAK,SAAac,IAAAA,IAAAA,CAAKhB,KAAK,KAAK,CAAA;QAC/DiB,kBAAoB,EAAA,IAAA;QACpBC,QAAU,EAAA;AAAC,YAAA;AAAS,SAAA;QACpBC,mBAAqB,EAAA;AACvB;AACF;;;;"}
1	+ {"version":3,"file":"Heading.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Heading.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Typography, TypographyComponent } from '@strapi/design-system';\nimport {\n HeadingFive,\n HeadingFour,\n HeadingOne,\n HeadingSix,\n HeadingThree,\n HeadingTwo,\n} from '@strapi/icons';\nimport { Editor } from 'slate';\nimport { styled } from 'styled-components';\n\nimport { type BlocksStore } from '../BlocksEditor';\nimport { baseHandleConvert } from '../utils/conversions';\nimport { type Block } from '../utils/types';\n\nconst H1 = styled<TypographyComponent<'h1'>>(Typography).attrs({ tag: 'h1' })`\n font-size: 2.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3.6rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H2 = styled<TypographyComponent<'h2'>>(Typography).attrs({ tag: 'h2' })`\n font-size: 2.2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H3 = styled<TypographyComponent<'h3'>>(Typography).attrs({ tag: 'h3' })`\n font-size: 2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H4 = styled<TypographyComponent<'h4'>>(Typography).attrs({ tag: 'h4' })`\n font-size: 1.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H5 = styled<TypographyComponent<'h5'>>(Typography).attrs({ tag: 'h5' })`\n font-size: 1.6rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\nconst H6 = styled<TypographyComponent<'h6'>>(Typography).attrs({ tag: 'h6' })`\n font-size: 1.4rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 1.6rem;\n }\n font-weight: 600;\n line-height: ${({ theme }) => theme.lineHeights[1]};\n`;\n\n/*\n Common handler for converting a node to a heading\n */\nconst handleConvertToHeading = (editor: Editor, level: Block<'heading'>['level']) => {\n baseHandleConvert<Block<'heading'>>(editor, { type: 'heading', level });\n};\n\nconst headingBlocks: Pick<\n BlocksStore,\n 'heading-one' \| 'heading-two' \| 'heading-three' \| 'heading-four' \| 'heading-five' \| 'heading-six'\n> = {\n 'heading-one': {\n renderElement: (props) => <H1 {...props.attributes}>{props.children}</H1>,\n icon: HeadingOne,\n label: {\n id: 'components.Blocks.blocks.heading1',\n defaultMessage: 'Heading 1',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 1),\n matchNode: (node) => node.type === 'heading' && node.level === 1,\n isInBlocksSelector: true,\n snippets: ['#'],\n dragHandleTopMargin: '14px',\n },\n 'heading-two': {\n renderElement: (props) => <H2 {...props.attributes}>{props.children}</H2>,\n icon: HeadingTwo,\n label: {\n id: 'components.Blocks.blocks.heading2',\n defaultMessage: 'Heading 2',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 2),\n matchNode: (node) => node.type === 'heading' && node.level === 2,\n isInBlocksSelector: true,\n snippets: ['##'],\n dragHandleTopMargin: '10px',\n },\n 'heading-three': {\n renderElement: (props) => <H3 {...props.attributes}>{props.children}</H3>,\n icon: HeadingThree,\n label: {\n id: 'components.Blocks.blocks.heading3',\n defaultMessage: 'Heading 3',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 3),\n matchNode: (node) => node.type === 'heading' && node.level === 3,\n isInBlocksSelector: true,\n snippets: ['###'],\n dragHandleTopMargin: '7px',\n },\n 'heading-four': {\n renderElement: (props) => <H4 {...props.attributes}>{props.children}</H4>,\n icon: HeadingFour,\n label: {\n id: 'components.Blocks.blocks.heading4',\n defaultMessage: 'Heading 4',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 4),\n matchNode: (node) => node.type === 'heading' && node.level === 4,\n isInBlocksSelector: true,\n snippets: ['####'],\n dragHandleTopMargin: '4px',\n },\n 'heading-five': {\n renderElement: (props) => <H5 {...props.attributes}>{props.children}</H5>,\n icon: HeadingFive,\n label: {\n id: 'components.Blocks.blocks.heading5',\n defaultMessage: 'Heading 5',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 5),\n matchNode: (node) => node.type === 'heading' && node.level === 5,\n isInBlocksSelector: true,\n snippets: ['#####'],\n },\n 'heading-six': {\n renderElement: (props) => <H6 {...props.attributes}>{props.children}</H6>,\n icon: HeadingSix,\n label: {\n id: 'components.Blocks.blocks.heading6',\n defaultMessage: 'Heading 6',\n },\n handleConvert: (editor) => handleConvertToHeading(editor, 6),\n matchNode: (node) => node.type === 'heading' && node.level === 6,\n isInBlocksSelector: true,\n snippets: ['######'],\n dragHandleTopMargin: '-2px',\n },\n};\n\nexport { headingBlocks };\n"],"names":["H1","styled","Typography","attrs","tag","theme","breakpoints","medium","lineHeights","H2","H3","H4","H5","H6","handleConvertToHeading","editor","level","baseHandleConvert","type","headingBlocks","renderElement","props","_jsx","attributes","children","icon","HeadingOne","label","id","defaultMessage","handleConvert","matchNode","node","isInBlocksSelector","snippets","dragHandleTopMargin","HeadingTwo","HeadingThree","HeadingFour","HeadingFive","HeadingSix"],"mappings":"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"}

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

@@ -8,37 +8,61 @@ import { baseHandleConvert } from '../utils/conversions.mjs';
 const H1 = styled(Typography).attrs({
     tag: 'h1'
 })`
-  font-size: 4.2rem;
+  font-size: 2.8rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 3.6rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H2 = styled(Typography).attrs({
     tag: 'h2'
 })`
-  font-size: 3.5rem;
+  font-size: 2.2rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 3rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H3 = styled(Typography).attrs({
     tag: 'h3'
 })`
-  font-size: 2.9rem;
+  font-size: 2rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2.4rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H4 = styled(Typography).attrs({
     tag: 'h4'
 })`
-  font-size: 2.4rem;
+  font-size: 1.8rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2.4rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H5 = styled(Typography).attrs({
     tag: 'h5'
 })`
-  font-size: 2rem;
+  font-size: 1.6rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 2rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 const H6 = styled(Typography).attrs({
     tag: 'h6'
 })`
-  font-size: 1.6rem;
+  font-size: 1.4rem;
+  ${({ theme })=>theme.breakpoints.medium} {
+    font-size: 1.6rem;
+  }
+  font-weight: 600;
   line-height: ${({ theme })=>theme.lineHeights[1]};
 `;
 /**

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

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

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

@@ -172,6 +172,18 @@ const ImageDialog = ()=>{
         onSelectAssets: handleSelectAssets
     });
 };
+/**
+ * Images are void elements. They handle the rendering of their children instead of Slate.
+ * See the Slate documentation for more information:
+ * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void
+ * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements
+ */ const withImages = (editor)=>{
+    const { isVoid } = editor;
+    editor.isVoid = (element)=>{
+        return element.type === 'image' ? true : isVoid(element);
+    };
+    return editor;
+};
 const imageBlocks = {
     image: {
         renderElement: (props)=>/*#__PURE__*/ jsxRuntime.jsx(Image, {
@@ -222,7 +234,8 @@ const imageBlocks = {
         },
         snippets: [
             '!['
-        ]
+        ],
+        plugin: withImages
     }
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n transition-property: box-shadow;\n transition-duration: 0.2s;\n ${(props) =>\n props.$isFocused &&\n css`\n box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n `}\n\n & > img {\n height: auto;\n // The max-height is decided with the design team, the 56px is the height of the toolbar\n max-height: calc(512px - 56px);\n max-width: 100%;\n object-fit: contain;\n }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n 'name',\n 'alternativeText',\n 'url',\n 'caption',\n 'width',\n 'height',\n 'formats',\n 'hash',\n 'ext',\n 'mime',\n 'size',\n 'previewUrl',\n 'provider',\n 'provider_metadata',\n 'createdAt',\n 'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n const entries = keys.map((key) => [key, object[key]]);\n return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n const editorIsFocused = useFocused();\n const imageIsSelected = useSelected();\n\n if (!isImage(element)) {\n return null;\n }\n const { url, alternativeText, width, height } = element.image;\n\n return (\n <Box {...attributes}>\n {children}\n <ImageWrapper\n background=\"neutral100\"\n contentEditable={false}\n justifyContent=\"center\"\n $isFocused={editorIsFocused && imageIsSelected}\n hasRadius\n >\n <img src={url} alt={alternativeText} width={width} height={height} />\n </ImageWrapper>\n </Box>\n );\n};\n\nconst ImageDialog = () => {\n const [isOpen, setIsOpen] = React.useState(true);\n const { editor } = useBlocksEditorContext('ImageDialog');\n const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n if (!components \|\| !isOpen) return null;\n\n const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n allowedTypes: Schema.Attribute.MediaKind[];\n onClose: () => void;\n onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n }>;\n\n const insertImages = (images: Block<'image'>['image'][]) => {\n // If the selection is inside a list, split the list so that the modified block is outside of it\n Transforms.unwrapNodes(editor, {\n match: (node) => !Editor.isEditor(node) && node.type === 'list',\n split: true,\n });\n\n // Save the path of the node that is being replaced by an image to insert the images there later\n // It's the closest full block node above the selection\n const nodeEntryBeingReplaced = Editor.above(editor, {\n match(node) {\n if (Editor.isEditor(node)) return false;\n\n const isInlineNode = ['text', 'link'].includes(node.type);\n\n return !isInlineNode;\n },\n });\n\n if (!nodeEntryBeingReplaced) return;\n const [, pathToInsert] = nodeEntryBeingReplaced;\n\n // Remove the previous node that is being replaced by an image\n Transforms.removeNodes(editor);\n\n // Convert images to nodes and insert them\n const nodesToInsert = images.map((image) => {\n const imageNode: Block<'image'> = {\n type: 'image',\n image,\n children: [{ type: 'text', text: '' }],\n };\n return imageNode;\n });\n Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n // Set the selection on the image since it was cleared by calling removeNodes\n Transforms.select(editor, pathToInsert);\n };\n\n const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n const formattedImages = images.map((image) => {\n // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n const nodeImage: Block<'image'>['image'] = {\n ...expectedImage,\n alternativeText: expectedImage.alternativeText \|\| expectedImage.name,\n url: prefixFileUrlWithBackendUrl(image.url),\n };\n\n return nodeImage;\n });\n\n insertImages(formattedImages);\n setIsOpen(false);\n };\n\n return (\n <MediaLibraryDialog\n allowedTypes={['images']}\n onClose={() => setIsOpen(false)}\n onSelectAssets={handleSelectAssets}\n />\n );\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n image: {\n renderElement: (props) => <Image {...props} />,\n icon: Picture,\n label: {\n id: 'components.Blocks.blocks.image',\n defaultMessage: 'Image',\n },\n matchNode: (node) => node.type === 'image',\n isInBlocksSelector: true,\n handleBackspaceKey(editor) {\n // Prevent issue where the image remains when it's the only block in the document\n if (editor.children.length === 1) {\n Transforms.setNodes(editor, {\n type: 'paragraph',\n // @ts-expect-error we're only setting image as null so that Slate deletes it\n image: null,\n children: [{ type: 'text', text: '' }],\n });\n } else {\n Transforms.removeNodes(editor);\n }\n },\n handleEnterKey(editor) {\n Transforms.insertNodes(editor, {\n type: 'paragraph',\n children: [{ type: 'text', text: '' }],\n });\n },\n handleConvert: () => {\n /*\n All the logic is managed inside the ImageDialog component,\n * because the blocks are only created when the user selects images in the modal and submits\n * and if he closes the modal, then no changes are made to the editor\n */\n return () => <ImageDialog />;\n },\n snippets: ['!['],\n },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets"],"mappings":"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"}
1	+ {"version":3,"file":"Image.js","sources":["../../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Image.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, FlexComponent } from '@strapi/design-system';\nimport { Image as Picture } from '@strapi/icons';\nimport { type Element, Transforms, Editor } from 'slate';\nimport { useFocused, type RenderElementProps, useSelected } from 'slate-react';\nimport { styled, css } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../../utils/urls';\nimport { useBlocksEditorContext, type BlocksStore } from '../BlocksEditor';\nimport { type Block } from '../utils/types';\n\nimport type { Schema } from '@strapi/types';\n\nconst ImageWrapper = styled<FlexComponent>(Flex)<{ $isFocused?: boolean }>`\n transition-property: box-shadow;\n transition-duration: 0.2s;\n ${(props) =>\n props.$isFocused &&\n css`\n box-shadow: ${props.theme.colors.primary600} 0px 0px 0px 3px;\n `}\n\n & > img {\n height: auto;\n // The max-height is decided with the design team, the 56px is the height of the toolbar\n max-height: calc(512px - 56px);\n max-width: 100%;\n object-fit: contain;\n }\n`;\n\nconst IMAGE_SCHEMA_FIELDS = [\n 'name',\n 'alternativeText',\n 'url',\n 'caption',\n 'width',\n 'height',\n 'formats',\n 'hash',\n 'ext',\n 'mime',\n 'size',\n 'previewUrl',\n 'provider',\n 'provider_metadata',\n 'createdAt',\n 'updatedAt',\n];\n\nconst pick = <T extends object, K extends keyof T>(object: T, keys: K[]): Pick<T, K> => {\n const entries = keys.map((key) => [key, object[key]]);\n return Object.fromEntries(entries);\n};\n\n// Type guard to force TypeScript to narrow the type of the element in Blocks component\nconst isImage = (element: Element): element is Block<'image'> => {\n return element.type === 'image';\n};\n\n// Added a background color to the image wrapper to make it easier to recognize the image block\nconst Image = ({ attributes, children, element }: RenderElementProps) => {\n const editorIsFocused = useFocused();\n const imageIsSelected = useSelected();\n\n if (!isImage(element)) {\n return null;\n }\n const { url, alternativeText, width, height } = element.image;\n\n return (\n <Box {...attributes}>\n {children}\n <ImageWrapper\n background=\"neutral100\"\n contentEditable={false}\n justifyContent=\"center\"\n $isFocused={editorIsFocused && imageIsSelected}\n hasRadius\n >\n <img src={url} alt={alternativeText} width={width} height={height} />\n </ImageWrapper>\n </Box>\n );\n};\n\nconst ImageDialog = () => {\n const [isOpen, setIsOpen] = React.useState(true);\n const { editor } = useBlocksEditorContext('ImageDialog');\n const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n if (!components \|\| !isOpen) return null;\n\n const MediaLibraryDialog = components['media-library'] as React.ComponentType<{\n allowedTypes: Schema.Attribute.MediaKind[];\n onClose: () => void;\n onSelectAssets: (_images: Schema.Attribute.MediaValue<true>) => void;\n }>;\n\n const insertImages = (images: Block<'image'>['image'][]) => {\n // If the selection is inside a list, split the list so that the modified block is outside of it\n Transforms.unwrapNodes(editor, {\n match: (node) => !Editor.isEditor(node) && node.type === 'list',\n split: true,\n });\n\n // Save the path of the node that is being replaced by an image to insert the images there later\n // It's the closest full block node above the selection\n const nodeEntryBeingReplaced = Editor.above(editor, {\n match(node) {\n if (Editor.isEditor(node)) return false;\n\n const isInlineNode = ['text', 'link'].includes(node.type);\n\n return !isInlineNode;\n },\n });\n\n if (!nodeEntryBeingReplaced) return;\n const [, pathToInsert] = nodeEntryBeingReplaced;\n\n // Remove the previous node that is being replaced by an image\n Transforms.removeNodes(editor);\n\n // Convert images to nodes and insert them\n const nodesToInsert = images.map((image) => {\n const imageNode: Block<'image'> = {\n type: 'image',\n image,\n children: [{ type: 'text', text: '' }],\n };\n return imageNode;\n });\n Transforms.insertNodes(editor, nodesToInsert, { at: pathToInsert });\n\n // Set the selection on the image since it was cleared by calling removeNodes\n Transforms.select(editor, pathToInsert);\n };\n\n const handleSelectAssets = (images: Schema.Attribute.MediaValue<true>) => {\n const formattedImages = images.map((image) => {\n // Create an object with imageSchema defined and exclude unnecessary props coming from media library config\n const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);\n\n const nodeImage: Block<'image'>['image'] = {\n ...expectedImage,\n alternativeText: expectedImage.alternativeText \|\| expectedImage.name,\n url: prefixFileUrlWithBackendUrl(image.url),\n };\n\n return nodeImage;\n });\n\n insertImages(formattedImages);\n setIsOpen(false);\n };\n\n return (\n <MediaLibraryDialog\n allowedTypes={['images']}\n onClose={() => setIsOpen(false)}\n onSelectAssets={handleSelectAssets}\n />\n );\n};\n\n/*\n Images are void elements. They handle the rendering of their children instead of Slate.\n * See the Slate documentation for more information:\n * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void\n * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements\n /\nconst withImages = (editor: Editor) => {\n const { isVoid } = editor;\n\n editor.isVoid = (element) => {\n return element.type === 'image' ? true : isVoid(element);\n };\n\n return editor;\n};\n\nconst imageBlocks: Pick<BlocksStore, 'image'> = {\n image: {\n renderElement: (props) => <Image {...props} />,\n icon: Picture,\n label: {\n id: 'components.Blocks.blocks.image',\n defaultMessage: 'Image',\n },\n matchNode: (node) => node.type === 'image',\n isInBlocksSelector: true,\n handleBackspaceKey(editor) {\n // Prevent issue where the image remains when it's the only block in the document\n if (editor.children.length === 1) {\n Transforms.setNodes(editor, {\n type: 'paragraph',\n // @ts-expect-error we're only setting image as null so that Slate deletes it\n image: null,\n children: [{ type: 'text', text: '' }],\n });\n } else {\n Transforms.removeNodes(editor);\n }\n },\n handleEnterKey(editor) {\n Transforms.insertNodes(editor, {\n type: 'paragraph',\n children: [{ type: 'text', text: '' }],\n });\n },\n handleConvert: () => {\n /\n All the logic is managed inside the ImageDialog component,\n * because the blocks are only created when the user selects images in the modal and submits\n * and if he closes the modal, then no changes are made to the editor\n */\n return () => <ImageDialog />;\n },\n snippets: ['!['],\n plugin: withImages,\n },\n};\n\nexport { imageBlocks };\n"],"names":["ImageWrapper","styled","Flex","props","$isFocused","css","theme","colors","primary600","IMAGE_SCHEMA_FIELDS","pick","object","keys","entries","map","key","Object","fromEntries","isImage","element","type","Image","attributes","children","editorIsFocused","useFocused","imageIsSelected","useSelected","url","alternativeText","width","height","image","_jsxs","Box","_jsx","background","contentEditable","justifyContent","hasRadius","img","src","alt","ImageDialog","isOpen","setIsOpen","React","useState","editor","useBlocksEditorContext","components","useStrapiApp","state","MediaLibraryDialog","insertImages","images","Transforms","unwrapNodes","match","node","Editor","isEditor","split","nodeEntryBeingReplaced","above","isInlineNode","includes","pathToInsert","removeNodes","nodesToInsert","imageNode","text","insertNodes","at","select","handleSelectAssets","formattedImages","expectedImage","nodeImage","name","prefixFileUrlWithBackendUrl","allowedTypes","onClose","onSelectAssets","withImages","isVoid","imageBlocks","renderElement","icon","Picture","label","id","defaultMessage","matchNode","isInBlocksSelector","handleBackspaceKey","length","setNodes","handleEnterKey","handleConvert","snippets","plugin"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAMA,YAAAA,GAAeC,uBAAsBC,CAAAA,iBAAAA,CAA+B;;;AAGxE,EAAA,EAAE,CAACC,KACDA,GAAAA,KAAAA,CAAMC,UAAU,IAChBC,oBAAG;AACW,kBAAA,EAAEF,MAAMG,KAAK,CAACC,MAAM,CAACC,UAAU,CAAC;AAC9C,IAAA,CAAC;;;;;;;;;AASL,CAAC;AAED,MAAMC,mBAAsB,GAAA;AAC1B,IAAA,MAAA;AACA,IAAA,iBAAA;AACA,IAAA,KAAA;AACA,IAAA,SAAA;AACA,IAAA,OAAA;AACA,IAAA,QAAA;AACA,IAAA,SAAA;AACA,IAAA,MAAA;AACA,IAAA,KAAA;AACA,IAAA,MAAA;AACA,IAAA,MAAA;AACA,IAAA,YAAA;AACA,IAAA,UAAA;AACA,IAAA,mBAAA;AACA,IAAA,WAAA;AACA,IAAA;AACD,CAAA;AAED,MAAMC,IAAAA,GAAO,CAAsCC,MAAWC,EAAAA,IAAAA,GAAAA;AAC5D,IAAA,MAAMC,OAAUD,GAAAA,IAAAA,CAAKE,GAAG,CAAC,CAACC,GAAQ,GAAA;AAACA,YAAAA,GAAAA;AAAKJ,YAAAA,MAAM,CAACI,GAAI;AAAC,SAAA,CAAA;IACpD,OAAOC,MAAAA,CAAOC,WAAW,CAACJ,OAAAA,CAAAA;AAC5B,CAAA;AAEA;AACA,MAAMK,UAAU,CAACC,OAAAA,GAAAA;IACf,OAAOA,OAAAA,CAAQC,IAAI,KAAK,OAAA;AAC1B,CAAA;AAEA;AACA,MAAMC,KAAAA,GAAQ,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAAEJ,OAAO,EAAsB,GAAA;AAClE,IAAA,MAAMK,eAAkBC,GAAAA,qBAAAA,EAAAA;AACxB,IAAA,MAAMC,eAAkBC,GAAAA,sBAAAA,EAAAA;IAExB,IAAI,CAACT,QAAQC,OAAU,CAAA,EAAA;QACrB,OAAO,IAAA;AACT;IACA,MAAM,EAAES,GAAG,EAAEC,eAAe,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGZ,OAAAA,CAAQa,KAAK;AAE7D,IAAA,qBACEC,eAACC,CAAAA,gBAAAA,EAAAA;AAAK,QAAA,GAAGZ,UAAU;;AAChBC,YAAAA,QAAAA;0BACDY,cAACnC,CAAAA,YAAAA,EAAAA;gBACCoC,UAAW,EAAA,YAAA;gBACXC,eAAiB,EAAA,KAAA;gBACjBC,cAAe,EAAA,QAAA;AACflC,gBAAAA,UAAAA,EAAYoB,eAAmBE,IAAAA,eAAAA;gBAC/Ba,SAAS,EAAA,IAAA;AAET,gBAAA,QAAA,gBAAAJ,cAACK,CAAAA,KAAAA,EAAAA;oBAAIC,GAAKb,EAAAA,GAAAA;oBAAKc,GAAKb,EAAAA,eAAAA;oBAAiBC,KAAOA,EAAAA,KAAAA;oBAAOC,MAAQA,EAAAA;;;;;AAInE,CAAA;AAEA,MAAMY,WAAc,GAAA,IAAA;AAClB,IAAA,MAAM,CAACC,MAAQC,EAAAA,SAAAA,CAAU,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,IAAA,CAAA;AAC3C,IAAA,MAAM,EAAEC,MAAM,EAAE,GAAGC,mCAAuB,CAAA,aAAA,CAAA;AAC1C,IAAA,MAAMC,aAAaC,wBAAa,CAAA,aAAA,EAAe,CAACC,KAAAA,GAAUA,MAAMF,UAAU,CAAA;AAE1E,IAAA,IAAI,CAACA,UAAAA,IAAc,CAACN,MAAAA,EAAQ,OAAO,IAAA;IAEnC,MAAMS,kBAAAA,GAAqBH,UAAU,CAAC,eAAgB,CAAA;AAMtD,IAAA,MAAMI,eAAe,CAACC,MAAAA,GAAAA;;QAEpBC,gBAAWC,CAAAA,WAAW,CAACT,MAAQ,EAAA;YAC7BU,KAAO,EAAA,CAACC,OAAS,CAACC,YAAAA,CAAOC,QAAQ,CAACF,IAAAA,CAAAA,IAASA,IAAKvC,CAAAA,IAAI,KAAK,MAAA;YACzD0C,KAAO,EAAA;AACT,SAAA,CAAA;;;AAIA,QAAA,MAAMC,sBAAyBH,GAAAA,YAAAA,CAAOI,KAAK,CAAChB,MAAQ,EAAA;AAClDU,YAAAA,KAAAA,CAAAA,CAAMC,IAAI,EAAA;AACR,gBAAA,IAAIC,YAAOC,CAAAA,QAAQ,CAACF,IAAAA,CAAAA,EAAO,OAAO,KAAA;AAElC,gBAAA,MAAMM,YAAe,GAAA;AAAC,oBAAA,MAAA;AAAQ,oBAAA;iBAAO,CAACC,QAAQ,CAACP,IAAAA,CAAKvC,IAAI,CAAA;AAExD,gBAAA,OAAO,CAAC6C,YAAAA;AACV;AACF,SAAA,CAAA;AAEA,QAAA,IAAI,CAACF,sBAAwB,EAAA;QAC7B,MAAM,GAAGI,aAAa,GAAGJ,sBAAAA;;AAGzBP,QAAAA,gBAAAA,CAAWY,WAAW,CAACpB,MAAAA,CAAAA;;AAGvB,QAAA,MAAMqB,aAAgBd,GAAAA,MAAAA,CAAOzC,GAAG,CAAC,CAACkB,KAAAA,GAAAA;AAChC,YAAA,MAAMsC,SAA4B,GAAA;gBAChClD,IAAM,EAAA,OAAA;AACNY,gBAAAA,KAAAA;gBACAT,QAAU,EAAA;AAAC,oBAAA;wBAAEH,IAAM,EAAA,MAAA;wBAAQmD,IAAM,EAAA;AAAG;AAAE;AACxC,aAAA;YACA,OAAOD,SAAAA;AACT,SAAA,CAAA;QACAd,gBAAWgB,CAAAA,WAAW,CAACxB,MAAAA,EAAQqB,aAAe,EAAA;YAAEI,EAAIN,EAAAA;AAAa,SAAA,CAAA;;QAGjEX,gBAAWkB,CAAAA,MAAM,CAAC1B,MAAQmB,EAAAA,YAAAA,CAAAA;AAC5B,KAAA;AAEA,IAAA,MAAMQ,qBAAqB,CAACpB,MAAAA,GAAAA;AAC1B,QAAA,MAAMqB,eAAkBrB,GAAAA,MAAAA,CAAOzC,GAAG,CAAC,CAACkB,KAAAA,GAAAA;;YAElC,MAAM6C,aAAAA,GAAgBnE,KAAKsB,KAAOvB,EAAAA,mBAAAA,CAAAA;AAElC,YAAA,MAAMqE,SAAqC,GAAA;AACzC,gBAAA,GAAGD,aAAa;AAChBhD,gBAAAA,eAAAA,EAAiBgD,aAAchD,CAAAA,eAAe,IAAIgD,aAAAA,CAAcE,IAAI;gBACpEnD,GAAKoD,EAAAA,gCAAAA,CAA4BhD,MAAMJ,GAAG;AAC5C,aAAA;YAEA,OAAOkD,SAAAA;AACT,SAAA,CAAA;QAEAxB,YAAasB,CAAAA,eAAAA,CAAAA;QACb/B,SAAU,CAAA,KAAA,CAAA;AACZ,KAAA;AAEA,IAAA,qBACEV,cAACkB,CAAAA,kBAAAA,EAAAA;QACC4B,YAAc,EAAA;AAAC,YAAA;AAAS,SAAA;AACxBC,QAAAA,OAAAA,EAAS,IAAMrC,SAAU,CAAA,KAAA,CAAA;QACzBsC,cAAgBR,EAAAA;;AAGtB,CAAA;AAEA;;;;;IAMA,MAAMS,aAAa,CAACpC,MAAAA,GAAAA;IAClB,MAAM,EAAEqC,MAAM,EAAE,GAAGrC,MAAAA;IAEnBA,MAAOqC,CAAAA,MAAM,GAAG,CAAClE,OAAAA,GAAAA;AACf,QAAA,OAAOA,OAAQC,CAAAA,IAAI,KAAK,OAAA,GAAU,OAAOiE,MAAOlE,CAAAA,OAAAA,CAAAA;AAClD,KAAA;IAEA,OAAO6B,MAAAA;AACT,CAAA;AAEA,MAAMsC,WAA0C,GAAA;IAC9CtD,KAAO,EAAA;QACLuD,aAAe,EAAA,CAACpF,sBAAUgC,cAACd,CAAAA,KAAAA,EAAAA;AAAO,gBAAA,GAAGlB;;QACrCqF,IAAMC,EAAAA,WAAAA;QACNC,KAAO,EAAA;YACLC,EAAI,EAAA,gCAAA;YACJC,cAAgB,EAAA;AAClB,SAAA;AACAC,QAAAA,SAAAA,EAAW,CAAClC,IAAAA,GAASA,IAAKvC,CAAAA,IAAI,KAAK,OAAA;QACnC0E,kBAAoB,EAAA,IAAA;AACpBC,QAAAA,kBAAAA,CAAAA,CAAmB/C,MAAM,EAAA;;AAEvB,YAAA,IAAIA,MAAOzB,CAAAA,QAAQ,CAACyE,MAAM,KAAK,CAAG,EAAA;gBAChCxC,gBAAWyC,CAAAA,QAAQ,CAACjD,MAAQ,EAAA;oBAC1B5B,IAAM,EAAA,WAAA;;oBAENY,KAAO,EAAA,IAAA;oBACPT,QAAU,EAAA;AAAC,wBAAA;4BAAEH,IAAM,EAAA,MAAA;4BAAQmD,IAAM,EAAA;AAAG;AAAE;AACxC,iBAAA,CAAA;aACK,MAAA;AACLf,gBAAAA,gBAAAA,CAAWY,WAAW,CAACpB,MAAAA,CAAAA;AACzB;AACF,SAAA;AACAkD,QAAAA,cAAAA,CAAAA,CAAelD,MAAM,EAAA;YACnBQ,gBAAWgB,CAAAA,WAAW,CAACxB,MAAQ,EAAA;gBAC7B5B,IAAM,EAAA,WAAA;gBACNG,QAAU,EAAA;AAAC,oBAAA;wBAAEH,IAAM,EAAA,MAAA;wBAAQmD,IAAM,EAAA;AAAG;AAAE;AACxC,aAAA,CAAA;AACF,SAAA;QACA4B,aAAe,EAAA,IAAA;AACb;;;;UAKA,OAAO,kBAAMhE,cAACQ,CAAAA,WAAAA,EAAAA,EAAAA,CAAAA;AAChB,SAAA;QACAyD,QAAU,EAAA;AAAC,YAAA;AAAK,SAAA;QAChBC,MAAQjB,EAAAA;AACV;AACF;;;;"}

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

@@ -151,6 +151,18 @@ const ImageDialog = ()=>{
         onSelectAssets: handleSelectAssets
     });
 };
+/**
+ * Images are void elements. They handle the rendering of their children instead of Slate.
+ * See the Slate documentation for more information:
+ * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void
+ * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements
+ */ const withImages = (editor)=>{
+    const { isVoid } = editor;
+    editor.isVoid = (element)=>{
+        return element.type === 'image' ? true : isVoid(element);
+    };
+    return editor;
+};
 const imageBlocks = {
     image: {
         renderElement: (props)=>/*#__PURE__*/ jsx(Image, {
@@ -201,7 +213,8 @@ const imageBlocks = {
         },
         snippets: [
             '!['
-        ]
+        ],
+        plugin: withImages
     }
 };

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

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