@strapi/content-manager 0.0.0-next.e21fe90bf2ab9906267ea6e6ca620bdcc729906c → 0.0.0-next.e3eb76a86aff89979cc9098aec129d2ffa600c56

package/dist/admin/pages/EditView/components/FormInputs/UID.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UID.mjs","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/UID.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type InputProps,\n  useField,\n  useForm,\n  useNotification,\n  useAPIErrorHandler,\n  useQueryParams,\n  useFocusInputField,\n} from '@strapi/admin/strapi-admin';\nimport {\n  Field,\n  Flex,\n  FlexComponent,\n  TextInput,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { CheckCircle, WarningCircle, Loader, ArrowClockwise } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useMatch } from 'react-router-dom';\nimport { styled, keyframes } from 'styled-components';\n\nimport { useDebounce } from '../../../../hooks/useDebounce';\nimport { useDocumentContext } from '../../../../hooks/useDocumentContext';\nimport { CLONE_PATH } from '../../../../router';\nimport {\n  useGenerateUIDMutation,\n  useGetAvailabilityQuery,\n  useGetDefaultUIDQuery,\n} from '../../../../services/uid';\nimport { buildValidParams } from '../../../../utils/api';\n\nimport type { CheckUIDAvailability } from '../../../../../../shared/contracts/uid';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * InputUID\n * -----------------------------------------------------------------------------------------------*/\n\nconst UID_REGEX = /^[A-Za-z0-9-_.~]*$/;\n\ninterface UIDInputProps extends Omit<InputProps, 'type'> {\n  type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n  ({ hint, label, labelAction, name, required, ...props }, ref) => {\n    const { currentDocumentMeta } = useDocumentContext('UIDInput');\n    const allFormValues = useForm('InputUID', (form) => form.values);\n    const [availability, setAvailability] = React.useState<CheckUIDAvailability.Response>();\n    const [showRegenerate, setShowRegenerate] = React.useState(false);\n    const isCloning = useMatch(CLONE_PATH) !== null;\n    const field = useField(name);\n    const debouncedValue = useDebounce(field.value, 300);\n    const hasChanged = debouncedValue !== field.initialValue;\n    const { toggleNotification } = useNotification();\n    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n    const { formatMessage } = useIntl();\n    const [{ query }] = useQueryParams();\n    const params = React.useMemo(() => buildValidParams(query), [query]);\n\n    const {\n      data: defaultGeneratedUID,\n      isLoading: isGeneratingDefaultUID,\n      error: apiError,\n    } = useGetDefaultUIDQuery(\n      {\n        contentTypeUID: currentDocumentMeta.model,\n        field: name,\n        data: {\n          id: currentDocumentMeta.documentId ?? '',\n          ...allFormValues,\n        },\n        params,\n      },\n      {\n        skip: field.value || !required,\n      }\n    );\n\n    React.useEffect(() => {\n      if (apiError) {\n        toggleNotification({\n          type: 'warning',\n          message: formatAPIError(apiError),\n        });\n      }\n    }, [apiError, formatAPIError, toggleNotification]);\n\n    /**\n     * If the defaultGeneratedUID is available, then we set it as the value,\n     * but we also want to set it as the initialValue too.\n     */\n    React.useEffect(() => {\n      if (defaultGeneratedUID && field.value === undefined) {\n        field.onChange(name, defaultGeneratedUID);\n      }\n    }, [defaultGeneratedUID, field, name]);\n\n    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();\n\n    const handleRegenerateClick = async () => {\n      try {\n        const res = await generateUID({\n          contentTypeUID: currentDocumentMeta.model,\n          field: name,\n          data: { id: currentDocumentMeta.documentId ?? '', ...allFormValues },\n          params,\n        });\n\n        if ('data' in res) {\n          field.onChange(name, res.data);\n        } else {\n          toggleNotification({\n            type: 'danger',\n            message: formatAPIError(res.error),\n          });\n        }\n      } catch (err) {\n        toggleNotification({\n          type: 'danger',\n          message: formatMessage({\n            id: 'notification.error',\n            defaultMessage: 'An error occurred.',\n          }),\n        });\n      }\n    };\n\n    const {\n      data: availabilityData,\n      isLoading: isCheckingAvailability,\n      error: availabilityError,\n    } = useGetAvailabilityQuery(\n      {\n        contentTypeUID: currentDocumentMeta.model,\n        field: name,\n        value: debouncedValue ? debouncedValue.trim() : '',\n        params,\n      },\n      {\n        // Don't check availability if the value is empty or wasn't changed\n        skip: !Boolean(\n          (hasChanged || isCloning) && debouncedValue && UID_REGEX.test(debouncedValue.trim())\n        ),\n      }\n    );\n\n    React.useEffect(() => {\n      if (availabilityError) {\n        toggleNotification({\n          type: 'warning',\n          message: formatAPIError(availabilityError),\n        });\n      }\n    }, [availabilityError, formatAPIError, toggleNotification]);\n\n    React.useEffect(() => {\n      /**\n       * always store the data in state because that way as seen below\n       * we can then remove the data to stop showing the label.\n       */\n      setAvailability(availabilityData);\n\n      let timer: number;\n\n      if (availabilityData?.isAvailable) {\n        timer = window.setTimeout(() => {\n          setAvailability(undefined);\n        }, 4000);\n      }\n\n      return () => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n      };\n    }, [availabilityData]);\n\n    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;\n\n    const fieldRef = useFocusInputField(name);\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const shouldShowAvailability =\n      (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;\n\n    return (\n      <Field.Root hint={hint} name={name} error={field.error} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          disabled={props.disabled}\n          endAction={\n            <Flex position=\"relative\" gap={1}>\n              {shouldShowAvailability && (\n                <TextValidation\n                  alignItems=\"center\"\n                  gap={1}\n                  justifyContent=\"flex-end\"\n                  $available={!!availability?.isAvailable}\n                  data-not-here-outer\n                  position=\"absolute\"\n                  pointerEvents=\"none\"\n                  right={6}\n                  width=\"100px\"\n                >\n                  {availability?.isAvailable ? <CheckCircle /> : <WarningCircle />}\n\n                  <Typography\n                    textColor={availability.isAvailable ? 'success600' : 'danger600'}\n                    variant=\"pi\"\n                  >\n                    {formatMessage(\n                      availability.isAvailable\n                        ? {\n                            id: 'content-manager.components.uid.available',\n                            defaultMessage: 'Available',\n                          }\n                        : {\n                            id: 'content-manager.components.uid.unavailable',\n                            defaultMessage: 'Unavailable',\n                          }\n                    )}\n                  </Typography>\n                </TextValidation>\n              )}\n\n              {!props.disabled && (\n                <>\n                  {showRegenerate && (\n                    <TextValidation alignItems=\"center\" justifyContent=\"flex-end\" gap={1}>\n                      <Typography textColor=\"primary600\" variant=\"pi\">\n                        {formatMessage({\n                          id: 'content-manager.components.uid.regenerate',\n                          defaultMessage: 'Regenerate',\n                        })}\n                      </Typography>\n                    </TextValidation>\n                  )}\n\n                  <FieldActionWrapper\n                    onClick={handleRegenerateClick}\n                    label={formatMessage({\n                      id: 'content-manager.components.uid.regenerate',\n                      defaultMessage: 'Regenerate',\n                    })}\n                    onMouseEnter={() => setShowRegenerate(true)}\n                    onMouseLeave={() => setShowRegenerate(false)}\n                  >\n                    {isLoading ? (\n                      <LoadingWrapper data-testid=\"loading-wrapper\">\n                        <Loader />\n                      </LoadingWrapper>\n                    ) : (\n                      <ArrowClockwise />\n                    )}\n                  </FieldActionWrapper>\n                </>\n              )}\n            </Flex>\n          }\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n        />\n        <Field.Error />\n        <Field.Hint />\n      </Field.Root>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * FieldActionWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst FieldActionWrapper = styled(Field.Action)`\n  width: 1.6rem;\n\n  svg {\n    height: 1.6rem;\n    width: 1.6rem;\n    path {\n      fill: ${({ theme }) => theme.colors.neutral400};\n    }\n  }\n\n  svg:hover {\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * TextValidation\n * -----------------------------------------------------------------------------------------------*/\n\nconst TextValidation = styled<FlexComponent>(Flex)<{ $available?: boolean }>`\n  svg {\n    height: 1.2rem;\n    width: 1.2rem;\n\n    path {\n      fill: ${({ theme, $available }) =>\n        $available ? theme.colors.success600 : theme.colors.danger600};\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * LoadingWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst rotation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n`;\n\nconst LoadingWrapper = styled<FlexComponent>(Flex)`\n  animation: ${rotation} 2s infinite linear;\n`;\n\nconst MemoizedUIDInput = React.memo(UIDInput);\n\nexport { MemoizedUIDInput as UIDInput };\nexport type { UIDInputProps };\n"],"names":["UID_REGEX","UIDInput","React","forwardRef","hint","label","labelAction","name","required","props","ref","currentDocumentMeta","useDocumentContext","allFormValues","useForm","form","values","availability","setAvailability","useState","showRegenerate","setShowRegenerate","isCloning","useMatch","CLONE_PATH","field","useField","debouncedValue","useDebounce","value","hasChanged","initialValue","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","formatMessage","useIntl","query","useQueryParams","params","useMemo","buildValidParams","data","defaultGeneratedUID","isLoading","isGeneratingDefaultUID","error","apiError","useGetDefaultUIDQuery","contentTypeUID","model","id","documentId","skip","useEffect","type","message","undefined","onChange","generateUID","isGeneratingUID","useGenerateUIDMutation","handleRegenerateClick","res","err","defaultMessage","availabilityData","isCheckingAvailability","availabilityError","useGetAvailabilityQuery","trim","Boolean","test","timer","isAvailable","window","setTimeout","clearTimeout","fieldRef","useFocusInputField","composedRefs","useComposedRefs","shouldShowAvailability","_jsxs","Field","Root","_jsx","Label","action","TextInput","disabled","endAction","Flex","position","gap","TextValidation","alignItems","justifyContent","$available","data-not-here-outer","pointerEvents","right","width","CheckCircle","WarningCircle","Typography","textColor","variant","_Fragment","FieldActionWrapper","onClick","onMouseEnter","onMouseLeave","LoadingWrapper","data-testid","Loader","ArrowClockwise","Error","Hint","styled","Action","theme","colors","neutral400","primary600","success600","danger600","rotation","keyframes","MemoizedUIDInput","memo"],"mappings":"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"}
+{"version":3,"file":"UID.mjs","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/UID.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type InputProps,\n  useField,\n  useForm,\n  useNotification,\n  useAPIErrorHandler,\n  useQueryParams,\n  useFocusInputField,\n} from '@strapi/admin/strapi-admin';\nimport {\n  Field,\n  Flex,\n  FlexComponent,\n  TextInput,\n  Typography,\n  useComposedRefs,\n} from '@strapi/design-system';\nimport { CheckCircle, WarningCircle, Loader, ArrowClockwise } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useMatch } from 'react-router-dom';\nimport { styled, keyframes } from 'styled-components';\n\nimport { useDebounce } from '../../../../hooks/useDebounce';\nimport { useDocumentContext } from '../../../../hooks/useDocumentContext';\nimport { CLONE_PATH } from '../../../../router';\nimport {\n  useGenerateUIDMutation,\n  useGetAvailabilityQuery,\n  useGetDefaultUIDQuery,\n} from '../../../../services/uid';\nimport { buildValidParams } from '../../../../utils/api';\n\nimport type { CheckUIDAvailability } from '../../../../../../shared/contracts/uid';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * InputUID\n * -----------------------------------------------------------------------------------------------*/\n\nconst UID_REGEX = /^[A-Za-z0-9-_.~]*$/;\n\ninterface UIDInputProps extends Omit<InputProps, 'type'> {\n  attribute?: Pick<Schema.Attribute.UIDProperties, 'regex'>;\n  type: Schema.Attribute.TypeOf<Schema.Attribute.UID>;\n}\n\nconst UIDInput = React.forwardRef<any, UIDInputProps>(\n  ({ hint, label, labelAction, name, required, attribute = {}, ...props }, ref) => {\n    const { currentDocumentMeta } = useDocumentContext('UIDInput');\n    const allFormValues = useForm('InputUID', (form) => form.values);\n    const [availability, setAvailability] = React.useState<CheckUIDAvailability.Response>();\n    const [showRegenerate, setShowRegenerate] = React.useState(false);\n    const isCloning = useMatch(CLONE_PATH) !== null;\n    const field = useField(name);\n    const debouncedValue = useDebounce(field.value, 300);\n    const hasChanged = debouncedValue !== field.initialValue;\n    const { toggleNotification } = useNotification();\n    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n    const { formatMessage } = useIntl();\n    const [{ query }] = useQueryParams();\n    const params = React.useMemo(() => buildValidParams(query), [query]);\n\n    const { regex } = attribute;\n    const validationRegExp = regex ? new RegExp(regex) : UID_REGEX;\n\n    const {\n      data: defaultGeneratedUID,\n      isLoading: isGeneratingDefaultUID,\n      error: apiError,\n    } = useGetDefaultUIDQuery(\n      {\n        contentTypeUID: currentDocumentMeta.model,\n        field: name,\n        data: {\n          id: currentDocumentMeta.documentId ?? '',\n          ...allFormValues,\n        },\n        params,\n      },\n      {\n        skip: field.value || !required,\n      }\n    );\n\n    React.useEffect(() => {\n      if (apiError) {\n        toggleNotification({\n          type: 'warning',\n          message: formatAPIError(apiError),\n        });\n      }\n    }, [apiError, formatAPIError, toggleNotification]);\n\n    /**\n     * If the defaultGeneratedUID is available, then we set it as the value,\n     * but we also want to set it as the initialValue too.\n     */\n    React.useEffect(() => {\n      if (defaultGeneratedUID && field.value === undefined) {\n        field.onChange(name, defaultGeneratedUID);\n      }\n    }, [defaultGeneratedUID, field, name]);\n\n    const [generateUID, { isLoading: isGeneratingUID }] = useGenerateUIDMutation();\n\n    const handleRegenerateClick = async () => {\n      try {\n        const res = await generateUID({\n          contentTypeUID: currentDocumentMeta.model,\n          field: name,\n          data: { id: currentDocumentMeta.documentId ?? '', ...allFormValues },\n          params,\n        });\n\n        if ('data' in res) {\n          field.onChange(name, res.data);\n        } else {\n          toggleNotification({\n            type: 'danger',\n            message: formatAPIError(res.error),\n          });\n        }\n      } catch (err) {\n        toggleNotification({\n          type: 'danger',\n          message: formatMessage({\n            id: 'notification.error',\n            defaultMessage: 'An error occurred.',\n          }),\n        });\n      }\n    };\n\n    const {\n      data: availabilityData,\n      isLoading: isCheckingAvailability,\n      error: availabilityError,\n    } = useGetAvailabilityQuery(\n      {\n        contentTypeUID: currentDocumentMeta.model,\n        field: name,\n        value: debouncedValue ? debouncedValue.trim() : '',\n        params,\n      },\n      {\n        // Don't check availability if the value is empty or wasn't changed\n        skip: !Boolean(\n          (hasChanged || isCloning) &&\n            debouncedValue &&\n            validationRegExp.test(debouncedValue.trim())\n        ),\n      }\n    );\n\n    React.useEffect(() => {\n      if (availabilityError) {\n        toggleNotification({\n          type: 'warning',\n          message: formatAPIError(availabilityError),\n        });\n      }\n    }, [availabilityError, formatAPIError, toggleNotification]);\n\n    React.useEffect(() => {\n      /**\n       * always store the data in state because that way as seen below\n       * we can then remove the data to stop showing the label.\n       */\n      setAvailability(availabilityData);\n\n      let timer: number;\n\n      if (availabilityData?.isAvailable) {\n        timer = window.setTimeout(() => {\n          setAvailability(undefined);\n        }, 4000);\n      }\n\n      return () => {\n        if (timer) {\n          clearTimeout(timer);\n        }\n      };\n    }, [availabilityData]);\n\n    const isLoading = isGeneratingDefaultUID || isGeneratingUID || isCheckingAvailability;\n\n    const fieldRef = useFocusInputField(name);\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    const shouldShowAvailability =\n      (hasChanged || isCloning) && debouncedValue != null && availability && !showRegenerate;\n\n    return (\n      <Field.Root hint={hint} name={name} error={field.error} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <TextInput\n          ref={composedRefs}\n          disabled={props.disabled}\n          endAction={\n            <Flex position=\"relative\" gap={1}>\n              {shouldShowAvailability && (\n                <TextValidation\n                  alignItems=\"center\"\n                  gap={1}\n                  justifyContent=\"flex-end\"\n                  $available={!!availability?.isAvailable}\n                  data-not-here-outer\n                  position=\"absolute\"\n                  pointerEvents=\"none\"\n                  right={6}\n                  width=\"100px\"\n                >\n                  {availability?.isAvailable ? <CheckCircle /> : <WarningCircle />}\n\n                  <Typography\n                    textColor={availability.isAvailable ? 'success600' : 'danger600'}\n                    variant=\"pi\"\n                  >\n                    {formatMessage(\n                      availability.isAvailable\n                        ? {\n                            id: 'content-manager.components.uid.available',\n                            defaultMessage: 'Available',\n                          }\n                        : {\n                            id: 'content-manager.components.uid.unavailable',\n                            defaultMessage: 'Unavailable',\n                          }\n                    )}\n                  </Typography>\n                </TextValidation>\n              )}\n\n              {!props.disabled && (\n                <>\n                  {showRegenerate && (\n                    <TextValidation alignItems=\"center\" justifyContent=\"flex-end\" gap={1}>\n                      <Typography textColor=\"primary600\" variant=\"pi\">\n                        {formatMessage({\n                          id: 'content-manager.components.uid.regenerate',\n                          defaultMessage: 'Regenerate',\n                        })}\n                      </Typography>\n                    </TextValidation>\n                  )}\n\n                  <FieldActionWrapper\n                    onClick={handleRegenerateClick}\n                    label={formatMessage({\n                      id: 'content-manager.components.uid.regenerate',\n                      defaultMessage: 'Regenerate',\n                    })}\n                    onMouseEnter={() => setShowRegenerate(true)}\n                    onMouseLeave={() => setShowRegenerate(false)}\n                  >\n                    {isLoading ? (\n                      <LoadingWrapper data-testid=\"loading-wrapper\">\n                        <Loader />\n                      </LoadingWrapper>\n                    ) : (\n                      <ArrowClockwise />\n                    )}\n                  </FieldActionWrapper>\n                </>\n              )}\n            </Flex>\n          }\n          onChange={field.onChange}\n          value={field.value ?? ''}\n          {...props}\n        />\n        <Field.Error />\n        <Field.Hint />\n      </Field.Root>\n    );\n  }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * FieldActionWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst FieldActionWrapper = styled(Field.Action)`\n  width: 1.6rem;\n\n  svg {\n    height: 1.6rem;\n    width: 1.6rem;\n    path {\n      fill: ${({ theme }) => theme.colors.neutral400};\n    }\n  }\n\n  svg:hover {\n    path {\n      fill: ${({ theme }) => theme.colors.primary600};\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * TextValidation\n * -----------------------------------------------------------------------------------------------*/\n\nconst TextValidation = styled<FlexComponent>(Flex)<{ $available?: boolean }>`\n  svg {\n    height: 1.2rem;\n    width: 1.2rem;\n\n    path {\n      fill: ${({ theme, $available }) =>\n        $available ? theme.colors.success600 : theme.colors.danger600};\n    }\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * LoadingWrapper\n * -----------------------------------------------------------------------------------------------*/\n\nconst rotation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n`;\n\nconst LoadingWrapper = styled<FlexComponent>(Flex)`\n  animation: ${rotation} 2s infinite linear;\n`;\n\nconst MemoizedUIDInput = React.memo(UIDInput);\n\nexport { MemoizedUIDInput as UIDInput };\nexport type { UIDInputProps };\n"],"names":["UID_REGEX","UIDInput","React","forwardRef","hint","label","labelAction","name","required","attribute","props","ref","currentDocumentMeta","useDocumentContext","allFormValues","useForm","form","values","availability","setAvailability","useState","showRegenerate","setShowRegenerate","isCloning","useMatch","CLONE_PATH","field","useField","debouncedValue","useDebounce","value","hasChanged","initialValue","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","formatMessage","useIntl","query","useQueryParams","params","useMemo","buildValidParams","regex","validationRegExp","RegExp","data","defaultGeneratedUID","isLoading","isGeneratingDefaultUID","error","apiError","useGetDefaultUIDQuery","contentTypeUID","model","id","documentId","skip","useEffect","type","message","undefined","onChange","generateUID","isGeneratingUID","useGenerateUIDMutation","handleRegenerateClick","res","err","defaultMessage","availabilityData","isCheckingAvailability","availabilityError","useGetAvailabilityQuery","trim","Boolean","test","timer","isAvailable","window","setTimeout","clearTimeout","fieldRef","useFocusInputField","composedRefs","useComposedRefs","shouldShowAvailability","_jsxs","Field","Root","_jsx","Label","action","TextInput","disabled","endAction","Flex","position","gap","TextValidation","alignItems","justifyContent","$available","data-not-here-outer","pointerEvents","right","width","CheckCircle","WarningCircle","Typography","textColor","variant","_Fragment","FieldActionWrapper","onClick","onMouseEnter","onMouseLeave","LoadingWrapper","data-testid","Loader","ArrowClockwise","Error","Hint","styled","Action","theme","colors","neutral400","primary600","success600","danger600","rotation","keyframes","MemoizedUIDInput","memo"],"mappings":"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"}

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

@@ -359,7 +359,7 @@ const EditorStylesContainer = styledComponents.styled.div`
   .CodeMirror-wrap pre.CodeMirror-line-like {
     word-wrap: break-word;
     white-space: pre-wrap;
-    word-break: normal;
+    word-break: break-word;
   }
 
   .CodeMirror-linebackground {

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.4rem;\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\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: normal;\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","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% - 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.4rem;\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\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","spaces","neutral0","neutral200"],"mappings":"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"}

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

@@ -338,7 +338,7 @@ const EditorStylesContainer = styled.div`
   .CodeMirror-wrap pre.CodeMirror-line-like {
     word-wrap: break-word;
     white-space: pre-wrap;
-    word-break: normal;
+    word-break: break-word;
   }
 
   .CodeMirror-linebackground {

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.4rem;\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\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: normal;\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","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% - 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.4rem;\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\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","spaces","neutral0","neutral200"],"mappings":";;;;;;;;AAwBMA,MAAAA,MAAAA,iBAASC,KAAMC,CAAAA,UAAU,CAC7B,CACE,EACEC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,aAAa,EACbC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,KAAK,EACN,EACDC,YAAAA,GAAAA;IAEA,MAAMC,WAAAA,GAAcb,KAAMc,CAAAA,MAAM,CAACN,QAAAA,CAAAA;AAEjCR,IAAAA,KAAAA,CAAMe,SAAS,CAAC,IAAA;QACd,IAAIZ,SAAAA,CAAUa,OAAO,EAAE;;;YAGrBb,SAAUa,CAAAA,OAAO,CAACC,UAAU,EAAA;AAC9B;AACAd,QAAAA,SAAAA,CAAUa,OAAO,GAAGE,UAAAA,CAAWC,YAAY,CAACT,WAAAA,CAAYM,OAAO,EAAG;YAChEI,YAAc,EAAA,IAAA;YACdC,SAAW,EAAA;gBACTC,KAAO,EAAA,sCAAA;gBACPC,GAAK,EAAA,KAAA;gBACL,WAAa,EAAA;AACf,aAAA;YACAC,QAAU,EAAA,KAAA;YACVC,WAAa,EAAA,KAAA;AACbhB,YAAAA,WAAAA;YACAiB,UAAY,EAAA,IAAA;YACZC,UAAY,EAAA;AACd,SAAA,CAAA;;QAGAT,UAAWU,CAAAA,QAAQ,CAACC,oCAAoC,GACtDA,oCAAAA;AACF1B,QAAAA,SAAAA,CAAUa,OAAO,CAACc,EAAE,CAAC,UAAU,CAACC,GAAAA,GAAAA;AAC9BlB,YAAAA,WAAAA,CAAYG,OAAO,CAACT,IAAMwB,EAAAA,GAAAA,CAAIC,QAAQ,EAAA,CAAA;AACxC,SAAA,CAAA;KACC,EAAA;AAAC7B,QAAAA,SAAAA;AAAWO,QAAAA,WAAAA;AAAaH,QAAAA,IAAAA;AAAME,QAAAA;AAAY,KAAA,CAAA;AAE9CT,IAAAA,KAAAA,CAAMe,SAAS,CAAC,IAAA;AACd,QAAA,IAAIJ,SAAS,CAACR,SAAAA,CAAUa,OAAO,CAACiB,QAAQ,EAAI,EAAA;YAC1C9B,SAAUa,CAAAA,OAAO,CAACkB,QAAQ,CAACvB,KAAAA,CAAAA;AAC7B;KACC,EAAA;AAACR,QAAAA,SAAAA;AAAWQ,QAAAA;AAAM,KAAA,CAAA;AAErBX,IAAAA,KAAAA,CAAMe,SAAS,CAAC,IAAA;AACd,QAAA,IAAIV,iBAAiBH,QAAU,EAAA;AAC7BC,YAAAA,SAAAA,CAAUa,OAAO,CAACmB,SAAS,CAAC,UAAY,EAAA,UAAA,CAAA;SACnC,MAAA;AACLhC,YAAAA,SAAAA,CAAUa,OAAO,CAACmB,SAAS,CAAC,UAAY,EAAA,KAAA,CAAA;AAC1C;KACC,EAAA;AAACjC,QAAAA,QAAAA;AAAUG,QAAAA,aAAAA;AAAeF,QAAAA;AAAU,KAAA,CAAA;AAEvCH,IAAAA,KAAAA,CAAMe,SAAS,CAAC,IAAA;AACd,QAAA,IAAIX,KAAO,EAAA;AACTD,YAAAA,SAAAA,CAAUa,OAAO,CAACmB,SAAS,CAAC,mBAAqB/B,EAAAA,KAAAA,CAAAA;SAC5C,MAAA;;AAELD,YAAAA,SAAAA,CAAUa,OAAO,CAACmB,SAAS,CAAC,mBAAqB,EAAA,QAAA,CAAA;AACnD;KACC,EAAA;AAAChC,QAAAA,SAAAA;AAAWC,QAAAA;AAAM,KAAA,CAAA;AAErBJ,IAAAA,KAAAA,CAAMoC,mBAAmB,CACvBxB,YACA,EAAA,KAAO;AACLyB,YAAAA,KAAAA,CAAAA,GAAAA;AACElC,gBAAAA,SAAAA,CAAUa,OAAO,CAACsB,aAAa,EAAA,CAAGD,KAAK,EAAA;AACzC,aAAA;AACAE,YAAAA,cAAAA,CAAAA,CAAeC,IAAmD,EAAA;AAChErC,gBAAAA,SAAAA,CAAUa,OAAO,CAACsB,aAAa,EAAA,CAAGC,cAAc,CAACC,IAAAA,CAAAA;AACnD;AACF,SAAA,CACA,EAAA;AAACrC,QAAAA;AAAU,KAAA,CAAA;AAGb,IAAA,qBACEsC,IAACC,CAAAA,uBAAAA,EAAAA;;0BACCC,GAACC,CAAAA,qBAAAA,EAAAA;gBAAsBC,aAAevC,EAAAA,YAAAA;AAAcwC,gBAAAA,SAAAA,EAAW5C,QAAYG,IAAAA,aAAAA;AACzE,gBAAA,QAAA,gBAAAsC,GAACI,CAAAA,UAAAA,EAAAA;oBAASC,GAAKtC,EAAAA;;;AAEhBL,YAAAA,aAAAA,kBAAiBsC,GAACM,CAAAA,cAAAA,EAAAA;gBAAeC,IAAMvC,EAAAA;;;;AAG9C,CAAA;AAGF,MAAM+B,uBAAAA,GAA0BS,MAAOC,CAAAA,GAAG;;;AAG1C,CAAC;AAED,MAAMR,qBAAwBO,GAAAA,MAAAA,CAAOC,GAAqD;AAChF,UAAA,EAAE,CAAC,EAAEN,SAAS,EAAE,GAAMA,SAAAA,GAAY,2BAA2B,MAAQ,CAAA;;;;WAIpE,EAAE,CAAC,EAAEO,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;AAMxC,YAAA,EAAE,CAAC,EAAEV,aAAa,EAAE,GAC1BA,aAAAA,GACI,SACA,OAAQ,CAAA;WACP,EAAE,CAAC,EAAEQ,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;;;;;;;;;aASvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAK,CAAC,EAAEA,MAAMI,MAAM,CAAC,EAAE,CAAC,CAAC,EAAEJ,KAAMI,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,CAAC;;;;;;;AAOhD,sBAAA,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAK,CAAC,EAAEA,KAAAA,CAAMC,MAAM,CAACI,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIlD,gBAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAK,CAAC,EAAEA,KAAAA,CAAMC,MAAM,CAACI,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsI1C,kBAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAK,CAAC,EAAEA,KAAAA,CAAMC,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;gBAuBhD,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACK,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;WAuB9C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAEpD,CAAC;;;;"}

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

@@ -1,117 +1,73 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+require('react');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var PreviewWysiwyg = require('./PreviewWysiwyg.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCollapse })=>{
     const { formatMessage } = reactIntl.useIntl();
-    React__namespace.useEffect(()=>{
-        if (isExpandMode) {
-            document.body.classList.add('lock-body-scroll');
-        }
-        return ()=>{
-            document.body.classList.remove('lock-body-scroll');
-        };
-    }, [
-        isExpandMode
-    ]);
     if (isExpandMode) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Portal, {
-            role: "dialog",
-            "aria-modal": false,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
-                onEscape: onCollapse,
-                children: /*#__PURE__*/ jsxRuntime.jsx(ExpandWrapper, {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 4,
-                    justifyContent: "center",
-                    onClick: onCollapse,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                        background: "neutral0",
-                        hasRadius: true,
-                        shadow: "popupShadow",
-                        overflow: "hidden",
-                        width: "90%",
-                        height: "90%",
-                        onClick: (e)=>e.stopPropagation(),
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
+            open: isExpandMode,
+            onOpenChange: onCollapse,
+            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
+                style: {
+                    maxWidth: 'unset',
+                    width: 'unset'
+                },
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    height: "90vh",
+                    width: "90vw",
+                    alignItems: "flex-start",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {
+                            flex: "1",
                             height: "100%",
-                            alignItems: "flex-start",
+                            children: children
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                            alignItems: "start",
+                            direction: "column",
+                            flex: 1,
+                            height: "100%",
+                            width: "100%",
                             children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(BoxWithBorder, {
-                                    flex: "1",
-                                    height: "100%",
-                                    children: children
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                    height: "4.8rem",
+                                    background: "neutral100",
+                                    justifyContent: "flex-end",
+                                    shrink: 0,
+                                    width: "100%",
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(ExpandButton, {
+                                        onClick: onCollapse,
+                                        variant: "tertiary",
+                                        size: "M",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                children: formatMessage({
+                                                    id: 'components.Wysiwyg.collapse',
+                                                    defaultMessage: 'Collapse'
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
+                                        ]
+                                    })
                                 }),
-                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                    alignItems: "start",
-                                    direction: "column",
-                                    flex: 1,
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                    position: "relative",
                                     height: "100%",
                                     width: "100%",
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                            height: "4.8rem",
-                                            background: "neutral100",
-                                            justifyContent: "flex-end",
-                                            shrink: 0,
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxRuntime.jsxs(ExpandButton, {
-                                                onClick: onCollapse,
-                                                variant: "tertiary",
-                                                size: "M",
-                                                children: [
-                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                                        children: formatMessage({
-                                                            id: 'components.Wysiwyg.collapse',
-                                                            defaultMessage: 'Collapse'
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Collapse, {})
-                                                ]
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                            position: "relative",
-                                            height: "100%",
-                                            width: "100%",
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(PreviewWysiwyg.PreviewWysiwyg, {
-                                                data: previewContent
-                                            })
-                                        })
-                                    ]
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(PreviewWysiwyg.PreviewWysiwyg, {
+                                        data: previewContent
+                                    })
                                 })
                             ]
                         })
-                    })
+                    ]
                 })
             })
         });
@@ -126,9 +82,6 @@ const EditorLayout = ({ children, isExpandMode, error, previewContent = '', onCo
         children: children
     });
 };
-const ExpandWrapper = styledComponents.styled(designSystem.Flex)`
-  background: ${({ theme })=>`${theme.colors.neutral800}${Math.floor(0.2 * 255).toString(16).padStart(2, '0')}`};
-`;
 const BoxWithBorder = styledComponents.styled(designSystem.Box)`
   border-right: 1px solid ${({ theme })=>theme.colors.neutral200};
 `;

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