support autocomplete replacing text with multiple parts

and append ": " to user pills
pull/21833/head
Bruno Windels 2019-08-29 17:43:18 +02:00
parent 599fccd9ce
commit 2ff2ff0e75
2 changed files with 19 additions and 19 deletions

View File

@ -27,8 +27,7 @@ export default class AutocompleteWrapperModel {
onEscape(e) {
this._getAutocompleterComponent().onEscape(e);
this._updateCallback({
replacePart: this._partCreator.plain(this._queryPart.text),
caretOffset: this._queryOffset,
replaceParts: [this._partCreator.plain(this._queryPart.text)],
close: true,
});
}
@ -70,26 +69,24 @@ export default class AutocompleteWrapperModel {
// cache the typed value and caret here
// so we can restore it in onComponentSelectionChange when the value is undefined (meaning it should be the typed text)
this._queryPart = part;
this._queryOffset = offset;
return this._updateQuery(part.text);
}
onComponentSelectionChange(completion) {
if (!completion) {
this._updateCallback({
replacePart: this._queryPart,
caretOffset: this._queryOffset,
replaceParts: [this._queryPart],
});
} else {
this._updateCallback({
replacePart: this._partForCompletion(completion),
replaceParts: this._partForCompletion(completion),
});
}
}
onComponentConfirm(completion) {
this._updateCallback({
replacePart: this._partForCompletion(completion),
replaceParts: this._partForCompletion(completion),
close: true,
});
}
@ -101,16 +98,16 @@ export default class AutocompleteWrapperModel {
switch (firstChr) {
case "@": {
if (completionId === "@room") {
return this._partCreator.atRoomPill(completionId);
return [this._partCreator.atRoomPill(completionId)];
} else {
return this._partCreator.userPill(text, completionId);
return [this._partCreator.userPill(text, completionId), this._partCreator.plain(": ")];
}
}
case "#":
return this._partCreator.roomPill(completionId);
return [this._partCreator.roomPill(completionId)];
// used for emoji and command completion replacement
default:
return this._partCreator.plain(text);
return [this._partCreator.plain(text)];
}
}
}

View File

@ -47,6 +47,7 @@ export default class EditorModel {
this._activePartIdx = null;
this._autoComplete = null;
this._autoCompletePartIdx = null;
this._autoCompletePartCount = 0;
this._transformCallback = null;
this.setUpdateCallback(updateCallback);
}
@ -219,6 +220,7 @@ export default class EditorModel {
// make sure that react picks up the difference between both acs
this._autoComplete = ac;
this._autoCompletePartIdx = index;
this._autoCompletePartCount = 1;
}
}
}
@ -230,23 +232,24 @@ export default class EditorModel {
this._activePartIdx = null;
this._autoComplete = null;
this._autoCompletePartIdx = null;
this._autoCompletePartCount = 0;
}
return Promise.resolve();
}
_onAutoComplete = ({replacePart, caretOffset, close}) => {
_onAutoComplete = ({replaceParts, close}) => {
let pos;
if (replacePart) {
this._replacePart(this._autoCompletePartIdx, replacePart);
const index = this._autoCompletePartIdx;
if (caretOffset === undefined) {
caretOffset = replacePart.text.length;
}
pos = new DocumentPosition(index, caretOffset);
if (replaceParts) {
this._parts.splice(this._autoCompletePartIdx, this._autoCompletePartCount, ...replaceParts);
this._autoCompletePartCount = replaceParts.length;
const lastPart = replaceParts[replaceParts.length - 1];
const lastPartIndex = this._autoCompletePartIdx + replaceParts.length - 1;
pos = new DocumentPosition(lastPartIndex, lastPart.text.length);
}
if (close) {
this._autoComplete = null;
this._autoCompletePartIdx = null;
this._autoCompletePartCount = 0;
}
// rerender even if editor contents didn't change
// to make sure the MessageEditor checks