@strapi/content-manager 5.34.0 → 5.36.0

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

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

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

@@ -95,7 +95,11 @@ const Editor = /*#__PURE__*/ React.forwardRef(({ disabled, editorRef, error, isP
 });
 const EditorAndPreviewWrapper = styled.div`
   position: relative;
-  height: calc(100% - 48px);
+  height: calc(100%);
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    height: calc(100% - 48px);
+  }
 `;
 const EditorStylesContainer = styled.div`
   cursor: ${({ $disabled })=>$disabled ? 'not-allowed !important' : 'auto'};
@@ -258,6 +262,7 @@ const EditorStylesContainer = styled.div`
   .CodeMirror {
     position: relative;
     overflow: hidden;
+    border-radius: ${({ theme })=>theme.borderRadius};
     background: ${({ theme })=>`${theme.colors.neutral0}`};
   }
 

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

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

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

@@ -74,6 +74,7 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
     }
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         borderColor: error ? 'danger600' : 'neutral200',
+        position: "relative",
         borderStyle: "solid",
         borderWidth: "1px",
         hasRadius: true,

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

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } 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  if (isExpandMode) {\n    return (\n      <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n        <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n          <Flex height=\"90dvh\" width=\"90dvw\" 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              <Box position=\"relative\" height=\"100%\" width=\"100%\">\n                <PreviewWysiwyg data={previewContent} />\n              </Box>\n            </Flex>\n          </Flex>\n        </Modal.Content>\n      </Modal.Root>\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 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","_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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"}
+{"version":3,"file":"EditorLayout.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } 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  if (isExpandMode) {\n    return (\n      <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n        <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n          <Flex height=\"90dvh\" width=\"90dvw\" 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              <Box position=\"relative\" height=\"100%\" width=\"100%\">\n                <PreviewWysiwyg data={previewContent} />\n              </Box>\n            </Flex>\n          </Flex>\n        </Modal.Content>\n      </Modal.Root>\n    );\n  }\n\n  return (\n    <Flex\n      borderColor={error ? 'danger600' : 'neutral200'}\n      position=\"relative\"\n      borderStyle=\"solid\"\n      borderWidth=\"1px\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      {children}\n    </Flex>\n  );\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","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","_jsxs","Flex","height","alignItems","BoxWithBorder","flex","direction","background","justifyContent","shrink","ExpandButton","onClick","variant","size","Typography","id","defaultMessage","Collapse","Box","position","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","hasRadius","styled","theme","colors","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

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

@@ -72,6 +72,7 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
     }
     return /*#__PURE__*/ jsx(Flex, {
         borderColor: error ? 'danger600' : 'neutral200',
+        position: "relative",
         borderStyle: "solid",
         borderWidth: "1px",
         hasRadius: true,

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

@@ -1 +1 @@
-{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } 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  if (isExpandMode) {\n    return (\n      <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n        <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n          <Flex height=\"90dvh\" width=\"90dvw\" 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              <Box position=\"relative\" height=\"100%\" width=\"100%\">\n                <PreviewWysiwyg data={previewContent} />\n              </Box>\n            </Flex>\n          </Flex>\n        </Modal.Content>\n      </Modal.Root>\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 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","_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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"}
+{"version":3,"file":"EditorLayout.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/EditorLayout.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Box, BoxComponent, Flex, Typography, Modal } 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  if (isExpandMode) {\n    return (\n      <Modal.Root open={isExpandMode} onOpenChange={onCollapse}>\n        <Modal.Content style={{ maxWidth: 'unset', width: 'unset' }}>\n          <Flex height=\"90dvh\" width=\"90dvw\" 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              <Box position=\"relative\" height=\"100%\" width=\"100%\">\n                <PreviewWysiwyg data={previewContent} />\n              </Box>\n            </Flex>\n          </Flex>\n        </Modal.Content>\n      </Modal.Root>\n    );\n  }\n\n  return (\n    <Flex\n      borderColor={error ? 'danger600' : 'neutral200'}\n      position=\"relative\"\n      borderStyle=\"solid\"\n      borderWidth=\"1px\"\n      hasRadius\n      direction=\"column\"\n      alignItems=\"stretch\"\n    >\n      {children}\n    </Flex>\n  );\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","_jsx","Modal","Root","open","onOpenChange","Content","style","maxWidth","width","_jsxs","Flex","height","alignItems","BoxWithBorder","flex","direction","background","justifyContent","shrink","ExpandButton","onClick","variant","size","Typography","id","defaultMessage","Collapse","Box","position","PreviewWysiwyg","data","borderColor","borderStyle","borderWidth","hasRadius","styled","theme","colors","neutral200","Button","fontWeights","regular","spaces","neutral700"],"mappings":"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"}

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

@@ -37,6 +37,7 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
     const [isPreviewMode, setIsPreviewMode] = React__namespace.useState(false);
     const [mediaLibVisible, setMediaLibVisible] = React__namespace.useState(false);
     const [isExpandMode, setIsExpandMode] = React__namespace.useState(false);
+    const isMobile = strapiAdmin.useIsMobile();
     const components = strapiAdmin.useStrapiApp('ImageDialog', (state)=>state.components);
     const MediaLibraryDialog = components['media-library'];
     const handleToggleMediaLib = ()=>setMediaLibVisible((prev)=>!prev);
@@ -96,8 +97,27 @@ const Wysiwyg = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disabled, lab
                                 value: field.value,
                                 ref: forwardedRef
                             }),
-                            !isExpandMode && /*#__PURE__*/ jsxRuntime.jsx(WysiwygFooter.WysiwygFooter, {
+                            !isExpandMode && !isMobile && /*#__PURE__*/ jsxRuntime.jsx(WysiwygFooter.WysiwygFooter, {
                                 onToggleExpand: handleToggleExpand
+                            }),
+                            isMobile && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                position: "absolute",
+                                bottom: 0,
+                                right: 0,
+                                left: 0,
+                                pointerEvents: "none",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    justifyContent: "flex-end",
+                                    padding: 4,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        pointerEvents: "auto",
+                                        display: "inline-flex",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(WysiwygNav.WysiwygPreviewToggleButton, {
+                                            isPreviewMode: isPreviewMode,
+                                            onTogglePreviewMode: handleTogglePreviewMode
+                                        })
+                                    })
+                                })
                             })
                         ]
                     }),

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

@@ -1 +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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"}
+{"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, useIsMobile, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Box, 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, WysiwygPreviewToggleButton } 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 isMobile = useIsMobile();\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            <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            {!isExpandMode && !isMobile && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\n            {isMobile && (\n              <Box position=\"absolute\" bottom={0} right={0} left={0} pointerEvents=\"none\">\n                <Flex justifyContent=\"flex-end\" padding={4}>\n                  <Box pointerEvents=\"auto\" display=\"inline-flex\">\n                    <WysiwygPreviewToggleButton\n                      isPreviewMode={isPreviewMode}\n                      onTogglePreviewMode={handleTogglePreviewMode}\n                    />\n                  </Box>\n                </Flex>\n              </Box>\n            )}\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","isMobile","useIsMobile","components","useStrapiApp","state","MediaLibraryDialog","handleToggleMediaLib","prev","handleTogglePreviewMode","handleToggleExpand","handleSelectAssets","files","formattedFiles","map","f","alt","alternativeText","url","prefixFileUrlWithBackendUrl","mime","insertFile","_jsxs","Field","Root","error","Flex","direction","alignItems","gap","_jsx","Label","action","EditorLayout","previewContent","value","onCollapse","WysiwygNav","onToggleMediaLib","onTogglePreviewMode","undefined","Editor","onChange","ref","WysiwygFooter","onToggleExpand","Box","position","bottom","right","left","pointerEvents","justifyContent","padding","display","WysiwygPreviewToggleButton","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,OAAAA,iBAAUC,iBAAMC,UAAU,CAC9B,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,EAAE,EAAEC,YAAAA,GAAAA;AACpE,IAAA,MAAMC,QAAQC,oBAASN,CAAAA,IAAAA,CAAAA;IACvB,MAAMO,WAAAA,GAAcZ,gBAAMa,CAAAA,MAAM,CAAsB,IAAA,CAAA;IACtD,MAAMC,SAAAA,GAAYd,gBAAMa,CAAAA,MAAM,CAC5B,IAAA,CAAA;AAEF,IAAA,MAAM,CAACE,aAAeC,EAAAA,gBAAAA,CAAiB,GAAGhB,gBAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AACzD,IAAA,MAAM,CAACC,eAAiBC,EAAAA,kBAAAA,CAAmB,GAAGnB,gBAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AAC7D,IAAA,MAAM,CAACG,YAAcC,EAAAA,eAAAA,CAAgB,GAAGrB,gBAAAA,CAAMiB,QAAQ,CAAC,KAAA,CAAA;AACvD,IAAA,MAAMK,QAAWC,GAAAA,uBAAAA,EAAAA;AACjB,IAAA,MAAMC,aAAaC,wBAAa,CAAA,aAAA,EAAe,CAACC,KAAAA,GAAUA,MAAMF,UAAU,CAAA;IAE1E,MAAMG,kBAAAA,GAAqBH,UAAU,CAAC,eAAgB,CAAA;AAEtD,IAAA,MAAMI,oBAAuB,GAAA,IAAMT,kBAAmB,CAAA,CAACU,OAAS,CAACA,IAAAA,CAAAA;AACjE,IAAA,MAAMC,uBAA0B,GAAA,IAAMd,gBAAiB,CAAA,CAACa,OAAS,CAACA,IAAAA,CAAAA;AAClE,IAAA,MAAME,kBAAqB,GAAA,IAAA;QACzBf,gBAAiB,CAAA,KAAA,CAAA;QACjBK,eAAgB,CAAA,CAACQ,OAAS,CAACA,IAAAA,CAAAA;AAC7B,KAAA;AAEA,IAAA,MAAMG,qBAAqB,CAACC,KAAAA,GAAAA;AAC1B,QAAA,MAAMC,iBAAiBD,KAAME,CAAAA,GAAG,CAAC,CAACC,KAAO;AACvCC,gBAAAA,GAAAA,EAAKD,CAAEE,CAAAA,eAAe,IAAIF,CAAAA,CAAE/B,IAAI;gBAChCkC,GAAKC,EAAAA,gCAAAA,CAA4BJ,EAAEG,GAAG,CAAA;AACtCE,gBAAAA,IAAAA,EAAML,EAAEK;aACV,CAAA,CAAA;AAEAC,QAAAA,gBAAAA,CAAW5B,SAAWoB,EAAAA,cAAAA,CAAAA;QACtBf,kBAAmB,CAAA,KAAA,CAAA;AACrB,KAAA;IAEA,qBACEwB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAACxC,IAAMA,EAAAA,IAAAA;QAAMH,IAAMA,EAAAA,IAAAA;AAAM4C,QAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;QAAEvC,QAAUA,EAAAA,QAAAA;;0BAChEoC,eAACI,CAAAA,iBAAAA,EAAAA;gBAAKC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,SAAA;gBAAUC,GAAK,EAAA,CAAA;;AACjD,kCAAAC,cAAA,CAACP,mBAAMQ,KAAK,EAAA;wBAACC,MAAQ7C,EAAAA,WAAAA;AAAcJ,wBAAAA,QAAAA,EAAAA;;kCACnCuC,eAACW,CAAAA,yBAAAA,EAAAA;wBACClC,YAAcA,EAAAA,YAAAA;AACd0B,wBAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;AAClBS,wBAAAA,cAAAA,EAAgB7C,MAAM8C,KAAK;wBAC3BC,UAAY1B,EAAAA,kBAAAA;;0CAEZoB,cAACO,CAAAA,qBAAAA,EAAAA;gCACCtC,YAAcA,EAAAA,YAAAA;gCACdN,SAAWA,EAAAA,SAAAA;gCACXC,aAAeA,EAAAA,aAAAA;gCACf4C,gBAAkB/B,EAAAA,oBAAAA;AAClBgC,gCAAAA,mBAAAA,EAAqBxC,eAAeyC,SAAY/B,GAAAA,uBAAAA;gCAChD3B,QAAUA,EAAAA;;0CAEZgD,cAACW,CAAAA,aAAAA,EAAAA;gCACC3D,QAAUA,EAAAA,QAAAA;gCACViB,YAAcA,EAAAA,YAAAA;gCACdN,SAAWA,EAAAA,SAAAA;AACXgC,gCAAAA,KAAAA,EAAOpC,MAAMoC,KAAK;gCAClB/B,aAAeA,EAAAA,aAAAA;gCACfV,IAAMA,EAAAA,IAAAA;AACN0D,gCAAAA,QAAAA,EAAUrD,MAAMqD,QAAQ;gCACxBzD,WAAaA,EAAAA,WAAAA;gCACbM,WAAaA,EAAAA,WAAAA;AACb4C,gCAAAA,KAAAA,EAAO9C,MAAM8C,KAAK;gCAClBQ,GAAKvD,EAAAA;;4BAEN,CAACW,YAAAA,IAAgB,CAACE,QAAAA,kBAAY6B,cAACc,CAAAA,2BAAAA,EAAAA;gCAAcC,cAAgBnC,EAAAA;;AAC7DT,4BAAAA,QAAAA,kBACC6B,cAACgB,CAAAA,gBAAAA,EAAAA;gCAAIC,QAAS,EAAA,UAAA;gCAAWC,MAAQ,EAAA,CAAA;gCAAGC,KAAO,EAAA,CAAA;gCAAGC,IAAM,EAAA,CAAA;gCAAGC,aAAc,EAAA,MAAA;AACnE,gCAAA,QAAA,gBAAArB,cAACJ,CAAAA,iBAAAA,EAAAA;oCAAK0B,cAAe,EAAA,UAAA;oCAAWC,OAAS,EAAA,CAAA;AACvC,oCAAA,QAAA,gBAAAvB,cAACgB,CAAAA,gBAAAA,EAAAA;wCAAIK,aAAc,EAAA,MAAA;wCAAOG,OAAQ,EAAA,aAAA;AAChC,wCAAA,QAAA,gBAAAxB,cAACyB,CAAAA,qCAAAA,EAAAA;4CACC7D,aAAeA,EAAAA,aAAAA;4CACf6C,mBAAqB9B,EAAAA;;;;;;;AAOjC,kCAAAqB,cAAA,CAACP,mBAAMiC,IAAI,EAAA,EAAA,CAAA;AACX,kCAAA1B,cAAA,CAACP,mBAAMkC,KAAK,EAAA,EAAA;;;AAEb5D,YAAAA,eAAAA;0BAECiC,cAACxB,CAAAA,kBAAAA,EAAAA;gBAAmBoD,OAASnD,EAAAA,oBAAAA;gBAAsBoD,cAAgBhD,EAAAA;;;;AAI3E,CAAA,CAAA;AAGIiD,MAAAA,eAAAA,iBAAkBjF,gBAAMkF,CAAAA,IAAI,CAACnF,OAAAA;;;;"}

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

@@ -1,13 +1,13 @@
 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 { useField, useIsMobile, useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Field, Flex, Box } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl } from '../../../../../utils/urls.mjs';
 import { Editor } from './Editor.mjs';
 import { EditorLayout } from './EditorLayout.mjs';
 import { insertFile } from './utils/utils.mjs';
 import { WysiwygFooter } from './WysiwygFooter.mjs';
-import { WysiwygNav } from './WysiwygNav.mjs';
+import { WysiwygNav, WysiwygPreviewToggleButton } from './WysiwygNav.mjs';
 
 const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, placeholder, required, labelAction }, forwardedRef)=>{
     const field = useField(name);
@@ -16,6 +16,7 @@ const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, p
     const [isPreviewMode, setIsPreviewMode] = React.useState(false);
     const [mediaLibVisible, setMediaLibVisible] = React.useState(false);
     const [isExpandMode, setIsExpandMode] = React.useState(false);
+    const isMobile = useIsMobile();
     const components = useStrapiApp('ImageDialog', (state)=>state.components);
     const MediaLibraryDialog = components['media-library'];
     const handleToggleMediaLib = ()=>setMediaLibVisible((prev)=>!prev);
@@ -75,8 +76,27 @@ const Wysiwyg = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label, name, p
                                 value: field.value,
                                 ref: forwardedRef
                             }),
-                            !isExpandMode && /*#__PURE__*/ jsx(WysiwygFooter, {
+                            !isExpandMode && !isMobile && /*#__PURE__*/ jsx(WysiwygFooter, {
                                 onToggleExpand: handleToggleExpand
+                            }),
+                            isMobile && /*#__PURE__*/ jsx(Box, {
+                                position: "absolute",
+                                bottom: 0,
+                                right: 0,
+                                left: 0,
+                                pointerEvents: "none",
+                                children: /*#__PURE__*/ jsx(Flex, {
+                                    justifyContent: "flex-end",
+                                    padding: 4,
+                                    children: /*#__PURE__*/ jsx(Box, {
+                                        pointerEvents: "auto",
+                                        display: "inline-flex",
+                                        children: /*#__PURE__*/ jsx(WysiwygPreviewToggleButton, {
+                                            isPreviewMode: isPreviewMode,
+                                            onTogglePreviewMode: handleTogglePreviewMode
+                                        })
+                                    })
+                                })
                             })
                         ]
                     }),

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

@@ -1 +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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"}
+{"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, useIsMobile, type InputProps } from '@strapi/admin/strapi-admin';\nimport { Box, 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, WysiwygPreviewToggleButton } 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 isMobile = useIsMobile();\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            <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            {!isExpandMode && !isMobile && <WysiwygFooter onToggleExpand={handleToggleExpand} />}\n            {isMobile && (\n              <Box position=\"absolute\" bottom={0} right={0} left={0} pointerEvents=\"none\">\n                <Flex justifyContent=\"flex-end\" padding={4}>\n                  <Box pointerEvents=\"auto\" display=\"inline-flex\">\n                    <WysiwygPreviewToggleButton\n                      isPreviewMode={isPreviewMode}\n                      onTogglePreviewMode={handleTogglePreviewMode}\n                    />\n                  </Box>\n                </Flex>\n              </Box>\n            )}\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","isMobile","useIsMobile","components","useStrapiApp","state","MediaLibraryDialog","handleToggleMediaLib","prev","handleTogglePreviewMode","handleToggleExpand","handleSelectAssets","files","formattedFiles","map","f","alt","alternativeText","url","prefixFileUrlWithBackendUrl","mime","insertFile","_jsxs","Field","Root","error","Flex","direction","alignItems","gap","_jsx","Label","action","EditorLayout","previewContent","value","onCollapse","WysiwygNav","onToggleMediaLib","onTogglePreviewMode","undefined","Editor","onChange","ref","WysiwygFooter","onToggleExpand","Box","position","bottom","right","left","pointerEvents","justifyContent","padding","display","WysiwygPreviewToggleButton","Hint","Error","onClose","onSelectAssets","MemoizedWysiwyg","memo"],"mappings":"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"}

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

@@ -25,8 +25,8 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const PreviewWysiwyg = ({ data = '' })=>{
-    const html = React__namespace.useMemo(()=>sanitizeHtml(mdRenderer.md.render(data.replaceAll('\\n', '\n') || ''), {
+const PreviewWysiwyg = ({ data })=>{
+    const html = React__namespace.useMemo(()=>sanitizeHtml(mdRenderer.md.render((data ?? '').replaceAll('\\n', '\n')), {
             ...sanitizeHtml.defaults,
             allowedTags: false,
             allowedAttributes: {

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

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

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

@@ -4,8 +4,8 @@ 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') || ''), {
+const PreviewWysiwyg = ({ data })=>{
+    const html = React.useMemo(()=>sanitizeHtml(md.render((data ?? '').replaceAll('\\n', '\n')), {
             ...sanitizeHtml.defaults,
             allowedTags: false,
             allowedAttributes: {

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewWysiwyg.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n  data?: string;\n}\n\nconst PreviewWysiwyg = ({ data = '' }: PreviewWysiwygProps) => {\n  const html = React.useMemo(\n    () =>\n      sanitizeHtml(md.render(data.replaceAll('\\\\n', '\\n') || ''), {\n        ...sanitizeHtml.defaults,\n        allowedTags: false,\n        allowedAttributes: {\n          '*': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n          img: ['src', 'alt'],\n          source: ['src', 'type'],\n        },\n      }),\n    [data]\n  );\n\n  return (\n    <Wrapper>\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div`\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  font-size: 1.4rem;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  line-height: ${({ theme }) => theme.lineHeights[6]};\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block-start: ${({ theme }) => theme.spaces[2]};\n    margin-block-end: ${({ theme }) => theme.spaces[2]};\n  }\n\n  p {\n    margin-bottom: ${({ theme }) => theme.spaces[2]};\n  }\n\n  h1 {\n    font-size: 2.8rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 3.6rem;\n    }\n    font-weight: 600;\n  }\n\n  h2 {\n    font-size: 2.2rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 3rem;\n    }\n    font-weight: 600;\n  }\n\n  h3 {\n    font-size: 2rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 2.4rem;\n    }\n    font-weight: 600;\n  }\n\n  h4 {\n    font-size: 1.8rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 2.4rem;\n    }\n    font-weight: 600;\n  }\n\n  strong {\n    font-weight: 800;\n  }\n\n  em {\n    font-style: italic;\n  }\n\n  blockquote {\n    margin-top: ${({ theme }) => theme.spaces[8]};\n    margin-bottom: ${({ theme }) => theme.spaces[7]};\n    font-size: 1.4rem;\n    font-weight: 400;\n    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n    font-style: italic;\n    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  table {\n    thead {\n      background: ${({ theme }) => theme.colors.neutral150};\n\n      th {\n        padding: ${({ theme }) => theme.spaces[4]};\n      }\n    }\n    tr {\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\n    }\n    th,\n    td {\n      padding: ${({ theme }) => theme.spaces[4]};\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\n      border-bottom: 0;\n      border-top: 0;\n    }\n  }\n\n  pre,\n  code {\n    font-size: 1.4rem;\n    border-radius: 4px;\n    /* \n      Hard coded since the color is the same between themes,\n      theme.colors.neutral800 changes between themes.\n\n      Matches the color of the JSON Input component.\n    */\n    background-color: #32324d;\n    max-width: 100%;\n    overflow: auto;\n    padding: ${({ theme }) => theme.spaces[2]};\n  }\n\n  /* Inline code */\n  p,\n  pre,\n  td {\n    > code {\n      color: #839496;\n    }\n  }\n\n  ol {\n    list-style-type: decimal;\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n    ol,\n    ul {\n      margin-block-start: 0px;\n      margin-block-end: 0px;\n    }\n  }\n\n  ul {\n    list-style-type: disc;\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n    ul,\n    ol {\n      margin-block-start: 0px;\n      margin-block-end: 0px;\n    }\n  }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","breakpoints","medium","neutral150","neutral200"],"mappings":"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"}
+{"version":3,"file":"PreviewWysiwyg.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Wysiwyg/PreviewWysiwyg.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport sanitizeHtml from 'sanitize-html';\nimport { styled } from 'styled-components';\n\nimport { md } from './utils/mdRenderer';\n\ninterface PreviewWysiwygProps {\n  data?: string;\n}\n\nconst PreviewWysiwyg = ({ data }: PreviewWysiwygProps) => {\n  const html = React.useMemo(\n    () =>\n      sanitizeHtml(md.render((data ?? '').replaceAll('\\\\n', '\\n')), {\n        ...sanitizeHtml.defaults,\n        allowedTags: false,\n        allowedAttributes: {\n          '*': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],\n          img: ['src', 'alt'],\n          source: ['src', 'type'],\n        },\n      }),\n    [data]\n  );\n\n  return (\n    <Wrapper>\n      <div dangerouslySetInnerHTML={{ __html: html }} />\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div`\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};\n  font-size: 1.4rem;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  color: ${({ theme }) => theme.colors.neutral800};\n  line-height: ${({ theme }) => theme.lineHeights[6]};\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block-start: ${({ theme }) => theme.spaces[2]};\n    margin-block-end: ${({ theme }) => theme.spaces[2]};\n  }\n\n  p {\n    margin-bottom: ${({ theme }) => theme.spaces[2]};\n  }\n\n  h1 {\n    font-size: 2.8rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 3.6rem;\n    }\n    font-weight: 600;\n  }\n\n  h2 {\n    font-size: 2.2rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 3rem;\n    }\n    font-weight: 600;\n  }\n\n  h3 {\n    font-size: 2rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 2.4rem;\n    }\n    font-weight: 600;\n  }\n\n  h4 {\n    font-size: 1.8rem;\n    ${({ theme }) => theme.breakpoints.medium} {\n      font-size: 2.4rem;\n    }\n    font-weight: 600;\n  }\n\n  strong {\n    font-weight: 800;\n  }\n\n  em {\n    font-style: italic;\n  }\n\n  blockquote {\n    margin-top: ${({ theme }) => theme.spaces[8]};\n    margin-bottom: ${({ theme }) => theme.spaces[7]};\n    font-size: 1.4rem;\n    font-weight: 400;\n    border-left: 4px solid ${({ theme }) => theme.colors.neutral150};\n    font-style: italic;\n    padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  table {\n    thead {\n      background: ${({ theme }) => theme.colors.neutral150};\n\n      th {\n        padding: ${({ theme }) => theme.spaces[4]};\n      }\n    }\n    tr {\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\n    }\n    th,\n    td {\n      padding: ${({ theme }) => theme.spaces[4]};\n      border: 1px solid ${({ theme }) => theme.colors.neutral200};\n      border-bottom: 0;\n      border-top: 0;\n    }\n  }\n\n  pre,\n  code {\n    font-size: 1.4rem;\n    border-radius: 4px;\n    /* \n      Hard coded since the color is the same between themes,\n      theme.colors.neutral800 changes between themes.\n\n      Matches the color of the JSON Input component.\n    */\n    background-color: #32324d;\n    max-width: 100%;\n    overflow: auto;\n    padding: ${({ theme }) => theme.spaces[2]};\n  }\n\n  /* Inline code */\n  p,\n  pre,\n  td {\n    > code {\n      color: #839496;\n    }\n  }\n\n  ol {\n    list-style-type: decimal;\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n    ol,\n    ul {\n      margin-block-start: 0px;\n      margin-block-end: 0px;\n    }\n  }\n\n  ul {\n    list-style-type: disc;\n    margin-block-start: ${({ theme }) => theme.spaces[4]};\n    margin-block-end: ${({ theme }) => theme.spaces[4]};\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    padding-inline-start: ${({ theme }) => theme.spaces[4]};\n\n    ul,\n    ol {\n      margin-block-start: 0px;\n      margin-block-end: 0px;\n    }\n  }\n`;\n\nexport { PreviewWysiwyg };\n"],"names":["PreviewWysiwyg","data","html","React","useMemo","sanitizeHtml","md","render","replaceAll","defaults","allowedTags","allowedAttributes","img","source","_jsx","Wrapper","div","dangerouslySetInnerHTML","__html","styled","theme","spaces","colors","neutral0","neutral800","lineHeights","breakpoints","medium","neutral150","neutral200"],"mappings":";;;;;;AAWA,MAAMA,cAAiB,GAAA,CAAC,EAAEC,IAAI,EAAuB,GAAA;AACnD,IAAA,MAAMC,OAAOC,KAAMC,CAAAA,OAAO,CACxB,IACEC,aAAaC,EAAGC,CAAAA,MAAM,CAAEN,CAAAA,IAAQ,IAAA,EAAC,EAAGO,UAAU,CAAC,OAAO,IAAQ,CAAA,CAAA,EAAA;AAC5D,YAAA,GAAGH,aAAaI,QAAQ;YACxBC,WAAa,EAAA,KAAA;YACbC,iBAAmB,EAAA;gBACjB,GAAK,EAAA;AAAC,oBAAA,MAAA;AAAQ,oBAAA,OAAA;AAAS,oBAAA,KAAA;AAAO,oBAAA,QAAA;AAAU,oBAAA,OAAA;AAAS,oBAAA,QAAA;AAAU,oBAAA,MAAA;AAAQ,oBAAA,UAAA;AAAY,oBAAA;AAAS,iBAAA;gBACxFC,GAAK,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAM,iBAAA;gBACnBC,MAAQ,EAAA;AAAC,oBAAA,KAAA;AAAO,oBAAA;AAAO;AACzB;SAEJ,CAAA,EAAA;AAACZ,QAAAA;AAAK,KAAA,CAAA;AAGR,IAAA,qBACEa,GAACC,CAAAA,OAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,KAAAA,EAAAA;YAAIC,uBAAyB,EAAA;gBAAEC,MAAQhB,EAAAA;AAAK;;;AAGnD;AAEA,MAAMa,OAAAA,GAAUI,MAAOH,CAAAA,GAAG;;;;;;AAMf,WAAA,EAAE,CAAC,EAAEI,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMC,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAED,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;oBAEhD,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;SAClD,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;eACnC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,WAAW,CAAC,CAAA,CAAE,CAAC;;;;;;;;wBAQ7B,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;mBAIpC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;IAKhD,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMM,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;;;IAQ1C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMM,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;;;IAQ1C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMM,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;;;IAQ1C,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMM,CAAAA,WAAW,CAACC,MAAM,CAAC;;;;;;;;;;;;;;;gBAe9B,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;mBAC9B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;2BAGzB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;aAEvD,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;kBAS9D,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACM,UAAU,CAAC;;;iBAG1C,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;wBAI1B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;eAIlD,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;wBACxB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;aAmBpD,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;;;;wBActB,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;wBAWnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;sBACnC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;0BAG7B,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;AAQ3D,CAAC;;;;"}