Up version to 6.0.0

securingsincity · Apr 10, 2018 · dfd77e5 · dfd77e5
1 parent 7c2205a
commit dfd77e5
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 154 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,7 +3,17 @@
 ## Future Release - TBD
 
 * Fully move to TypeScript interally
-* Publish typings for the split editor
+* Publish typings for the split and diff editor
+
+## 6.0.0
+
+* Adds Diff editor
+
+## 5.10.0
+
+* Upgraded many build dependencies
+* Split editor adds UndoManager
+
 ## 5.9.0
 
 * First value resets undo manager. Closes #339 and #223

diff --git a/README.md b/README.md
@@ -57,6 +57,8 @@ Checkout the `example` directory for a working example using webpack.
 
 [Split View Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Split.md)
 
+[Diff Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Diff.md)
+
 [How to add modes, themes and keyboard handlers](https://github.com/securingsincity/react-ace/blob/master/docs/Modes.md)
 
 [Frequently Asked Questions](https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md)

diff --git a/example/diff.js b/example/diff.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
-import DiffEditor from '../src/diff.js';
+import {diff as DiffEditor} from '../src/index.js';
 
 import 'brace/mode/jsx';
 import 'brace/ext/searchbox';

diff --git a/example/index.js b/example/index.js
@@ -50,7 +50,7 @@ import 'brace/ext/searchbox';
 
 const defaultValue =
 `function onLoad(editor) {
-  console.log(\"i\'ve loaded\");
+  console.log("i've loaded");
 }`;
 class App extends Component {
   onLoad() {
@@ -122,42 +122,42 @@ class App extends Component {
     return (
       <div className="columns">
         <div className="column">
-           <div className="field">
-             <label>
+          <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>
+            </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">
-             <label>
+          <div className="field">
+            <label>
                Theme:
-             </label>
-               <p className="control">
-                 <span  className="select">
-                   <select name="Theme" onChange={this.setTheme} value={this.state.theme}>
-                    {themes.map((lang) => <option key={lang} value={lang}>{lang}</option>)}
-                   </select></span>
-               </p>
-           </div>
+            </label>
+            <p className="control">
+              <span  className="select">
+                <select name="Theme" onChange={this.setTheme} value={this.state.theme}>
+                  {themes.map((lang) => <option key={lang} value={lang}>{lang}</option>)}
+                </select></span>
+            </p>
+          </div>
 
-           <div className="field">
-             <label>
+          <div className="field">
+            <label>
                Font Size:
-             </label>
-               <p className="control">
-                 <span  className="select">
-                   <select name="Font Size" onChange={this.setFontSize} value={this.state.fontSize}>
-                    {[14,16,18,20,24,28,32,40].map((lang) => <option  key={lang} value={lang}>{lang}</option>)}
-                   </select></span>
-               </p>
-           </div>
+            </label>
+            <p className="control">
+              <span  className="select">
+                <select name="Font Size" onChange={this.setFontSize} value={this.state.fontSize}>
+                  {[14,16,18,20,24,28,32,40].map((lang) => <option  key={lang} value={lang}>{lang}</option>)}
+                </select></span>
+            </p>
+          </div>
           <div className="field">
             <p className="control">
               <label className="checkbox">
@@ -166,31 +166,31 @@ class App extends Component {
               </label>
             </p>
           </div>
-           <div className="field">
+          <div className="field">
             <p className="control">
               <label className="checkbox">
                 <input type="checkbox" checked={this.state.enableLiveAutocompletion} onChange={(e) => this.setBoolean('enableLiveAutocompletion', e.target.checked)} />
                  Enable Live Autocomplete
               </label>
             </p>
           </div>
-           <div className="field">
+          <div className="field">
             <p className="control">
               <label className="checkbox">
                 <input type="checkbox" checked={this.state.showGutter} onChange={(e) => this.setBoolean('showGutter', e.target.checked)} />
                  Show Gutter
               </label>
             </p>
           </div>
-           <div className="field">
+          <div className="field">
             <p className="control">
               <label className="checkbox">
                 <input type="checkbox" checked={this.state.showPrintMargin} onChange={(e) => this.setBoolean('showPrintMargin', e.target.checked)} />
                  Show Print Margin
               </label>
             </p>
           </div>
-           <div className="field">
+          <div className="field">
             <p className="control">
               <label className="checkbox">
                 <input type="checkbox" checked={this.state.highlightActiveLine} onChange={(e) => this.setBoolean('highlightActiveLine', e.target.checked)} />
@@ -216,39 +216,39 @@ class App extends Component {
           </div>
 
 
-      </div>
+        </div>
         <div className="examples column">
           <h2>Editor</h2>
           <AceEditor
-          mode={this.state.mode}
-          theme={this.state.theme}
-          name="blah2"
-          onLoad={this.onLoad}
-          onChange={this.onChange}
-          onSelectionChange={this.onSelectionChange}
-          onCursorChange={this.onCursorChange}
-          onValidate={this.onValidate}
-          value={this.state.value}
-          fontSize={this.state.fontSize}
-          showPrintMargin={this.state.showPrintMargin}
-          showGutter={this.state.showGutter}
-          highlightActiveLine={this.state.highlightActiveLine}
-          setOptions={{
-            enableBasicAutocompletion: this.state.enableBasicAutocompletion,
-            enableLiveAutocompletion: this.state.enableLiveAutocompletion,
-            enableSnippets: this.state.enableSnippets,
-            showLineNumbers: this.state.showLineNumbers,
-            tabSize: 2,
-          }}/>
-      </div>
-      <div className="column">
+            mode={this.state.mode}
+            theme={this.state.theme}
+            name="blah2"
+            onLoad={this.onLoad}
+            onChange={this.onChange}
+            onSelectionChange={this.onSelectionChange}
+            onCursorChange={this.onCursorChange}
+            onValidate={this.onValidate}
+            value={this.state.value}
+            fontSize={this.state.fontSize}
+            showPrintMargin={this.state.showPrintMargin}
+            showGutter={this.state.showGutter}
+            highlightActiveLine={this.state.highlightActiveLine}
+            setOptions={{
+              enableBasicAutocompletion: this.state.enableBasicAutocompletion,
+              enableLiveAutocompletion: this.state.enableLiveAutocompletion,
+              enableSnippets: this.state.enableSnippets,
+              showLineNumbers: this.state.showLineNumbers,
+              tabSize: 2,
+            }}/>
+        </div>
+        <div className="column">
           <h2>Code</h2>
           <AceEditor
-           mode="jsx"
-           theme="monokai"
-           readOnly={true}
-           value={
-            `<AceEditor
+            mode="jsx"
+            theme="monokai"
+            readOnly={true}
+            value={
+              `<AceEditor
   mode="${this.state.mode}"
   theme="${this.state.theme}"
   name="blah2"
@@ -267,15 +267,15 @@ class App extends Component {
   tabSize: 2,
   }}/>
             `
-          } />
+            } />
+        </div>
       </div>
-    </div>
     );
   }
 }
 
 
 render(
- <App />,
+  <App />,
   document.getElementById('example')
 );