1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-09 06:30:40 +02:00

refactor placeholder to use schema (#1253)

* refactor placeholder to use schema

* update placeholder, remove old export

* add maxWidth to prevent overflow

* update docs
This commit is contained in:
Ian Storm Taylor
2017-10-18 00:23:39 -07:00
committed by GitHub
parent 117d8c55cc
commit f42a64ac8f
31 changed files with 209 additions and 275 deletions

View File

@@ -48,7 +48,6 @@
## Slate React
- [Editor](./reference/slate-react/editor.md)
- [Placeholder](./reference/slate-react/placeholder.md)
- [Plugins](./reference/slate-react/plugins.md)
- [Custom Nodes](./reference/slate-react/custom-nodes.md)
- [Core Plugins](./reference/slate-react/core-plugins.md)

View File

@@ -1,58 +0,0 @@
# `<Placeholder>`
```js
import { Placeholder } from 'slate-react'
```
A simple component that adds a placeholder to a node. It encapsulates all of the Slate-related logic that determines when to render the placeholder, so you don't have to think about it.
## Properties
```js
<Placeholder
className={String}
node={Node}
parent={Node}
state={State}
style={Object}
>
{children}
</Placeholder>
```
### `children`
`Any`
React child elements to render inside the placeholder `<span>` element.
### `className`
`String`
An optional class name string to add to the placeholder `<span>` element.
### `firstOnly`
`Boolean`
An optional toggle that allows the Placeholder to render even if it is not the first node of the parent. This is useful for cases where the Placeholder should show up at every empty instance of the node. Defaults to `true`.
### `node`
`Node`
The node to render the placeholder element on top of. The placeholder is positioned absolutely, covering the entire node.
### `parent`
`Node`
The node to check for non-empty content, to determine whether the placeholder should be shown or not, if `firstOnly` is set to `false`.
### `state`
`State`
The current state of the editor.
### `style`
`Object`
An optional dictionary of styles to pass to the placeholder `<span>` element.

View File

@@ -84,6 +84,7 @@ Internally, the `marks` and `nodes` properties of a schema are simply converted
match: Function,
decorate: Function,
normalize: Function,
placeholder: Component || Function,
render: Component || Function || Object || String,
validate: Function
}
@@ -140,6 +141,18 @@ The `decorate` property allows you define a function that will apply extra marks
The `normalize` property is a function to run that recovers the editor's state after the `validate` property of a rule has determined that an object is invalid. It is passed a [`Change`](./change.md) that it can use to make modifications. It is also passed the return value of the `validate` function, which makes it easy to quickly determine the failure reason from the validation.
### `placeholder`
`Component` <br/>
`Function`
```js
{
placeholder: (props) => <span>{props.editor.props.placeholder}</span>
}
```
The `placeholder` property determines which React component Slate will use to render a placeholder for the editor.
### `render`
`Component` <br/>
`Function` <br/>