fix(react-codemirror-merge): fix ref issue. (#455)

merge/src/Internal.tsx

@@ -1,37 +1,42 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
 import { MergeView } from '@codemirror/merge';
 import { useStore } from './store';
 
-export interface ReactCodeMirrorMergeInternalProps extends React.LiHTMLAttributes<HTMLDivElement> {}
+export interface InternalRef {
+  container?: HTMLDivElement | null;
+  view?: MergeView;
+}
 
-export const Internal = React.forwardRef(
-  (props: ReactCodeMirrorMergeInternalProps, ref?: React.ForwardedRef<HTMLDivElement>) => {
-    const { className, children } = props;
-    const { modified, original, view, dispatch } = useStore();
-    const editor = useRef<HTMLDivElement>(null);
+export interface InternalProps extends React.LiHTMLAttributes<HTMLDivElement> {}
 
-    useEffect(() => {
-      if (!view && editor.current && original && modified) {
-        const viewDefault = new MergeView({
-          a: original,
-          b: modified,
-          parent: editor.current,
-        });
-        dispatch && dispatch({ view: viewDefault });
-      }
-    }, [editor.current, original, modified, view]);
+export const Internal = React.forwardRef((props: InternalProps, ref?: React.ForwardedRef<InternalRef>) => {
+  const { className, children } = props;
+  const { modified, original, view, dispatch } = useStore();
+  const editor = useRef<HTMLDivElement>(null);
+  useImperativeHandle(ref, () => ({ container: editor.current, view }), [editor, view]);
+  useEffect(() => {
+    if (!view && editor.current && original && modified) {
+      const viewDefault = new MergeView({
+        a: original,
+        b: modified,
+        parent: editor.current,
+      });
+      dispatch && dispatch({ view: viewDefault });
+    }
+  }, [editor.current, original, modified, view]);
 
-    useEffect(() => {
-      return () => {
-        view && view.destroy();
-      };
-    }, []);
+  useEffect(() => {
+    return () => {
+      view && view.destroy();
+    };
+  }, []);
 
-    const defaultClassNames = 'cm-merge-theme';
-    return (
-      <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...props}>
-        {children}
-      </div>
-    );
-  },
-);
+  const defaultClassNames = 'cm-merge-theme';
+  return (
+    <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...props}>
+      {children}
+    </div>
+  );
+});
+
+Internal.displayName = 'CodeMirrorMerge.Internal';

merge/src/Modified.tsx

@@ -38,3 +38,5 @@ export const Modified = (props: ModifiedProps): JSX.Element | null => {
 
   return null;
 };
+
+Modified.displayName = 'CodeMirrorMerge.Modified';

merge/src/Original.tsx

@@ -38,3 +38,5 @@ export const Original = (props: OriginalProps): JSX.Element | null => {
 
   return null;
 };
+
+Original.displayName = 'CodeMirrorMerge.Original';

merge/src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Original } from './Original';
 import { Modified } from './Modified';
-import { Internal } from './Internal';
+import { Internal, InternalRef } from './Internal';
 import { Provider } from './store';
 
+export interface ReactCodeMirrorMergeRef extends InternalRef {}
 export interface ReactCodeMirrorMergeProps extends React.LiHTMLAttributes<HTMLDivElement> {}
 
-const InternalCodeMirror = (props: ReactCodeMirrorMergeProps, ref?: React.ForwardedRef<HTMLDivElement>) => {
+const InternalCodeMirror = (props: ReactCodeMirrorMergeProps, ref?: React.ForwardedRef<InternalRef>) => {
   return (
     <Provider>
       <Internal {...props} ref={ref} />
@@ -19,7 +20,7 @@ type CodeMirrorComponent = React.FC<React.PropsWithRef<ReactCodeMirrorMergeProps
   Modified: typeof Modified;
 };
 
-const ReactCodeMirrorMerge: CodeMirrorComponent = React.forwardRef<HTMLDivElement>(
+const ReactCodeMirrorMerge: CodeMirrorComponent = React.forwardRef<InternalRef>(
   InternalCodeMirror,
 ) as unknown as CodeMirrorComponent;