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.

[J4YF7O]

The answers allowing to do it via CSS and/or via an Editor (onUpdate) do not suit me because I wish to be able to use my extensions with NodeJs and the "generateHTML" function of the @tiptap/html package. (Email...)

My solution is to extend both the rendering of my paragraph, and my "ListItem".

The one that adds a <p> is (as already said), not ListItem but the Paragraphs extension.

The only time I don't want the Paragraph extension to add a "p" tag is when it's the first child of a ListItem, so what I'm proposing is to add an attribute that allows the Paragraph to put or not put a "p". In my example I call it withoutHTMLTag. It is the ListItem extension that will force this value.

import ListItem from '@tiptap/extension-task-item';
import Paragraph from '@tiptap/extension-paragraph'; 

const CustomListItem = ListItem.extend({
  renderHTML(props) {
    const { node } = props;
    if (node.firstChild?.type?.name === 'paragraph') {
      node.firstChild.attrs = {
        ...node.firstChild.attrs,
        withoutHTMLTag: true,
      };
    }
    return this.parent?.(props);
});

const CustomParagraph = Paragraph.extend({
  renderHTML({ node }) {
    return [node?.attrs?.withoutHTMLTag ? '' : 'p', 0];
  },
});

As you can see I'm making a copy of the attributes, and not just attrs.withoutHTMLTag = true because otherwise the attribute is applied to all my Paragraph Node using the default attributes. (The reference used is the same).

[laurent-brisbois]

@bdrtsky

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

It can leave the value to <h1></h1> to or whichever else tag.

[varave]

this works for me:

onUpdate: () => {
  // editor - is useEditor instance
  const value = editor.value.isEmpty ? '' : editor.value.getHTML()
  emit('update:modelValue', value)
}

[homocodian]

this works for me:

onUpdate: () => {
  // editor - is useEditor instance
  const value = editor.value.isEmpty ? '' : editor.value.getHTML()
  emit('update:modelValue', value)
}

What is emit and from where?

[varave]

@homocodian is vue 3 syntax like a const emit = defineEmits('update:modelValue'). I'm using this for my Editor component wrapper and using v-model on the component