I was wondering if it’s possible to extend the Structured Text to allow a different type of bulleted list.
I want to have a <ul> with custom icon.
There are ways of doing this via customBlockStylesForStructuredTextField or customMarksForStructuredTextField but I’d like to apply this styling to the whole ul instead of the p tag inside the ul.
Unfortunately, I don’t think you can do that inside the Dato UI (without using a field extension to manually override and re-implement the entire structured text editor, which would be really difficult).
But the Dato UI is something only your editors see. On your actual website frontend (what your visitors see), you can use CSS to override the list display with a custom icon… does that help at all? If you implement that, then you can use the web preview plugin to show your editors in Dato what the rendered list would actually like on the real website.
As an alternative, you can also make a block with a Markdown or HTML field, embed that block inside the Structured Text field, and render it differently (both on the frontend, based on its block model name, and also in the UI with a field extension… it’s much easier to render a Markdown or HTML field of bullets rather than the structured text format.)
Using CSS to override can certainly help. However, how do I know which list on the sturctured text should be a custom icon and which one shouldn’t? Because the content creator will be the one who decide which list uses a custom icon and which icon should it use.
The block has a simple schema, just a Markdown or HTML field (for the list items) and a separate single-line string one (for the bullet icon you want to use, configured as radio buttons in the presentation settings):
Hmm, first of all, can I ask why you need to rewrite the individual <li>s? If you’re just trying to change the bullet style, you should be able to add a className (and the corresponding list-style CSS) to the wrapping <ul> to format all of them at once without having to edit the individual list items.
But to answer your question…
Probably, but it depends on your stack. What is your frontend using? Some examples:
The most “semantic” and straightforward way to do this might be make the block contain a Modular Content Field, Multiple Blocks, and have that wrap individual repeating “Custom List Item” single-string fields. That way you just get back a nested array of fields inside the JSON that you can then render however you please.
Or if you don’t want to render the HTML directly, leave out the markdown: true parameter in the GraphQL and you’ll get back raw Markdown instead (which is easier to parse). You can parse it then with https://github.com/syntax-tree/mdast-util-from-markdown.
For the above (HTML and Markdown parsing) there are a bunch of other libs that work similarly; I just suggested the *AST (Abstract Syntax Tree) utilities because that’s what Structured Text is based on. For example, it might be easier (depending on your use case) to use:
In any case, you just need to parse the HTML into Javascript so you can more easily manipulate it in React
While any of the above methods should work, if I better understood your overall use case and frontend stack, I might be able to recommend something more specific. Is there more complexity there than just custom bullet icons?