fix(merge): fix onChange props issue. (#502)

Author: jaywcjlove

merge/src/Internal.tsx

@@ -60,20 +60,29 @@ export const Internal = React.forwardRef((props: CodeMirrorMergeProps, ref?: Rea
       if (otherStore.collapseUnchanged !== collapseUnchanged) {
         opts.collapseUnchanged = collapseUnchanged;
       }
-      if (Object.keys(opts).length && dispatch) {
-        dispatch({ ...opts });
-      }
-      if (original && modified && editor.current) {
+      if (Object.keys(opts).length && dispatch && original && modified && editor.current) {
         view.destroy();
-        new MergeView({
-          a: { ...original },
-          b: { ...modified },
+        const viewDefault = new MergeView({
+          a: original,
+          b: modified,
           parent: editor.current,
           ...opts,
         });
+        dispatch({ ...opts, renderRevertControl, view: viewDefault });
       }
     }
-  }, [view, original, modified, editor, orientation, revertControls, highlightChanges, gutter, collapseUnchanged]);
+  }, [
+    view,
+    original,
+    modified,
+    editor,
+    orientation,
+    revertControls,
+    highlightChanges,
+    gutter,
+    collapseUnchanged,
+    renderRevertControl,
+  ]);
 
   const defaultClassNames = 'cm-merge-theme';
   return (

merge/src/Modified.tsx

@@ -17,29 +17,30 @@ export const Modified = (props: ModifiedProps): JSX.Element | null => {
   const { extensions = [], onChange } = props;
   const { modified, view, dispatch } = useStore();
   const defaultExtensions = getDefaultExtensions();
+  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 extensionsData = [updateListener, ...defaultExtensions, ...extensions];
+  const data: EditorStateConfig = { extensions: [...extensionsData] };
   useEffect(() => {
-    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 } });
       const modifiedDoc = view?.b.state.doc.toString();
       if (modifiedDoc !== props.value) {
         view.b.dispatch({
           changes: { from: 0, to: (modifiedDoc || '').length, insert: props.value || '' },
-          effects: StateEffect.appendConfig.of([...defaultExtensions, ...extensions]),
+          effects: StateEffect.appendConfig.of([...extensionsData]),
           annotations: [External.of(true)],
         });
       }

merge/src/Original.tsx

@@ -17,29 +17,30 @@ export const Original = (props: OriginalProps): JSX.Element | null => {
   const { extensions = [], onChange } = props;
   const { original, view, dispatch } = useStore();
   const defaultExtensions = getDefaultExtensions();
+  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 extensionsData = [updateListener, ...defaultExtensions, ...extensions];
+  const data: EditorStateConfig = { extensions: [...extensionsData] };
   useEffect(() => {
-    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 } });
       const originalDoc = view?.a.state.doc.toString();
       if (originalDoc !== props.value) {
         view?.a.dispatch({
           changes: { from: 0, to: (originalDoc || '').length, insert: props.value || '' },
-          effects: StateEffect.appendConfig.of([...defaultExtensions, ...extensions]),
+          effects: StateEffect.appendConfig.of([...extensionsData]),
         });
       }
     }

www/package.json

@@ -72,14 +72,14 @@
     "@uiw/react-back-to-top": "^1.1.2",
     "@uiw/react-codemirror": "4.20.1",
     "@uiw/react-github-corners": "~1.5.14",
-    "@uiw/react-markdown-preview": "~4.1.0",
+    "@uiw/react-markdown-preview": "^4.1.13",
     "@uiw/react-shields": "~1.1.3",
     "@uiw/reset.css": "~1.0.5",
     "@wcj/dark-mode": "~1.0.12",
     "code-example": "^3.3.6",
     "markdown-react-code-preview-loader": "^2.1.2",
     "react": "~18.2.0",
-    "react-code-preview-layout": "^3.0.0",
+    "react-code-preview-layout": "^3.0.1",
     "react-codemirror-merge": "4.20.1",
     "react-dom": "~18.2.0",
     "react-router-dom": "^6.3.0",

www/src/components/Markdown.tsx

@@ -0,0 +1,70 @@
+import { FC, PropsWithChildren, useEffect, useRef } from 'react';
+import CodeLayout from 'react-code-preview-layout';
+import { getMetaId, isMeta, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
+import rehypeIgnore from 'rehype-ignore';
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps extends CodeProps {
+  mdData?: CodeBlockData;
+}
+
+const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = ({ inline, node, ...props }) => {
+  const $dom = useRef<HTMLDivElement>(null);
+  const { mdData, ...rest } = props;
+  // useEffect(() => {
+  //   if ($dom.current) {
+  //     const parentElement = $dom.current.parentElement;
+  //     if (parentElement && parentElement.parentElement) {
+  //       parentElement.parentElement.replaceChild($dom.current, parentElement);
+  //     }
+  //   }
+  // }, [$dom]);
+  const { 'data-meta': meta } = props as any;
+  if (inline || !isMeta(meta)) {
+    return <code {...rest} />;
+  }
+  const line = node.position?.start.line;
+  const metaId = getMetaId(meta) || String(line);
+  const Child = mdData?.components[`${metaId}`];
+  if (metaId && typeof Child === 'function') {
+    const code = mdData?.data[metaId].value || '';
+    const param = getURLParameters(meta);
+    return (
+      <CodeLayout ref={$dom}>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
+      </CodeLayout>
+    );
+  }
+  return <code {...rest} />;
+};
+
+interface MarkdownProps extends MarkdownPreviewProps {
+  mdData?: CodeBlockData;
+}
+
+export default function Markdown(props: MarkdownProps) {
+  const { mdData, ...rest } = props;
+  return (
+    <MarkdownPreview
+      {...rest}
+      style={{ paddingTop: 30 }}
+      disableCopy={true}
+      rehypePlugins={[rehypeIgnore]}
+      source={props.source || ''}
+      components={{
+        code: (props) => <CodePreview {...props} mdData={mdData} />,
+      }}
+    />
+  );
+}

www/src/pages/merge/examples/Example.md

@@ -0,0 +1,41 @@
+# onChange Example
+
+```jsx mdx:preview
+import React, { useState } from 'react';
+import CodeMirrorMerge from 'react-codemirror-merge';
+
+const Original = CodeMirrorMerge.Original;
+const Modified = CodeMirrorMerge.Modified;
+let doc = `one
+two
+three
+four
+five`;
+
+export default function App() {
+  const [value, setValue] = useState('');
+  const [valueModified, setValueModified] = useState('');
+  return (
+    <div>
+      <CodeMirrorMerge>
+        <Original
+          onChange={(value) => {
+            setValue(value);
+          }}
+          value={doc}
+        />
+        <Modified
+          onChange={(value) => {
+            setValueModified(value);
+          }}
+          value={doc.replace(/t/g, 'T') + 'Six'}
+        />
+      </CodeMirrorMerge>
+      <div style={{ display: 'flex' }}>
+        <pre style={{ flex: 1 }}>{value} </pre>
+        <pre style={{ backgroundColor: '#fff', flex: 1 }}>{valueModified} </pre>
+      </div>
+    </div>
+  );
+}
+```

www/src/pages/theme/Preview.tsx

@@ -6,6 +6,7 @@ import { Warpper } from '../../components/Warpper';
 import { PreCode } from './themes/PreCode';
 import { themeData } from './themes/Datas';
 import { Sample } from './themes/Sample';
+import Markdown from '../../components/Markdown';
 
 interface PreviewProps {
   path?: any;
@@ -76,7 +77,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
         {childs.map((child, key) => {
           return cloneElement(child as any, { key, source: mdData?.source });
         })}
-        {mdData && (previewDoc || !themePkg) && <MarkdownPreview source={mdData.source} />}
+        {mdData && (previewDoc || !themePkg) && <Markdown source={mdData.source} mdData={mdData} />}
         {!previewDoc && themePkg && themeExtensionName && <Sample theme={extension} />}
       </Content>
     </Warpper>

www/src/router.tsx

@@ -509,6 +509,11 @@ export const routes: MenuRouteObject[] = [
               </Preview>
             ),
           },
+          {
+            path: 'onchange',
+            label: 'onChange Example',
+            element: <Preview path={() => import('./pages/merge/examples/Example.md')} />,
+          },
         ],
       },
       {