From bf24e77518beae9d6a30f13fa607d76df631d195 Mon Sep 17 00:00:00 2001 From: Tobias Andersen Date: Thu, 17 Aug 2017 19:24:31 +0200 Subject: [PATCH] Improve documentation (#1000) * Fix typos in docs * Add missing Editor properties in docs --- docs/reference/components/editor.md | 40 ++++++++++++++++++++++++----- docs/reference/plugins/plugin.md | 8 +++--- 2 files changed, 38 insertions(+), 10 deletions(-) diff --git a/docs/reference/components/editor.md b/docs/reference/components/editor.md index ad7368192..a7b365955 100644 --- a/docs/reference/components/editor.md +++ b/docs/reference/components/editor.md @@ -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 ``` +### `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 diff --git a/docs/reference/plugins/plugin.md b/docs/reference/plugins/plugin.md index 9526f67e4..64b6b8e71 100644 --- a/docs/reference/plugins/plugin.md +++ b/docs/reference/plugins/plugin.md @@ -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 { @@ -155,11 +155,11 @@ The `data` object contains the `key` which is a string name of the key that was } ``` -The `isMod` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _without_ the `alt/option` key also being pressed. This is a convenience for adding hotkeys like `command+b`. +The `isMod` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _without_ the `alt/option` key also being pressed. This is a convenience for adding hotkeys like `command+b`. 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).