Docs
Installation
Installation
Installation guide for shadcn tiptap.
Install core packages
npm install @tiptap/react @tiptap/core @tiptap/pmInstall ToolbarProvider component
ToolbarProvider accepts editor as a prop and serves it to its children using react context.
Think of this as a provider for your toolbar components.
Install with shadcn cli:
npx shadcn add https://tiptap.niazmorshed.dev/r/toolbar-provider.jsonOr manually copy & paste, the following code under components/toolbars/toolbar-provider.tsx.
"use client";
import type { Editor } from "@tiptap/react";
import React from "react";
export interface ToolbarContextProps {
editor: Editor;
}
export const ToolbarContext = React.createContext<ToolbarContextProps | null>(
null,
);
interface ToolbarProviderProps {
editor: Editor;
children: React.ReactNode;
}
export const ToolbarProvider = ({ editor, children }: ToolbarProviderProps) => {
return (
<ToolbarContext.Provider value={{ editor }}>
{children}
</ToolbarContext.Provider>
);
};
export const useToolbar = () => {
const context = React.useContext(ToolbarContext);
if (!context) {
throw new Error("useToolbar must be used within a ToolbarProvider");
}
return context;
};
Copy & paste the following code under src/app/globals.css.
It's important to be careful about what class names you use for the editor.
.ProseMirror {
@apply px-4 pt-2;
outline: none !important;
}
h1.tiptap-heading {
@apply mb-6 mt-8 text-4xl font-bold;
}
h2.tiptap-heading {
@apply mb-4 mt-6 text-3xl font-bold;
}
h3.tiptap-heading {
@apply mb-3 mt-4 text-xl font-bold;
}
h1.tiptap-heading:first-child,
h2.tiptap-heading:first-child,
h3.tiptap-heading:first-child {
margin-top: 0;
}
h1.tiptap-heading + h2.tiptap-heading,
h1.tiptap-heading + h3.tiptap-heading,
h2.tiptap-heading + h1.tiptap-heading,
h2.tiptap-heading + h3.tiptap-heading,
h3.tiptap-heading + h1.tiptap-heading,
h3.tiptap-heading + h2.tiptap-heading {
margin-top: 0;
}
.tiptap p.is-editor-empty:first-child::before {
@apply pointer-events-none float-left h-0 text-accent-foreground;
content: attr(data-placeholder);
}
.tiptap ul,
.tiptap ol {
padding: 0 1rem;
}
.tiptap blockquote {
border-left: 3px solid gray;
margin: 1.5rem 0;
padding-left: 1rem;
}