@zm-editor/react 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ko.md +260 -260
- package/README.md +300 -300
- package/dist/index.js +100 -74
- package/dist/styles.css +8078 -8078
- package/dist/variables.css +480 -480
- package/package.json +8 -8
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,300 +1,300 @@
|
|
|
1
|
-
# @zm-editor/react
|
|
2
|
-
|
|
3
|
-
React components for zm-editor - a Notion-style rich text editor built on [Tiptap](https://tiptap.dev).
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@zm-editor/react)
|
|
6
|
-
[](https://opensource.org/licenses/MIT)
|
|
7
|
-
|
|
8
|
-
**English** | [한국어](./README.ko.md)
|
|
9
|
-
|
|
10
|
-
## Features
|
|
11
|
-
|
|
12
|
-
- **Notion-like UX** - Slash commands, bubble menu, drag & drop blocks
|
|
13
|
-
- **35+ Slash Commands** - Headings, lists, code blocks, tables, and more
|
|
14
|
-
- **28+ Custom Blocks** - Images, embeds, callouts, diagrams, API blocks, etc.
|
|
15
|
-
- **Syntax Highlighting** - 26+ languages with GitHub Dark theme
|
|
16
|
-
- **Mermaid Diagrams** - Flowcharts, sequence diagrams, mindmaps
|
|
17
|
-
- **Math Equations** - KaTeX LaTeX rendering
|
|
18
|
-
- **i18n Support** - English & Korean built-in
|
|
19
|
-
- **Dark Mode** - Full dark mode support
|
|
20
|
-
- **TypeScript** - Full type definitions included
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npm install @zm-editor/core @zm-editor/react
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
### Peer Dependencies
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
npm install react react-dom
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### Optional Dependencies
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
# For Mermaid diagrams (flowcharts, sequence diagrams, etc.)
|
|
38
|
-
npm install mermaid
|
|
39
|
-
|
|
40
|
-
# For Math equations (LaTeX rendering)
|
|
41
|
-
npm install katex
|
|
42
|
-
|
|
43
|
-
# For PDF preview in file attachments
|
|
44
|
-
npm install pdfjs-dist
|
|
45
|
-
|
|
46
|
-
# For HTML sanitization
|
|
47
|
-
npm install dompurify
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
> **Note:** Mermaid and KaTeX are optional. If not installed, the editor will display a helpful installation prompt when you try to use diagram or math blocks.
|
|
51
|
-
|
|
52
|
-
## Quick Start
|
|
53
|
-
|
|
54
|
-
```tsx
|
|
55
|
-
'use client'; // Required for Next.js App Router
|
|
56
|
-
|
|
57
|
-
import { ZmEditor } from '@zm-editor/react';
|
|
58
|
-
|
|
59
|
-
export default function MyEditor() {
|
|
60
|
-
return (
|
|
61
|
-
<ZmEditor
|
|
62
|
-
initialContent="<p>Hello, world!</p>"
|
|
63
|
-
onChange={(editor) => {
|
|
64
|
-
console.log(editor.getJSON());
|
|
65
|
-
}}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Usage with Next.js
|
|
72
|
-
|
|
73
|
-
For Next.js App Router, use dynamic import to avoid SSR issues:
|
|
74
|
-
|
|
75
|
-
```tsx
|
|
76
|
-
'use client';
|
|
77
|
-
|
|
78
|
-
import dynamic from 'next/dynamic';
|
|
79
|
-
|
|
80
|
-
const ZmEditor = dynamic(
|
|
81
|
-
() => import('@zm-editor/react').then((mod) => mod.ZmEditor),
|
|
82
|
-
{ ssr: false }
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
export default function EditorWrapper() {
|
|
86
|
-
return <ZmEditor />;
|
|
87
|
-
}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
## Props
|
|
91
|
-
|
|
92
|
-
| Prop | Type | Default | Description |
|
|
93
|
-
|------|------|---------|-------------|
|
|
94
|
-
| `initialContent` | `string \| JSONContent` | `''` | Initial editor content (HTML or JSON) |
|
|
95
|
-
| `onChange` | `(editor: Editor) => void` | - | Callback when content changes |
|
|
96
|
-
| `onImageUpload` | `(file: File) => Promise<string>` | - | Custom image upload handler |
|
|
97
|
-
| `locale` | `ZmEditorLocale` | `enLocale` | Locale for i18n |
|
|
98
|
-
| `editable` | `boolean` | `true` | Enable/disable editing |
|
|
99
|
-
| `placeholder` | `string` | - | Placeholder text |
|
|
100
|
-
| `className` | `string` | - | Additional CSS class |
|
|
101
|
-
|
|
102
|
-
## Slash Commands
|
|
103
|
-
|
|
104
|
-
Type `/` to open the command menu:
|
|
105
|
-
|
|
106
|
-
| Command | Description |
|
|
107
|
-
|---------|-------------|
|
|
108
|
-
| `/text` | Plain text paragraph |
|
|
109
|
-
| `/h1`, `/h2`, `/h3` | Headings |
|
|
110
|
-
| `/bullet` | Bullet list |
|
|
111
|
-
| `/number` | Numbered list |
|
|
112
|
-
| `/task` | Task list (checklist) |
|
|
113
|
-
| `/quote` | Blockquote |
|
|
114
|
-
| `/code` | Code block with syntax highlighting |
|
|
115
|
-
| `/table` | Table (3x3) |
|
|
116
|
-
| `/image` | Image upload |
|
|
117
|
-
| `/file` | File attachment |
|
|
118
|
-
| `/embed` | Embed (YouTube, CodeSandbox, StackBlitz, Replit) |
|
|
119
|
-
| `/callout` | Callout box (info, warning, error, success, tip, note) |
|
|
120
|
-
| `/toggle` | Toggle (collapsible content) |
|
|
121
|
-
| `/mermaid` | Mermaid diagram |
|
|
122
|
-
| `/math` | Math equation (LaTeX) |
|
|
123
|
-
| `/terminal` | Terminal block |
|
|
124
|
-
| `/api` | API request/response block |
|
|
125
|
-
| `/divider` | Horizontal rule |
|
|
126
|
-
| `/toc` | Table of contents |
|
|
127
|
-
| `/error` | Error/warning/info message |
|
|
128
|
-
| `/os` | OS-specific commands (macOS/Linux/Windows) |
|
|
129
|
-
| `/changelog` | Version changelog |
|
|
130
|
-
| `/env` | Environment variables (with masking) |
|
|
131
|
-
| `/gist` | GitHub Gist embed |
|
|
132
|
-
| `/diff` | Code diff block |
|
|
133
|
-
| `/footnote` | Footnote |
|
|
134
|
-
| `/log` | Log block (debug/info/warn/error) |
|
|
135
|
-
| `/stacktrace` | Stack trace block |
|
|
136
|
-
| `/metadata` | Document metadata |
|
|
137
|
-
| `/graphql` | GraphQL query block |
|
|
138
|
-
| `/openapi` | OpenAPI/Swagger embed |
|
|
139
|
-
| `/diagram` | PlantUML/D2 diagram |
|
|
140
|
-
| `/emoji` | Emoji picker |
|
|
141
|
-
|
|
142
|
-
## Internationalization (i18n)
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
import { ZmEditor, koLocale, enLocale } from '@zm-editor/react';
|
|
146
|
-
|
|
147
|
-
// Korean
|
|
148
|
-
<ZmEditor locale={koLocale} />
|
|
149
|
-
|
|
150
|
-
// English (default)
|
|
151
|
-
<ZmEditor locale={enLocale} />
|
|
152
|
-
|
|
153
|
-
// Custom locale
|
|
154
|
-
<ZmEditor
|
|
155
|
-
locale={{
|
|
156
|
-
...enLocale,
|
|
157
|
-
editor: {
|
|
158
|
-
placeholder: 'Start writing...',
|
|
159
|
-
},
|
|
160
|
-
}}
|
|
161
|
-
/>
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
## Custom Image Upload
|
|
165
|
-
|
|
166
|
-
```tsx
|
|
167
|
-
<ZmEditor
|
|
168
|
-
onImageUpload={async (file) => {
|
|
169
|
-
const formData = new FormData();
|
|
170
|
-
formData.append('file', file);
|
|
171
|
-
|
|
172
|
-
const response = await fetch('/api/upload', {
|
|
173
|
-
method: 'POST',
|
|
174
|
-
body: formData,
|
|
175
|
-
});
|
|
176
|
-
|
|
177
|
-
const { url } = await response.json();
|
|
178
|
-
return url;
|
|
179
|
-
}}
|
|
180
|
-
/>
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
## Export Content
|
|
184
|
-
|
|
185
|
-
```tsx
|
|
186
|
-
import { useRef } from 'react';
|
|
187
|
-
import { ZmEditor, type ZmEditorRef } from '@zm-editor/react';
|
|
188
|
-
|
|
189
|
-
function MyEditor() {
|
|
190
|
-
const editorRef = useRef<ZmEditorRef>(null);
|
|
191
|
-
|
|
192
|
-
const handleExport = () => {
|
|
193
|
-
const editor = editorRef.current?.editor;
|
|
194
|
-
if (!editor) return;
|
|
195
|
-
|
|
196
|
-
const json = editor.getJSON();
|
|
197
|
-
const html = editor.getHTML();
|
|
198
|
-
const text = editor.getText();
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
return (
|
|
202
|
-
<>
|
|
203
|
-
<ZmEditor ref={editorRef} />
|
|
204
|
-
<button onClick={handleExport}>Export</button>
|
|
205
|
-
</>
|
|
206
|
-
);
|
|
207
|
-
}
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
## Theming & Customization
|
|
211
|
-
|
|
212
|
-
zm-editor uses CSS custom properties (variables) for theming, making it easy to customize colors, spacing, and more.
|
|
213
|
-
|
|
214
|
-
### Import Styles
|
|
215
|
-
|
|
216
|
-
```tsx
|
|
217
|
-
// Import in your layout or global CSS
|
|
218
|
-
import '@zm-editor/react/styles.css';
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
### Customize with CSS Variables
|
|
222
|
-
|
|
223
|
-
Override CSS variables to customize the editor appearance:
|
|
224
|
-
|
|
225
|
-
```css
|
|
226
|
-
/* In your global CSS */
|
|
227
|
-
:root {
|
|
228
|
-
/* Primary colors */
|
|
229
|
-
--zm-colors-primary: #8b5cf6;
|
|
230
|
-
--zm-colors-primary-hover: #7c3aed;
|
|
231
|
-
|
|
232
|
-
/* Editor background & text */
|
|
233
|
-
--zm-colors-editor-background: #ffffff;
|
|
234
|
-
--zm-colors-editor-text: #374151;
|
|
235
|
-
--zm-colors-editor-border: #e5e7eb;
|
|
236
|
-
|
|
237
|
-
/* Menu colors */
|
|
238
|
-
--zm-colors-menu-background: #ffffff;
|
|
239
|
-
--zm-colors-menu-hover: #f3f4f6;
|
|
240
|
-
--zm-colors-menu-selected: #eff6ff;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
/* Dark mode */
|
|
244
|
-
.dark,
|
|
245
|
-
[data-theme='dark'] {
|
|
246
|
-
--zm-colors-primary: #a78bfa;
|
|
247
|
-
--zm-colors-editor-background: #1f2937;
|
|
248
|
-
--zm-colors-editor-text: #d1d5db;
|
|
249
|
-
--zm-colors-editor-border: #374151;
|
|
250
|
-
}
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### Available CSS Variables
|
|
254
|
-
|
|
255
|
-
| Category | Variables |
|
|
256
|
-
|----------|-----------|
|
|
257
|
-
| **Editor** | `--zm-colors-editor-background`, `--zm-colors-editor-text`, `--zm-colors-editor-border`, `--zm-colors-heading` |
|
|
258
|
-
| **Menu** | `--zm-colors-menu-background`, `--zm-colors-menu-text`, `--zm-colors-menu-hover`, `--zm-colors-menu-selected` |
|
|
259
|
-
| **Primary** | `--zm-colors-primary`, `--zm-colors-primary-hover`, `--zm-colors-primary-text` |
|
|
260
|
-
| **Code** | `--zm-colors-code-background`, `--zm-colors-codeblock-background`, `--zm-colors-codeblock-text` |
|
|
261
|
-
| **Status** | `--zm-colors-success`, `--zm-colors-warning`, `--zm-colors-error`, `--zm-colors-info` |
|
|
262
|
-
| **Spacing** | `--zm-spacing-xs` (0.25rem), `--zm-spacing-sm` (0.5rem), `--zm-spacing-md` (1rem), `--zm-spacing-lg` (1.5rem) |
|
|
263
|
-
| **Radius** | `--zm-radius-sm` (4px), `--zm-radius-md` (6px), `--zm-radius-lg` (8px) |
|
|
264
|
-
| **Typography** | `--zm-font-family-sans`, `--zm-font-family-mono`, `--zm-font-size-*` |
|
|
265
|
-
|
|
266
|
-
See `variables.css` for the complete list of available variables.
|
|
267
|
-
|
|
268
|
-
### Dark Mode Support
|
|
269
|
-
|
|
270
|
-
zm-editor automatically supports dark mode via:
|
|
271
|
-
- `.dark` class (Tailwind CSS / next-themes)
|
|
272
|
-
- `[data-theme="dark"]` attribute
|
|
273
|
-
- `@media (prefers-color-scheme: dark)` system preference
|
|
274
|
-
|
|
275
|
-
## Browser Support
|
|
276
|
-
|
|
277
|
-
- Chrome (latest)
|
|
278
|
-
- Firefox (latest)
|
|
279
|
-
- Safari (latest)
|
|
280
|
-
- Edge (latest)
|
|
281
|
-
|
|
282
|
-
## Requirements
|
|
283
|
-
|
|
284
|
-
- React 18+
|
|
285
|
-
- Node.js 18+
|
|
286
|
-
|
|
287
|
-
## Related Packages
|
|
288
|
-
|
|
289
|
-
| Package | Description |
|
|
290
|
-
|---------|-------------|
|
|
291
|
-
| [@zm-editor/core](https://www.npmjs.com/package/@zm-editor/core) | Core Tiptap extensions and utilities |
|
|
292
|
-
|
|
293
|
-
## Links
|
|
294
|
-
|
|
295
|
-
- [GitHub Repository](https://github.com/hanumoka/zm-editor)
|
|
296
|
-
- [Documentation](https://github.com/hanumoka/zm-editor#readme)
|
|
297
|
-
|
|
298
|
-
## License
|
|
299
|
-
|
|
300
|
-
[MIT](https://github.com/hanumoka/zm-editor/blob/main/LICENSE)
|
|
1
|
+
# @zm-editor/react
|
|
2
|
+
|
|
3
|
+
React components for zm-editor - a Notion-style rich text editor built on [Tiptap](https://tiptap.dev).
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@zm-editor/react)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
**English** | [한국어](./README.ko.md)
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **Notion-like UX** - Slash commands, bubble menu, drag & drop blocks
|
|
13
|
+
- **35+ Slash Commands** - Headings, lists, code blocks, tables, and more
|
|
14
|
+
- **28+ Custom Blocks** - Images, embeds, callouts, diagrams, API blocks, etc.
|
|
15
|
+
- **Syntax Highlighting** - 26+ languages with GitHub Dark theme
|
|
16
|
+
- **Mermaid Diagrams** - Flowcharts, sequence diagrams, mindmaps
|
|
17
|
+
- **Math Equations** - KaTeX LaTeX rendering
|
|
18
|
+
- **i18n Support** - English & Korean built-in
|
|
19
|
+
- **Dark Mode** - Full dark mode support
|
|
20
|
+
- **TypeScript** - Full type definitions included
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @zm-editor/core @zm-editor/react
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Peer Dependencies
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install react react-dom
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Optional Dependencies
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# For Mermaid diagrams (flowcharts, sequence diagrams, etc.)
|
|
38
|
+
npm install mermaid
|
|
39
|
+
|
|
40
|
+
# For Math equations (LaTeX rendering)
|
|
41
|
+
npm install katex
|
|
42
|
+
|
|
43
|
+
# For PDF preview in file attachments
|
|
44
|
+
npm install pdfjs-dist
|
|
45
|
+
|
|
46
|
+
# For HTML sanitization
|
|
47
|
+
npm install dompurify
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
> **Note:** Mermaid and KaTeX are optional. If not installed, the editor will display a helpful installation prompt when you try to use diagram or math blocks.
|
|
51
|
+
|
|
52
|
+
## Quick Start
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
'use client'; // Required for Next.js App Router
|
|
56
|
+
|
|
57
|
+
import { ZmEditor } from '@zm-editor/react';
|
|
58
|
+
|
|
59
|
+
export default function MyEditor() {
|
|
60
|
+
return (
|
|
61
|
+
<ZmEditor
|
|
62
|
+
initialContent="<p>Hello, world!</p>"
|
|
63
|
+
onChange={(editor) => {
|
|
64
|
+
console.log(editor.getJSON());
|
|
65
|
+
}}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Usage with Next.js
|
|
72
|
+
|
|
73
|
+
For Next.js App Router, use dynamic import to avoid SSR issues:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
'use client';
|
|
77
|
+
|
|
78
|
+
import dynamic from 'next/dynamic';
|
|
79
|
+
|
|
80
|
+
const ZmEditor = dynamic(
|
|
81
|
+
() => import('@zm-editor/react').then((mod) => mod.ZmEditor),
|
|
82
|
+
{ ssr: false }
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
export default function EditorWrapper() {
|
|
86
|
+
return <ZmEditor />;
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Props
|
|
91
|
+
|
|
92
|
+
| Prop | Type | Default | Description |
|
|
93
|
+
|------|------|---------|-------------|
|
|
94
|
+
| `initialContent` | `string \| JSONContent` | `''` | Initial editor content (HTML or JSON) |
|
|
95
|
+
| `onChange` | `(editor: Editor) => void` | - | Callback when content changes |
|
|
96
|
+
| `onImageUpload` | `(file: File) => Promise<string>` | - | Custom image upload handler |
|
|
97
|
+
| `locale` | `ZmEditorLocale` | `enLocale` | Locale for i18n |
|
|
98
|
+
| `editable` | `boolean` | `true` | Enable/disable editing |
|
|
99
|
+
| `placeholder` | `string` | - | Placeholder text |
|
|
100
|
+
| `className` | `string` | - | Additional CSS class |
|
|
101
|
+
|
|
102
|
+
## Slash Commands
|
|
103
|
+
|
|
104
|
+
Type `/` to open the command menu:
|
|
105
|
+
|
|
106
|
+
| Command | Description |
|
|
107
|
+
|---------|-------------|
|
|
108
|
+
| `/text` | Plain text paragraph |
|
|
109
|
+
| `/h1`, `/h2`, `/h3` | Headings |
|
|
110
|
+
| `/bullet` | Bullet list |
|
|
111
|
+
| `/number` | Numbered list |
|
|
112
|
+
| `/task` | Task list (checklist) |
|
|
113
|
+
| `/quote` | Blockquote |
|
|
114
|
+
| `/code` | Code block with syntax highlighting |
|
|
115
|
+
| `/table` | Table (3x3) |
|
|
116
|
+
| `/image` | Image upload |
|
|
117
|
+
| `/file` | File attachment |
|
|
118
|
+
| `/embed` | Embed (YouTube, CodeSandbox, StackBlitz, Replit) |
|
|
119
|
+
| `/callout` | Callout box (info, warning, error, success, tip, note) |
|
|
120
|
+
| `/toggle` | Toggle (collapsible content) |
|
|
121
|
+
| `/mermaid` | Mermaid diagram |
|
|
122
|
+
| `/math` | Math equation (LaTeX) |
|
|
123
|
+
| `/terminal` | Terminal block |
|
|
124
|
+
| `/api` | API request/response block |
|
|
125
|
+
| `/divider` | Horizontal rule |
|
|
126
|
+
| `/toc` | Table of contents |
|
|
127
|
+
| `/error` | Error/warning/info message |
|
|
128
|
+
| `/os` | OS-specific commands (macOS/Linux/Windows) |
|
|
129
|
+
| `/changelog` | Version changelog |
|
|
130
|
+
| `/env` | Environment variables (with masking) |
|
|
131
|
+
| `/gist` | GitHub Gist embed |
|
|
132
|
+
| `/diff` | Code diff block |
|
|
133
|
+
| `/footnote` | Footnote |
|
|
134
|
+
| `/log` | Log block (debug/info/warn/error) |
|
|
135
|
+
| `/stacktrace` | Stack trace block |
|
|
136
|
+
| `/metadata` | Document metadata |
|
|
137
|
+
| `/graphql` | GraphQL query block |
|
|
138
|
+
| `/openapi` | OpenAPI/Swagger embed |
|
|
139
|
+
| `/diagram` | PlantUML/D2 diagram |
|
|
140
|
+
| `/emoji` | Emoji picker |
|
|
141
|
+
|
|
142
|
+
## Internationalization (i18n)
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
import { ZmEditor, koLocale, enLocale } from '@zm-editor/react';
|
|
146
|
+
|
|
147
|
+
// Korean
|
|
148
|
+
<ZmEditor locale={koLocale} />
|
|
149
|
+
|
|
150
|
+
// English (default)
|
|
151
|
+
<ZmEditor locale={enLocale} />
|
|
152
|
+
|
|
153
|
+
// Custom locale
|
|
154
|
+
<ZmEditor
|
|
155
|
+
locale={{
|
|
156
|
+
...enLocale,
|
|
157
|
+
editor: {
|
|
158
|
+
placeholder: 'Start writing...',
|
|
159
|
+
},
|
|
160
|
+
}}
|
|
161
|
+
/>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## Custom Image Upload
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
<ZmEditor
|
|
168
|
+
onImageUpload={async (file) => {
|
|
169
|
+
const formData = new FormData();
|
|
170
|
+
formData.append('file', file);
|
|
171
|
+
|
|
172
|
+
const response = await fetch('/api/upload', {
|
|
173
|
+
method: 'POST',
|
|
174
|
+
body: formData,
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
const { url } = await response.json();
|
|
178
|
+
return url;
|
|
179
|
+
}}
|
|
180
|
+
/>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
## Export Content
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
import { useRef } from 'react';
|
|
187
|
+
import { ZmEditor, type ZmEditorRef } from '@zm-editor/react';
|
|
188
|
+
|
|
189
|
+
function MyEditor() {
|
|
190
|
+
const editorRef = useRef<ZmEditorRef>(null);
|
|
191
|
+
|
|
192
|
+
const handleExport = () => {
|
|
193
|
+
const editor = editorRef.current?.editor;
|
|
194
|
+
if (!editor) return;
|
|
195
|
+
|
|
196
|
+
const json = editor.getJSON();
|
|
197
|
+
const html = editor.getHTML();
|
|
198
|
+
const text = editor.getText();
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
return (
|
|
202
|
+
<>
|
|
203
|
+
<ZmEditor ref={editorRef} />
|
|
204
|
+
<button onClick={handleExport}>Export</button>
|
|
205
|
+
</>
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
## Theming & Customization
|
|
211
|
+
|
|
212
|
+
zm-editor uses CSS custom properties (variables) for theming, making it easy to customize colors, spacing, and more.
|
|
213
|
+
|
|
214
|
+
### Import Styles
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
// Import in your layout or global CSS
|
|
218
|
+
import '@zm-editor/react/styles.css';
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Customize with CSS Variables
|
|
222
|
+
|
|
223
|
+
Override CSS variables to customize the editor appearance:
|
|
224
|
+
|
|
225
|
+
```css
|
|
226
|
+
/* In your global CSS */
|
|
227
|
+
:root {
|
|
228
|
+
/* Primary colors */
|
|
229
|
+
--zm-colors-primary: #8b5cf6;
|
|
230
|
+
--zm-colors-primary-hover: #7c3aed;
|
|
231
|
+
|
|
232
|
+
/* Editor background & text */
|
|
233
|
+
--zm-colors-editor-background: #ffffff;
|
|
234
|
+
--zm-colors-editor-text: #374151;
|
|
235
|
+
--zm-colors-editor-border: #e5e7eb;
|
|
236
|
+
|
|
237
|
+
/* Menu colors */
|
|
238
|
+
--zm-colors-menu-background: #ffffff;
|
|
239
|
+
--zm-colors-menu-hover: #f3f4f6;
|
|
240
|
+
--zm-colors-menu-selected: #eff6ff;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Dark mode */
|
|
244
|
+
.dark,
|
|
245
|
+
[data-theme='dark'] {
|
|
246
|
+
--zm-colors-primary: #a78bfa;
|
|
247
|
+
--zm-colors-editor-background: #1f2937;
|
|
248
|
+
--zm-colors-editor-text: #d1d5db;
|
|
249
|
+
--zm-colors-editor-border: #374151;
|
|
250
|
+
}
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Available CSS Variables
|
|
254
|
+
|
|
255
|
+
| Category | Variables |
|
|
256
|
+
|----------|-----------|
|
|
257
|
+
| **Editor** | `--zm-colors-editor-background`, `--zm-colors-editor-text`, `--zm-colors-editor-border`, `--zm-colors-heading` |
|
|
258
|
+
| **Menu** | `--zm-colors-menu-background`, `--zm-colors-menu-text`, `--zm-colors-menu-hover`, `--zm-colors-menu-selected` |
|
|
259
|
+
| **Primary** | `--zm-colors-primary`, `--zm-colors-primary-hover`, `--zm-colors-primary-text` |
|
|
260
|
+
| **Code** | `--zm-colors-code-background`, `--zm-colors-codeblock-background`, `--zm-colors-codeblock-text` |
|
|
261
|
+
| **Status** | `--zm-colors-success`, `--zm-colors-warning`, `--zm-colors-error`, `--zm-colors-info` |
|
|
262
|
+
| **Spacing** | `--zm-spacing-xs` (0.25rem), `--zm-spacing-sm` (0.5rem), `--zm-spacing-md` (1rem), `--zm-spacing-lg` (1.5rem) |
|
|
263
|
+
| **Radius** | `--zm-radius-sm` (4px), `--zm-radius-md` (6px), `--zm-radius-lg` (8px) |
|
|
264
|
+
| **Typography** | `--zm-font-family-sans`, `--zm-font-family-mono`, `--zm-font-size-*` |
|
|
265
|
+
|
|
266
|
+
See `variables.css` for the complete list of available variables.
|
|
267
|
+
|
|
268
|
+
### Dark Mode Support
|
|
269
|
+
|
|
270
|
+
zm-editor automatically supports dark mode via:
|
|
271
|
+
- `.dark` class (Tailwind CSS / next-themes)
|
|
272
|
+
- `[data-theme="dark"]` attribute
|
|
273
|
+
- `@media (prefers-color-scheme: dark)` system preference
|
|
274
|
+
|
|
275
|
+
## Browser Support
|
|
276
|
+
|
|
277
|
+
- Chrome (latest)
|
|
278
|
+
- Firefox (latest)
|
|
279
|
+
- Safari (latest)
|
|
280
|
+
- Edge (latest)
|
|
281
|
+
|
|
282
|
+
## Requirements
|
|
283
|
+
|
|
284
|
+
- React 18+
|
|
285
|
+
- Node.js 18+
|
|
286
|
+
|
|
287
|
+
## Related Packages
|
|
288
|
+
|
|
289
|
+
| Package | Description |
|
|
290
|
+
|---------|-------------|
|
|
291
|
+
| [@zm-editor/core](https://www.npmjs.com/package/@zm-editor/core) | Core Tiptap extensions and utilities |
|
|
292
|
+
|
|
293
|
+
## Links
|
|
294
|
+
|
|
295
|
+
- [GitHub Repository](https://github.com/hanumoka/zm-editor)
|
|
296
|
+
- [Documentation](https://github.com/hanumoka/zm-editor#readme)
|
|
297
|
+
|
|
298
|
+
## License
|
|
299
|
+
|
|
300
|
+
[MIT](https://github.com/hanumoka/zm-editor/blob/main/LICENSE)
|