diff --git a/src/editor/history.js b/src/editor/history.js new file mode 100644 index 0000000000..02f72bb5b4 --- /dev/null +++ b/src/editor/history.js @@ -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]; + } + } +} diff --git a/test/editor/history-test.js b/test/editor/history-test.js new file mode 100644 index 0000000000..13a145201b --- /dev/null +++ b/test/editor/history-test.js @@ -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); + }); +});