kf-slate-editor/lib/index.js

Another rich text editor using Slate framework with toolbar support

"use strict";

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

var _dec, _class2;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _templateObject = _taggedTemplateLiteral(["\n  ", "\n  background-color: #FFF;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px 1px rgba(0,0,0,0.16);\n  overflow-y: ", ";\n"], ["\n  ", "\n  background-color: #FFF;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px 1px rgba(0,0,0,0.16);\n  overflow-y: ", ";\n"]),
    _templateObject2 = _taggedTemplateLiteral(["\n  padding: 25px;\n  margin-top: ", ";\n"], ["\n  padding: 25px;\n  margin-top: ", ";\n"]),
    _templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  z-index: 10;\n  width: ", "\n  margin-bottom: 30px;\n"], ["\n  ", "\n  z-index: 10;\n  width: ", "\n  margin-bottom: 30px;\n"]);

var _react = require("react");

var React = _interopRequireWildcard(_react);

var _slateReact = require("slate-react");

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _menuToolbar = require("./menuToolbar");

var _menuToolbar2 = _interopRequireDefault(_menuToolbar);

var _slateToolbar = require("slate-toolbar");

var _slateToolbar2 = _interopRequireDefault(_slateToolbar);

var _slateSidebar = require("slate-sidebar");

var _slateSidebar2 = _interopRequireDefault(_slateSidebar);

var _slateMdEditor = require("slate-md-editor");

var _slateConstant = require("@canner/slate-constant");

var _slateIconBlockquote = require("@canner/slate-icon-blockquote");

var _slateIconBlockquote2 = _interopRequireDefault(_slateIconBlockquote);

var _slateIconBold = require("@canner/slate-icon-bold");

var _slateIconBold2 = _interopRequireDefault(_slateIconBold);

var _slateIconCode = require("@canner/slate-icon-code");

var _slateIconCode2 = _interopRequireDefault(_slateIconCode);

var _slateIconClean = require("@canner/slate-icon-clean");

var _slateIconClean2 = _interopRequireDefault(_slateIconClean);

var _slateIconCodeblock = require("@canner/slate-icon-codeblock");

var _slateIconTable = require("@canner/slate-icon-table");

var _slateIconFontbgcolor = require("@canner/slate-icon-fontbgcolor");

var _slateIconFontcolor = require("@canner/slate-icon-fontcolor");

var _slateIconHeader = require("@canner/slate-icon-header");

var _slateIconHr = require("@canner/slate-icon-hr");

var _slateIconHr2 = _interopRequireDefault(_slateIconHr);

var _slateIconItalic = require("@canner/slate-icon-italic");

var _slateIconItalic2 = _interopRequireDefault(_slateIconItalic);

var _slateIconLink = require("@canner/slate-icon-link");

var _slateIconList = require("@canner/slate-icon-list");

var _slateIconStrikethrough = require("@canner/slate-icon-strikethrough");

var _slateIconStrikethrough2 = _interopRequireDefault(_slateIconStrikethrough);

var _slateIconUnderline = require("@canner/slate-icon-underline");

var _slateIconUnderline2 = _interopRequireDefault(_slateIconUnderline);

var _slateIconVideo = require("@canner/slate-icon-video");

var _slateIconShared = require("@canner/slate-icon-shared");

var _slateEditList = require("slate-edit-list");

var _slateEditList2 = _interopRequireDefault(_slateEditList);

var _slateEditBlockquote = require("slate-edit-blockquote");

var _slateEditBlockquote2 = _interopRequireDefault(_slateEditBlockquote);

var _slatePrism = require("slate-prism");

var _slatePrism2 = _interopRequireDefault(_slatePrism);

var _slateEditCode = require("slate-edit-code");

var _slateEditCode2 = _interopRequireDefault(_slateEditCode);

var _slateTrailingBlock = require("slate-trailing-block");

var _slateTrailingBlock2 = _interopRequireDefault(_slateTrailingBlock);

var _terminalIcon = require("./components/terminal/terminalIcon");

var _cloudwareIcon = require("./components/cloudware/cloudwareIcon");

var _imageIcon = require("./components/image/imageIcon");

require("prismjs/themes/prism.css");

var _slateHelperBlockList = require("@canner/slate-helper-block-list");

var _slateHelperBlockQuote = require("@canner/slate-helper-block-quote");

require("github-markdown-css");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

// default value


var plugins = [(0, _slateMdEditor.MarkdownPlugin)(), (0, _slatePrism2.default)({
  onlyIn: function onlyIn(node) {
    return node.type === 'code_block';
  },
  getSyntax: function getSyntax(node) {
    return node.data.get('syntax');
  }
}), (0, _slateEditCode2.default)({
  onlyIn: function onlyIn(node) {
    return node.type === 'code_block';
  }
}), (0, _slateTrailingBlock2.default)(), (0, _slateEditList2.default)(_slateHelperBlockList.DEFAULT), (0, _slateEditBlockquote2.default)(_slateHelperBlockQuote.DEFAULT), (0, _slateIconShared.ParagraphPlugin)(), (0, _slateIconBlockquote.BlockquotePlugin)(), (0, _slateIconBold.BoldPlugin)(), (0, _slateIconCode.CodePlugin)(), (0, _slateIconCodeblock.CodeBlockPlugin)(), (0, _slateIconFontbgcolor.FontBgColorPlugin)({
  backgroundColor: function backgroundColor(mark) {
    return mark.data.get('color').color;
  }
}), (0, _slateIconFontcolor.FontColorPlugin)({
  color: function color(mark) {
    return mark.data.get('color').color;
  }
}), (0, _slateIconItalic.ItalicPlugin)(), (0, _slateIconStrikethrough.StrikeThroughPlugin)(), (0, _slateIconUnderline.UnderlinePlugin)(), (0, _slateIconHeader.HeaderOnePlugin)(), (0, _slateIconHeader.HeaderTwoPlugin)(), (0, _slateIconHeader.HeaderThreePlugin)(), (0, _slateIconTable.TablePlugin)(), (0, _slateIconHr.HrPlugin)(), (0, _slateIconLink.LinkPlugin)(), (0, _slateIconList.ListPlugin)(), (0, _slateIconVideo.VideoPlugin)(), (0, _terminalIcon.TerminalPlugin)(), (0, _cloudwareIcon.CloudwarePlugin)(), (0, _imageIcon.ImagePlugin)()];

var Container = _styledComponents2.default.div(_templateObject, function (props) {
  return props.isFull && "\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    z-index: 1000\n  ";
}, function (props) {
  return props.isFull ? 'scroll' : 'initial';
});

var EditorContainer = _styledComponents2.default.div(_templateObject2, function (props) {
  return props.isFull ? '60px' : '10px';
});

var FixedToolbar = _styledComponents2.default.div(_templateObject3, function (props) {
  return props.isSticky && "\n    position: fixed;\n    top: 10px;\n    padding-right: 40px;\n  ";
}, function (props) {
  return props.isSticky ? '100%' : '100%';
});

var toolbarOptions = {
  icons: [_slateIconBold2.default, _slateIconItalic2.default, _slateIconStrikethrough2.default, _slateIconUnderline2.default, _slateIconCode2.default, _slateIconClean2.default],
  position: 'top',
  disabledTypes: [_slateConstant.BLOCKS.CODE, _slateConstant.BLOCKS.CODE_LINE, _slateConstant.BLOCKS.HEADING_1, _slateConstant.BLOCKS.HEADING_2, _slateConstant.BLOCKS.HEADING_3, _slateConstant.BLOCKS.HEADING_4, _slateConstant.BLOCKS.HEADING_5, _slateConstant.BLOCKS.HEADING_6]
};

var sidebarOptions = {
  icons: [{
    icon: _slateIconList.OlList,
    title: "Order List"
  }, {
    icon: _slateIconList.UlList,
    title: "Unorder List"
  }, {
    icon: _slateIconHeader.Header1,
    title: "Header One"
  }, {
    icon: _slateIconHeader.Header2,
    title: "Header Two"
  }, {
    icon: _slateIconHr2.default,
    title: "Ruler"
  }, {
    icon: _slateIconBlockquote2.default,
    title: "Blockquote"
  }]
};

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

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

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

    _this.handleScroll = function () {
      if (_this.props.readOnly) {
        return;
      }
      var sticky = _this.fixedToolbarRef.current.offsetTop;
      var width = _this.fixedToolbarRef.current.parentElement.offsetWidth + 'px';
      if (window.pageYOffset >= sticky) {
        _this.setState({ isSticky: true });
        _this.fixedToolbarRef.current.style.width = width;
      } else {
        _this.setState({ isSticky: false });
      }
    };

    _this.goFull = function () {
      _this.setState({ isFull: !_this.state.isFull });
    };

    _this.fixedToolbarRef = React.createRef();
    _this.state = {
      isFull: false,
      isSticky: false
    };
    return _this;
  }

  _createClass(EditorComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('scroll', this.handleScroll);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('scroll', this.handleScroll);
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          value = _props.value,
          onChange = _props.onChange,
          serviceConfig = _props.serviceConfig,
          readOnly = _props.readOnly,
          rest = _objectWithoutProperties(_props, ["value", "onChange", "serviceConfig", "readOnly"]);

      var _state = this.state,
          isFull = _state.isFull,
          isSticky = _state.isSticky;

      return React.createElement(
        Container,
        _extends({ isFull: isFull, isSticky: isSticky, readOnly: readOnly }, rest),
        readOnly ? React.createElement("div", null) : React.createElement(
          "div",
          { ref: this.fixedToolbarRef },
          React.createElement(
            FixedToolbar,
            { isSticky: isSticky },
            React.createElement(_menuToolbar2.default, {
              value: value,
              serviceConfig: serviceConfig,
              onChange: onChange
            })
          )
        ),
        React.createElement(
          EditorContainer,
          { isFull: isFull, isSticky: isSticky, readOnly: readOnly },
          React.createElement(CannerEditor, { value: value, onChange: onChange, readOnly: readOnly })
        )
      );
    }
  }]);

  return EditorComponent;
}(React.Component);

exports.default = EditorComponent;

//@sidebar(sidebarOptions)
var CannerEditor = (_dec = (0, _slateToolbar2.default)(toolbarOptions), _dec(_class2 = function (_React$Component2) {
  _inherits(CannerEditor, _React$Component2);

  function CannerEditor() {
    _classCallCheck(this, CannerEditor);

    return _possibleConstructorReturn(this, (CannerEditor.__proto__ || Object.getPrototypeOf(CannerEditor)).apply(this, arguments));
  }

  _createClass(CannerEditor, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      if (this.props.value === nextProps.value) return false;
      return true;
    }
  }, {
    key: "render",
    value: function render() {
      var _props2 = this.props,
          value = _props2.value,
          onChange = _props2.onChange;

      return React.createElement(_slateReact.Editor, {
        className: "markdown-body",
        readOnly: this.props.readOnly,
        value: value,
        onChange: onChange,
        plugins: plugins
      });
    }
  }]);

  return CannerEditor;
}(React.Component)) || _class2);