Multiline comment support

[msk4862]

Is there a support of multiline comments just like Github has where you can select multiple lines of code and add comment for those selected lines.
If its not there then can some someone please give some idea on how should I go about it?

[otakustay]

At the time this component is developed, GitHub didn't offer a multi-line commnet, however this can be achieved with the multi-line selection and custom widget, would you want a demo for that?

[msk4862]

Thanks @otakustay , but demo won't be required.
I'm thinking to achieve it with gutterEvents something like this,

<Hunk
 key={`+${hunk.content}`}
 hunk={hunk}
 data-automation="hunk"
 gutterEvents={{
   onMouseDown({ change }) {
       const { isNormal, lineNumber, newLineNumber } = change;
       gutterLine.current = isNormal ? newLineNumber : lineNumber;
     },
     onMouseUp({ change }) {
       const { isNormal, lineNumber, newLineNumber } = change;
       const finalLine = isNormal ? newLineNumber : lineNumber;

       if (!gutterLine.current || gutterLine.current === finalLine) {
         // clicked on the same line
         console.log('clicked on the same line', gutterLine.current, finalLine);
       } else {
         // selected multiple lines

         console.log(
           'selected multiple line',
           `Initial: ${gutterLine.current} Final: ${finalLine}`
         );
       }

       gutterLine.current = null;
     },
 }}
 widgets={widgets(newPath)}
 />

But now I'm thinking on how should I highlight these selected lines, because in Github they have one custom property to have gutter line number and one can use these property to access any particular gutter and add any class name on it for any any custom css, but I don't see such property here but only a text of line number.

Github

react-diff-view

[otakustay]

It seems very hard to implement a range selection currently since I don't have the DOM event object provided to gutterEvents, I'll dig it deeper and have useChangeSelect built-in hooks able to handle multiple and range selections recently.

For now, this library exports a useChangeSelect hook to enable mouse selection on a single change, with multiple clicks you can select multiple changes, have a look at this example code to see how selection and toggleSelection are used.

In the case we can select a range of changes, with a data structure like {start: number, end: number}, a list of tasks can be done to implement comments on multiple changes:

1. Use renderGutter prop to customize gutter element, e.g. to render a [+] icon, on click to add a comment
2. When the gutter [+] icon is clicked, decide whether clicked line is the end of range
3. In case it is the end of a range, add a widget in this line using widgets props, but have its context set to start and end of ranges
4. Or when click happens out of end of a range, add a widget with context of "a single line number X"

I'm trying to combine these all and have a decent demo for entire select-and-comment functionality, hope I have time this weekend 😅

[msk4862]

hey @otakustay , did you got time to build this demo? I think It will really help.

[otakustay]

I've been stuck on the multi-selection issue for a long time, since diff is not a sequencial lines, it is an interleaved structure with old-new changes side by side, it's quite difficult to determine whether a bunch of selected changes combines to a "range that can be defined with {startLineNumber, endLineNumber}", this blocks further investigation of comment widgets.

Hopefully, this is a pure data algorithm issue, not releated to UI representations, I think I can solve it recently.

[otakustay]

A little progress to this issue, I've published 2.5.0 to expose DOM event object in gutterEvents and codeEvents.

By this improvement, I wrote a deadly simple hook in our demo site to allow select a range of changes by holding SHIFT key and click on lines, you can see the implement and usage here and have a try on our demo site

CleanShot.2022-11-21.at.14.40.12.mp4

I need to implement a more powerful comment widget to allow comment on range selected changes, this is not that difficult since selectedChanges is already generated by useSelection, just comparing the commented change and the last item in selectedChanges, I'll try to write it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[msk4862]

hey @otakustay, First of all Thanks for going ahead and making the changes also, really appreciate it.
and sorry, for being inactive for a while I got busy in some other things.

I checked your implementation and selecting lines with shift key does look good but I wanted to know If we can have something more similar to what Github has which is selecting lines by clicking and dragging the mouse?
Let me know your thoughts on this and I'm also going through the codebase to check the possibilities.