Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Link block #24

Open
lightningspirit opened this issue Oct 25, 2021 · 2 comments
Open

Implement Link block #24

lightningspirit opened this issue Oct 25, 2021 · 2 comments
Labels
Feature Use labels to aggregate issues by epics RFC Request for comments

Comments

@lightningspirit
Copy link
Contributor

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

@lightningspirit lightningspirit added Feature Use labels to aggregate issues by epics RFC Request for comments labels Oct 25, 2021
@lightningspirit
Copy link
Contributor Author

lightningspirit commented Nov 18, 2021

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>

@mazhan465
Copy link

mazhan465 commented May 8, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature Use labels to aggregate issues by epics RFC Request for comments
Projects
None yet
Development

No branches or pull requests

2 participants