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

package/admin/src/content-manager/components/SelectWrapper/components.js

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const BaselineAlignment = styled.div`
-  padding-top: 1px;
-`;
-
-const A = styled(Text)`
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-export { A, BaselineAlignment };

package/admin/src/content-manager/components/SelectWrapper/utils/styles.js

@@ -1,105 +0,0 @@
-/* eslint-disable indent */
-/* eslint-disable no-nested-ternary */
-
-const styles = {
-  container: base => ({ ...base, background: '#ffffff' }),
-  control: (base, state) => {
-    const borderRadiusStyle = state.selectProps.menuIsOpen
-      ? {
-          borderBottomLeftRadius: '0 !important',
-          borderBottomRightRadius: '0 !important',
-        }
-      : {};
-
-    const {
-      selectProps: { error, value },
-    } = state;
-
-    let border;
-    let borderBottom;
-    let backgroundColor;
-
-    if (state.isFocused) {
-      border = '1px solid #78caff !important';
-    } else if (error && !value.length) {
-      border = '1px solid #f64d0a !important';
-    } else {
-      border = '1px solid #e3e9f3 !important';
-    }
-
-    if (state.menuIsOpen === true) {
-      borderBottom = '1px solid #e3e9f3 !important';
-    }
-
-    if (state.isDisabled) {
-      backgroundColor = '#fafafb !important';
-    }
-
-    return {
-      ...base,
-      fontSize: 13,
-      height: 34,
-      minHeight: 34,
-      border,
-      outline: 0,
-      boxShadow: 0,
-      borderRadius: '2px !important',
-      ...borderRadiusStyle,
-      borderBottom,
-      backgroundColor,
-    };
-  },
-  input: base => ({ ...base, marginLeft: 10 }),
-  menu: base => {
-    return {
-      ...base,
-      width: '100%',
-      margin: '0',
-      paddingTop: 0,
-      borderRadius: '2px !important',
-      borderTopLeftRadius: '0 !important',
-      borderTopRightRadius: '0 !important',
-      border: '1px solid #78caff !important',
-      boxShadow: 0,
-      borderTop: '0 !important',
-      fontSize: '13px',
-    };
-  },
-  menuList: base => ({
-    ...base,
-    maxHeight: '112px',
-    paddingTop: 2,
-  }),
-  option: (base, state) => {
-    return {
-      ...base,
-      height: 36,
-      backgroundColor: state.isFocused ? '#f6f6f6' : '#fff',
-      ':active': {
-        ...base[':active'],
-        backgroundColor: '#f6f6f6',
-      },
-      color: '#333740',
-      fontWeight: state.isFocused ? '600' : '400',
-      cursor: 'pointer',
-      WebkitFontSmoothing: 'antialiased',
-    };
-  },
-  placeholder: base => ({
-    ...base,
-    marginTop: 0,
-    marginLeft: 10,
-    color: '#aaa',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    maxWidth: 'calc(100% - 32px)',
-  }),
-  valueContainer: base => ({
-    ...base,
-    padding: '2px 0px 4px 0px',
-    lineHeight: '18px',
-  }),
-};
-
-export default styles;

package/admin/src/content-manager/components/State/Wrapper.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  padding: 1rem;
-  border-radius: 0.2rem;
-  height: 2.5rem;
-  ${({ theme, isGreen }) =>
-    isGreen
-      ? `
-        border: 1px solid #aad67c;
-        background-color: #e6f8d4;
-        ${Text} {
-            color: ${theme.main.colors.green};
-        }
-    `
-      : `
-        border: 1px solid #A5D5FF;
-        background-color: ${theme.main.colors.lightestBlue};
-        ${Text} {
-            color: ${theme.main.colors.mediumBlue};
-        }
-    `};
-`;
-
-export default Wrapper;

package/admin/src/content-manager/components/Truncate/index.js

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const Truncate = styled.div``;
-
-export default Truncate;

package/admin/src/content-manager/components/Truncated/index.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const Truncated = styled.p`
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 0;
-`;
-
-export default Truncated;

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

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-const PreviewControlWrapper = styled.div`
-  display: flex;
-  height: 49px;
-  width: 100%;
-  padding: 0 17px;
-  justify-content: space-between;
-  font-family: Lato;
-  background-color: #fff;
-  border-bottom: 1px solid #f3f4f4;
-  line-height: 49px;
-  font-size: 13px;
-  > div:first-child {
-    > span:last-child {
-      font-size: 12px;
-    }
-  }
-  cursor: pointer;
-
-  .wysiwygCollapse {
-    &:after {
-      content: '\f066';
-      font-family: FontAwesome;
-      margin-left: 8px;
-    }
-  }
-`;
-
-export default PreviewControlWrapper;

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

@@ -1,24 +0,0 @@
-import styled, { css } from 'styled-components';
-
-/* eslint-disable */
-
-const SelectWrapper = styled.div`
-  min-width: ${({ isFullScreen }) => (isFullScreen ? '161px' : '115px')};
-  margin-left: 15px;
-  > select {
-    ${({ isFullScreen }) => {
-      if (isFullScreen) {
-        return css`
-          min-width: 110px !important;
-        `;
-      } else {
-        return css`
-          margin-right: 5px;
-        `;
-      }
-    }}
-    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-  }
-`;
-
-export default SelectWrapper;

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

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-const ToggleModeWrapper = styled.div`
-  margin-left: auto;
-  padding-right: 15px;
-  padding-top: 8px;
-
-  .toggleModeButton {
-    height: 32px;
-    min-width: 32px;
-    padding-left: 10px;
-    padding-right: 10px;
-    border: 1px solid rgba(16, 22, 34, 0.1);
-    border-radius: 3px;
-    background: #f3f4f4;
-    font-size: 13px;
-    font-weight: 500;
-    text-align: center;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    cursor: pointer;
-    &:focus,
-    &:active {
-      outline: 0;
-    }
-  }
-`;
-
-export default ToggleModeWrapper;

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

@@ -1,98 +0,0 @@
-export const SELECT_OPTIONS = [
-  { id: 'components.Wysiwyg.selectOptions.title', value: '' },
-  { id: 'components.Wysiwyg.selectOptions.H1', value: '#' },
-  { id: 'components.Wysiwyg.selectOptions.H2', value: '##' },
-  { id: 'components.Wysiwyg.selectOptions.H3', value: '###' },
-  { id: 'components.Wysiwyg.selectOptions.H4', value: '####' },
-  { id: 'components.Wysiwyg.selectOptions.H5', value: '#####' },
-  { id: 'components.Wysiwyg.selectOptions.H6', value: '######' },
-];
-
-export const CONTROLS = [
-  [
-    {
-      label: 'B',
-      style: 'BOLD',
-      className: 'bold',
-      hideLabel: true,
-      handler: 'addContent',
-      text: '**textToReplace**',
-    },
-    {
-      label: 'I',
-      style: 'ITALIC',
-      className: 'italic',
-      hideLabel: true,
-      handler: 'addContent',
-      text: '*textToReplace*',
-    },
-    {
-      label: 'U',
-      style: 'UNDERLINE',
-      className: 'underline',
-      hideLabel: true,
-      handler: 'addContent',
-      text: '<u>textToReplace</u>',
-    },
-    {
-      label: 'S',
-      style: 'STRIKED',
-      className: 'striked',
-      hideLabel: true,
-      handler: 'addContent',
-      text: '~~textToReplace~~',
-    },
-    {
-      label: 'UL',
-      style: 'unordered-list-item',
-      className: 'ul',
-      hideLabel: true,
-      handler: 'addUlBlock',
-      text: '- textToReplace',
-    },
-    {
-      label: 'OL',
-      style: 'ordered-list-item',
-      className: 'ol',
-      hideLabel: true,
-      handler: 'addOlBlock',
-      text: '1. textToReplace',
-    },
-  ],
-  [
-    {
-      label: '<>',
-      style: 'CODE',
-      className: 'code',
-      hideLabel: true,
-      handler: 'addSimpleBlockWithSelection',
-      text: '```textToReplace```',
-    },
-    {
-      label: 'img',
-      style: 'IMG',
-      className: 'img',
-      hideLabel: true,
-      handler: 'handleOpenMediaLibrary',
-      text: '![text](textToReplace)',
-    },
-    {
-      label: 'Link',
-      style: 'LINK',
-      className: 'link',
-      hideLabel: true,
-      handler: 'addContent',
-      text: '[textToReplace](link)',
-    },
-    {
-      label: 'quotes',
-      style: 'BLOCKQUOTE',
-      className: 'quote',
-      hideLabel: true,
-      handler: 'addSimpleBlockWithSelection',
-      text: '> textToReplace',
-    },
-  ],
-];
-
-export const DEFAULT_INDENTATION = '  ';

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

@@ -1,39 +0,0 @@
-/**
- *
- *
- * CustomSelect
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { InputSelect as Select } from '@strapi/helper-plugin';
-import useWysiwyg from '../../hooks/useWysiwyg';
-import { SELECT_OPTIONS } from './constants';
-import SelectWrapper from './SelectWrapper';
-
-const CustomSelect = ({ disabled }) => {
-  const { headerValue, isFullscreen, handleChangeSelect } = useWysiwyg();
-
-  return (
-    <SelectWrapper isFullscreen={isFullscreen}>
-      <Select
-        disabled={disabled}
-        name="headerSelect"
-        onChange={handleChangeSelect}
-        value={headerValue}
-        selectOptions={SELECT_OPTIONS}
-      />
-    </SelectWrapper>
-  );
-};
-
-CustomSelect.defaultProps = {
-  disabled: false,
-};
-
-CustomSelect.propTypes = {
-  disabled: PropTypes.bool,
-};
-
-export default CustomSelect;

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

@@ -1,116 +0,0 @@
-import { trimEnd, trimStart } from 'lodash';
-/**
- * Override the editor css
- * @param  {[type]} block [description]
- * @return {[type]}       [description]
- */
-
-export function getBlockStyle() {
-  return null;
-}
-
-export function getBlockContent(style) {
-  switch (style) {
-    case 'IMG':
-      return {
-        innerContent: 'link',
-        endReplacer: ')',
-        startReplacer: '![text](',
-      };
-    case 'CODE':
-      return {
-        innerContent: 'code block',
-        endReplacer: '`',
-        startReplacer: '`',
-      };
-    case 'BLOCKQUOTE':
-      return {
-        innerContent: 'quote',
-        endReplacer: '',
-        startReplacer: '> ',
-      };
-    case 'BOLD':
-      return {
-        innerContent: 'bold text',
-        endReplacer: '*',
-        startReplacer: '*',
-      };
-    case 'ITALIC':
-      return {
-        innerContent: 'italic text',
-        endReplacer: '*',
-        startReplacer: '*',
-      };
-    case 'STRIKED':
-      return {
-        innerContent: 'striked out',
-        endReplacer: '~',
-        startReplacer: '~',
-      };
-    case 'UNDERLINE':
-      return {
-        innerContent: 'underlined text',
-        endReplacer: '<u>',
-        startReplacer: '</u>',
-      };
-    case 'LINK':
-      return {
-        innerContent: 'text',
-        endReplacer: ']',
-        startReplacer: '[',
-      };
-    default:
-      return {
-        innerContent: '',
-        endReplacer: '',
-        startReplacer: '',
-      };
-  }
-}
-
-export const getDefaultSelectionOffsets = (
-  content,
-  startReplacer,
-  endReplacer,
-  initPosition = 0
-) => ({
-  anchorOffset: initPosition + content.length - trimStart(content, startReplacer).length,
-  focusOffset: initPosition + trimEnd(content, endReplacer).length,
-});
-
-/**
- * Get the start and end offset
- * @param  {Object} selection
- * @return {Object}
- */
-export function getOffSets(selection) {
-  return {
-    end: selection.getEndOffset(),
-    start: selection.getStartOffset(),
-  };
-}
-
-export function getKeyCommandData(command) {
-  let content;
-  let style;
-
-  switch (command) {
-    case 'bold':
-      content = '**textToReplace**';
-      style = 'BOLD';
-      break;
-    case 'italic':
-      content = '*textToReplace*';
-      style = 'ITALIC';
-      break;
-    case 'underline':
-      content = '<u>textToReplace</u>';
-      style = 'UNDERLINE';
-      break;
-    default:
-      content = '';
-      style = '';
-  }
-
-  return { content, style };
-}

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

@@ -1,29 +0,0 @@
-/**
- *
- *
- * PreviewControl
- *
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import PreviewControlWrapper from './PreviewControlWrapper';
-
-const PreviewControl = ({ onClick }) => (
-  <PreviewControlWrapper onClick={onClick}>
-    <div />
-    <div className="wysiwygCollapse">
-      <FormattedMessage id="components.Wysiwyg.collapse" />
-    </div>
-  </PreviewControlWrapper>
-);
-
-PreviewControl.defaultProps = {
-  onClick: () => {},
-};
-
-PreviewControl.propTypes = {
-  onClick: PropTypes.func,
-};
-
-export default PreviewControl;

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

@@ -1,40 +0,0 @@
-/**
- *
- *
- * ToggleMode
- */
-
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import PropTypes from 'prop-types';
-import ToggleModeWrapper from './ToggleModeWrapper';
-
-const ToggleMode = props => {
-  const label = props.isPreviewMode
-    ? 'components.Wysiwyg.ToggleMode.markdown'
-    : 'components.Wysiwyg.ToggleMode.preview';
-
-  return (
-    <ToggleModeWrapper>
-      <FormattedMessage id={label}>
-        {msg => (
-          <button type="button" className="toggleModeButton" onClick={props.onClick}>
-            {msg}
-          </button>
-        )}
-      </FormattedMessage>
-    </ToggleModeWrapper>
-  );
-};
-
-ToggleMode.defaultProps = {
-  isPreviewMode: false,
-  onClick: () => {},
-};
-
-ToggleMode.propTypes = {
-  isPreviewMode: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-export default ToggleMode;

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

@@ -1,62 +0,0 @@
-/**
- *
- * Utils
- *
- */
-
-import { ContentBlock, EditorState, genKey, Modifier } from 'draft-js';
-import { List } from 'immutable';
-import { DEFAULT_INDENTATION } from './constants';
-
-export function createNewBlock(text = '', type = 'unstyled', key = genKey()) {
-  return new ContentBlock({ key, type, text, charaterList: List([]) });
-}
-
-export function getNextBlocksList(editorState, startKey) {
-  return editorState
-    .getCurrentContent()
-    .getBlockMap()
-    .toSeq()
-    .skipUntil((_, k) => k === startKey)
-    .toList()
-    .shift()
-    .concat([createNewBlock()]);
-}
-
-export function updateSelection(selection, blocks, offset) {
-  return selection.merge({
-    anchorKey: blocks.get(0).getKey(),
-    focusKey: blocks.get(0).getKey(),
-    anchorOffset: offset,
-    focusOffset: offset,
-  });
-}
-
-export function getSelectedBlocksList(editorState) {
-  const selectionState = editorState.getSelection();
-  const contentState = editorState.getCurrentContent();
-  const startKey = selectionState.getStartKey();
-  const endKey = selectionState.getEndKey();
-  const blockMap = contentState.getBlockMap();
-
-  return blockMap
-    .toSeq()
-    .skipUntil((_, k) => k === startKey)
-    .takeUntil((_, k) => k === endKey)
-    .concat([[endKey, blockMap.get(endKey)]])
-    .toList();
-}
-
-export function onTab(editorState) {
-  const contentState = editorState.getCurrentContent();
-  const selection = editorState.getSelection();
-  let newContentState;
-
-  if (selection.isCollapsed()) {
-    newContentState = Modifier.insertText(contentState, selection, DEFAULT_INDENTATION);
-  } else {
-    newContentState = Modifier.replaceText(contentState, selection, DEFAULT_INDENTATION);
-  }
-
-  return EditorState.push(editorState, newContentState, 'insert-characters');
-}

package/admin/src/content-manager/components/WysiwygBottomControls/components.js

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-const Span = styled.span`
-  color: #1c5de7;
-  text-decoration: underline;
-  cursor: pointer;
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  height: 30px;
-  width: 100%;
-  padding: 0 15px;
-  justify-content: space-between;
-  background-color: #fafafb;
-  line-height: 30px;
-  font-size: 13px;
-  font-family: Lato;
-  border-top: 1px dashed #e3e4e4;
-
-  > div:first-child {
-    > span:last-child {
-      font-size: 12px;
-    }
-  }
-
-  .fullScreenWrapper {
-    cursor: pointer;
-    &:after {
-      content: '\f065';
-      margin-left: 8px;
-      font-family: FontAwesome;
-      font-size: 12px;
-    }
-  }
-
-  .dropLabel {
-    > input {
-      display: none;
-    }
-  }
-`;
-
-export { Span, Wrapper };