feat: Enhance NgxMarkdownEditor with customizable styles and improved functionality#1
feat: Enhance NgxMarkdownEditor with customizable styles and improved functionality#1
Conversation
RockyCott
commented
Nov 11, 2025
RockyCott
commented
- Updated NgxMarkdownPreviewComponent to support default styles and custom CSS classes.
- Refactored markdown-textarea component to use input signals for readonly state.
- Improved popover component template for better readability and maintainability.
- Modified default editor configuration to include useDefaultStyles and customStylesClass properties.
- Adjusted markdown-editor component to utilize new configuration options and signals for state management.
- Added public methods to markdown-editor for getting, setting, and clearing markdown content.
- Enhanced internal configuration handling to merge defaults with user-defined settings.
- Updated styles in markdown-editor component to reflect new default styling options.
… functionality - Updated NgxMarkdownPreviewComponent to support default styles and custom CSS classes. - Refactored markdown-textarea component to use input signals for readonly state. - Improved popover component template for better readability and maintainability. - Modified default editor configuration to include useDefaultStyles and customStylesClass properties. - Adjusted markdown-editor component to utilize new configuration options and signals for state management. - Added public methods to markdown-editor for getting, setting, and clearing markdown content. - Enhanced internal configuration handling to merge defaults with user-defined settings. - Updated styles in markdown-editor component to reflect new default styling options.
… component enhancements
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the NgxMarkdownEditor with customizable styling capabilities and improved state management using Angular signals. The changes allow users to control whether default styles are applied and provide custom CSS classes for further customization.
Key changes:
- Added
useDefaultStylesandcustomStylesClassconfiguration options for customizable styling - Refactored internal state management to use signals (
isSyncing,internalConfig) - Added public API methods for programmatic control (
getMarkdown(),setMarkdown(),clear(),insertAtCursor())
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 21 comments.
Show a summary per file
| File | Description |
|---|---|
| config.interface.ts | Added new config properties for style customization |
| markdown-editor.component.ts | Refactored to use signals for state, added public API methods, implemented style class binding |
| markdown-editor.component.scss | Added conditional default styles and updated host selector |
| markdown-editor.component.html | Updated to use signal accessors for config |
| default-editor-config.ts | Added default values for new style configuration options |
| popover.component.html | Modernized template using @for instead of *ngFor |
| markdown-textarea.component.ts | Simplified readonly input signal declaration |
| preview.component.ts | Added style customization support and public scroll methods |
| preview-theme.scss | Expanded and organized default theme styles with comprehensive coverage |
| package.json | Version bump to 0.0.8 |
| CHANGELOG.md | Documented new features |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| [showPreview]="this.internalConfig.showPreview" | ||
| [syncScroll]="this.internalConfig.showToolbar" | ||
| [showPreview]="this.internalConfig().showPreview" | ||
| [syncScroll]="this.internalConfig().showToolbar" |
There was a problem hiding this comment.
The syncScroll input is incorrectly bound to showToolbar. This should be bound to this.internalConfig().syncScroll instead.
| [syncScroll]="this.internalConfig().showToolbar" | |
| [syncScroll]="this.internalConfig().syncScroll" |
| const mergedConfig: Required<MarkdownEditorConfig> = { | ||
| ...DEFAULT_EDITOR_CONFIG, | ||
| ...this.config(), | ||
| showPreview: this.showPreviewInput() ?? true, | ||
| syncScroll: this.syncScrollInput() ?? true, | ||
| showToolbar: this.showToolbarInput() ?? true, | ||
| ...this.config(), | ||
| }; |
There was a problem hiding this comment.
The merge order may cause user-provided config values to be overridden by input signals. User config should be spread after DEFAULT_EDITOR_CONFIG but before individual input signals to allow inputs to take precedence: { ...DEFAULT_EDITOR_CONFIG, ...this.config(), showPreview: this.showPreviewInput() ?? true, ... }
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| @@ -1,5 +1,15 @@ | |||
| # Changelog | |||
|
|
|||
| ## [0.1.2] - 2025-11-10 | |||
There was a problem hiding this comment.
Version mismatch: The CHANGELOG shows version 0.1.2, but package.json indicates version 0.0.8. These versions should be consistent.
| ## [0.1.2] - 2025-11-10 | |
| ## [0.0.8] - 2025-11-10 |
| color: var(--color-on-surface, #1c1b1f); | ||
| font-size: 1rem; | ||
| line-height: 1.6; | ||
| // Este archivo contiene los estilos por defecto del tema Markdown |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'This file contains the default Markdown theme styles'
| // Este archivo contiene los estilos por defecto del tema Markdown | |
| // This file contains the default Markdown theme styles |
| font-size: 1rem; | ||
| line-height: 1.6; | ||
| // Este archivo contiene los estilos por defecto del tema Markdown | ||
| // Los desarrolladores pueden NO importar este archivo y usar su propio tema |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'Developers can choose not to import this file and use their own theme'
| // Los desarrolladores pueden NO importar este archivo y usar su propio tema | |
| // Developers can choose not to import this file and use their own theme |
| margin-bottom: 0.5rem; | ||
| } | ||
|
|
||
| /* Abreviaciones */ |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'Abbreviations'
| /* Abreviaciones */ | |
| /* Abbreviations */ |
| border-bottom: none; | ||
| } | ||
|
|
||
| /* Marcado de texto */ |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'Text highlighting'
| /* Marcado de texto */ | |
| /* Text highlighting */ |
| border-radius: 2px; | ||
| } | ||
|
|
||
| /* Texto pequeño */ |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'Small text'
| /* Texto pequeño */ | |
| /* Small text */ |
| font-size: 0.875em; | ||
| } | ||
|
|
||
| /* Superíndice y subíndice */ |
There was a problem hiding this comment.
Comments should be in English for consistency with the rest of the codebase. Translation: 'Superscript and subscript'
| /* Superíndice y subíndice */ | |
| /* Superscript and subscript */ |
projects/ngx-markdown-editor/src/lib/components/preview/preview.component.ts
Show resolved
Hide resolved
|
@RockyCott I've opened a new pull request, #2, to work on those changes. Once the pull request is ready, I'll request review from you. |
