import { Plugin } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
import { isDocEmpty } from '../serializer';

/**
 * Shows placeholder text on the first paragraph while the document is empty.
 * The text itself is rendered by CSS (`content: attr(data-placeholder)`) so
 * it never enters the document.
 */
export function placeholderPlugin(getText: () => string): Plugin {
  return new Plugin({
    props: {
      decorations(state) {
        const text = getText();
        if (!text || !isDocEmpty(state.doc)) return null;
        const deco = Decoration.node(0, state.doc.firstChild!.nodeSize, {
          class: 'nile-wysiwyg__empty',
          'data-placeholder': text,
        });
        return DecorationSet.create(state.doc, [deco]);
      },
    },
  });
}