Skip Navigation
docs
next page
minimal tiptap editor

Minimal Tiptap Editor

A minimal Tiptap editor with a focus on simplicity and extensibility.

shadcn-minimal-tiptapdemo

Installation

Run the following command 

pnpm dlx @shadext/cli add minimal-tiptap-editor

Dependencies

The following Shadcn UI components are required:

Usage

  1. Copy the minimal-tiptap directory into your project
  2. Implement the component in your React application:
import { useState } from "react";
import { Content } from "@tiptap/react";
import { MinimalTiptapEditor } from "@/components/ui/extension/minimal-tiptap-editor";
 
export const App = () => {
  const [value, setValue] = useState<Content>("");
 
  return (
    <MinimalTiptapEditor
      value={value}
      onChange={setValue}
      className="w-full"
      editorContentClassName="p-5"
      output="html"
      placeholder="Enter your description..."
      autofocus={true}
      editable={true}
      editorClassName="focus:outline-none"
    />
  );
};

Small

Advanced

API Reference

Props

The editor accepts all standard Tiptap editor props, plus these additional configuration options:

valueOption[][]
value
string
onChange
function
editorContentClassName
string
output
'html' | 'json' | 'text'
html
placeholder
string
editorClassName
string
throttleDelay
number
0

Image Support

Configuration

Configure the Image extension with custom options:

Note: The uploadFn must return the uploaded image URL. If no uploadFn is specified, enable the allowBase64 option.

Image.configure({
  allowedMimeTypes: ["image/jpeg", "image/png", "image/gif"],
  onImageRemove: handleImageRemove,
  maxFileSize: 5 * 1024 * 1024, // 5MB
  uploadFn: customImageUploader,
  onActionSuccess: handleActionSuccess,
  onActionError: handleActionError,
  onValidationError: handleValidationError,
});

Upload Management

Implement a custom upload handler:

const customImageUploader = async (file: File, editor: Editor) => {
  // Implement upload logic
  // Return the uploaded image URL
  return "https://example.com/uploaded-image.jpg";
};
 
Image.configure({
  uploadFn: customImageUploader,
});

Error Management

Implement comprehensive error handling:

Image.configure({
  onActionError: (error, props) => {
    console.error("Image upload failed:", error, props);
    // Implement user notification
  },
  onValidationError: (errors) => {
    console.error("Image validation failed:", errors);
    // Display validation feedback
  },
});

Toolbar Configuration

Customize toolbar sections using various configuration options:

<SectionOne editor={editor} activeLevels={[1, 2, 3, 4, 5, 6]} variant="outline" />
 
<SectionTwo
  editor={editor}
  activeActions={['bold', 'italic', 'strikethrough', 'code', 'clearFormatting']}
  mainActionCount={2}
/>
 
<SectionFour editor={editor} activeActions={['orderedList', 'bulletList']} mainActionCount={0} />
 
<SectionFive editor={editor} activeActions={['codeBlock', 'blockquote', 'horizontalRule']} mainActionCount={0} />

To prevent Dropdown Menu Trigger focus after selection:

onCloseAutoFocus={event => event.preventDefault()}