RichText

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

AnchorVersions

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

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

ParameterTypeRequiredDefaultVersionDescription
modeRichTextModenoRichText.Mode.Blockv0.10.0Type of richtext markup you want to create.

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

Copyright © 2023 Makeswift, Inc.