react-codemirror-merge

CodeMirror merge view for React.

Install

1npm install react-codemirror-merge --save

Usage

1import CodeMirrorMerge from 'react-codemirror-merge';
2import { EditorView } from 'codemirror';
3import { EditorState } from '@codemirror/state';
4
5const Original = CodeMirrorMerge.Original;
6const Modified = CodeMirrorMerge.Modified;
7let doc = `one
8two
9three
10four
11five`;
12
13export const Example = () => {
14  return (
15    <CodeMirrorMerge orientation="b-a">
16      <Original value={doc} />
17      <Modified
18        value={doc.replace(/t/g, 'T') + 'Six'}
19        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
20      />
21    </CodeMirrorMerge>
22  );
23};

Theme

1import { useState } from 'react';
2import CodeMirrorMerge from 'react-codemirror-merge';
3import { EditorView } from 'codemirror';
4import { EditorState } from '@codemirror/state';
5
6const Original = CodeMirrorMerge.Original;
7const Modified = CodeMirrorMerge.Modified;
8let doc = `one
9two
10three
11four
12five`;
13
14export const Example = () => {
15  const [theme, setTheme] = useState('light');
16  return (
17    <CodeMirrorMerge orientation="b-a" theme={theme}>
18      <Original value={doc} />
19      <Modified
20        value={doc.replace(/t/g, 'T') + 'Six'}
21        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
22      />
23    </CodeMirrorMerge>
24  );
25};

1import React, { useState } from 'react';
2import CodeMirrorMerge from 'react-codemirror-merge';
3import { EditorView } from '@codemirror/view';
4import { javascript } from '@codemirror/lang-javascript';
5import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
6
7const Original = CodeMirrorMerge.Original;
8const Modified = CodeMirrorMerge.Modified;
9let doc = `function examle() {
10
11}`;
12
13function Example() {
14  const [theme, setTheme] = useState('light');
15  return (
16    <div>
17      <CodeMirrorMerge theme={theme === 'light' ? githubLight : githubDark} orientation="a-b">
18        <Original extensions={[javascript({ jsx: true }), EditorView.lineWrapping]} value={doc} />
19        <Modified extensions={[EditorView.lineWrapping, javascript({ jsx: true })]} value={doc.replace(/e/g, 'T')} />
20      </CodeMirrorMerge>
21      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Change Theme {theme}</button>
22    </div>
23  );
24}

Props

1import { Extension } from '@codemirror/state';
2export interface CodeMirrorMergeRef extends InternalRef {}
3export interface CodeMirrorMergeProps extends React.HTMLAttributes<HTMLDivElement>, MergeConfig {
4  theme?: 'light' | 'dark' | 'none' | Extension;
5}
6
7interface MergeConfig {
8  /**
9  Controls whether editor A or editor B is shown first. Defaults
10  to `"a-b"`.
11  */
12  orientation?: 'a-b' | 'b-a';
13  /**
14  Controls whether revert controls are shown between changed
15  chunks.
16  */
17  revertControls?: 'a-to-b' | 'b-to-a';
18  /**
19  When given, this function is called to render the button to
20  revert a chunk.
21  */
22  renderRevertControl?: () => HTMLElement;
23  /**
24  By default, the merge view will mark inserted and deleted text
25  in changed chunks. Set this to false to turn that off.
26  */
27  highlightChanges?: boolean;
28  /**
29  Controls whether a gutter marker is shown next to changed lines.
30  */
31  gutter?: boolean;
32  /**
33  When given, long stretches of unchanged text are collapsed.
34  `margin` gives the number of lines to leave visible after/before
35  a change (default is 3), and `minSize` gives the minimum amount
36  of collapsible lines that need to be present (defaults to 4).
37  */
38  collapseUnchanged?: {
39    margin?: number;
40    minSize?: number;
41  };
42}

Modified Props

1interface ModifiedProps extends Omit<DefaultExtensionsOptions, 'theme'> {
2  /**
3  The initial document. Defaults to an empty document. Can be
4  provided either as a plain string (which will be split into
5  lines according to the value of the [`lineSeparator`
6  facet](https://codemirror.net/6/docs/ref/#state.EditorState^lineSeparator)), or an instance of
7  the [`Text`](https://codemirror.net/6/docs/ref/#state.Text) class (which is what the state will use
8  to represent the document).
9  */
10  value?: string | Text;
11  /**
12  The starting selection. Defaults to a cursor at the very start
13  of the document.
14  */
15  selection?:
16    | EditorSelection
17    | {
18        anchor: number;
19        head?: number;
20      };
21  /**
22  [Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
23  */
24  extensions?: Extension;
25  /** Fired whenever a change occurs to the document. */
26  onChange?(value: string, viewUpdate: ViewUpdate): void;
27}
28
29import { Extension } from '@codemirror/state';
30import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
31import { DefaultExtensionsOptions } from '@uiw/react-codemirror';
32
33export interface DefaultExtensionsOptions {
34  indentWithTab?: boolean;
35  basicSetup?: boolean | BasicSetupOptions;
36  placeholder?: string | HTMLElement;
37  theme?: 'light' | 'dark' | 'none' | Extension;
38  readOnly?: boolean;
39  editable?: boolean;
40}

Original Props

1interface OriginalProps extends Omit<DefaultExtensionsOptions, 'theme'> {
2  /**
3  The initial document. Defaults to an empty document. Can be
4  provided either as a plain string (which will be split into
5  lines according to the value of the [`lineSeparator`
6  facet](https://codemirror.net/6/docs/ref/#state.EditorState^lineSeparator)), or an instance of
7  the [`Text`](https://codemirror.net/6/docs/ref/#state.Text) class (which is what the state will use
8  to represent the document).
9  */
10  value?: string | Text;
11  /**
12  The starting selection. Defaults to a cursor at the very start
13  of the document.
14  */
15  selection?:
16    | EditorSelection
17    | {
18        anchor: number;
19        head?: number;
20      };
21  /**
22  [Extension(s)](https://codemirror.net/6/docs/ref/#state.Extension) to associate with this state.
23  */
24  extensions?: Extension;
25  /** Fired whenever a change occurs to the document. */
26  onChange?(value: string, viewUpdate: ViewUpdate): void;
27}
28
29import { Extension } from '@codemirror/state';
30import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
31import { DefaultExtensionsOptions } from '@uiw/react-codemirror';
32
33export interface DefaultExtensionsOptions {
34  indentWithTab?: boolean;
35  basicSetup?: boolean | BasicSetupOptions;
36  placeholder?: string | HTMLElement;
37  theme?: 'light' | 'dark' | 'none' | Extension;
38  readOnly?: boolean;
39  editable?: boolean;
40}

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.