122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
'use strict';
|
|
|
|
exports.__esModule = true;
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
exports['default'] = createImmutableMention;
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _draftJs = require('draft-js');
|
|
|
|
var _Suggestions2 = require('../component/Suggestions.react');
|
|
|
|
var _Suggestions3 = _interopRequireDefault(_Suggestions2);
|
|
|
|
var _mentionStore = require('../model/mentionStore');
|
|
|
|
var _mentionStore2 = _interopRequireDefault(_mentionStore);
|
|
|
|
var _exportContent = require('../utils/exportContent');
|
|
|
|
var _exportContent2 = _interopRequireDefault(_exportContent);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function noop() {}
|
|
|
|
var MentionContentComponent = function MentionContentComponent(props) {
|
|
var entityKey = props.entityKey,
|
|
tag = props.tag,
|
|
callbacks = props.callbacks;
|
|
|
|
var contentState = callbacks.getEditorState().getCurrentContent();
|
|
var data = contentState.getEntity(entityKey).getData();
|
|
return _react2['default'].createElement(tag, (0, _extends3['default'])({}, props, { data: data }));
|
|
};
|
|
|
|
function mentionContentStrategy(contentBlock, callback, contentState) {
|
|
contentBlock.findEntityRanges(function (character) {
|
|
var entityKey = character.getEntity();
|
|
return entityKey && contentState.getEntity(entityKey).getType() === 'mention';
|
|
}, callback);
|
|
}
|
|
|
|
function mentionTriggerStrategy(contentBlock, callback, contentState) {
|
|
contentBlock.findEntityRanges(function (character) {
|
|
var entityKey = character.getEntity();
|
|
return entityKey && contentState.getEntity(entityKey).getType() === 'trigger';
|
|
}, callback);
|
|
}
|
|
|
|
function createImmutableMention() {
|
|
var callbacks = {
|
|
onChange: noop,
|
|
onUpArrow: noop,
|
|
onDownArrow: noop,
|
|
getEditorState: noop,
|
|
setEditorState: noop,
|
|
handleReturn: noop,
|
|
onBlur: noop
|
|
};
|
|
|
|
function _onChange(editorState) {
|
|
var selectionState = editorState.getSelection();
|
|
var currentContent = editorState.getCurrentContent();
|
|
var anchorKey = selectionState.getAnchorKey();
|
|
var currentContentBlock = currentContent.getBlockForKey(anchorKey);
|
|
|
|
if (selectionState.isCollapsed()) {
|
|
currentContent.createEntity('trigger', 'MUTABLE');
|
|
|
|
var end = selectionState.getEndOffset();
|
|
var start = end - 1;
|
|
var selectedText = currentContentBlock.getText().slice(start, end);
|
|
if (selectedText === '@') {
|
|
var updatedContent = _draftJs.Modifier.replaceText(currentContent, selectionState.merge({
|
|
anchorOffset: start,
|
|
focusOffset: end
|
|
}), '@', null, currentContent.getLastCreatedEntityKey());
|
|
return _draftJs.EditorState.push(editorState, updatedContent, 'insert-mention');
|
|
}
|
|
}
|
|
|
|
return editorState;
|
|
}
|
|
|
|
var componentProps = {
|
|
callbacks: callbacks,
|
|
mentionStore: _mentionStore2['default']
|
|
};
|
|
return {
|
|
name: 'mention',
|
|
Suggestions: function Suggestions(props) {
|
|
return _react2['default'].createElement(_Suggestions3['default'], (0, _extends3['default'])({}, props, componentProps, {
|
|
store: _mentionStore2['default']
|
|
}));
|
|
},
|
|
decorators: [{
|
|
strategy: mentionTriggerStrategy,
|
|
component: function component(props) {
|
|
return _react2['default'].createElement('span', (0, _extends3['default'])({}, props, { style: { color: 'red' } }));
|
|
}
|
|
}, {
|
|
strategy: mentionContentStrategy,
|
|
component: function component(props) {
|
|
return _react2['default'].createElement(MentionContentComponent, (0, _extends3['default'])({}, props, { callbacks: callbacks }));
|
|
}
|
|
}],
|
|
onChange: function onChange(editorState) {
|
|
var updatedEditorState = _onChange(editorState);
|
|
return callbacks.onChange ? callbacks.onChange(updatedEditorState) : updatedEditorState;
|
|
},
|
|
callbacks: callbacks,
|
|
'export': _exportContent2['default']
|
|
};
|
|
}
|
|
module.exports = exports['default']; |