Compare commits
2 Commits
4.2.2
...
webpack-up
| Author | SHA1 | Date | |
|---|---|---|---|
|
c54c2203b3 | ||
|
|
d31879273b |
51
CHANGES.md
51
CHANGES.md
@@ -1,50 +1,5 @@
|
||||
# Changes
|
||||
|
||||
## 4.2.2:
|
||||
* patch: fixes issue where initial change was not being set causing next/prev and merge actions to not work as expected.
|
||||
|
||||
## 4.2.1:
|
||||
* chore: updated dependencies, cleared security issues
|
||||
|
||||
## 4.2.0:
|
||||
* minor: added new option `ignoreaccents` to ignore accented characters.
|
||||
|
||||
## 4.1.2:
|
||||
* patch: fixes issue #134 where the readme had broken links.
|
||||
|
||||
## 4.1.1:
|
||||
* patch: fixes issue #95 where cursor was not focusing correctly on init.
|
||||
|
||||
## 4.1.0:
|
||||
* minor: emits 'updated' event after every change.
|
||||
* patch: fixes `scrollTo` that no longer functioned after a codemirror update.
|
||||
* patch: fixes `loaded` being called prematurely and after every resize, and is now is called once, after the 'updated' event.
|
||||
|
||||
## 4.0.16:
|
||||
* patch: fixes rendering beyond change constraint
|
||||
|
||||
## 4.0.15
|
||||
* patch: removed unnecessary addon mark-selected
|
||||
|
||||
## 4.0.14
|
||||
* patch: fixes issue #104 where diff text conflicted with selected text
|
||||
|
||||
## 4.0.13
|
||||
* patch: fixed issue where `lhs_cmsettings` and `lhs_cmsettings` were ignored
|
||||
* patch: updated documentation
|
||||
* patch: fixed typos
|
||||
* patch: fixes issue #115 merging deleted line(s) from lhs would munge rhs text
|
||||
* patch: fixes two typos in README.md
|
||||
|
||||
## 4.0.11
|
||||
* patch: fixes typo in example ajax.html
|
||||
|
||||
## 4.0.10
|
||||
* patch: fixes bad 4.0.9 artifacts
|
||||
|
||||
## 4.0.9
|
||||
* patch: fixes issue #106 merge edge-case with add
|
||||
|
||||
## 4.0.8
|
||||
* chore: updated webpack
|
||||
|
||||
@@ -53,15 +8,15 @@
|
||||
|
||||
## 4.0.6
|
||||
|
||||
* patch: fixes issue #89 missing merge buttons
|
||||
* #89: fixes missing merge buttons
|
||||
|
||||
## 4.0.5
|
||||
|
||||
* patch: fixes issue #85 XSS vulnerability with DOM id
|
||||
* #85: fixes XSS vulnerability with DOM id
|
||||
|
||||
## 4.0.2
|
||||
|
||||
* patch: fixes issue #83 poor rendering performance
|
||||
* #83: fixes poor rendering performance
|
||||
|
||||
## 4.0.0
|
||||
|
||||
|
||||
43
README.md
43
README.md
@@ -1,24 +1,20 @@
|
||||
# Mergely
|
||||
|
||||
https://mergely.com
|
||||
http://mergely.com
|
||||
|
||||
Mergely is a JavaScript component for differencing and merging files interactively in a browser (diff/merge), providing rich API that enables you to easily integrate Mergely into your existing web application. It is suitable for comparing text files online, for example, .txt, .html, .xml, .c, .cpp, .java, etc.
|
||||
|
||||
Mergely has a JavaScript implementation of the Longest Common Subsequence (LCS) diff algorithm, and a customizable markup engine.
|
||||
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 and its dependencies is to use a Node package manager (`npm` or `yarn`) and [webpack](https://webpack.js.org/).
|
||||
|
||||
It is highly recommended that you start by cloning [mergely-webpack](https://github.com/wickedest/mergely-webpack). The webpack has everything that you need to get started.
|
||||
The recommended way to install mergely is to use npm and [webpack](https://webpack.js.org/) to install mergely and its dependencies. It is highly recommended that you start by cloning [mergely-webpack](https://github.com/wickedest/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](https://github.com/wickedest/mergely-angular).
|
||||
You can also use mergely within angular. You can start by cloning [mergely-angular](https://github.com/wickedest/mergely-angular).
|
||||
|
||||
### Installation via .tgz
|
||||
|
||||
Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to the `<head>` of your target HTML source file.
|
||||
Unpack mergely.tgz into a folder, e.g. `./lib`, and then add the following to the `<head>` of your target html source file.
|
||||
|
||||
```html
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
@@ -29,9 +25,7 @@ Unpack mergely.tgz into a folder, for example, `./lib`, and add the following to
|
||||
<link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css" />
|
||||
```
|
||||
|
||||
Create a div for the editor in `<body>`.
|
||||
|
||||
This example uses a style that provides 8px padding (`mergely-full-screen-8`):
|
||||
Create a div for the editor in `<body>`. This example uses a style that provides 8px padding (`mergely-full-screen-8`):
|
||||
|
||||
```html
|
||||
<div class="mergely-full-screen-8">
|
||||
@@ -51,7 +45,7 @@ $(document).ready(function () {
|
||||
|
||||
### Synchronous content initialization
|
||||
|
||||
The following example can be used to set the `lhs` and `rhs` editors synchronously (that is, when their contents are already known):
|
||||
The following example can be used to set the `lhs` and `rhs` editors synchronously (i.e. their contents are already known):
|
||||
|
||||
```js
|
||||
$(document).ready(function () {
|
||||
@@ -67,7 +61,7 @@ $(document).ready(function () {
|
||||
});
|
||||
```
|
||||
|
||||
### Asynchronous initialization
|
||||
### Aynchronous initialization
|
||||
|
||||
If the editor contents are retrieved asynchronously (recommended), then retrieve the editor contents and set them:
|
||||
|
||||
@@ -92,22 +86,21 @@ $(document).ready(function () {
|
||||
|<a name="autoresize"></a>autoresize|boolean|`true`|Enables/disables the auto-resizing of the editor.|
|
||||
|<a name="autoupdate"></a>autoupdate|boolean|`true`|Enables/disables the auto-updating of the editor when changes are made.|
|
||||
|<a name="bgcolor"></a>bgcolor|string|`#eeeeee`|The background color that mergely fills the margin canvas with.|
|
||||
|<a name="change_timeout"></a>change_timeout|number|`500`|The timeout, after a text change, before Mergely calculates a diff. Only used when `readonly` is enabled.|
|
||||
|<a name="cmsettings"></a>cmsettings|object|`{mode: 'text/plain', readOnly: false}`|CodeMirror settings (see [CodeMirror](https://codemirror.net)) that are combined with `lhs_cmsettings` and `rhs_cmsettings`.|
|
||||
|<a name="change_timeout"></a>change_timeout|number|`500`|The timeout, after a text change, before Mergely calcualtes a diff. Only used when `readonly` enabled.|
|
||||
|<a name="cmsettings"></a>cmsettings|object|`{mode: 'text/plain', readOnly: false}`|CodeMirror settings (see [CodeMirror](http://codemirror.net])) that are combined with `lhs_cmsettings` and `rhs_cmsettings`.|
|
||||
|<a name="editor_width"></a>editor_width|string|`400px`|Starting width.|
|
||||
|<a name="editor_height"></a>editor_height|string|`400px`|Starting height.|
|
||||
|<a name="fadein"></a>fadein|string|`fast`|A jQuery [fadein](http://api.jquery.com/fadein) value to enable the editor to fade in. Set to empty string to disable.|
|
||||
|<a name="fgcolor"></a>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).|
|
||||
|<a name="ignorews"></a>ignorews|boolean|`false`|Ignores white-space.|
|
||||
|<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case when differientiating.|
|
||||
|<a name="ignoreaccents"></a>ignorews|boolean|`false`|Ignores accented characters.|
|
||||
|<a name="ignorecase"></a>ignorecase|boolean|`false`|Ignores case when differientiating.
|
||||
|<a name="lcs"></a>lcs|boolean|`true`|Enables/disables LCS computation for paragraphs (word-by-word changes). Disabling can give a performance gain for large documents.|
|
||||
|<a name="license"></a>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 separate notice file).|
|
||||
|<a name="license"></a>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).|
|
||||
|<a name="line_numbers"></a>line_numbers|boolean|`true`|Enables/disables line numbers. Enabling line numbers will toggle the visibility of the line number margins.|
|
||||
|<a name="lhs_cmsettings"></a>lhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](https://codemirror.net)) for the left-hand side editor.|
|
||||
|<a name="lhs_cmsettings"></a>lhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](http://codemirror.net])) for the left-hand side editor.|
|
||||
|<a name="resize_timeout"></a>resize_timeout|number|`500`|The timeout, after a resize, before Mergely auto-resizes. Only used when autoresize enabled.|
|
||||
|<a name="rhs_cmsettings"></a>rhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](https://codemirror.net)) for the right-hand side editor.|
|
||||
|<a name="rhs_margin"></a>rhs_margin|string|`right`|Location for the rhs markup margin. Possible values: right, left.|
|
||||
|<a name="rhs_cmsettings"></a>rhs_cmsettings|object|`{}`|The CodeMirror settings (see [CodeMirror](http://codemirror.net])) for the right-hand side editor.|
|
||||
|<a name="rhs_margin"></a>rhs_margin|string|`right`|Location for the rhs markup margin is either right or left.|
|
||||
|<a name="sidebar"></a>sidebar|boolean|`true`|Enables/disables sidebar markers. Disabling can give a performance gain for large documents.|
|
||||
|<a name="vpcolor"></a>vpcolor|string|`rgba(0, 0, 200, 0.5)`|The margin/viewport indicator color.|
|
||||
|<a name="viewport"></a>viewport|boolean|`false`|Enables/disables the viewport. Enabling the viewport can give a performance gain for large documents.|
|
||||
@@ -250,7 +243,7 @@ $('#mergely').mergely('options');
|
||||
|
||||
### resize
|
||||
|
||||
Resizes the editor. It must be called explicitly if `autoresize` is disabled.
|
||||
Resize the editor. Must be called explicitly if `autoresize` is disabled.
|
||||
|
||||
#### Parameters
|
||||
None.
|
||||
@@ -320,7 +313,7 @@ $('#mergely').mergely('search', 'lhs', 'needle');
|
||||
|
||||
### swap
|
||||
|
||||
Swaps the content of the left and right editors.
|
||||
Swap the content of the left and right editors.
|
||||
|
||||
#### Parameters
|
||||
None.
|
||||
@@ -344,7 +337,7 @@ $('#mergely').mergely('unmarkup');
|
||||
|
||||
### update
|
||||
|
||||
Manually updates the editor by recalculating the diff and applying new settings.
|
||||
Manual update; recalculates diff and applies new settings.
|
||||
|
||||
#### Parameters
|
||||
None.
|
||||
|
||||
@@ -104,7 +104,7 @@ This example demonstrates how to set left and right editors using ajax.
|
||||
//a.innerHTML = "content ready.";
|
||||
}
|
||||
document.getElementById('save-lhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
|
||||
document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "rhs"); }, false);
|
||||
document.getElementById('save-rhs').addEventListener('mouseover', function() { download_content(this, "lhs"); }, false);
|
||||
document.getElementById('ignorews').addEventListener('change', function() {
|
||||
$('#compare').mergely('options', { ignorews: this.checked });
|
||||
}, false);
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
require('codemirror/addon/selection/mark-selection.js');
|
||||
require('codemirror/lib/codemirror.css');
|
||||
require('../src/mergely.css');
|
||||
|
||||
|
||||
@@ -53,13 +53,11 @@ module.exports = function(config) {
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{
|
||||
from: 'src/mergely.css',
|
||||
to: 'mergely.css',
|
||||
toType: 'file'
|
||||
}]
|
||||
})
|
||||
new CopyWebpackPlugin([{
|
||||
from: 'src/mergely.css',
|
||||
to: 'mergely.css',
|
||||
toType: 'file'
|
||||
}])
|
||||
]
|
||||
},
|
||||
webpackServer: {
|
||||
|
||||
39
package.json
39
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mergely",
|
||||
"version": "4.2.2",
|
||||
"version": "4.0.8",
|
||||
"description": "A javascript UI for diff/merge",
|
||||
"directories": {
|
||||
"doc": "doc",
|
||||
@@ -36,33 +36,34 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.1.6",
|
||||
"@babel/preset-env": "^7.1.6",
|
||||
"@webpack-cli/init": "^1.0.1",
|
||||
"@webpack-cli/init": "^0.1.2",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"chai": "^4.1.2",
|
||||
"codemirror": "^5.50.2",
|
||||
"copy-webpack-plugin": "^6.2.1",
|
||||
"css-loader": "^5.0.0",
|
||||
"file-loader": "^6.1.1",
|
||||
"html-webpack-plugin": "^4.5.0",
|
||||
"image-webpack-loader": "^7.0.1",
|
||||
"jquery": "^3.5.1",
|
||||
"karma": "^5.2.3",
|
||||
"codemirror": "^5.32.0",
|
||||
"copy-webpack-plugin": "^4.6.0",
|
||||
"css-loader": "^0.28.11",
|
||||
"file-loader": "^1.1.5",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"image-webpack-loader": "^3.4.2",
|
||||
"jquery": "^3.2.1",
|
||||
"karma": "^3.1.1",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-chrome-launcher": "^3.1.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-coverage-istanbul-reporter": "^1.3.0",
|
||||
"karma-mocha": "^2.0.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-mocha-reporter": "^2.2.5",
|
||||
"karma-webpack": "^4.0.2",
|
||||
"mocha": "^8.1.3",
|
||||
"style-loader": "^2.0.0",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack-cli": "^4.0.0",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
"karma-webpack": "^2.0.9",
|
||||
"mocha": "^4.0.1",
|
||||
"style-loader": "^0.23.0",
|
||||
"uglifyjs-webpack-plugin": "^2.0.1",
|
||||
"webpack": "^4.20.2",
|
||||
"webpack-cli": "^3.1.2",
|
||||
"webpack-dev-server": "^3.1.9"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rm -rf lib && webpack --config ./webpack.prod.js",
|
||||
"start": "webpack serve --config webpack.dev.js",
|
||||
"start": "webpack-dev-server -w --debug --progress --colors --config ./webpack.dev.js --content-base ./dist --inline --hot --host 0.0.0.0",
|
||||
"test": "karma start",
|
||||
"test:chrome": "karma start --browsers Chrome --singleRun=false"
|
||||
}
|
||||
|
||||
@@ -48,4 +48,3 @@
|
||||
.mergely.current.CodeMirror-linenumber { color: #F9F9F9; font-weight: bold; background-color: #777; }
|
||||
.CodeMirror-linenumber { cursor: pointer; }
|
||||
.CodeMirror-code { color: #717171; }
|
||||
span.CodeMirror-selectedtext { background: none !important; }
|
||||
|
||||
@@ -41,19 +41,15 @@ Mgly.sizeOf = function(obj) {
|
||||
return size;
|
||||
};
|
||||
|
||||
Mgly.LCS = function(x, y, options) {
|
||||
Mgly.LCS = function(x, y) {
|
||||
this.x = (x && x.replace(/[ ]{1}/g, '\n')) || '';
|
||||
this.y = (y && y.replace(/[ ]{1}/g, '\n')) || '';
|
||||
this.options = options;
|
||||
};
|
||||
|
||||
jQuery.extend(Mgly.LCS.prototype, {
|
||||
clear: function() { this.ready = 0; },
|
||||
diff: function(added, removed) {
|
||||
var d = new Mgly.diff(this.x, this.y, {
|
||||
ignorews: false,
|
||||
ignoreaccents: !!this.options.ignoreaccents
|
||||
});
|
||||
var d = new Mgly.diff(this.x, this.y, {ignorews: false});
|
||||
var changes = Mgly.DiffParser(d.normal_form());
|
||||
var li = 0, lj = 0;
|
||||
for (var i = 0; i < changes.length; ++i) {
|
||||
@@ -90,6 +86,7 @@ Mgly.CodeifyText = function(settings) {
|
||||
this._max_code = 0;
|
||||
this._diff_codes = {};
|
||||
this.ctxs = {};
|
||||
this.options = {ignorews: false};
|
||||
jQuery.extend(this, settings);
|
||||
this.lhs = settings.lhs.split('\n');
|
||||
this.rhs = settings.rhs.split('\n');
|
||||
@@ -122,9 +119,6 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
|
||||
if (this.options.ignorecase) {
|
||||
line = line.toLowerCase();
|
||||
}
|
||||
if (this.options.ignoreaccents) {
|
||||
line = line.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
||||
}
|
||||
var aCode = this._diff_codes[line];
|
||||
if (aCode != undefined) {
|
||||
ctx.codes[i] = aCode;
|
||||
@@ -139,7 +133,7 @@ jQuery.extend(Mgly.CodeifyText.prototype, {
|
||||
});
|
||||
|
||||
Mgly.diff = function(lhs, rhs, options) {
|
||||
var opts = jQuery.extend({ignorews: false, ignoreaccents: false}, options);
|
||||
var opts = jQuery.extend({ignorews: false}, options);
|
||||
this.codeify = new Mgly.CodeifyText({
|
||||
lhs: lhs,
|
||||
rhs: rhs,
|
||||
@@ -373,7 +367,7 @@ Mgly.CodeMirrorDiffView = function(el, options) {
|
||||
CodeMirror.defineExtension('centerOnCursor', function() {
|
||||
var coords = this.cursorCoords(null, 'local');
|
||||
this.scrollTo(null,
|
||||
(coords.top + coords.bottom) / 2 - (this.getScrollerElement().clientHeight / 2));
|
||||
(coords.y + coords.yBot) / 2 - (this.getScrollerElement().clientHeight / 2));
|
||||
});
|
||||
this.init(el, options);
|
||||
};
|
||||
@@ -391,7 +385,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
viewport: false,
|
||||
ignorews: false,
|
||||
ignorecase: false,
|
||||
ignoreaccents: false,
|
||||
fadein: 'fast',
|
||||
resize_timeout: 500,
|
||||
change_timeout: 150,
|
||||
@@ -402,9 +395,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
license: '',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
cmsettings: {
|
||||
styleSelectedText: true
|
||||
},
|
||||
lhs: function(setValue) { },
|
||||
rhs: function(setValue) { },
|
||||
loaded: function() { },
|
||||
@@ -439,12 +429,14 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
else {
|
||||
self.show();
|
||||
}
|
||||
if (this.loaded) this.loaded();
|
||||
}
|
||||
if (this.resized) this.resized();
|
||||
},
|
||||
_debug: '', //scroll,draw,calc,diff,markup,change,init
|
||||
_debug: '', //scroll,draw,calc,diff,markup,change
|
||||
resized: function() { }
|
||||
}, options);
|
||||
|
||||
// save this element for faster queries
|
||||
this.element = jQuery(el);
|
||||
|
||||
@@ -464,8 +456,8 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
if (this.rhs_cmsettings.lineNumbers) {
|
||||
rhs_gutters = ['merge', 'CodeMirror-linenumbers']
|
||||
}
|
||||
jQuery.extend(true, this.lhs_cmsettings, this.settings.cmsettings, { gutters: lhs_gutters }, this.settings.lhs_cmsettings);
|
||||
jQuery.extend(true, this.rhs_cmsettings, this.settings.cmsettings, { gutters: rhs_gutters }, this.settings.rhs_cmsettings);
|
||||
jQuery.extend(true, this.lhs_cmsettings, this.settings.cmsettings, { gutters: lhs_gutters }, this.settings);
|
||||
jQuery.extend(true, this.rhs_cmsettings, this.settings.cmsettings, { gutters: rhs_gutters }, this.settings);
|
||||
|
||||
// bind if the element is destroyed
|
||||
this.element.bind('destroyed', jQuery.proxy(this.teardown, this));
|
||||
@@ -505,7 +497,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
scrollToDiff: function(direction) {
|
||||
if (!this.changes.length) return;
|
||||
if (direction == 'next') {
|
||||
if (this._current_diff == this.changes.length - 1) {
|
||||
if (this._current_diff == this.changes.length -1) {
|
||||
this._current_diff = 0;
|
||||
} else {
|
||||
this._current_diff = Math.min(++this._current_diff, this.changes.length - 1);
|
||||
@@ -653,7 +645,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
return d.normal_form();
|
||||
},
|
||||
bind: function(el) {
|
||||
this.trace('init', 'bind');
|
||||
this.element.hide();
|
||||
this.id = jQuery(el).attr('id');
|
||||
try {
|
||||
@@ -680,7 +671,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
}
|
||||
else {
|
||||
// homebrew
|
||||
var style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:-15px;margin-top:-2px;';
|
||||
var style = 'opacity:0.6;height:16px;background-color:#bfbfbf;cursor:pointer;text-align:center;color:#eee;border:1px solid #848484;margin-right:5px;margin-top:-2px;';
|
||||
merge_lhs_button = '<div style="' + style + '" title="Merge left"><</div>';
|
||||
merge_rhs_button = '<div style="' + style + '" title="Merge right">></div>';
|
||||
}
|
||||
@@ -790,7 +781,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
|
||||
// bind
|
||||
var self = this;
|
||||
self.trace('init', 'binding event listeners');
|
||||
this.editor = [];
|
||||
this.editor[this.id + '-lhs'] = CodeMirror.fromTextArea(lhstx, this.lhs_cmsettings);
|
||||
this.editor[this.id + '-rhs'] = CodeMirror.fromTextArea(rhstx, this.rhs_cmsettings);
|
||||
@@ -805,6 +795,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
if (self.settings.resize) self.settings.resize(init);
|
||||
self.editor[self.id + '-lhs'].refresh();
|
||||
self.editor[self.id + '-rhs'].refresh();
|
||||
if (self.settings.autoupdate) {
|
||||
self._changing(self.id + '-lhs', self.id + '-rhs');
|
||||
}
|
||||
};
|
||||
jQuery(window).on('resize.mergely',
|
||||
function () {
|
||||
@@ -846,34 +839,19 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
gutterClicked.call(this, 'rhs', n, ev);
|
||||
}.bind(this));
|
||||
|
||||
// if `lhs` and `rhs` are passed in, this sets the values in each editor
|
||||
// and kicks off the whole change pipeline.
|
||||
//bind
|
||||
var setv;
|
||||
if (this.settings.lhs) {
|
||||
self.trace('init', 'setting lhs value');
|
||||
this.settings.lhs(function setValue(value) {
|
||||
this._initializing = true;
|
||||
this.editor[this.id + '-lhs'].getDoc().setValue(value);
|
||||
}.bind(this));
|
||||
setv = this.editor[this.id + '-lhs'].getDoc().setValue;
|
||||
this.settings.lhs(setv.bind(this.editor[this.id + '-lhs'].getDoc()));
|
||||
}
|
||||
if (this.settings.rhs) {
|
||||
self.trace('init', 'setting rhs value');
|
||||
this.settings.rhs(function setValue(value) {
|
||||
this._initializing = true;
|
||||
this.editor[this.id + '-rhs'].getDoc().setValue(value);
|
||||
}.bind(this));
|
||||
setv = this.editor[this.id + '-rhs'].getDoc().setValue;
|
||||
this.settings.rhs(setv.bind(this.editor[this.id + '-rhs'].getDoc()));
|
||||
}
|
||||
this.element.one('updated', () => {
|
||||
this._initializing = false;
|
||||
if (self.settings.loaded) {
|
||||
self.settings.loaded();
|
||||
}
|
||||
});
|
||||
this.trace('init', 'bound');
|
||||
this.editor[this.id + '-lhs'].focus();
|
||||
},
|
||||
|
||||
_scroll_to_change: function(change) {
|
||||
_scroll_to_change : function(change) {
|
||||
if (!change) return;
|
||||
var self = this;
|
||||
var led = self.editor[self.id+'-lhs'];
|
||||
@@ -884,7 +862,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
if (change["lhs-line-to"] >= 0) {
|
||||
led.scrollIntoView({line: change["lhs-line-to"]});
|
||||
}
|
||||
led.focus();
|
||||
},
|
||||
|
||||
_scrolling: function(editor_name) {
|
||||
@@ -893,11 +870,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
this._skipscroll[editor_name] = false;
|
||||
return;
|
||||
}
|
||||
if (!this.changes) {
|
||||
// pasting a wide line can trigger scroll before changes
|
||||
// are calculated
|
||||
return;
|
||||
}
|
||||
var scroller = jQuery(this.editor[editor_name].getScrollerElement());
|
||||
if (this.midway == undefined) {
|
||||
this.midway = (scroller.height() / 2.0 + scroller.offset().top).toFixed(2);
|
||||
@@ -1051,12 +1023,9 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
this.changes = Mgly.DiffParser(d.normal_form());
|
||||
this.trace('change', 'parse time', Timer.stop());
|
||||
if (this._current_diff === undefined && this.changes.length) {
|
||||
// go to first difference on start-up where values are provided in
|
||||
// settings.
|
||||
// go to first difference on start-up
|
||||
this._current_diff = 0;
|
||||
if (this._initializing) {
|
||||
this._scroll_to_change(this.changes[0]);
|
||||
}
|
||||
this._scroll_to_change(this.changes[0]);
|
||||
}
|
||||
this.trace('change', 'scroll_to_change time', Timer.stop());
|
||||
this._calculate_offsets(editor_name1, editor_name2, this.changes);
|
||||
@@ -1065,7 +1034,6 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
this.trace('change', 'markup time', Timer.stop());
|
||||
this._draw_diff(editor_name1, editor_name2, this.changes);
|
||||
this.trace('change', 'draw time', Timer.stop());
|
||||
this.element.trigger('updated');
|
||||
},
|
||||
_parse_diff: function (editor_name1, editor_name2, diff) {
|
||||
this.trace('diff', 'diff results:\n', diff);
|
||||
@@ -1386,17 +1354,17 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
}
|
||||
else if (change['op'] == 'c') {
|
||||
// apply LCS changes to each line
|
||||
for (j = llf, k = rlf;
|
||||
for (j = llf, k = rlf, p = 0;
|
||||
((j >= 0) && (j <= llt)) || ((k >= 0) && (k <= rlt));
|
||||
++j, ++k) {
|
||||
var lhs_line, rhs_line;
|
||||
if (k > rlt) {
|
||||
if (k + p > rlt && this._is_change_in_view('lhs', lhsvp, change)) {
|
||||
// lhs continues past rhs, mark lhs as deleted
|
||||
lhs_line = led.getLine( j );
|
||||
marktext.push([led, {line:j, ch:0}, {line:j, ch:lhs_line.length}, {className: 'mergely ch d lhs'}]);
|
||||
continue;
|
||||
}
|
||||
if (j > llt) {
|
||||
if (j + p > llt && this._is_change_in_view('rhs', rhsvp, change)) {
|
||||
// rhs continues past lhs, mark rhs as added
|
||||
rhs_line = red.getLine( k );
|
||||
marktext.push([red, {line:k, ch:0}, {line:k, ch:rhs_line.length}, {className: 'mergely ch a rhs'}]);
|
||||
@@ -1404,9 +1372,7 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
}
|
||||
lhs_line = led.getLine( j );
|
||||
rhs_line = red.getLine( k );
|
||||
var lcs = new Mgly.LCS(lhs_line, rhs_line, {
|
||||
ignoreaccents: !!this.settings.ignoreaccents
|
||||
});
|
||||
var lcs = new Mgly.LCS(lhs_line, rhs_line);
|
||||
lcs.diff(
|
||||
function added (from, to) {
|
||||
if (self._is_change_in_view('rhs', rhsvp, change)) {
|
||||
@@ -1530,15 +1496,13 @@ jQuery.extend(Mgly.CodeMirrorDiffView.prototype, {
|
||||
odoc.replaceRange(text, CodeMirror.Pos(ofrom, 0), CodeMirror.Pos(oto, otolen));
|
||||
} else if ((oside === 'lhs' && change['op'] === 'd') || (oside === 'rhs' && change['op'] === 'a')) {
|
||||
if (from > 0) {
|
||||
text = doc.getRange(CodeMirror.Pos(from, fromlen), CodeMirror.Pos(to, tolen));
|
||||
ofrom += 1;
|
||||
text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
|
||||
} else {
|
||||
text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
|
||||
}
|
||||
odoc.replaceRange(text, CodeMirror.Pos(ofrom - 1, 0), CodeMirror.Pos(oto + 1, 0));
|
||||
} else if ((oside === 'rhs' && change['op'] === 'd') || (oside === 'lhs' && change['op'] === 'a')) {
|
||||
if (from > 0) {
|
||||
fromlen = doc.getLine(from - 1).length + 1;
|
||||
text = doc.getRange(CodeMirror.Pos(from - 1, fromlen), CodeMirror.Pos(to, tolen));
|
||||
} else {
|
||||
text = doc.getRange(CodeMirror.Pos(0, 0), CodeMirror.Pos(to + 1, 0));
|
||||
|
||||
@@ -336,12 +336,6 @@ describe('mergely', function () {
|
||||
dir: 'lhs',
|
||||
name: 'delete is lines 2-3 and insert into middle of rhs'
|
||||
},
|
||||
{
|
||||
lhs: 'a\nb\nc',
|
||||
rhs: 'a\nb\nx\nc',
|
||||
dir: 'lhs',
|
||||
name: 'delete line 3 of length 1 of rhs and will be replaced with empty line 2 of lhs'
|
||||
},
|
||||
// delete 36-43 merge rhs
|
||||
{
|
||||
lhs: '\na',
|
||||
@@ -390,60 +384,6 @@ describe('mergely', function () {
|
||||
rhs: 'a\nd',
|
||||
dir: 'rhs',
|
||||
name: 'delete is lines 2-3 and insert into middle of rhs'
|
||||
},
|
||||
{
|
||||
lhs: 'a\nb\nc',
|
||||
rhs: 'a\nb\nx\nc',
|
||||
dir: 'rhs',
|
||||
name: 'merge rhs line 3 of length 1 and insert after line 2 of lhs'
|
||||
},
|
||||
{
|
||||
lhs: '\ngood',
|
||||
rhs: 'good',
|
||||
dir: 'rhs',
|
||||
name: 'lhs has deleted line at start'
|
||||
},
|
||||
{
|
||||
lhs: '\na\nb\nc\ngood',
|
||||
rhs: 'good',
|
||||
dir: 'rhs',
|
||||
name: 'lhs has multiple deleted lines at start'
|
||||
},
|
||||
{
|
||||
lhs: 'good\n',
|
||||
rhs: 'good',
|
||||
dir: 'rhs',
|
||||
name: 'lhs has deleted line at end (issue #115)'
|
||||
},
|
||||
{
|
||||
lhs: 'good\na\nb\nc',
|
||||
rhs: 'good',
|
||||
dir: 'rhs',
|
||||
name: 'lhs has multiple deleted lines at end (issue #115)'
|
||||
},
|
||||
{
|
||||
lhs: 'good',
|
||||
rhs: '\ngood',
|
||||
dir: 'lhs',
|
||||
name: 'rhs has added line at start'
|
||||
},
|
||||
{
|
||||
lhs: 'good',
|
||||
rhs: '\na\nb\nc\ngood',
|
||||
dir: 'lhs',
|
||||
name: 'rhs has multiple added lines at start'
|
||||
},
|
||||
{
|
||||
lhs: 'good',
|
||||
rhs: 'good\n',
|
||||
dir: 'lhs',
|
||||
name: 'rhs has added line at end'
|
||||
},
|
||||
{
|
||||
lhs: 'good',
|
||||
rhs: 'good\na\nb\nc',
|
||||
dir: 'lhs',
|
||||
name: 'rhs has multiple added lines at end'
|
||||
}];
|
||||
|
||||
opts.forEach((opt, i) => {
|
||||
@@ -586,48 +526,28 @@ describe('mergely', function () {
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should not be vulnerable to XSS', function (done) {
|
||||
function initXSS(options) {
|
||||
$('body').get(0).innerHTML = "<!DOCTYPE html><html lang=\"en\"><body><div id='mergely<script id=\"injected\">alert(123)</script>'></div></body></html>";
|
||||
const divs = document.getElementsByTagName('div');
|
||||
editor = $(divs[0]);
|
||||
editor.mergely(options);
|
||||
return editor;
|
||||
};
|
||||
it('should not be vulnerable to XSS', function (done) {
|
||||
function initXSS(options) {
|
||||
$('body').get(0).innerHTML = "<!DOCTYPE html><html lang=\"en\"><body><div id='mergely<script id=\"injected\">alert(123)</script>'></div></body></html>";
|
||||
const divs = document.getElementsByTagName('div');
|
||||
editor = $(divs[0]);
|
||||
editor.mergely(options);
|
||||
return editor;
|
||||
};
|
||||
|
||||
$(document).ready(() => {
|
||||
const editor = initXSS({
|
||||
height: 100,
|
||||
viewport: true,
|
||||
license: 'lgpl-separate-notice',
|
||||
lhs: (setValue) => setValue(macbeth),
|
||||
rhs: (setValue) => setValue(macbeth)
|
||||
});
|
||||
expect($('body').find('#injected')).to.have.length(0, 'expected no div with id injected');
|
||||
const divs = document.getElementsByTagName('div');
|
||||
expect(divs).to.have.length(1);
|
||||
expect(divs[0].id).to.equal('mergely<script id="injected">alert(123)</script>');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should ignore accented characters', function (done) {
|
||||
$(document).ready(() => {
|
||||
const editor = init({
|
||||
height: 100,
|
||||
license: 'lgpl-separate-notice',
|
||||
ignoreaccents: true,
|
||||
lhs: (setValue) => setValue('comunicação'),
|
||||
rhs: (setValue) => setValue('comunicacao')
|
||||
});
|
||||
const { mergely } = $('#mergely');
|
||||
|
||||
$('#mergely').on('updated', () => {
|
||||
console.log('updated');
|
||||
const diff = $('#mergely').mergely('diff');;
|
||||
expect(diff).to.equal('');
|
||||
$(document).ready(() => {
|
||||
const editor = initXSS({
|
||||
height: 100,
|
||||
viewport: true,
|
||||
license: 'lgpl-separate-notice',
|
||||
lhs: (setValue) => setValue(macbeth),
|
||||
rhs: (setValue) => setValue(macbeth)
|
||||
});
|
||||
expect($('body').find('#injected')).to.have.length(0, 'expected no div with id injected');
|
||||
const divs = document.getElementsByTagName('div');
|
||||
expect(divs).to.have.length(1);
|
||||
expect(divs[0].id).to.equal('mergely<script id="injected">alert(123)</script>');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -19,7 +19,10 @@ module.exports = {
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
use: [{
|
||||
loader: 'style-loader'
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'css-loader'
|
||||
}]
|
||||
@@ -36,7 +39,8 @@ module.exports = {
|
||||
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'examples', 'app.html')
|
||||
template: 'examples/app.html',
|
||||
filename: 'mergely.html'
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
@@ -66,9 +70,11 @@ module.exports = {
|
||||
test: /[\\/]node_modules[\\/]/
|
||||
}
|
||||
},
|
||||
|
||||
chunks: 'async',
|
||||
minChunks: 1,
|
||||
minSize: 30000
|
||||
minSize: 30000,
|
||||
name: true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,12 +29,10 @@ module.exports = {
|
||||
CodeMirror: 'CodeMirror'
|
||||
},
|
||||
plugins: [
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{
|
||||
from: 'src/mergely.css',
|
||||
to: 'mergely.css',
|
||||
toType: 'file'
|
||||
}]
|
||||
})
|
||||
new CopyWebpackPlugin([{
|
||||
from: 'src/mergely.css',
|
||||
to: 'mergely.css',
|
||||
toType: 'file'
|
||||
}])
|
||||
]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user