How to use MergeView plugin

[ledge74]

Hi there,

I'm trying to implement a diff editor with react-codemirror. Is there a way to use the recently created MergeView plugin with this library ?

https://github.com/codemirror/merge https://marijnhaverbeke.nl/upload/merge/

Thanks!

[jaywcjlove]

After looking at it, the props API needs to be redesigned and researched. @ledge74

[maxgurewitz]

Hey all, what's the current state of your thinking here @jaywcjlove @ledge74 ?

[jaywcjlove]

@maxgurewitz I try to add a MergeCodeMirror component

import CodeMirror from '@uiw/react-codemirror';  
import { MergeCodeMirror } from '@uiw/react-codemirror';  

[jaywcjlove]

import { MergeCodeMirror } from '@uiw/react-codemirror'; 

const Original = MergeCodeMirror.Original;
const Modified = MergeCodeMirror.Modified;

<MergeCodeMirror>
  <Original value="txt" extensions=[]/>
  <Modified value="text" extensions=[] />
</MergeCodeMirror>

@ledge74 @maxgurewitz I don't know if this design is reasonable

[jaywcjlove]

@ledge74 @maxgurewitz I have implemented an initial version.

import CodeMirrorMerge from 'react-codemirror-merge';
import { EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
let doc = `one
two
three
four
five`;

export const Example = () => {
  return (
    <CodeMirrorMerge>
      <Original value={doc} />
      <Modified
        value={doc.replace(/t/g, 'T') + 'Six'}
        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
      />
    </CodeMirrorMerge>
  );
};

[jaywcjlove]

[jaywcjlove]

https://uiwjs.github.io/react-codemirror/#/merge/document

[Salvehn]

any diff_match_patch integration ideas?

[anthonyvii27]

Does anyone know how to insert a custom theme into CodeMirrorMerge? Like the Android Studio theme that can be found in the library below.

import { androidstudio } from "@uiw/codemirror-theme-androidstudio";

I'm trying to use this component, but it's not working. For default CodeMirror (@uiw/react-codemirror), it worked perfectly.

<CodeMirrorMerge
  orientation="a-b"
  theme={androidstudio}
>
  // CONTENT
</CodeMirrorMerge>

[jaywcjlove]

@anthonyvii27

import CodeMirrorMerge from 'react-codemirror-merge';
import { EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { androidstudio } from '@uiw/codemirror-theme-androidstudio';

const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
/**
 * https://github.com/uiwjs/react-codemirror/issues/455
 */
let doc = `one
two
three
four
five`;

export const PageExample455 = () => {
  return (
    <CodeMirrorMerge style={{ width: 540 }} orientation="b-a" theme={androidstudio}>
      <Original value={doc} />
      <Modified
        value={doc.replace(/t/g, 'T') + 'Six'}
        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
      />
    </CodeMirrorMerge>
  );
};

[nichochar]

The codemirror-merge library now supports a unifiedView mode. It would be nice to have this react library support it. I'm not sure how much of the interfaces it would change however. Here's a code snippet and screenshot that show what it takes with a minimal setup:

import {unifiedMergeView} from "@codemirror/merge"
import {EditorView, basicSetup} from "codemirror"
import {EditorState} from "@codemirror/state"

let doc = `one
two
three
four
five`

new EditorView({
  doc,
  extensions: [basicSetup, unifiedMergeView({
    original: doc.replace(/t/g, "T") + "\nSix",
    mergeControls: false,
  })],
  parent: document.body
})

I need this asap, so will try to hack something up, but it would be good to have support in this (great) react library natively

[maxgurewitz]

thank you @jaywcjlove !