octopus-editor/lib/text/CKEditor.js

octopusjs reactjs editor control

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactDom = require("react-dom");

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var loadScript = require("load-script");
var defaultScriptUrl = "https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js";

var CKEditorContainer = function (_React$Component) {
  _inherits(CKEditorContainer, _React$Component);

  function CKEditorContainer(props) {
    _classCallCheck(this, CKEditorContainer);

    //Bindings
    var _this = _possibleConstructorReturn(this, (CKEditorContainer.__proto__ || Object.getPrototypeOf(CKEditorContainer)).call(this, props));

    _this.onLoad = _this.onLoad.bind(_this);

    //State initialization
    _this.state = {
      isScriptLoaded: props.isScriptLoaded
    };
    return _this;
  }

  //load ckeditor script as soon as component mounts if not already loaded


  _createClass(CKEditorContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (!this.state.isScriptLoaded) {
        loadScript(this.props.scriptUrl, this.onLoad);
      } else {
        this.onLoad();
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(props) {
      var editor = this.editorInstance;
      if (editor && editor.getData() !== props.content) {
        editor.setData(props.content);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.unmounting = true;
    }
  }, {
    key: "onLoad",
    value: function onLoad() {
      if (this.unmounting) return;

      this.setState({
        isScriptLoaded: true
      });

      if (!window.CKEDITOR) {
        console.error("CKEditor not found");
        return;
      }

      this.editorInstance = window.CKEDITOR.appendTo(_reactDom2.default.findDOMNode(this), this.props.config, this.props.content);

      //Register listener for custom events if any
      for (var event in this.props.events) {
        var eventHandler = this.props.events[event];

        this.editorInstance.on(event, eventHandler);
      }
    }
  }, {
    key: "render",
    value: function render() {
      return _react2.default.createElement("div", { className: this.props.activeClass });
    }
  }]);

  return CKEditorContainer;
}(_react2.default.Component);

CKEditorContainer.defaultProps = {
  content: "",
  config: {},
  isScriptLoaded: false,
  scriptUrl: defaultScriptUrl,
  activeClass: "",
  events: {}
};

CKEditorContainer.propTypes = {
  content: _propTypes2.default.any,
  config: _propTypes2.default.object,
  isScriptLoaded: _propTypes2.default.bool,
  scriptUrl: _propTypes2.default.string,
  activeClass: _propTypes2.default.string,
  events: _propTypes2.default.object
};

var CKEditor = function CKEditor(_ref) {
  var defaultValue = _ref.defaultValue,
      onChange = _ref.onChange;

  var onChangeHandle = function onChangeHandle(e) {
    if (onChange != null) {
      var content = e.editor.getData();
      onChange(content);
    }
  };

  return _react2.default.createElement(CKEditorContainer, {
    activeClass: "ck-editor",
    content: defaultValue,
    events: {
      change: onChangeHandle
    }
  });
};

CKEditor.prototype = {
  defaultValue: _propTypes2.default.string,
  onChange: function onChange(content) {
    return _propTypes2.default.any;
  }
};

exports.default = CKEditor;