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

[bdrtsky]

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?

[bdrtsky]

For now fixed it with

onUpdate: ({ getJSON, getHTML }) => {
          this.html = getHTML()
          if (this.html === '<p></p>') this.html = ''
          this.$emit('input', this.html)
        }

Still wonder about this behavior? Not sure if there can be situations where Tiptap will leave something else empty, but paragraph.

[philippkuehn]

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.

[ieglonew01f]

Also, Tiptap puts <p> tags inside list elements for some reason

[philippkuehn]

@ieglonew01f see #118

[kikky7]

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);
}

[Sogl]

@bdrtsky @kikky7 both solution works, but when I send content: this.editor.getHTML(), in axios, I see content: "<p></p>"... empty paragraph is still here. I use server-side validation.