The FormattedText input type

The Squiz Component Service introduces the FormattedText type for JSON schema, which provides for the entry of rich text that can be styled and formatted using HTML tags and attributes and formatting classes.

Although similar to a WYSIWYG, a FormattedText field more closely aligns with a What You See Is What You Mean (WYSIWYM) input. This means that the type will not be strongly opinionated on how you present and control your formatting and will inject as little inline styling as possible so that it can be controlled using CSS or other design system elements.

Schema definition

To define a property as a FormattedText in JSON Schema, you use the "type" keyword with the value "FormattedText".

"input": {
    "type": "object",
    "properties": {
        "richTextField": {
          "type": "FormattedText",
          "description": "The text to be formatted"
        }
      },
    "required": []
},

This example also demonstrates how to provide a description and title to the FormattedText field for use within the editing interface.

Editing interface

This image shows an example of the String type input field in the editing interface. It also includes a description.
Figure 1. The FormattedText input types editing interface field.

Input object structure

The FormattedText input type is available to consume in the main function through the input object. The FormattedText field will output as HTML.

const input = {
  formattedTextField: '<h1>A heading.</h1><p>A paragraph</p><ul><li>List item 1</li><li>List item 2</li></ul>'
};

module.exports = async function (input) {
  return `
      <div class="myFormattedTextWrapper">
        ${input.formattedTextField}
      </div>`;
};

Full manifest definition

Expand to see the manifest.json file with a string input field
{
  "$schema": "http://localhost:3000/schemas/v1.json",
  "name": "myFormattedText",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "FormattedText example",
  "namespace": "formatted-text-component",
  "icon": {
  "id": "list_alt",
  "color": {
    "type": "hex",
    "value": "#2D2D2D"
    }
  },
  "description": "This component is set up as a demonstration component for documentation purposes.",
  "functions": [
    {
      "name": "main",
      "entry": "main.js",
      "input": {
        "type": "object",
        "properties": {
          "formattedTextExample": {
            "type": "FormattedText",
            "title": "Rich text editor",
            "description": "Allow free entry of formatted text"
          }
        },
        "required": []
      },
      "output": { "responseType": "html" }
    }
  ],
  "previews":
    {
      "firstpreview": {
        "functionData": {
          "main": {
            "inputData": {
              "type": "inline",
              "value": {
                "formattedTextExample": "<h1>A heading.</h1><p>Example paragraph text</p><ul><li>List item 1</li><li>List item 2</li></ul>"
              }
            },
            "wrapper": {
              "path": "preview-wrapper.html"
            }
          }
        }
      }
    }
   }