editorjs-blocks-react-renderer
editorjs-blocks-react-renderer copied to clipboard
Implement Link block
https://github.com/editor-js/link
As upon my research, there's no de facto HTML expression to reproduce a preview, semantically speaking. However, there's a clever way that we can approach, using the <figure>
HTML tag which says:
(...) represents self-contained content, potentially with an optional caption (...). The figure, its caption, and its contents are referenced as a single unit.
So, ideally we could use the the figure
to reproduce a preview.
Using the data provided:
{
"type" : "linkTool",
"data" : {
"link" : "https://codex.so",
"meta" : {
"title" : "CodeX Team",
"site_name" : "CodeX",
"description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
"image" : {
"url" : "https://codex.so/public/app/img/meta_img.png"
}
}
}
}
Following that we could implement something similar to the following:
<a href="https://codex.so" title="CodeX Team">
<figure>
<img src="https://codex.so/public/app/img/meta_img.png" alt="Codex Team">
<blockquote cite="https://codex.so">
<p>Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.</p>
</blockquote>
<figcaption>CodeX Team, <cite>Codex</cite></figcaption>
</figure>
</a>
I think this is useful.I't good if thing like that can be interact into editorjs-blocks-react-renderer.I wish we don't need to implement this by ourself. @lightningspirit