^{Special thanks to:}

SubList - Bill Reminder & Renewal Alerts

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

# react-codemirror-merge [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) [![npm version](https://img.shields.io/npm/v/react-codemirror-merge.svg)](https://www.npmjs.com/package/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 ( ); }; ``` ## 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 ( ); }; ``` ```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 (

); } ``` ## Props ```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](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 ```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](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](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.