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.

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

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

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. Read more about this pattern here.

​
Changelog

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

Was this page helpful?

NumberSelect