strapi/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/previewWysiwyg.js

/**
 *
 * PreviewWysiwyg
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { CompositeDecorator, ContentState, convertFromHTML, EditorState } from 'draft-js';
import cn from 'classnames';
import { isEmpty } from 'lodash';

import WysiwygEditor from 'components/WysiwygEditor';
import converter from './converter';
import { findLinkEntities, findImageEntities, findVideoEntities } from './strategies';

import Image from './image';
import Link from './link';
import Video from './video';

import styles from './componentsStyles.scss';

function getBlockStyle(block) {
  switch (block.getType()) {
    case 'blockquote':
      return styles.editorBlockquote;
    case 'code-block':
      return styles.editorCodeBlock;
    case 'unstyled':
      return styles.editorParagraph;
    case 'unordered-list-item':
      return styles.unorderedList;
    case 'ordered-list-item':
    case 'header-one':
    case 'header-two':
    case 'header-three':
    case 'header-four':
    case 'header-five':
    case 'header-six':
    default:
      return null;
  }
}

const decorator = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link,
  },
  {
    strategy: findImageEntities,
    component: Image,
  },
  {
    strategy: findVideoEntities,
    component: Video,
  },
]);

class PreviewWysiwyg extends React.Component {
  state = { editorState: EditorState.createEmpty(), isMounted: false };

  componentDidMount() {
    const { data } = this.props;
    this.setState({ isMounted: true });

    if (!isEmpty(data)) {
      this.previewHTML(data);
    }
  }

  componentWillUnmount() {
    this.setState({ isMounted: false });
  }

  getClassName = () => {
    if (this.context.isFullscreen) {
      return cn(styles.editor, styles.editorFullScreen, styles.fullscreenPreviewEditor);
    }

    return styles.editor;
  };

  UNSAFE_componentWillUpdate(nextProps, nextState) {
    if (nextProps.data !== this.props.data) {
      new Promise(resolve => {
        setTimeout(() => {
          if (nextProps.data === this.props.data && nextState.isMounted) {
            this.previewHTML(nextProps.data);
          }
          resolve();
        }, 300);
      });
    }
  }

  previewHTML = (rawContent) => {
    const initHtml = isEmpty(rawContent) ? '<p></p>' : rawContent;
    const html = converter.makeHtml(initHtml);
    const blocksFromHTML = convertFromHTML(html);

    // Make sure blocksFromHTML.contentBlocks !== null
    if (blocksFromHTML.contentBlocks) {
      const contentState = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );
      return this.setState({ editorState: EditorState.createWithContent(contentState, decorator) });
    }

    // Prevent errors if value is empty
    return this.setState({ editorState: EditorState.createEmpty() });
  };

  render() {
    const { placeholder } = this.context;

    return (
      <div className={this.getClassName()}>
        <WysiwygEditor
          blockStyleFn={getBlockStyle}
          editorState={this.state.editorState}
          onChange={() => {}}
          placeholder={placeholder}
          spellCheck
        />
        <input className={styles.editorInput} value="" tabIndex="-1" />
      </div>
    );
  }
}

PreviewWysiwyg.contextTypes = {
  isFullscreen: PropTypes.bool,
  placeholder: PropTypes.string,
};

PreviewWysiwyg.defaultProps = {
  data: '',
};

PreviewWysiwyg.propTypes = {
  data: PropTypes.string,
};

export default PreviewWysiwyg;