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

@strapi/content-manager 5.33.4 → 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 (79) hide show

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/Wysiwyg/PreviewWysiwyg.js CHANGED Viewed

@@ -88,23 +88,35 @@ const Wrapper = styledComponents.styled.div`
   }
   h1 {
-    font-size: 3.6rem;
+    font-size: 2.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3.6rem;
+    }
     font-weight: 600;
   }
   h2 {
-    font-size: 3rem;
-    font-weight: 500;
+    font-size: 2.2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3rem;
+    }
+    font-weight: 600;
   }
   h3 {
-    font-size: 2.4rem;
-    font-weight: 500;
+    font-size: 2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
   }
   h4 {
-    font-size: 2rem;
-    font-weight: 500;
+    font-size: 1.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
   }
   strong {

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewWysiwyg.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n data?: string;\n}\n\nconst PreviewWysiwyg = ({ data = '' }: PreviewWysiwygProps) => {\n const html = React.useMemo(\n () =>\n sanitizeHtml(md.render(data.replaceAll('\\\\n', '\\n') \|\| ''), {\n ...sanitizeHtml.defaults,\n allowedTags: false,\n allowedAttributes: {\n '': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n img: ['src', 'alt'],\n source: ['src', 'type'],\n },\n }),\n [data]\n );\n\n return (\n <Wrapper>\n <div dangerouslySetInnerHTML={{ __html: html }} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n font-size: 1.4rem;\n background-color: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n line-height: ${({ theme }) => theme.lineHeights[6]};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block-start: ${({ theme }) => theme.spaces[2]};\n margin-block-end: ${({ theme }) => theme.spaces[2]};\n }\n\n p {\n margin-bottom: ${({ theme }) => theme.spaces[2]};\n }\n\n h1 {\n font-size: 3.6rem;\n font-weight: 600;\n }\n\n h2 {\n font-size: 3rem;\n font-weight: ~~500~~;\n }\n\n h3 {\n font-size: 2.4rem;\n font-weight: ~~500~~;\n }\n\n h4 {\n font-size: ~~2rem~~;\n font-weight: ~~500~~;\n }\n\n strong {\n font-weight: 800;\n }\n\n em {\n font-style: italic;\n }\n\n blockquote {\n margin-top: ${({ theme }) => theme.spaces[8]};\n margin-bottom: ${({ theme }) => theme.spaces[7]};\n font-size: 1.4rem;\n font-weight: 400;\n border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n font-style: italic;\n padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n }\n\n img {\n max-width: 100%;\n }\n\n table {\n thead {\n background: ${({ theme }) => theme.colors.neutral150};\n\n th {\n padding: ${({ theme }) => theme.spaces[4]};\n }\n }\n tr {\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n }\n th,\n td {\n padding: ${({ theme }) => theme.spaces[4]};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-bottom: 0;\n border-top: 0;\n }\n }\n\n pre,\n code {\n font-size: 1.4rem;\n border-radius: 4px;\n / \n Hard coded since the color is the same between themes,\n theme.colors.neutral800 changes between themes.\n\n Matches the color of the JSON Input component.\n /\n background-color: #32324d;\n max-width: 100%;\n overflow: auto;\n padding: ${({ theme }) => theme.spaces[2]};\n }\n\n / Inline code */\n p,\n pre,\n td {\n > code {\n color: #839496;\n }\n }\n\n ol {\n list-style-type: decimal;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ol,\n ul {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n\n ul {\n list-style-type: disc;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ul,\n ol {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","neutral150","neutral200"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,cAAiB,GAAA,CAAC,EAAEC,IAAAA,GAAO,EAAE,EAAuB,GAAA;AACxD,IAAA,MAAMC,IAAOC,GAAAA,gBAAAA,CAAMC,OAAO,CACxB,IACEC,YAAaC,CAAAA,aAAAA,CAAGC,MAAM,CAACN,IAAKO,CAAAA,UAAU,CAAC,KAAA,EAAO,SAAS,EAAK,CAAA,EAAA;AAC1D,YAAA,GAAGH,aAAaI,QAAQ;YACxBC,WAAa,EAAA,KAAA;YACbC,iBAAmB,EAAA;gBACjB,GAAK,EAAA;AAAC,oBAAA,MAAA;AAAQ,oBAAA,OAAA;AAAS,oBAAA,KAAA;AAAO,oBAAA,QAAA;AAAU,oBAAA,OAAA;AAAS,oBAAA,QAAA;AAAU,oBAAA,MAAA;AAAQ,oBAAA,UAAA;AAAY,oBAAA;AAAS,iBAAA;gBACxFC,GAAK,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAM,iBAAA;gBACnBC,MAAQ,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAO;AACzB;SAEJ,CAAA,EAAA;AAACZ,QAAAA;AAAK,KAAA,CAAA;AAGR,IAAA,qBACEa,cAACC,CAAAA,OAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,KAAAA,EAAAA;YAAIC,uBAAyB,EAAA;gBAAEC,MAAQhB,EAAAA;AAAK;;;AAGnD;AAEA,MAAMa,OAAAA,GAAUI,uBAAOH,CAAAA,GAAG;;;;;;AAMf,WAAA,EAAE,CAAC,EAAEI,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMC,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAED,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;oBAEhD,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAClD,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;eACnC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;;;;;;;;wBAQ7B,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;mBAIpC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgCpC~~,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;mBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;2BAGzB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACI~~,UAAU,CAAC;;aAEvD,EAAE,CAAC,~~EAAEN~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;kBAS9D,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACI~~,UAAU,CAAC;;;iBAG1C,EAAE,CAAC,~~EAAEN~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;wBAI1B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACK~~,UAAU,CAAC;;;;eAIlD,EAAE,CAAC,~~EAAEP~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACxB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACK~~,UAAU,CAAC;;;;;;;;;;;;;;;;;;;aAmBpD,EAAE,CAAC,~~EAAEP~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;wBActB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;wBAWnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;AAQ3D,CAAC;;;;"}
1	+ {"version":3,"file":"PreviewWysiwyg.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n data?: string;\n}\n\nconst PreviewWysiwyg = ({ data = '' }: PreviewWysiwygProps) => {\n const html = React.useMemo(\n () =>\n sanitizeHtml(md.render(data.replaceAll('\\\\n', '\\n') \|\| ''), {\n ...sanitizeHtml.defaults,\n allowedTags: false,\n allowedAttributes: {\n '': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n img: ['src', 'alt'],\n source: ['src', 'type'],\n },\n }),\n [data]\n );\n\n return (\n <Wrapper>\n <div dangerouslySetInnerHTML={{ __html: html }} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n font-size: 1.4rem;\n background-color: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n line-height: ${({ theme }) => theme.lineHeights[6]};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block-start: ${({ theme }) => theme.spaces[2]};\n margin-block-end: ${({ theme }) => theme.spaces[2]};\n }\n\n p {\n margin-bottom: ${({ theme }) => theme.spaces[2]};\n }\n\n h1 {\n font-size: 2.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3.6rem;\n }\n font-weight: 600;\n }\n\n h2 {\n font-size: 2.2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3rem;\n }\n font-weight: 600;\n }\n\n h3 {\n font-size: 2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n }\n\n h4 {\n font-size: 1.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n }\n\n strong {\n font-weight: 800;\n }\n\n em {\n font-style: italic;\n }\n\n blockquote {\n margin-top: ${({ theme }) => theme.spaces[8]};\n margin-bottom: ${({ theme }) => theme.spaces[7]};\n font-size: 1.4rem;\n font-weight: 400;\n border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n font-style: italic;\n padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n }\n\n img {\n max-width: 100%;\n }\n\n table {\n thead {\n background: ${({ theme }) => theme.colors.neutral150};\n\n th {\n padding: ${({ theme }) => theme.spaces[4]};\n }\n }\n tr {\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n }\n th,\n td {\n padding: ${({ theme }) => theme.spaces[4]};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-bottom: 0;\n border-top: 0;\n }\n }\n\n pre,\n code {\n font-size: 1.4rem;\n border-radius: 4px;\n / \n Hard coded since the color is the same between themes,\n theme.colors.neutral800 changes between themes.\n\n Matches the color of the JSON Input component.\n /\n background-color: #32324d;\n max-width: 100%;\n overflow: auto;\n padding: ${({ theme }) => theme.spaces[2]};\n }\n\n / Inline code */\n p,\n pre,\n td {\n > code {\n color: #839496;\n }\n }\n\n ol {\n list-style-type: decimal;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ol,\n ul {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n\n ul {\n list-style-type: disc;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ul,\n ol {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","breakpoints","medium","neutral150","neutral200"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.mjs CHANGED Viewed

@@ -67,23 +67,35 @@ const Wrapper = styled.div`
   }
   h1 {
-    font-size: 3.6rem;
+    font-size: 2.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3.6rem;
+    }
     font-weight: 600;
   }
   h2 {
-    font-size: 3rem;
-    font-weight: 500;
+    font-size: 2.2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3rem;
+    }
+    font-weight: 600;
   }
   h3 {
-    font-size: 2.4rem;
-    font-weight: 500;
+    font-size: 2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
   }
   h4 {
-    font-size: 2rem;
-    font-weight: 500;
+    font-size: 1.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
   }
   strong {

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewWysiwyg.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n data?: string;\n}\n\nconst PreviewWysiwyg = ({ data = '' }: PreviewWysiwygProps) => {\n const html = React.useMemo(\n () =>\n sanitizeHtml(md.render(data.replaceAll('\\\\n', '\\n') \|\| ''), {\n ...sanitizeHtml.defaults,\n allowedTags: false,\n allowedAttributes: {\n '': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n img: ['src', 'alt'],\n source: ['src', 'type'],\n },\n }),\n [data]\n );\n\n return (\n <Wrapper>\n <div dangerouslySetInnerHTML={{ __html: html }} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n font-size: 1.4rem;\n background-color: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n line-height: ${({ theme }) => theme.lineHeights[6]};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block-start: ${({ theme }) => theme.spaces[2]};\n margin-block-end: ${({ theme }) => theme.spaces[2]};\n }\n\n p {\n margin-bottom: ${({ theme }) => theme.spaces[2]};\n }\n\n h1 {\n font-size: 3.6rem;\n font-weight: 600;\n }\n\n h2 {\n font-size: 3rem;\n font-weight: ~~500~~;\n }\n\n h3 {\n font-size: 2.4rem;\n font-weight: ~~500~~;\n }\n\n h4 {\n font-size: ~~2rem~~;\n font-weight: ~~500~~;\n }\n\n strong {\n font-weight: 800;\n }\n\n em {\n font-style: italic;\n }\n\n blockquote {\n margin-top: ${({ theme }) => theme.spaces[8]};\n margin-bottom: ${({ theme }) => theme.spaces[7]};\n font-size: 1.4rem;\n font-weight: 400;\n border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n font-style: italic;\n padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n }\n\n img {\n max-width: 100%;\n }\n\n table {\n thead {\n background: ${({ theme }) => theme.colors.neutral150};\n\n th {\n padding: ${({ theme }) => theme.spaces[4]};\n }\n }\n tr {\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n }\n th,\n td {\n padding: ${({ theme }) => theme.spaces[4]};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-bottom: 0;\n border-top: 0;\n }\n }\n\n pre,\n code {\n font-size: 1.4rem;\n border-radius: 4px;\n / \n Hard coded since the color is the same between themes,\n theme.colors.neutral800 changes between themes.\n\n Matches the color of the JSON Input component.\n /\n background-color: #32324d;\n max-width: 100%;\n overflow: auto;\n padding: ${({ theme }) => theme.spaces[2]};\n }\n\n / Inline code */\n p,\n pre,\n td {\n > code {\n color: #839496;\n }\n }\n\n ol {\n list-style-type: decimal;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ol,\n ul {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n\n ul {\n list-style-type: disc;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ul,\n ol {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","neutral150","neutral200"],"mappings":";;;;;;AAWA,MAAMA,cAAiB,GAAA,CAAC,EAAEC,IAAAA,GAAO,EAAE,EAAuB,GAAA;AACxD,IAAA,MAAMC,IAAOC,GAAAA,KAAAA,CAAMC,OAAO,CACxB,IACEC,YAAaC,CAAAA,EAAAA,CAAGC,MAAM,CAACN,IAAKO,CAAAA,UAAU,CAAC,KAAA,EAAO,SAAS,EAAK,CAAA,EAAA;AAC1D,YAAA,GAAGH,aAAaI,QAAQ;YACxBC,WAAa,EAAA,KAAA;YACbC,iBAAmB,EAAA;gBACjB,GAAK,EAAA;AAAC,oBAAA,MAAA;AAAQ,oBAAA,OAAA;AAAS,oBAAA,KAAA;AAAO,oBAAA,QAAA;AAAU,oBAAA,OAAA;AAAS,oBAAA,QAAA;AAAU,oBAAA,MAAA;AAAQ,oBAAA,UAAA;AAAY,oBAAA;AAAS,iBAAA;gBACxFC,GAAK,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAM,iBAAA;gBACnBC,MAAQ,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAO;AACzB;SAEJ,CAAA,EAAA;AAACZ,QAAAA;AAAK,KAAA,CAAA;AAGR,IAAA,qBACEa,GAACC,CAAAA,OAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,KAAAA,EAAAA;YAAIC,uBAAyB,EAAA;gBAAEC,MAAQhB,EAAAA;AAAK;;;AAGnD;AAEA,MAAMa,OAAAA,GAAUI,MAAOH,CAAAA,GAAG;;;;;;AAMf,WAAA,EAAE,CAAC,EAAEI,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMC,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAED,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;oBAEhD,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAClD,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;eACnC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;;;;;;;;wBAQ7B,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;mBAIpC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAgCpC~~,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;mBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;2BAGzB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACI~~,UAAU,CAAC;;aAEvD,EAAE,CAAC,~~EAAEN~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;kBAS9D,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACI~~,UAAU,CAAC;;;iBAG1C,EAAE,CAAC,~~EAAEN~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;wBAI1B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACK~~,UAAU,CAAC;;;;eAIlD,EAAE,CAAC,~~EAAEP~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACxB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,~~CAACK~~,UAAU,CAAC;;;;;;;;;;;;;;;;;;;aAmBpD,EAAE,CAAC,~~EAAEP~~,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;wBActB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;wBAWnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;AAQ3D,CAAC;;;;"}
1	+ {"version":3,"file":"PreviewWysiwyg.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n data?: string;\n}\n\nconst PreviewWysiwyg = ({ data = '' }: PreviewWysiwygProps) => {\n const html = React.useMemo(\n () =>\n sanitizeHtml(md.render(data.replaceAll('\\\\n', '\\n') \|\| ''), {\n ...sanitizeHtml.defaults,\n allowedTags: false,\n allowedAttributes: {\n '': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n img: ['src', 'alt'],\n source: ['src', 'type'],\n },\n }),\n [data]\n );\n\n return (\n <Wrapper>\n <div dangerouslySetInnerHTML={{ __html: html }} />\n </Wrapper>\n );\n};\n\nconst Wrapper = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n font-size: 1.4rem;\n background-color: ${({ theme }) => theme.colors.neutral0};\n color: ${({ theme }) => theme.colors.neutral800};\n line-height: ${({ theme }) => theme.lineHeights[6]};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-block-start: ${({ theme }) => theme.spaces[2]};\n margin-block-end: ${({ theme }) => theme.spaces[2]};\n }\n\n p {\n margin-bottom: ${({ theme }) => theme.spaces[2]};\n }\n\n h1 {\n font-size: 2.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3.6rem;\n }\n font-weight: 600;\n }\n\n h2 {\n font-size: 2.2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 3rem;\n }\n font-weight: 600;\n }\n\n h3 {\n font-size: 2rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n }\n\n h4 {\n font-size: 1.8rem;\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 2.4rem;\n }\n font-weight: 600;\n }\n\n strong {\n font-weight: 800;\n }\n\n em {\n font-style: italic;\n }\n\n blockquote {\n margin-top: ${({ theme }) => theme.spaces[8]};\n margin-bottom: ${({ theme }) => theme.spaces[7]};\n font-size: 1.4rem;\n font-weight: 400;\n border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n font-style: italic;\n padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n }\n\n img {\n max-width: 100%;\n }\n\n table {\n thead {\n background: ${({ theme }) => theme.colors.neutral150};\n\n th {\n padding: ${({ theme }) => theme.spaces[4]};\n }\n }\n tr {\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n }\n th,\n td {\n padding: ${({ theme }) => theme.spaces[4]};\n border: 1px solid ${({ theme }) => theme.colors.neutral200};\n border-bottom: 0;\n border-top: 0;\n }\n }\n\n pre,\n code {\n font-size: 1.4rem;\n border-radius: 4px;\n / \n Hard coded since the color is the same between themes,\n theme.colors.neutral800 changes between themes.\n\n Matches the color of the JSON Input component.\n /\n background-color: #32324d;\n max-width: 100%;\n overflow: auto;\n padding: ${({ theme }) => theme.spaces[2]};\n }\n\n / Inline code */\n p,\n pre,\n td {\n > code {\n color: #839496;\n }\n }\n\n ol {\n list-style-type: decimal;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ol,\n ul {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n\n ul {\n list-style-type: disc;\n margin-block-start: ${({ theme }) => theme.spaces[4]};\n margin-block-end: ${({ theme }) => theme.spaces[4]};\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n ul,\n ol {\n margin-block-start: 0px;\n margin-block-end: 0px;\n }\n }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","breakpoints","medium","neutral150","neutral200"],"mappings":"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"}

package/dist/admin/pages/EditView/components/Header.js CHANGED Viewed

@@ -40,7 +40,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
     const { formatMessage } = reactIntl.useIntl();
     const isCloning = reactRouterDom.useMatch(router.CLONE_PATH) !== null;
+    const isMobile = strapiAdmin.useIsMobile();
     const params = reactRouterDom.useParams();
+    const [{ query: { status: activeTab = 'draft' } }] = strapiAdmin.useQueryParams();
     const title = isCreating ? formatMessage({
         id: 'content-manager.containers.edit.title.new',
         defaultMessage: 'Create an entry'
@@ -48,17 +50,16 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
         alignItems: "flex-start",
+        paddingLeft: strapiAdmin.RESPONSIVE_DEFAULT_SPACING,
+        paddingRight: strapiAdmin.RESPONSIVE_DEFAULT_SPACING,
         paddingTop: {
             initial: 4,
-            large: 6
-        },
-        paddingBottom: {
-            initial: 0,
-            large: 4
+            medium: 6
         },
+        paddingBottom: 4,
         gap: 2,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {
+            !isMobile && /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {
                 fallback: params.collectionType === collections.SINGLE_TYPES ? undefined : `../${collections.COLLECTION_TYPES}/${params.slug}`
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -70,16 +71,50 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
                 },
                 alignItems: "flex-start",
                 direction: {
-                    initial: 'column',
+                    initial: 'column-reverse',
                     medium: 'row'
                 },
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                        variant: "alpha",
-                        tag: "h1",
-                        children: title
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 2,
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        width: "100%",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "alpha",
+                                tag: "h1",
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                display: {
+                                    initial: 'block',
+                                    medium: 'none'
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(HeaderDocumentActions, {
+                                    activeTab: activeTab,
+                                    isCloning: isCloning
+                                })
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(HeaderToolbar, {})
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        width: {
+                            initial: '100%',
+                            medium: 'auto'
+                        },
+                        gap: 3,
+                        justifyContent: "space-between",
+                        children: [
+                            isMobile && /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.BackButton, {
+                                fallback: params.collectionType === collections.SINGLE_TYPES ? undefined : `../${collections.COLLECTION_TYPES}/${params.slug}`
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(HeaderToolbar, {
+                                activeTab: activeTab,
+                                isCloning: isCloning
+                            })
+                        ]
+                    })
                 ]
             }),
             status ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
@@ -91,13 +126,44 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
         ]
     });
 };
+const HeaderDocumentActions = ({ activeTab, isCloning })=>{
+    const { model, id, document, meta, collectionType } = useDocument.useDoc();
+    const { formatMessage } = reactIntl.useIntl();
+    const plugins = strapiAdmin.useStrapiApp('HeaderToolbar', (state)=>state.plugins);
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
+        props: {
+            activeTab,
+            model,
+            documentId: id,
+            document: isCloning ? undefined : document,
+            meta: isCloning ? undefined : meta,
+            collectionType
+        },
+        descriptions: plugins['content-manager'].apis.getDocumentActions('header'),
+        children: (actions)=>{
+            const headerActions = actions.filter((action)=>{
+                const positions = Array.isArray(action.position) ? action.position : [
+                    action.position
+                ];
+                return positions.includes('header');
+            });
+            return /*#__PURE__*/ jsxRuntime.jsx(DocumentActions.DocumentActionsMenu, {
+                actions: headerActions,
+                label: formatMessage({
+                    id: 'content-manager.containers.edit.header.more-actions',
+                    defaultMessage: 'More actions'
+                }),
+                children: /*#__PURE__*/ jsxRuntime.jsx(Information, {
+                    activeTab: activeTab
+                })
+            });
+        }
+    });
+};
 /**
  * @description Contains the document actions that have `position: header`, if there are
  * none we still render the menu because we render the information about the document there.
- */ const HeaderToolbar = ()=>{
-    const { formatMessage } = reactIntl.useIntl();
-    const isCloning = reactRouterDom.useMatch(router.CLONE_PATH) !== null;
-    const [{ query: { status = 'draft' } }] = strapiAdmin.useQueryParams();
+ */ const HeaderToolbar = ({ activeTab, isCloning })=>{
     const { model, id, document, meta, collectionType } = useDocument.useDoc();
     const plugins = strapiAdmin.useStrapiApp('HeaderToolbar', (state)=>state.plugins);
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -105,7 +171,7 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
                 props: {
-                    activeTab: status,
+                    activeTab,
                     model,
                     documentId: id,
                     document: isCloning ? undefined : document,
@@ -123,34 +189,15 @@ const Header = ({ isCreating, status, title: documentTitle = 'Untitled' })=>{
                     }
                 }
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.DescriptionComponentRenderer, {
-                props: {
-                    activeTab: status,
-                    model,
-                    documentId: id,
-                    document: isCloning ? undefined : document,
-                    meta: isCloning ? undefined : meta,
-                    collectionType
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                display: {
+                    initial: 'none',
+                    medium: 'block'
                 },
-                descriptions: plugins['content-manager'].apis.getDocumentActions('header'),
-                children: (actions)=>{
-                    const headerActions = actions.filter((action)=>{
-                        const positions = Array.isArray(action.position) ? action.position : [
-                            action.position
-                        ];
-                        return positions.includes('header');
-                    });
-                    return /*#__PURE__*/ jsxRuntime.jsx(DocumentActions.DocumentActionsMenu, {
-                        actions: headerActions,
-                        label: formatMessage({
-                            id: 'content-manager.containers.edit.header.more-actions',
-                            defaultMessage: 'More actions'
-                        }),
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Information, {
-                            activeTab: status
-                        })
-                    });
-                }
+                children: /*#__PURE__*/ jsxRuntime.jsx(HeaderDocumentActions, {
+                    activeTab: activeTab,
+                    isCloning: isCloning
+                })
             })
         ]
     });