slate-with-placeholders
v1.0.4
Published
Adds custom placeholders that you can put in any block. Example:
Downloads
11
Readme
slate-with-placeholders
Adds custom placeholders that you can put in any block. Example:
Install
yarn add slate-with-placeholders
Usage
This plugin is technically two plugins, one that adds a placeholder as a decoration and one that renders the placeholder.
The first plugin withPlaceholders
looks for block types that it should render placeholders in.
import { withPlaceholders, renderPlaceholders } from "slate-with-placeholders";
const BLOCKS_TYPES_WITH_PLACEHOLDERS = ["text-field", "number-field"];
const plugins = [
withPlaceholders({
types: BLOCKS_TYPES_WITH_PLACEHOLDERS
}),
renderPlaceholders()
];
// ...
<Editor plugins={plugins} {/* ... */}>
The text comes from the block's data
attribute, which lets you create dynamic placeholder texts. To set this, just add placeholderText
to the block in question:
import { Value } from 'slate';
const value = Value.fromJS({
document: {
object: "document",
nodes: [
{
object: "block",
type: "text-field",
data: {
placeholderText: "my custom placeholder text"
},
nodes: []
}
],
},
});
// ...
<Editor value={} />
Custom Rendering
If you don't like the default rendering in renderPlaceholders
, you can just render it yourself by creating your own renderDecoration
function:
function renderDecoration(props, editor, next) {
const { decoration, children } = props;
if (decoration.type !== "placeholder") {
return next();
}
const text = decoration.data.get("placeholderText");
return (
<span>
<span style={{color: "red"}}>
{text}
</span>
{/* NOTE: This children part is important to show the cursor */}
{children}
</span>
);
}