RichText - Makeswift Docs

Block
Inline

A block Rich Text node for a Text component

Options

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

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(),
  },
});

interface Props {
  headline: ReactNode;
}

export function Hero() {
  return (
    <div className="flex gap-4 justify-center">
      <img src="https://placehold.it/500" />
      <h1>{headline}</h1>
    </div>
  );
}

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 }),
  },
});

interface Props {
  children: ReactNode;
}

export function Button({ children }: Props) {
  return <a className="px-4 py-3 rounded bg-black text-white">{children}</a>;
}

.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.