RichText

The RichText control provides your component with a ReactNode of text that can be visually edited within the Makeswift builder.

AnchorVersions

AnchorExamples

AnchorHero section with distinct RichText controls

In this example we register a Hero component and control its title and body prop using RichText controls.

import { ReactRuntime } from '@makeswift/runtime/react'
import { RichText, Image } from '@makeswift/runtime/controls'
import NextImage from 'next/image'

const Hero = forwardRef(function Hero({ title, body, image }, ref) {
  return (
    <div ref={ref} style={{ display: 'flex', gap: '20px' }}>
      <div>
        {title}
        {body}
      </div>
      <NextImage
        src={image?.src}
        height={image?.dimensions.height}
        width={image?.dimensions.width}
      />
    </div>
  )
})

ReactRuntime.registerComponent(Hero, {
  type: 'hero',
  label: 'Hero',
  props: {
    title: RichText(),
    body: RichText(),
    image: Image({ format: Image.Format.WithDimensions }),
  },
})

AnchorDisclosure component using @headless/ui

This example shows how you can use the RichText control to create a disclosure component. Inline mode is great for locking down the styles of the Button while the default Block mode is great for creating a completely customizable Panel component.

Note: Inline mode is only available in v0.10.0 and above.

import { ReactRuntime } from '@makeswift/runtime/react'
import { RichText } from '@makeswift/runtime/controls'

import { Disclosure } from '@headlessui/react'
import { ChevronUpIcon } from '@heroicons/react/20/solid'

function MyDisclosure({ className, richtextButton, richtextPanel }) {
  return (
    <Disclosure as="div" className={className}>
      {({ open }) => (
        <>
          <Disclosure.Button className="flex w-full justify-between items-center rounded-lg bg-purple-100 px-4 py-2 text-left text-lg font-bold text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">
            <span className="flex-grow">{richtextButton}</span>
            <ChevronUpIcon
              className={`${open ? 'rotate-180 transform' : ''} h-5 w-5 text-purple-500`}
            />
          </Disclosure.Button>
          <Disclosure.Panel className="px-4 pt-4 pb-2 text-sm">{richtextPanel}</Disclosure.Panel>
        </>
      )}
    </Disclosure>
  )
}

ReactRuntime.registerComponent(MyDisclosure, {
  type: 'disclosure',
  label: 'Disclosure',
  props: {
    richtextButton: RichText({
      mode: RichText.Mode.Inline,
    }),
    richtextPanel: RichText(),
    className: Style({ properties: Style.All }),
  },
})

Here is a demo of the component in action:

More details on this Disclosure component are in the Headless UI docs.

AnchorAPI

AnchorParameters

AnchorProvided value

The RichText control provides a ReactNode to your component.

• RichText.Mode.Block is for creating editable sections of your site, and creates a value that is display: block.

• RichText.Mode.Inline is for visual editing of buttons and links, and creates a value that is display: inline.

  Using RichText.Mode.Inline protects users from creating hydration mismatch errors that can occur when placing block level elements into inline level elements.

AnchorTypes

type RichTextMode = typeof RichText.Mode.Inline | typeof RichText.Mode.Block