Tiptap Editor Codeveda

A powerful, feature-rich rich text editor built with Tiptap and React. This package provides both an editor and viewer component with extensive functionality including tables, images, videos, code blocks, accordions, tabs, iframes, and more.

🚀 Features

- Rich Text Editing: Bold, italic, underline, strikethrough, headings, lists
- Tables: Full table support with add/delete rows and columns
- Media Support: Image and video uploads with preview
- Code Blocks: Syntax-highlighted code blocks with multiple language support
- Interactive Components: Accordions, tabs, iframes for CodeSandbox/YouTube
- Customizable: Extensible with custom extensions and styling
- TypeScript: Full TypeScript support with type definitions
- Read-only Mode: Viewer component for displaying content

📸 Screenshots

If you are checking it on npm page and images not showing please check on github

$3

!Main Toolbar, Debug Panel and Action Buttons

$3

!Titles, Lists and Table

$3

!Code, Accordion and Iframe

_Image and video upload functionality with Firebase integration_

$3

!Block, Tabs and Images

📦 Installation

``bash
npm install tiptap-editor-codeveda
`

🎨 CSS Import (Required)

Important: You must import the CSS styles for the editor to display correctly. Choose one of the following methods:

$3

`tsx
import {
TiptapEditor,
TiptapViewer,
useEditorContent,
} from "tiptap-editor-codeveda";
import "tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"; // Import CSS directly
`

$3

`tsx
import {
TiptapEditor,
TiptapViewer,
useEditorContent,
} from "tiptap-editor-codeveda";
import "tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"; // Import CSS directly
`

$3

`css
/ In your main CSS file (e.g., index.css, App.css) /
@import "tiptap-editor-codeveda/styles";
`

$3

`html

rel="stylesheet"
href="node_modules/tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"
/>
`

Note: Without importing the CSS, the editor will function but won't have proper styling for extensions like tables, code blocks, accordions, etc.

🔧 Form Integration

The editor is designed to work seamlessly inside forms. All buttons have type="button" to prevent accidental form submission when clicking editor controls.

🔧 Basic Usage

$3

`tsx
import { TiptapEditor, useEditorContent } from "tiptap-editor-codeveda";
import "tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"; // Don't forget to import CSS!

function MyApp() {
const { content, html, json, setContent } = useEditorContent();

return (


{html}

`tsx
import { TiptapEditor, useEditorContent } from "tiptap-editor-codeveda";
import "tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"; // Don't forget to import CSS!

function EditorWithUploads() {
const { content, setContent } = useEditorContent();

const handleImageUpload = async (file: File): Promise => {
// Your image upload logic here
const formData = new FormData();
formData.append("image", file);

const response = await fetch("/api/upload/image", {
method: "POST",
body: formData,
});

const { imageUrl } = await response.json();
return imageUrl;
};

const handleVideoUpload = async (file: File): Promise => {
// Your video upload logic here
const formData = new FormData();
formData.append("video", file);

const response = await fetch("/api/upload/video", {
method: "POST",
body: formData,
});

const { videoUrl } = await response.json();
return videoUrl;
};

return (
setEditorContent={setContent}
onImageUpload={handleImageUpload}
onVideoUpload={handleVideoUpload}
/>
);
}
`

$3

`tsx
import { TiptapViewer } from "tiptap-editor-codeveda";
import "tiptap-editor-codeveda/dist/tiptap-editor-codeveda.css"; // Don't forget to import CSS!

function ContentViewer({ htmlContent }: { htmlContent: string }) {
return (

);
}
`

📖 API Reference

$3

| Prop | Type | Description |
| ------------------ | ----------------------------------------- | ------------------------------------------ |
| setEditorContent | (content: EditorContentPayload) => void | Callback fired when editor content changes |
| onImageUpload | (file: File) => Promise | Optional image upload handler |
| onVideoUpload | (file: File) => Promise | Optional video upload handler |

$3

| Prop | Type | Description |
| --------------- | -------- | -------------------------------- |
| editorContent | string | HTML content to display |
| styles | string | Optional CSS classes for styling |

$3

Returns an object with:

`tsx
{
content: EditorContentPayload; // Full content object
html: string; // HTML string
json: any; // JSON representation
setContent: (content: EditorContentPayload) => void; // Update function
}
`

$3

`tsx
type EditorContentPayload = {
html: string;
json: any; // ProseMirror JSON document
};
`

🎨 Styling

The editor comes with default Tailwind CSS styles. You can customize the appearance by:

1. Override CSS classes: The editor uses standard prose classes
2. Custom styles: Pass custom CSS classes to the viewer
3. Theme customization: Modify the default color scheme

`css
/ Custom editor styles /
.tiptap-editor {
/ Your custom styles /
}

.tiptap-editor .ProseMirror {
/ Editor content area /
}
`

🔌 Available Features

$3

- Headings: H1, H2, H3
- Text styles: Bold, italic, underline, strikethrough
- Lists: Bullet points and numbered lists
- Quotes: Block quotes
- Links: Clickable links

$3

- Tables: Resizable tables with header support
- Code blocks: Syntax highlighting for multiple languages
- Accordions: Collapsible content sections
- Tabs: Tabbed content organization
- Iframes: Embed CodeSandbox, YouTube, etc.

$3

- Images: Upload or URL-based images with preview
- Videos: Upload or embed videos

🛠️ Examples

$3

`tsx
import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

const uploadToFirebase = async (
file: File,
folder: string
): Promise => {
const storageRef = ref(storage, ${folder}/${Date.now()}_${file.name});
const snapshot = await uploadBytes(storageRef, file);
return await getDownloadURL(snapshot.ref);
};

function FirebaseEditor() {
const { setContent } = useEditorContent();

return (
setEditorContent={setContent}
onImageUpload={(file) => uploadToFirebase(file, "images")}
onVideoUpload={(file) => uploadToFirebase(file, "videos")}
/>
);
}
`

$3

`tsx
import { useState, useEffect } from "react";
import {
TiptapEditor,
TiptapViewer,
useEditorContent,
} from "tiptap-editor-codeveda";

function ContentManager() {
const [isEditing, setIsEditing] = useState(false);
const [savedContent, setSavedContent] = useState("");
const { content, setContent } = useEditorContent();

const saveContent = () => {
setSavedContent(content.html);
setIsEditing(false);
// Save to your backend
};

return (


🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this in your projects.

🐛 Issues

If you encounter any issues, please report them on the GitHub repository.

---

Built with ❤️ using Tiptap and React.