Buttons inside textarea not working


I am encountering an issue with buttons in the textarea field, from Kirby panel. When I select text, click the “link” button and add the URL to add, the link simply doesn’t work and instead it returns the plain text with the following format

(link: https://facebook.com text: my text)

Same with the other buttons, like bold, which returns

This is my blueprints file:

        type: fields
            label: Description
            type: textarea

As additional information, this textarea is placed inside a data-attribute and it appears on a lightbox (lightgallery.js). Here’s the code
<img src="my image.jpg" data-sub-html="<?= $project->info() ?>">

This is the second small site that I build with Kirby, so I apologize if the solution for this is just behind the corner

Thank you very much in advance :slight_smile:

Kirbytext/Markdown is only parsed if you call the kirbyText()/kt() method on your field, otherwise you get the plain output as entered.

Thanks for the super quick reply! I see, that was an essential move. I’ve changed it to <?= $project->info()->kirbyText() ?> but still not working.

Is this perhaps a wrong way to call the kirbyText() method?

So you still have the (link:) string in your data attribute? Or has the output changed?

Yep, it still returns plain text identical to the output I’ve shown earlier

That is weird. Do you have any caching in place maybe?

I think the main problem here is that you cannot put HTML with attributes into a data attribute, at least not without escaping

@texnixe there was a problem on my side which consisted simply in MAMP not updating. Now the buttons work, but the link still returns the same plain text value. I’ll show you input and output.

output (a weird piece of text appears in the slideshow - first image - and in the actual caption the link is missing - second image):

Running an inspect, it shows this weird structure
Screen Shot 2022-04-04 at 16.16.23

data attribute may be a problem, but some of them like italics work good so I don’t quite understand. May it be a problem with the double strings inside the <a href=""></a>, and if yes how could I change the formatting into <a href=' '></a>?

Yes, that’s why I wrote above that you have to either replace or escape the quotes (double strings).

Theoretically, you could also use single quotes for your data attribute and leave the embedded text alone. In any case, this is all a bit fragile, I think, and I wonder if there isn’t a better alternative than embedding the caption via JS.

It may not be the most solid solution, but for now I’ve tried it and it works well apparently. Thank you so much @texnixe!