diff --git a/docs/reference/components/editor.md b/docs/reference/components/editor.md index cd5be3c1a..6fd3525c9 100644 --- a/docs/reference/components/editor.md +++ b/docs/reference/components/editor.md @@ -51,7 +51,7 @@ The top-level React component that renders the Slate editor itself. /> ``` -### `className` +### `className` `String` An optional class name to apply to the content editable element. @@ -91,6 +91,13 @@ A [`State`](../models/state.md) object representing the current state of the edi An optional dictionary of styles to apply to the content editable element. +### `tabIndex` + +Indicates if it should participate to [sequential keyboard navigation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). + +### `role` + +ARIA property to define the role of the editor, it defaults to `textbox` when editable. ## Placeholder Properties @@ -122,7 +129,7 @@ An optional dictionary of styles to apply to the default block type's placeholde In addition to its own properties, the editor allows passing any of the properties that a [plugin](../plugins/plugin.md) defines as well. -These properties are actually just a convenience—an implicit plugin definition. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack. +These properties are actually just a convenience—an implicit plugin definition. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack. For example, these two snippets of code are equivalent: @@ -140,7 +147,7 @@ const plugins = [ ```js const editorPlugin = { - onKeyDown: myKeyHandler + onKeyDown: myKeyHandler } const plugins = [ @@ -179,17 +186,17 @@ Programmatically blur the editor. Programmatically focus the editor. -### `getSchema` +### `getSchema` `getSchema() => Schema` Return the editor's current schema. -### `getState` +### `getState` `getState() => State` Return the editor's current state. -### `onChange` +### `onChange` `onChange(state: State) => Void` Effectively the same as `setState`. Invoking this method will update the state of the editor, running it through all of it's plugins, and passing it the parent component, before it cycles back down as the new `state` property of the editor. diff --git a/src/components/content.js b/src/components/content.js index e1b39a4cf..35817547d 100644 --- a/src/components/content.js +++ b/src/components/content.js @@ -47,10 +47,12 @@ class Content extends React.Component { onPaste: React.PropTypes.func.isRequired, onSelect: React.PropTypes.func.isRequired, readOnly: React.PropTypes.bool.isRequired, + role: React.PropTypes.string, schema: React.PropTypes.object, spellCheck: React.PropTypes.bool.isRequired, state: React.PropTypes.object.isRequired, - style: React.PropTypes.object + style: React.PropTypes.object, + tabIndex: React.PropTypes.number }; /** @@ -694,7 +696,7 @@ class Content extends React.Component { render = () => { const { props } = this - const { className, readOnly, state } = props + const { className, readOnly, state, tabIndex, role } = props const { document } = state const children = document.nodes .map(node => this.renderNode(node)) @@ -747,6 +749,8 @@ class Content extends React.Component { onSelect={this.onSelect} spellCheck={spellCheck} style={style} + role={readOnly ? null : (role || 'textbox')} + tabIndex={tabIndex} > {children} diff --git a/src/components/editor.js b/src/components/editor.js index 4d28c3631..4cf266af7 100644 --- a/src/components/editor.js +++ b/src/components/editor.js @@ -68,10 +68,12 @@ class Editor extends React.Component { placeholderStyle: React.PropTypes.object, plugins: React.PropTypes.array, readOnly: React.PropTypes.bool, + role: React.PropTypes.string, schema: React.PropTypes.object, spellCheck: React.PropTypes.bool, state: React.PropTypes.instanceOf(State).isRequired, - style: React.PropTypes.object + style: React.PropTypes.object, + tabIndex: React.PropTypes.number }; /** @@ -250,6 +252,8 @@ class Editor extends React.Component { readOnly={props.readOnly} spellCheck={props.spellCheck} style={props.style} + tabIndex={props.tabIndex} + role={props.role} /> ) } diff --git a/test/rendering/fixtures/custom-block-void/output.html b/test/rendering/fixtures/custom-block-void/output.html index 46a590bc8..145fbd73d 100644 --- a/test/rendering/fixtures/custom-block-void/output.html +++ b/test/rendering/fixtures/custom-block-void/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/custom-block/output.html b/test/rendering/fixtures/custom-block/output.html index 9aa0addbc..7bb85ca06 100644 --- a/test/rendering/fixtures/custom-block/output.html +++ b/test/rendering/fixtures/custom-block/output.html @@ -1,5 +1,5 @@ -
+
word diff --git a/test/rendering/fixtures/custom-decorator/output.html b/test/rendering/fixtures/custom-decorator/output.html index f11af486b..22cb2632f 100644 --- a/test/rendering/fixtures/custom-decorator/output.html +++ b/test/rendering/fixtures/custom-decorator/output.html @@ -1,5 +1,5 @@ -
+
o diff --git a/test/rendering/fixtures/custom-inline-void/output.html b/test/rendering/fixtures/custom-inline-void/output.html index 9869ab7d1..74bb6534e 100644 --- a/test/rendering/fixtures/custom-inline-void/output.html +++ b/test/rendering/fixtures/custom-inline-void/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/custom-inline/output.html b/test/rendering/fixtures/custom-inline/output.html index 30213e1d9..aab64ca14 100644 --- a/test/rendering/fixtures/custom-inline/output.html +++ b/test/rendering/fixtures/custom-inline/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/custom-mark-with-component/output.html b/test/rendering/fixtures/custom-mark-with-component/output.html index 8826d79e9..6ad1ed577 100644 --- a/test/rendering/fixtures/custom-mark-with-component/output.html +++ b/test/rendering/fixtures/custom-mark-with-component/output.html @@ -1,5 +1,5 @@ -
+
one diff --git a/test/rendering/fixtures/custom-mark-with-function/output.html b/test/rendering/fixtures/custom-mark-with-function/output.html index 8826d79e9..6ad1ed577 100644 --- a/test/rendering/fixtures/custom-mark-with-function/output.html +++ b/test/rendering/fixtures/custom-mark-with-function/output.html @@ -1,5 +1,5 @@ -
+
one diff --git a/test/rendering/fixtures/custom-mark-with-mixed/output.html b/test/rendering/fixtures/custom-mark-with-mixed/output.html index b64bbc6ba..8d4c46208 100644 --- a/test/rendering/fixtures/custom-mark-with-mixed/output.html +++ b/test/rendering/fixtures/custom-mark-with-mixed/output.html @@ -1,5 +1,5 @@ -
+
one diff --git a/test/rendering/fixtures/custom-mark-with-object/output.html b/test/rendering/fixtures/custom-mark-with-object/output.html index f29aaab4d..68a6d0f48 100644 --- a/test/rendering/fixtures/custom-mark-with-object/output.html +++ b/test/rendering/fixtures/custom-mark-with-object/output.html @@ -1,5 +1,5 @@ -
+
one diff --git a/test/rendering/fixtures/custom-mark-with-string/output.html b/test/rendering/fixtures/custom-mark-with-string/output.html index 9c9d6d0b3..2a2462cbb 100644 --- a/test/rendering/fixtures/custom-mark-with-string/output.html +++ b/test/rendering/fixtures/custom-mark-with-string/output.html @@ -1,5 +1,5 @@ -
+
one diff --git a/test/rendering/fixtures/default-block-and-inline/output.html b/test/rendering/fixtures/default-block-and-inline/output.html index 4b021cd8e..215978cf9 100644 --- a/test/rendering/fixtures/default-block-and-inline/output.html +++ b/test/rendering/fixtures/default-block-and-inline/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/default-block/output.html b/test/rendering/fixtures/default-block/output.html index b1c0dc062..dfee70d01 100644 --- a/test/rendering/fixtures/default-block/output.html +++ b/test/rendering/fixtures/default-block/output.html @@ -1,5 +1,5 @@ -
+
word diff --git a/test/rendering/fixtures/empty-text/output.html b/test/rendering/fixtures/empty-text/output.html index be2829e76..c168b2b18 100644 --- a/test/rendering/fixtures/empty-text/output.html +++ b/test/rendering/fixtures/empty-text/output.html @@ -1,5 +1,5 @@ -
+

diff --git a/test/rendering/fixtures/multiple-custom-block/output.html b/test/rendering/fixtures/multiple-custom-block/output.html index 485062eb0..9ff49e03f 100644 --- a/test/rendering/fixtures/multiple-custom-block/output.html +++ b/test/rendering/fixtures/multiple-custom-block/output.html @@ -1,5 +1,5 @@ -
+
word diff --git a/test/rendering/fixtures/multiple-custom-inline/output.html b/test/rendering/fixtures/multiple-custom-inline/output.html index 223556582..f0bfa1380 100644 --- a/test/rendering/fixtures/multiple-custom-inline/output.html +++ b/test/rendering/fixtures/multiple-custom-inline/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/nested-text-direction/output.html b/test/rendering/fixtures/nested-text-direction/output.html index be6827b26..1373beb1e 100644 --- a/test/rendering/fixtures/nested-text-direction/output.html +++ b/test/rendering/fixtures/nested-text-direction/output.html @@ -1,5 +1,5 @@ -
+
diff --git a/test/rendering/fixtures/text-direction/output.html b/test/rendering/fixtures/text-direction/output.html index ab2eed8d3..0402f5099 100644 --- a/test/rendering/fixtures/text-direction/output.html +++ b/test/rendering/fixtures/text-direction/output.html @@ -1,5 +1,5 @@ -
+
Hello World