Image Extension with Resize and Alignment for React.js

It extends tiptap image extension to support image resizing and alignment in React.js.
Existing third party/unofficial plugins are not flexible.
This package contains -
1. UI headless components to render alignment menu in a bubble menu.
2. Image extension extended from tiptap-extension-image to support resizing and alignment out of the box

It supports both useEditor hook and EditorProvider from tiptap.

Installation

Installing the package using pnpm

``bash pnpm add @harshtalks/image-tiptap`

You can use npm, bun, or yarn etc.

`Usage`

`tsx import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import { ImageExtension, ImageAligner } from "@harshtalks/image-tiptap"; import "./globals.css"; import { useCallback } from "react";

export default function Home() { const editor = useEditor({ extensions: [StarterKit, ImageExtension], content: "

This is a basic example of implementing images. Drag to re-order.

",
  });
  const addImage = useCallback(() => {
    const url = window.prompt("URL");
    if (url) {
      editor?.chain().focus().setImage({ src: url }).run();
    }
  }, [editor]);
  if (!editor) {
    return null;
  }
  return (
    

      
      

        
          
            
              Left Align
              
                Center Align
              
              
                Right Align
              
            
          
        
      
      
    

  );
}