Tiptap leaves empty <p> tag, how to remove it?

See original GitHub issue

I am doing client side validation, and want to notice user when content is empty, but Tiptap leaves <p></p> even if there’s no content in editor. Make no sense. How to remove everything when user deletes all content in editor?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

17reactions
philippkuehncommented, Jan 6, 2019

That’s the behavior of most editors I think. It’s because you need an empty paragraph to type in. I don’t plan to change this at the moment.

12reactions
kikky7commented, Jan 10, 2020

You don’t need an empty paragraph to type in. My inital value is null and it works as it should. It automatically adds p or any other selected tags. Same issue happens with any other tags (headings, anchor, span, …) when you delete text. There is no textual value, and all it’s left are empty tags <p></p> <h1></h1> and so on… Solution from @bdrtsky is hadrcoding and such solution can only work as temporary fix

Edit: This is my fix (it clears empty paragraphs, headings and lists as tested):

onUpdate: ({ getJSON, getHTML }) => {
  let content = getHTML(),
      json = getJSON().content;

  if (Array.isArray(json) && json.length === 1 && !json[0].hasOwnProperty("content")) {
    content = null; // or any other default value
  }

  this.$emit("input", content);
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Tiptap leaves empty <p> tag, how to remove it? #154 - GitHub
I am doing client side validation, and want to notice user when content is empty, but Tiptap leaves even if there's no content...
Read more >
Removing the default paragraph (p) inside a list item (li)
Hello, I've been using tiptap for the past few weeks in order to develop ... What I want is to get rid of...
Read more >
or "<p>&nbsp;</p>" or "<br />" added to empty textareas ...
Hello, I have a node were I added CCK text area (multi row) field. It is optional and ideally if some one doesn't...
Read more >
Editor - Tiptap
Can be very helpful to enable/disable or show/hide buttons. // Returns `true` if the undo command ... Just leave out the element ,...
Read more >
Disable auto-adding of <p> tag - html - Stack Overflow
You can keep the RTE from surrounding your text with <p> tags by setting the removeSingleParagraphContainer property to true as long as you ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found