Math expressions and Fonts in RichText component

Anvil Q&A
1

Hello Friends:

I should preface this by mentioning that I’m not at all a frontend person and don’t know the ecosystem, libraries, techniques and other import frontend knowledge. I’ll need extra guidance here. (Thank you in advance).

  1. Does the RichText component support (or can be made to support) syntax for basic Math expressions? I tried some, but couldn’t get any to render. If the answer is No, what is the dead-simplest way – hopefully without having to replace the RichText component – to get basic Math expressions working? To complicate things, I use the Change event of a TextArea component to mirror input to the RichText box.

  2. This is a little different. My App’s About page uses a RichText box and Markdown. But I don’t like the out-of-the-box font. Is there a list of fonts that can be applied to the RichText.font component attribute? Or if fonts need to be installed, a step-by-step to do that?

Both of these might need a little step-by-step if anything needs to be installed because I don’t want to mess things up. Sadly, I didn’t think to observe RichText’s Math expression capabilities sooner.

Thank you in advance!

2

For math expressions on the web, MathJax is a pretty typical Javascript library. https://www.mathjax.org/

If you search through the forum there are some threads on using MathJax with Anvil. Unfortunately, I don’t think you’ll be able to work out mixing the RichText component with MathJax, since RichText has a pretty limited set of HTML it supports. But if you use a custom HTML component, you can get the benefits of both, since you can set its html property to any HTML.

Don’t do that if it’s the user typing in arbitrary HTML for other users to see, that’s a big security risk. But if it’s you providing the content, then the custom HTML component gives you a lot more flexibility (including changing fonts) than the Rich Text component.

2 Likes
3

@jshaffstall Thank you for the explanation. In the back of your mind, your probably remembered that one half of my App is for people (not tech savvy) to create content, thus your appropriate warning near the end. Well, perhaps we’ll just have to live with old-school Math expression syntax for now.

I’ll search the forum more, as well as for font lists for the RichText component (separate from the Math expression need). Thank you again.

4

I’ll add that you can embed arbitrary components inside a RichText component, e.g., for displaying images, custom HTML, etc. in situ.

1 Like
5

For what it’s worth, I solved the security issue and the font/color change issues by allowing my content creators to work in a markup language that supported font/color change. In my case I used bbcode, since Markdown doesn’t support font/color changes built in. The bbcode is then converted to HTML, which is put into a custom HTML component.

Security’s satisfied since the content creators cannot enter arbitrary HTML. bbcode is easily extended for custom tags, too.

2 Likes
6

Thank you. A few follow-ups (with apologies because, again, my background backend data architectures, not frontend).

Does placing bbcode into a Form require a lot of “frontend” development?

  1. Where does one obtain a custom HTML component?
  2. What triggers the copy from bbcode to the custom HTML component?
  3. What triggers the conversion to HTML within bbcode?

Thank you.

7

Loosely speaking, you probably have a flow like this right now:

  1. Content creators type Markdown into a text editor
  2. You store that Markdown into a data table
  3. You retrieve that Markdown from a data table
  4. You display that Markdown in a rich text component to a user

Using a markup that is not supported by Anvil directly requires step 4 to be split into:

  1. You process the markup to convert it into HTML
  2. You display that HTML in a custom HTML component

Step 4 can be involved, depending on what libraries you can find to help. In my case, I found a Javascript library that I could work with for bbcode parsing: GitHub - patorjk/Extendible-BBCode-Parser: Allows you to parse BBCode and to extend the markup to add your own tags. All major tags are supported and parser reports back any errors it finds.

It didn’t fill all my needs, but it’s designed to be extensible, so I was able to write some Python code around it to make it work the way I wanted. That involved some regular expression magic, which is always interesting and annoying.

Here’s the minimal example I used to test out the concept before putting it into my main app: Anvil | Login

The traditional way is to create a custom HTML form, and then drag that form onto the form where you want a custom HTML component. You can also create them dynamically by using HtmlTemplate from the Anvil namespace. Here’s a super simple clone that shows typing HTML into a text area and displaying it in a custom HTML component: Anvil | Login

Edit: you might notice that the bbcode example app does not in fact use a custom HTML component. At that point, I was already working in Javascript, so I bypassed the custom HTML component and modified the innerHTML property of an empty flow panel. The end result was the same as using a custom HTML component, so don’t get hung up on the differences there.

1 Like
8

Excellent. I’ll study your examples (thank you for them)! And yes, you captured my current workflow accurately.

Incidentally, I remembered the restricted_html format for RichText boxes, which does support, say, x2, via the “sup” tag; but with a loss of simplicity that Markdown offers (a trade-off I may live with after studying this problem and your examples). Do you happen to know if the restricted_html format offered is to ameliorate the security risk that full HTML would otherwise pose?

Thank you again!

9

Yes, exactly. The restrictions prevent color changes, though, which didn’t work for me.

2 Likes
10

I hear that.

I’m surprised that – in this S.T.E.M. zeitgeist – no “RicherText” Anvil component exists that natively supports Math expression content (as do, for example, Jupyter Notebook Markdown cells).

@jshaffstall @p.colbert Thank you for your suggestions and examples.