Added Diffing component based on the Split editor (#417)

* Added new diff component and an example page for it. Added the diff-match-patch npm dependency to provide diffing functionality. * Added documentation * Added documentation * Fixed some cursor navigation issues to avoid false positives. * Code style changes * Removed unnecessary comments and refactored out a method for organization purposes
securingsincity · Apr 10, 2018 · 7c2205a · 7c2205a
1 parent d4d5044
commit 7c2205a
Show file tree

Hide file tree

Showing 8 changed files with 3,060 additions and 1,212 deletions.
diff --git a/docs/Diff.md b/docs/Diff.md
@@ -0,0 +1,56 @@
+# Diff Editor
+
+The diff editor is contained in a Split editor and will highlight differences between the two editor boxes.
+
+## Demo
+
+## Example Code
+
+```import React, { Component } from 'react';
+   import { render } from 'react-dom';
+   import DiffEditor from '../src/diff.js';
+
+   import 'brace/mode/jsx';
+
+   render(
+       <DiffEditor
+       value=['Test code differences', 'Test code difference']
+       height="1000px"
+       width="1000px"
+       mode="javascript"
+     />
+   );
+   ```
+
+   ## Available Props
+
+   |Prop|Default|Type|Description|
+   |-----|------|----|-----------|
+   |cursorStart| 1| Number| the location of the cursor
+   |editorProps| | Object | properties to apply directly to the Ace editor instance|
+   |enableBasicAutocompletion| false| Boolean | Enable basic autocompletion|
+   |enableLiveAutocompletion| false| Boolean | Enable live autocompletion|
+   |focus|false|Boolean|Whether to focus|
+   |fontSize| 12| Number |pixel value for font-size|
+   |height| '500px'| String |CSS value for height|
+   |highlightActiveLine| true| Boolean| highlight active line|
+   |maxLines| | Number |Maximum number of lines to be displayed|
+   |minLines| | Number |Minimum number of lines to be displayed|
+   |mode|''|String|The language to be used for the editor (Java, Javascript, Ruby, etc.)|
+   |name|'brace-editor'|string|Unique ID to be used for the split editor|
+   |onLoad| | Function | called on editor load. The first argument is the instance of the editor |
+   |onScroll| | Function | triggered by editor `scroll` event|
+   |onPaste| | Function | Triggered by editor `paste` event, and passes text as argument|
+   |orientation|'beside'|String|The orientation of splits either 'beside' or 'below'|
+   |readOnly| false| Boolean| make the editor read only |
+   |scrollMargin|[0, 0, 0, 0]|Array of Numbers|Sets the scroll margins|
+   |setOptions| | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance|
+   |showGutter| true| Boolean | show gutter |
+   |showPrintMargin| true| Boolean| show print margin |
+   |style| | Object  | camelCased properties |
+    |tabSize|4|Number|Number of spaces to include as tab|
+   |theme|'github'|String|Theme to use|
+   |value|['','']|Array of Strings|Index 0: Value of first editor. Index 1: Value of second editor|
+   |width| '500px'| String |CSS value for width|
+   |wrapEnabled|true|Boolean|Whether lines wrap on the editor
+
diff --git a/example/diff.css b/example/diff.css
@@ -0,0 +1,5 @@
+.codeMarker {
+    background: #FFF677;
+    position:absolute;
+    z-index:20
+}
diff --git a/example/diff.html b/example/diff.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Diff Editor</title>
+    <link rel="stylesheet" href="diff.css"></link>
+</head>
+<body>
+    <div class="container">
+        <div class="content">
+            <h1>React-Ace: Diff Example</h1>
+            <div id="example"></div>
+        </div>
+    </div>
+    <script src="./static/diff.js"></script>
+</body>
+</html>
diff --git a/example/diff.js b/example/diff.js
@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import DiffEditor from '../src/diff.js';
+
+import 'brace/mode/jsx';
+import 'brace/ext/searchbox';
+
+const defaultValue = [
+  `// Use this tool to display differences in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.`,
+  `// Use this too to show difference in code.
+// Deletions will be highlighted on the left, insertions highlighted on the right.
+// The diff highlighting style can be altered in CSS.
+`
+];
+
+const languages = [
+  'javascript',
+  'java',
+  'python',
+  'xml',
+  'ruby',
+  'sass',
+  'markdown',
+  'mysql',
+  'json',
+  'html',
+  'handlebars',
+  'golang',
+  'csharp',
+  'elixir',
+  'typescript',
+  'css'
+];
+
+languages.forEach((lang) => {
+  require(`brace/mode/${lang}`)
+  require(`brace/snippets/${lang}`)
+})
+
+class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: defaultValue,
+      fontSize: 14,
+      markers: {},
+      mode: 'javascript',
+    };
+    this.onChange = this.onChange.bind(this);
+    this.setMode = this.setMode.bind(this);
+  }
+
+  onChange(newValue) {
+    this.setState({
+      value: newValue
+    });
+  }
+
+  setMode(e) {
+    this.setState({
+      mode: e.target.value
+    });
+  }
+
+  render() {
+    return (
+      <div className="columns">
+        <div className="column">
+          <div className="field">
+            <label>
+                Mode:
+            </label>
+            <p className="control">
+              <span className="select">
+                <select name="mode" onChange={this.setMode} value={this.state.mode}>
+                  {languages.map((lang) => <option  key={lang} value={lang}>{lang}</option>)}
+                </select>
+              </span>
+            </p>
+          </div>
+
+          <div className="field">
+
+          </div>
+
+
+        </div>
+        <div className="examples column">
+          <h2>Editor</h2>
+          <DiffEditor
+            value={defaultValue}
+            height="1000px"
+            width="1000px"
+            mode={this.state.mode}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+render(
+  <App />,
+  document.getElementById('example')
+);