Open ledge74 opened 1 year ago
After looking at it, the props API needs to be redesigned and researched. @ledge74
Hey all, what's the current state of your thinking here @jaywcjlove @ledge74 ?
@maxgurewitz I try to add a MergeCodeMirror
component
import CodeMirror from '@uiw/react-codemirror';
import { MergeCodeMirror } from '@uiw/react-codemirror';
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
@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>
);
};
any diff_match_patch integration ideas?
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>
@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>
);
};
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
thank you @jaywcjlove !
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!