Placeholder height

[jloganolson]

Hi there, I'm using the Placeholder extension and my placeholder text runs more than one line - I tried removing the height: 0 from the boilerplate CSS but I noticed that removing that line makes the cursor move to the end of the placeholder text (as opposed to the beginning of the line). I'm guessing that's why that height:0 is there? Is there another way to accomplish the cursor-at-head while also maintaining a responsive height in the text field?

[cadars]

I think height: 0 makes sense in combination with float: left. Can you reproduce your issue in a codesandbox? The placeholder behaves normally for me on multiple lines.

[colenocks]

For me, I got rid of the float and height: 0 as it doesn't work with multiline placeholder text.
It works so far like this (tailwindCSS):

.ProseMirror {
    /* Placeholder */
    p.is-editor-empty {
        &:first-child::before {
            @apply pointer-events-none text-gray-400;
            content: attr(data-placeholder);
        }

        /* hides (only when editor is empty) the trailing break element that causes the cursor to be placed at the end of the placeholder 
        text */
        .ProseMirror-trailingBreak {
            @apply hidden;
        }
    }
}

[JWhite30515]

I was able to get the editor container to correctly expand to the height of multiline placeholder content, and show the cursor in the correct spot, by doing something like this:

.ProseMirror {
  p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    pointer-events: none;
  }

  p.is-editor-empty:first-child {
    content: attr(data-placeholder);
    float: left;
    position: relative;
    color: transparent;
    caret-color: black;

    & .ProseMirror-trailingBreak {
      display: none;
    }
  }
}