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>
  );
}