Editor inserts empty paragraph before and after custom node

[tomosterlund]

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. 💖

[pspierce]

Seeing this as well, with:

addCommands() {
		return {
			setTWBlockquote:
				(options) =>
				({ commands }) => {
					return commands.insertContent([
						{
							type: this.name,
							content: [
								{
									type: 'blockquote',
									content: [
										{
											type: 'paragraph',
											content: [
												{
													type: 'text',
													text: options.quoteText
												}
											]
										}
									]
								},
								{
									type: 'paragraph', 
									content: [
										{
											type: 'text',
											marks: [
												{
													type: 'author',
												}
											],
											text: '- ' + options.quoteAuthor
										}
									]
								}
							]
						}
					]);
				},

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tomosterlund]

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

[vlaczas]

Have the same issue, no I manually deleting those 2 paragraphs right after insertion of my custom element. It's works well but default behavior is not expected

[shekhars094]

is anyone has solution?

[strblr]

Same issue here with the youtube plugin

[kaiserkiwi]

The problem still persists. I think as the stale bot closed it the tiptap team doesn't notice anything here, right?

[tomosterlund]

@kaiserkiwi maybe you could open open up a new issue and copy this in? Like you say, I believe the team might not see this :)

[sakshi-klaarhq]

I'm facing the same issue with taskItems (lists)

[gdfreitas]

We're also facing this issue when inserting HTML using the api editor.insertContentAt

[arielweinberger]

The issue still persists

[vucuong1820]

Same issue!

[Mentat-Radnor]

I faced with this problem too.
Is it possible to make this element more flexible and not add it to the page if there is no content at all?

[cnicodeme]

In my case, the issue was only occuring when I was pasting a value that was triggering that component to be displayed.

In the Node, I had the following:

addPasteRules () {
    return [
        new PasteRule({
            find: VIDEO_REGEX_GLOBAL,
            handler: (state) => handleRule.call(this, state)
        })
    ]
},

and the handleRule had, at the end, the following code:

state.tr.replaceWith(
        range.from,
        range.to,
        this.type.create({ src: getEmbededUrl(url) })
    )

The issue was with the replaceWith. By changing it to replaceRangeWith solved it.

Hope that helps :)