Playbook Design System

Default

import React, { useState } from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorDefault = (props) => {
  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
  handleOnChange = (html) => setValue(html)

  return (
    <div>
      <RichTextEditor
          onChange={handleOnChange}
          value={value}
      />
    </div>
  )
}

export default RichTextEditorDefault

Advanced Default

The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see Tiptap docs for more). To leverage this variant, Tiptap must be installed in your project. Complete docs for using the library can be found here. To get started with this variant, see the Code Example below for required imports as well as the basic setup.

NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the advancedEditor prop.

import React from 'react'

import { RichTextEditor } from 'playbook-ui'
import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import Link from '@tiptap/extension-link'

const RichTextEditorAdvancedDefault = (props) => {

    const editor = useEditor({
        extensions: [
            StarterKit,
            Link
        ],
        content:"Add your text here. You can format your text, add links, quotes, and bullets."
    })
      if (!editor) {
        return null
      } 

  return (
    <div>
      <RichTextEditor
          advancedEditor={editor}
      >
        <EditorContent editor={editor}/>
      </RichTextEditor>
    </div>
  )
}

export default RichTextEditorAdvancedDefault

Advanced (Extra Extensions)

This variant allows you to optionally include any of Tiptap’s 53 extensions within any advanced editor by using the extensions prop.

NOTE: In order to leverage this prop, you must install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions.

In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:

icon: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
isActive: sets the extension to active within the dropdown, when applicable
text: the label within the toolbar dropdown
onclick: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)

This array can then be passed to the extensions prop and all extensions in the array will be rendered in the ellipsis dropdown.

import React from 'react'

import { RichTextEditor } from 'playbook-ui'
import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import Link from '@tiptap/extension-link'

import HorizontalRule from "@tiptap/extension-horizontal-rule"
import Highlight from '@tiptap/extension-highlight'

const RichTextEditorMoreExtensions = (props) => {

    const editor = useEditor({
        extensions: [
            StarterKit,
            Link,
            HorizontalRule,
            Highlight.configure({ multicolor: true })
        ],
        content:"Add your text here. You can format your text, add links, quotes, and bullets."
    })
      if (!editor) {
        return null
      } 

  const ExtensionsList = [
    {
        icon: "horizontal-rule",
        isActive: editor.isActive("horizontalRule"),
        text: "Horizontal Rule",
        onclick: () => editor.chain().focus().setHorizontalRule().run(),
    },
    {
      icon: "highlighter",
      isActive: editor.isActive("highlight"),
      text: "Highlighter",
      onclick: () => editor.chain().focus().toggleHighlight().run(),
    }
  ]

      
  return (
    <div>
      <RichTextEditor
          advancedEditor={editor}
          extensions={ExtensionsList}
      >
        <EditorContent editor={editor}/>
      </RichTextEditor>
    </div>
  )
}

export default RichTextEditorMoreExtensions

Advanced (Toolbar disabled)

Because our default variant's toolbar requires Tiptap's StarterKit which may include features that are not relevant to your project or even block some custom extensions, optionally setting advancedEditorToolbar to false creates an editor without a toolbar, using only the minimum requirements.

NOTE: Omitting the Starter Kit requires that the editor’s default extensions (document, paragraph, and text) must be imported directly from Tiptap or as a custom extensions.

import React from "react";

import { RichTextEditor } from 'playbook-ui'import { useEditor, EditorContent } from "@tiptap/react";

import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";

const RichTextEditorToolbarDisabled = (props) => {
  const editor = useEditor({
    extensions: [Document, Paragraph, Text],
    content:
      "Add your text here. You can format your text, add links, quotes, and bullets.",
  });
  if (!editor) {
    return null;
  }

  return (
    <div>
      <RichTextEditor 
          advancedEditor={editor} 
          advancedEditorToolbar={false}
      >
        <EditorContent editor={editor} />
      </RichTextEditor>
    </div>
  );
};

export default RichTextEditorToolbarDisabled;

Simple

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorSimple = (props) => (
  <div>
    <RichTextEditor
        simple
    />
  </div>
)

export default RichTextEditorSimple

Attributes

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorAttributes = (props) => (
  <div>
    <RichTextEditor
        aria={{ label: 'rich textarea' }}
        data={{ key: 'value', key2: 'value2' }}
        name="name-attribute"
    />
  </div>
)

export default RichTextEditorAttributes

Focus

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorFocus = (props) => (
  <>
    <RichTextEditor
        focus
    />
    <br />
    <RichTextEditor
        focus
    />
  </>
)
export default RichTextEditorFocus

Sticky

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorSticky = (props) => (
  <div>
    <RichTextEditor
        id="sticky"
        sticky
        value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
    />
  </div>
)

export default RichTextEditorSticky

Templates

import React, { useState } from 'react'

import { RichTextEditor, Select } from 'playbook-ui'

import { changelog, release } from './templates.js'

const RichTextEditorTemplates = (props) => {
  const [editorContent, setEditorContent] = useState('')

  const handleChange = (event) => {
    setEditorContent(event.target.value)
  }

  const options = [
    {
      value: release,
      text: 'Playbook Release',
    },
    {
      value: changelog,
      text: 'Changelog',
    },
  ]

  return (
    <div>
      <Select
          blankSelection="Select a template..."
          label="Template"
          onChange={handleChange}
          options={options}
      />
      <RichTextEditor
          id="template"
          template={editorContent}
      />
    </div>
  )
}

export default RichTextEditorTemplates

Toolbar Bottom

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorToolbarBottom = (props) => (
  <div>
    <RichTextEditor
        id="bottom-toolbar"
        toolbarBottom
    />
  </div>
)

export default RichTextEditorToolbarBottom

Inline

import React from 'react'

import { RichTextEditor } from 'playbook-ui'

const RichTextEditorInline = (props) => (
  <div>
    <RichTextEditor
        id="inline"
        inline
        toolbarBottom
        value="Try hovering over this text. Then try modifying it or adding more of your own text."
    />
  </div>
)

export default RichTextEditorInline

Preview

import React, { useState } from 'react'

import { RichTextEditor, Button, Card } from 'playbook-ui'

const RichTextEditorPreview = (props) => {
  const [showPreview, setShowPreview] = useState(false)
  const [previewText, setPreviewText] = useState(<div />)

  const handleChange = (event) => setPreviewText(event)
  const handleClick = () => {
    setShowPreview(true)
  }

  return (
    <div>
      <RichTextEditor
          id="content-preview-editor"
          onChange={handleChange}
      />
      {showPreview && (
        <Card marginTop="md">
          <div
              className="trix-content"
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: previewText }}
              id="preview-content"
          />
        </Card>
      )}
      {!showPreview && (
        <div />
      )}
      <Button
          id="preview-button"
          marginTop="md"
          onClick={handleClick}
          text="Preview Output"
          variant="secondary"
      />
    </div>
  )
}
export default RichTextEditorPreview

Advanced Preview

import React, { useState } from 'react'

import { RichTextEditor, Button, Card } from 'playbook-ui'

import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import Link from '@tiptap/extension-link'

const RichTextEditorAdvancedPreview = (props) => {

  const editor = useEditor({
      extensions: [
          StarterKit,
          Link
      ],
      content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
  })

  const [showPreview, setShowPreview] = useState(false)
  const [previewText, setPreviewText] = useState(<div />)

  const handleChange = () => {
    if (editor) {
      setPreviewText(editor.getHTML())
    }
  }

  const handleClick = () => {
    handleChange()
    setShowPreview(true)
  }
  if (!editor) {
    return null
  } 

  return (
    <div>
      <RichTextEditor
          advancedEditor={editor}
          id="content-advanced-preview-editor"
          onChange={handleChange}
      >
        <EditorContent editor={editor}/>
      </RichTextEditor>
      {showPreview && (
        <Card 
            marginTop="md"
            maxWidth="md"
        >
          <div
              className="tiptap-content"
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: previewText }}
              id="advanced-preview-content"
          />
        </Card>
      )}
      {!showPreview && (
        <div />
      )}
      <Button
          id="preview-button"
          marginTop="md"
          onClick={handleClick}
          text="Preview Output"
          variant="secondary"
      />
    </div>
  )
}

export default RichTextEditorAdvancedPreview

Rich Text Editor

Available Props

Contribute to Playbook

Power

Connect