Skip to main content

PlaceholderExtension

Summary

This extension shows a placeholder when the ProseMirror content of your editor is empty.

Features

Custom styling

The placeholder can be styled with a custom CSS class.

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { PlaceholderExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-placeholder package.

Examples

Source code
import './styles.css';

import { useCallback } from 'react';
import { PlaceholderExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

const Basic = (): JSX.Element => {
const extensions = useCallback(
() => [new PlaceholderExtension({ placeholder: `I'm a placeholder!` })],
[],
);
const { manager } = useRemirror({ extensions });

return (
<ThemeProvider>
<Remirror manager={manager} />
</ThemeProvider>
);
};

export const CustomStyle = (): JSX.Element => {
const extensions = useCallback(
() => [
new PlaceholderExtension({
placeholder: `I'm a styled placeholder!`,
emptyNodeClass: 'my-placeholder',
}),
],
[],
);
const { manager } = useRemirror({ extensions });

return (
<ThemeProvider>
<Remirror manager={manager} />
</ThemeProvider>
);
};

export default Basic;

API