like-keditor
Version:
A powerful, extensible, and customizable rich-text editor built on top of [Yoopta](https://yoopta.dev) - [Yoopta Docs](https://yoodocs.space). Comes with built-in support for images, videos, files, markdown export, and more!
370 lines (296 loc) • 10.3 kB
Markdown
## ✨ KEditor
A powerful, extensible, and customizable rich-text editor built on top of [Yoopta](https://yoopta.dev) - [Yoopta Docs](https://yoodocs.space). Comes with built-in support for images, videos, files, markdown export, and more!
#### **[Demo](https://www.google.com)**
### 🔧 Features
- ✅ **Fully customizable** with plugins, marks, tools
- 🖼️ Supports image, video, file uploads
- 🔄 Undo/Redo capability via external controls
- 🧩 Custom plugin support (e.g., carousel)
- 📤 Export to HTML, Markdown, Plain Text
- 📌 Real-time change handling
- 🔒 Read-only mode support
- 🧠 Smart placeholder and autofocus support
----------
## 📦 Installation
```bash
npm install like-keditor
//or
yarn add like-keditor
```
----------
Add tailwind config tailwind.config.js
If you use tailwindcss >=v4.0 use this in init css file in project:
```css
@config "path_to_your_config_tailwindcss_file"
/* example: @config "../tailwind.config.js" #for vite react */
/* or use link to index if use simple React base
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
(this maybe difference, should check on tailwindcss official website) */
```
Add needed packages to your `tailwind.config.js` file:
```ts
{
content: ["./node_modules/like-keditor/**/*.{js,ts,jsx,tsx}"],
theme: {
// ...
},
variants: {
// ...
},
plugins: [],
};
```
----------
## 🧠 Usage
### 1. Import the component
```ts
import { Editor } from 'like-keditor';
```
### 2. Basic usage
```ts
<Editor />
```
### 3. With advanced configuration
```ts
import React, { useState } from 'react';
import { Editor } from 'like-keditor';
import '../node_modules/like-keditor/dist/index.css';
// Optional: Add styles for editor
import './styles/editor.css';
import './styles/render.css';
export default function EditorExample() {
const [exported, setExported] = useState<{
html?: string;
markdown?: string;
plainText?: string;
}>({});
const undoRef = React.useRef<() => void>(() => {});
const redoRef = React.useRef<() => void>(() => {});
const handleEditorChange = (value: any) => {
console.log('Editor content updated:', value);
};
const handleExport = ({
html,
markdown,
plainText,
}: {
html: string;
markdown: string;
plainText: string;
}) => {
setExported({ html, markdown, plainText });
};
const mockImageUpload = async (file: File) => {
const src = URL.createObjectURL(file);
return {
src,
alt: file.name,
sizes: {
width: 300,
height: 200,
},
};
};
const mockVideoUpload = async (file: File) => {
return {
src: URL.createObjectURL(file),
format: 'video/mp4',
};
};
const mockPosterUpload = async (file: File) => {
return {
src: URL.createObjectURL(file),
alt: file.name,
sizes: {
width: 400,
height: 300,
},
};
};
const mockFileUpload = async (file: File) => {
return {
src: URL.createObjectURL(file),
format: file.type,
name: file.name,
size: file.size,
};
};
return (
<div className="p-6">
<h1 className="text-2xl font-semibold mb-4">Yoopta Editor Example</h1>
// <Button className='border border-gray-500 mr-2 hover:bg-gray-50' onClick={() => undoRef.current?.()}>Undo</Button>
// <Button className='border border-gray-500 mr-2 hover:bg-gray-50' onClick={() => redoRef.current?.()}>Redo</Button>
<Editor
onChange={handleEditorChange}
onExport={handleExport}
placeholder="Start typing your awesome content..."
autoFocus
exportAllows={['html', 'markdown', 'plainText']}
onImageUpload={mockImageUpload}
onVideoUpload={{
onUpload: mockVideoUpload,
onUploadPoster: mockPosterUpload,
}}
onFileUpload={mockFileUpload}
onUndo={(fn) => (undoRef.current = fn)}
onRedo={(fn) => (redoRef.current = fn)}
/>
<div className="mt-10 space-y-4">
<h2 className="text-xl font-bold">Exported HTML</h2>
<pre className="bg-gray-100 p-3 rounded max-h-64 overflow-auto whitespace-pre-wrap">
{exported.html || 'No HTML yet.'}
</pre>
<h2 className="text-xl font-bold">Exported Markdown</h2>
<pre className="bg-gray-100 p-3 rounded max-h-64 overflow-auto whitespace-pre-wrap">
{exported.markdown || 'No Markdown yet.'}
</pre>
<h2 className="text-xl font-bold">Exported Plain Text</h2>
<pre className="bg-gray-100 p-3 rounded max-h-64 overflow-auto whitespace-pre-wrap">
{exported.plainText || 'No plain text yet.'}
</pre>
</div>
</div>
);
}
```
----------
## 🎨 Styling export HTML
> **Apply it when your export HTML was not same style with the editor**
Here is the css export HTML style default:
```css
#details-container-TdaSo6fg2z *,
#details-container-TdaSo6fg2z *::before,
#details-container-TdaSo6fg2z *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
transition: all 0.2s ease;
}
#details-container-TdaSo6fg2z h1,
#details-container-TdaSo6fg2z h2,
#details-container-TdaSo6fg2z h3,
#details-container-TdaSo6fg2z h4,
#details-container-TdaSo6fg2z h5,
#details-container-TdaSo6fg2z h6 {
font-weight: 600;
line-height: 1.25;
margin-bottom: 0.75rem;
}
#details-container-TdaSo6fg2z h1 { font-size: 2.25rem; }
#details-container-TdaSo6fg2z h2 { font-size: 1.875rem; }
#details-container-TdaSo6fg2z h3 { font-size: 1.5rem; }
#details-container-TdaSo6fg2z h4 { font-size: 1.25rem; }
#details-container-TdaSo6fg2z h5 { font-size: 1.125rem; }
#details-container-TdaSo6fg2z h6 { font-size: 1rem; }
#details-container-TdaSo6fg2z p {
margin-bottom: 1rem;
}
#details-container-TdaSo6fg2z a {
text-decoration: none;
font-weight: 500;
}
#details-container-TdaSo6fg2z a:hover {
text-decoration: underline;
}
#details-container-TdaSo6fg2z ul,
#details-container-TdaSo6fg2z ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
#details-container-TdaSo6fg2z li {
margin-bottom: 0.5rem;
}
#details-container-TdaSo6fg2z img {
max-width: 100%;
border-radius: 0.5rem;
margin: 1rem 0;
}
#details-container-TdaSo6fg2z blockquote {
border-left: 4px solid hsl(221.2, 83.2%, 53.3%);
padding-left: 1rem;
margin: 1rem 0;
font-style: italic;
border-radius: 0.25rem;
}
#details-container-TdaSo6fg2z pre,
#details-container-TdaSo6fg2z code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.95rem;
border-radius: 0.375rem
padding: 0.25rem 0.5rem;
overflow-x: auto;
}
#details-container-TdaSo6fg2z table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.95rem;
}
#details-container-TdaSo6fg2z th,
#details-container-TdaSo6fg2z td {
border: 1px solid hsl(214.3, 31.8%, 91.4%);
padding: 0.75rem 1rem;
text-align: left;
}
#details-container-TdaSo6fg2z th {
font-weight: 600;
}
#details-container-TdaSo6fg2z input,
#details-container-TdaSo6fg2z select,
#details-container-TdaSo6fg2z textarea,
#details-container-TdaSo6fg2z button {
font: inherit;
border: 1px solid hsl(214.3, 31.8%, 91.4%);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
margin-bottom: 1rem;
}
#details-container-TdaSo6fg2z input:focus,
#details-container-TdaSo6fg2z select:focus,
#details-container-TdaSo6fg2z textarea:focus {
border-color: hsl(221.2, 83.2%, 53.3%);
box-shadow: 0 0 0 2px hsl(221.2, 83.2%, 90%);
}
#details-container-TdaSo6fg2z button {
cursor: pointer;
font-weight: 500;
}
```
## 🧩 Props
| Prop | Type | Description
|------------------------------------|---------------------------------------|-------------------------------------|
| value | YooptaContentValue | Initial editor value |
| onChange | (value, options) => void | Callback on change |
| onExport | (data) => void | Callback for exporting content |
| onImageUpload | (file) => Promise<...> | Image upload handler |
| onVideoUpload | { onUpload, onUploadPoster } | Video and poster upload handlers |
| onFileUpload | (file) => Promise<...> | File upload handler |
| exportAllows | ("html" \| "markdown" \| "plainText")[] | Types to export |
| readOnly | boolean | If true, disables editing |
| autoFocus | boolean | If true, focuses editor on mount |
| onUndo, onRedo | (callback) => void | Provide undo/redo functions to parent |
| onPathChange | (path: YooptaPath) => void | Track focused block path |
| placeholder | string | Placeholder text |
| width, id, style, className | any | Optional DOM styling/ID |
| classNameContainer | HTMLAttributes<HTMLDivElement> | Container styling & props |
| plugins, customPlugins, marks, tools | any[] | Extend editor's capabilities |
----------
## 📤 Exported Format
```ts
{
html: "<div id='details-container-TdaSo6fg2z'>...</div>",
markdown: "**Bold text**",
plainText: "Just plain text",
type: ['html', 'markdown', 'plainText'],
}
```
## 🧪 Tips
- You can fully customize the plugin system by passing your own `plugins`, `marks`, and `tools`.
- Upload handlers let you integrate with any file hosting API (e.g., S3, Cloudinary).
- All exports are auto-triggered on change — useful for syncing content with servers.
----------
## 🤝 License
MIT – free to use, modify, and extend.