@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

package/admin/src/content-manager/components/Wysiwyg/EditorWrapper.js

@@ -1,121 +1,345 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+
 /* eslint-disable */
+/* stylelint-disable */
 const EditorWrapper = styled.div`
-  ${({ isFullscreen }) => {
-    if (isFullscreen) {
-      return css`
-        position: fixed;
-        z-index: 1040;
-        top: calc(6rem + 90px);
-        left: calc(24rem + 28px);
-        right: 28px;
-        bottom: 32px;
-        display: flex;
-        background-color: transparent;
-        z-index: 99999;
-
-        > div {
-          min-width: 50%;
-        }
-        > div:first-child {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-        > div:last-child {
-          border-left: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        }
-        .editorWrapper {
-          border-color: #f3f4f4 !important;
-        }
-      `;
-    }
-  }}
-
-  .controlsContainer {
-    display: flex;
-    box-sizing: border-box;
-    background-color: #f3f4f4;
-
-    select {
-      min-height: 31px !important;
-      min-width: 161px !important;
-      font-weight: 600;
-      outline: none;
-
-      &:focus,
-      &:active {
-        border: 1px solid #e3e9f3;
-      }
-    }
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  /* BASICS */
+
+  .CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-size: ${14 / 16}rem;
+    height: 290px;
+    color: ${({ theme }) => theme.colors.neutral800};
+    direction: ltr;
+  }
+
+  /* PADDING */
+
+  .CodeMirror-lines {
+    padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
+    /* Vertical padding around content */
+  }
+
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    background-color: white; /* The little square between H and V scrollbars */
+  }
+
+  /* GUTTER */
+
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+  }
+  .CodeMirror-linenumbers {
+  }
+  .CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #999;
+    white-space: nowrap;
+  }
+
+  .CodeMirror-guttermarker {
+    color: black;
+  }
+  .CodeMirror-guttermarker-subtle {
+    color: #999;
+  }
+
+  /* CURSOR */
+
+  .CodeMirror-cursor {
+    border-left: 1px solid black;
+    border-right: none;
+    width: 0;
+  }
+  /* Shown when moving in bi-directional text */
+  .CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+  }
+  .cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0 !important;
+    background: #7e7;
+  }
+  .cm-fat-cursor div.CodeMirror-cursors {
+    /* z-index: 1; */
+  }
+
+  .cm-fat-cursor-mark {
+    background-color: rgba(20, 255, 20, 0.5);
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+  }
+  .cm-animate-fat-cursor {
+    width: auto;
+    border: 0;
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    -moz-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    background-color: #7e7;
+  }
+
+  /* Can style cursor different in overwrite (non-insert) mode */
+  .CodeMirror-overwrite .CodeMirror-cursor {
+  }
+
+  .cm-tab {
+    display: inline-block;
+    text-decoration: inherit;
+  }
+
+  .CodeMirror-rulers {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -50px;
+    bottom: 0;
+    overflow: hidden;
+  }
+  .CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+  }
+
+  /* DEFAULT THEME */
+
+  .cm-s-default .cm-header {
+    color: blue;
+  }
+  .cm-s-default .cm-quote {
+    color: #090;
+  }
+  .cm-negative {
+    color: #d44;
+  }
+  .cm-positive {
+    color: #292;
+  }
+  .cm-header,
+  .cm-strong {
+    font-weight: bold;
+  }
+  .cm-em {
+    font-style: italic;
+  }
+  .cm-link {
+    text-decoration: underline;
+  }
+  .cm-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .CodeMirror-composing {
+    border-bottom: 2px solid;
+  }
+
+  /* Default styles for common addons */
+
+  div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0b0;
+  }
+  div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #a22;
+  }
+  .CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, 0.3);
+  }
+  .CodeMirror-activeline-background {
+    background: #e8f2ff;
+  }
+
+  /* STOP */
+
+  /* The rest of this file contains styles related to the mechanics of
+    the editor. You probably shouldn't touch them. */
+
+  .CodeMirror {
+    position: relative;
+    overflow: hidden;
+    background: white;
   }
 
-  .editorWrapper {
-    min-height: 320px;
-    margin-top: 0.9rem;
-    border: 1px solid #f3f4f4;
-    border-radius: 0.25rem;
-    line-height: 18px !important;
-    font-size: 13px;
-    box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
-    background-color: #fff;
+  .CodeMirror-scroll {
+    overflow: scroll !important; /* Things will break if this is overridden */
+    /* 50px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -50px;
+    margin-right: -50px;
+    padding-bottom: 50px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
     position: relative;
   }
+  .CodeMirror-sizer {
+    position: relative;
+    border-right: 50px solid transparent;
+  }
 
-  .editorError {
-    border-color: #ff203c !important;
-  }
-
-  .editor {
-    min-height: 294px;
-    max-height: 555px;
-    padding: 20px 20px 0 20px;
-    font-size: 13px;
-    background-color: #fff;
-    line-height: 18px !important;
-    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
-    color: ${({ disabled }) => (disabled ? '#9ea7b8' : '#333740')};
-    overflow: auto;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 0;
-      line-height: 18px !important;
-    }
-    h1 {
-      margin-top: 13px !important;
-      margin-bottom: 22px;
-    }
-    > div {
-      > div {
-        > div {
-          margin-bottom: 32px;
-        }
-      }
-    }
-    li {
-      margin-top: 0;
-    }
-    ul,
-    ol {
-      margin-bottom: 18px;
-    }
+  /* The fake, visible scrollbars. Used to force redraw during scrolling
+    before actual scrolling happens, thus preventing shaking and
+    flickering artifacts. */
+  .CodeMirror-vscrollbar,
+  .CodeMirror-hscrollbar,
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    position: absolute;
+    /* z-index: 6; */
+    display: none;
+    outline: none;
+  }
+
+  .CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0;
+  }
+
+  .CodeMirror-lines {
+    cursor: text;
+    min-height: 1px; /* prevents collapsing before first draw */
+  }
+  /* Reset some styles that the rest of the page might have set */
+  .CodeMirror pre.CodeMirror-line,
+  .CodeMirror pre.CodeMirror-line-like {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    /* z-index: 2; */
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+  }
+
+  .CodeMirror pre.CodeMirror-line-like {
+    z-index: 2;
+  }
+
+  .CodeMirror-wrap pre.CodeMirror-line,
+  .CodeMirror-wrap pre.CodeMirror-line-like {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+
+  .CodeMirror-linebackground {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+
+  .CodeMirror-linewidget {
+    position: relative;
+    /* z-index: 2; */
+    padding: 0.1px; /* Force widget margins to stay inside of the container */
   }
 
-  .editorFullScreen {
-    max-height: calc(100% - 70px) !important;
-    margin-bottom: 0;
-    overflow: auto;
+  .CodeMirror-widget {
   }
 
-  .editorInput {
+  .CodeMirror-rtl pre {
+    direction: rtl;
+  }
+
+  .CodeMirror-code {
+    outline: none;
+  }
+
+  /* Force content-box sizing for the elements where we expect it */
+  .CodeMirror-scroll,
+  .CodeMirror-sizer,
+  .CodeMirror-gutter,
+  .CodeMirror-gutters,
+  .CodeMirror-linenumber {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
     height: 0;
-    width: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  .CodeMirror-cursor {
+    position: absolute;
+    pointer-events: none;
+  }
+  .CodeMirror-measure pre {
+    position: static;
+  }
+
+  div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    + div {
+      z-index: 0 !important;
+    }
+  }
+
+  div.CodeMirror-dragcursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-selected {
+    background: ${({ theme }) => theme.colors.neutral200};
+    /* z-index: -10; */
+  }
+  .CodeMirror-crosshair {
+    cursor: crosshair;
+  }
+
+  /* Used to force a border model for a node */
+  .cm-force-border {
+    padding-right: 0.1px;
+  }
+
+  /* See issue #2901 */
+  .cm-tab-wrap-hack:after {
+    content: '';
+  }
+
+  /* Help users use markselection to safely style text background */
+  span.CodeMirror-selectedtext {
+    background: none;
   }
 `;
 

package/admin/src/content-manager/components/Wysiwyg/MediaLibrary.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ModalLayout, ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
+import { Button } from '@strapi/parts/Button';
+import { Text } from '@strapi/parts/Text';
+
+// const image = [
+//   { alt: 'sunrise', url: 'http://localhost:3000/sunriseimage' },
+//   { alt: 'sunset', url: 'http://localhost:3000/sunsetimage' },
+// ];
+
+const MediaLibrary = ({
+  // onTogglePopover,
+  onToggleMediaLib,
+  // onSubmitImage,
+  // editorRef
+}) => {
+  return (
+    <ModalLayout onClose={onToggleMediaLib} labelledBy="media-library" id="media-library">
+      <ModalHeader>
+        <Text>Media Library</Text>
+      </ModalHeader>
+      <ModalBody>
+        {/* <Text>Choose your picture 🔥</Text> */}
+        <Text>COMING SOON</Text>
+      </ModalBody>
+      <ModalFooter
+        startActions={
+          <Button onClick={onToggleMediaLib} variant="tertiary">
+            Cancel
+          </Button>
+        }
+        endActions={
+          <Button
+            id="insert-button"
+            // onClick={() => onSubmitImage(image, editorRef, onToggleMediaLib, onTogglePopover)}
+          >
+            Insert
+          </Button>
+        }
+      />
+    </ModalLayout>
+  );
+};
+
+MediaLibrary.propTypes = {
+  // onTogglePopover: PropTypes.func.isRequired,
+  onToggleMediaLib: PropTypes.func.isRequired,
+  // onSubmitImage: PropTypes.func.isRequired,
+  // editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+};
+
+export default MediaLibrary;

package/admin/src/content-manager/components/Wysiwyg/WysiwygExpand.js

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { FocusTrap } from '@strapi/parts/FocusTrap';
+import { Portal } from '@strapi/parts/Portal';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import Collapse from '@strapi/icons/Collapse';
+import PreviewWysiwyg from '../PreviewWysiwyg';
+import Editor from './Editor';
+import WysiwygNav from './WysiwygNav';
+import MediaLibrary from './MediaLibrary';
+import {
+  ExpandButton,
+  ExpandWrapper,
+  ExpandContainer,
+  PreviewWrapper,
+  WysiwygContainer,
+  PreviewHeader,
+  PreviewContainer,
+} from './WysiwygStyles';
+
+const WysiwygExpand = ({
+  disabled,
+  editorRef,
+  name,
+  onActionClick,
+  onChange,
+  onSubmitImage,
+  onToggleExpand,
+  placeholder,
+  textareaRef,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+  const [visiblePopover, setVisiblePopover] = useState(false);
+  const [mediaLibVisible, setMediaLibVisible] = useState(false);
+
+  useEffect(() => {
+    const body = document.body;
+    body.classList.add('lock-body-scroll');
+
+    return () => {
+      body.classList.remove('lock-body-scroll');
+    };
+  }, []);
+
+  const handleTogglePopover = () => setVisiblePopover(prev => !prev);
+  const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
+
+  return (
+    <>
+      <Portal role="dialog" aria-modal={false}>
+        <FocusTrap onEscape={() => onToggleExpand('collapse')}>
+          <ExpandWrapper id="wysiwyg-expand">
+            <ExpandContainer background="neutral0" hasRadius shadow="popupShadow">
+              <WysiwygContainer>
+                <WysiwygNav
+                  noPreviewMode
+                  editorRef={editorRef}
+                  onActionClick={onActionClick}
+                  onToggleMediaLib={handleToggleMediaLib}
+                  onTogglePopover={handleTogglePopover}
+                  visiblePopover={visiblePopover}
+                />
+                <Editor
+                  disabled={disabled}
+                  editorRef={editorRef}
+                  name={name}
+                  onChange={onChange}
+                  placeholder={placeholder}
+                  textareaRef={textareaRef}
+                  value={value}
+                />
+              </WysiwygContainer>
+              <PreviewWrapper>
+                <PreviewHeader padding={2} background="neutral100">
+                  <Row justifyContent="flex-end" alignItems="flex-end">
+                    <ExpandButton id="collapse" onClick={() => onToggleExpand('collapse')}>
+                      <Text>
+                        {formatMessage({
+                          id: 'components.Wysiwyg.collapse',
+                          defaultMessage: 'Collapse',
+                        })}
+                      </Text>
+                      <Collapse />
+                    </ExpandButton>
+                  </Row>
+                </PreviewHeader>
+                <PreviewContainer>
+                  <PreviewWysiwyg data={value} />
+                </PreviewContainer>
+              </PreviewWrapper>
+            </ExpandContainer>
+          </ExpandWrapper>
+        </FocusTrap>
+      </Portal>
+      {mediaLibVisible && (
+        <MediaLibrary
+          editorRef={editorRef}
+          onSubmitImage={onSubmitImage}
+          onToggle={handleToggleMediaLib}
+          onToggleMediaLib={handleToggleMediaLib}
+          onTogglePopover={handleTogglePopover}
+        />
+      )}
+    </>
+  );
+};
+
+WysiwygExpand.defaultProps = {
+  disabled: false,
+  onChange: () => {},
+  onToggleExpand: () => {},
+  onActionClick: () => {},
+  onSubmitImage: () => {},
+  value: '',
+  placeholder: '',
+};
+
+WysiwygExpand.propTypes = {
+  disabled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onToggleExpand: PropTypes.func,
+  onActionClick: PropTypes.func,
+  onSubmitImage: PropTypes.func,
+  textareaRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+};
+
+export default WysiwygExpand;

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/parts/Box';
+import { Row } from '@strapi/parts/Row';
+import { Text } from '@strapi/parts/Text';
+import Expand from '@strapi/icons/Expand';
+import { ExpandButton } from './WysiwygStyles';
+
+const WysiwygFooter = ({ isPreviewMode, onToggleExpand }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box padding={2} background="neutral100" hasRadius>
+      <Row justifyContent="flex-end" alignItems="flex-end">
+        <ExpandButton id="expand" disabled={isPreviewMode} onClick={onToggleExpand}>
+          <Text>
+            {formatMessage({
+              id: 'components.WysiwygBottomControls.fullscreen',
+              defaultMessage: 'Expand',
+            })}
+          </Text>
+          <Expand />
+        </ExpandButton>
+      </Row>
+    </Box>
+  );
+};
+
+WysiwygFooter.defaultProps = {
+  onToggleExpand: () => {},
+  isPreviewMode: false,
+};
+
+WysiwygFooter.propTypes = {
+  onToggleExpand: PropTypes.func,
+  isPreviewMode: PropTypes.bool,
+};
+
+export default WysiwygFooter;