@strapi/content-manager 0.0.0-experimental.c592deb623aed3f74ef7fdacfad9757ed59d34f7 → 0.0.0-experimental.cb2eb3230e1cd78417158a7e44cee77f6eb94c32

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

@@ -0,0 +1,188 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import sanitizeHtml from 'sanitize-html';
+import { styled } from 'styled-components';
+import { md } from './utils/mdRenderer.mjs';
+
+const PreviewWysiwyg = ({ data = '' })=>{
+    const html = React.useMemo(()=>sanitizeHtml(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__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx("div", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        })
+    });
+};
+const Wrapper = 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;
+    }
+  }
+`;
+
+export { PreviewWysiwyg };
+//# sourceMappingURL=PreviewWysiwyg.mjs.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var WysiwygStyles = require('./WysiwygStyles.js');
+
+const WysiwygFooter = ({ onToggleExpand })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        padding: 2,
+        background: "neutral100",
+        borderRadius: `0 0 0.4rem 0.4rem`,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+            children: /*#__PURE__*/ jsxRuntime.jsxs(WysiwygStyles.ExpandButton, {
+                id: "expand",
+                onClick: onToggleExpand,
+                variant: "tertiary",
+                size: "M",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral800",
+                        children: formatMessage({
+                            id: 'components.WysiwygBottomControls.fullscreen',
+                            defaultMessage: 'Expand'
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Expand, {})
+                ]
+            })
+        })
+    });
+};
+
+exports.WysiwygFooter = WysiwygFooter;
+//# sourceMappingURL=WysiwygFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WysiwygFooter.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.tsx"],"sourcesContent":["import { ButtonProps, Box, Flex, Typography } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { ExpandButton } from './WysiwygStyles';\n\ninterface WysiwygFooterProps {\n  onToggleExpand: ButtonProps['onClick'];\n}\n\nconst WysiwygFooter = ({ onToggleExpand }: WysiwygFooterProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box padding={2} background=\"neutral100\" borderRadius={`0 0 0.4rem 0.4rem`}>\n      <Flex justifyContent=\"flex-end\" alignItems=\"flex-end\">\n        <ExpandButton id=\"expand\" onClick={onToggleExpand} variant=\"tertiary\" size=\"M\">\n          <Typography textColor=\"neutral800\">\n            {formatMessage({\n              id: 'components.WysiwygBottomControls.fullscreen',\n              defaultMessage: 'Expand',\n            })}\n          </Typography>\n          <Expand />\n        </ExpandButton>\n      </Flex>\n    </Box>\n  );\n};\n\nexport { WysiwygFooter };\nexport type { WysiwygFooterProps };\n"],"names":["WysiwygFooter","onToggleExpand","formatMessage","useIntl","_jsx","Box","padding","background","borderRadius","Flex","justifyContent","alignItems","_jsxs","ExpandButton","id","onClick","variant","size","Typography","textColor","defaultMessage","Expand"],"mappings":";;;;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,cAAc,EAAsB,GAAA;IAC3D,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QAAIC,OAAS,EAAA,CAAA;QAAGC,UAAW,EAAA,YAAA;QAAaC,YAAc,EAAA,CAAC,iBAAiB,CAAC;AACxE,QAAA,QAAA,gBAAAJ,cAACK,CAAAA,iBAAAA,EAAAA;YAAKC,cAAe,EAAA,UAAA;YAAWC,UAAW,EAAA,UAAA;AACzC,YAAA,QAAA,gBAAAC,eAACC,CAAAA,0BAAAA,EAAAA;gBAAaC,EAAG,EAAA,QAAA;gBAASC,OAASd,EAAAA,cAAAA;gBAAgBe,OAAQ,EAAA,UAAA;gBAAWC,IAAK,EAAA,GAAA;;kCACzEb,cAACc,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;kCACnBjB,aAAc,CAAA;4BACbY,EAAI,EAAA,6CAAA;4BACJM,cAAgB,EAAA;AAClB,yBAAA;;kCAEFhB,cAACiB,CAAAA,YAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Expand } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { ExpandButton } from './WysiwygStyles.mjs';
+
+const WysiwygFooter = ({ onToggleExpand })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Box, {
+        padding: 2,
+        background: "neutral100",
+        borderRadius: `0 0 0.4rem 0.4rem`,
+        children: /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+            children: /*#__PURE__*/ jsxs(ExpandButton, {
+                id: "expand",
+                onClick: onToggleExpand,
+                variant: "tertiary",
+                size: "M",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral800",
+                        children: formatMessage({
+                            id: 'components.WysiwygBottomControls.fullscreen',
+                            defaultMessage: 'Expand'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Expand, {})
+                ]
+            })
+        })
+    });
+};
+
+export { WysiwygFooter };
+//# sourceMappingURL=WysiwygFooter.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WysiwygFooter.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/WysiwygFooter.tsx"],"sourcesContent":["import { ButtonProps, Box, Flex, Typography } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { ExpandButton } from './WysiwygStyles';\n\ninterface WysiwygFooterProps {\n  onToggleExpand: ButtonProps['onClick'];\n}\n\nconst WysiwygFooter = ({ onToggleExpand }: WysiwygFooterProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Box padding={2} background=\"neutral100\" borderRadius={`0 0 0.4rem 0.4rem`}>\n      <Flex justifyContent=\"flex-end\" alignItems=\"flex-end\">\n        <ExpandButton id=\"expand\" onClick={onToggleExpand} variant=\"tertiary\" size=\"M\">\n          <Typography textColor=\"neutral800\">\n            {formatMessage({\n              id: 'components.WysiwygBottomControls.fullscreen',\n              defaultMessage: 'Expand',\n            })}\n          </Typography>\n          <Expand />\n        </ExpandButton>\n      </Flex>\n    </Box>\n  );\n};\n\nexport { WysiwygFooter };\nexport type { WysiwygFooterProps };\n"],"names":["WysiwygFooter","onToggleExpand","formatMessage","useIntl","_jsx","Box","padding","background","borderRadius","Flex","justifyContent","alignItems","_jsxs","ExpandButton","id","onClick","variant","size","Typography","textColor","defaultMessage","Expand"],"mappings":";;;;;;AAUA,MAAMA,aAAgB,GAAA,CAAC,EAAEC,cAAc,EAAsB,GAAA;IAC3D,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;QAAIC,OAAS,EAAA,CAAA;QAAGC,UAAW,EAAA,YAAA;QAAaC,YAAc,EAAA,CAAC,iBAAiB,CAAC;AACxE,QAAA,QAAA,gBAAAJ,GAACK,CAAAA,IAAAA,EAAAA;YAAKC,cAAe,EAAA,UAAA;YAAWC,UAAW,EAAA,UAAA;AACzC,YAAA,QAAA,gBAAAC,IAACC,CAAAA,YAAAA,EAAAA;gBAAaC,EAAG,EAAA,QAAA;gBAASC,OAASd,EAAAA,cAAAA;gBAAgBe,OAAQ,EAAA,UAAA;gBAAWC,IAAK,EAAA,GAAA;;kCACzEb,GAACc,CAAAA,UAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;kCACnBjB,aAAc,CAAA;4BACbY,EAAI,EAAA,6CAAA;4BACJM,cAAgB,EAAA;AAClB,yBAAA;;kCAEFhB,GAACiB,CAAAA,MAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}