feat(merge): add destroyRerender props. (#566)

Author: jaywcjlove

core/README.md

@@ -103,17 +103,12 @@ import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 
 function App() {
-  const onChange = React.useCallback((value, viewUpdate) => {
-    console.log('value:', value);
+  const [value, setValue] = React.useState("console.log('hello world!');");
+  const onChange = React.useCallback((val, viewUpdate) => {
+    console.log('val:', val);
+    setValue(val);
   }, []);
-  return (
-    <CodeMirror
-      value="console.log('hello world!');"
-      height="200px"
-      extensions={[javascript({ jsx: true })]}
-      onChange={onChange}
-    />
-  );
+  return <CodeMirror value={value} height="200px" extensions={[javascript({ jsx: true })]} onChange={onChange} />;
 }
 export default App;
 ```

merge/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@codemirror/merge": "^6.1.0",
+    "@codemirror/merge": "^6.1.2",
     "@uiw/react-codemirror": "4.21.15"
   },
   "keywords": [

merge/src/Internal.tsx

@@ -22,6 +22,7 @@ export const Internal = React.forwardRef<InternalRef, CodeMirrorMergeProps>((pro
     highlightChanges,
     gutter,
     collapseUnchanged,
+    destroyRerender,
     renderRevertControl,
     ...elmProps
   } = props;
@@ -95,26 +96,28 @@ export const Internal = React.forwardRef<InternalRef, CodeMirrorMergeProps>((pro
         });
       }
     }
-    view.current?.destroy();
-    view.current = new MergeView({
-      a: {
-        ...original,
-        extensions: [
-          ...(originalExtension?.extension || []),
-          ...getDefaultExtensions({ ...originalExtension?.option, theme }),
-        ],
-      },
-      b: {
-        ...modified,
-        extensions: [
-          ...(modifiedExtension?.extension || []),
-          ...getDefaultExtensions({ ...modifiedExtension?.option, theme }),
-        ],
-      },
-      parent: editor.current!,
-      ...opts,
-    });
-  }, [view, theme, editor.current, original, modified, originalExtension, modifiedExtension]);
+    if (destroyRerender) {
+      view.current?.destroy();
+      view.current = new MergeView({
+        a: {
+          ...original,
+          extensions: [
+            ...(originalExtension?.extension || []),
+            ...getDefaultExtensions({ ...originalExtension?.option, theme }),
+          ],
+        },
+        b: {
+          ...modified,
+          extensions: [
+            ...(modifiedExtension?.extension || []),
+            ...getDefaultExtensions({ ...modifiedExtension?.option, theme }),
+          ],
+        },
+        parent: editor.current!,
+        ...opts,
+      });
+    }
+  }, [view, theme, editor.current, original, modified, originalExtension, modifiedExtension, destroyRerender]);
 
   useEffect(() => () => view.current && view.current.destroy(), []);
 

merge/src/index.tsx

@@ -8,6 +8,10 @@ import { Provider, InitialState } from './store';
 export interface CodeMirrorMergeRef extends InternalRef {}
 export interface CodeMirrorMergeProps extends React.HTMLAttributes<HTMLDivElement>, MergeConfig {
   theme?: InitialState['theme'];
+  /**
+   * Default is `false`. If true, the editor will be destroyed and re-rendered every time the editor is updated.
+   */
+  destroyRerender?: boolean;
 }
 
 const InternalCodeMirror = React.forwardRef<CodeMirrorMergeRef, CodeMirrorMergeProps>(({ theme, ...props }, ref) => {

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

@@ -31,7 +31,7 @@ export default function App() {
           value={doc.replace(/t/g, 'T') + 'Six'}
         />
       </CodeMirrorMerge>
-      <div style={{ display: 'flex' }}>
+      <div style={{ display: 'flex', marginTop: 10 }}>
         <pre style={{ flex: 1 }}>{value} </pre>
         <pre style={{ backgroundColor: '#fff', flex: 1 }}>{valueModified} </pre>
       </div>

www/src/pages/theme/Preview.tsx

@@ -58,7 +58,7 @@ const ButtonGroup = styled.div`
 `;
 
 export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
-  const { themePkg, mode } = props;
+  const { themePkg, mode, children } = props;
   const { mdData } = useMdData(props.path);
   const [previewDoc, setPreviewDoc] = useState<PreviewProps['preview']>(props.preview || 'example');
   const themePkgNmae = !!mode ? themePkg?.replace(/-(light|dark)$/, '') : themePkg;
@@ -90,6 +90,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
             <PreCode value={`npm install ${themePkg} --save`} />
           </Header>
         )}
+        {children}
         {mdData && (previewDoc === 'document' || !themePkg) && <Markdown source={mdData.source} mdData={mdData} />}
         {previewDoc === 'example' && themePkg && themeExtensionName && <Sample theme={extension} />}
       </Content>