@akemona-org/strapi-plugin-content-manager 3.7.0

package/admin/src/components/Wysiwyg/previewControl.js

@@ -0,0 +1,29 @@
+/**
+ *
+ *
+ * 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/components/Wysiwyg/toggleMode.js

@@ -0,0 +1,44 @@
+/**
+ *
+ *
+ * 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/components/Wysiwyg/utils.js

@@ -0,0 +1,70 @@
+/**
+ *
+ * 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/components/WysiwygBottomControls/components.js

@@ -0,0 +1,44 @@
+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 };

package/admin/src/components/WysiwygBottomControls/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/**
+ *
+ * WysiwygBottomControls
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Wrapper } from './components';
+
+const WysiwygBottomControls = ({ onClick }) => {
+  return (
+    <Wrapper>
+      <div />
+      <div className="fullScreenWrapper" onClick={onClick}>
+        <FormattedMessage id="components.WysiwygBottomControls.fullscreen" />
+      </div>
+    </Wrapper>
+  );
+};
+
+WysiwygBottomControls.defaultProps = {
+  onClick: () => {},
+};
+
+WysiwygBottomControls.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default WysiwygBottomControls;

package/admin/src/components/WysiwygDropUpload/Label.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Label = styled.label`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(28, 93, 231, 0.01);
+
+  > input {
+    display: none;
+  }
+`;
+
+export default Label;

package/admin/src/components/WysiwygDropUpload/index.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * WysiwygDropUpload
+ *
+ */
+
+import React from 'react';
+import Label from './Label';
+
+const WysiwygDropUpload = props => {
+  return (
+    <Label {...props}>
+      <input onChange={() => {}} type="file" tabIndex="-1" />
+    </Label>
+  );
+};
+
+export default WysiwygDropUpload;

package/admin/src/components/WysiwygEditor/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * WysiwygEditor
+ *
+ */
+
+import React from 'react';
+import { Editor } from 'draft-js';
+import 'draft-js/dist/Draft.css';
+import PropTypes from 'prop-types';
+
+class WysiwygEditor extends React.Component {
+  render() {
+    return <Editor {...this.props} ref={this.props.setRef} />;
+  }
+}
+
+WysiwygEditor.defaultProps = {
+  setRef: () => {},
+};
+
+WysiwygEditor.propTypes = {
+  setRef: PropTypes.func,
+};
+
+export default WysiwygEditor;

package/admin/src/components/WysiwygInlineControls/Button.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Bold from '../../icons/Bold';
+import Code from '../../icons/Code';
+import Media from '../../icons/Media';
+import Italic from '../../icons/Italic';
+import Link from '../../icons/Link';
+import Ol from '../../icons/Ol';
+import Quote from '../../icons/Quote';
+import Striked from '../../icons/Striked';
+import Ul from '../../icons/Ul';
+import Underline from '../../icons/Underline';
+import StyledButton from './StyledButton';
+
+const icons = {
+  bold: Bold,
+  italic: Italic,
+  underline: Underline,
+  ul: Ul,
+  ol: Ol,
+  link: Link,
+  quote: Quote,
+  code: Code,
+  striked: Striked,
+  img: Media,
+};
+
+const Button = ({
+  active,
+  disabled,
+  className: type,
+  handler,
+  handlers,
+  hideLabel,
+  label,
+  style,
+  text,
+}) => {
+  const handleClick = e => {
+    e.preventDefault();
+
+    handlers[handler](text, style);
+  };
+
+  const Icon = icons[type];
+
+  return (
+    <StyledButton active={active} disabled={disabled} onClick={handleClick} type={type}>
+      {icons[type] && <Icon />}
+      {!hideLabel && label}
+    </StyledButton>
+  );
+};
+
+Button.defaultProps = {
+  active: false,
+  className: '',
+  disabled: false,
+  hideLabel: false,
+  label: '',
+  style: '',
+  text: '',
+};
+
+Button.propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  handler: PropTypes.string.isRequired,
+  handlers: PropTypes.object.isRequired,
+  hideLabel: PropTypes.bool,
+  label: PropTypes.string,
+  style: PropTypes.string,
+  text: PropTypes.string,
+};
+
+export default Button;

package/admin/src/components/WysiwygInlineControls/StyledButton.js

@@ -0,0 +1,54 @@
+import styled, { css } from 'styled-components';
+
+/* eslint-disable indent */
+const Button = styled.button`
+  display: flex;
+  height: 32px;
+  min-width: 32px;
+  background-color: #ffffff;
+  border: 1px solid rgba(16, 22, 34, 0.1);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f3f4f4;
+  }
+  &:active,
+  &:focus {
+    outline: 0;
+  }
+
+  ${({ active, disabled }) => {
+    if (active) {
+      return css`
+        border: 0;
+        background: rgba(16, 22, 34, 0);
+        box-shadow: inset 0 -1px 0 0 rgba(16, 22, 34, 0.04), inset 0 1px 0 0 rgba(16, 22, 34, 0.04);
+      `;
+    }
+
+    if (disabled) {
+      return css`
+        opacity: 0.7;
+        cursor: not-allowed;
+      `;
+    }
+
+    return '';
+  }}
+
+  > svg {
+    margin: auto;
+    > text {
+      font-family: Baskerville-SemiBoldItalic, Baskerville;
+    }
+  }
+
+  background-position: center;
+  background-repeat: no-repeat;
+`;
+
+export default Button;

package/admin/src/components/WysiwygInlineControls/Wrapper.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  height: 49px;
+  display: flex;
+  padding: 8px 3px 0 10px;
+  background-color: #f3f4f4;
+  user-select: none;
+  overflow-x: auto;
+  > button:nth-child(even) {
+    border-left: 0;
+    border-right: 0;
+  }
+  > button:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  > button:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-right: 1px solid rgba(16, 22, 34, 0.1);
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/WysiwygInlineControls/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * WysiwygInlineControls
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './Button';
+import Wrapper from './Wrapper';
+
+const WysiwygInlineControls = ({
+  buttons,
+  disabled,
+  editorState,
+  handlers,
+  onToggle,
+  onToggleBlock,
+}) => {
+  const selection = editorState.getSelection();
+  const blockType = editorState
+    .getCurrentContent()
+    .getBlockForKey(selection.getStartKey())
+    .getType();
+
+  const currentStyle = editorState.getCurrentInlineStyle();
+
+  return (
+    <Wrapper>
+      {buttons.map(type => (
+        <Button
+          key={type.label}
+          active={type.style === blockType || currentStyle.has(type.style)}
+          className={type.className}
+          disabled={disabled}
+          handler={type.handler}
+          handlers={handlers}
+          hideLabel={type.hideLabel || false}
+          label={type.label}
+          onToggle={onToggle}
+          onToggleBlock={onToggleBlock}
+          style={type.style}
+          text={type.text}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+WysiwygInlineControls.defaultProps = {
+  buttons: [],
+  disabled: false,
+  onToggle: () => {},
+  onToggleBlock: () => {},
+};
+
+WysiwygInlineControls.propTypes = {
+  buttons: PropTypes.array,
+  disabled: PropTypes.bool,
+  editorState: PropTypes.object.isRequired,
+  handlers: PropTypes.object.isRequired,
+  onToggle: PropTypes.func,
+  onToggleBlock: PropTypes.func,
+};
+
+export default WysiwygInlineControls;

package/admin/src/components/WysiwygWithErrors/Wrapper.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-bottom: 2.8rem;
+  font-size: 1.3rem;
+  font-family: 'Lato';
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  &.bordered {
+    .editorWrapper {
+      border-color: red;
+    }
+  }
+  > div + p {
+    width: 100%;
+    padding-top: 12px;
+    font-size: 1.2rem;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -9px;
+  }
+
+  div,
+  pre,
+  code {
+    ::-webkit-scrollbar {
+      height: 5px;
+      width: 5px;
+      cursor: default;
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/components/WysiwygWithErrors/index.js

@@ -0,0 +1,158 @@
+/**
+ *
+ * WysiwygWithErrors
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty, isFunction } from 'lodash';
+import cn from 'classnames';
+import { Description, ErrorMessage, Label } from '@buffetjs/styles';
+import { Error } from '@buffetjs/core';
+import { LabelIconWrapper } from 'strapi-helper-plugin';
+import Wysiwyg from '../Wysiwyg';
+import Wrapper from './Wrapper';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class WysiwygWithErrors extends React.Component {
+  render() {
+    const {
+      autoFocus,
+      className,
+      deactivateErrorHighlight,
+      disabled,
+      error: inputError,
+      inputClassName,
+      inputDescription,
+      inputStyle,
+      label,
+      labelIcon,
+      name,
+      onBlur: handleBlur,
+      onChange,
+      placeholder,
+      resetProps,
+      style,
+      tabIndex,
+      validations,
+      value,
+      ...rest
+    } = this.props;
+
+    return (
+      <Error inputError={inputError} name={name} type="text" validations={validations}>
+        {({ canCheck, onBlur, error, dispatch }) => {
+          const hasError = Boolean(error);
+
+          return (
+            <Wrapper
+              className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
+              style={style}
+            >
+              <Label htmlFor={name}>
+                <span>{label}</span>
+                {labelIcon && (
+                  <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
+                )}
+              </Label>
+              <Wysiwyg
+                {...rest}
+                autoFocus={autoFocus}
+                className={inputClassName}
+                disabled={disabled}
+                deactivateErrorHighlight={deactivateErrorHighlight}
+                error={hasError}
+                name={name}
+                onBlur={isFunction(handleBlur) ? handleBlur : onBlur}
+                onChange={e => {
+                  if (!canCheck) {
+                    dispatch({
+                      type: 'SET_CHECK',
+                    });
+                  }
+
+                  dispatch({
+                    type: 'SET_ERROR',
+                    error: null,
+                  });
+                  onChange(e);
+                }}
+                placeholder={placeholder}
+                resetProps={resetProps}
+                style={inputStyle}
+                tabIndex={tabIndex}
+                value={value}
+              />
+              {!hasError && inputDescription && <Description>{inputDescription}</Description>}
+              {hasError && <ErrorMessage>{error}</ErrorMessage>}
+            </Wrapper>
+          );
+        }}
+      </Error>
+    );
+  }
+}
+
+WysiwygWithErrors.defaultProps = {
+  autoFocus: false,
+  className: '',
+  deactivateErrorHighlight: false,
+  didCheckErrors: false,
+  disabled: false,
+  error: null,
+  inputClassName: '',
+  inputDescription: '',
+  inputStyle: {},
+  label: '',
+  labelIcon: null,
+  onBlur: false,
+  placeholder: '',
+  resetProps: false,
+  style: {},
+  tabIndex: '0',
+  validations: {},
+  value: null,
+};
+
+WysiwygWithErrors.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  deactivateErrorHighlight: PropTypes.bool,
+  didCheckErrors: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  inputClassName: PropTypes.string,
+  inputDescription: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+  inputStyle: PropTypes.object,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.string,
+  }),
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  resetProps: PropTypes.bool,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  validations: PropTypes.object,
+  value: PropTypes.string,
+};
+
+export default WysiwygWithErrors;