feat: add hideMarkers (#37)

Co-authored-by: Bart Riepe <[email protected]>

Author: Kirbo

README.md

@@ -76,7 +76,8 @@ class Diff extends PureComponent {
 | 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.                                                                                                                                                                                                                          |
 | renderGutter              | `(diffData) => ReactNode` | `undefined`                    | Function that can be used to render an extra gutter with various information next to the line number.                                                                                                                                                                                                                                                                                                            |
 | hideLineNumbers           | `boolean`                 | `false`                        | Show and hide line numbers.                                                                                                                                                                                                                                                                                                                                                                                      |
-| alwaysShowLines           | `string[]`                | `[]`                          | List of lines to always be shown, regardless of diff status. 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. `extraLinesSurroundingDiff` applies to these lines as well.                                                                                                                        |
+| hideMarkers               | `boolean`                 | `false`                        | Show and hide `+`/`-` markers.                                                                                                                                                                                                                                                                                                                                                                                   |
+| alwaysShowLines           | `string[]`                | `[]`                           | List of lines to always be shown, regardless of diff status. 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. `extraLinesSurroundingDiff` applies to these lines as well.                                                                                                                        |
 | 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            | `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. |

src/index.tsx

@@ -33,6 +33,8 @@ export interface ReactDiffViewerProps {
   extraLinesSurroundingDiff?: number;
   // Show/hide line number.
   hideLineNumbers?: boolean;
+  // Show/hide `+`/`-` markers.
+  hideMarkers?: boolean;
   /**
    * Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
    */
@@ -96,6 +98,7 @@ class DiffViewer extends React.Component<
     compareMethod: DiffMethod.CHARS,
     styles: {},
     hideLineNumbers: false,
+    hideMarkers: false,
     extraLinesSurroundingDiff: 3,
     showDiffOnly: true,
     useDarkTheme: false,
@@ -272,20 +275,22 @@ class DiffViewer extends React.Component<
               styles: this.styles,
             })
           : null}
-        <td
-          className={cn(this.styles.marker, {
-            [this.styles.emptyLine]: !content,
-            [this.styles.diffAdded]: added,
-            [this.styles.diffRemoved]: removed,
-            [this.styles.diffChanged]: changed,
-            [this.styles.highlightedLine]: highlightLine,
-          })}
-        >
-          <pre>
-            {added && '+'}
-            {removed && '-'}
-          </pre>
-        </td>
+        {!this.props.hideMarkers && (
+          <td
+            className={cn(this.styles.marker, {
+              [this.styles.emptyLine]: !content,
+              [this.styles.diffAdded]: added,
+              [this.styles.diffRemoved]: removed,
+              [this.styles.diffChanged]: changed,
+              [this.styles.highlightedLine]: highlightLine,
+            })}
+          >
+            <pre>
+              {added && '+'}
+              {removed && '-'}
+            </pre>
+          </td>
+        )}
         <td
           className={cn(this.styles.content, {
             [this.styles.emptyLine]: !content,
@@ -556,6 +561,7 @@ class DiffViewer extends React.Component<
       rightTitle,
       splitView,
       hideLineNumbers,
+      hideMarkers,
       nonce,
     } = this.props;
 
@@ -567,9 +573,15 @@ class DiffViewer extends React.Component<
 
     this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
     const nodes = this.renderDiff();
-    const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
-    const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
-    let columnExtension = this.props.renderGutter ? 1 : 0;
+    let colSpanOnSplitView = hideLineNumbers ? 2 : 3;
+    let colSpanOnInlineView = hideLineNumbers ? 2 : 4;
+
+    if (hideMarkers) {
+      colSpanOnSplitView -= 1;
+      colSpanOnInlineView -= 1;
+    }
+
+    const columnExtension = this.props.renderGutter ? 1 : 0;
 
     const title = (leftTitle || rightTitle) && (
       <tr>