"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\"}",
Here is the generated blocks data which includes an initial hyperlink to google.com.
Issue: When re-rendering the data, the text was displayed as plain text rather than a clickable hyperlink
<a href="https://google.com">google.com</a>I have a component called useEditor.tsx that manages the initialization of the EditorJS:
editorInstanceRef.current = new EditorJS({
holder: holderId,
tools,
autofocus: true,
data: initialData,
placeholder: 'Start typing your content here...',
readOnly,
});
Below is how I am handling my Editor.tsx component to render the 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]);