import React, { useState } from 'react';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { _ as _defineProperty } from '../defineProperty-18999f8e.js';
import { c as classnames } from '../index-e3cf212a.js';
import { _ as _slicedToArray } from '../slicedToArray-4cd9e6d3.js';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/emoticon.css';
import Emoticon, { defaultEmoticons } from 'braft-extensions/dist/emoticon';
import MaxLength from '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(css);

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

  var value = _ref.value,
      onChange = _ref.onChange,
      controls = _ref.controls,
      _ref$contentStyle = _ref.contentStyle,
      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
      FloatControls = _ref.FloatControls,
      draftProps = _ref.draftProps,
      placeholder = _ref.placeholder,
      blockRenderMap = _ref.blockRenderMap,
      blockRendererFn = _ref.blockRendererFn,
      converts = _ref.converts;
  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 = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      focusState = _useState2[0],
      setFocusState = _useState2[1];

  return React.createElement("div", {
    className: styles.baseWrapper
  }, React.createElement(BraftEditor, Object.assign({
    value: value,
    onChange: onChange,
    controls: options.controls,
    controlBarClassName: classnames(styles.controlBar, _defineProperty({}, styles.focus, focusState)),
    controlBarStyle: options.showControlsBar ? {} : {
      display: "none"
    },
    contentClassName: classnames(styles.editorContent, (_classnames2 = {}, _defineProperty(_classnames2, styles.focus, focusState), _defineProperty(_classnames2, styles.hasFloatControls, options.showFloatControls), _classnames2)),
    contentStyle: 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
        };
      }
    }
  }, {
    blockRenderMap: blockRenderMap,
    blockRendererFn: blockRendererFn,
    converts: converts,
    placeholder: placeholder,
    draftProps: draftProps
  })), options.showFloatControls ? React.createElement("div", {
    className: classnames(styles.floatControls)
  }, React.createElement(FloatControls, {
    editorState: value,
    setEditorState: onChange
  })) : null);
};

export default BarftEditorPage;
export { BarftEditorPage };
//# sourceMappingURL=index.js.map