Editor.js: Nested blocks, for extracting links💡

[llewellynthomas]

This looks like an amazing tool! We are investigating removing our TinyMCE editor from our CMS and are interested in using your project.

If our editors add links to resources on the web, we would like to be able to identify if these items still exist or if they are redirecting, so we can update/remove the links. Currently, with TinyMCE, this is really difficult.

I love the way the data is presented and would be amazing for us, but I was wondering if you can or plan to have nested blocks? Or if it's already supported. If an editor adds an inline link into a paragraph, is it possible to have this as a nested block?

Currently this is how your editor outputs a paragraph:

   {
            "type" : "paragraph",
            "data" : {
                "text" : "There are dozens of <a href=\"https://github.com/editor-js\">ready-to-use Blocks</a> and the <a href=\"https://editorjs.io/creating-a-block-tool\">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games."
            }
        },

Possible future:

{
  "type": "paragraph",
  "data": [
    {
      "text": "There are dozens of "
    },
    {
      "link": {
        "url": "https://github.com/editor-js",
        "text": "ready-to-use Blocks"
      }
    }
    {
      "text": " and the "
    },
    {
      "link": {
        "url": "https://editorjs.io/creating-a-block-tool",
        "text": "simple API"
      }
    },
    {
      "text": " for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games."
    }
  ]
}

Looks like the paragraph tool is a plugin so we would be able to write and share our own version, but would this allow us to create our own custom data? And would this be something you are interested in supporting?

Thanks for your time.

And again this is an amazing project!

[tyazeez]

It will be nice to see this feature added to the editor. Feeling so excited about the possibilities of this editor. Open source rocks!!

[winston0410]

Same here. Looking forward for nested block.

[webdeb]

I think my issue is related to this / could be fixed with the proposed solution:
When you press Shift + Enter while editing a paragraph, an <br> is added.
I would expect just a new-line \n. or with the proposed structure:

type: "paragraph",
data: [
  { text: "Hello", styles: ["bold"] },
  { text: "World", styles: ["bold", "italic"] },
  { text: "!", styles: ["bold"] },
  { type: "line-break"},
  { text: "more text..."},
]

Yes, its a lot of data, but:

The Quote from the base-concepts page:

What is clean data
... Editor.js returns clean data instead of HTML-markup ...

[hata6502]

https://github.com/codex-team/editor.js/issues/836

[horizon89]

If you just want to process links inside text paragraphs, you can do what I do:

Inside your JSON processing function, you can use a regex like so:

text = text.replace(/<a href="(.*?)">(.*?)<\/a>/g, (m, $1, $2) => TextLinkProcess($1,$2) );

Then, you can process the anchor text and the url:

function TextLinkProcess(url, anchorText) { console.log(url); console.log(anchorText); // do stuff then 'return' result }