pp-editor/README.md

## Overview

# PP Editor - Angular Rich Text Editor Standalone Component

## Overview

PP Editor is an Angular standalone component that provides a rich text editing experience using Quill.js. It supports multiple content blocks, code blocks, iframe embedding, a floating action menu, and advanced customization.

## Supported Angular Versions

PP Editor requires Angular **v14.1.0** or later, as it relies on Angular's standalone component APIs introduced in Angular 14.1.0. It is compatible with all subsequent Angular versions that support standalone components, including Angular 15, 16, 17, and newer.

## Features

- **Multiple Content Blocks**: Manage several rich text blocks within a single editor.
- **Bubble Toolbar**: Contextual formatting toolbar appears when selecting text.
- **Special Content Types**:
  - Code blocks with syntax highlighting
  - Embedded iframes
  - Custom SVG dividers
- **Keyboard Shortcuts**: Triple Enter to create a new content block.
- **SSR Compatible**: Uses Angular's `isPlatformBrowser` for server-side rendering support.
- **Customizable**: Extendable with Quill modules, toolbar, themes, and more.
- **Read-Only Mode**: Option to make the editor read-only.

## Installation

1. Install dependencies:

   ```bash
   npm install ngx-quill @angular/forms
   ```

2. Import in styles.scss

   ```
   @import "quill/dist/quill.bubble.css";
   @import "quill/dist/quill.snow.css";
   @import "quill/dist/quill.core.css";
   ```

3. Import the standalone component and required modules:

   ```typescript
   import { PpEditor } from "./path-to-pp-editor";
   import { bootstrapApplication } from "@angular/platform-browser";

   bootstrapApplication(AppComponent, {
     providers: [],
     imports: [
       PpEditor,
       // other standalone components or modules if needed
     ],
   });
   ```

## Usage

```html
<pp-editor></pp-editor>
```

## API

### Inputs

- `placeholder: string` - Placeholder text for the editor (`'Type here...'` by default)
- `theme: 'bubble' | 'snow'` - Quill theme (`'snow'` by default)
- `readOnly: boolean` - Set to `true` to make the editor read-only
- `toolbar: any[]` - Quill toolbar configuration (default includes headers, formatting, lists, links, images, code blocks, blockquotes, colors, fonts, and alignment)
- `history: object` - Quill history module config (default: `{ delay: 2000, maxStack: 500, userOnly: true }`)
- `clipboard: object` - Quill clipboard module config (default: `{ matchVisual: false }`)
- `keyboard: object` - Quill keyboard bindings (default: `{}`)

### Methods

- `addCodeBlock()` - Adds a new code block to the editor.
- `addDivider()` - Adds a custom SVG divider to the editor.
- `addIframe()` - Prompts for a URL and adds an iframe.
- `removeContent(index: number)` - Removes the content block at the specified index.
- `toggleMenu()` - Shows/hides the floating action menu.

### Events

- `editorCreated(quill: any)` - Called when a Quill editor instance is created.

### Styling

Default styles are included in `pp-editor.css`. You can override these styles in your application CSS.

## Customization

You can customize the Quill configuration by modifying the `toolbar`, `history`, `clipboard`, and `keyboard` properties:

```typescript
this.toolbar = [
  // Your custom toolbar configuration
];
this.history = { delay: 1000, maxStack: 100, userOnly: false };
this.clipboard = { matchVisual: true };
this.keyboard = {
  bindings: {
    /* custom bindings */
  },
};
```

## Keyboard Shortcuts

- **Triple Enter**: Press Enter three times quickly to create a new content block.

## Browser Compatibility

The component is compatible with modern browsers and supports SSR via Angular's `isPlatformBrowser`.

## License

MIT

## Support

- ✨ **Feature requests**: [Open a discussion](https://github.com/ayush-parida/pp-libraries/discussions/categories/pp-editor).
- 🐛 **Bugs**: [Open a discussion](https://github.com/ayush-parida/pp-libraries/discussions/categories/pp-editor).
- 🔒 **Security issues**: Email `ayushparida999@gmail.com`.