Links in a list are not parsed

[Jaspur]

Hey,
I have a unsorted list with text on each line, all beginning with a link at the first word. But the links aren't parsed when generating HtmlOutput.. Also not in the show-modus in Nova.

[roelofr]

Hey @Jaspur,

Thanks for bringing this to our attention! 🎉

I looked into it, by making a list on the Editor.js website, but the behaviour there seems identical.

When you add a link to the list, it isn't automatically converted to an <a>-tag, which is why it doesn't become clickable.

The JSON also represents this, as I made the first item a link via the Editor.js config menu.

{
    "type" : "list",
    "data" : {
        "style" : "ordered",
        "items" : [
            "<a href=\"https://google.com\">https://google.com</a>",
            "https://bing.com",
            "https://cake.co.uk"
        ]
    }
}

There are three ways to solve this:

1. Add a custom block (LinkList or something) that supports it. But this is blocked by how to add new tools? #19.
2. Hook into the Editor.js API and listen for links, and convert them on the fly, but this also seems blocked by how to add new tools? #19
3. Export the views and modify the list view to replace URLs with links.

Something like this might work:

 <div class="editor-js-block">
     {{ ($style == 'unordered') ? '<ul>' : '<ol>' }}
     @foreach ($items as $item)
         <li>
-            {{ $item }}
+            @if (filter_var($item, FILTER_VALIDATE_URL))
+                <a href="{{ $item }}" rel="noopener" target="_blank">{{ $item }}</a>
+            @else
+                {{ $item }}
+            @endif
         </li>
     @endforeach
     {{ ($style == 'unordered') ? '</ul>' : '</ol>' }}
 </div>

TL;DR: It's not supported out-of-the-box by Editor.js, but a custom view might work.

[Jaspur]

Hi, thanks, but why isn't this supported out of the box then? ;-) Looks pretty normal behavior.

[roelofr]

I really don't know. You'd think that when you type https://example.com and press Enter or Space, it'd convert it to a link, but alas, it doesn't.

---

Edit: I do believe that this should be client-side behaviour. Turning every link in an anchor might be a security issue.

[roelofr]

Since we can't really do anything about this, I'm closing this issue. I'll try to fit in some time to get those custom blocks working, and then add a helper for the linked-list block.

[Jaspur]

But it is different by the way, because my list-items are not just url's: https://www.dropbox.com/s/tuucryikeh9vx1y/Schermafdruk%202019-11-17%2020.50.56.png?dl=1

[roelofr]

Can't you just use the inline tools then? I don't see the issue with the screenshot you sent.

[Jaspur]

Same issue is for using links in Tables..

[roelofr]

Again, this is because automatic link recognition is not built into Editor.js.

[desaintflorent]

Hello,

I have the same problem, links are not parsed on list elements.
When I create a link on a list element in edit mode It's working, I can see it. But when I leave the edit mode links are not displayed.
I looked in the database and I can see those links.
And It's working well for text element.

Is this still a bug ?