block-placeholder-kit

PreviousNext
Docs
platecomponent

Preview

Loading preview…
registry/components/editor/plugins/block-placeholder-kit.tsx
'use client';

import { KEYS } from 'platejs';
import { BlockPlaceholderPlugin } from 'platejs/react';

export const BlockPlaceholderKit = [
  BlockPlaceholderPlugin.configure({
    options: {
      className:
        'before:absolute before:cursor-text before:text-muted-foreground/80 before:content-[attr(placeholder)]',
      placeholders: {
        [KEYS.p]: 'Type something...',
      },
      query: ({ path }) => path.length === 1,
    },
  }),
];

Installation

npx shadcn@latest add @plate/block-placeholder-kit

Usage

import { BlockPlaceholderKit } from "@/components/block-placeholder-kit"
<BlockPlaceholderKit />