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();