diff --git a/docs/reference/slate-react/editor.md b/docs/reference/slate-react/editor.md index 78190abb0..76eed01de 100644 --- a/docs/reference/slate-react/editor.md +++ b/docs/reference/slate-react/editor.md @@ -10,6 +10,7 @@ The top-level React component that renders the Slate editor itself. ```js ``` +### `id` + +`String` + +Id for the top-level rendered HTML element of the editor. + ### `autoCorrect` `Boolean` diff --git a/packages/slate-react/src/components/content.js b/packages/slate-react/src/components/content.js index dcbe15344..fa1451616 100644 --- a/packages/slate-react/src/components/content.js +++ b/packages/slate-react/src/components/content.js @@ -41,6 +41,7 @@ class Content extends React.Component { autoCorrect: Types.bool.isRequired, className: Types.string, editor: Types.object.isRequired, + id: Types.string, readOnly: Types.bool.isRequired, role: Types.string, spellCheck: Types.bool.isRequired, @@ -421,6 +422,7 @@ class Content extends React.Component { render() { const { props, handlers } = this const { + id, className, readOnly, editor, @@ -467,6 +469,7 @@ class Content extends React.Component { data-key={document.key} contentEditable={readOnly ? null : true} suppressContentEditableWarning + id={id} className={className} autoCorrect={props.autoCorrect ? 'on' : 'off'} spellCheck={spellCheck} diff --git a/packages/slate-react/src/components/editor.js b/packages/slate-react/src/components/editor.js index c03901ba2..02fd00578 100644 --- a/packages/slate-react/src/components/editor.js +++ b/packages/slate-react/src/components/editor.js @@ -35,6 +35,7 @@ class Editor extends React.Component { autoCorrect: Types.bool, autoFocus: Types.bool, className: Types.string, + id: Types.string, onChange: Types.func, options: Types.object, placeholder: Types.any, diff --git a/packages/slate-react/src/plugins/react.js b/packages/slate-react/src/plugins/react.js index f6117ef7c..a66410ecf 100644 --- a/packages/slate-react/src/plugins/react.js +++ b/packages/slate-react/src/plugins/react.js @@ -60,6 +60,7 @@ function ReactPlugin(options = {}) { autoCorrect={props.autoCorrect} className={props.className} editor={editor} + id={props.id} onEvent={(handler, event) => editor.run(handler, event)} readOnly={props.readOnly} role={props.role}