fix(merge): ref view not available on load. #681

Author: jaywcjlove

merge/src/Internal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
-import { EditorStateConfig } from '@codemirror/state';
+import { EditorStateConfig, StateEffect } from '@codemirror/state';
 import { getDefaultExtensions } from '@uiw/react-codemirror';
 import { MergeView, MergeConfig, DirectMergeConfig } from '@codemirror/merge';
 import { useStore } from './store';
@@ -86,6 +86,7 @@ export const Internal = React.forwardRef<InternalRef, CodeMirrorMergeProps>((pro
         parent: editor.current,
         ...opts,
       });
+      dispatch!({ view: view.current });
     }
   }, [view, editor, originalExtension, modifiedExtension]);
 

www/src/pages/examples/Example681.tsx

@@ -0,0 +1,80 @@
+import { Fragment, useRef, useState } from 'react';
+import { ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { StateEffect } from '@codemirror/state';
+import CodeMirrorMerge, { type CodeMirrorMergeRef } from 'react-codemirror-merge';
+
+const Original = CodeMirrorMerge.Original;
+const Modified = CodeMirrorMerge.Modified;
+let doc = `one
+two
+three
+four
+five`;
+
+const log1UpdatePlugin = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate) {
+      if (update.docChanged) {
+        console.log('Document changed! test 1');
+      }
+    }
+  },
+);
+
+const log2UpdatePlugin = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate) {
+      if (update.docChanged) {
+        console.log('Document changed! test 2');
+      }
+    }
+  },
+);
+
+/**
+ * https://github.com/uiwjs/react-codemirror/issues/681#issuecomment-2341521112
+ */
+export function Component() {
+  return (
+    <Fragment>
+      <Example />
+    </Fragment>
+  );
+}
+
+function Example() {
+  const [value, setValue] = useState(doc);
+  const [valueModified, setValueModified] = useState(doc);
+  const $ref = useRef<CodeMirrorMergeRef>(null);
+  const handle1 = () => {
+    $ref.current?.view?.a.dispatch({
+      effects: StateEffect.appendConfig.of([log2UpdatePlugin]),
+    });
+  };
+  return (
+    <div style={{ width: '100%' }}>
+      <div>
+        <button onClick={handle1}>Add extension 2</button>
+      </div>
+      <CodeMirrorMerge ref={$ref} destroyRerender={false}>
+        <Original
+          value={value}
+          extensions={[log1UpdatePlugin]}
+          onChange={(val) => {
+            setValue(val);
+          }}
+        />
+        <Modified
+          value={valueModified}
+          onChange={(val) => {
+            setValueModified(val);
+          }}
+        />
+      </CodeMirrorMerge>
+      <div style={{ display: 'flex', marginTop: 10 }}>
+        <pre style={{ flex: 1 }}>{value} </pre>
+        <pre style={{ backgroundColor: '#fff', flex: 1 }}>{valueModified} </pre>
+      </div>
+    </div>
+  );
+}

www/src/router.tsx

@@ -673,6 +673,11 @@ export const routes: MenuRouteObject[] = [
             label: 'CodeMirrorMerge use theme',
             lazy: () => import('./pages/examples/Example455'),
           },
+          {
+            path: '681',
+            label: 'CodeMirrorMerge Update Extensions',
+            lazy: () => import('./pages/examples/Example681'),
+          },
           {
             path: 'refs',
             label: 'Refs Example',