diff --git a/merge/src/Internal.tsx b/merge/src/Internal.tsx index c91b10a4f..1a8599110 100644 --- a/merge/src/Internal.tsx +++ b/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 {} +export interface InternalRef { + container?: HTMLDivElement | null; + view?: MergeView; +} -export const Internal = React.forwardRef( - (props: ReactCodeMirrorMergeInternalProps, ref?: React.ForwardedRef) => { - const { className, children } = props; - const { modified, original, view, dispatch } = useStore(); - const editor = useRef(null); +export interface InternalProps extends React.LiHTMLAttributes {} - 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) => { + const { className, children } = props; + const { modified, original, view, dispatch } = useStore(); + const editor = useRef(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 ( -
- {children} -
- ); - }, -); + const defaultClassNames = 'cm-merge-theme'; + return ( +
+ {children} +
+ ); +}); + +Internal.displayName = 'CodeMirrorMerge.Internal'; diff --git a/merge/src/Modified.tsx b/merge/src/Modified.tsx index 83e2fb60c..62503bb3e 100644 --- a/merge/src/Modified.tsx +++ b/merge/src/Modified.tsx @@ -38,3 +38,5 @@ export const Modified = (props: ModifiedProps): JSX.Element | null => { return null; }; + +Modified.displayName = 'CodeMirrorMerge.Modified'; diff --git a/merge/src/Original.tsx b/merge/src/Original.tsx index 8c474ad90..1290bb03a 100644 --- a/merge/src/Original.tsx +++ b/merge/src/Original.tsx @@ -38,3 +38,5 @@ export const Original = (props: OriginalProps): JSX.Element | null => { return null; }; + +Original.displayName = 'CodeMirrorMerge.Original'; diff --git a/merge/src/index.tsx b/merge/src/index.tsx index e5302c4cf..f8e6a3391 100644 --- a/merge/src/index.tsx +++ b/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 {} -const InternalCodeMirror = (props: ReactCodeMirrorMergeProps, ref?: React.ForwardedRef) => { +const InternalCodeMirror = (props: ReactCodeMirrorMergeProps, ref?: React.ForwardedRef) => { return ( @@ -19,7 +20,7 @@ type CodeMirrorComponent = React.FC( +const ReactCodeMirrorMerge: CodeMirrorComponent = React.forwardRef( InternalCodeMirror, ) as unknown as CodeMirrorComponent;