1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-13 18:53:59 +02:00

Improve documentation (#1000)

* Fix typos in docs

* Add missing Editor properties in docs
This commit is contained in:
Tobias Andersen
2017-08-17 19:24:31 +02:00
committed by Ian Storm Taylor
parent e6a4009d75
commit bf24e77518
2 changed files with 38 additions and 10 deletions

View File

@@ -8,14 +8,19 @@ import { Editor } from 'slate'
The top-level React component that renders the Slate editor itself. The top-level React component that renders the Slate editor itself.
- [Properties](#properties) - [Properties](#properties)
- [`autoCorrect`](#autocorrect)
- [`autoFocus`](#autofocus)
- [`className`](#classname) - [`className`](#classname)
- [`onChange`](#onchange) - [`onChange`](#onchange)
- [`onDocumentChange`](#ondocumentchange) - [`onDocumentChange`](#ondocumentchange)
- [`onSelectionChange`](#onselectionchange) - [`onSelectionChange`](#onselectionchange)
- [`plugins`](#plugins) - [`plugins`](#plugins)
- [`readOnly`](#readonly) - [`readOnly`](#readonly)
- [`role`](#role)
- [`spellCheck`](#spellcheck)
- [`state`](#state) - [`state`](#state)
- [`style`](#style) - [`style`](#style)
- [`tabIndex`](#tabindex)
- [Placeholder Properties](#placeholder-properties) - [Placeholder Properties](#placeholder-properties)
- [`placeholder`](#placeholder) - [`placeholder`](#placeholder)
- [`placeholderClassName`](#placeholderclassname) - [`placeholderClassName`](#placeholderclassname)
@@ -38,20 +43,36 @@ The top-level React component that renders the Slate editor itself.
- [`getState()`](#getstate) - [`getState()`](#getstate)
- [`onChange(state)`](#onchange) - [`onChange(state)`](#onchange)
## Properties ## Properties
```js ```js
<Editor <Editor
className={string} autoCorrect={Boolean}
autoFocus={Boolean}
className={String}
onChange={Function} onChange={Function}
onDocumentChange={Function}
onSelectionChange={Function}
plugins={Array} plugins={Array}
readOnly={Boolean} readOnly={Boolean}
role={String}
spellCheck={Boolean}
state={State} state={State}
style={Object} style={Object}
tabIndex={Number}
/> />
``` ```
### `autoCorrect`
`Boolean`
Whether the editor should attempt to autocorrect spellcheck errors.
### `autoFocus`
`Boolean`
An optional attribute that, when set to true, attempts to give the content editable element focus when it's loaded onto the page.
### `className` ### `className`
`String` `String`
@@ -82,6 +103,16 @@ An array of [`Plugins`](../plugins/plugin.md) that define the editor's behavior.
Whether the editor should be in "read-only" mode, where all of the rendering is the same, but the user is prevented from editing the editor's content. Whether the editor should be in "read-only" mode, where all of the rendering is the same, but the user is prevented from editing the editor's content.
### `spellCheck`
`Boolean`
Whether spellcheck is turned on for the editor.
### `role`
`String`
ARIA property to define the role of the editor, it defaults to `textbox` when editable.
### `state` ### `state`
`State` `State`
@@ -93,13 +124,10 @@ 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. An optional dictionary of styles to apply to the content editable element.
### `tabIndex` ### `tabIndex`
`Number`
Indicates if it should participate to [sequential keyboard navigation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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 ## Placeholder Properties
```js ```js

View File

@@ -30,7 +30,7 @@ When the editor needs to resolve a plugin-related handler, it will loop through
A plugin should always export a function that takes options. This way even if it doesn't take any options now, it won't be a breaking API change to take more options in the future. So a basic plugin might look like this: A plugin should always export a function that takes options. This way even if it doesn't take any options now, it won't be a breaking API change to take more options in the future. So a basic plugin might look like this:
```js ```js
export default MySlatePlugin(options) { export default function MySlatePlugin(options) {
return { return {
// Return properties that describe your logic here... // Return properties that describe your logic here...
} }
@@ -107,7 +107,7 @@ If no other plugin handles this event, it will be handled by the [Core plugin](.
This handler is called when the user drops content into the `contenteditable` element. The event is already prevented by default, so you must define a state change to have any affect occur. This handler is called when the user drops content into the `contenteditable` element. The event is already prevented by default, so you must define a state change to have any affect occur.
The `data` object is a convenience object created to standardize the drop metadata across browsers. Every data object has a `type` property, can be one of `text`, `html` or `files`, and a `target` property which is a [`Selection`](../models/selection.md) indicating where the drop occured. Depending on the type, it's structure will be: The `data` object is a convenience object created to standardize the drop metadata across browsers. Every data object has a `type` property, which can be one of `text`, `html` or `files`, and a `target` property which is a [`Selection`](../models/selection.md) indicating where the drop occurred. Depending on the type, its structure will be:
```js ```js
{ {
@@ -159,7 +159,7 @@ The `isMod` boolean is `true` if the `control` key was pressed on Windows or the
The `isModAlt` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _and_ the `alt/option` key was also being pressed. This is a convenience for secondary hotkeys like `command+option+1`. The `isModAlt` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _and_ the `alt/option` key was also being pressed. This is a convenience for secondary hotkeys like `command+option+1`.
The `isLine` and `isWord` booleans represent whether the "line modifier" or "word modifier" hotkeys are pressed when deleteing or moving the cursor. For example, on a Mac `option + right` moves the cursor to the right one word at a time. The `isLine` and `isWord` booleans represent whether the "line modifier" or "word modifier" hotkeys are pressed when deleting or moving the cursor. For example, on a Mac `option + right` moves the cursor to the right one word at a time.
Make sure to `event.preventDefault()` (and return `state`) if you do not want the default insertion behavior to occur! If no other plugin handles this event, it will be handled by the [Core plugin](./core.md). Make sure to `event.preventDefault()` (and return `state`) if you do not want the default insertion behavior to occur! If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).