Rich text

Source@dopt/html-rich-text

Overview

The HTML rich text package is powered by a rich text field and is great for rendering complex content containing spacing, alignment, images, links, and more.

It matches rich text types you might find in traditional content management systems and can be helpful for adding custom in-product content.

You can use our utilities at @dopt/html-rich-text to render rich text fields directly to HTML.

Installation

npm

npm install @dopt/html-rich-text

Yarn

yarn add @dopt/html-rich-text

pnpm

pnpm add @dopt/html-rich-text

Usage

The default export from @dopt/html-rich-text is a function that you can use to render the contents of Dopt's rich text field to an HTML string.

<script>
  import type { Children as RichText } from '@dopt/core-rich-text';
  import RichText from '@dopt/html-rich-text';
  import { useBlock } from '@dopt/vue';

  const { field } = useBlock('my-flow.rich-content-block');
</script>

<template>
  <div v-html="RichText({ content: field<RichText>('rich-body') })"></div>
</template>

Options

RichText

Name	Type	Description
content?	RichText	The rich text content for the component
noStyles?	boolean	Determines if Dopt specified styles are rendered alongside rich text elements

Styling API

Name	Selector	Description
root	.dopt-rich-text	Root element
node	.dopt-rich-text__node	All nodes produced by rich text
text	.dopt-rich-text__text	Text element
bold	.dopt-rich-text__bold	Bolded text
italic	.dopt-rich-text__italic	Italicized text
underline	.dopt-rich-text__underline	Underlined text
bulletedList	.dopt-rich-text__bulleted-list	Bulleted list
numberedList	.dopt-rich-text__numbered-list	Numbered list
listItem	.dopt-rich-text__list-item	Individual item
h1	.dopt-rich-text__heading-one	Heading level 1
h2	.dopt-rich-text__heading-two	Heading level 2
h3	.dopt-rich-text__heading-three	Heading level 3
link	.dopt-rich-text__link	Link
image	.dopt-rich-text__image	Image
video	.dopt-rich-text__video	Video embed rendered within a video or iframe

Alignment

Name	Selector	Description
left	.dopt-rich-text__node--align-left	Left alignment
center	.dopt-rich-text__node--align-center	Center alignment
right	.dopt-rich-text__node--align-right	Right alignment
justify	.dopt-rich-text__node--align-justify	Justified alignment

Videos

If a video source is an embed URL from YouTube, Vimeo, Wistia, or Loom, it will be rendered in an iframe element instead of a video element.

Embed URLs must match the following formats for the embedded video to display properly via rich text.

Vendor	Embed URL format
YouTube	https://www.youtube.com/embed/abcdef
Vimeo	https://player.vimeo.com/video/abcdef
Wistia	https://fast.wistia.net/embed/iframe/abcdef
Loom	https://www.loom.com/embed/abcdef

Types

RichText

Rich text fields are made up of an array of elements each of which may have further properties including children.

@dopt/core-rich-text contains type and schema definitions for Dopt's rich text field.

Read the complete type definitions →