Rich Text Editor

Overview

Admindek includes a RichTextEditor component built on Tiptap. Two variants are available:

• full — complete toolbar with all formatting options, suitable for content-creation pages
• minimal — stripped-down toolbar with bold, italic, underline, and link only, suited for comment boxes or inline notes

A live demo of both variants is available at /forms/editor.

Usage

The editor is a controlled component. Pass your HTML string as content and receive updated HTML via the onChange callback:

import { useState } from "react";
import { RichTextEditor } from "@dashboardpack/core/components/shared/rich-text-editor";

export function EditorPage() {
  const [html, setHtml] = useState("<p>Start writing...</p>");

  return (
    <RichTextEditor
      variant="full"
      content={html}
      onChange={setHtml}
    />
  );
}

Toolbar

The full variant toolbar includes:

The minimal variant limits the toolbar to Bold, Italic, Underline, and Link.

Tiptap Extensions

The editor uses the following Tiptap extensions to support its feature set: