https://github.com/michalgrzegorczyk-dev/ngx-wysicat
A rich doc editor built with quilljs because plain text is for quitters
https://github.com/michalgrzegorczyk-dev/ngx-wysicat
angular editor ngx-quill quill quilljs rich-text-editor
Last synced: 6 days ago
JSON representation
A rich doc editor built with quilljs because plain text is for quitters
- Host: GitHub
- URL: https://github.com/michalgrzegorczyk-dev/ngx-wysicat
- Owner: michalgrzegorczyk-dev
- License: mit
- Created: 2025-06-07T12:43:43.000Z (12 days ago)
- Default Branch: master
- Last Pushed: 2025-06-10T00:18:19.000Z (10 days ago)
- Last Synced: 2025-06-10T05:08:55.758Z (10 days ago)
- Topics: angular, editor, ngx-quill, quill, quilljs, rich-text-editor
- Language: TypeScript
- Homepage: https://ngx-wysicat-demo.netlify.app
- Size: 8.13 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-wysicat - Build beautiful, structured documents with ease. `ngx-wysicat` combines block-based editing, advanced formatting, and a flexible plugin system—all powered by 🌎 [Quill.js](quilljs.com/). Perfect for collaborative apps, note-taking tools, or any project where content quality matters. (Table of contents / Third Party Components)
- awesome-angular - ngx-wysicat - Build beautiful, structured documents with ease. `ngx-wysicat` combines block-based editing, advanced formatting, and a flexible plugin system—all powered by [Quill.js](https://quilljs.com/). Perfect for collaborative apps, note-taking tools, or any project where content quality matters. (Table of contents / Third Party Components)
README
ngx-wysicat
A flexible, feature-rich document editor for Angular.
Build beautiful, structured documents with ease. ngx-wysicat combines block-based editing, advanced formatting, and a flexible plugin system—all powered by Quill.js. Perfect for collaborative apps, note-taking tools, or any project where content quality matters.
Designed for clarity, speed, and a seamless writing experience. Make your documents stand out and your users feel at home.
[//]: # ( 
)
> **!! Contributions are welcome!** If you find an issue or have an idea for improvement, please feel free to create a pull request or open an issue. We appreciate your help in making this project better!
## 🐾 Features
- **Block-Based Editing** - Create and manipulate content blocks with an intuitive interface
- **Document Header System** - Personalize with author information and metadata
- **Document Settings Panel** - Fine-tune your document with powerful configuration options
- **Floating Menu Options** - Quick access to document and block operations
- **Word Count & Reading Time** - Track document metrics automatically
- **Rich Text Formatting** - Express yourself with comprehensive styling options
### Plugin System
ngx-wysicat comes with a robust plugin architecture that includes:
- **Text Toolbar** - Comprehensive text formatting with color selection, headings, lists, links, and more
- **Block Creation** - Add various content blocks to your document
- **Block Menu** - Manage and navigate between blocks
- **Block Settings** - Configure individual block properties
- **Document Settings** - Control document-wide configurations
- **Drag and Drop** - Reorder blocks with intuitive drag and drop
- **Emojis** - Insert and manage emoji characters
- **Initial Template** - Starter templates for new documents
- **Words Counter** - Track word count and reading time statistics
## 🐱 Installation
```bash
pnpm add ngx-wysicat
```
## 🐈 Basic Usage
```typescript
import { provideNgxWysicatConfig } from 'ngx-wysicat';
export const appConfig: ApplicationConfig = {
providers: [
provideNgxWysicatConfig({
features: {
emojis: true,
blockDragAndDrop: true,
textToolbar: true,
wordsCounter: true
},
ui: {
theme: 'light',
fonts: {
sans: 'Arial',
serif: 'Times New Roman',
mono: 'Courier New'
}
}
})
],
};
```
```html
```
## 🐈⬛ Component API
### Core Components
- `WysicatRootComponent` - The main container that brings everything together
- `HeaderComponent` - Sleek document header with customizable sections
- `BlockMenuComponent` - Intuitive interface for block manipulation
### Plugin System
```typescript
@Injectable({ providedIn: 'root' })
export class MyCustomPlugin implements WysicatPlugin {
id = 'my-plugin';
name = 'My Plugin';
private quill: Quill | null = null;
private textChangeHandler: (() => void) | null = null;
initialize(quill: Quill): void {
this.quill = quill;
this.textChangeHandler = () => {
const text = this.quill?.getText() || '';
};
this.quill.on('text-change', this.textChangeHandler);
}
destroy(): void {
if (this.quill && this.textChangeHandler) {
this.quill.off('text-change', this.textChangeHandler);
}
this.quill = null;
this.textChangeHandler = null;
}
}
```
## 🐅 Development
Here are the main commands for working on this project:
```bash
# Start the demo app
pnpm start
# Build the demo app
pnpm build:demo
# Build the library
pnpm build:lib
# Cleanup, reset Nx, and reinstall dependencies
pnpm cleanup
# Check for circular dependencies
pnpm check-circular-deps
# Analyze the library
pnpm analyze:lib
# Analyze the demo bundle
pnpm analyze:demo
# Build demo with stats
pnpm build:analyze-demo
# Visualize build stats
pnpm display:analyze-demo
# Lint the codebase
pnpm lint