@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Modal, Flex, Typography, Box, Button } from '@strapi/design-system';
+import { Collapse } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { PreviewWysiwyg } from './PreviewWysiwyg.mjs';
+
+const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCollapse })=>{
+    const { formatMessage } = useIntl();
+    if (isExpandMode) {
+        return /*#__PURE__*/ jsx(Modal.Root, {
+            open: isExpandMode,
+            onOpenChange: onCollapse,
+            children: /*#__PURE__*/ jsx(Modal.Content, {
+                style: {
+                    maxWidth: 'unset',
+                    width: 'unset'
+                },
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    height: "90dvh",
+                    width: "90dvw",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsx(BoxWithBorder, {
+                            flex: "1",
+                            height: "100%",
+                            children: children
+                        }),
+                        /*#__PURE__*/ jsxs(Flex, {
+                            alignItems: "start",
+                            direction: "column",
+                            flex: 1,
+                            height: "100%",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ jsx(Flex, {
+                                    height: "4.8rem",
+                                    background: "neutral100",
+                                    justifyContent: "flex-end",
+                                    shrink: 0,
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxs(ExpandButton, {
+                                        onClick: onCollapse,
+                                        variant: "tertiary",
+                                        size: "M",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography, {
+                                                children: formatMessage({
+                                                    id: 'components.Wysiwyg.collapse',
+                                                    defaultMessage: 'Collapse'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Collapse, {})
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    position: "relative",
+                                    height: "100%",
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsx(PreviewWysiwyg, {
+                                        data: previewContent
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Flex, {
+        borderColor: error ? 'danger600' : 'neutral200',
+        position: "relative",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "stretch",
+        children: children
+    });
+};
+const BoxWithBorder = styled(Box)`
+  border-right: 1px solid ${({ theme })=>theme.colors.neutral200};
+`;
+const ExpandButton = styled(Button)`
+  background-color: transparent;
+  border: none;
+  align-items: center;
+
+  & > span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    font-weight: ${({ theme })=>theme.fontWeights.regular};
+  }
+
+  svg {
+    margin-left: ${({ theme })=>`${theme.spaces[2]}`};
+
+    path {
+      fill: ${({ theme })=>theme.colors.neutral700};
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+  }
+`;
+
+export { EditorLayout, ExpandButton };
+//# sourceMappingURL=EditorLayout.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } from '@strapi/design-system';\r\nimport { Collapse } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\r\n\r\ninterface EditorLayoutProps {\r\n  children: React.ReactNode;\r\n  isExpandMode: boolean;\r\n  error?: string;\r\n  previewContent?: string;\r\n  onCollapse: () => void;\r\n}\r\n\r\nconst EditorLayout = ({\r\n  children,\r\n  isExpandMode,\r\n  error,\r\n  previewContent = '',\r\n  onCollapse,\r\n}: EditorLayoutProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  if (isExpandMode) {\r\n    return (\r\n      <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\r\n        <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\r\n          <Flex height=\"90dvh\" width=\"90dvw\" alignItems=\"flex-start\">\r\n            <BoxWithBorder flex=\"1\" height=\"100%\">\r\n              {children}\r\n            </BoxWithBorder>\r\n            <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\r\n              <Flex\r\n                height=\"4.8rem\"\r\n                background=\"neutral100\"\r\n                justifyContent=\"flex-end\"\r\n                shrink={0}\r\n                width=\"100%\"\r\n              >\r\n                <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\r\n                  <Typography>\r\n                    {formatMessage({\r\n                      id: 'components.Wysiwyg.collapse',\r\n                      defaultMessage: 'Collapse',\r\n                    })}\r\n                  </Typography>\r\n                  <Collapse />\r\n                </ExpandButton>\r\n              </Flex>\r\n              <Box position=\"relative\" height=\"100%\" width=\"100%\">\r\n                <PreviewWysiwyg data={previewContent} />\r\n              </Box>\r\n            </Flex>\r\n          </Flex>\r\n        </Modal.Content>\r\n      </Modal.Root>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Flex\r\n      borderColor={error ? 'danger600' : 'neutral200'}\r\n      position=\"relative\"\r\n      borderStyle=\"solid\"\r\n      borderWidth=\"1px\"\r\n      hasRadius\r\n      direction=\"column\"\r\n      alignItems=\"stretch\"\r\n    >\r\n      {children}\r\n    </Flex>\r\n  );\r\n};\r\n\r\nconst BoxWithBorder = styled<BoxComponent>(Box)`\r\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\r\n`;\r\n\r\nconst ExpandButton = styled(Button)`\r\n  background-color: transparent;\r\n  border: none;\r\n  align-items: center;\r\n\r\n  & > span {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\r\n  }\r\n\r\n  svg {\r\n    margin-left: ${({ theme }) => `${theme.spaces[2]}`};\r\n\r\n    path {\r\n      fill: ${({ theme }) => theme.colors.neutral700};\r\n      width: 1.2rem;\r\n      height: 1.2rem;\r\n    }\r\n  }\r\n`;\r\n\r\nexport { EditorLayout, ExpandButton };\r\nexport type { EditorLayoutProps };\r\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","_jsxs","Flex","height","alignItems","BoxWithBorder","flex","direction","background","justifyContent","shrink","ExpandButton","onClick","variant","size","Typography","id","defaultMessage","Collapse","Box","position","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","hasRadius","styled","theme","colors","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var urls = require('../../../../../utils/urls.js');
+var Editor = require('./Editor.js');
+var EditorLayout = require('./EditorLayout.js');
+var utils = require('./utils/utils.js');
+var WysiwygFooter = require('./WysiwygFooter.js');
+var WysiwygNav = require('./WysiwygNav.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef)=>{
+    const field = strapiAdmin.useField(name);
+    const textareaRef = React__namespace.useRef(null);
+    const editorRef = React__namespace.useRef(null);
+    const [isPreviewMode, setIsPreviewMode] = React__namespace.useState(false);
+    const [mediaLibVisible, setMediaLibVisible] = React__namespace.useState(false);
+    const [isExpandMode, setIsExpandMode] = React__namespace.useState(false);
+    const isMobile = strapiAdmin.useIsMobile();
+    const components = strapiAdmin.useStrapiApp('ImageDialog', (state)=>state.components);
+    const MediaLibraryDialog = components['media-library'];
+    const handleToggleMediaLib = ()=>setMediaLibVisible((prev)=>!prev);
+    const handleTogglePreviewMode = ()=>setIsPreviewMode((prev)=>!prev);
+    const handleToggleExpand = ()=>{
+        setIsPreviewMode(false);
+        setIsExpandMode((prev)=>!prev);
+    };
+    const handleSelectAssets = (files)=>{
+        const formattedFiles = files.map((f)=>({
+                alt: f.alternativeText || f.name,
+                url: urls.prefixFileUrlWithBackendUrl(f.url) ?? f.url,
+                mime: f.mime
+            }));
+        utils.insertFile(editorRef, formattedFiles);
+        setMediaLibVisible(false);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        name: name,
+        hint: hint,
+        error: field.error,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                        action: labelAction,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(EditorLayout.EditorLayout, {
+                        isExpandMode: isExpandMode,
+                        error: field.error,
+                        previewContent: field.value,
+                        onCollapse: handleToggleExpand,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(WysiwygNav.WysiwygNav, {
+                                isExpandMode: isExpandMode,
+                                editorRef: editorRef,
+                                isPreviewMode: isPreviewMode,
+                                onToggleMediaLib: handleToggleMediaLib,
+                                onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode,
+                                disabled: disabled
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(Editor.Editor, {
+                                disabled: disabled,
+                                isExpandMode: isExpandMode,
+                                editorRef: editorRef,
+                                error: field.error,
+                                isPreviewMode: isPreviewMode,
+                                name: name,
+                                onChange: field.onChange,
+                                placeholder: placeholder,
+                                textareaRef: textareaRef,
+                                value: field.value ?? '',
+                                ref: forwardedRef
+                            }),
+                            !isExpandMode && !isMobile && /*#__PURE__*/ jsxRuntime.jsx(WysiwygFooter.WysiwygFooter, {
+                                onToggleExpand: handleToggleExpand
+                            }),
+                            isMobile && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                position: "absolute",
+                                bottom: 0,
+                                right: 0,
+                                left: 0,
+                                pointerEvents: "none",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    justifyContent: "flex-end",
+                                    padding: 4,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        pointerEvents: "auto",
+                                        display: "inline-flex",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(WysiwygNav.WysiwygPreviewToggleButton, {
+                                            isPreviewMode: isPreviewMode,
+                                            onTogglePreviewMode: handleTogglePreviewMode
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+                ]
+            }),
+            mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
+            /*#__PURE__*/ jsxRuntime.jsx(MediaLibraryDialog, {
+                onClose: handleToggleMediaLib,
+                onSelectAssets: handleSelectAssets
+            })
+        ]
+    });
+});
+const MemoizedWysiwyg = /*#__PURE__*/ React__namespace.memo(Wysiwyg);
+
+exports.Wysiwyg = MemoizedWysiwyg;
+//# sourceMappingURL=Field.js.map

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useField, useStrapiApp, useIsMobile, type InputProps } from '@strapi/admin/strapi-admin';\r\nimport { Box, Field, Flex } from '@strapi/design-system';\r\nimport { EditorFromTextArea } from 'codemirror5';\r\n\r\nimport { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls';\r\n\r\nimport { Editor, EditorApi } from './Editor';\r\nimport { EditorLayout } from './EditorLayout';\r\nimport { insertFile } from './utils/utils';\r\nimport { WysiwygFooter } from './WysiwygFooter';\r\nimport { WysiwygNav, WysiwygPreviewToggleButton } from './WysiwygNav';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\ninterface WysiwygProps extends Omit<InputProps, 'type'> {\r\n  labelAction?: React.ReactNode;\r\n  type: Schema.Attribute.RichText['type'];\r\n}\r\n\r\ntype SelectedAsset = {\r\n  alternativeText?: string | null;\r\n  name: string;\r\n  url: string;\r\n  mime: string;\r\n};\r\n\r\nconst Wysiwyg = React.forwardRef<EditorApi, WysiwygProps>(\r\n  ({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef) => {\r\n    const field = useField<string>(name);\r\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\r\n    const editorRef = React.useRef<EditorFromTextArea>(\r\n      null\r\n    ) as React.MutableRefObject<EditorFromTextArea>;\r\n    const [isPreviewMode, setIsPreviewMode] = React.useState(false);\r\n    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);\r\n    const [isExpandMode, setIsExpandMode] = React.useState(false);\r\n    const isMobile = useIsMobile();\r\n    const components = useStrapiApp('ImageDialog', (state) => state.components);\r\n\r\n    const MediaLibraryDialog = components['media-library'];\r\n\r\n    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);\r\n    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);\r\n    const handleToggleExpand = () => {\r\n      setIsPreviewMode(false);\r\n      setIsExpandMode((prev) => !prev);\r\n    };\r\n\r\n    const handleSelectAssets = (files: SelectedAsset[]) => {\r\n      const formattedFiles = files.map((f) => ({\r\n        alt: f.alternativeText || f.name,\r\n        url: prefixFileUrlWithBackendUrl(f.url) ?? f.url,\r\n        mime: f.mime,\r\n      }));\r\n\r\n      insertFile(editorRef, formattedFiles);\r\n      setMediaLibVisible(false);\r\n    };\r\n\r\n    return (\r\n      <Field.Root name={name} hint={hint} error={field.error} required={required}>\r\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\r\n          <Field.Label action={labelAction}>{label}</Field.Label>\r\n          <EditorLayout\r\n            isExpandMode={isExpandMode}\r\n            error={field.error}\r\n            previewContent={field.value}\r\n            onCollapse={handleToggleExpand}\r\n          >\r\n            <WysiwygNav\r\n              isExpandMode={isExpandMode}\r\n              editorRef={editorRef}\r\n              isPreviewMode={isPreviewMode}\r\n              onToggleMediaLib={handleToggleMediaLib}\r\n              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}\r\n              disabled={disabled}\r\n            />\r\n            <Editor\r\n              disabled={disabled}\r\n              isExpandMode={isExpandMode}\r\n              editorRef={editorRef}\r\n              error={field.error}\r\n              isPreviewMode={isPreviewMode}\r\n              name={name}\r\n              onChange={field.onChange}\r\n              placeholder={placeholder}\r\n              textareaRef={textareaRef}\r\n              value={field.value ?? ''}\r\n              ref={forwardedRef}\r\n            />\r\n            {!isExpandMode && !isMobile && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\r\n            {isMobile && (\r\n              <Box position=\"absolute\" bottom={0} right={0} left={0} pointerEvents=\"none\">\r\n                <Flex justifyContent=\"flex-end\" padding={4}>\r\n                  <Box pointerEvents=\"auto\" display=\"inline-flex\">\r\n                    <WysiwygPreviewToggleButton\r\n                      isPreviewMode={isPreviewMode}\r\n                      onTogglePreviewMode={handleTogglePreviewMode}\r\n                    />\r\n                  </Box>\r\n                </Flex>\r\n              </Box>\r\n            )}\r\n          </EditorLayout>\r\n          <Field.Hint />\r\n          <Field.Error />\r\n        </Flex>\r\n        {mediaLibVisible && (\r\n          // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.\r\n          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />\r\n        )}\r\n      </Field.Root>\r\n    );\r\n  }\r\n);\r\n\r\nconst MemoizedWysiwyg = React.memo(Wysiwyg);\r\n\r\nexport { MemoizedWysiwyg as Wysiwyg };\r\nexport type { WysiwygProps };\r\n"],"names":["Wysiwyg","React","forwardRef","hint","disabled","label","name","placeholder","required","labelAction","forwardedRef","field","useField","textareaRef","useRef","editorRef","isPreviewMode","setIsPreviewMode","useState","mediaLibVisible","setMediaLibVisible","isExpandMode","setIsExpandMode","isMobile","useIsMobile","components","useStrapiApp","state","MediaLibraryDialog","handleToggleMediaLib","prev","handleTogglePreviewMode","handleToggleExpand","handleSelectAssets","files","formattedFiles","map","f","alt","alternativeText","url","prefixFileUrlWithBackendUrl","mime","insertFile","_jsxs","Field","Root","error","Flex","direction","alignItems","gap","_jsx","Label","action","EditorLayout","previewContent","value","onCollapse","WysiwygNav","onToggleMediaLib","onTogglePreviewMode","undefined","Editor","onChange","ref","WysiwygFooter","onToggleExpand","Box","position","bottom","right","left","pointerEvents","justifyContent","padding","display","WysiwygPreviewToggleButton","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.mjs

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useField, useIsMobile, useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Field, Flex, Box } from '@strapi/design-system';
+import { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls.mjs';
+import { Editor } from './Editor.mjs';
+import { EditorLayout } from './EditorLayout.mjs';
+import { insertFile } from './utils/utils.mjs';
+import { WysiwygFooter } from './WysiwygFooter.mjs';
+import { WysiwygNav, WysiwygPreviewToggleButton } from './WysiwygNav.mjs';
+
+const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef)=>{
+    const field = useField(name);
+    const textareaRef = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const [isPreviewMode, setIsPreviewMode] = React.useState(false);
+    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);
+    const [isExpandMode, setIsExpandMode] = React.useState(false);
+    const isMobile = useIsMobile();
+    const components = useStrapiApp('ImageDialog', (state)=>state.components);
+    const MediaLibraryDialog = components['media-library'];
+    const handleToggleMediaLib = ()=>setMediaLibVisible((prev)=>!prev);
+    const handleTogglePreviewMode = ()=>setIsPreviewMode((prev)=>!prev);
+    const handleToggleExpand = ()=>{
+        setIsPreviewMode(false);
+        setIsExpandMode((prev)=>!prev);
+    };
+    const handleSelectAssets = (files)=>{
+        const formattedFiles = files.map((f)=>({
+                alt: f.alternativeText || f.name,
+                url: prefixFileUrlWithBackendUrl(f.url) ?? f.url,
+                mime: f.mime
+            }));
+        insertFile(editorRef, formattedFiles);
+        setMediaLibVisible(false);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: name,
+        hint: hint,
+        error: field.error,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "stretch",
+                gap: 1,
+                children: [
+                    /*#__PURE__*/ jsx(Field.Label, {
+                        action: labelAction,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxs(EditorLayout, {
+                        isExpandMode: isExpandMode,
+                        error: field.error,
+                        previewContent: field.value,
+                        onCollapse: handleToggleExpand,
+                        children: [
+                            /*#__PURE__*/ jsx(WysiwygNav, {
+                                isExpandMode: isExpandMode,
+                                editorRef: editorRef,
+                                isPreviewMode: isPreviewMode,
+                                onToggleMediaLib: handleToggleMediaLib,
+                                onTogglePreviewMode: isExpandMode ? undefined : handleTogglePreviewMode,
+                                disabled: disabled
+                            }),
+                            /*#__PURE__*/ jsx(Editor, {
+                                disabled: disabled,
+                                isExpandMode: isExpandMode,
+                                editorRef: editorRef,
+                                error: field.error,
+                                isPreviewMode: isPreviewMode,
+                                name: name,
+                                onChange: field.onChange,
+                                placeholder: placeholder,
+                                textareaRef: textareaRef,
+                                value: field.value ?? '',
+                                ref: forwardedRef
+                            }),
+                            !isExpandMode && !isMobile && /*#__PURE__*/ jsx(WysiwygFooter, {
+                                onToggleExpand: handleToggleExpand
+                            }),
+                            isMobile && /*#__PURE__*/ jsx(Box, {
+                                position: "absolute",
+                                bottom: 0,
+                                right: 0,
+                                left: 0,
+                                pointerEvents: "none",
+                                children: /*#__PURE__*/ jsx(Flex, {
+                                    justifyContent: "flex-end",
+                                    padding: 4,
+                                    children: /*#__PURE__*/ jsx(Box, {
+                                        pointerEvents: "auto",
+                                        display: "inline-flex",
+                                        children: /*#__PURE__*/ jsx(WysiwygPreviewToggleButton, {
+                                            isPreviewMode: isPreviewMode,
+                                            onTogglePreviewMode: handleTogglePreviewMode
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Field.Hint, {}),
+                    /*#__PURE__*/ jsx(Field.Error, {})
+                ]
+            }),
+            mediaLibVisible && // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.
+            /*#__PURE__*/ jsx(MediaLibraryDialog, {
+                onClose: handleToggleMediaLib,
+                onSelectAssets: handleSelectAssets
+            })
+        ]
+    });
+});
+const MemoizedWysiwyg = /*#__PURE__*/ React.memo(Wysiwyg);
+
+export { MemoizedWysiwyg as Wysiwyg };
+//# sourceMappingURL=Field.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Wysiwyg/Field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/Field.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useField, useStrapiApp, useIsMobile, type InputProps } from '@strapi/admin/strapi-admin';\r\nimport { Box, Field, Flex } from '@strapi/design-system';\r\nimport { EditorFromTextArea } from 'codemirror5';\r\n\r\nimport { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls';\r\n\r\nimport { Editor, EditorApi } from './Editor';\r\nimport { EditorLayout } from './EditorLayout';\r\nimport { insertFile } from './utils/utils';\r\nimport { WysiwygFooter } from './WysiwygFooter';\r\nimport { WysiwygNav, WysiwygPreviewToggleButton } from './WysiwygNav';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\ninterface WysiwygProps extends Omit<InputProps, 'type'> {\r\n  labelAction?: React.ReactNode;\r\n  type: Schema.Attribute.RichText['type'];\r\n}\r\n\r\ntype SelectedAsset = {\r\n  alternativeText?: string | null;\r\n  name: string;\r\n  url: string;\r\n  mime: string;\r\n};\r\n\r\nconst Wysiwyg = React.forwardRef<EditorApi, WysiwygProps>(\r\n  ({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef) => {\r\n    const field = useField<string>(name);\r\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\r\n    const editorRef = React.useRef<EditorFromTextArea>(\r\n      null\r\n    ) as React.MutableRefObject<EditorFromTextArea>;\r\n    const [isPreviewMode, setIsPreviewMode] = React.useState(false);\r\n    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);\r\n    const [isExpandMode, setIsExpandMode] = React.useState(false);\r\n    const isMobile = useIsMobile();\r\n    const components = useStrapiApp('ImageDialog', (state) => state.components);\r\n\r\n    const MediaLibraryDialog = components['media-library'];\r\n\r\n    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);\r\n    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);\r\n    const handleToggleExpand = () => {\r\n      setIsPreviewMode(false);\r\n      setIsExpandMode((prev) => !prev);\r\n    };\r\n\r\n    const handleSelectAssets = (files: SelectedAsset[]) => {\r\n      const formattedFiles = files.map((f) => ({\r\n        alt: f.alternativeText || f.name,\r\n        url: prefixFileUrlWithBackendUrl(f.url) ?? f.url,\r\n        mime: f.mime,\r\n      }));\r\n\r\n      insertFile(editorRef, formattedFiles);\r\n      setMediaLibVisible(false);\r\n    };\r\n\r\n    return (\r\n      <Field.Root name={name} hint={hint} error={field.error} required={required}>\r\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\r\n          <Field.Label action={labelAction}>{label}</Field.Label>\r\n          <EditorLayout\r\n            isExpandMode={isExpandMode}\r\n            error={field.error}\r\n            previewContent={field.value}\r\n            onCollapse={handleToggleExpand}\r\n          >\r\n            <WysiwygNav\r\n              isExpandMode={isExpandMode}\r\n              editorRef={editorRef}\r\n              isPreviewMode={isPreviewMode}\r\n              onToggleMediaLib={handleToggleMediaLib}\r\n              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}\r\n              disabled={disabled}\r\n            />\r\n            <Editor\r\n              disabled={disabled}\r\n              isExpandMode={isExpandMode}\r\n              editorRef={editorRef}\r\n              error={field.error}\r\n              isPreviewMode={isPreviewMode}\r\n              name={name}\r\n              onChange={field.onChange}\r\n              placeholder={placeholder}\r\n              textareaRef={textareaRef}\r\n              value={field.value ?? ''}\r\n              ref={forwardedRef}\r\n            />\r\n            {!isExpandMode && !isMobile && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\r\n            {isMobile && (\r\n              <Box position=\"absolute\" bottom={0} right={0} left={0} pointerEvents=\"none\">\r\n                <Flex justifyContent=\"flex-end\" padding={4}>\r\n                  <Box pointerEvents=\"auto\" display=\"inline-flex\">\r\n                    <WysiwygPreviewToggleButton\r\n                      isPreviewMode={isPreviewMode}\r\n                      onTogglePreviewMode={handleTogglePreviewMode}\r\n                    />\r\n                  </Box>\r\n                </Flex>\r\n              </Box>\r\n            )}\r\n          </EditorLayout>\r\n          <Field.Hint />\r\n          <Field.Error />\r\n        </Flex>\r\n        {mediaLibVisible && (\r\n          // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.\r\n          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />\r\n        )}\r\n      </Field.Root>\r\n    );\r\n  }\r\n);\r\n\r\nconst MemoizedWysiwyg = React.memo(Wysiwyg);\r\n\r\nexport { MemoizedWysiwyg as Wysiwyg };\r\nexport type { WysiwygProps };\r\n"],"names":["Wysiwyg","React","forwardRef","hint","disabled","label","name","placeholder","required","labelAction","forwardedRef","field","useField","textareaRef","useRef","editorRef","isPreviewMode","setIsPreviewMode","useState","mediaLibVisible","setMediaLibVisible","isExpandMode","setIsExpandMode","isMobile","useIsMobile","components","useStrapiApp","state","MediaLibraryDialog","handleToggleMediaLib","prev","handleTogglePreviewMode","handleToggleExpand","handleSelectAssets","files","formattedFiles","map","f","alt","alternativeText","url","prefixFileUrlWithBackendUrl","mime","insertFile","_jsxs","Field","Root","error","Flex","direction","alignItems","gap","_jsx","Label","action","EditorLayout","previewContent","value","onCollapse","WysiwygNav","onToggleMediaLib","onTogglePreviewMode","undefined","Editor","onChange","ref","WysiwygFooter","onToggleExpand","Box","position","bottom","right","left","pointerEvents","justifyContent","padding","display","WysiwygPreviewToggleButton","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":";;;;;;;;;;;AA4BA,MAAMA,OAAAA,iBAAUC,MAAMC,UAAU,CAC9B,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,EAAE,EAAEC,YAAAA,GAAAA;AACpE,IAAA,MAAMC,QAAQC,QAAAA,CAAiBN,IAAAA,CAAAA;IAC/B,MAAMO,WAAAA,GAAcZ,KAAAA,CAAMa,MAAM,CAAsB,IAAA,CAAA;IACtD,MAAMC,SAAAA,GAAYd,KAAAA,CAAMa,MAAM,CAC5B,IAAA,CAAA;AAEF,IAAA,MAAM,CAACE,aAAAA,EAAeC,gBAAAA,CAAiB,GAAGhB,KAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AACzD,IAAA,MAAM,CAACC,eAAAA,EAAiBC,kBAAAA,CAAmB,GAAGnB,KAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AAC7D,IAAA,MAAM,CAACG,YAAAA,EAAcC,eAAAA,CAAgB,GAAGrB,KAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AACvD,IAAA,MAAMK,QAAAA,GAAWC,WAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAaC,YAAAA,CAAa,aAAA,EAAe,CAACC,KAAAA,GAAUA,MAAMF,UAAU,CAAA;IAE1E,MAAMG,kBAAAA,GAAqBH,UAAU,CAAC,eAAA,CAAgB;AAEtD,IAAA,MAAMI,oBAAAA,GAAuB,IAAMT,kBAAAA,CAAmB,CAACU,OAAS,CAACA,IAAAA,CAAAA;AACjE,IAAA,MAAMC,uBAAAA,GAA0B,IAAMd,gBAAAA,CAAiB,CAACa,OAAS,CAACA,IAAAA,CAAAA;AAClE,IAAA,MAAME,kBAAAA,GAAqB,IAAA;QACzBf,gBAAAA,CAAiB,KAAA,CAAA;QACjBK,eAAAA,CAAgB,CAACQ,OAAS,CAACA,IAAAA,CAAAA;AAC7B,IAAA,CAAA;AAEA,IAAA,MAAMG,qBAAqB,CAACC,KAAAA,GAAAA;AAC1B,QAAA,MAAMC,iBAAiBD,KAAAA,CAAME,GAAG,CAAC,CAACC,KAAO;AACvCC,gBAAAA,GAAAA,EAAKD,CAAAA,CAAEE,eAAe,IAAIF,CAAAA,CAAE/B,IAAI;AAChCkC,gBAAAA,GAAAA,EAAKC,2BAAAA,CAA4BJ,CAAAA,CAAEG,GAAG,CAAA,IAAKH,EAAEG,GAAG;AAChDE,gBAAAA,IAAAA,EAAML,EAAEK;aACV,CAAA,CAAA;AAEAC,QAAAA,UAAAA,CAAW5B,SAAAA,EAAWoB,cAAAA,CAAAA;QACtBf,kBAAAA,CAAmB,KAAA,CAAA;AACrB,IAAA,CAAA;IAEA,qBACEwB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAACxC,IAAAA,EAAMA,IAAAA;QAAMH,IAAAA,EAAMA,IAAAA;AAAM4C,QAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;QAAEvC,QAAAA,EAAUA,QAAAA;;0BAChEoC,IAAA,CAACI,IAAAA,EAAAA;gBAAKC,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;gBAAUC,GAAAA,EAAK,CAAA;;AACjD,kCAAAC,GAAA,CAACP,MAAMQ,KAAK,EAAA;wBAACC,MAAAA,EAAQ7C,WAAAA;AAAcJ,wBAAAA,QAAAA,EAAAA;;kCACnCuC,IAAA,CAACW,YAAAA,EAAAA;wBACClC,YAAAA,EAAcA,YAAAA;AACd0B,wBAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;AAClBS,wBAAAA,cAAAA,EAAgB7C,MAAM8C,KAAK;wBAC3BC,UAAAA,EAAY1B,kBAAAA;;0CAEZoB,GAAA,CAACO,UAAAA,EAAAA;gCACCtC,YAAAA,EAAcA,YAAAA;gCACdN,SAAAA,EAAWA,SAAAA;gCACXC,aAAAA,EAAeA,aAAAA;gCACf4C,gBAAAA,EAAkB/B,oBAAAA;AAClBgC,gCAAAA,mBAAAA,EAAqBxC,eAAeyC,SAAAA,GAAY/B,uBAAAA;gCAChD3B,QAAAA,EAAUA;;0CAEZgD,GAAA,CAACW,MAAAA,EAAAA;gCACC3D,QAAAA,EAAUA,QAAAA;gCACViB,YAAAA,EAAcA,YAAAA;gCACdN,SAAAA,EAAWA,SAAAA;AACXgC,gCAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;gCAClB/B,aAAAA,EAAeA,aAAAA;gCACfV,IAAAA,EAAMA,IAAAA;AACN0D,gCAAAA,QAAAA,EAAUrD,MAAMqD,QAAQ;gCACxBzD,WAAAA,EAAaA,WAAAA;gCACbM,WAAAA,EAAaA,WAAAA;gCACb4C,KAAAA,EAAO9C,KAAAA,CAAM8C,KAAK,IAAI,EAAA;gCACtBQ,GAAAA,EAAKvD;;4BAEN,CAACW,YAAAA,IAAgB,CAACE,QAAAA,kBAAY6B,GAAA,CAACc,aAAAA,EAAAA;gCAAcC,cAAAA,EAAgBnC;;AAC7DT,4BAAAA,QAAAA,kBACC6B,GAAA,CAACgB,GAAAA,EAAAA;gCAAIC,QAAAA,EAAS,UAAA;gCAAWC,MAAAA,EAAQ,CAAA;gCAAGC,KAAAA,EAAO,CAAA;gCAAGC,IAAAA,EAAM,CAAA;gCAAGC,aAAAA,EAAc,MAAA;AACnE,gCAAA,QAAA,gBAAArB,GAAA,CAACJ,IAAAA,EAAAA;oCAAK0B,cAAAA,EAAe,UAAA;oCAAWC,OAAAA,EAAS,CAAA;AACvC,oCAAA,QAAA,gBAAAvB,GAAA,CAACgB,GAAAA,EAAAA;wCAAIK,aAAAA,EAAc,MAAA;wCAAOG,OAAAA,EAAQ,aAAA;AAChC,wCAAA,QAAA,gBAAAxB,GAAA,CAACyB,0BAAAA,EAAAA;4CACC7D,aAAAA,EAAeA,aAAAA;4CACf6C,mBAAAA,EAAqB9B;;;;;;;AAOjC,kCAAAqB,GAAA,CAACP,MAAMiC,IAAI,EAAA,EAAA,CAAA;AACX,kCAAA1B,GAAA,CAACP,MAAMkC,KAAK,EAAA,EAAA;;;AAEb5D,YAAAA,eAAAA;0BAECiC,GAAA,CAACxB,kBAAAA,EAAAA;gBAAmBoD,OAAAA,EAASnD,oBAAAA;gBAAsBoD,cAAAA,EAAgBhD;;;;AAI3E,CAAA,CAAA;AAGF,MAAMiD,eAAAA,iBAAkBjF,KAAAA,CAAMkF,IAAI,CAACnF,OAAAA;;;;"}

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

@@ -0,0 +1,198 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styledComponents = require('styled-components');
+var mdRenderer = require('./utils/mdRenderer.js');
+var sanitizer = require('./utils/sanitizer.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const PreviewWysiwyg = ({ data })=>{
+    const html = React__namespace.useMemo(()=>sanitizer.sanitize(mdRenderer.md.render((data ?? '').replaceAll('\\n', '\n'))), [
+        data
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(Wrapper, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        })
+    });
+};
+const Wrapper = styledComponents.styled.div`
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: ${({ theme })=>`${theme.spaces[3]} ${theme.spaces[4]}`};
+  font-size: 1.4rem;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  color: ${({ theme })=>theme.colors.neutral800};
+  line-height: ${({ theme })=>theme.lineHeights[6]};
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block-start: ${({ theme })=>theme.spaces[2]};
+    margin-block-end: ${({ theme })=>theme.spaces[2]};
+  }
+
+  p {
+    margin-bottom: ${({ theme })=>theme.spaces[2]};
+  }
+
+  h1 {
+    font-size: 2.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3.6rem;
+    }
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 2.2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 3rem;
+    }
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: 2rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 1.8rem;
+    ${({ theme })=>theme.breakpoints.medium} {
+      font-size: 2.4rem;
+    }
+    font-weight: 600;
+  }
+
+  strong {
+    font-weight: 800;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  blockquote {
+    margin-top: ${({ theme })=>theme.spaces[8]};
+    margin-bottom: ${({ theme })=>theme.spaces[7]};
+    font-size: 1.4rem;
+    font-weight: 400;
+    border-left: 4px solid ${({ theme })=>theme.colors.neutral150};
+    font-style: italic;
+    padding: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[5]};
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  table {
+    thead {
+      background: ${({ theme })=>theme.colors.neutral150};
+
+      th {
+        padding: ${({ theme })=>theme.spaces[4]};
+      }
+    }
+    tr {
+      border: 1px solid ${({ theme })=>theme.colors.neutral200};
+    }
+    th,
+    td {
+      padding: ${({ theme })=>theme.spaces[4]};
+      border: 1px solid ${({ theme })=>theme.colors.neutral200};
+      border-bottom: 0;
+      border-top: 0;
+    }
+  }
+
+  pre,
+  code {
+    font-size: 1.4rem;
+    border-radius: 4px;
+    /* 
+      Hard coded since the color is the same between themes,
+      theme.colors.neutral800 changes between themes.
+
+      Matches the color of the JSON Input component.
+    */
+    background-color: #32324d;
+    max-width: 100%;
+    overflow: auto;
+    padding: ${({ theme })=>theme.spaces[2]};
+  }
+
+  /* Inline code */
+  p,
+  pre,
+  td {
+    > code {
+      color: #839496;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-block-start: ${({ theme })=>theme.spaces[4]};
+    margin-block-end: ${({ theme })=>theme.spaces[4]};
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: ${({ theme })=>theme.spaces[4]};
+
+    ol,
+    ul {
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+    margin-block-start: ${({ theme })=>theme.spaces[4]};
+    margin-block-end: ${({ theme })=>theme.spaces[4]};
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: ${({ theme })=>theme.spaces[4]};
+
+    ul,
+    ol {
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+    }
+  }
+`;
+
+exports.PreviewWysiwyg = PreviewWysiwyg;
+//# sourceMappingURL=PreviewWysiwyg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewWysiwyg.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { styled } from 'styled-components';\r\n\r\nimport { md } from './utils/mdRenderer';\r\nimport { sanitize } from './utils/sanitizer';\r\n\r\ninterface PreviewWysiwygProps {\r\n  data?: string;\r\n}\r\n\r\nconst PreviewWysiwyg = ({ data }: PreviewWysiwygProps) => {\r\n  const html = React.useMemo(\r\n    () => sanitize(md.render((data ?? '').replaceAll('\\\\n', '\\n'))),\r\n    [data]\r\n  );\r\n\r\n  return (\r\n    <Wrapper>\r\n      <div dangerouslySetInnerHTML={{ __html: html }} />\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nconst Wrapper = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\r\n  font-size: 1.4rem;\r\n  background-color: ${({ theme }) => theme.colors.neutral0};\r\n  color: ${({ theme }) => theme.colors.neutral800};\r\n  line-height: ${({ theme }) => theme.lineHeights[6]};\r\n\r\n  h1,\r\n  h2,\r\n  h3,\r\n  h4,\r\n  h5,\r\n  h6 {\r\n    margin-block-start: ${({ theme }) => theme.spaces[2]};\r\n    margin-block-end: ${({ theme }) => theme.spaces[2]};\r\n  }\r\n\r\n  p {\r\n    margin-bottom: ${({ theme }) => theme.spaces[2]};\r\n  }\r\n\r\n  h1 {\r\n    font-size: 2.8rem;\r\n    ${({ theme }) => theme.breakpoints.medium} {\r\n      font-size: 3.6rem;\r\n    }\r\n    font-weight: 600;\r\n  }\r\n\r\n  h2 {\r\n    font-size: 2.2rem;\r\n    ${({ theme }) => theme.breakpoints.medium} {\r\n      font-size: 3rem;\r\n    }\r\n    font-weight: 600;\r\n  }\r\n\r\n  h3 {\r\n    font-size: 2rem;\r\n    ${({ theme }) => theme.breakpoints.medium} {\r\n      font-size: 2.4rem;\r\n    }\r\n    font-weight: 600;\r\n  }\r\n\r\n  h4 {\r\n    font-size: 1.8rem;\r\n    ${({ theme }) => theme.breakpoints.medium} {\r\n      font-size: 2.4rem;\r\n    }\r\n    font-weight: 600;\r\n  }\r\n\r\n  strong {\r\n    font-weight: 800;\r\n  }\r\n\r\n  em {\r\n    font-style: italic;\r\n  }\r\n\r\n  blockquote {\r\n    margin-top: ${({ theme }) => theme.spaces[8]};\r\n    margin-bottom: ${({ theme }) => theme.spaces[7]};\r\n    font-size: 1.4rem;\r\n    font-weight: 400;\r\n    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\r\n    font-style: italic;\r\n    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\r\n  }\r\n\r\n  img {\r\n    max-width: 100%;\r\n  }\r\n\r\n  table {\r\n    thead {\r\n      background: ${({ theme }) => theme.colors.neutral150};\r\n\r\n      th {\r\n        padding: ${({ theme }) => theme.spaces[4]};\r\n      }\r\n    }\r\n    tr {\r\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\r\n    }\r\n    th,\r\n    td {\r\n      padding: ${({ theme }) => theme.spaces[4]};\r\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\r\n      border-bottom: 0;\r\n      border-top: 0;\r\n    }\r\n  }\r\n\r\n  pre,\r\n  code {\r\n    font-size: 1.4rem;\r\n    border-radius: 4px;\r\n    /* \r\n      Hard coded since the color is the same between themes,\r\n      theme.colors.neutral800 changes between themes.\r\n\r\n      Matches the color of the JSON Input component.\r\n    */\r\n    background-color: #32324d;\r\n    max-width: 100%;\r\n    overflow: auto;\r\n    padding: ${({ theme }) => theme.spaces[2]};\r\n  }\r\n\r\n  /* Inline code */\r\n  p,\r\n  pre,\r\n  td {\r\n    > code {\r\n      color: #839496;\r\n    }\r\n  }\r\n\r\n  ol {\r\n    list-style-type: decimal;\r\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\r\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\r\n    margin-inline-start: 0px;\r\n    margin-inline-end: 0px;\r\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\r\n\r\n    ol,\r\n    ul {\r\n      margin-block-start: 0px;\r\n      margin-block-end: 0px;\r\n    }\r\n  }\r\n\r\n  ul {\r\n    list-style-type: disc;\r\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\r\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\r\n    margin-inline-start: 0px;\r\n    margin-inline-end: 0px;\r\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\r\n\r\n    ul,\r\n    ol {\r\n      margin-block-start: 0px;\r\n      margin-block-end: 0px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport { PreviewWysiwyg };\r\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitize","md","render","replaceAll","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","breakpoints","medium","neutral150","neutral200"],"mappings":"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"}