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

Thanks.

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

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

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

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.

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.

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

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

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

Does this work with Angular 2 with typescript?

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

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 .

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

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.
   

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?

Hello,

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

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

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?

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?

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

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

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.

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:

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?

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)

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

cause why not?!

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?

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.

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.

Would be awesome if there is!
Thanks.

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>

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.

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#

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.

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.

 ● 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!

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!

Hi,

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

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

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.

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

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

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!

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.

please add bower support!

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

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