# Placeholder

Adds transient placeholder decorations and attributes to empty nodes. DOM hosts provide CSS; other views need corresponding presentation support.

Adds transient placeholder decorations and attributes to empty nodes. DOM hosts provide CSS; other views need corresponding presentation support.

`@quirekit/extensions` · **MIT**

## Editor compatibility
Layer：**Shared document capability**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Unverified | A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support. |
| Block | Unverified | A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/extensions@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { Placeholder } from '@quirekit/extensions'

const hint = Placeholder.configure({ placeholder: '开始写作…' })
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support.

### Block

A complete integration and verification path for this entry has not been established for this product. A public Core export does not imply product presentation, controls or file support.

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### emptyEditorClass

Class name added when the whole editor is empty.

Type：`string`

Default：`"is-editor-empty"`

### emptyNodeClass

Class name added to every empty decorated node.

Type：`string`

Default：`"is-empty"`

### dataAttribute

Data attribute name used for the placeholder label.

Type：`string`

Default：`"placeholder"`

### placeholder

Static placeholder text or callback.

Type：`string | ((props: PlaceholderProps) => string)`

Default：`"Write something …"`

### showOnlyWhenEditable

Whether placeholders should only show when the editor is editable.

Type：`boolean`

Default：`true`

### showOnlyCurrent

Whether only the current empty node should show a placeholder.

Type：`boolean`

Default：`true`

### includeChildren

Whether descendant empty nodes should also be inspected.

Type：`boolean`

Default：`false`

## Commands and runtime

This entry declares no directly enumerable commands. Children supply bundle commands; product plugins use contributions or document services.

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.