fix: prevent undoing initial fill

Author: Buckwich

lib/components/Input/InputEditor.jsx

@@ -4,7 +4,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
 import { bracketMatching, indentOnInput } from '@codemirror/language';
-import { Compartment, EditorState, Annotation } from '@codemirror/state';
+import { Compartment, EditorState, Annotation, Transaction } from '@codemirror/state';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
 import { linter } from '@codemirror/lint';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
@@ -66,6 +66,9 @@ export default function InputEditor({
 
   const ref = useRef(null);
 
+  /** @type {import('react').MutableRefObject<EditorView | null>} */
+  const initializedViewRef = useRef(null);
+
   /**
    * @type {ReturnType<typeof useState<EditorView>>}
    */
@@ -137,6 +140,10 @@ export default function InputEditor({
 
     setEditorView(view);
 
+    if (value) {
+      initializedViewRef.current = view;
+    }
+
     return () => {
       view.destroy();
     };
@@ -158,13 +165,21 @@ export default function InputEditor({
     const editorValue = editorView.state.doc.toString();
 
     if (value !== editorValue) {
+      const isInitialFill = initializedViewRef.current !== editorView;
+      if (value) {
+        initializedViewRef.current = editorView;
+      }
+
       editorView.dispatch({
         changes: {
           from: 0,
           to: editorValue.length,
           insert: value
         },
-        annotations: fromPropAnnotation.of(true)
+        annotations: [
+          fromPropAnnotation.of(true),
+          ...isInitialFill ? [ Transaction.addToHistory.of(false) ] : []
+        ]
       });
     }
   }, [ editorView, value ]);

test/components/Input/InputEditor.spec.js

@@ -441,6 +441,83 @@ describe('InputEditor', function() {
       });
     });
 
+
+    it('should not undo the initial fill', async function() {
+
+      // given - editor starts without value, then receives async prefill
+      const onChangeSpy = sinon.spy();
+      const prefillValue = '{\n  "foo": "bar"\n}';
+
+      const { container, getByRole, rerender } = renderWithProps({
+        onChange: onChangeSpy
+      });
+
+      // simulate async prefill arriving
+      rerender(
+        <InputEditor
+          value={ prefillValue }
+          onChange={ onChangeSpy }
+          onErrorChange={ () => {} }
+        />
+      );
+
+      await waitFor(() => {
+        expect(container.textContent).to.contain('"foo": "bar"');
+      });
+
+      // when - try to undo the prefill
+      const textbox = getByRole('textbox');
+      await user.click(textbox);
+      await user.keyboard(undoKeys);
+
+      // then - prefill should remain (not undoable)
+      await new Promise(resolve => setTimeout(resolve, 100));
+      expect(onChangeSpy).to.not.have.been.called;
+      expect(container.textContent).to.contain('"foo": "bar"');
+    });
+
+
+    it('should not undo past the initial value', async function() {
+
+      // given - editor starts with value, user types something
+      const onChangeSpy = sinon.spy();
+      const initialValue = '{\n  "foo": "bar"\n}';
+
+      const { container, getByRole } = renderWithProps({
+        value: initialValue,
+        onChange: onChangeSpy
+      });
+
+      const textbox = getByRole('textbox');
+      await user.click(textbox);
+
+      // type something
+      await user.keyboard('{ArrowRight}{Enter}"a": 1');
+
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.called;
+      });
+
+      onChangeSpy.resetHistory();
+
+      // when - undo typing
+      await user.keyboard(undoKeys);
+
+      await waitFor(() => {
+        expect(onChangeSpy).to.have.been.calledWith(initialValue);
+      });
+
+      onChangeSpy.resetHistory();
+
+      // when - undo again (should not go to empty)
+      await user.keyboard(undoKeys);
+
+      // then - should stay at initial value
+      await new Promise(resolve => setTimeout(resolve, 100));
+      expect(onChangeSpy).to.not.have.been.called;
+      expect(container.textContent).to.contain('"foo": "bar"');
+    });
+
   });
 
 });