4.22.0 • Published 6 days ago
react-codemirror-merge v4.22.0
react-codemirror-merge
CodeMirror merge view for React.
Install
npm install react-codemirror-merge --save
Usage
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 orientation="b-a">
<Original value={doc} />
<Modified
value={doc.replace(/t/g, 'T') + 'Six'}
extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
/>
</CodeMirrorMerge>
);
};
Theme
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>
);
}
Props
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;
};
}
Modified Props
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;
}
Original Props
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;
}
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.
4.22.0
6 days ago
4.21.25
1 month ago
4.21.24
2 months ago
4.21.23
2 months ago
4.21.22
3 months ago
4.21.19
7 months ago
4.21.21
5 months ago
4.21.20
7 months ago
4.21.18
8 months ago
4.21.15
8 months ago
4.21.14
8 months ago
4.21.17
8 months ago
4.21.16
8 months ago
4.21.11
8 months ago
4.21.10
8 months ago
4.21.13
8 months ago
4.21.12
8 months ago
4.21.1
11 months ago
4.21.2
11 months ago
4.20.3
11 months ago
4.21.3
11 months ago
4.20.4
11 months ago
4.21.4
11 months ago
4.21.0
11 months ago
4.21.9
9 months ago
4.21.5
10 months ago
4.21.6
10 months ago
4.21.7
10 months ago
4.21.8
10 months ago
4.20.2
12 months ago
4.20.1
12 months ago
4.20.0
12 months ago
4.19.16
1 year ago
4.19.15
1 year ago
4.19.14
1 year ago
4.19.13
1 year ago
4.19.12
1 year ago
0.0.1
1 year ago