rich-react-editor/build/App.js

react editor with support of image and multi languages

import _Set from "babel-runtime/core-js/set";
import React, { Component } from "react";
import ReactEditor from "./ReactEditor";
import PropTypes from "prop-types";
import "font-awesome/css/font-awesome.min.css";
// import "antd/dist/antd.css";
import "../public/App.css";
import htmlToText from "html-to-text";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorValue: "",
      stageEditorValue: ""
    };
    this.context = null;
    this.name = "";
    this.handleEditorValueChange = this.handleEditorValueChange.bind(this);
    this.handleLangChange = this.handleLangChange.bind(this);
    this.handleImageInsert = this.handleImageInsert.bind(this);
    this.ImageUploader = this.ImageUploader.bind(this);
  }

  ImageUploader(context) {
    let ui = window.$.summernote.ui;
    // create button
    this.context = context;
    let that = this;
    let button = ui.button({
      contents: '<i class="fa fa-picture-o"/>',
      tooltip: "Insert Image",
      click: function () {
        // invoke insertText method with 'hello' on editor module.
        window.$(`#${that.name}-rich-react-editor`).summernote("saveRange");
        window.$(`.${that.name}-imageModel`).modal("show");
      }
    });
    return button.render(); // return button as jquery object
  }

  componentDidMount() {
    const element = document.getElementsByClassName("note-editable")[0];
    const spaces = new _Set([0]);
    window.prevString = "";
    window.currentString = "";
    this.name = this.props.name;
    this.setState({
      editorValue: this.props.value || ""
    });
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.language && nextProps.language !== this.props.language) {
      this.handleLangChange(nextProps.language);
    }
  }

  componentDidUpdate(prevProps) {
    const { insertImage } = this.props;
    if (insertImage !== "" && insertImage && prevProps.insertImage !== insertImage) {
      this.handleImageInsert(insertImage);
    }
  }

  handleEditorValueChange(editorValue) {
    window.$(".note-editable a").each(function () {
      this.onclick = function () {
        let win = window.open(this.href, "_blank");
        win.focus();
      };
    });

    if (this.props.onCodeChange) {
      this.props.onCodeChange(editorValue);
    }
    if (this.props.onTextChange) {
      this.props.onTextChange(htmlToText.fromString(editorValue));
    }

    this.setState({ editorValue });
  }

  handleLangChange(lang) {
    window.lang = lang;
    this.setState({ lang });
  }

  handleImageInsert(url) {
    window.$(`.${this.props.name}-imageModel`).modal("hide");
    window.$(`#${this.props.name}-rich-react-editor`).summernote("restoreRange");
    window.$(`#${this.props.name}-rich-react-editor`).summernote("insertImage", url);
  }

  render() {
    const {
      ImageModel,
      height,
      value,
      placeholder,
      mode,
      fullscreen,
      className = "",
      name,
      expandable,
      showLoading = false,
      customizedToolBar
    } = this.props;

    const toolBar = [["view", [mode === "full" ? "codeview" : "", fullscreen ? "fullscreen" : ""]]];

    switch (mode) {
      case "text-only":
        break;
      case "onlyLanguage":
        break;
      case "simple":
        toolBar.push(["style", ["undo", "redo", "style", "fontsize"]]);
        toolBar.push(["font", ["bold", "italic", "clear", "pre"]]);
        toolBar.push(["para", ["ul", "ol", "paragraph"]]);
        break;
      case "full":
        toolBar.push(["style", ["undo", "redo", "style", "fontsize"]]);
        toolBar.push(["font", ["bold", "italic", "clear", "pre"]]);
        toolBar.push(["para", ["ul", "ol", "paragraph"]]);
        toolBar.push(["color", ["color"]]);
        toolBar.push(["insert", ["link", ImageModel ? "customImage" : ""]]);
        break;
      default:
        return false;
    }

    return React.createElement(
      "div",
      { className: `React-editor-container ${className} ${mode}` },
      React.createElement(ReactEditor, {
        value: value,
        options: {
          height: expandable ? "auto" : height,
          fontNames: ["Arial", "Arial Black", "Comic Sans MS", "Courier New"],
          placeholder: placeholder,
          dialogsFade: true,
          disableResizeEditor: true,
          toolbar: customizedToolBar || toolBar,
          buttons: {
            customImage: ImageModel ? this.ImageUploader : null
          }
        },
        onChange: this.handleEditorValueChange,
        name: name,
        showLoading: showLoading
      }),
      React.createElement(
        "div",
        {
          id: `${this.props.name}-uploadModal`,
          className: "modal fade" + ` ${this.props.name}-imageModel`,
          role: "dialog"
        },
        React.createElement(
          "div",
          { className: "modal-dialog" },
          React.createElement(
            "div",
            { className: "modal-content" },
            ImageModel ? ImageModel(this.handleImageInsert) : null
          )
        )
      )
    );
  }
}

App.propTypes = {
  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  ImageModel: PropTypes.node,
  insertImage: PropTypes.string,
  className: PropTypes.string,
  placeholder: PropTypes.string,
  onTextChange: PropTypes.func,
  onCodeChange: PropTypes.func,
  mode: PropTypes.oneOf(["text-only", "simple", "full", "onlyLanguage"])
};

App.defaultProps = {
  height: 500,
  insertImage: "",
  showAll: false,
  className: "",
  mode: "text-only",
  placeholder: ""
};

export default App;