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/Wysiwyg/Editor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/Editor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport CodeMirror, { EditorFromTextArea } from 'codemirror5';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\nimport { newlineAndIndentContinueMarkdownList } from './utils/continueList';\n\nimport type { FieldValue, InputProps } from '@strapi/admin/strapi-admin';\n\nimport 'codemirror5/addon/display/placeholder';\n\ninterface EditorApi {\n focus: () => void;\n scrollIntoView: (args?: Parameters<HTMLElement['scrollIntoView']>[0]) => void;\n}\n\ninterface EditorProps extends Omit<FieldValue, 'initialValue'>, Omit<InputProps, 'type' \| 'label'> {\n editorRef: React.MutableRefObject<EditorFromTextArea>;\n isPreviewMode?: boolean;\n isExpandMode?: boolean;\n textareaRef: React.RefObject<HTMLTextAreaElement>;\n}\n\nconst Editor = React.forwardRef<EditorApi, EditorProps>(\n (\n {\n disabled,\n editorRef,\n error,\n isPreviewMode,\n isExpandMode,\n name,\n onChange,\n placeholder,\n textareaRef,\n value,\n },\n forwardedRef\n ) => {\n const onChangeRef = React.useRef(onChange);\n\n React.useEffect(() => {\n if (editorRef.current) {\n // Ensure the editor and its wrapper are cleaned up whenever this view is re-rendered\n // e.g. in case of re-ordering wysiwyg components in a DynamicZone\n editorRef.current.toTextArea();\n }\n editorRef.current = CodeMirror.fromTextArea(textareaRef.current!, {\n lineWrapping: true,\n extraKeys: {\n Enter: 'newlineAndIndentContinueMarkdownList',\n Tab: false,\n 'Shift-Tab': false,\n },\n readOnly: false,\n smartIndent: false,\n placeholder,\n spellcheck: true,\n inputStyle: 'contenteditable',\n });\n\n // @ts-expect-error – doesn't think command exists?\n CodeMirror.commands.newlineAndIndentContinueMarkdownList =\n newlineAndIndentContinueMarkdownList;\n editorRef.current.on('change', (doc) => {\n onChangeRef.current(name, doc.getValue());\n });\n }, [editorRef, textareaRef, name, placeholder]);\n\n React.useEffect(() => {\n if (value && !editorRef.current.hasFocus()) {\n editorRef.current.setValue(value);\n }\n }, [editorRef, value]);\n\n React.useEffect(() => {\n if (isPreviewMode \|\| disabled) {\n editorRef.current.setOption('readOnly', 'nocursor');\n } else {\n editorRef.current.setOption('readOnly', false);\n }\n }, [disabled, isPreviewMode, editorRef]);\n\n React.useEffect(() => {\n if (error) {\n editorRef.current.setOption('screenReaderLabel', error);\n } else {\n // to replace with translation\n editorRef.current.setOption('screenReaderLabel', 'Editor');\n }\n }, [editorRef, error]);\n\n React.useImperativeHandle(\n forwardedRef,\n () => ({\n focus() {\n editorRef.current.getInputField().focus();\n },\n scrollIntoView(args?: Parameters<HTMLElement['scrollIntoView']>[0]) {\n editorRef.current.getInputField().scrollIntoView(args);\n },\n }),\n [editorRef]\n );\n\n return (\n <EditorAndPreviewWrapper>\n <EditorStylesContainer $isExpandMode={isExpandMode} $disabled={disabled \|\| isPreviewMode}>\n <textarea ref={textareaRef} />\n </EditorStylesContainer>\n {isPreviewMode && <PreviewWysiwyg data={value} />}\n </EditorAndPreviewWrapper>\n );\n }\n);\n\nconst EditorAndPreviewWrapper = styled.div`\n position: relative;\n height: calc(100% - 48px);\n`;\n\nconst EditorStylesContainer = styled.div<{ $disabled?: boolean; $isExpandMode?: boolean }>`\n cursor: ${({ $disabled }) => ($disabled ? 'not-allowed !important' : 'auto')};\n height: 100%;\n /* BASICS /\n .CodeMirror-placeholder {\n color: ${({ theme }) => theme.colors.neutral600} !important;\n }\n\n .CodeMirror {\n / Set height, width, borders, and global font properties here /\n font-size: 1.4rem;\n height: ${({ $isExpandMode }) =>\n $isExpandMode\n ? '100%'\n : '410px'}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border\n color: ${({ theme }) => theme.colors.neutral800};\n direction: ltr;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Open Sans', 'Helvetica Neue', sans-serif;\n }\n\n / PADDING /\n\n .CodeMirror-lines {\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n / Vertical padding around content /\n }\n\n .CodeMirror-scrollbar-filler,\n .CodeMirror-gutter-filler {\n / The little square between H and V scrollbars /\n background-color: ${({ theme }) => `${theme.colors.neutral0}`};\n }\n\n / GUTTER /\n\n .CodeMirror-gutters {\n border-right: 1px solid #ddd;\n background-color: #f7f7f7;\n white-space: nowrap;\n }\n .CodeMirror-linenumbers {\n }\n .CodeMirror-linenumber {\n padding: 0 3px 0 5px;\n min-width: 20px;\n text-align: right;\n color: #999;\n white-space: nowrap;\n }\n\n .CodeMirror-guttermarker {\n color: black;\n }\n .CodeMirror-guttermarker-subtle {\n color: #999;\n }\n\n / CURSOR /\n\n .CodeMirror-cursor {\n border-left: 1px solid black;\n border-right: none;\n width: 0;\n }\n / Shown when moving in bi-directional text /\n .CodeMirror div.CodeMirror-secondarycursor {\n border-left: 1px solid silver;\n }\n .cm-fat-cursor .CodeMirror-cursor {\n width: auto;\n border: 0 !important;\n background: #7e7;\n }\n .cm-fat-cursor div.CodeMirror-cursors {\n / z-index: 1; /\n }\n\n .cm-fat-cursor-mark {\n background-color: rgba(20, 255, 20, 0.5);\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n }\n .cm-animate-fat-cursor {\n width: auto;\n border: 0;\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n background-color: #7e7;\n }\n\n / Can style cursor different in overwrite (non-insert) mode /\n .CodeMirror-overwrite .CodeMirror-cursor {\n }\n\n .cm-tab {\n display: inline-block;\n text-decoration: inherit;\n }\n\n .CodeMirror-rulers {\n position: absolute;\n left: 0;\n right: 0;\n top: -50px;\n bottom: 0;\n overflow: hidden;\n }\n .CodeMirror-ruler {\n border-left: 1px solid #ccc;\n top: 0;\n bottom: 0;\n position: absolute;\n }\n\n / DEFAULT THEME /\n\n .cm-header,\n .cm-strong {\n font-weight: bold;\n }\n .cm-em {\n font-style: italic;\n }\n .cm-link {\n text-decoration: underline;\n }\n .cm-strikethrough {\n text-decoration: line-through;\n }\n\n .CodeMirror-composing {\n border-bottom: 2px solid;\n }\n\n / Default styles for common addons /\n\n div.CodeMirror span.CodeMirror-matchingbracket {\n color: #0b0;\n }\n div.CodeMirror span.CodeMirror-nonmatchingbracket {\n color: #a22;\n }\n .CodeMirror-matchingtag {\n background: rgba(255, 150, 0, 0.3);\n }\n .CodeMirror-activeline-background {\n background: #e8f2ff;\n }\n\n / STOP /\n\n / The rest of this file contains styles related to the mechanics of\n the editor. You probably shouldn't touch them. /\n\n .CodeMirror {\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => `${theme.colors.neutral0}`};\n }\n\n .CodeMirror-scroll {\n overflow: scroll !important; / Things will break if this is overridden /\n / 50px is the magic margin used to hide the element's real scrollbars /\n / See overflow: hidden in .CodeMirror /\n margin-bottom: -50px;\n margin-right: -50px;\n padding-bottom: 50px;\n height: 100%;\n outline: none; / Prevent dragging from highlighting the element /\n position: relative;\n }\n .CodeMirror-sizer {\n position: relative;\n border-right: 50px solid transparent;\n }\n\n / The fake, visible scrollbars. Used to force redraw during scrolling\n before actual scrolling happens, thus preventing shaking and\n flickering artifacts. /\n .CodeMirror-vscrollbar,\n .CodeMirror-hscrollbar,\n .CodeMirror-scrollbar-filler,\n .CodeMirror-gutter-filler {\n position: absolute;\n z-index: 1;\n display: none;\n outline: none;\n }\n\n .CodeMirror-vscrollbar {\n right: 0;\n top: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n }\n .CodeMirror-hscrollbar {\n bottom: 0;\n left: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n }\n .CodeMirror-scrollbar-filler {\n right: 0;\n bottom: 0;\n }\n\n .CodeMirror-lines {\n cursor: text;\n min-height: 1px; / prevents collapsing before first draw /\n }\n / Reset some styles that the rest of the page might have set /\n .CodeMirror pre.CodeMirror-line,\n .CodeMirror pre.CodeMirror-line-like {\n -moz-border-radius: 0;\n -webkit-border-radius: 0;\n border-radius: 0;\n border-width: 0;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n white-space: pre;\n word-wrap: normal;\n line-height: 1.5;\n color: inherit;\n / z-index: 2; /\n position: relative;\n overflow: visible;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-variant-ligatures: contextual;\n font-variant-ligatures: contextual;\n }\n\n .CodeMirror pre.CodeMirror-line-like {\n z-index: 2;\n }\n\n .CodeMirror-wrap pre.CodeMirror-line,\n .CodeMirror-wrap pre.CodeMirror-line-like {\n word-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .CodeMirror-linebackground {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 0;\n }\n\n .CodeMirror-linewidget {\n position: relative;\n / z-index: 2; /\n padding: 0.1px; / Force widget margins to stay inside of the container /\n }\n\n .CodeMirror-widget {\n }\n\n .CodeMirror-rtl pre {\n direction: rtl;\n }\n\n .CodeMirror-code {\n outline: none;\n }\n\n / Force content-box sizing for the elements where we expect it /\n .CodeMirror-scroll,\n .CodeMirror-sizer,\n .CodeMirror-gutter,\n .CodeMirror-gutters,\n .CodeMirror-linenumber {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n }\n\n .CodeMirror-measure {\n position: absolute;\n width: 100%;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n .CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n border-color: ${({ theme }) => `${theme.colors.neutral800}`};\n }\n .CodeMirror-measure pre {\n position: static;\n }\n\n div.CodeMirror-cursors {\n visibility: hidden;\n position: relative;\n + div {\n z-index: 0 !important;\n }\n }\n\n div.CodeMirror-dragcursors {\n visibility: visible;\n }\n\n .CodeMirror-focused div.CodeMirror-cursors {\n visibility: visible;\n }\n\n .CodeMirror-selected {\n background: ${({ theme }) => theme.colors.neutral200};\n / z-index: -10; /\n }\n .CodeMirror-crosshair {\n cursor: crosshair;\n }\n\n / Used to force a border model for a node /\n .cm-force-border {\n padding-right: 0.1px;\n }\n\n / See issue #2901 /\n .cm-tab-wrap-hack:after {\n content: '';\n }\n\n / Help users use markselection to safely style text background */\n span.CodeMirror-selectedtext {\n background: none;\n }\n\n span {\n color: ${({ theme }) => theme.colors.neutral800} !important;\n }\n`;\n\nexport { Editor };\nexport type { EditorProps, EditorApi };\n"],"names":["Editor","React","forwardRef","disabled","editorRef","error","isPreviewMode","isExpandMode","name","onChange","placeholder","textareaRef","value","forwardedRef","onChangeRef","useRef","useEffect","current","toTextArea","CodeMirror","fromTextArea","lineWrapping","extraKeys","Enter","Tab","readOnly","smartIndent","spellcheck","inputStyle","commands","newlineAndIndentContinueMarkdownList","on","doc","getValue","hasFocus","setValue","setOption","useImperativeHandle","focus","getInputField","scrollIntoView","args","_jsxs","EditorAndPreviewWrapper","_jsx","EditorStylesContainer","$isExpandMode","$disabled","textarea","ref","PreviewWysiwyg","data","styled","div","theme","colors","neutral600","neutral800","spaces","neutral0","neutral200"],"mappings":"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"}
1	+ {"version":3,"file":"Editor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/Editor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport CodeMirror, { EditorFromTextArea } from 'codemirror5';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\nimport { newlineAndIndentContinueMarkdownList } from './utils/continueList';\n\nimport type { FieldValue, InputProps } from '@strapi/admin/strapi-admin';\n\nimport 'codemirror5/addon/display/placeholder';\n\ninterface EditorApi {\n focus: () => void;\n scrollIntoView: (args?: Parameters<HTMLElement['scrollIntoView']>[0]) => void;\n}\n\ninterface EditorProps extends Omit<FieldValue, 'initialValue'>, Omit<InputProps, 'type' \| 'label'> {\n editorRef: React.MutableRefObject<EditorFromTextArea>;\n isPreviewMode?: boolean;\n isExpandMode?: boolean;\n textareaRef: React.RefObject<HTMLTextAreaElement>;\n}\n\nconst Editor = React.forwardRef<EditorApi, EditorProps>(\n (\n {\n disabled,\n editorRef,\n error,\n isPreviewMode,\n isExpandMode,\n name,\n onChange,\n placeholder,\n textareaRef,\n value,\n },\n forwardedRef\n ) => {\n const onChangeRef = React.useRef(onChange);\n\n React.useEffect(() => {\n if (editorRef.current) {\n // Ensure the editor and its wrapper are cleaned up whenever this view is re-rendered\n // e.g. in case of re-ordering wysiwyg components in a DynamicZone\n editorRef.current.toTextArea();\n }\n editorRef.current = CodeMirror.fromTextArea(textareaRef.current!, {\n lineWrapping: true,\n extraKeys: {\n Enter: 'newlineAndIndentContinueMarkdownList',\n Tab: false,\n 'Shift-Tab': false,\n },\n readOnly: false,\n smartIndent: false,\n placeholder,\n spellcheck: true,\n inputStyle: 'contenteditable',\n });\n\n // @ts-expect-error – doesn't think command exists?\n CodeMirror.commands.newlineAndIndentContinueMarkdownList =\n newlineAndIndentContinueMarkdownList;\n editorRef.current.on('change', (doc) => {\n onChangeRef.current(name, doc.getValue());\n });\n }, [editorRef, textareaRef, name, placeholder]);\n\n React.useEffect(() => {\n if (value && !editorRef.current.hasFocus()) {\n editorRef.current.setValue(value);\n }\n }, [editorRef, value]);\n\n React.useEffect(() => {\n if (isPreviewMode \|\| disabled) {\n editorRef.current.setOption('readOnly', 'nocursor');\n } else {\n editorRef.current.setOption('readOnly', false);\n }\n }, [disabled, isPreviewMode, editorRef]);\n\n React.useEffect(() => {\n if (error) {\n editorRef.current.setOption('screenReaderLabel', error);\n } else {\n // to replace with translation\n editorRef.current.setOption('screenReaderLabel', 'Editor');\n }\n }, [editorRef, error]);\n\n React.useImperativeHandle(\n forwardedRef,\n () => ({\n focus() {\n editorRef.current.getInputField().focus();\n },\n scrollIntoView(args?: Parameters<HTMLElement['scrollIntoView']>[0]) {\n editorRef.current.getInputField().scrollIntoView(args);\n },\n }),\n [editorRef]\n );\n\n return (\n <EditorAndPreviewWrapper>\n <EditorStylesContainer $isExpandMode={isExpandMode} $disabled={disabled \|\| isPreviewMode}>\n <textarea ref={textareaRef} />\n </EditorStylesContainer>\n {isPreviewMode && <PreviewWysiwyg data={value} />}\n </EditorAndPreviewWrapper>\n );\n }\n);\n\nconst EditorAndPreviewWrapper = styled.div`\n position: relative;\n height: calc(100% - 48px);\n`;\n\nconst EditorStylesContainer = styled.div<{ $disabled?: boolean; $isExpandMode?: boolean }>`\n cursor: ${({ $disabled }) => ($disabled ? 'not-allowed !important' : 'auto')};\n height: 100%;\n /* BASICS /\n .CodeMirror-placeholder {\n color: ${({ theme }) => theme.colors.neutral600} !important;\n }\n\n .CodeMirror {\n / Set height, width, borders, and global font properties here /\n font-size: 1.6rem;\n height: ${({ $isExpandMode }) =>\n $isExpandMode\n ? '100%'\n : '410px'}; // 512px(total height) - 48px (header) - 52px(footer) - 2px border\n color: ${({ theme }) => theme.colors.neutral800};\n direction: ltr;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Open Sans', 'Helvetica Neue', sans-serif;\n\n ${({ theme }) => theme.breakpoints.medium} {\n font-size: 1.4rem;\n }\n }\n\n / PADDING /\n\n .CodeMirror-lines {\n padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n / Vertical padding around content /\n }\n\n .CodeMirror-scrollbar-filler,\n .CodeMirror-gutter-filler {\n / The little square between H and V scrollbars /\n background-color: ${({ theme }) => `${theme.colors.neutral0}`};\n }\n\n / GUTTER /\n\n .CodeMirror-gutters {\n border-right: 1px solid #ddd;\n background-color: #f7f7f7;\n white-space: nowrap;\n }\n .CodeMirror-linenumbers {\n }\n .CodeMirror-linenumber {\n padding: 0 3px 0 5px;\n min-width: 20px;\n text-align: right;\n color: #999;\n white-space: nowrap;\n }\n\n .CodeMirror-guttermarker {\n color: black;\n }\n .CodeMirror-guttermarker-subtle {\n color: #999;\n }\n\n / CURSOR /\n\n .CodeMirror-cursor {\n border-left: 1px solid black;\n border-right: none;\n width: 0;\n }\n / Shown when moving in bi-directional text /\n .CodeMirror div.CodeMirror-secondarycursor {\n border-left: 1px solid silver;\n }\n .cm-fat-cursor .CodeMirror-cursor {\n width: auto;\n border: 0 !important;\n background: #7e7;\n }\n .cm-fat-cursor div.CodeMirror-cursors {\n / z-index: 1; /\n }\n\n .cm-fat-cursor-mark {\n background-color: rgba(20, 255, 20, 0.5);\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n }\n .cm-animate-fat-cursor {\n width: auto;\n border: 0;\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n background-color: #7e7;\n }\n\n / Can style cursor different in overwrite (non-insert) mode /\n .CodeMirror-overwrite .CodeMirror-cursor {\n }\n\n .cm-tab {\n display: inline-block;\n text-decoration: inherit;\n }\n\n .CodeMirror-rulers {\n position: absolute;\n left: 0;\n right: 0;\n top: -50px;\n bottom: 0;\n overflow: hidden;\n }\n .CodeMirror-ruler {\n border-left: 1px solid #ccc;\n top: 0;\n bottom: 0;\n position: absolute;\n }\n\n / DEFAULT THEME /\n\n .cm-header,\n .cm-strong {\n font-weight: bold;\n }\n .cm-em {\n font-style: italic;\n }\n .cm-link {\n text-decoration: underline;\n }\n .cm-strikethrough {\n text-decoration: line-through;\n }\n\n .CodeMirror-composing {\n border-bottom: 2px solid;\n }\n\n / Default styles for common addons /\n\n div.CodeMirror span.CodeMirror-matchingbracket {\n color: #0b0;\n }\n div.CodeMirror span.CodeMirror-nonmatchingbracket {\n color: #a22;\n }\n .CodeMirror-matchingtag {\n background: rgba(255, 150, 0, 0.3);\n }\n .CodeMirror-activeline-background {\n background: #e8f2ff;\n }\n\n / STOP /\n\n / The rest of this file contains styles related to the mechanics of\n the editor. You probably shouldn't touch them. /\n\n .CodeMirror {\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => `${theme.colors.neutral0}`};\n }\n\n .CodeMirror-scroll {\n overflow: scroll !important; / Things will break if this is overridden /\n / 50px is the magic margin used to hide the element's real scrollbars /\n / See overflow: hidden in .CodeMirror /\n margin-bottom: -50px;\n margin-right: -50px;\n padding-bottom: 50px;\n height: 100%;\n outline: none; / Prevent dragging from highlighting the element /\n position: relative;\n }\n .CodeMirror-sizer {\n position: relative;\n border-right: 50px solid transparent;\n }\n\n / The fake, visible scrollbars. Used to force redraw during scrolling\n before actual scrolling happens, thus preventing shaking and\n flickering artifacts. /\n .CodeMirror-vscrollbar,\n .CodeMirror-hscrollbar,\n .CodeMirror-scrollbar-filler,\n .CodeMirror-gutter-filler {\n position: absolute;\n z-index: 1;\n display: none;\n outline: none;\n }\n\n .CodeMirror-vscrollbar {\n right: 0;\n top: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n }\n .CodeMirror-hscrollbar {\n bottom: 0;\n left: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n }\n .CodeMirror-scrollbar-filler {\n right: 0;\n bottom: 0;\n }\n\n .CodeMirror-lines {\n cursor: text;\n min-height: 1px; / prevents collapsing before first draw /\n }\n / Reset some styles that the rest of the page might have set /\n .CodeMirror pre.CodeMirror-line,\n .CodeMirror pre.CodeMirror-line-like {\n -moz-border-radius: 0;\n -webkit-border-radius: 0;\n border-radius: 0;\n border-width: 0;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n white-space: pre;\n word-wrap: normal;\n line-height: 1.5;\n color: inherit;\n / z-index: 2; /\n position: relative;\n overflow: visible;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-variant-ligatures: contextual;\n font-variant-ligatures: contextual;\n }\n\n .CodeMirror pre.CodeMirror-line-like {\n z-index: 2;\n }\n\n .CodeMirror-wrap pre.CodeMirror-line,\n .CodeMirror-wrap pre.CodeMirror-line-like {\n word-wrap: break-word;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .CodeMirror-linebackground {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 0;\n }\n\n .CodeMirror-linewidget {\n position: relative;\n / z-index: 2; /\n padding: 0.1px; / Force widget margins to stay inside of the container /\n }\n\n .CodeMirror-widget {\n }\n\n .CodeMirror-rtl pre {\n direction: rtl;\n }\n\n .CodeMirror-code {\n outline: none;\n }\n\n / Force content-box sizing for the elements where we expect it /\n .CodeMirror-scroll,\n .CodeMirror-sizer,\n .CodeMirror-gutter,\n .CodeMirror-gutters,\n .CodeMirror-linenumber {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n }\n\n .CodeMirror-measure {\n position: absolute;\n width: 100%;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n }\n\n .CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n border-color: ${({ theme }) => `${theme.colors.neutral800}`};\n }\n .CodeMirror-measure pre {\n position: static;\n }\n\n div.CodeMirror-cursors {\n visibility: hidden;\n position: relative;\n + div {\n z-index: 0 !important;\n }\n }\n\n div.CodeMirror-dragcursors {\n visibility: visible;\n }\n\n .CodeMirror-focused div.CodeMirror-cursors {\n visibility: visible;\n }\n\n .CodeMirror-selected {\n background: ${({ theme }) => theme.colors.neutral200};\n / z-index: -10; /\n }\n .CodeMirror-crosshair {\n cursor: crosshair;\n }\n\n / Used to force a border model for a node /\n .cm-force-border {\n padding-right: 0.1px;\n }\n\n / See issue #2901 /\n .cm-tab-wrap-hack:after {\n content: '';\n }\n\n / Help users use markselection to safely style text background */\n span.CodeMirror-selectedtext {\n background: none;\n }\n\n span {\n color: ${({ theme }) => theme.colors.neutral800} !important;\n }\n`;\n\nexport { Editor };\nexport type { EditorProps, EditorApi };\n"],"names":["Editor","React","forwardRef","disabled","editorRef","error","isPreviewMode","isExpandMode","name","onChange","placeholder","textareaRef","value","forwardedRef","onChangeRef","useRef","useEffect","current","toTextArea","CodeMirror","fromTextArea","lineWrapping","extraKeys","Enter","Tab","readOnly","smartIndent","spellcheck","inputStyle","commands","newlineAndIndentContinueMarkdownList","on","doc","getValue","hasFocus","setValue","setOption","useImperativeHandle","focus","getInputField","scrollIntoView","args","_jsxs","EditorAndPreviewWrapper","_jsx","EditorStylesContainer","$isExpandMode","$disabled","textarea","ref","PreviewWysiwyg","data","styled","div","theme","colors","neutral600","neutral800","breakpoints","medium","spaces","neutral0","neutral200"],"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
+                })
             })
         ]
     });