editorjs-blocks-react-renderer icon indicating copy to clipboard operation
editorjs-blocks-react-renderer copied to clipboard

Implement Link block

Open lightningspirit opened this issue 3 years ago • 2 comments

https://github.com/editor-js/link

lightningspirit avatar Oct 25 '21 18:10 lightningspirit

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>

lightningspirit avatar Nov 18 '21 14:11 lightningspirit

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

mazhan465 avatar May 08 '23 13:05 mazhan465