#11378. Added cut/copy and pasting user pills from editor.
This commit is contained in:
parent
4a78faae4c
commit
c370b28694
1 changed files with 39 additions and 7 deletions
|
@ -200,18 +200,48 @@ export default class BasicMessageEditor extends React.Component {
|
||||||
return !!(this._isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
|
return !!(this._isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_onCutCopy = (event, type) => {
|
||||||
|
const selection = document.getSelection();
|
||||||
|
const text = selection.toString();
|
||||||
|
if (text) {
|
||||||
|
const {model} = this.props;
|
||||||
|
const range = getRangeForSelection(this._editorRef, model, selection);
|
||||||
|
const selectedParts = range.parts.map(p => p.serialize());
|
||||||
|
event.clipboardData.setData("application/x-riot-composer", JSON.stringify(selectedParts));
|
||||||
|
if (type === "cut") {
|
||||||
|
selection.deleteFromDocument();
|
||||||
|
range.replace([]);
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_onCopy = (event) => {
|
||||||
|
this._onCutCopy(event, "copy");
|
||||||
|
}
|
||||||
|
|
||||||
|
_onCut = (event) => {
|
||||||
|
this._onCutCopy(event, "cut");
|
||||||
|
}
|
||||||
|
|
||||||
_onPaste = (event) => {
|
_onPaste = (event) => {
|
||||||
const {model} = this.props;
|
const {model} = this.props;
|
||||||
const {partCreator} = model;
|
const {partCreator} = model;
|
||||||
|
const partsText = event.clipboardData.getData("application/x-riot-composer");
|
||||||
|
let parts;
|
||||||
|
if (partsText) {
|
||||||
|
const serializedTextParts = JSON.parse(partsText);
|
||||||
|
const deserializedParts = serializedTextParts.map(p => partCreator.deserializePart(p))
|
||||||
|
parts = deserializedParts;
|
||||||
|
} else {
|
||||||
const text = event.clipboardData.getData("text/plain");
|
const text = event.clipboardData.getData("text/plain");
|
||||||
if (text) {
|
parts = parsePlainTextMessage(text, partCreator);
|
||||||
|
}
|
||||||
this._modifiedFlag = true;
|
this._modifiedFlag = true;
|
||||||
const range = getRangeForSelection(this._editorRef, model, document.getSelection());
|
const range = getRangeForSelection(this._editorRef, model, document.getSelection());
|
||||||
const parts = parsePlainTextMessage(text, partCreator);
|
|
||||||
replaceRangeAndMoveCaret(range, parts);
|
replaceRangeAndMoveCaret(range, parts);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
_onInput = (event) => {
|
_onInput = (event) => {
|
||||||
// ignore any input while doing IME compositions
|
// ignore any input while doing IME compositions
|
||||||
|
@ -557,6 +587,8 @@ export default class BasicMessageEditor extends React.Component {
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
onBlur={this._onBlur}
|
onBlur={this._onBlur}
|
||||||
onFocus={this._onFocus}
|
onFocus={this._onFocus}
|
||||||
|
onCopy={this._onCopy}
|
||||||
|
onCut={this._onCut}
|
||||||
onPaste={this._onPaste}
|
onPaste={this._onPaste}
|
||||||
onKeyDown={this._onKeyDown}
|
onKeyDown={this._onKeyDown}
|
||||||
ref={ref => this._editorRef = ref}
|
ref={ref => this._editorRef = ref}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue