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

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, isArray, includes, isEmpty } from 'lodash';
+import { getFileExtension, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import DefaultIcon from '../../icons/Na';
+import {
+  StyledMediaPreviewList,
+  MediaPreviewFile,
+  MediaPreviewImage,
+  MediaPreviewItem,
+  MediaPreviewText,
+} from './StyledMediaPreviewList';
+
+const IMAGE_PREVIEW_COUNT = 3;
+
+function MediaPreviewList({ hoverable, files }) {
+  const renderImage = image => {
+    const { name, size, url } = image;
+    const thumbnail = get(image, ['formats', 'thumbnail', 'url'], null);
+    const fileUrl = thumbnail || url;
+
+    if (!thumbnail && size > 20000) {
+      return renderFile(image);
+    }
+
+    return (
+      <MediaPreviewImage className={hoverable ? 'hoverable' : ''}>
+        <div>
+          <img src={prefixFileUrlWithBackendUrl(fileUrl)} alt={`${name}`} />
+        </div>
+        <img src={prefixFileUrlWithBackendUrl(fileUrl)} alt={`${name}`} />
+      </MediaPreviewImage>
+    );
+  };
+
+  const renderFile = file => {
+    const { ext, name } = file;
+    const fileExtension = getFileExtension(ext);
+
+    return (
+      <MediaPreviewFile className={hoverable ? 'hoverable' : ''}>
+        {fileExtension ? (
+          <div>
+            <span>{fileExtension}</span>
+          </div>
+        ) : (
+          <MediaPreviewItem>
+            <DefaultIcon />
+          </MediaPreviewItem>
+        )}
+
+        <span>{name}</span>
+      </MediaPreviewFile>
+    );
+  };
+
+  const renderItem = file => {
+    const { mime } = file;
+
+    return (
+      <React.Fragment key={JSON.stringify(file)}>
+        {includes(mime, 'image') ? renderImage(file) : renderFile(file)}
+      </React.Fragment>
+    );
+  };
+
+  const renderText = count => {
+    return (
+      <MediaPreviewText>
+        <div>
+          <span>+{count}</span>
+        </div>
+      </MediaPreviewText>
+    );
+  };
+
+  const renderMultipleItems = files => {
+    return files.map((file, index) => {
+      return (
+        <React.Fragment key={JSON.stringify(file)}>
+          {index === IMAGE_PREVIEW_COUNT && files.length > IMAGE_PREVIEW_COUNT + 1
+            ? renderText(files.length - IMAGE_PREVIEW_COUNT)
+            : renderItem(file)}
+        </React.Fragment>
+      );
+    });
+  };
+
+  return !!files && !isEmpty(files) ? (
+    <StyledMediaPreviewList>
+      {!isArray(files) ? renderItem(files) : renderMultipleItems(files)}
+    </StyledMediaPreviewList>
+  ) : (
+    <MediaPreviewItem>
+      <DefaultIcon />
+    </MediaPreviewItem>
+  );
+}
+
+MediaPreviewList.defaultProps = {
+  hoverable: true,
+  files: null,
+};
+
+MediaPreviewList.propTypes = {
+  hoverable: PropTypes.bool,
+  files: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+export default MediaPreviewList;

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

@@ -0,0 +1,73 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable import/no-cycle */
+
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useContentTypeLayout } from '../../hooks';
+import NonRepeatableWrapper from '../NonRepeatableWrapper';
+import Inputs from '../Inputs';
+import FieldComponent from '../FieldComponent';
+
+const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, name }) => {
+  const { getComponentLayout } = useContentTypeLayout();
+  const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
+    componentUid,
+    getComponentLayout,
+  ]);
+  const fields = componentLayoutData.layouts.edit;
+
+  return (
+    <NonRepeatableWrapper isFromDynamicZone={isFromDynamicZone}>
+      {fields.map((fieldRow, key) => {
+        return (
+          <div className="row" key={key}>
+            {fieldRow.map(({ name: fieldName, size, metadatas, fieldSchema, queryInfos }) => {
+              const isComponent = fieldSchema.type === 'component';
+              const keys = `${name}.${fieldName}`;
+
+              if (isComponent) {
+                const compoUid = fieldSchema.component;
+
+                return (
+                  <FieldComponent
+                    key={fieldName}
+                    componentUid={compoUid}
+                    isRepeatable={fieldSchema.repeatable}
+                    label={metadatas.label}
+                    max={fieldSchema.max}
+                    min={fieldSchema.min}
+                    name={keys}
+                  />
+                );
+              }
+
+              return (
+                <div key={fieldName} className={`col-${size}`}>
+                  <Inputs
+                    keys={keys}
+                    fieldSchema={fieldSchema}
+                    metadatas={metadatas}
+                    componentUid={componentUid}
+                    queryInfos={queryInfos}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </NonRepeatableWrapper>
+  );
+};
+
+NonRepeatableComponent.defaultProps = {
+  isFromDynamicZone: false,
+};
+
+NonRepeatableComponent.propTypes = {
+  componentUid: PropTypes.string.isRequired,
+  isFromDynamicZone: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+};
+
+export default NonRepeatableComponent;

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

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+
+const hoverStyle = `
+  border: 1px solid #aed4fb;
+  background-color: #e6f0fb;
+  > button {
+    :before,
+    :after {
+      background-color: #007eff;
+    }
+    background-color: #aed4fb;
+  }
+
+  > p {
+    color: #007eff;
+  }
+`;
+
+/* eslint-disable indent */
+const NonRepeatableWrapper = styled.div`
+  margin: 0 !important;
+  padding: 0 20px !important;
+
+  ${({ isEmpty, isFromDynamicZone, isReadOnly }) => {
+    if (isEmpty) {
+      return `
+      position: relative;
+      height: 108px;
+      margin-bottom: 25px !important;
+      background-color: #fafafb;
+      text-align: center;
+      cursor: ${isReadOnly ? 'not-allowed' : 'pointer'};
+      border-radius: 2px;
+
+      > button {
+        position: absolute;
+        top: 30px;
+        left: calc(50% - 18px);
+        height: 36px;
+        width: 36px;
+        line-height: 38px;
+        border-radius: 50%;
+        background-color: #f3f4f4;
+        cursor: ${isReadOnly ? 'not-allowed !important' : 'pointer'};
+      }
+      border: 1px solid transparent;
+
+      &:hover {
+        ${isReadOnly ? '' : hoverStyle};
+      }
+    `;
+    }
+
+    if (isFromDynamicZone) {
+      return `
+      background-color: #fff;
+      padding: 0 10px !important;
+    `;
+    }
+
+    return `
+    padding-top: 25px !important;
+    background-color: #f7f8f8;
+    margin-bottom: 18px !important;
+  `;
+  }}
+`;
+
+NonRepeatableWrapper.defaultProps = {
+  isReadOnly: false,
+};
+
+export default NonRepeatableWrapper;

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+const beforeStyle = `
+  content: ' ';
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 2px;
+  left: 11px;
+  top: 17px;
+  bottom: 10px;
+  z-index: 9;
+`;
+
+const afterStyle = `
+  content: ' ';
+  position: absolute;
+  display: block;
+  height: 14px;
+  width: 2px;
+  left: 17px;
+  top: 11px;
+  right: 10px;
+  z-index: 9;
+`;
+
+const Button = styled.button`
+  position: relative;
+  height: 36px;
+  width: 36px;
+  background-color: #f3f4f4;
+  border-radius: 50%;
+  text-align: center;
+
+  :focus {
+    outline: 0;
+  }
+
+  :before {
+    ${beforeStyle}
+  }
+  :after {
+    ${afterStyle}
+  }
+
+  :before,
+  :after {
+    background-color: #b4b6ba;
+  }
+`;
+
+export default Button;

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+} from 'strapi-helper-plugin';
+import { FormattedMessage } from 'react-intl';
+import { upperFirst } from 'lodash';
+import { AttributeIcon, Button } from '@buffetjs/core';
+
+const PopupForm = ({
+  headerId,
+  isOpen,
+  onClosed,
+  onSubmit,
+  onToggle,
+  renderForm,
+  subHeaderContent,
+  type,
+}) => {
+  const getAttrType = () => {
+    if (type === 'timestamp') {
+      return 'date';
+    }
+
+    if (['decimal', 'float', 'integer', 'biginter'].includes(type)) {
+      return 'number';
+    }
+
+    return type;
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClosed={onClosed} onToggle={onToggle}>
+      <HeaderModal>
+        <section>
+          <HeaderModalTitle style={{ textTransform: 'none' }}>
+            <AttributeIcon type={getAttrType()} style={{ margin: 'auto 20px auto 0' }} />
+            <FormattedMessage id={headerId} />
+          </HeaderModalTitle>
+        </section>
+        <section>
+          <HeaderModalTitle>
+            <span>{upperFirst(subHeaderContent)}</span>
+            <hr />
+          </HeaderModalTitle>
+        </section>
+      </HeaderModal>
+      <form onSubmit={onSubmit}>
+        <ModalForm>
+          <ModalBody>{renderForm()}</ModalBody>
+        </ModalForm>
+        <ModalFooter>
+          <section>
+            <Button onClick={onToggle} color="cancel">
+              <FormattedMessage id="app.components.Button.cancel" />
+            </Button>
+            <Button type="submit" color="success">
+              <FormattedMessage id="form.button.done" />
+            </Button>
+          </section>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
+
+PopupForm.defaultProps = {
+  isOpen: false,
+  onClosed: () => {},
+  onSubmit: () => {},
+  onToggle: () => {},
+  renderForm: () => {},
+  subHeaderContent: '',
+  type: '',
+};
+
+PopupForm.propTypes = {
+  headerId: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool,
+  onClosed: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onToggle: PropTypes.func,
+  renderForm: PropTypes.func,
+  subHeaderContent: PropTypes.string,
+  type: PropTypes.string,
+};
+
+export default PopupForm;

package/admin/src/components/PreviewCarret/components.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+/* eslint-disable indent */
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 30px;
+  width: 100%;
+  padding: 0 5px;
+
+  ${({ isComponent }) =>
+    isComponent &&
+    `
+    height: 34px;
+    padding: 0;
+  `}
+
+  border-radius: 2px;
+  > div {
+    width: 100%;
+    height: 2px;
+    background: #007eff;
+  }
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Wrapper from './components';
+
+const PreviewCarret = ({ isComponent, style }) => (
+  <Wrapper isComponent={isComponent} style={style}>
+    <div />
+  </Wrapper>
+);
+
+PreviewCarret.defaultProps = {
+  isComponent: false,
+  style: {},
+};
+
+PreviewCarret.propTypes = {
+  isComponent: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+export default memo(PreviewCarret);

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

@@ -0,0 +1,133 @@
+import styled from 'styled-components';
+
+/* eslint-disable */
+
+const Wrapper = styled.div`
+  max-height: 555px;
+  min-height: 294px;
+  overflow: auto;
+  padding: 20px 20px 0 20px;
+  font-size: 16px;
+  background-color: #fff;
+  line-height: 24px !important;
+  font-family: 'Lato';
+  cursor: text;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block-start: 10px;
+    margin-block-end: 10px;
+    font-family: 'Lato';
+  }
+
+  h1 {
+    font-size: 36px;
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: 24px;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  blockquote {
+    margin-top: 41px;
+    margin-bottom: 34px;
+    font-size: 16px;
+    font-weight: 400;
+    border-left: 5px solid #eee;
+    font-style: italic;
+    padding: 10px 20px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  table {
+    font-size: 13px;
+    thead {
+      background: rgb(243, 243, 243);
+      tr {
+        height: 43px;
+      }
+    }
+    tr {
+      border: 1px solid #c6cbd1;
+    }
+    th,
+    td {
+      padding: 0 25px;
+      border: 1px solid #c6cbd1;
+      border-bottom: 0;
+      border-top: 0;
+    }
+
+    tbody {
+      tr {
+        height: 54px;
+      }
+    }
+  }
+
+  pre,
+  code {
+    font-size: 13px;
+    font-family: 'Lato';
+    border-radius: 3px;
+    background-color: #002b36;
+  }
+
+  /* Inline code */
+  p,
+  pre,
+  td {
+    > code {
+      color: #839496;
+    }
+  }
+
+  .warning {
+    background-color: #faa684;
+    padding: 30px;
+    border-radius: 3px;
+  }
+  .tip {
+    background-color: ${props => props.theme.main.colors.darkBlue};
+    padding: 30px;
+    border-radius: 3px;
+  }
+
+  .footnote-ref,
+  .footnote-backref {
+    color: #007bff;
+  }
+
+  ${({ isFullscreen }) => {
+    if (isFullscreen) {
+      return `
+        max-height: calc(100% - 70px) !important;
+        margin-bottom: 0;
+        margin-top: 9px;
+        padding: 10px 20px;
+        overflow: auto;
+      `;
+    }
+  }}
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-danger */
+/**
+ *
+ * PreviewWysiwyg
+ *
+ */
+
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import useWysiwyg from '../../hooks/useWysiwyg';
+import md from './utils/mdRenderer';
+import sanitizeHtml from './utils/satinizeHtml';
+import Wrapper from './Wrapper';
+
+const PreviewWysiwyg = ({ data }) => {
+  const { isFullscreen } = useWysiwyg();
+  const html = useMemo(() => sanitizeHtml(md.render(data || '')), [data]);
+
+  return (
+    <Wrapper isFullscreen={isFullscreen}>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </Wrapper>
+  );
+};
+
+PreviewWysiwyg.defaultProps = {
+  data: '',
+};
+
+PreviewWysiwyg.propTypes = {
+  data: PropTypes.string,
+};
+
+export default memo(PreviewWysiwyg);

package/admin/src/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -0,0 +1,72 @@
+/* eslint-disable prefer-template */
+import Markdown from 'markdown-it';
+import 'highlight.js/styles/solarized-dark.css';
+import hljs from 'highlight.js';
+import abbr from 'markdown-it-abbr';
+import container from 'markdown-it-container';
+import deflist from 'markdown-it-deflist';
+import emoji from 'markdown-it-emoji';
+import footnote from 'markdown-it-footnote';
+import ins from 'markdown-it-ins';
+import mark from 'markdown-it-mark';
+import sub from 'markdown-it-sub';
+import sup from 'markdown-it-sup';
+
+const md = new Markdown({
+  html: true, // Enable HTML tags in source
+  xhtmlOut: false,
+  breaks: false,
+  langPrefix: 'language-',
+  linkify: true,
+  typographer: true,
+  // Code from: https://github.com/markdown-it/markdown-it/blob/master/support/demo_template/index.js#L83
+  highlight: (str, lang) => {
+    if (lang && lang !== 'auto' && hljs.getLanguage(lang)) {
+      return (
+        '<pre class="hljs language-' +
+        md.utils.escapeHtml(lang.toLowerCase()) +
+        '"><code>' +
+        hljs.highlight(lang, str, true).value +
+        '</code></pre>'
+      );
+    }
+
+    if (lang === 'auto') {
+      const result = hljs.highlightAuto(str);
+
+      return (
+        '<pre class="hljs language-' +
+        md.utils.escapeHtml(result.language) +
+        '"><code>' +
+        result.value +
+        '</code></pre>'
+      );
+    }
+
+    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+  },
+})
+  .use(abbr)
+  .use(container, 'warning')
+  .use(container, 'tip')
+  .use(deflist)
+  .use(emoji)
+  .use(footnote)
+  .use(ins)
+  .use(mark)
+  .use(sub)
+  .use(sup);
+
+// Code from: https://github.com/markdown-it/markdown-it-footnote/blob/master/index.js#L29
+md.renderer.rules.footnote_ref = (tokens, idx, options, env, slf) => {
+  const caption = slf.rules.footnote_caption(tokens, idx, options, env, slf);
+
+  return '<sup class="footnote-ref"><span>' + caption + '</span></sup>';
+};
+
+md.renderer.rules.footnote_anchor = () => {
+  /* ↩ with escape code to prevent display as Apple Emoji on iOS */
+  return ' <span class="footnote-backref">\u21a9\uFE0E</span>';
+};
+
+export default md;

package/admin/src/components/PreviewWysiwyg/utils/satinizeHtml.js

@@ -0,0 +1,16 @@
+import sanitizeHtml from 'sanitize-html';
+
+// Options for the lib can be found here https://www.npmjs.com/package/sanitize-html
+const options = {
+  ...sanitizeHtml.defaults,
+  allowedTags: false,
+  allowedAttributes: {
+    '*': ['href', 'align', 'alt', 'center', 'width', 'height', 'type', 'controls', 'target'],
+    img: ['src', 'alt'],
+    source: ['src', 'type'],
+  },
+};
+
+const clean = dirty => sanitizeHtml(dirty, options);
+
+export default clean;