tryParseHTMLToBlocks does not preserve data-* attributes like data-background-color and data-text-color

[yosuke0517]

Describe the bug
When parsing HTML using tryParseHTMLToBlocks, attributes such as data-background-color and data-text-color are not preserved. Instead, they are replaced with the value "default". This makes it impossible to retain custom attributes for blocks when working with stored HTML content.

To Reproduce

StackBlitz

import { useEffect } from 'react';
import '@blocknote/core/fonts/inter.css';
import { BlockNoteView } from '@blocknote/mantine';
import '@blocknote/mantine/style.css';
import { useCreateBlockNote } from '@blocknote/react';

export default function App() {
  const editor = useCreateBlockNote();
  const initialHtml = `<h1 data-background-color="brown" data-level="1">Brown Header</h1>`;

  useEffect(() => {
    async function loadInitialHTML() {
      const blocks = await editor.tryParseHTMLToBlocks(initialHtml);
      editor.replaceBlocks(editor.document, blocks);
    }
    loadInitialHTML();
  }, [editor]);

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Misc

• Node version: v20.12.2
• Package manager: yarn
• Browser: Google Chrome
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[yosuke0517]

When blocks are added later, the color is applied.
There is a difference in whether the data-background-color attribute is assigned or not.
（The same applies to data-text-color.）

2024-12-08.16.16.59.1.mov