addMention: function(suggestion, mentionDescriptor, querySequenceStart, querySequenceEnd) {
// Insert mention in the marked up value at the correct position
var value = LinkedValueUtils.getValue(this) || "";
var start = utils.mapPlainTextIndex(value, this.props.markup, querySequenceStart, false, this.props.displayTransform);
var end = start + querySequenceEnd - querySequenceStart;
var insert = utils.makeMentionsMarkup(this.props.markup, suggestion.id, suggestion.display, mentionDescriptor.props.type);
var newValue = utils.spliceString(value, start, end, insert);
// Refocus input and set caret position to end of mention
this.refs.input.getDOMNode().focus();
var displayValue = this.props.displayTransform(suggestion.id, suggestion.display, mentionDescriptor.props.type);
var newCaretPosition = querySequenceStart + displayValue.length;
this.setState({
selectionStart: newCaretPosition,
selectionEnd: newCaretPosition
});
// Propagate change
var handleChange = LinkedValueUtils.getOnChange(this) || emptyFunction;
var eventMock = { target: { value: newValue }};
handleChange.call(this, eventMock, newValue);
var onAdd = mentionDescriptor.props.onAdd;
if(onAdd) {
onAdd(suggestion.id, suggestion.display);
}
// Make sure the suggestions overlay is closed
this.clearSuggestions();
},
handleChange: function(ev) {
if(document.activeElement !== ev.target) {
// fix an IE bug (blur from empty input element with placeholder attribute trigger "input" event)
return;
}
var value = LinkedValueUtils.getValue(this) || "";
var newPlainTextValue = ev.target.value;
// Derive the new value to set by applying the local change in the textarea's plain text
var newValue = utils.applyChangeToValue(
value, this.props.markup,
newPlainTextValue,
this.state.selectionStart, this.state.selectionEnd,
ev.target.selectionEnd,
this.props.displayTransform
);
// Save current selection after change to be able to restore caret position after rerendering
var selectionStart = ev.target.selectionStart;
var selectionEnd = ev.target.selectionEnd;
// Adjust selection range in case a mention will be deleted by the characters outside of the
// selection range that are automatically deleted
var startOfMention = utils.findStartOfMentionInPlainText(value, this.props.markup, selectionStart, this.props.displayTransform);
if(this.state.selectionEnd > startOfMention) {
// only if a deletion has taken place
selectionStart = startOfMention;
selectionEnd = selectionStart;
}
this.setState({
selectionStart: selectionStart,
selectionEnd: selectionEnd
});
var mentions = utils.getMentions(newValue, this.props.markup);
// Propagate change
var handleChange = LinkedValueUtils.getOnChange(this) || emptyFunction;
var eventMock = { target: { value: newValue } };
handleChange.call(this, eventMock, newValue, newPlainTextValue, mentions);
},