-
-
Notifications
You must be signed in to change notification settings - Fork 605
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #209 from securingsincity/v5
V5
- Loading branch information
Showing
17 changed files
with
1,520 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| # Ace Editor | ||
|
|
||
| This is the main component of React-Ace. It creates an instance of the Ace Editor. | ||
|
|
||
| ## Available Props | ||
|
|
||
| |Prop|Default|Type|Description| | ||
| |-----|------|-----|-----| | ||
| |name| 'brace-editor'| String |Unique Id to be used for the editor| | ||
| |mode| ''| String |Language for parsing and code highlighting| | ||
| |theme| ''| String |theme to use| | ||
| |value | ''| String | value you want to populate in the code highlighter| | ||
| |defaultValue | ''| String |Default value of the editor| | ||
| |height| '500px'| String |CSS value for height| | ||
| |width| '500px'| String |CSS value for width| | ||
| |className| | String |custom className| | ||
| |fontSize| 12| Number |pixel value for font-size| | ||
| |showGutter| true| Boolean | show gutter | | ||
| |showPrintMargin| true| Boolean| show print margin | | ||
| |highlightActiveLine| true| Boolean| highlight active line| | ||
| |focus| false| Boolean| whether to focus | ||
| |cursorStart| 1| Number| the location of the cursor | ||
| |wrapEnabled| false| Boolean | Wrapping lines| | ||
| |readOnly| false| Boolean| make the editor read only | | ||
| |minLines| | Number |Minimum number of lines to be displayed| | ||
| |maxLines| | Number |Maximum number of lines to be displayed| | ||
| |enableBasicAutocompletion| false| Boolean | Enable basic autocompletion| | ||
| |enableLiveAutocompletion| false| Boolean | Enable live autocompletion| | ||
| |tabSize| 4| Number| tabSize| | ||
| |onLoad| | Function | called on editor load. The first argument is the instance of the editor | | ||
| |onBeforeLoad| | Function | called before editor load. the first argument is an instance of `ace`| | ||
| |onChange| | Function | occurs on document change it has 2 arguments the value and the event.| | ||
| |onCopy| | Function | triggered by editor `copy` event, and passes text as argument| | ||
| |onPaste| | Function | Triggered by editor `paste` event, and passes text as argument| | ||
| |onSelectionChange| | Function | triggered by editor `selectionChange` event, and passes a [Selection](https://ace.c9.io/#nav=api&api=selection) as it's first argument and the event as the second| | ||
| |onFocus| | Function | triggered by editor `focus` event| | ||
| |onBlur| | Function | triggered by editor `blur` event| | ||
| |onScroll| | Function | triggered by editor `scroll` event| | ||
| |editorProps| | Object | properties to apply directly to the Ace editor instance| | ||
| |setOptions| | Object | [options](https://github.com/ajaxorg/ace/wiki/Configuring-Ace) to apply directly to the Ace editor instance| | ||
| |keyboardHandler| | String | corresponding to the keybinding mode to set (such as vim or emacs)| | ||
| |commands| | Array | new commands to add to the editor | ||
| |annotations| | Array | annotations to show in the editor i.e. `[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]`, displayed in the gutter| | ||
| |markers| | Array | [markers](https://ace.c9.io/api/edit_session.html#EditSession.addMarker) to show in the editor, i.e. `[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: 'error-marker', type: 'background' }]`| | ||
| |style| | Object | camelCased properties | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| # Frequently Asked Questions | ||
|
|
||
| ## How do I use it with `preact`? `webpack`? `create-react-app`? | ||
|
|
||
| Check out the example applications | ||
|
|
||
| * [create-react-app](https://github.com/securingsincity/react-ace-create-react-app-example) | ||
| * [preact](https://github.com/securingsincity/react-ace-preact-example) | ||
| * [webpack](https://github.com/securingsincity/react-ace-webpack-example) | ||
|
|
||
|
|
||
| ## How do call methods on the editor? How do I call Undo or Redo? | ||
|
|
||
| `ReactAce` has an editor property, which is the wrapped editor. You can use refs to get to the component, and then you should be able to use the editor on the component to run the function you need: | ||
|
|
||
| ```javascript | ||
| const reactAceComponent = parent.refs.reactAceComponent; | ||
| const editor = reactAceComponent.editor | ||
| editor.find(searchRegex, { | ||
| backwards: false, | ||
| wrap: true, | ||
| caseSensitive: false, | ||
| wholeWord: false, | ||
| regExp: true, | ||
| }); | ||
| ``` | ||
|
|
||
| Similarly, if you want to redo or undo, you can reference the editor from the refs | ||
|
|
||
| ```jsx | ||
| <button onClick={()=> {this.refs.editor.editor.undo()}}>Undo</button> | ||
| <button onClick={()=> {this.refs.editor.editor.redo()}}>Redo</button> | ||
| ``` | ||
|
|
||
| ## How do I set editor options like setting block scrolling to infinity? | ||
|
|
||
| ```javascript | ||
| <ReactAce | ||
| editorProps={{ | ||
| $blockScrolling: Infinity | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| ## How do I add language snippets? | ||
|
|
||
| You can import the snippets and mode directly through `brace` along with the language_tools. Here is an example below | ||
|
|
||
|
|
||
| ```javascript | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import brace from 'brace'; | ||
| import AceEditor from 'react-ace'; | ||
|
|
||
| import 'brace/mode/python'; | ||
| import 'brace/snippets/python'; | ||
| import 'brace/ext/language_tools'; | ||
| import 'brace/theme/github'; | ||
|
|
||
| function onChange(newValue) { | ||
| console.log('change',newValue); | ||
| } | ||
|
|
||
| // Render editor | ||
| render( | ||
| <AceEditor | ||
| mode="python" | ||
| theme="github" | ||
| onChange={onChange} | ||
| name="UNIQUE_ID_OF_DIV" | ||
| editorProps={{$blockScrolling: true}} | ||
| enableBasicAutocompletion={true} | ||
| enableLiveAutocompletion={true} | ||
| enableSnippets={true} | ||
| />, | ||
| document.getElementById('example') | ||
| ); | ||
| ``` | ||
|
|
||
| ## How do I get selected text `onSelectionChange`? | ||
|
|
||
| How you extract the text from the editor is based on how to call methods on the editor. | ||
|
|
||
| Your `onSelectionChange` should look like this: | ||
|
|
||
| ```javascript | ||
| onSelectionChange(selection) { | ||
| const content = this.refs.aceEditor.editor.session.getTextRange(selection.getRange()); | ||
| // use content | ||
| } | ||
| ``` | ||
|
|
||
| ## How do I add markers? | ||
| ```javascript | ||
| const markers = [{ | ||
| startRow: 3, | ||
| type: 'text', | ||
| className: 'test-marker' | ||
| }]; | ||
| const wrapper = (<AceEditor markers={markers}/>); | ||
| ``` | ||
|
|
||
| ## How do I add annotations? | ||
| ```javascript | ||
| const annotations = [{ | ||
| row: 3, // must be 0 based | ||
| column: 4, // must be 0 based | ||
| text: 'error.message', // text to show in tooltip | ||
| type: 'error' | ||
| }] | ||
| const editor = ( | ||
| <AceEditor | ||
| annotations={annotations} | ||
| /> | ||
| ) | ||
| ``` | ||
|
|
||
| ## How do I add the search box? | ||
| Add the following line | ||
|
|
||
| `import 'brace/ext/searchbox';` | ||
|
|
||
| before introducing the component and it will add the search box. | ||
|
|
||
| ## How do I add a custom mode? | ||
|
|
||
| 1. Create my custom mode class (pure ES6 code) | ||
| 2. Initialize the component with an existing mode name (such as "sql") | ||
| 3. Use the `componentDidMount` function and call `session.setMode` with an instance of my custom mode. | ||
|
|
||
| My custom mode is: | ||
| ```javascript | ||
| export default class CustomSqlMode extends ace.acequire('ace/mode/text').Mode { | ||
| constructor(){ | ||
| super(); | ||
| // Your code goes here | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| And my react-ace code looks like: | ||
| ```javascript | ||
| render() { | ||
| return <div> | ||
| <AceEditor | ||
| ref="aceEditor" | ||
| mode="sql" // Default value since this props must be set. | ||
| theme="chrome" // Default value since this props must be set. | ||
| /> | ||
| </div>; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const customMode = new CustomSqlMode(); | ||
| this.refs.aceEditor.editor.getSession().setMode(customMode); | ||
| } | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| # Modes, Themes, and Keyboard Handlers | ||
|
|
||
| All modes, themes, and keyboard handlers should be required through ```brace``` directly. Browserify will grab these modes / themes / keyboard handlers through ```brace``` and will be available at run time. See the example above. This prevents bloating the compiled javascript with extra modes and themes for your application. | ||
|
|
||
| ### Example Modes | ||
|
|
||
| * javascript | ||
| * java | ||
| * python | ||
| * xml | ||
| * ruby | ||
| * sass | ||
| * markdown | ||
| * mysql | ||
| * json | ||
| * html | ||
| * handlebars | ||
| * golang | ||
| * csharp | ||
| * coffee | ||
| * css | ||
|
|
||
| ### Example Themes | ||
|
|
||
| * monokai | ||
| * github | ||
| * tomorrow | ||
| * kuroir | ||
| * twilight | ||
| * xcode | ||
| * textmate | ||
| * solarized dark | ||
| * solarized light | ||
| * terminal | ||
|
|
||
| ### Example Keyboard Handlers | ||
|
|
||
| * vim | ||
| * emacs |
Oops, something went wrong.