imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support autocomplete replacing text with multiple parts

Browse source 
and append ": " to user pills
This commit is contained in:
Bruno Windels 2019-08-29 17:43:18 +02:00
parent 599fccd9ce
commit 2ff2ff0e75
2 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/editor/autocomplete.js
View file

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

19
src/editor/model.js
View file

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