kf-slate-editor/lib/menuToolbar.js

Another rich text editor using Slate framework with toolbar support

'use strict';

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

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  display: inline-block;\n  background: transparent;\n  color: #222;\n  cursor: pointer;\n  -webkit-transition: background 0.2s ease 0s;\n  border-bottom: 0.5px solid #ebebeb;\n\n  &:hover {\n    background: #ebebeb;\n  }\n'], ['\n  display: inline-block;\n  background: transparent;\n  color: #222;\n  cursor: pointer;\n  -webkit-transition: background 0.2s ease 0s;\n  border-bottom: 0.5px solid #ebebeb;\n\n  &:hover {\n    background: #ebebeb;\n  }\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  height: 35px;\n  width: 1px;\n  margin: 2px 0;\n  background: #ebebeb;\n  display: inline-block;\n  vertical-align: top;\n'], ['\n  height: 35px;\n  width: 1px;\n  margin: 2px 0;\n  background: #ebebeb;\n  display: inline-block;\n  vertical-align: top;\n']);

var _react = require('react');

var React = _interopRequireWildcard(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _item = require('./components/item');

var _fullScreen = require('./components/fullScreen');

var _fullScreen2 = _interopRequireDefault(_fullScreen);

var _slateIconAlign = require('@canner/slate-icon-align');

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

var _slateIconBlockquote2 = _interopRequireDefault(_slateIconBlockquote);

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

var _slateIconTable2 = _interopRequireDefault(_slateIconTable);

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

var _slateIconCodeblock2 = _interopRequireDefault(_slateIconCodeblock);

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

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

var _slateIconHr2 = _interopRequireDefault(_slateIconHr);

var _slateIconImage = require('@canner/slate-icon-image');

var _slateIconImage2 = _interopRequireDefault(_slateIconImage);

var _slateIconIndent = require('@canner/slate-icon-indent');

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

var _slateIconLink2 = _interopRequireDefault(_slateIconLink);

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

var _slateIconUndo = require('@canner/slate-icon-undo');

var _slateIconUndo2 = _interopRequireDefault(_slateIconUndo);

var _slateIconRedo = require('@canner/slate-icon-redo');

var _slateIconRedo2 = _interopRequireDefault(_slateIconRedo);

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

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

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

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

var IconContainer = _styledComponents2.default.div(_templateObject);

var Seperator = _styledComponents2.default.div(_templateObject2);

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

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

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

  _createClass(Toolbar, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          value = _props.value,
          onChange = _props.onChange,
          goFull = _props.goFull,
          isFull = _props.isFull,
          serviceConfig = _props.serviceConfig;


      var options = [_slateIconUndo2.default, _slateIconRedo2.default, 'seperator', _slateIconHeader.Header1, _slateIconHeader.Header2, _slateIconHeader.Header3, _slateIconBlockquote2.default, _slateIconHr2.default, 'seperator', _slateIconAlign.AlignLeft, _slateIconAlign.AlignCenter, _slateIconAlign.AlignRight, _slateIconIndent.Indent, _slateIconIndent.Outdent, 'seperator', _slateIconList.OlList, _slateIconList.UlList, 'seperator', _slateIconLink2.default, _slateIconCodeblock2.default, _slateIconTable2.default, 'ImageIcon', 'seperator', 'TerminalIcon', 'CloudwareIcon'];
      /*
        Video,
        FontColor,
        FontBgColor,
        'seperator',*/

      return React.createElement(
        _item.Container,
        null,
        options.map(function (Type, i) {
          if (Type === 'seperator') return React.createElement(Seperator, { key: i });
          if (Type === 'fullScreen') {
            return React.createElement(
              IconContainer,
              {
                key: i },
              React.createElement(_fullScreen2.default, { className: '__canner-editor_topToolbarItem', goFull: goFull, isFull: isFull })
            );
          }
          if (Type === 'TerminalIcon') {
            return React.createElement(
              IconContainer,
              {
                key: i },
              React.createElement(_terminalIcon.TerminalIcon, {
                className: '__canner-editor_topToolbarItem',
                change: value.change(),
                onChange: onChange
              })
            );
          }
          if (Type === 'CloudwareIcon') {
            return React.createElement(
              IconContainer,
              {
                key: i },
              React.createElement(_cloudwareIcon.CloudwareIcon, {
                className: '__canner-editor_topToolbarItem',
                change: value.change(),
                onChange: onChange
              })
            );
          }
          if (Type === 'ImageIcon') {
            return React.createElement(
              IconContainer,
              {
                key: i },
              React.createElement(_imageIcon.ImageIcon, {
                className: '__canner-editor_topToolbarItem',
                change: value.change(),
                onChange: onChange
              })
            );
          }

          // special plugin
          if (Type === 'image') {
            Type = _slateIconImage2.default;
          }

          return React.createElement(
            IconContainer,
            {
              key: i },
            React.createElement(Type, {
              change: value.change(),
              onChange: onChange,
              className: '__canner-editor_topToolbarItem',
              disableClassName: '__canner-editor_topToolbarItemDisabled',
              strokeClassName: 'qlStroke',
              serviceConfig: Type === 'image' && serviceConfig,
              strokeMitterClassName: 'qlStrokeMitter',
              fillClassName: 'qlFill',
              evenClassName: 'qlEven',
              colorLabelClassName: 'qlColorLabel',
              thinClassName: 'qlThin',
              activeStrokeMitterClassName: 'qlStrokeMitterActive',
              activeClassName: '__canner-editor_topToolbarItem __canner-editor_topToolbarItemActive',
              activeStrokeClassName: 'qlStrokeActive',
              activeFillClassName: 'qlFillActive',
              activeThinClassName: 'qlThinActive',
              activeEvenClassName: 'qlEvenActive'
            })
          );
        })
      );
    }
  }]);

  return Toolbar;
}(React.Component);

exports.default = Toolbar;