nilportugues / shadcn-minimal-tiptap

Minimal Tiptap Editor

This is a Minimal Tiptap Editor component built for Shadcn. It provides a simple and clean editor for users to write and format text.

View Demo

Installation

Before you can use the Minimal Tiptap Editor Component, you will need to install the following packages:

npm install @tiptap/extension-image @tiptap/extension-link @tiptap/pm @tiptap/react @tiptap/starter-kit
npm install @radix-ui/react-icons
npm install -D @tailwindcss/typography

The Minimal Tiptap Editor Component is depends on the following components from shadcn:

• Button
• Dropdown Menu
• Input
• Label
• Popover
• Separator
• Switch
• Toggle
• Tooltip
• Dialog

Next, copy and paste the code from the src directory for minimal-tiptap into your project and customize to your needs. The code is yours.

Props

The Minimal Tiptap Editor Component accepts the following props:

• value is the initial value of the editor.
• outputValue is the format of the output value. It can be 'html', 'json', or 'text'. Default is 'html'.
• disabled is a boolean to disable the editor.
• contentClass is a string to add a class to the editor content.
• onValueChange is a function that accepts a string and updates the value of the editor.

Usage

import React, { useState } from 'react'

import { MinimalTiptapEditor } from './minimal-tiptap'

export const App = () => {
  const [value, setValue] = useState('')

  return (
    <MinimalTiptapEditor
      value={value}
      onValueChange={setValue}
      outputValue="json"
      disabled={false}
      contentClass="max-w-3xl mx-auto mt-8"
    />
  )
}