Adding placeholder on new line only

lvegerano · July 10, 2023, 2:34pm

Hi all,

I’m trying to create a plugin that will show a menu and an input when the type ‘/’ is on a new line. For some reason, the placeholder text is not rendering. I’m not sure what I am doing wrong. Any tips would be appreciated. Here is the code I go so far.

TIA

new Plugin({
        key: PluginKey,
        props: {
          decorations: ({ doc, selection }) => {
            const active = this.editor.isEditable;

            if (!active) return null;

            const isNewLine = doc.lastChild?.content.size === 0;

            console.log('is new line', isNewLine, doc.lastChild?.nodeSize);

            if (isNewLine) {
              const to = doc.lastChild.nodeSize;

              const decoration = Decoration.node(0, to, {
                nodeName: 'inlinemenu',
                class: 'text-red italics',
                'data-placeholder': 'Press spacebar to start',
              });

              return DecorationSet.create(doc, [decoration]);
            }

            return null;
          }
        }
      })

marijn · July 10, 2023, 2:49pm

This doesn’t look like it will cover precisely one node, given the 0. Also, are you trying to wrap a document node in an inlinemenu element? Because that’s what that node decoration does. Maybe you were looking for Decoration.widget?

lvegerano · July 10, 2023, 6:47pm

I want to be able to do something like this below when users get to a new line (what I’m trying to achieve in the code above)

When they press the spacebar, I want to accomplish what’s below.

I hope this makes sense. Apologies for the quality of question, I’m very much just learning prosemirror.