JSPM

  • Created
  • Published
  • Downloads 167061
  • Score
    100M100P100Q161969F
  • License MIT

A diff/merge view for CodeMirror

Package Exports

  • @codemirror/merge

Readme

class MergeView

A merge view manages two editors side-by-side, highlighting the difference between them and vertically aligning unchanged lines. If you want one of the editors to be read-only, you have to configure that in its extensions.

By default, views are not scrollable. Style them (.cm-mergeView) with a height and overflow: auto to make them scrollable.

new MergeView(configObject)

Create a new merge view.

config
a: EditorStateConfig

Configuration for the first editor (the left one in a left-to-right context).

b: EditorStateConfig

Configuration for the second editor.

parent⁠?: Element | DocumentFragment

Parent element to append the view to.

root⁠?: Document | ShadowRoot

An optional root. Only necessary if the view is mounted in a shadow root or a document other than the global document object.

revertControls⁠?: "a-to-b" | "b-to-a"

Controls whether revert controls are shown between changed chunks.

renderRevertControl⁠?: fn() → HTMLElement

When given, this function is called to render the button to revert a chunk.

highlightChanges⁠?: boolean

By default, the merge view will mark inserted and deleted text in changed chunks. Set this to false to turn that off.

gutter⁠?: boolean

Controls whether a gutter marker is shown next to changed lines.

collapseUnchanged⁠?: {margin⁠?: number, minSize⁠?: number}

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).

a: EditorView

The first editor.

b: EditorView

The second editor.

dom: HTMLElement

The outer DOM element holding the view.

chunks: readonly Chunk[]

The current set of changed chunks.

destroy()

Destroy this merge view.

class Chunk

A chunk describes a range of lines which have changed content in them. Either side (a/b) may either be empty (when its to is equal to its from), or points at a range starting at the start of the first changed line, to 1 past the end of the last changed line. Note that to positions may point past the end of the document. Use endA/endB if you need an end position that is certain to be a valid document position.

new Chunk(changes: readonly Change[], fromAnumber, toAnumber, fromBnumber, toBnumber)
changes: readonly Change[]

The individual changes inside this chunk. These are stored relative to the start of the chunk, so you have to add chunk.fromA/fromB to get document positions.

fromA: number

The start of the chunk in document A.

toA: number

The end of the chunk in document A. This is equal to fromA when the chunk covers no lines in document A, or is one unit past the end of the last line in the chunk if it does.

fromB: number

The start of the chunk in document B.

toB: number

The end of the chunk in document A.

endA: number

Returns fromA if the chunk is empty in A, or the end of the last line in the chunk otherwise.

endB: number

Returns fromB if the chunk is empty in B, or the end of the last line in the chunk otherwise.

getChunks(stateEditorState) → {chunks: readonly Chunk[], side: "a" | "b"} | null

Get the changed chunks for the merge view that this editor is part of, plus the side it is on. Or null if the editor isn't part of a merge view or the merge view hasn't finished initializing yet.

This package also exports the diffing utilities it uses internally.

class Change

A changed range.

new Change(fromAnumber, toAnumber, fromBnumber, toBnumber)
fromA: number

The start of the change in document A.

toA: number

The end of the change in document A. This is equal to fromA in case of insertions.

fromB: number

The start of the change in document B.

toB: number

The end of the change in document B. This is equal to fromB for deletions.

diff(astring, bstring) → readonly Change[]

Compute the difference between two strings.

presentableDiff(astring, bstring) → readonly Change[]

Compute the difference between the given strings, and clean up the resulting diff for presentation to users by dropping short unchanged ranges, and aligning changes to word boundaries when appropriate.