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.
- [Properties](#properties)
- [`autoCorrect`](#autocorrect)
- [`autoFocus`](#autofocus)
- [`className`](#classname)
- [`onChange`](#onchange)
- [`onDocumentChange`](#ondocumentchange)
- [`onSelectionChange`](#onselectionchange)
- [`plugins`](#plugins)
- [`readOnly`](#readonly)
- [`role`](#role)
- [`spellCheck`](#spellcheck)
- [`state`](#state)
- [`style`](#style)
- [`tabIndex`](#tabindex)
- [Placeholder Properties](#placeholder-properties)
- [`placeholder`](#placeholder)
- [`placeholderClassName`](#placeholderclassname)
@@ -38,20 +43,36 @@ The top-level React component that renders the Slate editor itself.
- [`getState()`](#getstate)
- [`onChange(state)`](#onchange)
## Properties
```js
<Editor
className={string}
autoCorrect={Boolean}
autoFocus={Boolean}
className={String}
onChange={Function}
onDocumentChange={Function}
onSelectionChange={Function}
plugins={Array}
readOnly={Boolean}
role={String}
spellCheck={Boolean}
state={State}
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`
`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.
### `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`
@@ -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.
### `tabIndex`
`Number`
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
```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:
```js
export default MySlatePlugin(options) {
export default function MySlatePlugin(options) {
return {
// 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.
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
{
@@ -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 `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).