comments feature, fix vulnerabilities

.eslintrc

@@ -2,11 +2,24 @@
   "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
   "rules": {
     "no-tabs": "off",
-    "@typescript-eslint/indent": ["error", 2],
-    "max-len": ["error", {
-      "code": 100
-    }],
     "arrow-body-style": "off",
+    "comma-dangle": "off",
+    "@typescript-eslint/no-var-requires": 0,
+    "operator-linebreak": "off",
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "implicit-arrow-linebreak": "off",
+    "@typescript-eslint/indent": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "js": "never",
+        "mjs": "never",
+        "jsx": "never"
+      }
+    ]
   },
   "settings": {
     "import/resolver": {
@@ -18,6 +31,6 @@
   "env": {
     "mocha": true,
     "node": true,
-    "browser": true,
-  },
+    "browser": true
+  }
 }

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 dist
 lib
-*.log
+*.log

examples/src/CommentBlock.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { CommentInfo } from '../../lib';
+
+interface Props {
+  updateComment: (commentInfo: CommentInfo, text: string) => void;
+  removeComment: (lineId: string) => void;
+  comment: any;
+  show: boolean;
+}
+
+const CommentBlock: React.FC<Props> = ({
+  updateComment,
+  removeComment,
+  comment,
+  show
+}) => {
+  const [isComment, setIsComment] = React.useState<boolean>(show);
+  const [text, setText] = React.useState<string>(
+    comment.body ? comment.body.text : ''
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target.value);
+  };
+
+  if (!isComment) {
+    return (
+      <div className='p-2'>
+        <div className='form-group mb-2'>
+          <textarea
+            onChange={handleChange}
+            value={text}
+            className='form-control'
+          />
+        </div>
+        <button
+          className='btn btn-primary mr-2'
+          onClick={() => {
+            if (!text) {
+              return removeComment(comment.lineId);
+            }
+            updateComment(comment, text);
+            setIsComment(true);
+          }}
+        >
+          Submit
+        </button>
+        <button
+          className='btn btn-secondary'
+          onClick={() => {
+            if (!text) {
+              return removeComment(comment.lineId);
+            }
+            setIsComment(true);
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div className='p-2'>
+      <div className='mb-2 bg-light rounded p-2'>
+        {comment.body.text &&
+          comment.body.text
+            .split('\n')
+            .map((str: string, i: number) => <div key={i}>{str}</div>)}
+      </div>
+      <button
+        onClick={() => setIsComment(false)}
+        className='btn btn-primary mr-2'
+      >
+        Edit
+      </button>
+      <button
+        onClick={() => removeComment(comment.lineId)}
+        className='btn btn-secondary mr-2'
+      >
+        Delete
+      </button>
+    </div>
+  );
+};
+
+export default CommentBlock;

examples/src/index.tsx

@@ -1,20 +1,20 @@
-require('./style.scss');
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
 import ReactDiff, { DiffMethod } from '../../lib/index';
-
+import CommentBlock from './CommentBlock';
+import { CommentInfo } from '../../lib/index';
 const oldJs = require('./diff/javascript/old.rjs').default;
 const newJs = require('./diff/javascript/new.rjs').default;
-
 const logo = require('../../logo.png');
+require('./style.scss');
 
 interface ExampleState {
   splitView?: boolean;
   highlightLine?: string[];
   language?: string;
   enableSyntaxHighlighting?: boolean;
   compareMethod?: DiffMethod;
+  comments: any[];
 }
 
 const P = (window as any).Prism;
@@ -25,13 +25,27 @@ class Example extends React.Component<{}, ExampleState> {
     this.state = {
       highlightLine: [],
       enableSyntaxHighlighting: true,
+      comments: [
+        {
+          body: {
+            lineId: 'L-12-beforeCommit-afterCommit-test/test.jsx',
+            text: 'Awesome\ncomment!',
+            fileId: 'test/test.jsx',
+            prefix: 'L',
+            lineNumber: 12,
+            specifier: 'beforeCommit-afterCommit'
+          }
+        }
+      ]
     };
   }
 
   private onLineNumberClick = (
     id: string,
-    e: React.MouseEvent<HTMLTableCellElement>,
+    uiniqueLindeId: string,
+    e: React.MouseEvent<HTMLTableCellElement>
   ): void => {
+    console.log(uiniqueLindeId);
     let highlightLine = [id];
     if (e.shiftKey && this.state.highlightLine.length === 1) {
       const [dir, oldId] = this.state.highlightLine[0].split('-');
@@ -46,45 +60,99 @@ class Example extends React.Component<{}, ExampleState> {
       }
     }
     this.setState({
-      highlightLine,
+      highlightLine
     });
   };
 
-  private syntaxHighlight = (str: string): any => {
-    if (!str) return;
-    const language = P.highlight(str, P.languages.javascript);
-    return <span dangerouslySetInnerHTML={{ __html: language }} />;
+  private syntaxHighlight = (source: string, lineId?: string): any => {
+    if (!source) return;
+    const language = P.highlight(source, P.languages.javascript);
+    return <span id={lineId} dangerouslySetInnerHTML={{ __html: language }} />;
   };
 
-  public render(): JSX.Element {
+  private updateComment = (commentInfo: any, text?: string) => {
+    const updatedComments = this.state.comments.map(comment => {
+      console.log(comment);
+      if (comment.lineId === commentInfo.lineId) {
+        return {
+          ...commentInfo,
+          lineId: commentInfo.uniqueLineId,
+          body: text
+        };
+      }
+      return comment;
+    });
+
+    this.setState({
+      comments: updatedComments
+    });
+  };
+
+  private removeComment = (lineId: string) => {
+    const updatedComments = this.state.comments.filter(
+      comment => comment.lineId !== lineId
+    );
+    this.setState({ comments: updatedComments });
+  };
+
+  private createComment = (commentInfo: CommentInfo) => {
+    const updatedComments = [
+      ...this.state.comments,
+      {
+        body: {
+          ...commentInfo,
+          lineId: commentInfo.lineId,
+          text: ''
+        }
+      }
+    ];
+    this.setState({ comments: updatedComments });
+  };
+
+  /**
+   *
+   * helper that return Array with uniqueLineIds (comment.lineId)
+   *
+   * @param arr Array with commentLineIds
+   *
+   */
 
+  private getlineIdsArray = (arr: any[]) => {
+    return arr.reduce((acc: Array<string>, comment) => {
+      acc.push(comment.body.lineId);
+      return acc;
+    }, []);
+  };
+
+  public render(): JSX.Element {
     return (
-      <div className="react-diff-viewer-example">
-        <div className="radial"></div>
-        <div className="banner">
-          <div className="img-container">
-            <img src={logo} alt="React Diff Viewer Logo" />
+      <div className='react-diff-viewer-example'>
+        <div className='radial'></div>
+        <div className='banner'>
+          <div className='img-container'>
+            <img src={logo} alt='React Diff Viewer Logo' />
           </div>
           <p>
             A simple and beautiful text diff viewer made with{' '}
-            <a href="https://github.com/kpdecker/jsdiff" target="_blank">
+            <a href='https://github.com/kpdecker/jsdiff' target='_blank'>
               Diff{' '}
             </a>
             and{' '}
-            <a href="https://reactjs.org" target="_blank">
+            <a href='https://reactjs.org' target='_blank'>
               React.{' '}
             </a>
-            Featuring split view, inline view, word diff, line highlight and more.
+            Featuring split view, inline view, word diff, line highlight and
+            more.
           </p>
-          <div className="cta">
-            <a href="https://github.com/praneshr/react-diff-viewer#install">
-              <button type="button" className="btn btn-primary btn-lg">
+          <div className='cta'>
+            <a href='https://github.com/praneshr/react-diff-viewer#install'>
+              <button type='button' className='btn btn-primary btn-lg'>
                 Documentation
               </button>
             </a>
           </div>
         </div>
-        <div className="diff-viewer">
+        <div className='diff-viewer'>
           <ReactDiff
             highlightLines={this.state.highlightLine}
             onLineNumberClick={this.onLineNumberClick}
@@ -93,13 +161,32 @@ class Example extends React.Component<{}, ExampleState> {
             newValue={newJs}
             renderContent={this.syntaxHighlight}
             useDarkTheme
-            leftTitle="webpack.config.js master@2178133 - pushed 2 hours ago."
-            rightTitle="webpack.config.js master@64207ee - pushed 13 hours ago."
+            leftTitle='webpack.config.js master@2178133 - pushed 2 hours ago.'
+            rightTitle='webpack.config.js master@64207ee - pushed 13 hours ago.'
+            afterCommit={'afterCommit'}
+            beforeCommit={'beforeCommit'}
+            commentLineIds={this.getlineIdsArray(this.state.comments)}
+            getCommentInfo={commentInfo => this.createComment(commentInfo)}
+            renderCommentBlock={commentInfo => {
+              console.log(commentInfo);
+              const currComment = this.state.comments.find(
+                comment => comment.body.lineId === commentInfo.lineId
+              );
+              return (
+                <CommentBlock
+                  updateComment={this.updateComment}
+                  removeComment={this.removeComment}
+                  comment={currComment}
+                  show={!!currComment.body.text}
+                />
+              );
+            }}
+            fileId={'test/test.jsx'}
           />
         </div>
         <footer>
           Made with 💓 by{' '}
-          <a href="https://praneshravi.in" target="_blank">
+          <a href='https://praneshravi.in' target='_blank'>
             Pranesh Ravi
           </a>
         </footer>

package.json

@@ -1,88 +1,87 @@
 {
-	"name": "react-diff-viewer",
-	"version": "3.1.1",
-	"private": false,
-	"description": "A simple and beautiful text diff viewer component made with diff and React",
-	"keywords": [
-		"review",
-		"code-review",
-		"diff",
-		"diff-viewer",
-		"github",
-		"react",
-		"react-component",
-		"ui"
-	],
-	"repository": "git@github.com:praneshr/react-diff-viewer.git",
-	"license": "MIT",
-	"author": "Pranesh Ravi<praneshpranesh@gmail.com>",
-	"main": "lib/index",
-	"typings": "lib/index",
-	"scripts": {
-		"build": "tsc --outDir lib/",
-		"build:examples": "webpack --progress --colors",
-		"build:watch": "tsc --outDir lib/ -w",
-		"publish:examples": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
-		"publish:examples:local": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist",
-		"start:examples": "webpack-dev-server --open --hot --inline",
-		"test": "mocha --require ts-node/register --require enzyme.ts ./test/**",
-		"test:watch": "mocha --require ts-node/register --require enzyme.ts --watch-extensions ts,tsx --watch ./test/**"
-	},
-	"dependencies": {
-		"classnames": "^2.2.6",
-		"create-emotion": "^10.0.14",
-		"diff": "^4.0.1",
-		"emotion": "^10.0.14",
-		"memoize-one": "^5.0.4",
-		"prop-types": "^15.6.2"
-	},
-	"devDependencies": {
-		"@types/classnames": "^2.2.6",
-		"@types/diff": "^4.0.2",
-		"@types/enzyme": "^3.1.14",
-		"@types/enzyme-adapter-react-16": "^1.0.3",
-		"@types/expect": "^1.20.3",
-		"@types/memoize-one": "^4.1.1",
-		"@types/mocha": "^5.2.5",
-		"@types/node": "^12.0.12",
-		"@types/react": "^16.4.14",
-		"@types/react-dom": "^16.0.8",
-		"@types/webpack": "^4.4.13",
-		"@typescript-eslint/eslint-plugin": "^1.11.0",
-		"@typescript-eslint/parser": "^1.11.0",
-		"css-loader": "^3.0.0",
-		"enzyme": "^3.7.0",
-		"enzyme-adapter-react-16": "^1.6.0",
-		"eslint": "6.0.1",
-		"eslint-config-airbnb": "17.1.1",
-		"eslint-plugin-import": "^2.18.0",
-		"eslint-plugin-jsx-a11y": "^6.2.3",
-		"eslint-plugin-react": "^7.14.2",
-		"expect": "^24.8.0",
-		"favicons-webpack-plugin": "^0.0.9",
-		"file-loader": "^4.0.0",
-		"gh-pages": "^2.0.1",
-		"html-webpack-plugin": "^3.2.0",
-		"mini-css-extract-plugin": "^0.7.0",
-		"mocha": "^6.1.4",
-		"node-sass": "^4.9.3",
-		"raw-loader": "^3.0.0",
-		"react": "^16.5.2",
-		"react-dom": "^16.5.2",
-		"sass-loader": "^7.1.0",
-		"spy": "^1.0.0",
-		"ts-loader": "^6.0.4",
-		"ts-node": "^8.3.0",
-		"typescript": "^3.5.2",
-		"webpack": "^4.20.2",
-		"webpack-cli": "^3.1.1",
-		"webpack-dev-server": "^3.1.9"
-	},
-	"peerDependencies": {
-		"react": "^15.3.0 || ^16.0.0",
-		"react-dom": "^15.3.0 || ^16.0.0"
-	},
-	"engines": {
-		"node": ">= 8"
-	}
+  "name": "react-diff-viewer",
+  "version": "3.2.0",
+  "private": false,
+  "description": "A simple and beautiful text diff viewer component made with diff and React",
+  "keywords": [
+    "review",
+    "code-review",
+    "diff",
+    "diff-viewer",
+    "github",
+    "react",
+    "react-component",
+    "ui"
+  ],
+  "repository": "git@github.com:praneshr/react-diff-viewer.git",
+  "license": "MIT",
+  "author": "Pranesh Ravi<praneshpranesh@gmail.com>",
+  "main": "lib/index",
+  "typings": "lib/index",
+  "scripts": {
+    "build": "tsc --outDir lib/",
+    "build:examples": "webpack --progress --colors",
+    "build:watch": "tsc --outDir lib/ -w",
+    "publish:examples": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
+    "publish:examples:local": "NODE_ENV=production yarn build:examples && gh-pages -d examples/dist",
+    "start:examples": "webpack-dev-server --open --hot --inline",
+    "test": "mocha --require ts-node/register --require enzyme.ts ./test/**",
+    "test:watch": "mocha --require ts-node/register --require enzyme.ts --watch-extensions ts,tsx --watch ./test/**"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "create-emotion": "^10.0.14",
+    "diff": "^4.0.1",
+    "emotion": "^10.0.14",
+    "memoize-one": "^5.0.4",
+    "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.6",
+    "@types/diff": "^4.0.2",
+    "@types/enzyme": "^3.1.14",
+    "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@types/expect": "^1.20.3",
+    "@types/memoize-one": "^4.1.1",
+    "@types/mocha": "^5.2.5",
+    "@types/node": "^12.12.53",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.0.8",
+    "@types/webpack": "^4.41.21",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
+    "css-loader": "^3.6.0",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
+    "eslint-config-airbnb": "17.1.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "expect": "^24.8.0",
+    "favicons-webpack-plugin": "^4.2.0",
+    "file-loader": "^4.0.0",
+    "gh-pages": "^2.0.1",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.7.0",
+    "mocha": "^6.1.4",
+    "node-sass": "^4.9.3",
+    "raw-loader": "^3.0.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "sass-loader": "^7.1.0",
+    "spy": "^1.0.0",
+    "ts-loader": "^6.0.4",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.5.2",
+    "webpack": "^4.44.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.1.9"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0"
+  },
+  "engines": {
+    "node": ">= 8"
+  }
 }

test/react-diff-viewer-test.tsx

@@ -25,29 +25,30 @@ const bb = 456
 
 describe('Testing react diff viewer', (): void => {
   it('It should render a table', (): void => {
-    const node = shallow(<DiffViewer
-      oldValue={oldCode}
-      newValue={newCode}
-    />);
+    const node = shallow(
+      <DiffViewer oldValue={oldCode} newValue={newCode} commentLineIds={[]} />
+    );
 
     expect(node.find('table').length).toEqual(1);
   });
 
   it('It should render diff lines in diff view', (): void => {
-    const node = shallow(<DiffViewer
-      oldValue={oldCode}
-      newValue={newCode}
-    />);
+    const node = shallow(
+      <DiffViewer oldValue={oldCode} newValue={newCode} commentLineIds={[]} />
+    );
 
     expect(node.find('table > tbody tr').length).toEqual(7);
   });
 
   it('It should render diff lines in inline view', (): void => {
-    const node = shallow(<DiffViewer
-      oldValue={oldCode}
-      newValue={newCode}
-      splitView={false}
-    />);
+    const node = shallow(
+      <DiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={false}
+        commentLineIds={[]}
+      />
+    );
 
     expect(node.find('table > tbody tr').length).toEqual(9);
   });

tsconfig.json

@@ -9,11 +9,8 @@
     "declaration": true,
     "downlevelIteration": true,
     "lib": ["es2017", "dom"],
-    "types": [
-      "mocha",
-      "node"
-    ]
+    "types": ["mocha", "node"]
   },
   "include": ["./src/*", "enzyme.js"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }

webpack.config.js

@@ -5,58 +5,56 @@ const FavIconsWebpackPlugin = require('favicons-webpack-plugin');
 
 module.exports = {
   entry: {
-    main: './examples/src/index.tsx',
+    main: './examples/src/index.tsx'
   },
-  mode: process.env.NODE_ENV === 'production' ?
-    'production' : 'development',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   resolve: {
-    extensions: ['.jsx', '.tsx', '.ts', '.scss', '.css', '.js'],
+    extensions: ['.jsx', '.tsx', '.ts', '.scss', '.css', '.js']
   },
   output: {
     path: path.resolve(__dirname, 'examples/dist'),
-    filename: '[name].js',
+    filename: '[name].js'
   },
   devServer: {
     contentBase: path.resolve(__dirname, 'examples/dist'),
     port: 8000,
-    hot: true,
+    hot: true
   },
   module: {
-    rules: [{
+    rules: [
+      {
         test: /\.tsx?$/,
-        use: [{
-          loader: 'ts-loader',
-          options: {
-            configFile: 'tsconfig.examples.json',
-          },
-        }],
-        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.examples.json'
+            }
+          }
+        ],
+        exclude: /node_modules/
       },
       {
         test: /\.s?css$/,
-        use: [
-          Css.loader,
-          'css-loader',
-          'sass-loader',
-        ],
+        use: [Css.loader, 'css-loader', 'sass-loader']
       },
       {
         test: /\.xml|.rjs|.java/,
-        use: 'raw-loader',
+        use: 'raw-loader'
       },
       {
         test: /\.svg|.png/,
-        use: 'file-loader',
-      },
-    ],
+        use: 'file-loader'
+      }
+    ]
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: './examples/src/index.ejs',
+      template: './examples/src/index.ejs'
     }),
     new FavIconsWebpackPlugin('./logo-standalone.png'),
     new Css({
-      filename: 'main.css',
-    }),
-  ],
+      filename: 'main.css'
+    })
+  ]
 };