uxcore-mention/build/components/TinymceMention.js

Mention anywhere with this component

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Panel = require('./Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _baseEditor = require('../editor-components/baseEditor');

var _baseEditor2 = _interopRequireDefault(_baseEditor);

var _keycode = require('../utils/keycode');

var _util = require('../utils/util');

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return 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) : _defaults(subClass, superClass); }

var tinymce = global.tinymce;

function pluginInitialized() {
  var ed = tinymce.activeEditor;
  var plugins = ed && ed.plugins;
  var mention = plugins && plugins.mention;
  return !!mention;
}

/**
 * @i18n {zh-CN} 用于tinymce的mention
 * @i18n {en-US} Mention for Tinymce
 */

var TinymceMention = function (_BaseEditor) {
  _inherits(TinymceMention, _BaseEditor);

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

    var _this = _possibleConstructorReturn(this, _BaseEditor.call(this, props));

    _this.state = {
      mentionList: [],
      cursorPosition: {
        x: 0,
        y: 0
      },
      panelVisible: false,
      panelIdx: 0
    };
    return _this;
  }

  TinymceMention.prototype.componentWillMount = function componentWillMount() {
    var _this2 = this;

    if (!pluginInitialized()) {
      tinymce.PluginManager.add('mention', function (activeEditor) {
        _this2.editor = activeEditor;
        activeEditor.on('keydown', function (e) {
          _this2.onKeydown(e);
        });
        activeEditor.on('keyup', function (e) {
          _this2.onKeyup(e);
          _this2.onPanelKeyup(e);
        });
      });
    }
  };

  TinymceMention.prototype.componentDidMount = function componentDidMount() {
    this.STORE = {};
    var container = this._target.parentNode;
    var mceNode = document.createElement('div');
    this.mceNode = mceNode;
    (0, _reactDom.render)(_react2["default"].createElement(
      'div',
      null,
      _react2["default"].Children.map(this.props.children, function (Comp) {
        var cp = void 0;
        if (Comp.type.name === 'Tinymce' || Comp.type.displayName === 'Tinymce') {
          cp = {
            config: {
              plugins: ['mention']
            }
          };
        }
        return _react2["default"].cloneElement(Comp, cp);
      })
    ), mceNode);
    container.insertBefore(mceNode, this._target);
  };

  TinymceMention.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    if (prevState.mentionList.length !== this.state.mentionList.length) {
      this.setState({
        panelVisible: this.state.mentionList.length > 0
      });
    }
    if (!prevState.panelVisible && this.state.panelVisible) {
      this.setState({
        panelIdx: 0
      });
    }
  };

  TinymceMention.prototype.componentWillUnmount = function componentWillUnmount() {
    var container = this._target.parentNode;
    container.removeChild(this.mceNode);
  };

  TinymceMention.prototype.onKeydown = function onKeydown(e) {
    var panelVisible = this.state.panelVisible;

    switch (e.keyCode) {
      case _keycode.KEYCODE.UP:
      case _keycode.KEYCODE.DOWN:
        if (panelVisible) {
          e.preventDefault();
        }
        break;
      case _keycode.KEYCODE.ENTER:
        if (panelVisible) {
          e.preventDefault();
        }
        break;
      default:
        break;
    }
  };

  TinymceMention.prototype.onKeyup = function onKeyup(e) {
    var panelVisible = this.state.panelVisible;

    switch (e.keyCode) {
      case _keycode.KEYCODE.UP:
      case _keycode.KEYCODE.DOWN:
        if (panelVisible) {
          e.preventDefault();
        }
        break;
      case _keycode.KEYCODE.ENTER:
        break;
      default:
        this.handleDefaultKeyup();
        break;
    }
  };

  TinymceMention.prototype.handleDefaultKeyup = function handleDefaultKeyup() {
    var delimiter = this.props.delimiter;

    var sel = this.editor.selection;
    var range = sel.getRng(true);
    if (range.commonAncestorContainer.nodeType === 3) {
      var cloneRange = range.cloneRange();
      cloneRange.setStart(range.commonAncestorContainer, 0);
      var originStr = cloneRange.toString();
      var str = (0, _util.parseStrByDelimiter)(originStr, delimiter);
      this.runMatcher(str);
      if (str !== false) {
        if ('createRange' in document) {
          range.setStart(range.commonAncestorContainer, originStr.length - str.length - 1);
          var rect = range.getBoundingClientRect();
          this.setPanelPos({
            left: rect.right,
            top: rect.bottom
          });
          sel.setRng(range);
          // save range position
          this.STORE.bookmark = sel.getBookmark(3);
        } else {
          // IE8
          var internalRange = sel.getRng();
          this.setPanelPos({
            left: internalRange.boundingLeft,
            top: internalRange.boundingTop
          });
          this.STORE.bookmark = str.length + 1;
        }
        sel.collapse();
      }
    }
  };

  TinymceMention.prototype.insert = function insert(mentionContent) {
    var insertMode = this.props.insertMode;

    switch (insertMode) {
      case 'TEXT_NODE':
        this.insertWithTextNode(mentionContent);
        break;
      case 'ELEMENT_NODE':
      default:
        this.insertWithElementNode(mentionContent);
        break;
    }
  };

  TinymceMention.prototype.insertWithElementNode = function insertWithElementNode(mentionContent) {
    var sel = this.editor.selection;
    if (this.STORE.bookmark) {
      sel.moveToBookmark(this.STORE.bookmark);
    }
    var range = sel.getRng(true);
    var mentionNode = document.createElement('input');
    mentionNode.setAttribute('type', 'button');
    mentionNode.setAttribute('tabindex', '-1');
    mentionNode.className = this.props.prefixCls + '-node';
    mentionNode.value = mentionContent;
    range.deleteContents();
    sel.setNode(mentionNode);
    range.collapse();
    this.editor.focus();
  };

  TinymceMention.prototype.insertWithTextNode = function insertWithTextNode(mentionContent) {
    var sel = this.editor.selection;
    if (this.STORE.bookmark) {
      if ('createRange' in document) {
        sel.moveToBookmark(this.STORE.bookmark);
        var range = sel.getRng(true);
        range.deleteContents();
        sel.setContent(mentionContent);
        range.collapse();
        this.editor.focus();
      } else {
        var internalRange = sel.getRng();
        internalRange.moveStart('character', -this.STORE.bookmark);
        internalRange.pasteHTML(mentionContent);
      }
    }
  };

  TinymceMention.prototype.setPanelPos = function setPanelPos(pos) {
    var editorOffset = this.editor.contentAreaContainer.getBoundingClientRect();
    // const offset = getScrollOffset();
    var position = {
      x: pos.left + editorOffset.left,
      y: pos.top + editorOffset.top
    };
    this.setState({
      cursorPosition: position
    });
  };

  TinymceMention.prototype.selectItem = function selectItem(data) {
    this.insertMentionData(data);
    this.setState({
      mentionList: []
    });
  };

  TinymceMention.prototype.getValue = function getValue() {
    return this.editor.getContent();
  };

  TinymceMention.prototype.render = function render() {
    var _this3 = this;

    var panelPosition = {
      left: this.state.cursorPosition.x,
      top: this.state.cursorPosition.y
    };
    var _props = this.props,
        prefixCls = _props.prefixCls,
        panelFormatter = _props.panelFormatter;

    return _react2["default"].createElement(
      'div',
      { ref: function ref(el) {
          return _this3._target = el;
        } },
      _react2["default"].createElement(_Panel2["default"], {
        prefixCls: prefixCls,
        visible: this.state.panelVisible,
        idx: this.state.panelIdx,
        list: this.state.mentionList,
        onSelect: this.selectItem.bind(this),
        formatter: panelFormatter,
        style: panelPosition
      })
    );
  };

  return TinymceMention;
}(_baseEditor2["default"]);

TinymceMention.displayName = 'TinymceMention';
TinymceMention.propTypes = {
  /**
   * @i18n {zh-CN} class前缀
   * @i18n {en-US} class prefix
   */
  prefixCls: _propTypes2["default"].string,
  /**
   * @i18n {zh-CN} 定义数据源
   * @i18n {en-US} data source for mention content
   */
  source: _propTypes2["default"].oneOfType([_propTypes2["default"].array, _propTypes2["default"].func]),
  /**
   * @i18n {zh-CN} 数据源查询延时
   * @i18n {en-US} debounce of the request to data source
   */
  delay: _propTypes2["default"].number,
  /**
   * @i18n {zh-CN} 匹配字符区间
   * @i18n {en-US} only match the string after delimiter which the length in this range
   */
  matchRange: _propTypes2["default"].arrayOf(_propTypes2["default"].number),
  /**
   * @i18n {zh-CN} 数据源格式化匹配
   * @i18n {en-US} format the data form source
   */
  formatter: _propTypes2["default"].func,
  /**
   * @i18n {zh-CN} 自定义插入的mention内容
   * @i18n {en-US} customize the insert content with this function | function
   */
  mentionFormatter: _propTypes2["default"].func,
  /**
   * @i18n {zh-CN} 自定义选择列表
   * @i18n {en-US} customize the panel display
   */
  panelFormatter: _propTypes2["default"].func,
  /**
   * @i18n {zh-CN} 发生变化后的触发
   * @i18n {en-US} trigger when editor content change
   * @param {data} xxxxxx
   */
  onChange: _propTypes2["default"].func,
  /**
   * @i18n {zh-CN} 添加mention后触发
   * @i18n {en-US} Callback invoked when a mention has been added
   */
  onAdd: _propTypes2["default"].func,
  /**
   * @i18n {zh-CN} `ELEMENT_NODE` 插入button, `TEXT_NODE` 插入纯字符串
   * @i18n {en-US} `ELEMENT_NODE` will insert mention content with a button, `TEXT_NODE` will insert with a text node
   */
  insertMode: _propTypes2["default"].oneOf(['ELEMENT_NODE', 'TEXT_NODE'])
};
TinymceMention.defaultProps = {
  prefixCls: 'kuma-mention',
  source: [],
  delay: 100,
  matchRange: [2, 8],
  formatter: function formatter(data) {
    return data;
  },
  mentionFormatter: function mentionFormatter(data) {
    return '@' + data.text;
  },
  panelFormatter: function panelFormatter(data) {
    return '' + data.text;
  },
  onChange: function onChange() {},
  onAdd: function onAdd() {},
  insertMode: 'ELEMENT_NODE'
};
exports["default"] = TinymceMention;
module.exports = exports['default'];