@cyberyozh/text-editor
v0.1.17
Published
Rich text editor library based on Tiptap for CyberYozh
Downloads
1,045
Readme
@cyberyozh/text-editor
Feature-rich Tiptap editor with server-side rendering support.
Installation
npm install @cyberyozh/text-editorPeer Dependencies: React 18+ or React 19+
Quick Start
Editor (Client)
import { Tiptap } from '@cyberyozh/text-editor/editor';
import '@cyberyozh/text-editor/styles';
function MyEditor() {
return (
<Tiptap
content="<p>Hello World</p>"
handleChange={(content) => console.log(content)}
isEditable={true}
lang="en"
/>
);
}Renderer (Server)
import { TiptapRender } from '@cyberyozh/text-editor/render';
function Article({ content }) {
return <TiptapRender content={content} />;
}With image URL resolver (when images stored by ID):
const getImageById = (fileId: string) => `/api/images/${fileId}`;
<TiptapRender content={content} getImageById={getImageById} />Interactivity Provider (Client - Optional)
Enables copy-to-clipboard for rendered content. Add once to your layout:
// app/layout.tsx
import { TiptapInteractivityProvider } from '@cyberyozh/text-editor/render/client';
export default function Layout({ children }) {
return (
<html>
<body>
<TiptapInteractivityProvider />
{children}
</body>
</html>
);
}Features
- Rich text editing (formatting, lists, tables, links)
- LaTeX math equations (inline & block)
- Image/video support with custom upload handler
- Custom blocks (callouts, figures, quotes)
- Multi-language translations
- Server-side rendering (no client JS needed)
API
<Tiptap /> Props
| Prop | Type | Description |
|------|------|-------------|
| content | string | Initial content (HTML or JSON) |
| handleChange | (content: JSONContent) => void | Content change callback |
| isEditable | boolean | Enable/disable editing (default: true) |
| imageHandlers | {upload, getImage} | Image upload & retrieval handlers |
| lang | 'ru' \| 'en' | Interface language (default: 'ru') |
| error | string | Error message to display |
<TiptapRender /> Props
| Prop | Type | Description |
|------|------|-------------|
| content | string \| JSONContent | Tiptap JSON content to render |
| getImageById | (fileId: string) => string \| null | Resolve image URLs from file IDs |
License
MIT