mirror of https://github.com/vector-im/riot-web
HistoryManager + unit tests
Bruno Windels
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