Editor inserts empty paragraph before and after custom node

What’s the bug you are facing?

I have a custom node, with a renderHTML() function which looks like this:

renderHTML({ HTMLAttributes }) {
		const { href, target, style, width, ...imgAttrs } = HTMLAttributes;

		if (href) {
			return [
				'figure',
				{
					style,
					contenteditable: true,
				},
				[
					'a',
					{
						href,
						target,
					},
					[
						'img', mergeAttributes(imgAttrs, { draggable: false, contenteditable: false, width }),
					],
				],
				['figcaption', 0],
			];
		} else {
			return [
				'figure',
				{
					style,
					contenteditable: true,
				},
				[
					'img', mergeAttributes(imgAttrs, { draggable: false, contenteditable: false, width }),
				],
				['figcaption', 0],
			];
		}
	},

Everything with my custom node works just fine but one thing, namely, before and after each ‘figure’-node that is inserted, there is a p-Tag rendered as such, with a line break inside:

<p><br class="ProseMirror-trailingBreak"></p>

In the end, the full HTML for my node, after having inserted it, would be:

<p>
  <br class="ProseMirror-trailingBreak">
</p>
<p>
  <figure style="float: none;" contenteditable="true"><img src="https://something.com/16/32/1d/d2/1644827363/doge.jpg" alt="doge" draggable="false" contenteditable="false" width="auto">
    <figcaption>doge</figcaption>
  </figure>
  <br class="ProseMirror-trailingBreak">
</p>
<p>
  <br class="ProseMirror-trailingBreak">
</p>

Upon content update, tiptap deletes the line break inside the paragraph, but the paragraph itself remains. In the end, every time I update something, the number of empty tags would accumulate and become very numerous. Naturally I can just filter out empty p-tags every time the editor loads, but that’s a dirty approach from my side.

Any idea on why these empy paragraphs might show up in the first place?

How can we reproduce the bug on our side?

Did not manage to create a working sandbox in codesandbox.

In Codesandbox, I here get an error that I do not get locally, with the same versions of the dependencies.

error in mounted hook: SyntaxError mixing inline and block content

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I expected my custom node to be inserted without empty p-Tags before and after.

Anything to add? (optional)

No response

Did you update your dependencies?

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

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[tomosterlund]

Any news on this one? Seems to be an issue to at least 9 other devs as well.

[shekhars094]

is anyone has solution?