ngx-rich-text-pro 1.0.0 → 1.0.2

package/README.md

@@ -174,6 +174,35 @@ You can completely hide the built-in toolbar (`[showToolbar]="false"`) and trigg
 ></ngx-rich-text-pro>
 ```
 
+### Recipe 3: Social Post Captions with Clean Markdown Output
+
+If your backend or post preview system renders markdown (such as LinkedIn, GitHub, or Reddit formatting), set `[outputFormat]="'markdown'"`:
+
+```html
+<ngx-rich-text-pro
+  [outputFormat]="'markdown'"
+  [exclusiveInlineFormats]="true"
+  [hashtagColor]="'#0069FF'"
+  [(ngModel)]="captionMarkdown"
+  (valueChange)="onCaptionChange($event)"
+></ngx-rich-text-pro>
+```
+
+**What it produces**:
+- Underline: `__line__`
+- Bold: `**line**`
+- Italic: `*line*`
+- Bullet list: `- item`
+- Numbered list: `1. item`
+- Paragraphs: separated by `\n\n`
+- Hashtags: `#tag`
+
+**Mutually Exclusive Inline Formatting (`[exclusiveInlineFormats]="true"` default)**:
+- At any time, only **one** inline effect is applied to text (either bold, either italic, or either underline).
+- Clicking Bold clears Italic and Underline.
+- Prevents messy combined syntax (e.g. `__***text***__`).
+- Cleanly roundtrips between Markdown strings and rich WYSIWYG HTML in the editor.
+
 ---
 
 ## 🏷️ Real-Time Hashtag Engine
@@ -378,6 +407,8 @@ editor.setBackgroundColor('#fef08a');
 | `fontFamilies` | `Array<FontFamilyOption \| string>` | `DEFAULT_FONT_FAMILIES` | Font family options in the toolbar dropdown |
 | `hashtagColor` | `string` | `'#0069FF'` | Color used for highlighted `#hashtags` |
 | `highlightHashtags` | `boolean` | `true` | Enable or disable real-time hashtag highlighting |
+| `outputFormat` | `'html' \| 'markdown'` | `'html'` | Format emitted by `[(ngModel)]` / `formControl` / `(valueChange)`. When `'markdown'`, outputs clean markdown syntax (`__underline__`, `**bold**`, `*italic*`, `- list`, `1. list`, `#tag`) |
+| `exclusiveInlineFormats` | `boolean` | `true` | When `true`, enforces mutually exclusive inline formatting (only one of bold, italic, or underline can be active at a time; clicking bold turns off italic and underline) |
 | `maxCharacters` | `number` | `undefined` | Hard maximum character limit |
 | `characterCountWarn` | `number` | `undefined` | Threshold to show a warning badge as limit approaches |
 | `customClass` | `string` | `''` | Custom CSS class applied to host container |
@@ -391,16 +422,17 @@ editor.setBackgroundColor('#fef08a');
 
 | Output | Event Type | Description |
 | :--- | :--- | :--- |
-| `valueChange` | `EventEmitter<string>` | Emits updated HTML string on every change |
-| `textChange` | `EventEmitter<{ html: string; text: string }>` | Emits both HTML and plain-text representation |
+| `valueChange` | `EventEmitter<string>` | Emits updated value on every change (HTML or Markdown depending on `outputFormat`) |
+| `markdownChange` | `EventEmitter<string>` | Always emits clean Markdown representation |
+| `textChange` | `EventEmitter<{ html: string; text: string; markdown?: string }>` | Emits HTML, plain text, and Markdown representation |
 
 ### Callable Public Methods (`#editorRef`)
 
 | Method | Parameters | Description |
 | :--- | :--- | :--- |
-| `bold()` | - | Toggles bold on selection |
-| `italic()` | - | Toggles italic on selection |
-| `underline()` | - | Toggles underline on selection |
+| `bold()` | - | Toggles bold on selection (exclusively clears italic & underline when `exclusiveInlineFormats: true`) |
+| `italic()` | - | Toggles italic on selection (exclusively clears bold & underline when `exclusiveInlineFormats: true`) |
+| `underline()` | - | Toggles underline on selection (exclusively clears bold & italic when `exclusiveInlineFormats: true`) |
 | `strike()` | - | Toggles strikethrough on selection |
 | `subscript()` | - | Toggles subscript on selection |
 | `superscript()` | - | Toggles superscript on selection |
@@ -430,6 +462,7 @@ editor.setBackgroundColor('#fef08a');
 | `focus()` | - | Focuses the editor content area |
 | `getHtml()` | - | Returns current HTML content |
 | `getText()` | - | Returns plain text representation |
+| `getMarkdown()` | - | Returns clean Markdown representation (`__underline__`, `**bold**`, `*italic*`, etc.) |
 | `isFormatActive(format)` | `format: string` | Checks if a format (`'bold'`, `'italic'`, `'insertOrderedList'`, etc.) is currently active |
 
 ### Supported Toolbar Tool Identifiers
@@ -488,38 +521,30 @@ ngx-rich-text-editor {
 
 ---
 
-## 🚀 How to Publish to npm
+## 🌐 Browser & Platform Support
 
-Ready to publish this package to npm? Follow these simple steps:
+`ngx-rich-text-pro` is thoroughly tested and supported on all modern evergreen browsers and platforms:
+- Google Chrome / Chromium (Desktop & Mobile)
+- Mozilla Firefox (Desktop & Mobile)
+- Apple Safari (macOS & iOS)
+- Microsoft Edge
+- Electron & Progressive Web Apps (PWAs)
 
-### 1. Login to your npm account
-```bash
-npm login
-```
+---
 
-### 2. Build the package
-```bash
-npm run build:lib
-```
-*This compiles the Angular library into standard Angular Package Format (APF) inside the `dist/ngx-rich-text-editor` directory.*
+## 🤝 Contributing & Issues
 
-### 3. Verify the package output (Optional)
-```bash
-npm run pack:lib
-```
-*Creates `ngx-rich-text-pro-1.0.0.tgz` for local inspection.*
+Contributions, feature requests, and bug reports are welcome! If you encounter any issues or have questions, please feel free to open an issue or submit a pull request on GitHub.
 
-### 4. Publish to npm!
-```bash
-cd dist/ngx-rich-text-editor
-npm publish --access public
-```
+---
+
+## 👨‍💻 Author
 
-Your package will immediately be live on **`https://www.npmjs.com/package/ngx-rich-text-pro`**! 🎉
+**Yash Chapani**
 
 ---
 
 ## 📄 License
 
-MIT License © 2026. Free for commercial and personal use.
+This project is open source and available under the [MIT License](LICENSE). Free for both commercial and personal use.