How to enable comments please give an example

.npmignore

@@ -2,3 +2,6 @@ examples
 test
 *.svg
 src
+/.github
+/.storybook
+/.idea

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

LICENSE

@@ -1,5 +1,7 @@
 MIT License
 
+Copyright (c) 2021 Mel Jatau
+
 Copyright (c) 2018 Pranesh Ravi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -5,30 +5,40 @@
 <br/>
 
 [![Build Status](https://travis-ci.com/praneshr/react-diff-viewer.svg?branch=master)](https://travis-ci.com/praneshr/react-diff-viewer)
-[![npm version](https://badge.fury.io/js/react-diff-viewer.svg)](https://badge.fury.io/js/react-diff-viewer)
-[![GitHub license](https://img.shields.io/github/license/praneshr/react-diff-viewer.svg)](https://github.com/praneshr/react-diff-viewer/blob/master/LICENSE)
+[![npm version](https://badge.fury.io/js/%40chunxei%2Freact-diff-viewer.svg)](https://badge.fury.io/js/%40chunxei%2Freact-diff-viewer)
+[![GitHub license](https://img.shields.io/github/license/Chunxei/react-diff-viewer)](https://github.com/chunxei/react-diff-viewer/blob/master/LICENSE)
+
+**NOTE: This is a fork of Pranesh Ravi's [react-diff-viewer](https://github.com/praneshr/react-diff-viewer) with added hooks and features that allow for more fluid multilline selection and enable commenting.**
 
 A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
 
 Inspired from Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
 
-Check [here](https://github.com/praneshr/react-diff-viewer/tree/v2.0) for v2.0
+## Preview (v3.2.0)
+
+<p align="center">
+  <img src='https://res.cloudinary.com/chunxei/image/upload/v1629725473/projects/react-diff-viewer/ui-1.png' width="100%" alt='React Diff Viewer' />
+</p>
+<p align="center">
+  <img src='https://res.cloudinary.com/chunxei/image/upload/v1629725755/projects/react-diff-viewer/ui-2.png' width="100%" alt='React Diff Viewer' />
+</p>
+<br/>
 
 ## Install
 
 ```bash
-yarn add react-diff-viewer
+yarn add @chunxei/react-diff-viewer
 
 # or
 
-npm i react-diff-viewer
+npm i @chunxei/react-diff-viewer
 ```
 
 ## Usage
 
 ```javascript
 import React, { PureComponent } from 'react';
-import ReactDiffViewer from 'react-diff-viewer';
+import ReactDiffViewer from '@chunxei/react-diff-viewer';
 
 const oldCode = `
 const a = 10
@@ -41,6 +51,7 @@ if(a > 10) {
 
 console.log('done')
 `;
+
 const newCode = `
 const a = 10
 const boo = 10
@@ -53,7 +64,11 @@ if(a === 10) {
 class Diff extends PureComponent {
   render = () => {
     return (
-      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
+      <ReactDiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={true}
+      />
     );
   };
 }
@@ -69,9 +84,10 @@ class Diff extends PureComponent {
 | disableWordDiff           | `boolean`       | `false`                        | Show and hide word diff in a diff line.                                                                                                                                                                                                                                                                                                                                                                          |
 | compareMethod             | `DiffMethod`    | `DiffMethod.CHARS`             | JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods.                                                                                                                                                                                                                          |
 | hideLineNumbers           | `boolean`       | `false`                        | Show and hide line numbers.                                                                                                                                                                                                                                                                                                                                                                                      |
+| canSelectLines            | `interface { L: boolean; R: boolean }`       | `{ L: true, R: true }`      | Enable and disable line select for each side.                                                                                                                                                                                                                                                                                                                                             |
 | renderContent             | `function`      | `undefined`                    | Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting)                                                                                                                                                                                                                                                                                                       |
-| onLineNumberClick         | `function`      | `undefined`                    | Event handler for line number click. `(lineId: string) => void`                                                                                                                                                                                                                                                                                                                                                  |
-| highlightLines            | `array[string]` | `[]`                           | List of lines to be highlighted. Works together with `onLineNumberClick`. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane. |
+| onLineNumberClick         | `function`      | `undefined`                    | Event handler for line number click. `(lineId: string, isNewSelection: boolean) => void`. `isNewSelection` evaluates to `false` if the `lineId` is already present in `highlightLines`, and true otherwise.                                                                                                                                                                                                      |
+| highlightLines            | `array[string]` | `[]`                           | List of lines to be highlighted. Works together with `onLineNumberClick`. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane.  |
 | showDiffOnly              | `boolean`       | `true`                         | Shows only the diffed lines and folds the unchanged lines                                                                                                                                                                                                                                                                                                                                                        |
 | extraLinesSurroundingDiff | `number`        | `3`                            | Number of extra unchanged lines surrounding the diff. Works along with `showDiffOnly`.                                                                                                                                                                                                                                                                                                                           |
 | codeFoldMessageRenderer   | `function`      | `Expand {number} of lines ...` | Render Prop API to render code fold message.                                                                                                                                                                                                                                                                                                                                                                     |
@@ -80,6 +96,16 @@ class Diff extends PureComponent {
 | leftTitle                 | `string`        | `undefined`                    | Column title for left section of the diff in split view. This will be used as the only title in inline view.                                                                                                                                                                                                                                                                                                     |
 | rightTitle                | `string`        | `undefined`                    | Column title for right section of the diff in split view. This will be ignored in inline view.                                                                                                                                                                                                                                                                                                                   |
 | linesOffset               | `number`        | `0`                            | Number to start count code lines from.                                                                                                                                                                                                                                                                                                                                                                           |
+<br/>
+
+### Added from v3.2.0
+| Prop                      | Type            | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
+| ------------------------- | --------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onHighlightLines          | `function`      | `undefined`                     | `(highlightedLines: string[], prefix: string) => void`. Event handler triggered when lines are highlighted in a batch, such as when a comment that references a set of lines is clicked.                                                                                                                                                                                                                                                                                |
+| onClearHighlights         | `function`      | `undefined`                     | `() => void`. Event handler for when the clear button is clicked. Expected to trigger a wipe for `highlightLines`.                                                                                                                                                                                                                                                                                                            |
+| comments*      | `{ L: array[object]; R: array[object] }`     | `{ L: [], R: [] }`      | Comments for the respective panels. Each comment object must contain a `commentLines: string[]` field that holds the line ids of the lines the comment is for, a `commentLabel: string` field holding the label to be displayed on the comment button, and a `isUrgent: boolean` field to style the button with the `_urgent` class.                                                                      |
+| onCommentClick*            | `function`      | `undefined`                     | `(comment: Record<string, any>, commentLines: string[], prefix: string) => void`. Event handler for comment click.                                                                                                                                                                                                                                                                                                                                                                                 |
+| onAddNewCommentStart*      | `function`      | `undefined`                     | `(selectedLines: string[], prefix: string) => void`. Returns a function with highlighted lines in the closure.                                                                                                                                                                                                                                                                                                                                                        |
 
 ## Instance Methods
 
@@ -103,7 +129,7 @@ An example using [Prism JS](https://prismjs.com)
 
 ```javascript
 import React, { PureComponent } from 'react';
-import ReactDiffViewer from 'react-diff-viewer';
+import ReactDiffViewer from '@chunxei/react-diff-viewer';
 
 const oldCode = `
 const a = 10
@@ -116,6 +142,7 @@ if(a > 10) {
 
 console.log('done')
 `;
+
 const newCode = `
 const a = 10
 const boo = 10
@@ -166,14 +193,15 @@ enum DiffMethod {
 
 ```javascript
 import React, { PureComponent } from 'react';
-import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
+import ReactDiffViewer, { DiffMethod } from '@chunxei/react-diff-viewer';
 
 const oldCode = `
 {
   "name": "Original name",
   "description": null
 }
 `;
+
 const newCode = `
 {
   "name": "My updated name",
@@ -281,6 +309,14 @@ const defaultStyles = {
   content?: {}, // style object
   titleBlock?: {}, // style object
   splitView?: {}, // style object
+
+  // Added from v3.2.0
+  highlightActionButtons?: {}, // style object
+  lineSelectButton?: {}, // style object
+  addCommentButton?: {}, // style object
+  clearHighlightButton?: {}, // style object
+  commentActionButtons?: {}, // style object
+  viewCommentButton?: {}, // style object
 }
 ```
 
@@ -290,7 +326,7 @@ For keys other than `variables`, the value can either be an object or string int
 
 ```javascript
 import React, { PureComponent } from 'react';
-import ReactDiffViewer from 'react-diff-viewer';
+import ReactDiffViewer from '@chunxei/react-diff-viewer';
 
 const oldCode = `
 const a = 10
@@ -303,6 +339,7 @@ if(a > 10) {
 
 console.log('done')
 `;
+
 const newCode = `
 const a = 10
 const boo = 10
@@ -357,6 +394,9 @@ class Diff extends PureComponent {
 yarn install
 yarn build # or use yarn build:watch
 yarn start:examples
+
+# to test in isolation using storybook
+yarn sb
 ```
 
 Check package.json for more build scripts.