tiptap: placeholder: styles at long placeholder-texts

[norbertrost]

What’s the bug you are facing?

Using "@tiptap/react": "^2.0.0-beta.108" "@tiptap/extension-placeholder": "^2.0.0-beta.48" in a React/Typescript App.

If a placeholder-text is too long, it troubles with the styles: the placeholder runs "out of its area" and the styles do not catch this adequatly. See screenshot.

g

Which browser was this experienced in? Are any special extensions installed?

Tested on Chrome, Version 102.0.5005.61, on an Mac, MacOS Big Sur 11.6

How can we reproduce the bug on our side?

Use a loooong Placeholder-Text while using Tiptap-placeholder-Extension.

Can you provide a CodeSandbox?

const RTE: React.FC<IProps> = (props: IProps) => { const { t } = useTranslation("common")

// function to update the shown text length while the user is typing const updateTextLength = (html: string) => { // calculate the length without HTML, analogue to the calculation to the validation at most forms using FormikRTE const length = stripHtml(html).result.length // serve the calculated length to the element, that shows it document.getElementById(props.id + "-length").innerHTML = length.toString() // warn with marked text (text-danger), if the number of characters exeed the allowed number if (props.maxLength) { document.getElementById(props.id + "-length-container").classList .toggle("text-danger", length > props.maxLength) } }

// define the used editor const tiptapeditor = useEditor({ extensions: [ CharacterCount.configure({ // does not limit the users typing! limit: props.maxLength ? props.maxLength : null, // mode: "nodeSize", }), Link.configure({ openOnClick: false, }), Placeholder.configure({ placeholder: props.placeholder ? t(props.placeholder, { maxLength: props.maxLength }) : null, /* showOnlyCurrent: false, showOnlyWhenEditable: false,*/ }), StarterKit, Underline, ], content: props.value, onCreate: ({ editor }) => { // set the initial character count updateTextLength(editor.getHTML()) }, onUpdate: ({ editor }) => { // get new content on update props.onChange(editor.getHTML()) // set the current character count updateTextLength(editor.getHTML()) }, })

return <div className={"rte-container " + props.className}> <MenuBar editor={tiptapeditor} id={props.id} /> <EditorContent editor={tiptapeditor} /> <div className="rte-textlength" id={props.id + "-length-container"}> <span id={props.id + "-length"}>0 { props.maxLength ? t("form.RTE.textLengthWithMaxLength", { maxLength: props.maxLength }) : t("form.RTE.textLength") }

}

export default RTE

---

Styles: .ProseMirror { // TipTap is based on ProseMirror, so the editor uses this css-tag as default padding: 0.5rem; border-radius: 0.25rem; background-color: $custom-light; font-size: 15px; border: none; }

.ProseMirror p.is-editor-empty:first-child::before { // for placeholders color: #adb5bd; content: attr(data-placeholder); float: left; min-height: 2rem; pointer-events: none; }

What did you expect to happen?

The editor-container should adapt its size to the needed size for the whole placeholder-text.

Anything to add? (optional)

Maybe it's just a css-style element, that fixes that issue.

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[norbertrost]

I would like to renew that issue. The bug is still not solved.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[agrawal-rohit]

I'm facing this issue as well, did someone figure out a solution for this?