ace-diff/ace-diff

A diff/merging wrapper for Ace Editor built on google-diff-match-patch

ace-diff's Issues

css

unless one uses exactly your css with flexbox is virtually impossible to understand what to do - you should provide an other example, or minimal requirements like putting colors, alignment, etc. An example using a table or just divs could help people to understand what to do - also a minimal css for that - a very minimal css would be nice - one that dont use absolutes , relatives or flexbox - just inline/block. Also the gutter svg and others don't a have default colors and this makes really hard to understand how to make it work

How do I use public API for the AceInstance?

Hi,
I am kind of new to javascript.
I created a new acediff element with

this.aceDiffer = new AceDiff({
      element: '.acediff',
      left: {
        content: this.originalYaml,
        editable: false
      },
      right: {
        content: this.applicationYaml,
        copyLinkEnabled: false
      },
    });

Say I want to get content in right panel, how do I get it?

console.log('Right content: ' + JSON.stringify(this.aceDiffer.getEditors().right.content));

gives undefined.

Any updates with scroll locking?

@benkeen pls, do not let the project die! :)

Suggestion: Add a callback when diff is ready

Hi,

In a project I'm working on, I need to automatically scroll to the first diff available and give the user the ability to navigate to previous/next diff.

The issue I'm facing is that there is no event or callback sent to tell when ace-diff is done computing and displaying the diffs.

I've read somewhere that there might be a diff navigation in the works, but in a short term could it be possible to expose a "ready" callback in the ace-diff api?

Cheers!

Support ace-builds (instead of/in addition to) brace

ERROR in ./node_modules/ace-diff/src/index.js
Module not found: Error: Can't resolve 'brace' in '.../node_modules/ace-diff/src'

brace is updated infrequently (if at all, it really hasn't been changed in years).

ace-builds is maintained by the team that builds ace, and supports use via webpack/browserify. There's really no reason to specifically require brace anymore.

Word diffing

diff-match-patch supports word diffing and not just line diffing:

https://github.com/google/diff-match-patch/wiki/Line-or-Word-Diffs

Any plan to implement visualizations for word diffing, and not just line diffing?

Question/ Feature request

Hi,
Is there something that can be done the will compare text without leading and trailing spaces of all kind ( tab, cr cf etc.), some way/attribute to disregard spaces in the comparison.
ex.

file content 1:
1: test1
file content 2:
1:test1

currently i will get row #1 marked as containing a change but the texts are the same i would like to be able to decide which result i want
Cheers
idan.

display none breaks gutter

if the editors are display:none and then set to be displayed the SVG and gutter arrows break because of width and height calculations see https://github.com/benkeen/ace-diff/blob/master/dist/ace-diff.js#L87
and
https://github.com/benkeen/ace-diff/blob/master/dist/ace-diff.js#L684
https://github.com/benkeen/ace-diff/blob/master/dist/ace-diff.js#L685

i have a fork and i've put in some defaults that basically match the default vaules for ace editor.

i can send a PR but i'm not sure if hard coding the values is really the best alternative. might be better to check the display property and if it is none, then clone the editors and inject them into the dom off the page and then set the dimensions and then destroy the cloned nodes.

I think there might be something wrong with the logic

I am using ace-diff v2.1.2.
In my source code, there are some errors

1. In the right editor, the blue line should be drawn between line 35 and 36. For the source code before version 1.0.0, this works properly.
   

2. In the right editor, only line 150 should be marked. For the source code before version 1.0.0, this also works properly.
   

3. One new line at the end is not marked.
   

ace-diff redo undo not working while merge from one side to other side

Using ace-diff tool, we can't do redo and undo while merging from one side to other side .

But CodeMirror doing redo and undo option,

CodeMirror Mergetool Url : http://codemirror.net/demo/merge.html#

Diffing error

Hello, I think I have found an error in the diffing display in the demos provided. I used the JSON objects pasted here on Demo 1 to check the diffing display, and it seems that the display on line 27 on the left side and 24-27 on the right side are incorrect.

I believe the correct display would be to highlight line 25 on the left side, and lines 23 and 24 on the right side.

How to just show lines which are different?

I have two file which contains a thousand line but only few of lines are different.
Is it possible to show the lines which are different instead of the whole file?

Range module acequire fail

version
ace-diff: 3.0.1
brace: 0.11.1

conosle
Could not require Range module for Ace. Depends on your bundling strategy, but it usually comes with Ace itself. See https://ace.c9.io/api/range.html, open an issue on GitHub ace-diff/ace-diff

Collapse unchanged text

First of all, this is awesome! It would be even more awesome if there was a way to collapse/expand unchanged stretches of text, like you can with CodeMirror's merge.js addon https://codemirror.net/demo/merge.html (click the "collapse" button).

doesn't line up when code folding

when adding folds to the demo it doesn't line up:
http://benkeen.github.io/ace-diff/demos/demo2/

There is strange logic in code

When I use ace-diff I'm equaling it with diff-merge by TortoiseSVN or TortoiseGit and I think that the left side is previous version of code and the right side is mine or next version of code. So as I know diff_match_patch provides a method - diff_make(arg1, arg2), which finds difference between arg1 and arg2 which have need added to arg1 for getting arg2. But inside the ace-diff code I find the next lines

const dmp = new DiffMatchPatch();
const val1 = this.editors.left.ace.getSession().getValue();
const val2 = this.editors.right.ace.getSession().getValue();
const diff = dmp.diff_main(val2, val1);

Is It correct to use val2, from ace.right, like "text from", and val1, from ace.left, like "text to"?
Also diff_match_patch provides methods dmp.diff_text1(diffs) and dmp.diff_text2(diffs) the first one returns text from ace.right and the second one returns text from ace.left. It looks like a bug.

Strange lines get inserted in the wrong place or diff computed wrong

Im not sure what is causing the issue, but ive seen several cases where doing a copy actually results in new differences. ive attached two files that you can paste into the respective editors. copy the difference in the fileb side to the filea side and you'll see a new difference is then created for the blank line after the original difference. Not sure if this is line ending related or diff related?

fileb.txt
filea.txt

Incorrect demo version

Could you fix differences between Demo version and last release version, please?
The Demo version doesn't have element options and works fine, but the last release has it but doesn't explain how to use it.

Gutter SVG Path Wrong On Ace 1.3.3 With Ace-Diff 2.1.1

I was originally using Ace 1.3.3 since it was recently released. However, I noticed that ace-diff 2.1.1 connectors/svg path don't seem to calculate correctly on this version of ace. All paths are placed at the very top of the gutter, so it's hard to match changes to left/right sides and vice versa.

Rolling back to ace 1.2.5 corrected the issue, so it seems to be related to version of ace and not other issues in setup.

Known issue?

Few Requirement in ace diff page .

Random Font size not working in ace diff page:
Ace diff font size is too small . If I change font-size in ace diff tool, diff connector is not working properly .
For Example :

Default Font size in ace diff :

Custom Font Size in ace diff is not properly connector working:

Set Use Word Wrap is not working :

@nicolashenry @benkeen Diff compare is not a problem.But connectors only problem . Please my humble request fix it as soon as possible . Because we are using ace diff tool . Previously We have been using mergely tool .http://www.mergely.com/editor . It also so cool for showing diff and merge page .

hide left/right/middle option?

I want to be able to switch between showing only left, only right and both.
Is there a way to do that?

I love this ace editor diff tool.Is it possible inline diff view like 2 panel diff view.

project description wrong link

The link in the project description say http://benkeen.github.io/ace-diff/ but it should be http://benkeen.github.io/ace-diff/

Also links in README

Probably in other places too

Nice project BTW

Incorrect highlighting

I have 2 version of a code with one different value of var:
left:

(function (window, $) {

    var sourceId, targetId, item,
        leftSource, rightSource,
        aceDiffer;
    $(document).ready(function () {
        sourceId = $("#source").val();
        targetId = $("#target").val();
        item = $("#item").val();

        aceDiffer = new AceDiff({
            element: '#diffs-container',
            mode: "",
            left: {
                editable: false,
                copyLinkEnabled: false,
                content: ''
            },
            right: {
                editable: false,
                copyLinkEnabled: false,
                content: ''
            }
        });

})(window, jQuery);

right:

(function (window, $) {

    var sourceId, targetId, item,
        leftSource, rightSource,
        aceDiffer;
    $(document).ready(function () {
        sourceId = $("#source").val();
        targetId = $("#target").val();
        item = $("#item").val();

        aceDiffer = new AceDiff({
            element: '#diffs-container',
            mode: "",
            left: {
                editable: false,
                copyLinkEnabled: true,
                content: ''
            },
            right: {
                editable: false,
                copyLinkEnabled: false,
                content: ''
            }
        });

})(window, jQuery);

The diff is in left.copyLinkEnabled, left code has false, right has true but ace-diff marks the next line of the editors like it has the diff. Where is the issue?

Cannot read property 'acequire' of undefined

 ● Test suite failed to run

    TypeError: Cannot read property 'acequire' of undefined
    
at Object.<anonymous> (node_modules/ace-diff/src/index.js:12:35)

• Saw similar issues at securingsincity/react-ace#179, securingsincity/react-ace#230. Nuking node_modules did not fix the problem.
• If it helps, for react-ace It was caused by setting ReactAce to a purecomponent which caused unexpected behavior

Can you think of anything that might be breaking this? @JackuB Please help!

Diff navigation

I was demoing ace-diff when a developer asked if there was any way of navigating the diffs. The example that was loaded had 2 one-line diffs in a 1000 line file - and having to scroll up and down to find it was rather challenging :)

Is there any way of going to "the next diff", or only showing the previous / next lines of code relative to a diff (ie in this case hiding 990 lines of identical code)

angularjs integration

cause why not?!

Semi-colon causes the diff to insert incorrectly

In the first attached image the semi-colon on the right seems to be causing an issue.
The semi-colon only exists in the right pane, where-as in the left pane it exists further down after some further parameters have been added. The code therefore wants to insert the additional code from the left-pane above the code on the right, but it should include and replace the bottom line on the right.

This second attachment shows what I'd expect to happen. I've simply replaced the semi-colon with another random charcter '>' to prove my point:

Please can you help me with escaping semi-colons or suggest a fix?

aceEditor.setValue vs aceEditor.replace

Why don't you use aceEditor.replace for inserting text but use setValue? As i know setValue clears undoredo manager after that impossible to use Ctrl+Z/Y.

Per line diff add / delete highlights

is it possible to add a green/red highlight color on text portions that are deleted in one editor and added in the other?

Example: http://codemirror.net/demo/merge.html# - they underline with red and green to show line based text differences

In "destroy" method, if user has two or more ace-diff elements, the "removeEventHandlers" only remove the last "onResize" handler.

the "addEventHandlers" function is not in AceDiff scope, when call window.removeEventListener, 'onResize' eventhandler is actually hold by the "addEventHandlers" scope.

Warning from webpack when using ace-diff 3

WARNING in ./node_modules/ace-diff/dist/ace-diff.min.js 1:292-296
Critical dependency: the request of a dependency is an expression

I suspect ace-diff is doing some dynamic require that webpack doesn't like. FYI I think webpack is fine with having require statements that are conditionally executed but has trouble with dynamic expressions in the require call itself. Could the code be refactored somehow to improve this?

Thanks for all the hard work on this library!

Bower package out of date

Hey @gad2103, I see you added your fork to bower but it's not in sync. I spent a long time figuring out why my ace-diff dist wasn't working with brace, and it's because you haven't updated pulled your fork since 2015. If you're not going to keep that fork up to date, you should namespace the project so other people aren't pulling in your personal changes. Can we get bower ace-diff to point to the main repo?

https://github.com/gad2103/ace-diff

getConent when clicking on 'Copy to left'

Hello,

When I click on 'copy to left' arrow, How can I get only the content which is copied to left-editor?

Diff not computed correctly if the text lines end with \r\n

If you populate the editors with content that has both the CR and LF characters at the end of each line (for example, importing a file from a Linux environment), the diff is not computed correctly.

I suspect that it's the way the line lengths are computed in this method: getLineLengths.

Here is an example of how it behaves in this case:

Word-wrap throws off connector heights

As found by @vinothwindows47. Using word-wrap should cause the gutter connectors to intelligently resize to accommodate the extra heights.

in "destroy" method, I think you also should remove the event listener on window.resize

I find that you add an event listener on window.resize
window.addEventListener('resize', onResize);

After I call the "destroy" method, the "onResize" method is still triggered when I resize the window and
I find the following error in the browser console.

How to take uncompressed ace-diff latest version ?

Getting "Uncaught RangeError: Maximum call stack size exceeded" with boiler-plate code

I'm trying to test with boiler-plate code below, and am getting "Uncaught RangeError: Maximum call stack size exceeded". Any ideas? Thanks.

<html>
    <head>   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.js"></script>
        <script src="https://unpkg.com/ace-diff@^3"></script>
        <link href="https://unpkg.com/ace-diff@^3/dist/ace-diff.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="acediff"></div>
        <script>
            const differ = new AceDiff({
                ace: window.ace,
                element: '.acediff',
                left: {
                    content: 'your first file content here',
                },
                right: {
                    content: 'your second file content here',
                },
            });
        </script>
    </body>
</html>

something wrong with the \n

Hi,
In my project, there are some problems to show the difference.

In the left editor, I think the line under line 1 should be moved to line 2.
In the right editor, the line under line 13 should be moved to line 14.

You can try the attached code to reproduce the bug.
errorCode.txt

Does this work with Angular 2 with typescript?

Does this work with Angular 2 with typescript?

Range is not a constructor

Range is not a constructor with version 3+ in react, works fine till 2.3.0
https://codesandbox.io/s/ace-diff-react-2z19y

Options for synchronous scrolling

People may need an option for synchronous scrolling between 2 editors.
Any support for this?

Comparer display

Hi,

Is it possible to display the comparer among other controls in a page, without filling the entire page?

Need help with the css for ace-diff element

I am pretty sure this is css question and might not be related to ace-diff. However, I am having tough time finding a solution online and wanted to know if you have come across a solution for this simple problem.

I am trying to use ace-diff as yml editor and want to place a submit button right after the acediff content. I have currently managed to get it working to this point:

As you can see, my button is at the top of acediff content currently. I want it so that I can position button after the acediff element. Since acediff ONLY seems to work in absolute position, I am having a hard time placing button correctly on the html page.
html:

<div class="wrapper">
  <h3>Edit Application </h3>
  <div class="acediff"></div>
  <div class="submit-editor-button">
    <button class="ui button teal"
            type="button"
            (click)="save()">Save</button>
  </div>
</div>

css:

.acediff {
  position: absolute;
  left: 0;
  height: 75%;
  width: 100%;
}

.wrapper {
  position: static;
}

.submit-editor-button {
  position: absolute;
}

Help is greatly appreciated. Thank you.
(Sorry about creating an issue but I'm hoping it will be helpful to other css newbies like me trying to use acediff.)

bower support

please add bower support!

Is there an Angular directive that someone knows about?

Would be awesome if there is!
Thanks.

diffs not lining up

It finds the diffs correctly but the gutter does not display properly and the highlighting are off. I believe it is caused by the line height.

Consider switching diffing engine

Since there are way too many bugs pointing to the diff-match-patch it might be worth looking at different diffing libraries

• https://github.com/kpdecker/jsdiff

Following #69, all diffing issues seems resolved - closing

angular integration

Is it possible to integrate it with angular 7? Or there is already something existing ?

Thanks.