Merge View Implementation

v6
1

There have been a number of feature requests for a side-by-side merge view similar to the one in version 5. It’d be nice if we had something like that for 6.x.

But this isn’t a trivial thing to build and maintain, so I’ve decided that if I’m going to implement it I’d like to be paid for that work. I’m in contact with companies willing to contribute 1000€ 3000€, but I did some planning and estimate that the basic implementation would be more of a 4000€ job. So I’m looking for additional companies that are interested in this feature.

This is what would be in scope:

  • A component that creates two editors, and efficiently maintains a diff between their content as it changes
  • Marking of that diff as deletions in one document and insertions in the other
  • Organize lines with changes into chunks and highlighted the entire chunk
  • Insert spacers below the smaller side of chunks to make the editor heights align
  • Optionally sync scrolling between the editors, with a UI toggle element
  • Optionally show merge buttons for moving changes from one editor into the other
  • Optionally collapse long ranges of unchanged text and show a control to expand them

Not in scope are 3-way merges and spacer-less scroll synchronization, which the old implementation did support. If someone has a need for those we can talk about including them.

Also not in scope is screen reader accessibility because I have not been able to come up with an approach that would make such an interface pleasant to use on a screen reader. If someone has ideas or knows of other products that do this well, I’d love to hear about it and we can consider adding it to the scope.

If your company might be interested in helping out here, please reply in this thread or send me an email.

3 Likes
2

I’m the founder of the company in question (Boot.dev) - we’d be pumped if anyone wants to join us in sponsoring this :slight_smile:

3

Hi @marijn, this sounds like a nice thing to have. We’ll happily contribute 1000€ as well.

4

Great. I have another company also talking about chipping in 1000€, bringing us to 3000 out of 4000€.

Something I should have clarified in advance: this package would be distributed and maintained just like the other editor packages, under an MIT license.

4 Likes
5

Update: We’ve found enough sponsors. Work on this is starting—I’ll post updates in this thread when there’s something to show.

1 Like
6

Another update: A first implementation of this exists. Take a look at the code and a demo, and let me know how it looks.

7

Looks great,works well for me.
Thanks also boot.dev. I checked out your site and wouldn’t hesitate to forward people to your services.

8

Hi @marijn,

I just wanted to check in on the merge view. Is it still a work in progress? We’re working on an application and we’d like to implement this merge tool.

Initially, a 2-way merge tool would suffice for our needs. However, we have plans to transition to a 3-way merge tool. I understand that this is beyond the current scope, but we are willing to contribute if others are interested in this too.

Thanks for your work on this so far.

9

It’s stable. But no work on a 3-way merge view has been done yet.

10

Hello there. I’ve 5 questions.

  1. Could you please share the code of your implementation?

  2. I’ve tried the following code to create the editor state

function initializeEditorState() {
  componentData.oldState = EditorState.create({
    doc: componentProperties.oldValue,
    extensions: [lineNumbers(), basicSetup],
  });
  componentData.newState = EditorState.create({
    doc: componentProperties.newValue,
    extensions: [lineNumbers(), basicSetup],
  });
}

function initializeEditorView() {
  const extensions = configureBasicSetup();
  const configurationOptions = {
    a: componentData.oldState,
    b: componentData.newState,
    parent: codeMirrorContainer.value,
    showDifferences: true,
    gutter: true,
  };
  componentData.view = new MergeView(configurationOptions);
}

The variables componentData and componentProperties are two objects that are declared before. As I’m using vue 3

But I line numbers didn’t appeared.

  1. Is there a way to add a margin between the viewers?
  2. Is there a way to attach each editor view to a specific parent?
  3. Is there a way to make the views size height the same size of the parent element?