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

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

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

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

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

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

@@ -0,0 +1,115 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var PreviewWysiwyg = require('./PreviewWysiwyg.js');
+
+const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCollapse })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (isExpandMode) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+            open: isExpandMode,
+            onOpenChange: onCollapse,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                style: {
+                    maxWidth: 'unset',
+                    width: 'unset'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    height: "90dvh",
+                    width: "90dvw",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {
+                            flex: "1",
+                            height: "100%",
+                            children: children
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            alignItems: "start",
+                            direction: "column",
+                            flex: 1,
+                            height: "100%",
+                            width: "100%",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    height: "4.8rem",
+                                    background: "neutral100",
+                                    justifyContent: "flex-end",
+                                    shrink: 0,
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(ExpandButton, {
+                                        onClick: onCollapse,
+                                        variant: "tertiary",
+                                        size: "M",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                children: formatMessage({
+                                                    id: 'components.Wysiwyg.collapse',
+                                                    defaultMessage: 'Collapse'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    position: "relative",
+                                    height: "100%",
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(PreviewWysiwyg.PreviewWysiwyg, {
+                                        data: previewContent
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        borderColor: error ? 'danger600' : 'neutral200',
+        position: "relative",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "stretch",
+        children: children
+    });
+};
+const BoxWithBorder = styledComponents.styled(designSystem.Box)`
+  border-right: 1px solid ${({ theme })=>theme.colors.neutral200};
+`;
+const ExpandButton = styledComponents.styled(designSystem.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;
+    }
+  }
+`;
+
+exports.EditorLayout = EditorLayout;
+exports.ExpandButton = ExpandButton;
+//# sourceMappingURL=EditorLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLayout.js","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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"}