Mergely
Mergely is a javascript component to diff/merge files interactively in a browser, providing rich API that enables you to easily integrate Mergely into your existing web application. It is suitable for comparing text files online, e.g. .txt, .html, .xml, .c, .cpp, .java, etc. Mergely has a javascript implementation of the Longest Common Subsequence diff algorithm (LCS) and a customizable markup engine.
Installation
Installation via webpack
The recommended way to install mergely is to use npm and webpack to install mergely and its dependencies. It is highly recommended that you start by cloning mergely-webpack. It has everything that you need to get started.
Angular 6.1.1
You can also use mergely within angular. You can start by cloning mergely-angular.
Installation via .tgz
Unpack mergely.tgz into a folder, e.g. ./lib
, and then add the following to the <head>
of your target html source file.
Create a div for the editor in <body>
. This example uses a style that provides 8px padding (mergely-full-screen-8
):
Then initialize mergely, setting options as required.
;
Synchronous content initialization
The following example can be used to set the lhs
and rhs
editors synchronously (i.e. their contents are already known):
;
Aynchronous initialization
If the editor contents are retrieved asynchronously (recommended), then retrieve the editor contents and set them:
;
Options
Option | Type | Default value | Description |
---|---|---|---|
autoresize | boolean | true |
Enables/disables the auto-resizing of the editor. |
autoupdate | boolean | true |
Enables/disables the auto-updating of the editor when changes are made. |
bgcolor | string | #eeeeee |
The background color that mergely fills the margin canvas with. |
change_timeout | number | 500 |
The timeout, after a text change, before Mergely calcualtes a diff. Only used when readonly enabled. |
cmsettings | object | {mode: 'text/plain', readOnly: false} |
CodeMirror settings (see CodeMirror) that are combined with lhs_cmsettings and rhs_cmsettings . |
editor_width | string | 400px |
Starting width. |
editor_height | string | 400px |
Starting height. |
fadein | string | fast |
A jQuery fadein value to enable the editor to fade in. Set to empty string to disable. |
fgcolor | string|number|object | {a:'#4ba3fa', c:'#a3a3a3', d:'#ff7f7f', ca:'#4b73ff', cc:'#434343', cd:'#ff4f4f'} |
The foreground color that mergely marks changes with on the canvas. The value a is additions, c changes, d deletions, and the prefix c indicates current/active change (e.g. cd current delection). |
ignorews | boolean | false |
Ignores white-space. |
ignorecase | boolean | false |
Ignores case when differientiating. |
lcs | boolean | true |
Enables/disables LCS computation for paragraphs (word-by-word changes). Disabling can give a performance gain for large documents. |
license | string | lgpl |
The choice of license to use with Mergely. Valid values are: lgpl , gpl , mpl or lgpl-separate-notice , gpl-separate-notice , mpl-separate-notice (the license requirements are met in a spearate notice file). |
line_numbers | boolean | true |
Enables/disables line numbers. Enabling line numbers will toggle the visibility of the line number margins. |
lhs_cmsettings | object | {} |
The CodeMirror settings (see CodeMirror) for the left-hand side editor. |
resize_timeout | number | 500 |
The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled. |
rhs_cmsettings | object | {} |
The CodeMirror settings (see CodeMirror) for the right-hand side editor. |
rhs_margin | string | right |
Location for the rhs markup margin is either right or left. |
sidebar | boolean | true |
Enables/disables sidebar markers. Disabling can give a performance gain for large documents. |
vpcolor | string | rgba(0, 0, 200, 0.5) |
The margin/viewport indicator color. |
viewport | boolean | false |
Enables/disables the viewport. Enabling the viewport can give a performance gain for large documents. |
wrap_lines | boolean | false |
Enables/disables line wrapping. Enabling wrapping will wrap text to fit the editors. |
Options - Callbacks
Methods
clear
Clears the editor contents for the specified side
.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
Example
;
cm
Gets the CodeMirror editor for the specified side
.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
Example
;
diff
Calculates and returns the current .diff file.
Parameters
None.
Example
;
get
Gets the text editor contents for the specified side
.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
Example
;
lhs
Sets the value of the left-hand editor.
Parameters
Name | Type | Description |
---|---|---|
value | string | The editor text. |
Example
;
merge
Merges whole file from the specified side
to the opposite side.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
Example
;
mergeCurrentChange
Merges the current change from the specified side
to the opposite side.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
Example
;
options
Sets the editor options. Will automatically update with the new settings unless autoupdate
is disabled, in which case, you will need to explicitly call update
.
Parameters
Name | Type | Description |
---|---|---|
options | object | The options to set. |
Example
;
options
Gets the editor options.
Parameters
None.
Example
;
resize
Resize the editor. Must be called explicitly if autoresize
is disabled.
Parameters
None.
Example
;
rhs
Sets the value of the right-hand editor.
Parameters
Name | Type | Description |
---|---|---|
value | string | The editor text. |
Example
;
scrollTo
Scrolls the side
to line number specified by num
.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
num | number | The line number. |
Example
;
scrollToDiff
Scrolls to the next change specified by direction
.
Parameters
Name | Type | Description |
---|---|---|
direction | string | The direction to scroll, either prev or next . |
Example
;
search
Search the editor for text
, scrolling to the next available match. Repeating the call will find the next available token.
Parameters
Name | Type | Description |
---|---|---|
side | string | The editor side, either lhs or rhs . |
text | string | The text to search. |
Example
;
swap
Swap the content of the left and right editors.
Parameters
None.
Example
;
unmarkup
Clears the editor markup.
Parameters
None.
Example
;
update
Manual update; recalculates diff and applies new settings.
Parameters
None.
Example
;