Hyperlink is shown as <a> tag after rendering EditorJS with saved block data

Question

"content": "{\"time\":1725957883405,\"blocks\":[{\"id\":\"ILZ-IPMJxE\",\"type\":\"paragraph\",\"data\":{\"text\":\"<a href=\\\"https://google.com\\\">google.com</a>\",\"alignment\":\"left\"},\"tunes\":{\"textVariant\":\"\"}},{\"id\":\"Cq-LYzxhkR\",\"type\":\"delimiter\",\"data\":{}},{\"id\":\"Acr0suJ5Jl\",\"type\":\"paragraph\",\"data\":{\"text\":\"asd\",\"alignment\":\"left\"},\"tunes\":{\"textVariant\":\"call-out\"}}],\"version\":\"2.30.5\"}",

So here's my output blocks data where there was a hyperlink initially of google.com.

Problem: After rendering it back with my output blocks data, the text was not rendered as hyperlink but instead as a text <a href="https://google.com">google.com</a>

I have useEditor.tsx component which handle the initialization of the EditorJS:

editorInstanceRef.current = new EditorJS({
                        holder: holderId,
                        tools,
                        autofocus: true,
                        data: initialData,
                        placeholder: 'Start typing your content here...',
                        readOnly,
                    });

and here's how I'm having and handling my Editor.tsx component to render my initial data:

useEffect(() => {
            if (editorInstanceRef.current) {
                editorInstanceRef.current.isReady
                    .then(() => {
                        setIsEditorReady(true);
                        onReady && onReady();
                        if (initialData) {
                            editorInstanceRef
                                .current!.render({
                                    blocks: initialData.blocks,
                                })
                                .catch((error) =>
                                    console.error(
                                        'Error loading initial content:',
                                        error
                                    )
                                );
                        }
                    })
                    .catch((error) =>
                        console.error('Error during editor ready state:', error)
                    );
            }

            return () => {
                if (editorInstanceRef.current) {
                    editorInstanceRef.current.isReady
                        .then(() => {
                            editorInstanceRef.current?.destroy();
                            editorInstanceRef.current = null;
                        })
                        .catch((error) =>
                            console.error('Error during editor cleanup:', error)
                        );
                }
            };
        }, [initialData, editorInstanceRef, onReady]);

Answer 1

You can solve the issue by using HTMLReactParser to parse and render the HTML content, including the hyperlink tags. Here's an example of how to implement it

import HTMLReactParser from "html-react-parser";

And finally you can apply it to your html tags

HTMLReactParser(`<a href="https://google.com">google.com</a>`)