### Promise-based QuillBeforeRender Example

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

An example of implementing QuillBeforeRender using an async function that returns a Promise. This is useful for asynchronous setup tasks like loading libraries.

```typescript
// Promise-based
const beforeRender: QuillBeforeRender = async () => {
  const hljs = await import('highlight.js')
  window.hljs = hljs
}
```

--------------------------------

### Quill Toolbar Example

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Example of a QuillToolbarConfig, demonstrating how to define groups of toolbar buttons for bold, italic, headers, lists, links, and images.

```typescript
const toolbar: QuillToolbarConfig = [
  ['bold', 'italic', 'underline'],           // Group 1
  [{ header: [1, 2, 3, false] }],            // Group 2
  [{ list: 'ordered' }, { list: 'bullet' }], // Group 3
  ['link', 'image'],                         // Group 4
]
```

--------------------------------

### Observable-based QuillBeforeRender Example

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

An example of implementing QuillBeforeRender using a function that returns an Observable. This is suitable for reactive setup processes.

```typescript
// Observable-based
const beforeRender: QuillBeforeRender = () => {
  return from(import('highlight.js').then(m => {
    window.hljs = m.default
  }))
}
```

--------------------------------

### CustomOption Example

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Shows how to configure a custom font format, specifying the import path and an array of allowed font families.

```typescript
const customOption: CustomOption = {
  import: 'formats/font',
  whitelist: ['serif', 'monospace', 'sans-serif', 'courier']
}
```

--------------------------------

### CustomModule Examples

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Demonstrates registering a custom module directly with its class implementation and lazily loading a module using an Observable.

```typescript
// Direct implementation
const customModule1: CustomModule = {
  path: 'modules/blotFormatter',
  implementation: BlotFormatterClass
}

// Lazy-loaded with Observable
const customModule2: CustomModule = {
  path: 'modules/imageResize',
  implementation: defer(() => 
    import('quill-image-resize-module').then(m => m.default)
  )
}
```

--------------------------------

### Minimal ngx-quill Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Configure the theme for a minimal setup.

```typescript
QuillModule.forRoot({
  theme: 'snow'
})
```

--------------------------------

### Toolbar Dropdown Configuration Examples

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Illustrates how to configure specific dropdowns within the toolbar, such as color pickers, size selectors, header levels, fonts, and alignment options.

```typescript
// Color picker
{ color: [] }           // Use theme defaults
{ color: ['red', 'blue', 'yellow'] }  // Specific colors

// Size selector
{ size: ['small', false, 'large', 'huge'] }  // false is normal size

// Header levels
{ header: [1, 2, 3, 4, 5, 6, false] }

// Font
{ font: [] }            // Use theme defaults
{ font: ['serif', 'monospace'] }

// Alignment
{ align: [] }           // Use theme defaults
{ align: ['', 'center', 'right', 'justify'] }
```

--------------------------------

### QuillModule.forRoot() Usage Example

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Example of how to use QuillModule.forRoot() in an AppModule to configure Quill globally with theme and modules.

```typescript
@NgModule({
  imports: [
    QuillModule.forRoot({
      theme: 'snow',
      modules: { toolbar: [['bold', 'italic']] }
    })
  ]
})
export class AppModule { }
```

--------------------------------

### Range Examples

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Illustrates how to define a cursor position (length 0) and a text selection range.

```typescript
// Cursor at position 5
const cursorRange = { index: 5, length: 0 }

// Selection from position 5 to 10 (5 characters)
const selectRange = { index: 5, length: 5 }
```

--------------------------------

### Custom Toolbar Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/01-quill-editor-component.md

Example of implementing a custom toolbar for the quill-editor component.

```typescript
@Component({
  selector: 'app-custom-toolbar',
  template: `
    <quill-editor theme="snow">
      <div quill-editor-toolbar class="custom-toolbar">
        <button class="ql-bold" [title]="'Bold'"></button>
        <button class="ql-italic" [title]="'Italic'"></button>
        <select class="ql-header">
          <option selected></option>
          <option value="1">Header 1</option>
          <option value="2">Header 2</option>
        </select>
      </div>
    </quill-editor>
  `,
  styles: [
    `.custom-toolbar {
      background: #f0f0f0;
      border: 1px solid #ccc;
    }
  `]
})
export class CustomToolbarComponent { }
```

--------------------------------

### Quill CSS Setup

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Include these CSS imports for the 'snow' or 'bubble' themes to ensure proper styling of Quill components.

```css
/* For 'snow' theme */
@import '~quill/dist/quill.snow.css';

/* For 'bubble' theme */
@import '~quill/dist/quill.bubble.css';
```

--------------------------------

### Global Configuration with provideQuillConfig()

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

For standalone applications, use `provideQuillConfig()` within the `providers` array during application bootstrapping to set global ngx-quill configurations. This example demonstrates configuring the toolbar and theme.

```typescript
import { provideQuillConfig } from 'ngx-quill/config'

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      modules: {
        toolbar: [['bold', 'italic']]
      },
      theme: 'bubble'
    })
  ]
})
```

--------------------------------

### Basic Quill Editor Field Setup

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/02-quill-editor-field-component.md

Demonstrates the basic integration of the Quill Editor Field Component using Angular signals and forms. Ensure '@angular/forms' is imported.

```typescript
import { Component } from '@angular/core'
import { form, validate } from '@angular/forms'

@Component({
  selector: 'app-signal-editor',
  template: `
    <quill-editor-field [formField]="editorField.editor" />
    <p>Content: {{ editorField.editor() }}</p>
  `
})
export class SignalEditorComponent {
  editorField = signal({ editor: '' })
  
  form = form(this.editorField)
}
```

--------------------------------

### Prepare Editor Before Rendering

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Internal method to prepare the editor by registering custom modules and executing before-render hooks. Use this when you need to perform asynchronous setup before the Quill editor is fully initialized.

```typescript
// Called internally by quill-editor before rendering
const beforeRenderHook = async () => {
  // Load CSS or perform other setup
  const { default: css } = await import('!!raw-loader!custom-styles.css')
  const style = document.createElement('style')
  style.innerHTML = css
  document.head.appendChild(style)
}

this.quillService.beforeRender(
  Quill,
  [{ path: 'modules/custom', implementation: CustomModule }],
  beforeRenderHook
).subscribe(Quill => {
  // Editor is ready to initialize
})
```

--------------------------------

### Example Validation Error Object

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/09-form-integration.md

An example of a validation error object that might be returned when multiple validation rules are violated. It shows the format for reporting minLength and maxLength errors.

```typescript
// Multiple validation errors
{
  minLengthError: { given: 5, minLength: 10 },
  maxLengthError: { given: 600, maxLength: 500 }
}
```

--------------------------------

### Basic Template-Driven Form Integration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/01-quill-editor-component.md

Example of integrating the quill-editor into a template-driven Angular form using ngModel.

```typescript
@Component({
  selector: 'app-editor',
  template: `
    <quill-editor 
      [(ngModel)]="content"
      theme="snow"
      [modules]="modules"
    ></quill-editor>
    <p>{{ content }}</p>
  `
})
export class EditorComponent {
  content = '<p>Hello</p>';
  modules = {
    toolbar: [['bold', 'italic', 'underline']]
  };
}
```

--------------------------------

### Get Quill Constructor

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Subscribe to this Observable to get the Quill constructor once it's loaded and configured. It emits only once and is cached for subsequent subscriptions. Useful for initializing editors or accessing Quill APIs.

```typescript
import { QuillService } from 'ngx-quill'

@Injectable()
export class MyService {
  constructor(private quillService: QuillService) {}

  initQuill() {
    this.quillService.getQuill().subscribe(Quill => {
      console.log('Quill loaded:', Quill)
      const editor = new Quill('#editor', { theme: 'snow' })
    })
  }
}
```

--------------------------------

### Injecting QUILL_CONFIG_TOKEN

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Example of how to inject the QUILL_CONFIG_TOKEN into an Angular service to access the global Quill configuration.

```typescript
import { QUILL_CONFIG_TOKEN } from 'ngx-quill/config'
import { inject } from '@angular/core'

@Injectable()
export class MyService {
  config = inject(QUILL_CONFIG_TOKEN)
}
```

--------------------------------

### Presenting Quill Content as Text

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Use QuillViewComponent to render content in a read-only, toolbar-less editor instance. This example shows how to display content formatted as plain text.

```HTML
<quill-view [content]="content" format="text" theme="snow"></quill-view>
```

--------------------------------

### Example Usage of Validation Errors

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Demonstrates how to iterate over validation errors returned by the editor's validate method and log their kind and message.

```typescript
const errors = editor.validate({ minLength: 10 })
if (errors) {
  errors.forEach(error => {
    console.log(`Kind: ${error.kind}, Message: ${error.message}`)
  })
}
```

--------------------------------

### Dynamic Class Management

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Shows how to dynamically manage CSS classes applied to the `quill-editor` component. This example uses Angular signals to toggle a 'highlight' class based on user interaction.

```typescript
@Component({
  template: `
    <quill-editor 
      #editor
      [classes]="dynamicClasses()"
    ></quill-editor>
    <button (click)="toggleHighlight()">Highlight</button>
  `
})
export class DynamicClassComponent {
  editorRef = viewChild<QuillEditorComponent>('editor')
  isHighlighted = signal(false)

  dynamicClasses() {
    return this.isHighlighted() ? 'highlight' : ''
  }

  toggleHighlight() {
    this.isHighlighted.update(v => !v)
  }
}
```

--------------------------------

### Custom Value Getter Implementation

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Example of implementing a custom `valueGetter` function for `quill-editor`. This allows for custom logic to retrieve and format the editor's content, including adding metadata.

```typescript
@Component({
  template: `
    <quill-editor 
      [valueGetter]="customGetter"
    ></quill-editor>
  `
})
export class CustomGetterComponent {
  customGetter = (quillEditor: QuillType, forceFormat?: QuillFormat) => {
    // Custom logic to get value
    const content = quillEditor.getContents()
    return {
      ...content,
      metadata: { saved: new Date() }
    }
  }
}
```

--------------------------------

### Complete Form with Quill Editor Field

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/02-quill-editor-field-component.md

A comprehensive example of a form that includes a text input and the Quill Editor Field Component, demonstrating validation and submission. The 'modules' input allows customization of the toolbar.

```typescript
@Component({
  selector: 'app-complete-form',
  template: `
    <form>
      <div>
        <label>Article Title</label>
        <input type="text" [formControl]="form.title" />
      </div>
      
      <div>
        <label>Content</label>
        <quill-editor-field 
          #editorField
          [formField]="form.content"
          theme="snow"
          [modules]="modules"
        />
      </div>

      <div *ngIf="form.content.invalid() && form.content.dirty()">
        <div *ngFor="let error of form.content.errors() || []">
          {{ error.message }}
        </div>
      </div>

      <button 
        (click)="submit()" 
        [disabled]="form.invalid()">
        Submit
      </button>
    </form>
  `
})
export class CompleteFormComponent {
  formData = signal({ title: '', content: '' })
  
  form = form(this.formData, (p) => {
    validate(p.title, () => 
      !p.title() ? { required: true } : null
    )
    validate(p.content, () => {
      const editor = this.editorRef()
      return editor?.validate({ required: true, minLength: 20 }) || null
    })
  })

  editorRef = viewChild<QuillEditorFieldComponent>('editorField')

  modules = {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'header': 1 }, { 'header': 2 }],
      ['link', 'image']
    ]
  }

  submit() {
    if (this.form.valid()) {
      console.log('Form data:', this.formData())
    }
  }
}
```

--------------------------------

### Import Configuration Modules and Defaults

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Import configuration modules, providers, and default module configurations.

```typescript
import { QuillConfigModule, provideQuillConfig } from 'ngx-quill/config'
import { defaultModules } from 'ngx-quill/config'
```

--------------------------------

### Minimal Toolbar Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Sets up a basic toolbar with only 'bold', 'italic', 'link', and 'image' buttons.

```typescript
modules: {
  toolbar: [['bold', 'italic'], ['link', 'image']]
}
```

--------------------------------

### File Organization Structure

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/README.md

Overview of the project's directory structure for ngx-quill documentation.

```bash
/output/
  ├── README.md (this file)
  ├── INDEX.md (navigation hub)
  ├── 00-overview.md (quick start)
  ├── 01-quill-editor-component.md
  ├── 02-quill-editor-field-component.md
  ├── 03-quill-view-components.md
  ├── 04-quill-service.md
  ├── 05-configuration.md
  ├── 06-types.md
  ├── 07-module-exports.md
  ├── 08-helpers-and-utilities.md
  └── 09-form-integration.md
```

--------------------------------

### Global Configuration with provideQuillConfig (Standalone)

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Provide global Quill configuration using `provideQuillConfig` when bootstrapping an Angular application with standalone features. This offers a functional approach to configuration.

```typescript
import { provideQuillConfig } from 'ngx-quill/config';

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      modules: {
        syntax: true,
        toolbar: [...] 
      }
    })
  ]
})
```

--------------------------------

### Import Core Components and Services

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Import the main editor and view components, along with the QuillModule and QuillService.

```typescript
import { QuillEditorComponent } from 'ngx-quill'
import { QuillEditorFieldComponent } from 'ngx-quill'
import { QuillViewComponent } from 'ngx-quill'
import { QuillViewHTMLComponent } from 'ngx-quill'
import { QuillModule } from 'ngx-quill'
import { QuillService } from 'ngx-quill'
```

--------------------------------

### Configuring Quill with provideQuillConfig

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Illustrates how to use the `provideQuillConfig` function within the `providers` array when bootstrapping a standalone Angular application.

```typescript
import { provideQuillConfig } from 'ngx-quill/config'

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      theme: 'bubble',
      modules: { toolbar: [['bold', 'italic']] }
    })
  ]
})
```

--------------------------------

### Get Editor Content as Text

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Retrieves the editor's content formatted as plain text. Use this for simple text extraction without any formatting.

```typescript
// Text format
const text = editor.getText()
// Returns: 'Hello world\n'
```

--------------------------------

### Get Editor Content as HTML

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Retrieves the editor's content formatted as HTML. Use this when you need the rich text representation of the editor's content.

```typescript
// HTML format
const html = editor.getSemanticHTML()
// Returns: '<p>Hello <strong>world</strong></p>'
```

--------------------------------

### Extend Default Toolbar Modules

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Shows how to import default modules and extend the toolbar configuration with custom buttons.

```typescript
import { defaultModules } from 'ngx-quill'

const quillConfig: QuillConfig = {
  modules: {
    toolbar: [
      ...defaultModules.toolbar,
      ['code']  // Add custom button
    ]
  }
}
```

--------------------------------

### Get Editor Content as JSON String

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Retrieves the editor's content as a JSON stringified Delta object. Use this when you need to serialize the content for storage or transmission.

```typescript
// JSON format
const json = JSON.stringify(editor.getContents())
// Returns: '{"ops":[{"insert":"Hello "}]}'
```

--------------------------------

### Initialize Quill Editor in Component

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Demonstrates how a component injects and uses the QuillService to initialize a Quill editor instance. It chains observables to load Quill, apply before-render logic, and then create the editor.

```typescript
@Component({...})
export class QuillEditorComponent implements OnInit {
  private service = inject(QuillService)

  constructor() {
    this.service.getQuill().pipe(
      mergeMap((Quill) => this.service.beforeRender(Quill, customModules, beforeRender))
    ).subscribe(Quill => {
      // Initialize editor with Quill
      this.quillEditor = new Quill(element, options)
    })
  }
}
```

--------------------------------

### Get Editor Content as Delta Object

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Retrieves the editor's content as a Delta object, which represents the document's changes. This is useful for programmatic manipulation of content.

```typescript
// Object format
const delta = editor.getContents()
// Returns: { ops: [{ insert: 'Hello ' }, { insert: 'world', attributes: { bold: true } }] }
```

--------------------------------

### Get Editor Instance with onEditorCreated

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Use the onEditorCreated output to obtain the editor instance once the component is stable and all listeners are bound. This allows direct interaction with the Quill editor.

```typescript
editor // Quill
```

--------------------------------

### Import Utility Functions

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Shows how to import the main utility function `getFormat` and type-guard helpers like `Range`, `ContentChange`, and `SelectionChange` from ngx-quill.

```typescript
// Main exports
import { getFormat } from 'ngx-quill'

// Type-guard helpers (implicitly available through types)
import type { Range, ContentChange, SelectionChange } from 'ngx-quill'
```

--------------------------------

### Import Enums and Tokens

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Import enums for validation kinds and the configuration token.

```typescript
import { ValidationKind } from 'ngx-quill'
import { QUILL_CONFIG_TOKEN } from 'ngx-quill/config'
```

--------------------------------

### QuillBeforeRender Type Definition

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Defines a type for functions that execute before the Quill editor renders. These functions can return either a Promise or an Observable, allowing for asynchronous setup operations.

```typescript
type QuillBeforeRender = (() => Promise<any>) | (() => Observable<any>)
```

--------------------------------

### Custom Async Validator for Uniqueness Check

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/09-form-integration.md

Implement an asynchronous validator to check for uniqueness of editor content, for example, by making an API call. This is useful for real-time validation feedback.

```typescript
const saveCheckValidator: AsyncValidatorFn = (control: AbstractControl): Observable<ValidationErrors | null> => {
  return control.valueChanges.pipe(
    debounceTime(500),
    switchMap(value => 
      this.contentService.checkIfUnique(value)
    ),
    map(isUnique => isUnique ? null : { notUnique: true })
  )
}

const form = new FormGroup({
  content: new FormControl('', [Validators.required], [saveCheckValidator])
})
```

--------------------------------

### Import Configuration Types

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Import types for Quill configuration, modules, and formatting options.

```typescript
import type { QuillConfig } from 'ngx-quill/config'
import type { QuillModules } from 'ngx-quill/config'
import type { QuillFormat } from 'ngx-quill/config'
```

--------------------------------

### Complete Import Paths for Quill and Quill-Delta Types

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/06-types.md

Shows how to import Quill and Quill-Delta library types directly for use in your project.

```typescript
// Quill library types (from quill package)
import type QuillType from 'quill'
import type DeltaType from 'quill-delta'
```

--------------------------------

### Form Submission with ngx-quill

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/09-form-integration.md

Integrate ngx-quill into an Angular form for submission. The example shows how to handle form validation and submission logic, marking fields as touched if the form is invalid.

```typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <quill-editor formControlName="content"></quill-editor>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class SubmissionComponent {
  form = new FormGroup({
    content: new FormControl('', Validators.required)
  })

  onSubmit() {
    if (this.form.valid) {
      // Form is valid - save data
      const formData = this.form.getRawValue()
      console.log('Submitting:', formData)
    } else {
      // Mark all fields as touched to show validation
      Object.keys(this.form.controls).forEach(key => {
        this.form.get(key)?.markAsTouched()
      })
    }
  }
}
```

--------------------------------

### Access QuillService in Custom Code

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Inject QuillService into custom services to programmatically interact with the Quill editor. This example shows how to create a new editor instance with custom modules.

```typescript
@Injectable()
export class ContentService {
  constructor(private quillService: QuillService) {}

  createEditorInstance(element: HTMLElement) {
    return this.quillService.getQuill().pipe(
      tap(Quill => {
        new Quill(element, {
          theme: 'snow',
          modules: this.quillService.config.modules || defaultModules
        })
      })
    )
  }
}
```

--------------------------------

### Basic HTML Display with QuillViewHTMLComponent

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Demonstrates basic usage of QuillViewHTMLComponent to display simple HTML content with the 'snow' theme.

```typescript
@Component({
  selector: 'app-view-html',
  template: `
    <quill-view-html 
      [content]="htmlContent"
      theme="snow"
    ></quill-view-html>
  `
})
export class ViewHtmlComponent {
  htmlContent = '<p><strong>Bold text</strong> and <em>italic</em>.</p>'
}
```

--------------------------------

### Rendering Content with QuillViewHTMLComponent

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Demonstrates how to use the Quill editor and QuillViewHTMLComponent to display editable and preview content. Ensure content is stored in a format suitable for display.

```typescript
@Component({
  selector: 'app-editor-viewer',
  template: `
    <div>
      <h2>Edit</h2>
      <quill-editor 
        [(ngModel)]="content"
        format="html"
      ></quill-editor>
      
      <h2>Preview</h2>
      <quill-view-html 
        [content]="content"
        theme="snow"
      ></quill-view-html>
    </div>
  `
})
export class EditorViewerComponent {
  content = '<p>Initial content</p>'
}
```

--------------------------------

### Import Quill View Components

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Import QuillViewComponent and QuillViewHTMLComponent from the ngx-quill library.

```typescript
import { QuillViewComponent, QuillViewHTMLComponent } from 'ngx-quill'
```

--------------------------------

### Configuring Quill with QuillConfigModule

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Shows how to import and use `QuillConfigModule.forRoot` to provide Quill configuration in an Angular application's `AppModule`.

```typescript
import { QuillConfigModule } from 'ngx-quill/config'

@NgModule({
  imports: [
    QuillConfigModule.forRoot({
      modules: { toolbar: [...] }
    })
  ]
})
export class AppModule { }
```

--------------------------------

### getFormat()

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Resolves the effective content format with a fallback chain, prioritizing component-level format, then global configuration format, and defaulting to 'html'.

```APIDOC
## getFormat()

### Description
Resolves the effective content format with a fallback chain. It prioritizes the `format` parameter, then `configFormat`, and defaults to 'html' if neither is provided.

### Signature
```typescript
export const getFormat = (format?: QuillFormat, configFormat?: QuillFormat): QuillFormat
```

### Parameters
#### Arguments
- **format** (`QuillFormat | undefined`) - Component-level format input (highest priority).
- **configFormat** (`QuillFormat | undefined`) - Global configuration format (medium priority).

### Returns
- `QuillFormat` - The resolved format, defaulting to 'html' if neither input is provided.

### Resolution Order
1. `format` if provided
2. `configFormat` if `format` is undefined
3. `'html'` as default

### Examples
```typescript
getFormat('json', 'text')        // Returns 'json'
getFormat(undefined, 'text')     // Returns 'text'
getFormat(undefined, undefined)  // Returns 'html'
getFormat(undefined)             // Returns 'html'
```
```

--------------------------------

### QuillService Class Definition

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Defines the QuillService, an injectable service for managing Quill loading, custom module registration, and configuration. It provides methods to get the Quill instance and handle pre-rendering.

```typescript
@Injectable({
  providedIn: 'root',
})
export class QuillService {
  readonly config: QuillConfig
  
  getQuill(): Observable<any>
  beforeRender(Quill: any, customModules?: CustomModule[], beforeRender?: QuillBeforeRender): Observable<any>
}
```

--------------------------------

### Cache Quill Observable with shareReplay

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Utilizes RxJS `shareReplay` to efficiently cache the main Quill Observable. This ensures that the Quill instance and its setup are shared among all subscribers, and the last emission is retained.

```typescript
private quill$: Observable<any> = defer(async () => {
  // Load and setup
}).pipe(
  shareReplay({
    bufferSize: 1,    // Cache the last emission
    refCount: false   // Keep alive even with no subscribers
  })
)
```

--------------------------------

### Importing Configuration Exports

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Imports various configuration-related types, functions, and defaults from the 'ngx-quill/config' entry point.

```typescript
import {
  // Defaults
  defaultModules,
  // Module
  QuillConfigModule,
  // Provider function
  provideQuillConfig,
  // Types & Interfaces
  QuillConfig,
  QuillModules,
  QuillToolbarConfig,
  QuillFormat,
  QuillBeforeRender,
  CustomOption,
  CustomModule,
  QUILL_CONFIG_TOKEN
} from 'ngx-quill/config'
```

--------------------------------

### beforeRender(Quill, customModules, beforeRender)

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Internal method that runs before each editor is rendered. Orchestrates custom module registration and user-provided `beforeRender` hooks.

```APIDOC
## beforeRender(Quill, customModules, beforeRender)

### Description
Internal method that runs before each editor is rendered. Orchestrates custom module registration and user-provided `beforeRender` hooks.

### Method
Observable

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **Quill** (`any`) - Required - The Quill constructor obtained from `getQuill()`.
- **customModules** (`CustomModule[] | undefined`) - Optional - Component-level custom modules to register for this specific editor.
- **beforeRender** (`QuillBeforeRender | undefined`) - Optional - Component-level `beforeRender` hook to execute before rendering.

### Returns
`Observable<any>` - Observable that emits the Quill constructor after all preparations are complete

### Behavior
- Registers component-level custom modules (in addition to global ones)
- Executes both global and component-level `beforeRender` hooks
- Uses `forkJoin` to wait for all async operations
- Returns the Quill constructor after all preparations

### Example
```typescript
// Called internally by quill-editor before rendering
const beforeRenderHook = async () => {
  // Load CSS or perform other setup
  const { default: css } = await import('!!raw-loader!custom-styles.css')
  const style = document.createElement('style')
  style.innerHTML = css
  document.head.appendChild(style)
}

this.quillService.beforeRender(
  Quill,
  [{ path: 'modules/custom', implementation: CustomModule }],
  beforeRenderHook
).subscribe(Quill => {
  // Editor is ready to initialize
})
```
```

--------------------------------

### Component Input Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/00-overview.md

Set configuration options directly on the quill-editor component. This has the highest priority.

```html
<quill-editor format="json" theme="bubble"></quill-editor>
```

--------------------------------

### Get Form Control State with ngx-quill

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/09-form-integration.md

Access various states of the quill editor's form control, such as valid, invalid, dirty, pristine, touched, and untouched. You can also check for specific errors.

```typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({...})
export class FormStateComponent {
  form = new FormGroup({
    content: new FormControl('')
  })

  get contentControl() {
    return this.form.get('content')!
  }

  // Check various states
  isValid = () => this.contentControl.valid
  isInvalid = () => this.contentControl.invalid
  isDirty = () => this.contentControl.dirty
  isPristine = () => this.contentControl.pristine
  isTouched = () => this.contentControl.touched
  isUntouched = () => this.contentControl.untouched
  hasError = (errorKey: string) => this.contentControl.hasError(errorKey)
  getError = (errorKey: string) => this.contentControl.getError(errorKey)
}
```

--------------------------------

### Range Interface Definition

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/01-quill-editor-component.md

Defines the structure for representing a text range within the editor content, used for selection change events. The index indicates the start position and length specifies the number of characters selected.

```typescript
interface Range {
  index: number    // Character position in content
  length: number   // Length of selected text (0 if only cursor position)
}
```

--------------------------------

### Full-Featured ngx-quill Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Configure various options including modules, toolbar, placeholder, and theme for a rich editing experience.

```typescript
const quillConfig: QuillConfig = {
  bounds: '#editor-bounds',
  debug: 'log',
  format: 'object',
  formats: ['bold', 'italic', 'underline', 'list', 'header', 'link'],
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'header': [1, 2, 3, false] }],
      ['list'],
      ['link', 'image'],
      ['clean']
    ],
    history: {
      delay: 1000,
      maxStack: 50,
      userOnly: true
    }
  },
  placeholder: 'Write something amazing...',
  readOnly: false,
  theme: 'snow',
  trackChanges: 'user',
  defaultEmptyValue: null,
  sanitize: true
}

QuillModule.forRoot(quillConfig)
```

--------------------------------

### Global Configuration with QuillConfigModule

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Configure default modules and Quill options globally by importing `QuillConfigModule`. This is useful for setting up common configurations without repeating them.

```typescript
import { QuillConfigModule } from 'ngx-quill/config';

@NgModule({
  imports: [
    ...,

    QuillConfigModule.forRoot({
      modules: {
        syntax: true,
        toolbar: [...] 
      }
    })
  ],
  ...
})
class AppModule {}
```

--------------------------------

### provideQuillConfig

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

A standalone provider function for Quill configuration, designed for use with `bootstrapApplication()` in standalone Angular applications.

```APIDOC
## provideQuillConfig

### Description
A standalone provider function for Quill configuration, designed for use with `bootstrapApplication()` in standalone Angular applications.

### Parameters
#### Request Body
- **config** (QuillConfig) - Required - The configuration object for Quill.

### Returns
`EnvironmentProviders`

### Example Usage
```typescript
import { provideQuillConfig } from 'ngx-quill/config'

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      theme: 'bubble',
      modules: { toolbar: [['bold', 'italic']] }
    })
  ]
})
```
```

--------------------------------

### QuillService

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Injectable service managing Quill loading, custom module registration, and configuration.

```APIDOC
## QuillService

### Description
Injectable service managing Quill loading, custom module registration, and configuration.

### Methods
#### `getQuill(): Observable<any>`
Returns an observable that emits the Quill instance when it is ready.

#### `beforeRender(Quill: any, customModules?: CustomModule[], beforeRender?: QuillBeforeRender): Observable<any>`
Allows pre-rendering logic before the Quill editor is fully initialized.

### Properties
- **config** (QuillConfig) - The configuration object for the Quill editor.

### Source
`projects/ngx-quill/src/lib/quill.service.ts`

### See Also
[QuillService Documentation](./04-quill-service.md)
```

--------------------------------

### HTML Display with Bubble Theme

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Illustrates using QuillViewHTMLComponent with the 'bubble' theme for a different visual style.

```typescript
@Component({
  selector: 'app-view-html-bubble',
  template: `
    <quill-view-html 
      [content]="htmlContent"
      theme="bubble"
    ></quill-view-html>
  `
})
export class ViewHtmlBubbleComponent {
  htmlContent = '<p>Content with bubble theme</p>'
}
```

--------------------------------

### Resolve Effective Content Format

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Use getFormat to determine the content format, prioritizing component-level input, then global configuration, and defaulting to 'html'.

```typescript
export const getFormat = (format?: QuillFormat, configFormat?: QuillFormat): QuillFormat
```

```typescript
getFormat('json', 'text')        // Returns 'json'
getFormat(undefined, 'text')     // Returns 'text'
getFormat(undefined, undefined)  // Returns 'html'
getFormat(undefined)             // Returns 'html'
```

```typescript
// In component initialization
const format = getFormat(this.format(), this.service.config.format)
if (format === 'text') {
  this.quillEditor.setText(this.content, 'silent')
} else {
  const valueSetter = this.valueSetter()
  const newValue = valueSetter(this.quillEditor, this.content)
  this.quillEditor.setContents(newValue, 'silent')
}
```

--------------------------------

### Custom Toolbar with Projection Slots

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Create a custom toolbar using projection slots like `quill-editor-toolbar`, `above-quill-editor-toolbar`, and `below-quill-editor-toolbar`. It is recommended to use native EventListeners instead of Angular output listeners.

```html
<quill-editor>
  <div above-quill-editor-toolbar>
    above
  </div>
  <div quill-editor-toolbar>
    <span class="ql-formats">
      <button class="ql-bold" [title]="'Bold'"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>
  </div>
  <div below-quill-editor-toolbar>
    below
  </div>
</quill-editor>
```

--------------------------------

### Event Handling for Content and Editor Creation

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/01-quill-editor-component.md

Shows how to bind to the onContentChanged and onEditorCreated events of the quill-editor.

```typescript
@Component({
  selector: 'app-event-editor',
  template: `
    <quill-editor 
      [(ngModel)]="content"
      (onContentChanged)="onContentChanged($event)"
      (onEditorCreated)="onEditorCreated($event)"
    ></quill-editor>
  `
})
export class EventEditorComponent {
  content = '';
  editor!: QuillType;

  onEditorCreated(editor: QuillType) {
    this.editor = editor;
  }

  onContentChanged(event: ContentChange) {
    console.log('HTML:', event.html);
    console.log('Text:', event.text);
    console.log('Source:', event.source); // 'user', 'api', 'silent'
  }
}
```

--------------------------------

### Use beforeRender Hook for Dynamic Loading

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

The beforeRender hook allows for dynamic loading of resources, such as syntax highlighting libraries, before the Quill editor is rendered. This is useful for on-demand initialization.

```typescript
const config: QuillConfig = {
  beforeRender: async () => {
    // Dynamically load syntax highlighting
    const { default: hljs } = await import('highlight.js')
    window.hljs = hljs
  }
}

@NgModule({
  imports: [
    QuillModule.forRoot(config)
  ]
})
export class AppModule { }
```

--------------------------------

### eventCallbackFormats()

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Internal method to prepare event callback data in multiple formats. It offers flexibility in choosing the output format based on the `onlyFormatEventData` configuration, which can help optimize performance for large content.

```APIDOC
## eventCallbackFormats()

### Description
Internal method that prepares event callback data in multiple formats.

### Signature
```typescript
private eventCallbackFormats()
```

### Returns
Object with format options:
```typescript
{
  format: QuillFormat
  onlyFormat: boolean
  noFormat: boolean
  text: string | null
  json: string | null
  html: string | null
  object: DeltaType | null
}
```

### Behavior
- If `onlyFormatEventData === true`: Returns only the format matching editor format
- If `onlyFormatEventData === 'none'`: Returns empty format values to minimize event size
- Otherwise: Returns all format values for flexibility

### Performance note
Use `onlyFormatEventData` to improve performance with large content (>2-3 MiB Deltas) by avoiding expensive `getSemanticHTML()` calls.
```

--------------------------------

### Markdown Features Used

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/README.md

Demonstrates the markdown features utilized in the documentation for clarity and structure.

```markdown
- **Headings** - Hierarchical structure (H1-H4)
- **Code Blocks** - TypeScript syntax highlighting
- **Tables** - Parameters, properties, comparisons
- **Lists** - Bullet and numbered lists
- **Emphasis** - Bold and italic for clarity
- **Links** - Cross-document and section references
- **Blockquotes** - Notes and callouts
- **Fenced Code** - With language specification
```

--------------------------------

### Import QuillService

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/04-quill-service.md

Import the QuillService from the ngx-quill library to use it in your application.

```typescript
import { QuillService } from 'ngx-quill'
```

--------------------------------

### Import Quill Theme CSS

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Import the desired Quill theme CSS (bubble or snow) into your main style file. This ensures the editor's appearance is correctly applied.

```typescript
@import '~quill/dist/quill.bubble.css';
// or
@import '~quill/dist/quill.snow.css';
```

--------------------------------

### defaultModules

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Provides the default toolbar configuration for all ngx-quill editors. This configuration can be extended or overridden to customize the toolbar.

```APIDOC
## defaultModules

### Description
Provides the default toolbar configuration for all ngx-quill editors. This configuration can be extended or overridden to customize the toolbar.

### Type
```typescript
{
  toolbar: (string | string[] | Array<string | object>)[];
}
```

### Example Usage
```typescript
import { defaultModules } from 'ngx-quill/config'

const myModules = {
  toolbar: [
    ...defaultModules.toolbar,
    ['custom-button']
  ]
}
```
```

--------------------------------

### Custom Value Setter Implementation

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/08-helpers-and-utilities.md

Demonstrates how to implement a custom `valueSetter` for `quill-editor`. This enables custom logic for processing incoming values before they are set to the editor, handling different formats like Delta or HTML strings.

```typescript
@Component({
  template: `
    <quill-editor 
      [valueSetter]="customSetter"
    ></quill-editor>
  `
})
export class CustomSetterComponent {
  customSetter = (quillEditor: QuillType, value: any) => {
    // Custom logic to set value
    if (value.ops) {
      return value  // Already a Delta
    } else if (typeof value === 'string') {
      return quillEditor.clipboard.convert({ html: value })
    }
    return value
  }
}
```

--------------------------------

### Import QuillEditorFieldComponent and ValidationKind

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/02-quill-editor-field-component.md

Import the necessary components and types from the ngx-quill library.

```typescript
import { QuillEditorFieldComponent, ValidationKind } from 'ngx-quill'
```

--------------------------------

### Standalone Provider Function: provideQuillConfig

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Defines the `provideQuillConfig` standalone function, used for providing Quill configuration with `bootstrapApplication` in standalone Angular applications.

```typescript
export const provideQuillConfig = (config: QuillConfig): EnvironmentProviders => ...
```

--------------------------------

### Basic Content Display with QuillViewComponent

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/03-quill-view-components.md

Display basic HTML content using the quill-view component. Ensure the content is provided to the 'content' input and the format is set to 'html'.

```typescript
@Component({
  selector: 'app-view-content',
  template: `
    <quill-view 
      [content]="articleContent"
      format="html"
      theme="snow"
    ></quill-view>
  `
})
export class ViewContentComponent {
  articleContent = '<p>This is a saved article.</p>'
}
```

--------------------------------

### Global Configuration with QuillModule.forRoot()

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Configure ngx-quill globally for NgModule-based applications by passing a configuration object to `QuillModule.forRoot()`. This sets up default modules, theme, and debug level for all Quill instances.

```typescript
import { QuillModule } from 'ngx-quill'
import { QuillConfig } from 'ngx-quill/config'

const quillConfig: QuillConfig = {
  modules: {
    syntax: true,
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ header: 1 }, { header: 2 }],
      ['link', 'image']
    ]
  },
  theme: 'snow',
  debug: 'warn'
}

@NgModule({
  imports: [
    QuillModule.forRoot(quillConfig)
  ]
})
export class AppModule { }
```

--------------------------------

### Register Custom Font Formats

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Configure custom font formats globally by providing an array of objects, each specifying an import path and a whitelist of font names.

```typescript
customOptions: [{
  import: 'formats/font',
  whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
}]
```

--------------------------------

### focus

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/02-quill-editor-field-component.md

Sets the keyboard focus to the editor's content area, making it ready for user input.

```APIDOC
### `focus(): void`

Sets focus to the editor content area.

#### Example

```typescript
editor.focus(); // Editor receives focus
```
```

--------------------------------

### QuillModule.forRoot

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Angular NgModule providing quill components and services. Returns module with providers for global Quill configuration.

```APIDOC
## QuillModule.forRoot(config?: QuillConfig)

### Description
Angular NgModule providing quill components and services. Returns module with providers for global Quill configuration.

### Method
`forRoot(config?: QuillConfig)`

### Parameters
#### Optional Parameters
- **config** (QuillConfig) - Optional configuration object for Quill.

### Returns
`ModuleWithProviders<QuillModule>`

### Usage
```typescript
@NgModule({
  imports: [
    QuillModule.forRoot({
      theme: 'snow',
      modules: { toolbar: [['bold', 'italic']] }
    })
  ]
})
export class AppModule { }
```

### Source
`projects/ngx-quill/src/lib/quill.module.ts`
```

--------------------------------

### QuillConfigModule.forRoot

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/07-module-exports.md

Provides an alternative NgModule for configuring Quill, suitable for code-splitting as it avoids bundling the full ngx-quill library into the vendor bundle.

```APIDOC
## QuillConfigModule.forRoot

### Description
Provides an alternative NgModule for configuring Quill, suitable for code-splitting as it avoids bundling the full ngx-quill library into the vendor bundle.

### Method
`forRoot(config: QuillConfig)`

### Parameters
#### Request Body
- **config** (QuillConfig) - Required - The configuration object for Quill.

### Returns
`ModuleWithProviders<QuillConfigModule>`

### Example Usage
```typescript
import { QuillConfigModule } from 'ngx-quill/config'

@NgModule({
  imports: [
    QuillConfigModule.forRoot({
      modules: { toolbar: [...] }
    })
  ]
})
export class AppModule { }
```
```

--------------------------------

### History Module Configuration

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Customizes the history module with options for debounce delay, maximum undo/redo stack size, and user-only tracking.

```typescript
modules: {
  history: {
    delay: 1000,    // Debounce time in ms
    maxStack: 50,   // Maximum undo/redo stack size
    userOnly: true  // Only track user changes
  }
}
```

--------------------------------

### ngx-quill Configuration with Custom Modules

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Integrate custom modules like BlotFormatter and configure custom font formats.

```typescript
import BlotFormatter from 'quill-blot-formatter'

const quillConfig: QuillConfig = {
  modules: {
    toolbar: [['bold', 'italic'], ['link', 'image']],
    blotFormatter: {} // Custom module options
  },
  customModules: [
    {
      path: 'modules/blotFormatter',
      implementation: BlotFormatter
    }
  ],
  customOptions: [
    {
      import: 'formats/font',
      whitelist: ['serif', 'monospace', 'sans-serif']
    }
  ]
}

QuillModule.forRoot(quillConfig)
```

--------------------------------

### Syntax Highlighting Module

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/_autodocs/05-configuration.md

Enables the syntax highlighting module for code blocks within the editor.

```typescript
// With syntax module
modules: {
  syntax: true
}

// Or with custom hljs instance
import hljs from 'highlight.js'

modules: {
  syntax: { hljs }
}
```

--------------------------------

### Basic QuillEditorFieldComponent Usage in HTML

Source: https://github.com/killercodemonkey/ngx-quill/blob/master/README.md

Demonstrates the basic HTML structure for using the QuillEditorFieldComponent with an Angular form field. Ensure the form field is correctly bound.

```html
<quill-editor-field [formField]="form.editor" />
```