mirror of https://github.com/vector-im/riot-web
basic support for non-editable parts
e.g. pills, they get deleted when any character of them is removed later on we also shouldn't allow the caret to be set inside of thempull/21833/head
parent
fc87a27c5d
commit
5e6367ab57
|
@ -20,7 +20,6 @@ export default class EditorModel {
|
||||||
constructor(parts, partCreator) {
|
constructor(parts, partCreator) {
|
||||||
this._parts = parts;
|
this._parts = parts;
|
||||||
this._partCreator = partCreator;
|
this._partCreator = partCreator;
|
||||||
this._previousValue = parts.reduce((text, p) => text + p.text, "");
|
|
||||||
this._activePartIdx = null;
|
this._activePartIdx = null;
|
||||||
this._autoComplete = null;
|
this._autoComplete = null;
|
||||||
this._autoCompletePartIdx = null;
|
this._autoCompletePartIdx = null;
|
||||||
|
@ -68,19 +67,19 @@ export default class EditorModel {
|
||||||
_diff(newValue, inputType, caret) {
|
_diff(newValue, inputType, caret) {
|
||||||
// handle deleteContentForward (Delete key)
|
// handle deleteContentForward (Delete key)
|
||||||
// and deleteContentBackward (Backspace)
|
// and deleteContentBackward (Backspace)
|
||||||
|
const previousValue = this.parts.reduce((text, p) => text + p.text, "");
|
||||||
// can't use caret position with drag and drop
|
// can't use caret position with drag and drop
|
||||||
if (inputType === "deleteByDrag") {
|
if (inputType === "deleteByDrag") {
|
||||||
return diffDeletion(this._previousValue, newValue);
|
return diffDeletion(previousValue, newValue);
|
||||||
} else {
|
} else {
|
||||||
return diffAtCaret(this._previousValue, newValue, caret.offset);
|
return diffAtCaret(previousValue, newValue, caret.offset);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
update(newValue, inputType, caret) {
|
update(newValue, inputType, caret) {
|
||||||
const diff = this._diff(newValue, inputType, caret);
|
const diff = this._diff(newValue, inputType, caret);
|
||||||
const position = this._positionForOffset(diff.at, caret.atNodeEnd);
|
const position = this._positionForOffset(diff.at, caret.atNodeEnd);
|
||||||
console.log("update at", {position, diff, newValue, prevValue: this._previousValue});
|
console.log("update at", {position, diff, newValue, prevValue: this.parts.reduce((text, p) => text + p.text, "")});
|
||||||
if (diff.removed) {
|
if (diff.removed) {
|
||||||
this._removeText(position, diff.removed.length);
|
this._removeText(position, diff.removed.length);
|
||||||
}
|
}
|
||||||
|
@ -88,7 +87,6 @@ export default class EditorModel {
|
||||||
this._addText(position, diff.added);
|
this._addText(position, diff.added);
|
||||||
}
|
}
|
||||||
this._mergeAdjacentParts();
|
this._mergeAdjacentParts();
|
||||||
this._previousValue = newValue;
|
|
||||||
const caretOffset = diff.at + (diff.added ? diff.added.length : 0);
|
const caretOffset = diff.at + (diff.added ? diff.added.length : 0);
|
||||||
const newPosition = this._positionForOffset(caretOffset, true);
|
const newPosition = this._positionForOffset(caretOffset, true);
|
||||||
this._setActivePart(newPosition);
|
this._setActivePart(newPosition);
|
||||||
|
@ -141,9 +139,10 @@ export default class EditorModel {
|
||||||
|
|
||||||
_removeText(pos, len) {
|
_removeText(pos, len) {
|
||||||
let {index, offset} = pos;
|
let {index, offset} = pos;
|
||||||
while (len !== 0) {
|
while (len > 0) {
|
||||||
// part might be undefined here
|
// part might be undefined here
|
||||||
let part = this._parts[index];
|
let part = this._parts[index];
|
||||||
|
if (part.canEdit) {
|
||||||
const amount = Math.min(len, part.text.length - offset);
|
const amount = Math.min(len, part.text.length - offset);
|
||||||
const replaceWith = part.remove(offset, amount);
|
const replaceWith = part.remove(offset, amount);
|
||||||
if (typeof replaceWith === "string") {
|
if (typeof replaceWith === "string") {
|
||||||
|
@ -158,6 +157,10 @@ export default class EditorModel {
|
||||||
}
|
}
|
||||||
len -= amount;
|
len -= amount;
|
||||||
offset = 0;
|
offset = 0;
|
||||||
|
} else {
|
||||||
|
len = part.length - (offset + len);
|
||||||
|
this._removePart(index);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -91,6 +91,10 @@ class BasePart {
|
||||||
get text() {
|
get text() {
|
||||||
return this._text;
|
return this._text;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get canEdit() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PlainPart extends BasePart {
|
export class PlainPart extends BasePart {
|
||||||
|
@ -165,6 +169,10 @@ class PillPart extends BasePart {
|
||||||
node.childNodes.length === 1 &&
|
node.childNodes.length === 1 &&
|
||||||
node.childNodes[0].nodeType === Node.TEXT_NODE;
|
node.childNodes[0].nodeType === Node.TEXT_NODE;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get canEdit() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class RoomPillPart extends PillPart {
|
export class RoomPillPart extends PillPart {
|
||||||
|
|
Loading…
Reference in New Issue