ptb-fe/components/Extras/summernote.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';

export class SummerNote extends Component {
  static propTypes = {
    options: PropTypes.object,
    onChange: PropTypes.func,
    value: PropTypes.string,
  };

  static defaultProps = {
    options: {},
    onChange: () => {},
    value: '',
  };

  componentDidMount() {
    require('react-summernote');
    require('react-summernote/dist/react-summernote.css');
    require('bootstrap/dist/js/bootstrap');

    $(this.element).summernote({
      ...this.props.options,
      callbacks: {
        onChange: this.handleChange,
      },
    });

    $(this.element).summernote('code', this.props.value);
  }

  componentDidUpdate(prevProps) {
    if (this.props.value !== prevProps.value) {
      $(this.element).summernote('code', this.props.value);
    }
  }

  componentWillUnmount() {
    $(this.element).summernote('destroy');
  }

  handleChange = (value) => {
    this.props.onChange(value);
  };

  setRef = (node) => this.element = node;

  render() {
    return (
      <div ref={this.setRef}></div>
    );
  }
}

export default SummerNote;