Tiptap Docs

Image Node Pro

Available in Start plan

An enhanced image node component for Tiptap editors. Features floating toolbar controls, image alignment options, download functionality, and advanced management capabilities with responsive styling and accessibility features.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add image-node-pro

Components

<ImageNode />

An enhanced image node component with floating toolbar, alignment controls, and advanced management features.

Usage 

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Image } from '@/components/tiptap-node/image-node/image-node-extension'

export default function ImageEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      Image.configure({
        HTMLAttributes: {
          class: 'custom-image-class',
        },
      }),
    ],
    content: '<img src="/images/example.png" alt="Image" data-align="center" />',
  })

  return <EditorContent editor={editor} />
}

Features

  • Floating toolbar with alignment controls
  • Image download functionality
  • Delete node button
  • Alignment options (left, center, right)
  • Custom HTML attributes support
  • Enhanced accessibility
  • Responsive image sizing
  • Selection highlighting

Extensions

Image (Enhanced)

An extended version of the Tiptap Image extension with additional alignment support and floating toolbar integration.

Usage 

import { Image } from '@/components/tiptap-node/image-node/image-node-extension'

const editor = useEditor({
  extensions: [StarterKit, Image],
})

Floating Toolbar Components

The image node includes several floating toolbar components that appear when an image is selected:

<DeleteNodeButton />

Remove the selected image node from the editor.

<ImageDownloadButton />

Download the image to the user's device.

<ImageAlignButton />

Control image alignment with options for left, center, and right alignment.

How It Works

The image node system works through several integrated layers:

  1. Enhanced Display: Extends the basic Tiptap Image extension with additional styling and responsive behavior
  2. Floating Toolbar: Provides contextual controls that appear when an image is selected
  3. Alignment System: Manages image positioning with left, center, and right alignment options
  4. Node Management: Handles image deletion and download functionality through toolbar actions
  5. State Integration: Seamlessly integrates with Tiptap's node system and command architecture

The floating toolbar automatically appears when an image is selected and provides quick access to alignment controls, download functionality, and node deletion.

Requirements

Dependencies

  • @tiptap/extension-image - Core image extension
  • @tiptap/react - React integration
  • sass / sass-embedded - For SCSS compilation

Referenced Components

  • use-tiptap-editor (hook)
  • tiptap-utils (lib)
  • delete-node-button (component)
  • image-download-button (component)
  • image-align-button (component)
  • separator (primitive)