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:
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.
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
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 )
Well, you’ve actually defined multiple goals for this component. The obvious two are:
Ability to handle untrusted data
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!
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
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.
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.
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
FYI: In my latest experiment, Rich Text substitution will replace only one occurrence of a placeholder. If {x} appears multiple times, only the final one will be substituted. When x represents a component, of course, that makes sense. But when x is a string, not so much.
Workaround: Python has its own simple substitution machinery, which does support multiple occurrences: string.Template The syntax is slightly different, so you can use both, if needed.
Edit: The substitution needs to be done server-side. It’s not supported client-side (for now).
