import { Plugin , EditorState , PluginKey , Transaction } from 'prosemirror-state' ; import { DecorationSet , Decoration } from 'prosemirror-view' ; import { Node as ProseMirrorNode } from 'prosemirror-model' ; const PLACEHOLDER_CLASSNAME = 'NgxEditor__Placeholder' ; const placeholderPlugin = ( text ? ) : Plugin => { return new Plugin ( { key : new PluginKey ( 'placeholder' ) , state : { init ( ) { return text ?? '' ; } , apply ( tr , previousVal ) { const placeholder = tr . getMeta ( 'UPDATE_PLACEHOLDER' ) ?? previousVal ; return placeholder ; } } , props : { decorations ( state ) { const { doc } = state ; const { textContent , childCount } = doc ; const placeholder = this . getState ( state ) ; if ( ! placeholder || childCount > 1 ) { return DecorationSet . empty ; } const decorations = [ ] ; const decorate = ( node , pos ) => { if ( node . type . isBlock && node . childCount === 0 && textContent . length === 0 ) { const placeholderNode = Decoration . node ( pos , ( pos + node . nodeSize ) , { class : PLACEHOLDER_CLASSNAME , 'data-placeholder' : placeholder , 'data-align' : node . attrs [ 'align' ] ?? null } ) ; decorations . push ( placeholderNode ) ; } return false ; } ; doc . descendants ( decorate ) ; return DecorationSet . create ( doc , decorations ) ; } } } ) ; } ; export default placeholderPlugin ;