Utilities

Image

The <Image/> utility is used to create a zone where an image can be uploaded in the cms Attributes:

• propName:

  • type: string
  • required: true
  • description: this is to connect the prop to the visual editor

• asset:

  • type: string
  • required: true
  • description: this is the URL that will be set on the <img src/> element, this can be hardcoded or dynamic

• default:

  • type: string
  • required: false
  • description: this is the backup <img src /> that is shown when no asset is set.

  example:

function Example() {
  return <Image />;
}

Rich Text

This is the Rich text utility, it allows for making inline edits for rich text inside the editor.

Attributes:

• propName:
  • type: string
  • required: true
• defaultText:
  • type: string
  • required: false
• text:
  • type: string
  • required: false
• colors:
  • type: Color
  • required: false
  • description: this is where you can set the text-colors that the editor is allowed is to show.
  • example:

[
  {
    value: "gray",
    name: "Primary Text",
  },
  {
    value: "#fff",
    name: "Secondary Text",
  },
];

example:

<RichText
  propName="betaLabel"
  defaultText={betaLabel}
  text={betaLabel}
  colors={[
    {
      value: "gray",
      name: "Primary Text",
    },
    {
      value: "#fff",
      name: "Secondary Text",
    },
  ]}
/>