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:
committed by
Ian Storm Taylor
parent
e6a4009d75
commit
bf24e77518
@@ -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
|
||||
|
@@ -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).
|
||||
|
||||
|
Reference in New Issue
Block a user