@tiptap/extension-placeholder

What is @tiptap/extension-placeholder?

@tiptap/extension-placeholder is an extension for the Tiptap editor that allows you to add placeholder text to your editor. This can be useful for providing users with guidance on what to input in the editor.

What are @tiptap/extension-placeholder's main functionalities?

Basic Placeholder

This feature allows you to add a basic placeholder text to the editor. The placeholder text will be displayed when the editor is empty.

{"import":"import Placeholder from '@tiptap/extension-placeholder';","usage":"const editor = new Editor({\n  extensions: [\n    Placeholder.configure({\n      placeholder: 'Start typing here...',\n    }),\n  ],\n});"}

Dynamic Placeholder

This feature allows you to set dynamic placeholder text based on the node type. For example, you can have different placeholder texts for headings and paragraphs.

{"import":"import Placeholder from '@tiptap/extension-placeholder';","usage":"const editor = new Editor({\n  extensions: [\n    Placeholder.configure({\n      placeholder: ({ node }) => {\n        if (node.type.name === 'heading') {\n          return 'Enter a heading';\n        }\n        return 'Start typing here...';\n      },\n    }),\n  ],\n});"}

Custom Placeholder Styles

This feature allows you to apply custom styles to the placeholder text by specifying a CSS class.

{"import":"import Placeholder from '@tiptap/extension-placeholder';","usage":"const editor = new Editor({\n  extensions: [\n    Placeholder.configure({\n      placeholder: 'Start typing here...',\n      emptyEditorClass: 'my-custom-placeholder',\n    }),\n  ],\n});"}

Other packages similar to @tiptap/extension-placeholder

draft-js-placeholder-plugin

The draft-js-placeholder-plugin is a plugin for the Draft.js editor that provides similar functionality to @tiptap/extension-placeholder. It allows you to add placeholder text to your Draft.js editor. However, it is specific to Draft.js and may not offer the same level of customization as @tiptap/extension-placeholder.

README

@tiptap/extension-placeholder

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Official Documentation

Documentation can be found on the tiptap website.

License

tiptap is open sourced software licensed under the MIT license.