Skip to content

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

@yosuke0517

Description

@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} />;
}

image

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 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions