Explanation box - How to add descriptions to selected text for use with <abbr> tags [Edited Title]

Describe the issue:

Many modern web pages has the possibility to make fields like this:

In this example it is used for explaining who “Sigurd Stray” is. It’s mostly used for short explanations for the marked text. When looking in the code I understand that they have inserted an -tag in the code and I guess this is handled in the code for viewing the page.

This is the source for the sample abow:

The question is: Is there any way to solve this in datoCMS. It would be nice if it was handled almost like when You insert a link. I.e. You mark the word(s) You want to explain and right click to insert a <abbr> or something like that.
Do You have any samples on how to do it?

Lasse


(Mod note: removed empty boilerplate text at the bottom)

Hi @lasse.norgreen,

I think probably the cleanest solution would be to use an inline record in a Structured Text field, like this:

Then when you query it in GraphQL, you get this:

And you can render that using a custom renderer for our <StructuredText/> component, looking up the inlineItem by its ID.

Breaking it down

That is an example of an Article model with a structured_text field. Inside it, the “example explanation” chip is actually an inline record of another model. The field schema looks like this:

This tells our system that field is allowed to inline records from the Explanation model. The actual record it links to is simple, just two text fields:

But that inlines the contents of that explanation record (its text and explanation) right inside your original article.

Then once you get back the results in GraphQL, you can use a custom renderer to display that as a <abbrv> tag.

It’s a little bit of a setup the first time just because we don’t have a built-in system for “provide additional text for this string inline”, but it should be easy to setup with an inline record. Once you get it hooked up, it should work!

Does that help? Please let me know if you need a more detailed example.

As a less-semantic (but possibly easier to implement) alternative, you can also use a regular HTML field and edit the source code directly:

But I wouldn’t recommend this approach. It is fragile and prone to human error, and has pretty bad UX because your editors can’t really see or edit the explanation without going to source code view.

Thanks, this worked. But it would be very nice to have the possibility to have inline blocs in addition to inline records.

1 Like

Indeed it would :slight_smile: Could you please vote on the existing feature request for that here: Structured Text - Inline Block

It’s something we’ve been thinking about for a while, and if it’s ever released, we will be sure to announce it there.

Thank you!