RichText
The RichText
control provides your component with a ReactNode
of text that can be visually edited within the
Makeswift builder.
AnchorVersions
Version | Changes |
---|---|
v0.10.0 | Overhauled control architecture and introduced Inline mode. |
v0.6.3 | RichText 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
Parameter | Type | Required | Default | Version | Description |
---|---|---|---|---|---|
mode | RichTextMode | no | RichText.Mode.Block | v0.10.0 | Type 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 isdisplay: block
. -
RichText.Mode.Inline
is for visual editing of buttons and links, and creates a value that isdisplay: 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