neo-md 1.3.2 → 1.3.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.
Files changed (6) hide show
  1. package/README.md +59 -22
  2. package/dist/index.d.ts +9 -1
  3. package/dist/index.js +5012 -4828
  4. package/dist/index.umd.cjs +82 -64
  5. package/dist/neo-md.css +1 -1
  6. package/package.json +24 -2
package/README.md CHANGED
@@ -7,6 +7,9 @@ A modern, highly-configurable, and highly-secure React markdown editor component
7
7
  ## Features
8
8
 
9
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
+ - **Reading Time Estimate** - Displays estimated reading time based on word count with configurable words-per-minute rate. Helps users gauge content length at a glance.
11
+ - **Selection Word Count** - Real-time statistics for selected text showing character, word, and line counts in a floating tooltip. Perfect for tracking specific sections.
12
+ - **Multi-Format Export** - Export markdown to Markdown (.md) and Plain Text (.txt) formats. Fully customizable format selection per implementation.
10
13
  - **Bidirectional Scroll Sync** - Proportional scroll synchronization between editor and preview panes. Scrolling either pane keeps the other in lockstep.
11
14
  - **ASCII & Diagram Support** - Precise whitespace preservation in plain text code blocks (` ``` `), ensuring text-based diagrams and ASCII art render exactly as typed without space collapsing.
12
15
  - **XSS Prevention** - Raw HTML rendering in the editor pane is secured via `isomorphic-dompurify`.
@@ -104,28 +107,31 @@ function App() {
104
107
 
105
108
  The `MarkdownEditor` component accepts the following props:
106
109
 
107
- | Prop | Type | Default | Description |
108
- | --------------------- | -------------------------------- | -------------------- | ----------------------------------------------------- |
109
- | `value` | `string` | `undefined` | The controlled markdown text. |
110
- | `defaultValue` | `string` | `(default template)` | Initial text for uncontrolled mode. |
111
- | `onChange` | `(value: string) => void` | `undefined` | Callback fired when text changes. |
112
- | `viewMode` | `"edit" \| "preview" \| "split"` | `undefined` | The controlled view mode. |
113
- | `defaultViewMode` | `"edit" \| "preview" \| "split"` | `"split"` | Initial view mode for uncontrolled mode. |
114
- | `onViewModeChange` | `(mode) => void` | `undefined` | Callback fired when a toolbar tab is clicked. |
115
- | `className` | `string` | `""` | Classes applied to the root container. |
116
- | `editorClassName` | `string` | `""` | Classes applied to the editor pane wrapper. |
117
- | `previewClassName` | `string` | `""` | Classes applied to the preview pane wrapper. |
118
- | `showToolbar` | `boolean` | `true` | Shows the top toolbar block. |
119
- | `showWordCount` | `boolean` | `true` | Shows the character counter badge. |
120
- | `showMarkdownToolbar` | `boolean` | `true` | Shows the markdown formatting toolbar. |
121
- | `enableDownload` | `boolean` | `true` | Toggles the "Download" button. |
122
- | `enableCopy` | `boolean` | `true` | Toggles the "Copy" button. |
123
- | `enableScrollSync` | `boolean` | `true` | Toggles bidirectional scroll sync between panes. |
124
- | `placeholder` | `string` | `"Start typing..."` | Textbox placeholder text. |
125
- | `readOnly` | `boolean` | `false` | Disables text input and hides the formatting toolbar. |
126
- | `maxLength` | `number` | `undefined` | Hard cap on textarea character length. |
127
- | `components` | `Components` | `{}` | Complete `react-markdown` DOM rendering overrides. |
128
- | `syntaxColors` | `SyntaxHighlightColors` | `defaultColors` | Custom color theme for syntax highlighting. |
110
+ | Prop | Type | Default | Description |
111
+ | --------------------- | -------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
112
+ | `value` | `string` | `undefined` | The controlled markdown text. |
113
+ | `defaultValue` | `string` | `(default template)` | Initial text for uncontrolled mode. |
114
+ | `onChange` | `(value: string) => void` | `undefined` | Callback fired when text changes. |
115
+ | `viewMode` | `"edit" \| "preview" \| "split"` | `undefined` | The controlled view mode. |
116
+ | `defaultViewMode` | `"edit" \| "preview" \| "split"` | `"split"` | Initial view mode for uncontrolled mode. |
117
+ | `onViewModeChange` | `(mode) => void` | `undefined` | Callback fired when a toolbar tab is clicked. |
118
+ | `className` | `string` | `""` | Classes applied to the root container. |
119
+ | `editorClassName` | `string` | `""` | Classes applied to the editor pane wrapper. |
120
+ | `previewClassName` | `string` | `""` | Classes applied to the preview pane wrapper. |
121
+ | `showToolbar` | `boolean` | `true` | Shows the top toolbar block. |
122
+ | `showWordCount` | `boolean` | `true` | Shows the character counter badge. |
123
+ | `showReadingTime` | `boolean` | `true` | Shows the estimated reading time badge. |
124
+ | `wordsPerMinute` | `number` | `200` | Words per minute for reading time calculation. |
125
+ | `showSelectionCount` | `boolean` | `true` | Shows floating tooltip with stats for selected text. |
126
+ | `showMarkdownToolbar` | `boolean` | `true` | Shows the markdown formatting toolbar. |
127
+ | `enableDownload` | `boolean \| ExportFormat[]` | `true` | Export button with format options. `true` = all formats (md, txt), `false` = disabled, or array like `['markdown', 'text']` for specific formats. |
128
+ | `enableCopy` | `boolean` | `true` | Toggles the "Copy" button. |
129
+ | `enableScrollSync` | `boolean` | `true` | Toggles bidirectional scroll sync between panes. |
130
+ | `placeholder` | `string` | `"Start typing..."` | Textbox placeholder text. |
131
+ | `readOnly` | `boolean` | `false` | Disables text input and hides the formatting toolbar. |
132
+ | `maxLength` | `number` | `undefined` | Hard cap on textarea character length. |
133
+ | `components` | `Components` | `{}` | Complete `react-markdown` DOM rendering overrides. |
134
+ | `syntaxColors` | `SyntaxHighlightColors` | `defaultColors` | Custom color theme for syntax highlighting. |
129
135
 
130
136
  ## Exposed Methods (`MarkdownEditorRef`)
131
137
 
@@ -134,6 +140,37 @@ Via `forwardRef`, parents can trigger the following imperatives on the editor:
134
140
  - `focus()`: Forces browser focus onto the underlying `<textarea>`.
135
141
  - `getValue()`: Retrieves the current internal markdown string, particularly useful if you run uncontrolled mode and just want the value on submit.
136
142
 
143
+ ## Roadmap
144
+
145
+ - **Table of Contents Sidebar**
146
+ - Auto-generated from headings
147
+ - Clickable navigation
148
+ - Collapsible sections
149
+ - Sticky/floating mode
150
+ - ✅ **Reading Time Estimate** - _Completed_
151
+ - Based on word count
152
+ - Configurable WPM
153
+ - ✅ **Selection Word Count** - _Completed_
154
+ - Character/word/line count
155
+ - **Minimap (like VS Code)**
156
+ - Document overview
157
+ - Quick scroll navigation
158
+ - ✅ **Export to Multiple Formats** - _Completed_
159
+ - PDF with styling (via browser print)
160
+ - Styled HTML
161
+ - Plain text
162
+ - Markdown
163
+ - **Multiple Themes**
164
+ - Predefined color schemes (Monokai, Solarized, etc.)
165
+ - **Find & Replace**
166
+ - Search with regex support
167
+ - Replace all/one at a time
168
+ - Case sensitivity toggle
169
+ - Highlight matches in editor
170
+ - **Link Preview Cards**
171
+ - Hover over links for preview
172
+ - Unfurl metadata (title, description, image)
173
+
137
174
  ## Contributing
138
175
 
139
176
  Contributions are welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for detailed information on how to get started, development workflow, and coding guidelines.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { Components } from 'react-markdown';
2
2
  import { default as default_2 } from 'react';
3
3
 
4
+ /**
5
+ * Export utilities for markdown editor
6
+ */
7
+ declare type ExportFormat = "markdown" | "text";
8
+
4
9
  export declare const MarkdownEditor: default_2.ForwardRefExoticComponent<MarkdownEditorProps & default_2.RefAttributes<MarkdownEditorRef>>;
5
10
 
6
11
  export declare interface MarkdownEditorProps {
@@ -15,8 +20,11 @@ export declare interface MarkdownEditorProps {
15
20
  previewClassName?: string;
16
21
  showToolbar?: boolean;
17
22
  showWordCount?: boolean;
23
+ showReadingTime?: boolean;
24
+ wordsPerMinute?: number;
25
+ showSelectionCount?: boolean;
18
26
  showMarkdownToolbar?: boolean;
19
- enableDownload?: boolean;
27
+ enableDownload?: boolean | ExportFormat[];
20
28
  enableCopy?: boolean;
21
29
  enableScrollSync?: boolean;
22
30
  placeholder?: string;