Merge pull request #14 from FormidableLabs/ignoreTabKey

Add option to ignore editor tab key handling

Author: kitten

README.md

@@ -109,6 +109,7 @@ It accepts these props for styling:
 |Name|PropType|Description|
 |---|---|---|
 |className|PropTypes.string|An additional class that is added to the Content Editable
+|ignoreTabKey|PropTypes.bool|Makes the editor ignore tab key presses so that keyboard users can tab past the editor without getting stuck
 |style|PropTypes.object|Additional styles for the Content Editable
 
 This component renders a Prism.js editor underneath it and also renders all of Prism’s

src/components/Editor/index.js

@@ -102,7 +102,7 @@ class Editor extends Component {
     if (this.props.onKeyDown) {
       this.props.onKeyDown(evt)
     }
-    if (evt.keyCode === 9) { // Tab Key
+    if (evt.keyCode === 9 && !this.props.ignoreTabKey) { // Tab Key
       document.execCommand('insertHTML', false, '&#009')
       evt.preventDefault()
     } else if (evt.keyCode === 13) { // Enter Key

typings/react-live.d.ts

@@ -15,6 +15,10 @@ export function LiveEditor(props: HTMLAttributes<HTMLElement>): JSX.Element
 export function LiveError(props: HTMLAttributes<HTMLElement>): JSX.Element
 export function LivePreview(props: HTMLAttributes<HTMLElement>): JSX.Element
 
-export class Editor extends Component<HTMLAttributes<HTMLElement>, {}>{}
+export type EditorProps = HTMLAttributes<HTMLElement> & {
+  ignoreTabKey?: boolean;
+}
+
+export class Editor extends Component<EditorProps, {}>{}
 
 export function withLive<T>(wrappedComponent: T): Component<any, {}>