Placeholder

This is the Placeholder extension. It displays placeholder text in empty nodes to guide users on what to type.

Basic Usage

Default placeholder configuration showing text in the currently focused empty node.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    Placeholder,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: '',
    extensions: [
      RequiredExtensions.configure({}),
      Placeholder.configure({
        placeholder: 'Start typing here...',
      }),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Show for All Empty Nodes

Display placeholder text in all empty nodes, not just the currently focused one.

Vue

<HLTextEditor :editor="editor" containerClass="test-container">
  <template #footer>
    <div>Footer</div>
  </template>
</HLTextEditor>

ts

import { ref } from 'vue'
import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  Placeholder,
} from '@platform-ui/rte'

const editor = new Editor({
  content: '',
  extensions: [
    RequiredExtensions.configure({}),
    Placeholder.configure({
      placeholder: 'This placeholder is visible on all empty lines',
      showOnlyCurrent: false,
    }),
  ],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})

CSS

.test-container {
  .is-empty::before {
    color: var(--gray-500);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
    font-family: Inter, Verdana, sans-serif;
  }
}

Show on New Line

Display placeholder text in all empty nodes, not just the currently focused one.

Vue

<HLTextEditor :editor="editor" containerClass="test-container">
  <template #footer>
    <div>Footer</div>
  </template>
</HLTextEditor>

ts

import { ref } from 'vue'
import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  Placeholder,
} from '@platform-ui/rte'

const editor = new Editor({
  content: '',
  extensions: [
    RequiredExtensions.configure({}),
    Placeholder.configure({
      placeholder: 'This placeholder is visible on all empty lines',
    }),
  ],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})

CSS

.test-container {
  .is-empty::before {
    color: var(--gray-500);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
    font-family: Inter, Verdana, sans-serif;
  }
}

Configuration

import { Editor, Placeholder } from '@platform-ui/rte'

const editor = new Editor({
  extensions: [
    Placeholder.configure({
      // Simple string placeholder
      placeholder: 'Write something...',

      // OR dynamic placeholder function
      placeholder: ({ editor, node, pos, hasAnchor }) => {
        if (node.type.name === 'heading') {
          return 'Enter a heading'
        }
        return 'Start typing...'
      },

      // Show only in currently focused empty node
      showOnlyCurrent: true,

      // Show placeholder only when editor is editable
      showOnlyWhenEditable: true,

      // Show placeholders in nested nodes too
      includeChildren: false,

      // CSS classes
      emptyEditorClass: 'is-editor-empty',
      emptyNodeClass: 'is-empty',
    }),
  ],
})

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  Placeholder,
} from '@platform-ui/rte'

Options

Option	Type	Default	Description
placeholder	string | function	'Enter a description...'	The placeholder text or function returning text
showOnlyCurrent	boolean	true	Show placeholder only in currently focused empty node
showOnlyWhenEditable	boolean	true	Show placeholder only when editor is editable
includeChildren	boolean	false	Show placeholders in nested nodes
emptyEditorClass	string	'is-editor-empty'	CSS class when entire editor is empty
emptyNodeClass	string	'is-empty'	CSS class for empty nodes

Notes

• The placeholder extension does not have any toolbar controls
• Placeholder text only appears in empty nodes (nodes with no content)
• The placeholder disappears as soon as you start typing
• When showOnlyCurrent is true, only the focused empty node shows a placeholder
• When showOnlyCurrent is false, all empty nodes show placeholders
• The showOnlyWhenEditable option hides placeholders when the editor is read-only
• CSS classes are applied to empty nodes for custom styling
• The placeholder is implemented using ProseMirror decorations