feat(merge): add onChange props. (#502)

Author: jaywcjlove

merge/README.md

@@ -116,6 +116,8 @@ interface ModifiedProps {
   [Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
   */
   extensions?: Extension;
+  /** Fired whenever a change occurs to the document. */
+  onChange?(value: string, viewUpdate: ViewUpdate): void;
 }
 ```
 
@@ -146,6 +148,8 @@ interface OriginalProps {
   [Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
   */
   extensions?: Extension;
+  /** Fired whenever a change occurs to the document. */
+  onChange?(value: string, viewUpdate: ViewUpdate): void;
 }
 ```
 

merge/src/Modified.tsx

@@ -1,19 +1,37 @@
 import { useEffect } from 'react';
-import { EditorStateConfig, Extension, StateEffect } from '@codemirror/state';
+import { EditorStateConfig, Extension, StateEffect, Annotation } from '@codemirror/state';
 import { getDefaultExtensions } from '@uiw/react-codemirror';
+import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useStore } from './store';
 
+const External = Annotation.define<boolean>();
+
 export interface ModifiedProps extends Omit<EditorStateConfig, 'doc'> {
   value?: EditorStateConfig['doc'];
   extensions?: Extension[];
+  /** Fired whenever a change occurs to the document. */
+  onChange?(value: string, viewUpdate: ViewUpdate): void;
 }
 
 export const Modified = (props: ModifiedProps): JSX.Element | null => {
-  const { extensions = [] } = props;
+  const { extensions = [], onChange } = props;
   const { modified, view, dispatch } = useStore();
   const defaultExtensions = getDefaultExtensions();
   useEffect(() => {
-    const data: EditorStateConfig = { extensions: [...defaultExtensions, ...extensions] };
+    const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
+      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);
+      }
+    });
+    const data: EditorStateConfig = { extensions: [updateListener, ...defaultExtensions, ...extensions] };
     if (modified?.doc !== props.value && view) {
       data.doc = props.value;
       dispatch!({ modified: { ...modified, ...data } });
@@ -22,6 +40,7 @@ export const Modified = (props: ModifiedProps): JSX.Element | null => {
         view.b.dispatch({
           changes: { from: 0, to: (modifiedDoc || '').length, insert: props.value || '' },
           effects: StateEffect.appendConfig.of([...defaultExtensions, ...extensions]),
+          annotations: [External.of(true)],
         });
       }
     }

merge/src/Original.tsx

@@ -1,19 +1,37 @@
 import { useEffect } from 'react';
-import { EditorStateConfig, Extension, StateEffect } from '@codemirror/state';
-import { useStore } from './store';
+import { EditorStateConfig, Extension, StateEffect, Annotation } from '@codemirror/state';
+import { EditorView, ViewUpdate } from '@codemirror/view';
 import { getDefaultExtensions } from '@uiw/react-codemirror';
+import { useStore } from './store';
+
+const External = Annotation.define<boolean>();
 
 export interface OriginalProps extends Omit<EditorStateConfig, 'doc'> {
   value?: EditorStateConfig['doc'];
   extensions?: Extension[];
+  /** Fired whenever a change occurs to the document. */
+  onChange?(value: string, viewUpdate: ViewUpdate): void;
 }
 
 export const Original = (props: OriginalProps): JSX.Element | null => {
-  const { extensions = [] } = props;
+  const { extensions = [], onChange } = props;
   const { original, view, dispatch } = useStore();
   const defaultExtensions = getDefaultExtensions();
   useEffect(() => {
-    const data: EditorStateConfig = { extensions: [...defaultExtensions, ...extensions] };
+    const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {
+      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);
+      }
+    });
+    const data: EditorStateConfig = { extensions: [updateListener, ...defaultExtensions, ...extensions] };
     if (original?.doc !== props.value && view) {
       data.doc = props.value;
       dispatch!({ original: { ...original, ...data } });

www/src/pages/home/index.tsx

@@ -106,7 +106,7 @@ const hyperlink: {
 }[] = [
   {
     href: 'https://www.npmjs.com/package/@uiw/react-codemirror',
-    label: 'View On NPM',
+    label: 'On NPM',
   },
   {
     href: 'https://codemirror.net/docs/',
@@ -150,6 +150,7 @@ export default function App() {
           <Link to="/extensions" className="extensions">
             Extensions
           </Link>
+          <Link to="/merge/document">Merge</Link>
           {hyperlink.map(({ href, label, style }, idx) => {
             return (
               <a key={idx} target="_blank" rel="noopener noreferrer" href={href} style={style}>