Anvil Community Forum

New: RichText component

Some of you may have noticed a new addition to your component toolboxes - the RichText component! It’s a container component that also displays text, with the option to format with MarkDown or display HTML. You can create new component slots inline using curly braces, and populate them with the drag-and-drop editor:

(My brain just about melted when I first saw this.)

Or, you can do it in code:

Check out the blog post for a quick run down, and some more examples of what it can do!

Alternately, take a look at the docs - or spin up a new app, grab yourself a RichText component and have a play around!

13 Likes

Wow. This is absolutely fantastic!!! I can’t wait to use this.

Thanks very much Anvil team.

FYI, <span> attributes are often used to set foreground and background colors, fonts, and other styling elements. <span> is supported, but if you’re looking to incorporate those attributes, you may want to wait until those particular attributes are supported.

That said, I’m very happy for the new, detailed documentation! I went looking for precisely these details yesterday.

Being able to dynamically specify drop spots for controls is so cool!

This is one of those features that’s so cool I want to use it, but I’d have to rewrite my entire app around it, so it’ll have to wait for my next project.

I feel the same way. But the urge to include it my current app, in my very next new pane, is strong.

Edit: It’ll be very interesting to see

  1. how RichText components nest.
  2. filling a named slot with any of several alternatives (including an empty string) computed at run-time.
  3. how RichText components react at run-time when a slot’s contents are re-defined.
  4. how components work inside a <table>

Extra bonus points to @eli for using HHGTTG references in the blog post!

1 Like

So I see you’ve explored our restricted_html mode! The goal for this component is that it should be possible to put untrusted data (be it plain text, HTML or Markdown) into it, without creating XSS vulnerabilities. This means you can, eg, display HTML emails from unknown parties on your page :slight_smile:

In order to accomplish this, we need really quite strict allow-listing for what HTML we support. For example, we can’t allow arbitrary <span style='[anything]'>, because with arbitrary CSS a malicious data source could (eg) cause that element to appear in a different place on the screen, outside the RichText component, misleading the user of the Anvil app. So in order to allow any CSS styles, we’d need to implement a CSS (or CSS-subset) parser, and then allow only some properties (eg text attributes and colours). Which is why it’s not supported (for now, at least :slight_smile: )

1 Like

Well, you’ve actually defined multiple goals for this component. The obvious two are:

  1. Ability to handle untrusted data
  2. Ability to embed components in-line.

For situations where only one of the features is required, the others may sometimes get in the way. So, depending on the situation, some conflicts (between those goals) will be inevitable.

In non-UI components, one would re-factor the features so that they could stand alone, allowing them to be combined – or not – via regular programming-language features (e.g., inheritance). But I recognize that that can be a lot harder with UI components!

In any case, for fuller HTML, there’s always the fallback of Custom HTML. Of course, then you don’t get the ability to use in-line components. But then, I would not be surprised that it was the “sanitization” that made the component-embedding practical in the first place.

Frankly, I’m delighted to see this. In the desktop world, I’ve seen only one visual component library that offered anything comparable, and it was RichText only.

This immensely simplifies layout development, and makes it accessible to everyday folks. Not everyone can take the time to work out a 5-deep hierarchy of nested containers (when necessary) to accomplish their goals!

Oh, yes you can! Check out: Custom HTML templates

3 Likes

So cool. Along with the recently introduced ability to write JQuery-code in directly in Python, Anvil is now not only the best choice for web apps, but also web sites. Can’t wait to build a CMS using the RichText comp. And I’m looking forward to peeking into Firefox dev tools to see how it’s implemented :slight_smile:

I bow in awe.

1 Like

D’OH! :blush:

It’s not as simple as, say, loading a Markdown string containing {placeholder} entries from the database, but it was designed to integrate closely with the IDE, and it’s been there for a long time. So long, I’d forgotten. Really appreciate the reminder.

Thanks for adding this (I think I was the first to suggest it perhaps…), will prove to be really helpful I’m sure

I see a lot of potential for the Richtext component.

It would be nice to see it support more closely some extended Markdown formats like the Github version. At least document the version of MD supported in the docs. Maybe also mention that the Richtext.data is only for input. Also if you fill a slot in code and in .data strange things happen.

The rendering of the tables could use some love. I can envision making forms a lot easier with that.

1 Like

Nice!

Though I am still disappointed there is no “do_my_work_because_im_tired” widget. Come on, you’re all from Cambridge, pull your fingers out!

1 Like

Thanks! I had to somehow get Quill to work, and it’s a very messy solution.

Hi Eli - I’m a little late to the party but wanted to say what a great addition this is to Anvil.

I actually think the tutorial would be a REALLY GOOD starting point for people new to Anvil and wondered if you’d considered using it in your ‘getting started’ tutorials? It shows the key elements of Anvil in concise way - Designer, Code View, final app - and how you can either create everything visually or declaratively in code.

As is often the way in Anvil, the amazing thing is the complex and powerful combinations you can create in just 4 lines of (emminently readable) code, with Anvil even worrying about security so you don’t have to.

I think this could attract newcomers to your product.

PS Great article about Stichify too - I’ve forwarded to my partner who is a Design and Technology teacher in South London :slight_smile:

3 Likes