A Tiptap extension for React.js to add image resize and alignment options to the image extension.
npm install @harshtalks/image-tiptapIt 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.
Installing the package using pnpm
``bash`
pnpm add @harshtalks/image-tiptap
You can use npm, bun, or yarn etc.
`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 (
``