Reference@makeswift/runtimeControls

RichText

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

A block Rich Text node for a Text component

Options

mode
RichText.Mode.Block | RichText.Mode.InlineDefaults to 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.

ModeDescription
RichText.Mode.BlockUse for creating editable full line blocks of your site. Passes a ReactNode that is display: block.
RichText.Mode.InlineUse 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

1import { RichText } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Hero } from "./Hero";
6
7runtime.registerComponent(Hero, {
8  type: "hero",
9  label: "Hero",
10  props: {
11    headline: RichText(),
12  },
13});

Inline mode

1import { RichText, Image } from "@makeswift/runtime/controls";
2import { runtime } from "../../../../../lib/makeswift/runtime";
3
4import { Button } from "./Button";
5
6runtime.registerComponent(Button, {
7  type: "button",
8  label: "Button",
9  props: {
10    children: RichText({ mode: RichText.Mode.Inline }),
11  },
12});

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

Changelog

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