Id of codeBlock is not retained.

[thisisnithin]

What’s the bug you are facing?

Hey, Im facing a bug with the unique id extension.

I have use case where I save the editor content as HTML on the database and when I read it I pass something like this as content to my editor

<pre><code data-id="7fdaf950-a69a-40cc-9c26-80c6694574df">test code</code></pre><p data-id="8521a8c5-507c-4464-baf4-3f9147ef7b96">Test paragraph</p>

When I reload the page the id of the paragraph is retained but the code changes
I have attached the logs of the editor content when I pass the content to the editor after reload
(First log is before reload , rest after reload)

This is my uniqueId config

UniqueID.configure({
        types: [
          'paragraph',
          'blockquote',
          'heading',
          'bulletList',
          'orderedList',
          'codeBlock',
        ],
      }),

This issue doesn't happen when I pass JSON instead of HTML

const editor = useEditor({
    ...rest,
    content: {
      type: 'doc',
      content: [
        {
          type: 'codeBlock',
          attrs: {
            id: '7fdaf950-a69a-40cc-9c26-80c6694574df',
            language: null,
          },
          content: [
            {
              type: 'text',
              text: 'test code',
            },
          ],
        },
      ],
    },
})

How can we reproduce the bug on our side?

1. Add UniqueId extension
2. Give content to the editor in the form of an HTML string with <pre><code data-id={uuid}>test code</code></pre>
3. Log the editor content.
4. Reload the page.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I expect the id of the codeBlock to be retained.

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

[philippkuehn]

this was an issue with the codeblock extension because the data-id was rendered at the wrong tag.

instead of this markup:

<pre><code data-id="7fdaf950-a69a-40cc-9c26-80c6694574df">test code</code></pre>

you have to use this from now on:

<pre data-id="7fdaf950-a69a-40cc-9c26-80c6694574df"><code>test code</code></pre>

[thisisnithin]

@philippkuehn Okay, but when I log editor.getHTML() , I see that the id has been assigned to the code tag. Why is it not assigned to the pre tag? Is there a way to change it?

[philippkuehn]

Make sure you updated @tiptap/extension-code-block and @tiptap/core.

[thisisnithin]

Yup, works now. Thank you 😄