^{Using my app is also a way to support me:}

react-codemirror-merge


CodeMirror merge view for React.

Install

``bash
npm install react-codemirror-merge --save
`

Usage

`jsx
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 (


value={doc.replace(/t/g, 'T') + 'Six'}
extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
/>

);
};
`

Theme

`jsx
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 (


value={doc.replace(/t/g, 'T') + 'Six'}
extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
/>

);
};
`

`jsx
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 (


`ts
import { Extension } from '@codemirror/state';
export interface CodeMirrorMergeRef extends InternalRef {}
export interface CodeMirrorMergeProps extends React.HTMLAttributes, 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

`ts
interface ModifiedProps extends Omit {
/**
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), or an instance of
the 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) 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

`ts
interface OriginalProps extends Omit {
/**
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), or an instance of
the 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) 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.