Dumping Markdown into a Typography Component

Elements Elements CMS
1

While it seems to work as expected, dumping Markdown text into a typography component has some serious limitations, the worst being that because there is no support for lists in the component, any lists in the markdown are messed up.

The other issue I have run into is that there seems to be a problem with the wrapping of markdown text. In the component where I’m using the CMS, the modal is always displayed the full width of the screen because the text in the typography component does not appear to be wrapped.

Before I switched to using the CMS, I was injecting HTML into the modal, and it worked perfectly, but now it is misbehaving. One of the other problems is that it no longer generates the ability to scroll if the text exceeds the size of the modal. I have played with all the settings, and I don’t seem to be able to find one that achieves the same behavior as I had before.

2

Known Issues

Lists don’t work yet! We need to add support for lists in the Typography component. It’s coming soon.

  • Lists

  • Will

  • Work

  • Soon

Remember: This is a beta. Expect issues, and help us build something amazing.

1 Like
3

Yeah, lists are not supported (yet)!

We’d really need to see a sample project for the modal scrolling issue, if we can get that it’ll be quicker for us to fix it for you :slight_smile:

4

@dan I just sent you the project in a DM, it is the same one with the CMS Load More problem. I did figure out that the typography component was handling the wrapping correctly, so the main problem is with scrolling not being enabled. This is all happening in the Privacy Policy custom component. If you need to see the code for it, you can find it on the Privacy Policy page in a folder called HIDDEN, where it is hidden it is just called TESTING.

5

here is another bug in the Typography Component

6

I’m curious what the bug was here?

I could see the color changes for the closing brace, was the bug that it was not changing the color for all the text?

7

Check the cursor when choosing a color — the selection field keeps jumping around.

Also, the selected text color does not get applied.

8

Now I see it in the color slider.

BTW, if you select and change the color of one of the braces, it will cause all kinds of errors to be generated by the CMS system when you try to preview it.

9

@dan I finally figured out why I was not getting the scroling. I needed to add the overflow-y-auto class and then it worked, along with some additional tweaking.

10

Yeah, that’s not going to work… Span tags have to be inserted to style content.

{{item.name<span class="text-brand-500">t}}</span>

You’re essentially adding html to the curly braces, so they can’t be replaced correctly by the CMS. That is never going to work. Don’t do that :laughing:

Side note: Before we shipped this, we had dedicated CMS components to stop this from happening, but it seemed to restrictive. We wanted to keep things flexible so we allowed tags to be added into text components. The downside to this is that users can do silly thing like styling just parts of a tag :wink:

Hope that makes sense, I’ll be sure to add a note about this in the manual :stuck_out_tongue:

1 Like