bilingo-ui/lib/BraftEditor/index.js

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styleInject_es = require('../style-inject.es-dcee06b6.js');
var defineProperty = require('../defineProperty-ba7cd53d.js');
var index = require('../index-4c407188.js');
var slicedToArray = require('../slicedToArray-172f4624.js');
var BraftEditor = _interopDefault(require('braft-editor'));
require('braft-editor/dist/index.css');
require('braft-extensions/dist/emoticon.css');
var Emoticon = require('braft-extensions/dist/emoticon');
var Emoticon__default = _interopDefault(Emoticon);
var MaxLength = _interopDefault(require('braft-extensions/dist/max-length'));

var css = ".index_baseWrapper__1_-58 {\n  position: relative;\n}\n.index_baseWrapper__1_-58 .bf-container {\n  display: flex;\n  flex-direction: column;\n}\n.index_baseWrapper__1_-58 .bf-container .index_controlBar__3SzSH {\n  box-shadow: none;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: auto;\n  transition: border-color 0.3s;\n}\n.index_baseWrapper__1_-58 .bf-container .index_editorContent__2UOaX.index_focus__puDJA {\n  border-color: #1790ff;\n}\n.index_baseWrapper__1_-58 .index_floatControls__2hVPf {\n  position: absolute;\n  right: 15px;\n  bottom: 15px;\n  display: flex;\n  z-index: 2;\n}\n";
var styles = {
  "baseWrapper": "index_baseWrapper__1_-58",
  "controlBar": "index_controlBar__3SzSH",
  "editorContent": "index_editorContent__2UOaX",
  "focus": "index_focus__puDJA",
  "floatControls": "index_floatControls__2hVPf"
};
styleInject_es.styleInject(css);

var lengthOptions = {
  defaultValue: 100
};
BraftEditor.use(MaxLength(lengthOptions));
var emoticons = Emoticon.defaultEmoticons.map(function (item) {
  return require("braft-extensions/dist/assets/".concat(item));
});
var emotionOptions = {
  emoticons: emoticons,
  closeOnBlur: true,
  closeOnSelect: false
};
BraftEditor.use(Emoticon__default(emotionOptions));
var BarftEditorPage = function BarftEditorPage(_ref) {
  var _classnames2;

  var value = _ref.value,
      onChange = _ref.onChange,
      controls = _ref.controls,
      FloatControls = _ref.FloatControls;
  var optionsControls = controls ? controls : ["bold", "italic", "underline", "separator", "link", "emoji", "separator", "media"];
  var options = {
    controls: optionsControls,
    showControlsBar: optionsControls && optionsControls.length > 0 && !FloatControls,
    showFloatControls: FloatControls
  };

  var _useState = React.useState(false),
      _useState2 = slicedToArray._slicedToArray(_useState, 2),
      focusState = _useState2[0],
      setFocusState = _useState2[1];

  return React__default.createElement("div", {
    className: styles.baseWrapper
  }, React__default.createElement(BraftEditor, {
    value: value,
    onChange: onChange,
    controls: options.controls,
    controlBarClassName: index.classnames(styles.controlBar, defineProperty._defineProperty({}, styles.focus, focusState)),
    controlBarStyle: options.showControlsBar ? {} : {
      display: "none"
    },
    contentClassName: index.classnames(styles.editorContent, (_classnames2 = {}, defineProperty._defineProperty(_classnames2, styles.focus, focusState), defineProperty._defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
    contentStyle: {},
    onFocus: function onFocus() {
      return setFocusState(true);
    },
    onBlur: function onBlur() {
      return setFocusState(false);
    },
    hooks: {
      "toggle-link": function toggleLink(_ref2) {
        var href = _ref2.href,
            target = _ref2.target;
        href = href.indexOf("http") === 0 ? href : "http://".concat(href);
        return {
          href: href,
          target: target
        };
      }
    }
  }), options.showFloatControls ? React__default.createElement("div", {
    className: index.classnames(styles.floatControls)
  }, React__default.createElement(FloatControls, {
    editorState: value,
    setEditorState: onChange
  })) : null);
};

exports.BarftEditorPage = BarftEditorPage;
exports.default = BarftEditorPage;
//# sourceMappingURL=index.js.map