Skip to main content

​
Summary

The “text widget” is merely a subtype of a equation widget. If the result in a equation widget is set to a string (i.e. anything with "quotes" around it), then the widget will be rendered as a text widget. For now, all this means is that Markdown styling will be recognised and appropriate formatting applied. This will be extended in future based upon feedback from users (i.e. the eng team).

​
Markdown Support

Markdown styles currently available are all those in the CommonMark standard. For practical purposes, you can also think of all Unicode characters as being additionally available, most notably:
  • \n will give you a new line
  • ANY emoji can be copy-pasted directly in (e.g. 🔴 or 🚨 or 🚧)
Text widget example showing markdown formatting

​
Properties

​
fullWidth
boolean
default:"false"
This tickbox will toggle whether the text widget is displayed as full-width (i.e. label and symbol are IGNORED and not displayed in any way). The text result itself will take up the full widget width. The only additional decorations that show up in the main view of the widget are the ‘expand’ arrow on the left side of the widget, and any check results, if a check exists.

​
Implementation

To create a text widget, simply create a equation widget with a string result: 
{
  "type": "sheetTemplateWidgets",
  "attributes": {
    "type": "computed",
    "label": "Instructions",
    "equation": [
      {
        "condition": "@default",
        "result": "\"This is a **bold** text with _italic_ formatting and a [link](https://example.com)\""
      }
    ],
    "referenceId": "instructions_text",
    "fullWidth": true
  }
}

​
Examples

Common use cases for text widgets include:
  • Instructions: Providing step-by-step guidance to users
  • Warnings: Highlighting important safety or calculation considerations
  • Results summaries: Presenting calculated results in a formatted manner
  • Documentation: Adding explanatory text within templates

​
Future Improvements

​
Markdown Styles

  • Style Modifications: Any existing styles can be modified in how they look. There is simply a CSS file (client/src/sheet/components/markdown-styles.module.css) which defines how each style should look (heading levels, bullets, whatever) - and we can apply any formatting you’d like to each of these, including colours, fonts, sizes, margins, whatever.
  • New Style Types: New types of styles can likely be added. There are hundreds of plugins available for the ReactMarkdown library we use. However, note that not everything is easily add-able to our setup here.
We have currently implemented the text widget formatting in a ‘quick and dirty’ manner - which means that we need to be certain that any plugins are not vulnerable to XSS attacks (security issue). One thing we explicitly can NOT do is support raw HTML. That is a security risk unless we also add some very heavy (and slow) sanitizing checks.

​
Widget Canvas / Rendering

Right now, the ‘text widget’ renders with a label and symbol and whatnot still present, just like a normal equation widget. A future iteration can remove this and make the text widget full-width.

​
Builder

Right now, there is no specific ‘text widget’ button. We’d like to add this - which would provide live preview rendering of the markdown and also not require you to manually type quotes around everything.
⌘I