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

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

@@ -0,0 +1,122 @@
+import styled, { css } from 'styled-components';
+/* eslint-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;
+      }
+    }
+  }
+
+  .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;
+    position: relative;
+  }
+
+  .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;
+    }
+  }
+
+  .editorFullScreen {
+    max-height: calc(100% - 70px) !important;
+    margin-bottom: 0;
+    overflow: auto;
+  }
+
+  .editorInput {
+    height: 0;
+    width: 0;
+  }
+`;
+
+export default EditorWrapper;

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

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useStrapi, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import PropTypes from 'prop-types';
+
+const MediaLib = ({ isOpen, onChange, onToggle }) => {
+  const {
+    strapi: {
+      componentApi: { getComponent },
+    },
+  } = useStrapi();
+  const [data, setData] = useState(null);
+  const [isDisplayed, setIsDisplayed] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsDisplayed(true);
+    }
+  }, [isOpen]);
+
+  const Component = getComponent('media-library').Component;
+
+  const handleInputChange = data => {
+    if (data) {
+      const formattedData = data.map(({ name, alternativeText, url }) => {
+        const alt = alternativeText || name;
+
+        return { alt, url: prefixFileUrlWithBackendUrl(url) };
+      });
+      setData(formattedData);
+    }
+  };
+
+  const handleClosed = () => {
+    if (data) {
+      onChange(data);
+    }
+
+    setData(null);
+    setIsDisplayed(false);
+  };
+
+  if (Component && isDisplayed) {
+    return (
+      <Component
+        allowedTypes={['images', 'videos', 'files']}
+        isOpen={isOpen}
+        multiple
+        noNavigation
+        onClosed={handleClosed}
+        onInputMediaChange={handleInputChange}
+        onToggle={onToggle}
+      />
+    );
+  }
+
+  return null;
+};
+
+MediaLib.defaultProps = {
+  isOpen: false,
+  onChange: () => {},
+  onToggle: () => {},
+};
+
+MediaLib.propTypes = {
+  isOpen: PropTypes.bool,
+  onChange: PropTypes.func,
+  onToggle: PropTypes.func,
+};
+
+export default MediaLib;

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

@@ -0,0 +1,30 @@
+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/components/Wysiwyg/SelectWrapper.js

@@ -0,0 +1,24 @@
+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/components/Wysiwyg/ToggleModeWrapper.js

@@ -0,0 +1,30 @@
+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/components/Wysiwyg/constants.js

@@ -0,0 +1,98 @@
+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/components/Wysiwyg/customSelect.js

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

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