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

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]);