Follow on twitter
Docs
Image Placeholder

Image Placeholder

Add placeholder for images like notion in the editor.

Installation

Run the following command to install the extension & associated toolbar component.

npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder.json

Copy & paste the following code in your @lib/utils.ts file.

export const NODE_HANDLES_SELECTED_STYLE_CLASSNAME = "node-handles-selected-style";
 
export function isValidUrl(url: string) {
	return /^https?:\/\/\S+$/.test(url);
}

Usage

const extensions = [
	StarterKit.configure({
		// ...
	}),
	ImageExtension,
	ImagePlaceholder,
];
 
const editor = useEditor({
	extensions,
});

Settings

HTMLAttributes

Configure the HTML attributes for the image placeholder.

ImagePlaceholder.configure({
	HTMLAttributes: {
		class: "w-full",
	},
});

onDrop

Configure the onDrop handler for the image placeholder.

ImagePlaceholder.configure({
	onDrop: (files, editor) => {
		console.log(files, editor);
	},
});

onDropRejected

Configure the onDropRejected handler for the image placeholder.

ImagePlaceholder.configure({
	onDropRejected: (files, editor) => {
		console.log(files, editor);
	},
});

onEmbed

Configure the onEmbed handler for the image placeholder.

ImagePlaceholder.configure({
	onEmbed: (url, editor) => {
		console.log(url, editor);
	},
});

allowedMimeTypes

Configure the allowed mime types for the image placeholder.

ImagePlaceholder.configure({
	allowedMimeTypes: {
		image: ["image/*"],
	},
});

maxFiles

Configure the maximum number of files for the image placeholder.

ImagePlaceholder.configure({
	maxFiles: 1,
});

maxSize

Configure the maximum size for the image placeholder.

ImagePlaceholder.configure({
	maxSize: 1024 * 1024, // 1MB
});

Commands

insertImagePlaceholder

Insert the placholder for the image with the following command.

editor.commands.insertImagePlaceholder();
Image (extended)Color and Highlight