RichText

Adds a Rich Text control in the Makeswift builder to visually edit a ReactNode of text.

Block

A block Rich Text node for a Text component

Options

mode · RichText.Mode.Block | RichText.Mode.Inline · default: "RichText.Mode.Block"

Sets the display property of the ReactNode that is passed to the control. This is useful for visually editing buttons and links.

Mode	Description
RichText.Mode.Block	Use for creating editable full line blocks of your site. Passes a ReactNode that is display: block.
RichText.Mode.Inline	Use for visually editing buttons and links. Passes a ReactNode that is display: inline. Prevents hydration mismatch errors that can occur when placing block level elements into inline level elements. Only available for v0.10.0 and above.

Prop type

The RichText control passes a ReactNode to your component.

Example

Block mode

Hero.makeswift.ts

import { RichText } from "@makeswift/runtime/controls"

import { runtime } from "@/makeswift/runtime"

import { Hero } from "./Hero"

runtime.registerComponent(Hero, {
  type: "hero",
  label: "Hero",
  props: {
    headline: RichText(),
  },
})

Inline mode

Button.makeswift.ts

import { RichText, Image } from "@makeswift/runtime/controls"
import { runtime } from "@/lib/makeswift/runtime"

import { Button } from "./Button"

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    children: RichText({ mode: RichText.Mode.Inline }),
  },
})

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.

Changelog

Version	Changes
v0.10.0	Overhauled control architecture and introduced Inline mode.
v0.6.3	Introduced RichText control.