github-markdown-editor 1.0.0
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.md +213 -0
- package/dist/github-markdown-editor.css +1 -0
- package/dist/index.cjs.js +121 -0
- package/dist/index.esm.js +28181 -0
- package/package.json +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
# GitHub Markdown Editor
|
|
2
|
+
|
|
3
|
+
A modern, feature-rich Markdown editor built with CodeMirror 6, React, and TypeScript. Inspired by GitHub's editor with full GitHub Flavored Markdown (GFM) support.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **GitHub-inspired UI** - Clean, professional interface matching GitHub's design
|
|
8
|
+
- ⚡ **CodeMirror 6** - Powerful, extensible editor with syntax highlighting
|
|
9
|
+
- 📝 **GitHub Flavored Markdown** - Full GFM support including tables, task lists, and strikethrough
|
|
10
|
+
- 👁️ **Live Preview** - Toggle between edit and preview modes
|
|
11
|
+
- 🎯 **Custom Toolbar** - Quick access to common markdown formatting
|
|
12
|
+
- 📁 **Import/Export** - Import and export `.md` files
|
|
13
|
+
- 🌓 **Light/Dark Theme** - Built-in theme support
|
|
14
|
+
- 📊 **Word Count** - Real-time character and word counting
|
|
15
|
+
- ⌨️ **Keyboard Shortcuts** - Standard text editor shortcuts
|
|
16
|
+
- 🔧 **TypeScript** - Full type safety and IntelliSense support
|
|
17
|
+
|
|
18
|
+
## 📦 Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install github-markdown-editor
|
|
22
|
+
# or
|
|
23
|
+
yarn add github-markdown-editor
|
|
24
|
+
# or
|
|
25
|
+
pnpm add github-markdown-editor
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 🚀 Quick Start
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { MarkdownEditor } from 'github-markdown-editor';
|
|
32
|
+
import 'github-markdown-editor/dist/style.css';
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
const handleChange = (value: string) => {
|
|
36
|
+
console.log('Markdown content:', value);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<MarkdownEditor
|
|
41
|
+
initialValue="# Hello World"
|
|
42
|
+
onChange={handleChange}
|
|
43
|
+
height="600px"
|
|
44
|
+
/>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## 📖 API Reference
|
|
50
|
+
|
|
51
|
+
### MarkdownEditor Props
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Default | Description |
|
|
54
|
+
|------|------|---------|-------------|
|
|
55
|
+
| `initialValue` | `string` | `''` | Initial markdown content |
|
|
56
|
+
| `onChange` | `(value: string) => void` | - | Callback fired when content changes |
|
|
57
|
+
| `height` | `string` | `'600px'` | Height of the editor |
|
|
58
|
+
| `theme` | `'light' \| 'dark'` | `'light'` | Editor theme |
|
|
59
|
+
| `showToolbar` | `boolean` | `true` | Show/hide the toolbar |
|
|
60
|
+
| `showPreview` | `boolean` | `false` | Initial preview state |
|
|
61
|
+
|
|
62
|
+
### Utility Functions
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import {
|
|
66
|
+
convertMarkdownToHtml,
|
|
67
|
+
exportToMarkdown,
|
|
68
|
+
exportToHtml,
|
|
69
|
+
extractFrontmatter
|
|
70
|
+
} from 'github-markdown-editor';
|
|
71
|
+
|
|
72
|
+
// Convert markdown to HTML
|
|
73
|
+
const html = await convertMarkdownToHtml('# Hello');
|
|
74
|
+
|
|
75
|
+
// Export markdown
|
|
76
|
+
exportToMarkdown(content, 'document.md');
|
|
77
|
+
|
|
78
|
+
// Export as HTML
|
|
79
|
+
exportToHtml(htmlContent, 'document.html');
|
|
80
|
+
|
|
81
|
+
// Extract frontmatter
|
|
82
|
+
const { frontmatter, content } = extractFrontmatter(markdown);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 🎨 Customization
|
|
86
|
+
|
|
87
|
+
### Custom Styling
|
|
88
|
+
|
|
89
|
+
You can override the default styles by targeting the CSS classes:
|
|
90
|
+
|
|
91
|
+
```css
|
|
92
|
+
.markdown-editor {
|
|
93
|
+
/* Your custom styles */
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.toolbar {
|
|
97
|
+
/* Custom toolbar styles */
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.preview-wrapper {
|
|
101
|
+
/* Custom preview styles */
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Dark Theme
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
<MarkdownEditor theme="dark" />
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 🔧 Advanced Usage
|
|
112
|
+
|
|
113
|
+
### Controlled Component
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import { useState } from 'react';
|
|
117
|
+
import { MarkdownEditor } from 'github-markdown-editor';
|
|
118
|
+
|
|
119
|
+
function ControlledEditor() {
|
|
120
|
+
const [markdown, setMarkdown] = useState('# Hello');
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
<div>
|
|
124
|
+
<MarkdownEditor
|
|
125
|
+
initialValue={markdown}
|
|
126
|
+
onChange={setMarkdown}
|
|
127
|
+
/>
|
|
128
|
+
<button onClick={() => console.log(markdown)}>
|
|
129
|
+
Get Content
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### With Custom Height and No Toolbar
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
<MarkdownEditor
|
|
140
|
+
height="100vh"
|
|
141
|
+
showToolbar={false}
|
|
142
|
+
showPreview={true}
|
|
143
|
+
/>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
## 🎯 Supported Markdown Features
|
|
147
|
+
|
|
148
|
+
- **Headers** - `# H1` through `###### H6`
|
|
149
|
+
- **Emphasis** - `*italic*` and `**bold**`
|
|
150
|
+
- **Lists** - Ordered and unordered
|
|
151
|
+
- **Links** - `[text](url)`
|
|
152
|
+
- **Images** - ``
|
|
153
|
+
- **Code** - Inline and fenced code blocks with syntax highlighting
|
|
154
|
+
- **Tables** - GitHub-style tables
|
|
155
|
+
- **Task Lists** - `- [ ]` and `- [x]`
|
|
156
|
+
- **Blockquotes** - `> quote`
|
|
157
|
+
- **Strikethrough** - `~~text~~`
|
|
158
|
+
- **Horizontal Rules** - `---`
|
|
159
|
+
- **Autolinks** - Automatic URL linking
|
|
160
|
+
|
|
161
|
+
## 🛠️ Development
|
|
162
|
+
|
|
163
|
+
```bash
|
|
164
|
+
# Clone the repository
|
|
165
|
+
git clone https://github.com/yourusername/github-markdown-editor.git
|
|
166
|
+
|
|
167
|
+
# Install dependencies
|
|
168
|
+
npm install
|
|
169
|
+
|
|
170
|
+
# Start development server
|
|
171
|
+
npm run dev
|
|
172
|
+
|
|
173
|
+
# Build for production
|
|
174
|
+
npm run build
|
|
175
|
+
|
|
176
|
+
# Run tests
|
|
177
|
+
npm test
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## 📝 License
|
|
181
|
+
|
|
182
|
+
MIT © [Your Name]
|
|
183
|
+
|
|
184
|
+
## 🤝 Contributing
|
|
185
|
+
|
|
186
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
187
|
+
|
|
188
|
+
## 🐛 Issues
|
|
189
|
+
|
|
190
|
+
If you find a bug or have a feature request, please create an issue on [GitHub](https://github.com/yourusername/github-markdown-editor/issues).
|
|
191
|
+
|
|
192
|
+
## 🙏 Acknowledgments
|
|
193
|
+
|
|
194
|
+
- [CodeMirror 6](https://codemirror.net/) - The powerful editor foundation
|
|
195
|
+
- [remark](https://remark.js.org/) - Markdown processing
|
|
196
|
+
- GitHub - Design inspiration
|
|
197
|
+
|
|
198
|
+
## 📊 Browser Support
|
|
199
|
+
|
|
200
|
+
- Chrome (latest)
|
|
201
|
+
- Firefox (latest)
|
|
202
|
+
- Safari (latest)
|
|
203
|
+
- Edge (latest)
|
|
204
|
+
|
|
205
|
+
## 🔗 Links
|
|
206
|
+
|
|
207
|
+
- [Documentation](https://github.com/yourusername/github-markdown-editor#readme)
|
|
208
|
+
- [NPM Package](https://www.npmjs.com/package/github-markdown-editor)
|
|
209
|
+
- [GitHub Repository](https://github.com/yourusername/github-markdown-editor)
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
Made with ❤️ by [JustQ]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.markdown-editor{display:flex;flex-direction:column;border:1px solid #d0d7de;border-radius:6px;overflow:hidden;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.markdown-editor.dark{background:#0d1117;border-color:#30363d;color:#c9d1d9}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f6f8fa;border-bottom:1px solid #d0d7de;gap:8px;flex-wrap:wrap}.dark .toolbar{background:#161b22;border-bottom-color:#30363d}.toolbar-group{display:flex;gap:4px;flex-wrap:wrap}.toolbar-button{padding:6px 12px;background:#fff;border:1px solid #d0d7de;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s;white-space:nowrap}.toolbar-button:hover{background:#f3f4f6;border-color:#8c959f}.toolbar-button:active{background:#e5e7eb}.dark .toolbar-button{background:#21262d;border-color:#30363d;color:#c9d1d9}.dark .toolbar-button:hover{background:#30363d;border-color:#484f58}.editor-container{flex:1;overflow:auto;min-height:400px}.editor-wrapper,.editor-wrapper .cm-editor{height:100%}.editor-wrapper .cm-scroller{padding:16px}.preview-wrapper{padding:24px;overflow-y:auto;height:100%;line-height:1.6}.preview-wrapper h1{font-size:2em;font-weight:600;margin:.67em 0;padding-bottom:.3em;border-bottom:1px solid #d0d7de}.preview-wrapper h2{font-size:1.5em;font-weight:600;margin:.83em 0;padding-bottom:.3em;border-bottom:1px solid #d0d7de}.preview-wrapper h3{font-size:1.25em;font-weight:600;margin:1em 0}.preview-wrapper h4{font-size:1em;font-weight:600;margin:1.33em 0}.preview-wrapper h5{font-size:.875em;font-weight:600;margin:1.67em 0}.preview-wrapper h6{font-size:.85em;font-weight:600;margin:2.33em 0;color:#57606a}.preview-wrapper p{margin:1em 0}.preview-wrapper code{background:#f6f8fa;padding:.2em .4em;border-radius:3px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.85em}.preview-wrapper pre{background:#f6f8fa;padding:16px;border-radius:6px;overflow-x:auto;margin:16px 0}.preview-wrapper pre code{background:none;padding:0;font-size:.875em}.preview-wrapper blockquote{border-left:4px solid #d0d7de;padding-left:1em;margin:0;color:#57606a}.preview-wrapper a{color:#0969da;text-decoration:none}.preview-wrapper a:hover{text-decoration:underline}.preview-wrapper ul,.preview-wrapper ol{padding-left:2em;margin:16px 0}.preview-wrapper li{margin:.25em 0}.preview-wrapper li input[type=checkbox]{margin-right:.5em}.preview-wrapper table{border-collapse:collapse;width:100%;margin:16px 0}.preview-wrapper th,.preview-wrapper td{border:1px solid #d0d7de;padding:8px 12px}.preview-wrapper th{background:#f6f8fa;font-weight:600}.preview-wrapper img{max-width:100%;height:auto;border-radius:6px}.preview-wrapper hr{border:none;border-top:1px solid #d0d7de;margin:24px 0}.preview-wrapper strong{font-weight:600}.preview-wrapper em{font-style:italic}.preview-wrapper del{text-decoration:line-through}.dark .preview-wrapper{color:#c9d1d9}.dark .preview-wrapper h1,.dark .preview-wrapper h2{border-bottom-color:#30363d}.dark .preview-wrapper h6{color:#8b949e}.dark .preview-wrapper code,.dark .preview-wrapper pre{background:#161b22}.dark .preview-wrapper blockquote{border-left-color:#30363d;color:#8b949e}.dark .preview-wrapper a{color:#58a6ff}.dark .preview-wrapper th{background:#161b22}.dark .preview-wrapper th,.dark .preview-wrapper td{border-color:#30363d}.dark .preview-wrapper hr{border-top-color:#30363d}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#f6f8fa;border-top:1px solid #d0d7de;font-size:12px;color:#57606a}.dark .status-bar{background:#161b22;border-top-color:#30363d;color:#8b949e}.editor-container::-webkit-scrollbar,.preview-wrapper::-webkit-scrollbar{width:10px;height:10px}.editor-container::-webkit-scrollbar-track,.preview-wrapper::-webkit-scrollbar-track{background:#f6f8fa}.editor-container::-webkit-scrollbar-thumb,.preview-wrapper::-webkit-scrollbar-thumb{background:#d0d7de;border-radius:5px}.editor-container::-webkit-scrollbar-thumb:hover,.preview-wrapper::-webkit-scrollbar-thumb:hover{background:#8c959f}.dark .editor-container::-webkit-scrollbar-track,.dark .preview-wrapper::-webkit-scrollbar-track{background:#161b22}.dark .editor-container::-webkit-scrollbar-thumb,.dark .preview-wrapper::-webkit-scrollbar-thumb{background:#30363d}.dark .editor-container::-webkit-scrollbar-thumb:hover,.dark .preview-wrapper::-webkit-scrollbar-thumb:hover{background:#484f58}
|