fix: Fix echo onChange call when value prop is changed (#456)

Author: 11bit

core/src/__tests__/index.test.tsx

@@ -85,3 +85,10 @@ it('CodeMirror editable', async () => {
   expect(text.className).toEqual('cm-content');
   expect(text.tagName).toEqual('DIV');
 });
+
+it("CodeMirror doesn't echo changes", async () => {
+  const handleChange = jest.fn();
+  const { rerender } = render(<CodeMirror value="value a" onChange={handleChange} />);
+  rerender(<CodeMirror value="value b" onChange={handleChange} />);
+  expect(handleChange).not.toHaveBeenCalled();
+});

core/src/useCodeMirror.ts

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
-import { EditorState, StateEffect } from '@codemirror/state';
+import { Annotation, EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
 import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { getStatistics } from './utils';
 import { ReactCodeMirrorProps } from '.';
 
+const External = Annotation.define<boolean>();
+
 export interface UseCodeMirror extends ReactCodeMirrorProps {
   container?: HTMLDivElement | null;
 }
@@ -60,7 +62,13 @@ export function useCodeMirror(props: UseCodeMirror) {
     },
   });
   const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
-    if (vu.docChanged && typeof onChange === 'function') {
+    if (
+      vu.docChanged &&
+      typeof onChange === 'function' &&
+      // Fix echoing of the remote changes:
+      // If transaction is market as remote we don't have to call `onChange` handler again
+      !vu.transactions.some((tr) => tr.annotation(External))
+    ) {
       const doc = vu.state.doc;
       const value = doc.toString();
       onChange(value, vu);
@@ -188,6 +196,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     if (view && value !== currentValue) {
       view.dispatch({
         changes: { from: 0, to: currentValue.length, insert: value || '' },
+        annotations: [External.of(true)],
       });
     }
   }, [value, view]);