neo-md 1.1.0 → 1.2.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 +31 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,22 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
A modern, highly-configurable, and highly-secure React markdown editor component. Built with React and Tailwind CSS, it provides dual-pane live preview capabilities, syntax highlighting, and an extensive Props API for controlled or uncontrolled states.
|
|
4
4
|
|
|
5
|
-
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
|
+
- **Markdown Toolbar** - Built-in formatting toolbar with buttons for bold, italic, strikethrough, headings (H1-H3), lists, blockquote, code blocks, links, images, tables, and horizontal rules. Wraps selected text or inserts templates with smart cursor repositioning.
|
|
10
|
+
- **Bidirectional Scroll Sync** - Proportional scroll synchronization between editor and preview panes. Scrolling either pane keeps the other in lockstep.
|
|
9
11
|
- **XSS Prevention** - Raw HTML rendering in the editor pane is secured via `isomorphic-dompurify`.
|
|
10
|
-
- **Syntax Highlighting** - Fully customizable color themes for the editor pane with support for headings, bold, italic, links, code blocks, lists, and more.
|
|
12
|
+
- **Syntax Highlighting** - Fully customizable color themes for the editor pane with support for headings, bold, italic, links, code blocks, lists, tables, and more.
|
|
11
13
|
- **Controlled & Uncontrolled Support** - Plug it into external state naturally like a standard input element, or let it manage its own.
|
|
12
14
|
- **Deep Customizability** - Apply your own `className` structures mapping to the editor pane, preview pane, and toolbar.
|
|
13
15
|
- **Ref Forwarding** - Programmatically trigger focus or grab values using `useImperativeHandle` and `forwardRef`.
|
|
14
16
|
- **Custom Renderers** - Inject your own custom React components directly into the `react-markdown` DOM rendering pipeline.
|
|
15
|
-
- **Live Preview** - Real-time rendering of markdown content with
|
|
16
|
-
- **Dark Mode Support** - Built-in Tailwind
|
|
17
|
+
- **Live Preview** - Real-time rendering of markdown content with split-pane editing.
|
|
18
|
+
- **Dark Mode Support** - Built-in Tailwind theming compatible with system preferences.
|
|
17
19
|
|
|
18
20
|
## Demo
|
|
19
21
|
|
|
20
|
-
[Live Demo](https://
|
|
22
|
+
[Live Demo](https://neo-md.atharvdangedev.in) | [GitHub](https://github.com/atharvdange618/React-Markdown-Editor)
|
|
21
23
|
|
|
22
24
|
## Installation
|
|
23
25
|
|
|
@@ -31,7 +33,7 @@ pnpm add neo-md
|
|
|
31
33
|
bun add neo-md
|
|
32
34
|
```
|
|
33
35
|
|
|
34
|
-
You must also have `react` and `react-dom` installed as they are peer dependencies.
|
|
36
|
+
You must also have `react` and `react-dom` installed, as they are peer dependencies.
|
|
35
37
|
|
|
36
38
|
## Usage
|
|
37
39
|
|
|
@@ -101,26 +103,29 @@ function App() {
|
|
|
101
103
|
|
|
102
104
|
The `MarkdownEditor` component accepts the following props:
|
|
103
105
|
|
|
104
|
-
| Prop
|
|
105
|
-
|
|
|
106
|
-
| `value`
|
|
107
|
-
| `defaultValue`
|
|
108
|
-
| `onChange`
|
|
109
|
-
| `viewMode`
|
|
110
|
-
| `defaultViewMode`
|
|
111
|
-
| `onViewModeChange`
|
|
112
|
-
| `className`
|
|
113
|
-
| `editorClassName`
|
|
114
|
-
| `previewClassName`
|
|
115
|
-
| `hideToolbar`
|
|
116
|
-
| `hideWordCount`
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
106
|
+
| Prop | Type | Default | Description |
|
|
107
|
+
| --------------------- | -------------------------------- | -------------------- | ----------------------------------------------------- |
|
|
108
|
+
| `value` | `string` | `undefined` | The controlled markdown text. |
|
|
109
|
+
| `defaultValue` | `string` | `(default template)` | Initial text for uncontrolled mode. |
|
|
110
|
+
| `onChange` | `(value: string) => void` | `undefined` | Callback fired when text changes. |
|
|
111
|
+
| `viewMode` | `"edit" \| "preview" \| "split"` | `undefined` | The controlled view mode. |
|
|
112
|
+
| `defaultViewMode` | `"edit" \| "preview" \| "split"` | `"split"` | Initial view mode for uncontrolled mode. |
|
|
113
|
+
| `onViewModeChange` | `(mode) => void` | `undefined` | Callback fired when a toolbar tab is clicked. |
|
|
114
|
+
| `className` | `string` | `""` | Classes applied to the root container. |
|
|
115
|
+
| `editorClassName` | `string` | `""` | Classes applied to the editor pane wrapper. |
|
|
116
|
+
| `previewClassName` | `string` | `""` | Classes applied to the preview pane wrapper. |
|
|
117
|
+
| `hideToolbar` | `boolean` | `false` | Completely removes the top toolbar block. |
|
|
118
|
+
| `hideWordCount` | `boolean` | `false` | Hides the character counter badge. |
|
|
119
|
+
| `hideMarkdownToolbar` | `boolean` | `false` | Hides the markdown formatting toolbar. |
|
|
120
|
+
| `enableDownload` | `boolean` | `true` | Toggles the "Download" button. |
|
|
121
|
+
| `enableCopy` | `boolean` | `true` | Toggles the "Copy" button. |
|
|
122
|
+
| `enableScrollSync` | `boolean` | `true` | Toggles bidirectional scroll sync between panes. |
|
|
123
|
+
| `placeholder` | `string` | `"Start typing..."` | Textbox placeholder text. |
|
|
124
|
+
| `readOnly` | `boolean` | `false` | Disables text input and hides the formatting toolbar. |
|
|
125
|
+
| `maxLength` | `number` | `undefined` | Hard cap on textarea character length. |
|
|
126
|
+
| `components` | `Components` | `{}` | Complete `react-markdown` DOM rendering overrides. |
|
|
127
|
+
| `syntaxColors` | `SyntaxHighlightColors` | `defaultColors` | Custom color theme for syntax highlighting. |
|
|
128
|
+
|
|
124
129
|
|
|
125
130
|
## Exposed Methods (`MarkdownEditorRef`)
|
|
126
131
|
|