Repository navigation
Multiline comment support #180
Description
Activity
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?
Thanks @otakustay , but demo won't be required.
I'm thinking to achieve it withgutterEventssomething 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
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 haveuseChangeSelectbuilt-in hooks able to handle multiple and range selections recently.For now, this library exports a
useChangeSelecthook 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 howselectionandtoggleSelectionare 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:- Use
renderGutterprop to customize gutter element, e.g. to render a [+] icon, on click to add a comment - When the gutter [+] icon is clicked, decide whether clicked line is the end of range
- In case it is the end of a range, add a widget in this line using
widgetsprops, but have its context set to start and end of ranges - 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 😅
Reacted by Shoaib Asgar- Use
hey @otakustay , did you got time to build this demo? I think It will really help.
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.
A little progress to this issue, I've published
2.5.0to expose DOM event object ingutterEventsandcodeEvents.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
selectedChangesis already generated byuseSelection, just comparing the commented change and the last item inselectedChanges, I'll try to write it.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.
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.
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?