awcodes / filament-tiptap-editor

A Rich Text Editor plugin for Filament Forms.
MIT License
249 stars 64 forks source link

Adding a code block adds extra `</pre>` and `</code>` tags #384

Open AngadSethi opened 1 month ago

AngadSethi commented 1 month ago

Filament Version

v3.2.75

Plugin Version

v3.3.3

PHP Version

PHP 8.1

Problem description

When I add a code block to the editor with some random code or text, and save it, the resultant HTML has two extra </pre> and </code> tags.

For example, writing this:

Screenshot 2024-05-09 155953

Gets stores like this in my database:

<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-number">123</span>;</code></pre></code></pre>

Expected behavior

That the output would contain just one set of closing tags, not two.

Steps to reproduce

  1. Try creating an Article and add some text to it, and save it.
  2. Inspect the stored output.

Reproduction repository

https://github.com/AngadSethi/tiptap-editor-replicate-error

Relevant log output

No response

awcodes commented 1 month ago

I've tracked this down to a bug in the DOMSerializer in the tiptap-php package. Not much that can be done at this point.

AngadSethi commented 1 month ago

Oh, I'll raise this issue in tiptap-php then, @awcodes. Thanks a lot for checking this out!