"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]);