Add undo/redo support to input editor

lib/components/Input/InputEditor.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
-import { defaultKeymap } from '@codemirror/commands';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { bracketMatching, indentOnInput } from '@codemirror/language';
 import { Compartment, EditorState, Annotation } from '@codemirror/state';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
@@ -96,11 +96,13 @@ export default function InputEditor({
     const editorState = EditorState.create({
       doc: value,
       extensions: [
+        history(),
         autocompletion(),
         closeBrackets(),
         bracketMatching(),
         indentOnInput(),
         keymap.of([
+          ...historyKeymap,
           ...defaultKeymap
         ]),
         new Compartment().of(json()),

test/components/Input/InputEditor.spec.js

@@ -312,6 +312,114 @@ describe('InputEditor', function() {
 
   });
 
+
+  describe('undo/redo', function() {
+
+    it('should support undo after typing', async function() {
+
+      // given
+      const onChange = sinon.spy();
+      const initialValue = '{"foo": "bar"}';
+
+      const { container, getByRole } = renderWithProps({
+        value: initialValue,
+        onChange
+      });
+
+      // when - type some text
+      await user.click(getByRole('textbox'));
+      await user.keyboard('{ArrowLeft}{ArrowLeft}"baz": 42, ');
+
+      // then - text was added
+      await waitFor(() => {
+        expect(container.textContent).to.include('"baz": 42');
+      });
+
+      // when - undo
+      await user.keyboard('{Control>}z{/Control}');
+
+      // then - text was removed
+      await waitFor(() => {
+        expect(container.textContent).not.to.include('"baz": 42');
+        expect(container.textContent).to.include('"foo": "bar"');
+      });
+    });
+
+
+    it('should support redo after undo', async function() {
+
+      // given
+      const onChange = sinon.spy();
+      const initialValue = '{"foo": "bar"}';
+
+      const { container, getByRole } = renderWithProps({
+        value: initialValue,
+        onChange
+      });
+
+      // when - type some text
+      await user.click(getByRole('textbox'));
+      await user.keyboard('{ArrowLeft}{ArrowLeft}"baz": 42, ');
+
+      await waitFor(() => {
+        expect(container.textContent).to.include('"baz": 42');
+      });
+
+      // when - undo
+      await user.keyboard('{Control>}z{/Control}');
+
+      await waitFor(() => {
+        expect(container.textContent).not.to.include('"baz": 42');
+      });
+
+      // when - redo
+      await user.keyboard('{Control>}y{/Control}');
+
+      // then - text was restored
+      await waitFor(() => {
+        expect(container.textContent).to.include('"baz": 42');
+      });
+    });
+
+
+    it('should support undo after clearing content', async function() {
+
+      // given
+      const onChange = sinon.spy();
+      const initialValue = '{"foo": "bar", "baz": 1337}';
+
+      const { container, getByRole, rerender } = renderWithProps({
+        value: initialValue,
+        onChange
+      });
+
+      // when - clear content by setting value to empty object
+      rerender(
+        <InputEditor
+          value={ '{}' }
+          onChange={ onChange }
+        />
+      );
+
+      // then - content was cleared
+      await waitFor(() => {
+        expect(container.textContent).not.to.include('"foo": "bar"');
+        expect(container.textContent).not.to.include('"baz": 1337');
+      });
+
+      // when - focus editor and undo
+      await user.click(getByRole('textbox'));
+      await user.keyboard('{Control>}z{/Control}');
+
+      // then - content was restored
+      await waitFor(() => {
+        expect(container.textContent).to.include('"foo": "bar"');
+        expect(container.textContent).to.include('"baz": 1337');
+      });
+    });
+
+  });
+
 });
 
 function renderWithProps(props = {}) {