@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

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

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Flex, Box, Button, Portal, FocusTrap, Typography } 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();
+    React.useEffect(()=>{
+        if (isExpandMode) {
+            document.body.classList.add('lock-body-scroll');
+        }
+        return ()=>{
+            document.body.classList.remove('lock-body-scroll');
+        };
+    }, [
+        isExpandMode
+    ]);
+    if (isExpandMode) {
+        return /*#__PURE__*/ jsx(Portal, {
+            role: "dialog",
+            "aria-modal": false,
+            children: /*#__PURE__*/ jsx(FocusTrap, {
+                onEscape: onCollapse,
+                children: /*#__PURE__*/ jsx(ExpandWrapper, {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 4,
+                    justifyContent: "center",
+                    onClick: onCollapse,
+                    children: /*#__PURE__*/ jsx(Box, {
+                        background: "neutral0",
+                        hasRadius: true,
+                        shadow: "popupShadow",
+                        overflow: "hidden",
+                        width: "90%",
+                        height: "90%",
+                        onClick: (e)=>e.stopPropagation(),
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            height: "100%",
+                            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',
+        borderStyle: "solid",
+        borderWidth: "1px",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "stretch",
+        children: children
+    });
+};
+const ExpandWrapper = styled(Flex)`
+  background: ${({ theme })=>`${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, '0')}`};
+`;
+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';\n\nimport {\n  Button,\n  Box,\n  BoxComponent,\n  Flex,\n  FlexComponent,\n  FocusTrap,\n  Portal,\n  Typography,\n} from '@strapi/design-system';\nimport { Collapse } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { PreviewWysiwyg } from './PreviewWysiwyg';\n\ninterface EditorLayoutProps {\n  children: React.ReactNode;\n  isExpandMode: boolean;\n  error?: string;\n  previewContent?: string;\n  onCollapse: () => void;\n}\n\nconst EditorLayout = ({\n  children,\n  isExpandMode,\n  error,\n  previewContent = '',\n  onCollapse,\n}: EditorLayoutProps) => {\n  const { formatMessage } = useIntl();\n\n  React.useEffect(() => {\n    if (isExpandMode) {\n      document.body.classList.add('lock-body-scroll');\n    }\n\n    return () => {\n      document.body.classList.remove('lock-body-scroll');\n    };\n  }, [isExpandMode]);\n\n  if (isExpandMode) {\n    return (\n      <Portal role=\"dialog\" aria-modal={false}>\n        <FocusTrap onEscape={onCollapse}>\n          <ExpandWrapper\n            position=\"fixed\"\n            top={0}\n            left={0}\n            right={0}\n            bottom={0}\n            zIndex={4}\n            justifyContent=\"center\"\n            onClick={onCollapse}\n          >\n            <Box<'div'>\n              background=\"neutral0\"\n              hasRadius\n              shadow=\"popupShadow\"\n              overflow=\"hidden\"\n              width=\"90%\"\n              height=\"90%\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <Flex height=\"100%\" alignItems=\"flex-start\">\n                <BoxWithBorder flex=\"1\" height=\"100%\">\n                  {children}\n                </BoxWithBorder>\n                <Flex alignItems=\"start\" direction=\"column\" flex={1} height=\"100%\" width=\"100%\">\n                  <Flex\n                    height=\"4.8rem\"\n                    background=\"neutral100\"\n                    justifyContent=\"flex-end\"\n                    shrink={0}\n                    width=\"100%\"\n                  >\n                    <ExpandButton onClick={onCollapse} variant=\"tertiary\" size=\"M\">\n                      <Typography>\n                        {formatMessage({\n                          id: 'components.Wysiwyg.collapse',\n                          defaultMessage: 'Collapse',\n                        })}\n                      </Typography>\n                      <Collapse />\n                    </ExpandButton>\n                  </Flex>\n\n                  <Box position=\"relative\" height=\"100%\" width=\"100%\">\n                    <PreviewWysiwyg data={previewContent} />\n                  </Box>\n                </Flex>\n              </Flex>\n            </Box>\n          </ExpandWrapper>\n        </FocusTrap>\n      </Portal>\n    );\n  }\n\n  return (\n    <Flex\n      borderColor={error ? 'danger600' : 'neutral200'}\n      borderStyle=\"solid\"\n      borderWidth=\"1px\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      {children}\n    </Flex>\n  );\n};\n\nconst ExpandWrapper = styled<FlexComponent>(Flex)`\n  background: ${({ theme }) =>\n    `${theme.colors.neutral800}${Math.floor(0.2 * 255)\n      .toString(16)\n      .padStart(2, '0')}`};\n`;\n\nconst BoxWithBorder = styled<BoxComponent>(Box)`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};\n`;\n\nconst ExpandButton = styled(Button)`\n  background-color: transparent;\n  border: none;\n  align-items: center;\n\n  & > span {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  svg {\n    margin-left: ${({ theme }) => `${theme.spaces[2]}`};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral700};\n      width: 1.2rem;\n      height: 1.2rem;\n    }\n  }\n`;\n\nexport { EditorLayout, ExpandButton };\nexport type { EditorLayoutProps };\n"],"names":["EditorLayout","children","isExpandMode","error","previewContent","onCollapse","formatMessage","useIntl","React","useEffect","document","body","classList","add","remove","_jsx","Portal","role","aria-modal","FocusTrap","onEscape","ExpandWrapper","position","top","left","right","bottom","zIndex","justifyContent","onClick","Box","background","hasRadius","shadow","overflow","width","height","e","stopPropagation","_jsxs","Flex","alignItems","BoxWithBorder","flex","direction","shrink","ExpandButton","variant","size","Typography","id","defaultMessage","Collapse","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","styled","theme","colors","neutral800","Math","floor","toString","padStart","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

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

@@ -0,0 +1,119 @@
+'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 _interopNamespaceDefault(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__*/_interopNamespaceDefault(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 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),
+                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 && /*#__PURE__*/ jsxRuntime.jsx(WysiwygFooter.WysiwygFooter, {
+                                onToggleExpand: handleToggleExpand
+                            })
+                        ]
+                    }),
+                    /*#__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';\n\nimport { useField, useStrapiApp, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Field, Flex } from '@strapi/design-system';\nimport { EditorFromTextArea } from 'codemirror5';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls';\n\nimport { Editor, EditorApi } from './Editor';\nimport { EditorLayout } from './EditorLayout';\nimport { insertFile } from './utils/utils';\nimport { WysiwygFooter } from './WysiwygFooter';\nimport { WysiwygNav } from './WysiwygNav';\n\nimport type { Schema } from '@strapi/types';\n\ninterface WysiwygProps extends Omit<InputProps, 'type'> {\n  labelAction?: React.ReactNode;\n  type: Schema.Attribute.RichText['type'];\n}\n\nconst Wysiwyg = React.forwardRef<EditorApi, WysiwygProps>(\n  ({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef) => {\n    const field = useField(name);\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n    const editorRef = React.useRef<EditorFromTextArea>(\n      null\n    ) as React.MutableRefObject<EditorFromTextArea>;\n    const [isPreviewMode, setIsPreviewMode] = React.useState(false);\n    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);\n    const [isExpandMode, setIsExpandMode] = React.useState(false);\n    const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n    const MediaLibraryDialog = components['media-library'];\n\n    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);\n    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);\n    const handleToggleExpand = () => {\n      setIsPreviewMode(false);\n      setIsExpandMode((prev) => !prev);\n    };\n\n    const handleSelectAssets = (files: any[]) => {\n      const formattedFiles = files.map((f) => ({\n        alt: f.alternativeText || f.name,\n        url: prefixFileUrlWithBackendUrl(f.url),\n        mime: f.mime,\n      }));\n\n      insertFile(editorRef, formattedFiles);\n      setMediaLibVisible(false);\n    };\n\n    return (\n      <Field.Root name={name} hint={hint} error={field.error} required={required}>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          <EditorLayout\n            isExpandMode={isExpandMode}\n            error={field.error}\n            previewContent={field.value}\n            onCollapse={handleToggleExpand}\n          >\n            <WysiwygNav\n              isExpandMode={isExpandMode}\n              editorRef={editorRef}\n              isPreviewMode={isPreviewMode}\n              onToggleMediaLib={handleToggleMediaLib}\n              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}\n              disabled={disabled}\n            />\n\n            <Editor\n              disabled={disabled}\n              isExpandMode={isExpandMode}\n              editorRef={editorRef}\n              error={field.error}\n              isPreviewMode={isPreviewMode}\n              name={name}\n              onChange={field.onChange}\n              placeholder={placeholder}\n              textareaRef={textareaRef}\n              value={field.value}\n              ref={forwardedRef}\n            />\n\n            {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\n          </EditorLayout>\n          <Field.Hint />\n          <Field.Error />\n        </Flex>\n        {mediaLibVisible && (\n          // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.\n          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedWysiwyg = React.memo(Wysiwyg);\n\nexport { MemoizedWysiwyg as Wysiwyg };\nexport type { WysiwygProps };\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","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","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":"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"}

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

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useField, useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Field, Flex } 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 } 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 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),
+                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 && /*#__PURE__*/ jsx(WysiwygFooter, {
+                                onToggleExpand: handleToggleExpand
+                            })
+                        ]
+                    }),
+                    /*#__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';\n\nimport { useField, useStrapiApp, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Field, Flex } from '@strapi/design-system';\nimport { EditorFromTextArea } from 'codemirror5';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls';\n\nimport { Editor, EditorApi } from './Editor';\nimport { EditorLayout } from './EditorLayout';\nimport { insertFile } from './utils/utils';\nimport { WysiwygFooter } from './WysiwygFooter';\nimport { WysiwygNav } from './WysiwygNav';\n\nimport type { Schema } from '@strapi/types';\n\ninterface WysiwygProps extends Omit<InputProps, 'type'> {\n  labelAction?: React.ReactNode;\n  type: Schema.Attribute.RichText['type'];\n}\n\nconst Wysiwyg = React.forwardRef<EditorApi, WysiwygProps>(\n  ({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef) => {\n    const field = useField(name);\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n    const editorRef = React.useRef<EditorFromTextArea>(\n      null\n    ) as React.MutableRefObject<EditorFromTextArea>;\n    const [isPreviewMode, setIsPreviewMode] = React.useState(false);\n    const [mediaLibVisible, setMediaLibVisible] = React.useState(false);\n    const [isExpandMode, setIsExpandMode] = React.useState(false);\n    const components = useStrapiApp('ImageDialog', (state) => state.components);\n\n    const MediaLibraryDialog = components['media-library'];\n\n    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);\n    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);\n    const handleToggleExpand = () => {\n      setIsPreviewMode(false);\n      setIsExpandMode((prev) => !prev);\n    };\n\n    const handleSelectAssets = (files: any[]) => {\n      const formattedFiles = files.map((f) => ({\n        alt: f.alternativeText || f.name,\n        url: prefixFileUrlWithBackendUrl(f.url),\n        mime: f.mime,\n      }));\n\n      insertFile(editorRef, formattedFiles);\n      setMediaLibVisible(false);\n    };\n\n    return (\n      <Field.Root name={name} hint={hint} error={field.error} required={required}>\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n          <Field.Label action={labelAction}>{label}</Field.Label>\n          <EditorLayout\n            isExpandMode={isExpandMode}\n            error={field.error}\n            previewContent={field.value}\n            onCollapse={handleToggleExpand}\n          >\n            <WysiwygNav\n              isExpandMode={isExpandMode}\n              editorRef={editorRef}\n              isPreviewMode={isPreviewMode}\n              onToggleMediaLib={handleToggleMediaLib}\n              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}\n              disabled={disabled}\n            />\n\n            <Editor\n              disabled={disabled}\n              isExpandMode={isExpandMode}\n              editorRef={editorRef}\n              error={field.error}\n              isPreviewMode={isPreviewMode}\n              name={name}\n              onChange={field.onChange}\n              placeholder={placeholder}\n              textareaRef={textareaRef}\n              value={field.value}\n              ref={forwardedRef}\n            />\n\n            {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\n          </EditorLayout>\n          <Field.Hint />\n          <Field.Error />\n        </Flex>\n        {mediaLibVisible && (\n          // @ts-expect-error – TODO: fix this way of injecting because it's not really typeable without a registry.\n          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedWysiwyg = React.memo(Wysiwyg);\n\nexport { MemoizedWysiwyg as Wysiwyg };\nexport type { WysiwygProps };\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","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","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":"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"}

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

@@ -0,0 +1,209 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sanitizeHtml = require('sanitize-html');
+var styledComponents = require('styled-components');
+var mdRenderer = require('./utils/mdRenderer.js');
+
+function _interopNamespaceDefault(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__*/_interopNamespaceDefault(React);
+
+const PreviewWysiwyg = ({ data = '' })=>{
+    const html = React__namespace.useMemo(()=>sanitizeHtml(mdRenderer.md.render(data.replaceAll('\\n', '\n') || ''), {
+            ...sanitizeHtml.defaults,
+            allowedTags: false,
+            allowedAttributes: {
+                '*': [
+                    'href',
+                    'align',
+                    'alt',
+                    'center',
+                    'width',
+                    'height',
+                    'type',
+                    'controls',
+                    'target'
+                ],
+                img: [
+                    'src',
+                    'alt'
+                ],
+                source: [
+                    'src',
+                    'type'
+                ]
+            }
+        }), [
+        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: 3.6rem;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 3rem;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: 2.4rem;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 2rem;
+    font-weight: 500;
+  }
+
+  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';\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":"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"}