mirror of https://github.com/vector-im/riot-web
HistoryManager + unit tests
parent
e33109cb8c
commit
aa22c90f2c
|
@ -0,0 +1,101 @@
|
||||||
|
/*
|
||||||
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default class HistoryManager {
|
||||||
|
constructor() {
|
||||||
|
this._stack = [];
|
||||||
|
this._newlyTypedCharCount = 0;
|
||||||
|
this._currentIndex = -1;
|
||||||
|
this._changedSinceLastPush = false;
|
||||||
|
this._lastCaret = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
_shouldPush(inputType, diff) {
|
||||||
|
if (inputType === "insertText") {
|
||||||
|
if (diff.removed) {
|
||||||
|
// always append when removing text
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (diff.added) {
|
||||||
|
// only append after every 5th keystroke while typing
|
||||||
|
this._newlyTypedCharCount += diff.added.length;
|
||||||
|
return this._newlyTypedCharCount > 5;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_pushState(model, caret) {
|
||||||
|
// remove all steps after current step
|
||||||
|
while (this._currentIndex < (this._stack.length - 1)) {
|
||||||
|
this._stack.pop();
|
||||||
|
}
|
||||||
|
const parts = model.serializeParts();
|
||||||
|
this._stack.push({parts, caret});
|
||||||
|
this._currentIndex = this._stack.length - 1;
|
||||||
|
this._lastCaret = null;
|
||||||
|
this._changedSinceLastPush = false;
|
||||||
|
this._newlyTypedCharCount = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// needs to persist parts and caret position
|
||||||
|
tryPush(model, caret, inputType, diff) {
|
||||||
|
// ignore state restoration echos.
|
||||||
|
// these respect the inputType values of the input event,
|
||||||
|
// but are actually passed in from MessageEditor calling model.reset()
|
||||||
|
// in the keydown event handler.
|
||||||
|
if (inputType === "historyUndo" || inputType === "historyRedo") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const shouldPush = this._shouldPush(inputType, diff);
|
||||||
|
if (shouldPush) {
|
||||||
|
this._pushState(model, caret);
|
||||||
|
} else {
|
||||||
|
this._lastCaret = caret;
|
||||||
|
this._changedSinceLastPush = true;
|
||||||
|
}
|
||||||
|
return shouldPush;
|
||||||
|
}
|
||||||
|
|
||||||
|
canUndo() {
|
||||||
|
return this._currentIndex >= 1 || this._changedSinceLastPush;
|
||||||
|
}
|
||||||
|
|
||||||
|
canRedo() {
|
||||||
|
return this._currentIndex < (this._stack.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// returns state that should be applied to model
|
||||||
|
undo(model) {
|
||||||
|
if (this.canUndo()) {
|
||||||
|
if (this._changedSinceLastPush) {
|
||||||
|
this._pushState(model, this._lastCaret);
|
||||||
|
}
|
||||||
|
this._currentIndex -= 1;
|
||||||
|
return this._stack[this._currentIndex];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// returns state that should be applied to model
|
||||||
|
redo() {
|
||||||
|
if (this.canRedo()) {
|
||||||
|
this._changedSinceLastPush = false;
|
||||||
|
this._currentIndex += 1;
|
||||||
|
return this._stack[this._currentIndex];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,121 @@
|
||||||
|
/*
|
||||||
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import expect from 'expect';
|
||||||
|
import HistoryManager from "../../src/editor/history";
|
||||||
|
|
||||||
|
describe('editor/history', function() {
|
||||||
|
it('push, then undo', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
const caret1 = {};
|
||||||
|
const result1 = history.tryPush(model, caret1);
|
||||||
|
expect(result1).toEqual(true);
|
||||||
|
parts[0] = "hello world";
|
||||||
|
history.tryPush(model, {});
|
||||||
|
expect(history.canUndo()).toEqual(true);
|
||||||
|
const undoState = history.undo(model);
|
||||||
|
expect(undoState.caret).toEqual(caret1);
|
||||||
|
expect(undoState.parts).toEqual(["hello"]);
|
||||||
|
expect(history.canUndo()).toEqual(false);
|
||||||
|
});
|
||||||
|
it('push, undo, then redo', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
history.tryPush(model, {});
|
||||||
|
parts[0] = "hello world";
|
||||||
|
const caret2 = {};
|
||||||
|
history.tryPush(model, caret2);
|
||||||
|
history.undo(model);
|
||||||
|
expect(history.canRedo()).toEqual(true);
|
||||||
|
const redoState = history.redo();
|
||||||
|
expect(redoState.caret).toEqual(caret2);
|
||||||
|
expect(redoState.parts).toEqual(["hello world"]);
|
||||||
|
expect(history.canRedo()).toEqual(false);
|
||||||
|
expect(history.canUndo()).toEqual(true);
|
||||||
|
});
|
||||||
|
it('push, undo, push, ensure you can`t redo', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
history.tryPush(model, {});
|
||||||
|
parts[0] = "hello world";
|
||||||
|
history.tryPush(model, {});
|
||||||
|
history.undo(model);
|
||||||
|
parts[0] = "hello world!!";
|
||||||
|
history.tryPush(model, {});
|
||||||
|
expect(history.canRedo()).toEqual(false);
|
||||||
|
});
|
||||||
|
it('not every keystroke stores a history step', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
const firstCaret = {};
|
||||||
|
history.tryPush(model, firstCaret);
|
||||||
|
const diff = {added: "o"};
|
||||||
|
let keystrokeCount = 0;
|
||||||
|
do {
|
||||||
|
parts[0] = parts[0] + diff.added;
|
||||||
|
keystrokeCount += 1;
|
||||||
|
} while (!history.tryPush(model, {}, "insertText", diff));
|
||||||
|
const undoState = history.undo(model);
|
||||||
|
expect(undoState.caret).toEqual(firstCaret);
|
||||||
|
expect(undoState.parts).toEqual(["hello"]);
|
||||||
|
expect(history.canUndo()).toEqual(false);
|
||||||
|
expect(keystrokeCount).toBeGreaterThan(2);
|
||||||
|
expect(keystrokeCount).toBeLessThan(20);
|
||||||
|
});
|
||||||
|
it('keystroke that didn\'t add a step can undo', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
const firstCaret = {};
|
||||||
|
history.tryPush(model, {});
|
||||||
|
parts[0] = "helloo";
|
||||||
|
const result = history.tryPush(model, {}, "insertText", {added: "o"});
|
||||||
|
expect(result).toEqual(false);
|
||||||
|
expect(history.canUndo()).toEqual(true);
|
||||||
|
const undoState = history.undo(model);
|
||||||
|
expect(undoState.caret).toEqual(firstCaret);
|
||||||
|
expect(undoState.parts).toEqual(["hello"]);
|
||||||
|
});
|
||||||
|
it('undo after keystroke that didn\'t add a step is able to redo', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
history.tryPush(model, {});
|
||||||
|
parts[0] = "helloo";
|
||||||
|
const caret = {last: true};
|
||||||
|
history.tryPush(model, caret, "insertText", {added: "o"});
|
||||||
|
history.undo(model);
|
||||||
|
expect(history.canRedo()).toEqual(true);
|
||||||
|
const redoState = history.redo();
|
||||||
|
expect(redoState.caret).toEqual(caret);
|
||||||
|
expect(redoState.parts).toEqual(["helloo"]);
|
||||||
|
});
|
||||||
|
it('overwriting text always stores a step', function() {
|
||||||
|
const history = new HistoryManager();
|
||||||
|
const parts = ["hello"];
|
||||||
|
const model = {serializeParts: () => parts.slice()};
|
||||||
|
const firstCaret = {};
|
||||||
|
history.tryPush(model, firstCaret);
|
||||||
|
const diff = {at: 1, added: "a", removed: "e"};
|
||||||
|
const result = history.tryPush(model, {}, "insertText", diff);
|
||||||
|
expect(result).toEqual(true);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue