CodeMirror merge view for React.
npm install react-codemirror-merge --saveimport 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 orientation="b-a">
<Original value={doc} />
<Modified
value={doc.replace(/t/g, 'T') + 'Six'}
extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
/>
</CodeMirrorMerge>
);
};import { useState } from 'react';
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 = () => {
const [theme, setTheme] = useState('light');
return (
<CodeMirrorMerge orientation="b-a" theme={theme}>
<Original value={doc} />
<Modified
value={doc.replace(/t/g, 'T') + 'Six'}
extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
/>
</CodeMirrorMerge>
);
};import React, { useState } from 'react';
import CodeMirrorMerge from 'react-codemirror-merge';
import { EditorView } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
const Original = CodeMirrorMerge.Original;
const Modified = CodeMirrorMerge.Modified;
let doc = `function examle() {
}`;
function Example() {
const [theme, setTheme] = useState('light');
return (
<div>
<CodeMirrorMerge theme={theme === 'light' ? githubLight : githubDark} orientation="a-b">
<Original extensions={[javascript({ jsx: true }), EditorView.lineWrapping]} value={doc} />
<Modified extensions={[EditorView.lineWrapping, javascript({ jsx: true })]} value={doc.replace(/e/g, 'T')} />
</CodeMirrorMerge>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Change Theme {theme}</button>
</div>
);
}import { Extension } from '@codemirror/state';
export interface CodeMirrorMergeRef extends InternalRef {}
export interface CodeMirrorMergeProps extends React.HTMLAttributes<HTMLDivElement>, MergeConfig {
theme?: 'light' | 'dark' | 'none' | Extension;
}
interface MergeConfig {
/**
Controls whether editor A or editor B is shown first. Defaults
to `"a-b"`.
*/
orientation?: 'a-b' | 'b-a';
/**
Controls whether revert controls are shown between changed
chunks.
*/
revertControls?: 'a-to-b' | 'b-to-a';
/**
When given, this function is called to render the button to
revert a chunk.
*/
renderRevertControl?: () => HTMLElement;
/**
By default, the merge view will mark inserted and deleted text
in changed chunks. Set this to false to turn that off.
*/
highlightChanges?: boolean;
/**
Controls whether a gutter marker is shown next to changed lines.
*/
gutter?: boolean;
/**
When given, long stretches of unchanged text are collapsed.
`margin` gives the number of lines to leave visible after/before
a change (default is 3), and `minSize` gives the minimum amount
of collapsible lines that need to be present (defaults to 4).
*/
collapseUnchanged?: {
margin?: number;
minSize?: number;
};
}interface ModifiedProps extends Omit<DefaultExtensionsOptions, 'theme'> {
/**
The initial document. Defaults to an empty document. Can be
provided either as a plain string (which will be split into
lines according to the value of the [`lineSeparator`
facet](https://codemirror.net/6/docs/ref/#state.EditorState^lineSeparator)), or an instance of
the [`Text`](https://codemirror.net/6/docs/ref/#state.Text) class (which is what the state will use
to represent the document).
*/
value?: string | Text;
/**
The starting selection. Defaults to a cursor at the very start
of the document.
*/
selection?:
| EditorSelection
| {
anchor: number;
head?: number;
};
/**
[Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
*/
extensions?: Extension;
/** Fired whenever a change occurs to the document. */
onChange?(value: string, viewUpdate: ViewUpdate): void;
}
import { Extension } from '@codemirror/state';
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
import { DefaultExtensionsOptions } from '@uiw/react-codemirror';
export interface DefaultExtensionsOptions {
indentWithTab?: boolean;
basicSetup?: boolean | BasicSetupOptions;
placeholder?: string | HTMLElement;
theme?: 'light' | 'dark' | 'none' | Extension;
readOnly?: boolean;
editable?: boolean;
}interface OriginalProps extends Omit<DefaultExtensionsOptions, 'theme'> {
/**
The initial document. Defaults to an empty document. Can be
provided either as a plain string (which will be split into
lines according to the value of the [`lineSeparator`
facet](https://codemirror.net/6/docs/ref/#state.EditorState^lineSeparator)), or an instance of
the [`Text`](https://codemirror.net/6/docs/ref/#state.Text) class (which is what the state will use
to represent the document).
*/
value?: string | Text;
/**
The starting selection. Defaults to a cursor at the very start
of the document.
*/
selection?:
| EditorSelection
| {
anchor: number;
head?: number;
};
/**
[Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
*/
extensions?: Extension;
/** Fired whenever a change occurs to the document. */
onChange?(value: string, viewUpdate: ViewUpdate): void;
}
import { Extension } from '@codemirror/state';
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
import { DefaultExtensionsOptions } from '@uiw/react-codemirror';
export interface DefaultExtensionsOptions {
indentWithTab?: boolean;
basicSetup?: boolean | BasicSetupOptions;
placeholder?: string | HTMLElement;
theme?: 'light' | 'dark' | 'none' | Extension;
readOnly?: boolean;
editable?: boolean;
}As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.