UX Quill

https://github.com/ehyiah/ux-quill
Admin
A Symfony UX bundle that integrates the Quill JS WYSIWYG editor into Symfony projects, offering easy...
Tokens:60,626
Snippets:481
Trust Score:7.1
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Require the ux-quill bundle via Composer

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/installation.md

Run this command to install the ehyiah/ux-quill package. If you are using the AssetMapper Component, no further steps are needed.

```bash
composer require ehyiah/ux-quill
```

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

### Install JavaScript dependencies with npm (Webpack Encore)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/installation.md

Alternative to Yarn for installing JavaScript dependencies when using Webpack Encore. Run 'npm install --force' followed by 'npm run watch'.

```bash
npm install --force
npm run watch
```

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

### Install JavaScript dependencies with Yarn (Webpack Encore)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/installation.md

Use these commands when using Webpack Encore (not needed with AssetMapper). Run 'yarn install --force' followed by 'yarn watch' to build the assets.

```bash
yarn install --force
yarn watch
```

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

### Configure VideoSelectionModule with custom options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/video-selection.md

Manually configure the VideoSelectionModule with custom options such as borderColor, buttonBeforeLabel, and alignLabels. Usually auto-imported, but this shows explicit setup.

```php
use Ehyiah\QuillJsBundle\DTO\Modules\VideoSelectionModule;

// ...

'modules' => [
    new VideoSelectionModule([
        'borderColor' => '#ff0000',
        'buttonBeforeLabel' => 'Insert Before',
        'alignLabels' => [
            'center' => 'Centrer la vidéo',
        ],
    ]),
],
```

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

### Full form example with quill_options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/quill-options.md

Complete Symfony form builder example configuring a QuillType field with multiple toolbar groups, including bold, italic, headers, and an image gallery field.

```php
use Ehyiah\QuillJsBundle\Form\QuillType;
use Ehyiah\QuillJsBundle\DTO\QuillGroup;
use Ehyiah\QuillJsBundle\DTO\Fields\InlineField\BoldField;
use Ehyiah\QuillJsBundle\DTO\Fields\InlineField\ItalicField;
use Ehyiah\QuillJsBundle\DTO\Fields\BlockField\HeaderField;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('myField', QuillType::class, [
            'quill_options' => [
                QuillGroup::build(
                    new BoldField(),
                    new ItalicField(),
                ),
                QuillGroup::build(
                    new HeaderField(HeaderField::HEADER_OPTION_1),
                    new HeaderField(HeaderField::HEADER_OPTION_2),
                ),
                // Add all built-in available fields at once (includes Table, Emoji, etc.)
                QuillGroup::build(
                    new ImageGalleryField(),
                ),
            ]
        ])
    ;
}
```

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

### Install and watch with npm (Webpack Encore)

Source: https://github.com/ehyiah/ux-quill/blob/main/README.md

Alternative to Yarn for Webpack Encore users. Run these commands if you prefer npm over Yarn.

```sh
    npm install --force
    npm run watch
```

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

### GET /your-search-endpoint?term=my-search-query

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

When a user types in the search bar, the gallery waits for 300ms (debounce) before sending a request to `searchEndpoint`. The search term is passed as a query parameter named `term`.

```APIDOC
## GET /your-search-endpoint?term=my-search-query

### Description
When a user types in the search bar, the gallery waits for 300ms (debounce) before sending a request to `searchEndpoint`. The search term is passed as a query parameter named `term`.

### Method
GET

### Endpoint
`/your-search-endpoint`

### Parameters
#### Query Parameters
- **term** (string) - Required - The search term entered by the user.

### Request Example
`GET /your-search-endpoint?term=my-search-query`

### Response
#### Success Response (200)
The response must follow the same structure as the `listEndpoint` and `searchEndpoint` response format.

#### Response Example
```json
{
   "data": [
      {
         "url": "https://example.com/images/1.jpg",
         "thumbnail": "https://example.com/thumbnails/1.jpg",
         "title": "Beautiful Landscape"
      }
   ],
   "links": {
      "next": null,
      "prev": null
   }
}
```
```

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

### CSS Customization for .ql-map

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/map.md

Customize the map container using the `.ql-map` class. The example adds border radius, border, margin, and a hover border color.

```css
.ql-map {
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    margin: 16px 0;
}

.ql-map:hover {
    border-color: #007bff;
}
```

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

### Install and watch with Yarn (Webpack Encore)

Source: https://github.com/ehyiah/ux-quill/blob/main/README.md

Run these commands if you are using Webpack Encore (not needed with AssetMapper). The --force flag forces reinstallation of dependencies.

```sh
    yarn install --force
    yarn watch
```

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

### Install QuillJs Bundle with Composer

Source: https://github.com/ehyiah/ux-quill/blob/main/README.md

Run this command to require the ehyiah/ux-quill bundle. If you use the AssetMapper component, no further steps are needed.

```sh
  composer require ehyiah/ux-quill
```

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

### Multiple triggers with unique names (PHP)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Pass multiple MentionModule instances to support different triggers. Each instance must have a unique name starting with 'mention-'.

```php
'modules' => [
    new MentionModule(name: 'mention-users', options: [
        'trigger' => '@',
        'remote_url' => '/api/users/search?q={query}',
    ]),
    new MentionModule(name: 'mention-tags', options: [
        'trigger' => '#',
        'data' => [
            ['id' => 'tech', 'value' => 'technology'],
            ['id' => 'news', 'value' => 'news'],
        ],
    ]),
],
```

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

### Multiple MentionModule Instances

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Allows multiple triggers (e.g., `@` for users and `#` for tags) by passing multiple MentionModule instances. Each instance must have a unique `name` starting with `mention-`.

```APIDOC
## Multiple MentionModule Instances

### Description
Allows multiple triggers (e.g., `@` for users and `#` for tags) by passing multiple MentionModule instances. Each instance must have a unique `name` starting with `mention-`.

### Method
Constructor

### Endpoint
`new MentionModule(name: string, options: array)`

### Parameters
#### Name
- **name** (string) - Required - Unique name for the module instance, must start with `mention-`.

#### Options
- **trigger** (string) - Optional - The character that triggers the suggestion list. Default: `'@'`.
- **data** (array) - Optional - A static list of items. Each item must be an object: `{'id': 1, 'value': 'Name'}`. Default: `[]`.
- **remote_url** (string) - Optional - URL for AJAX search. Use `{query}` as a placeholder for the user input. Default: `null`.
- **min_chars** (int) - Optional - Minimum characters to type after the trigger before showing suggestions. Default: `1`.
- **max_results** (int) - Optional - Maximum number of results displayed in the suggestion list. Default: `10`.

### Request Example
```php
new MentionModule(name: 'mention-users', options: [
    'trigger' => '@',
    'remote_url' => '/api/users/search?q={query}',
]),
new MentionModule(name: 'mention-tags', options: [
    'trigger' => '#',
    'data' => [
        ['id' => 'tech', 'value' => 'technology'],
        ['id' => 'news', 'value' => 'news'],
    ],
])
```

### Response
No return value; the module is added to the editor's modules configuration.
```

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

### Create quill-admin.js entrypoint

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/easyadmin.md

Optional first step to create a JavaScript entrypoint file in the assets directory if you don't already have one to reuse in admin. It starts the Stimulus application by importing './bootstrap'.

```javascript
// start the Stimulus application
import './bootstrap';
```

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

### Listening to Map Events

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/map.md

Listen for custom events dispatched by the `quill-maps` controller on `.ql-map` elements. The example logs provider and marker details on initialization and errors.

```javascript
document.addEventListener('ux-quill:map:initialized', (event) => {
    console.log(`Map initialized (${event.detail.options.provider})`, event.target);
    console.log('Marker:', event.detail.options.marker);
});

document.addEventListener('ux-quill:map:error', (event) => {
    console.error('Map failed:', event.detail.options.provider, event.detail.message);
});
```

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

### Replace Placeholders with Actual Values

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/placeholder.md

Processes the editor content by replacing placeholder tags like {{firstName}} with actual user data before displaying or sending. This example shows a typical str_replace usage for personalization.

```php
$content = $form->get('emailTemplate')->getData();
$processedContent = str_replace(
    ['{{firstName}}', '{{lastName}}', '{{email}}'],
    [$user->getFirstName(), $user->getLastName(), $user->getEmail()],
    $content
);
```

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

### Configure VideoField and FormulaField in Quill options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/fields/media.md

Use this PHP configuration to enable the video and formula fields in a Quill editor. The FormulaField requires KaTeX to be installed. The example shows both fields added to the 'quill_options' array using QuillGroup::build().

```php
use Ehyiah\QuillJsBundle\DTO\QuillGroup;
use Ehyiah\QuillJsBundle\DTO\Fields\InlineField\VideoField;
use Ehyiah\QuillJsBundle\DTO\Fields\InlineField\FormulaField;

'quill_options' => [
    QuillGroup::build(
        new VideoField(),
    ),
    QuillGroup::build(
        new FormulaField(),
    ),
],
```

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

### Configure QuillType with a toolbar preset

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Use QuillGroup::buildForNewsletter() to quickly configure the Quill editor with a preset toolbar. The preset is passed via the 'quill_options' option.

```php
use Ehyiah\QuillJsBundle\DTO\QuillGroup;
use Ehyiah\QuillJsBundle\Form\QuillType;

$builder->add('content', QuillType::class, [
    'quill_options' => [
        QuillGroup::buildForNewsletter(),
    ],
]);
```

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

### Default class-based styling with Quill CSS

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Wrap content in .ql-snow and .ql-editor and load quill.snow.css when using the default 'class' style. Required for proper formatting.

```twig
{# 1. Ensure Quill CSS is loaded on this page, exemple #}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />

{# 2. Wrap the content #}
<div class="ql-snow">
    <div class="ql-editor">
        {{ myField|raw }}
    </div>
</div>
```

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

### SlashModule usage in modules config

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules.md

Adds a block selection menu triggered by typing '/' at the start of a line or after a space. No options are currently available.

```php
'modules' => [
    new SlashModule(),
],
```

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

### EmojiModule usage example

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/emoji.md

Configure the Emoji module in quill_options. The toolbar must include the 'emoji' button, and the module is added via 'new EmojiModule()'. This module is auto-imported if EmojiField is present, otherwise it must be added manually.

```php
'quill_options' => [
    'toolbar' => [
        ['emoji'],
        // ...
    ],
],
'modules' => [
    new EmojiModule(),
],
```

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

### Minimal GridBordersModule usage

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/grid-borders.md

Starts with the grid hidden and the toggle button available in the toolbar. Use this minimal configuration when you want users to manually enable the grid.

```php
new GridBordersModule(),
```

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

### Default MapModule (OpenStreetMap)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/map.md

Basic setup for the MapModule using the default OpenStreetMap provider. Configure the modules array in the Quill editor with a new MapModule instance.

```php
use Ehyiah\QuillJsBundle\DTO\Modules\MapModule;

'modules' => [
    new MapModule(),
],
```

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

### Minimal AssetMapper template with QuillContent

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

A minimal Twig template using AssetMapper to render Quill content. It includes the required stylesheets via quill_content_styles() and displays the content with the QuillContent component.

```twig
{# templates/my_template.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>

        {% block stylesheets %}
            {{ quill_content_styles() }}
        {% endblock %}
    </head>

    <body>
        {% block body %}
            <twig:QuillContent value="{{ post.content }}" />
        {% endblock %}
    </body>
</html>
```

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

### Require Quill snow CSS via importmap

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Use this command to make the Quill snow CSS asset available through AssetMapper. This is needed for the quill_content_styles() helper to resolve the asset.

```bash
php bin/console importmap:require quill/dist/quill.snow.css
```

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

### Render QuillContent and load quill-maps scripts

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Call quill_content_scripts() once on pages whose content contains maps to initialize interactive .ql-map elements. It is idempotent per request and not needed on the editor page or pages without maps. Requires the importmap (AssetMapper) or the quill-maps controller in assets/controllers.json (Webpack Encore).

```twig
<twig:QuillContent :value="content" />

{{ quill_content_scripts() }}
```

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

### Import Quill CSS via Webpack Encore

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Import the required stylesheets explicitly in your CSS entry point when using Webpack Encore or your own bundler. The helper does nothing here; load only the layers you need.

```css
@import 'quill/dist/quill.snow.css';

@import '@ehyiah/ux-quill/dist/styles/quill-content.css';

@import '@ehyiah/ux-quill/dist/styles/quill-content-theme.css';
```

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

### PageBreakModule Configuration Example

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules.md

Add page break support with a custom label. The module displays a visual indicator in the editor and applies 'page-break-after: always' when printing. Default label is 'Page Break'.

```php
'modules' => [
    new PageBreakModule([
        'label' => 'Saut de page',
    ]),
],
```

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

### Layout template with quill_content_styles() in stylesheets block

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Place the helper in the <head> of your layout inside the stylesheets block so child templates can override. The helper is idempotent per request, so calling it from both base and child templates is safe.

```twig
{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>

        {% block stylesheets %}
            {{ quill_content_styles() }}
        {% endblock %}

        {% block javascripts %}
            {% block importmap %}{{ importmap('app') }}{% endblock %}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>
```

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

### Listen to quill:gallery:image-inserted event

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

Example of listening to the 'quill:gallery:image-inserted' CustomEvent dispatched on the Quill container. The event detail contains the original image data object. Use this to hook into the image selection lifecycle.

```javascript
document.querySelector('.ql-container').addEventListener('quill:gallery:image-inserted', (e) => {
    console.log('Image selected:', e.detail.image);
});
```

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

### Minimal usage of NodeMoverModule

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/node-mover.md

Use this minimal configuration to enable the NodeMoverModule with default settings. The module is auto-loaded by default, so this is sufficient unless you need to customize options.

```php
new NodeMoverModule(),
```

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

### Configure NodeMoverModule with options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/node-mover.md

Use this configuration to enable the NodeMoverModule with custom settings. The 'active' option controls immediate activation, 'borderColor' sets the selection overlay border color (null means no border), 'dropIndicatorColor' sets the drop indicator line color, and 'duplicate' adds a duplicate button to the floating toolbar.

```php
use Ehyiah\QuillJsBundle\DTO\Modules\NodeMoverModule;
use Ehyiah\QuillJsBundle\Form\QuillType;

$builder->add('content', QuillType::class, [
    'modules' => [
        new NodeMoverModule([
            'active' => true,
            'borderColor' => '#007bff',
            'dropIndicatorColor' => '#ff0000',
            'duplicate' => true,
        ]),
    ],
]);
```

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

### Basic usage with static data (PHP)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Configures the MentionModule with a static data list. The trigger defaults to '@' and the data array must contain objects with id and value keys.

```php
'modules' => [
    new MentionModule(options: [
        'trigger' => '@',
        'data' => [
            ['id' => 1, 'value' => 'Matthieu'],
            ['id' => 2, 'value' => 'Gemini'],
            ['id' => 3, 'value' => 'Symfony'],
        ],
    ]),
],
```

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

### Customize ResizeModule options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/resize.md

Pass the ResizeModule with custom options in the modules array. The options array is passed to the quill-resize-image library.

```php
'modules' => [
    new ResizeModule(options: [
        // custom options
    ]),
],
```

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

### MentionModule Constructor

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Creates a MentionModule instance to enable mention suggestions in the editor. Configure via options such as trigger character, static data, or remote URL.

```APIDOC
## MentionModule Constructor

### Description
Creates a MentionModule instance to enable mention suggestions in the editor. Configure via options such as trigger character, static data, or remote URL.

### Method
Constructor

### Endpoint
`new MentionModule(options: array)`

### Parameters
#### Options
- **trigger** (string) - Optional - The character that triggers the suggestion list. Default: `'@'`.
- **data** (array) - Optional - A static list of items. Each item must be an object: `{'id': 1, 'value': 'Name'}`. Default: `[]`.
- **remote_url** (string) - Optional - URL for AJAX search. Use `{query}` as a placeholder for the user input. Default: `null`.
- **min_chars** (int) - Optional - Minimum characters to type after the trigger before showing suggestions. Default: `1`.
- **max_results** (int) - Optional - Maximum number of results displayed in the suggestion list. Default: `10`.

### Request Example
```php
new MentionModule(options: [
    'trigger' => '@',
    'data' => [
        ['id' => 1, 'value' => 'Matthieu'],
        ['id' => 2, 'value' => 'Gemini'],
        ['id' => 3, 'value' => 'Symfony'],
    ],
])
```

### Response
No return value; the module is added to the editor's modules configuration.
```

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

### Return JsonResponse with nested file URL

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/image-upload.md

When the upload endpoint returns a JsonResponse, use json_response_file_path to point to the URL inside the JSON. For this example, set json_response_file_path to 'file.url'.

```php
return new JsonResponse([
    'file' => [
        'url' => 'https://my-website/public/assets/my-uploaded-image.jpg',
    ]
]);
```

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

### Symfony controller for gallery list and search endpoints

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

Implements the listing endpoint with pagination and a search endpoint that delegates to the list method. The list returns JSON with image data and next/prev links; search currently returns mock data.

```php
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

#[Route('/api/media/gallery', name: 'api_media_')]
class GalleryController extends AbstractController
{
    #[Route('/list', name: 'api_media_list')]
    public function list(Request $request): JsonResponse
    {
        $page = (int) $request->get('page', 1);
        $perPage = 10;
        $total = 30; // Total images in your database

        $images = [];
        for ($i = 0; $i < $perPage; $i++) {
            $id = (($page - 1) * $perPage) + $i + 1;
            if ($id > $total) break;
            
            $images[] = [
                'url' => sprintf('https://picsum.photos/id/%d/400/400', 10 + $id),
                'thumbnail' => sprintf('https://picsum.photos/id/%d/200/200', 10 + $id),
                'title' => "Image #$id",
            ];
        }

        $baseUrl = '/api/media/gallery/list';
        $hasNext = ($page * $perPage) < $total;
        $hasPrev = $page > 1;

        return new JsonResponse([
            'data' => $images,
            'links' => [
                'next' => $hasNext ? "$baseUrl?page=" . ($page + 1) : null,
                'prev' => $hasPrev ? "$baseUrl?page=" . ($page - 1) : null,
            ],
        ]);
    }

    #[Route('/search', name: 'api_media_search')]
    public function search(Request $request): JsonResponse
    {
        $term = $request->get('term', '');
        $page = (int) $request->get('page', 1);
        
        // In a real application, you would filter your query with $term
        // and return the appropriate paginated results.
        
        // Example with mock data:
        return $this->list($request); 
    }
}
```

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

### Disable ImageSelectionModule and enable ResizeModule

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-selection.md

Use the legacy ResizeModule instead of the new ImageSelectionModule. Disable the new module by passing ['options' => false] and enable the old one with new ResizeModule().

```php
use Ehyiah\QuillJsBundle\DTO\Modules\ImageSelectionModule;
use Ehyiah\QuillJsBundle\DTO\Modules\ResizeModule;

// ...

'modules' => [
    new ImageSelectionModule(['options' => false]), // Disable the new module
    new ResizeModule(), // Enable the old one
],
```

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

### Advanced usage with remote search (PHP)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Configures the MentionModule with a remote URL for AJAX search. The {query} placeholder is replaced by user input; min_chars and max_results control suggestion behavior.

```php
'modules' => [
    new MentionModule(options: [
        'trigger' => '#',
        'remote_url' => '/api/tags/search?q={query}',
        'min_chars' => 2,
        'max_results' => 5,
    ]),
],
```

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

### JSON response format for listEndpoint and searchEndpoint

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

The listEndpoint and searchEndpoint must return this JSON structure. The data array contains image objects with url (required), thumbnail (optional, used in gallery grid if present), and title (optional, used as alt text). The links object provides pagination URLs, where next and prev are full URLs including current search terms.

```json
{
   "data": [
      {
         "url": "https://example.com/images/1.jpg",
         "thumbnail": "https://example.com/thumbnails/1.jpg",
         "title": "Beautiful Landscape"
      },
      {
         "url": "https://example.com/images/2.jpg",
         "title": "Portrait without thumbnail"
      }
   ],
   "links": {
      "next": "/api/media/list?page=2",
      "prev": null
   }
}
```

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

### Customize mention color with CSS

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Styles the inserted mention element. The .ql-mention class targets the mention span inside the editor.

```css
.ql-editor .ql-mention {
    background-color: #fce4ec;
    color: #c2185b;
}
```

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

### Use legacy ResizeModule with ImageSelectionModule disabled

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/resize.md

To use the legacy resize module instead of the new ImageSelectionModule, disable the new module by passing ['options' => false] and enable the legacy one with new ResizeModule().

```php
use Ehyiah\QuillJsBundle\DTO\Modules\ImageSelectionModule;
use Ehyiah\QuillJsBundle\DTO\Modules\ResizeModule;

'modules' => [
    new ImageSelectionModule(['options' => false]), // Disable the new module
    new ResizeModule(), // Enable the legacy one
],
```

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

### Configure upload handler with JWT security

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/image-upload.md

Example configuration adding JWT security to the upload handler. The jwt_token is passed without the 'Bearer' prefix; it is added automatically in the authorization header.

```php
'quill_extra_options' => [
    'upload_handler' => [
        'type' => 'json',
        'upload_endpoint' => '/my-custom-endpoint/upload',
        'json_response_file_path' => 'file.url',
        'security' => [
            'type' => 'jwt',
            'jwt_token' => 'my_jwt_token',
        ],
    ]
],
```

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

### Headers side by side

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/quill-options.md

Creates a single toolbar group with two header options displayed side by side.

```php
QuillGroup::build(
    new HeaderField(HeaderField::HEADER_OPTION_1),
    new HeaderField(HeaderField::HEADER_OPTION_2),
)
```

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

### Configure Quill modules in Symfony form

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/index.md

Shows how to add custom modules to a QuillType form field via the 'modules' option. Includes STTModule and TableModule with options like 'menus', 'toolbarTable', and 'language'.

```php
use Ehyiah\QuillJsBundle\Form\QuillType;
use Ehyiah\QuillJsBundle\DTO\Modules\STTModule;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('content', QuillType::class, [
            'quill_options' => [
                //
            ],
            'modules' => [
                new SyntaxModules(),
                new TableModule(
                    'menus' => ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
                    'toolbarTable' => 'true', // must be set to true to show the table toolbar options in TableModule
                    'language' => 'fr_FR',
                ),
            ],
            //
        ])
    ;
}
```

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

### listEndpoint and searchEndpoint Response Format

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

Defines the JSON structure that your listEndpoint and searchEndpoint must return for the Image Gallery module to display images and handle pagination.

```APIDOC
## Response Format

### Description
Your `listEndpoint` and `searchEndpoint` must return a JSON response with the following structure to provide image data and pagination links.

### Response Body
- **data** (array) - Required - List of image objects.
  - **url** (string) - Required - The full URL of the image to insert into Quill.
  - **thumbnail** (string) - Optional - The URL shown in the gallery grid. If omitted, `url` is used.
  - **title** (string) - Optional - The `alt` text for the image.
- **links** (object) - Required - Pagination links.
  - **next** (string|null) - Required - Full URL (including current search terms) for the next page, or `null` if none.
  - **prev** (string|null) - Required - Full URL (including current search terms) for the previous page, or `null` if none.

### Response Example
```json
{
   "data": [
      {
         "url": "https://example.com/images/1.jpg",
         "thumbnail": "https://example.com/thumbnails/1.jpg",
         "title": "Beautiful Landscape"
      },
      {
         "url": "https://example.com/images/2.jpg",
         "title": "Portrait without thumbnail"
      }
   ],
   "links": {
      "next": "/api/media/list?page=2",
      "prev": null
   }
}
```
```

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

### Configure SmartLinksModule with custom linkRegex

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/smart-links.md

Manually add SmartLinksModule to the modules option. The linkRegex option defaults to '/https?:\/\/[^\s]+/' and detects URLs as the user types, converting them to clickable links after pressing Space, Enter, or Tab.

```php
'modules' => [
    new SmartLinksModule(options: [
        'linkRegex' => '/https?:\/\/[^\s]+/',
    ]),
],
```

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

### Replace toolbar icons with custom SVGs via quill_extra_options

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/extra-options.md

Configures the 'custom_icons' option to replace default toolbar icons with your own SVG markup. The example maps the 'bold' and 'italic' actions to custom SVG strings.

```php
'quill_extra_options' => [
    'custom_icons' => [
        'bold' => '<svg ...>...</svg>',
        'italic' => '<svg ...>...</svg>',
    ]
],
```

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

### quill:gallery:upload-success Event

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

Fired after a successful upload. Contains `{ response, file }` in `detail`.

```APIDOC
## quill:gallery:upload-success Event

### Description
Fired after a successful upload. Contains `{ response, file }` in `detail`.

### Event Name
`quill:gallery:upload-success`

### Detail
- **response** (object) - The response from the upload request.
- **file** (object) - The uploaded file.

### Example
```javascript
document.querySelector('.ql-container').addEventListener('quill:gallery:upload-success', (e) => {
    console.log('Upload response:', e.detail.response);
    console.log('Uploaded file:', e.detail.file);
});
```
```

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

### Configure CounterModule with custom labels

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/counter.md

Adds the CounterModule to the modules option to display word and character counts. The words and characters options default to true, and labels can be customized as shown. Counts update automatically as the user types.

```php
'modules' => [
    new CounterModule(options: [
        'words' => true,
        'words_label' => 'Mots : ',
        'characters' => true,
        'characters_label' => 'Caractères : ',
    ]),
],
```

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

### Configure upload handler with JSON type and response path

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/image-upload.md

Example configuration for the 'quill_extra_options' upload_handler. Sets type to 'json', specifies the upload endpoint, and points json_response_file_path to the JSON key containing the uploaded image URL.

```php
'quill_extra_options' => [
    'upload_handler' => [
        'type' => 'json',
        'upload_endpoint' => '/my-custom-endpoint/upload',
        'json_response_file_path' => 'file.url'
    ]
],
```

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

### Inline styling output

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

When the field is configured with 'style' => 'inline', Quill writes styles directly into HTML tags. This simple wrapper works without Quill CSS, but complex elements like videos, code blocks, and formulas still need additional CSS.

```twig
<div>{{ myField|raw }}</div>
```

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

### Configure InlineToolbarModule buttons

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/inline-toolbar.md

Passes the 'buttons' option via the 'options' array to limit the toolbar to only bold and italic. Available button names are 'bold', 'italic', 'underline', and 'strike'.

```php
new InlineToolbarModule(
    options: ['buttons' => ['bold', 'italic']] // Only bold and italic
);
```

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

### Headers + Bold/Italic separated

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/configuration/quill-options.md

Creates two separate toolbar groups: one for headers and one for bold/italic, separated by a space in the toolbar.

```php
QuillGroup::build(
    new HeaderField(HeaderField::HEADER_OPTION_1),
    new HeaderField(HeaderField::HEADER_OPTION_2),
)
QuillGroup::build(
    new BoldField(),
    new ItalicField(),
)
```

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

### Twig component usage for Quill content display

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Use the <twig:QuillContent> component to render Quill content. It handles HTML wrappers and modes automatically, but does not load CSS. The component always wraps content with the 'ql-snow' class. Extra attributes are passed to the wrapper.

```twig
{# Default mode (class) #}
<twig:QuillContent value="{{ post.content }}" />

{# Inline mode #}
<twig:QuillContent value="{{ post.content }}" style="inline" />

{# Custom HTML tag and extra classes (extra attributes are passed through to the wrapper) #}
<twig:QuillContent tag="article" value="{{ post.content }}" class="my-custom-class" />
```

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

### Configure STTModule in Symfony Quill form

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/stt.md

Adds the Speech-to-Text module to a Quill editor form using the STTModule class. Requires manual inclusion in the 'modules' option and a browser supporting the Web Speech API. The example sets French recognition, continuous mode, visualizer colors, and custom labels.

```php
use Ehyiah\QuillJsBundle\Form\QuillType;
use Ehyiah\QuillJsBundle\DTO\Modules\STTModule;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('content', QuillType::class, [
            'quill_options' => [
                QuillGroup::buildWithAllFields()
            ],
            'modules' => [
                new STTModule(
                    language: 'fr-FR',           // French language recognition
                    continuous: true,             // Auto-restart after pauses
                    visualizer: true,             // Show audio visualizer
                    waveformColor: '#4285f4',     // Blue gradient color
                    histogramColor: '#25D366',    // Green accent color
                    debug: false,                 // Disable debug logs
                    buttonTitleStart: 'Start voice dictation',
                    buttonTitleStop: 'Stop voice dictation',
                    titleInactive: 'Voice recognition inactive',
                    titleStarting: 'Initializing...',
                    titleActive: 'Listening to your voice...',
                ),
            ],
        ])
    ;
}
```

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

### Twig helper to emit Quill CSS link tags

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/usage.md

Call quill_content_styles() in your layout head to emit <link> tags for Quill CSS. It is idempotent per request. Options: theme ('snow' or 'bubble') and cosmetic (boolean). The helper resolves URLs via AssetMapper; if an asset cannot be resolved, no <link> is emitted silently.

```twig
{# in your <head> — minimum: snow theme + structural rules #}
{{ quill_content_styles() }}

{# bubble theme instead of snow #}
{{ quill_content_styles('bubble') }}

{# also load the opt-in cosmetic stylesheet for mentions #}
{{ quill_content_styles('snow', true) }}
```

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

### Custom Stimulus controller to add Keyboard and Clipboard features

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/advanced/extend-stimulus-controller.md

Create a new Stimulus controller that listens for the 'quill:connect' event to access the Quill instance. Use it to add custom keyboard bindings or clipboard matchers without rewriting the entire controller. The event detail contains the Quill instance.

```javascript
// quill_extended_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('quill:connect', this._onConnect);
    }

    disconnect() {
        this.element.removeEventListener('quill:connect', this._onConnect);
    }

    _onConnect(event) {
        // The quill instance has been created
        console.log(event.detail); // You can access the quill instance using the event detail
        
        let quill = event.detail;
        // e.g : if you want to add a new keyboard binding
        quill.keyboard.addBinding({
            key: 'b',
            shortKey: true
        }, function(range, context) {
            this.quill.formatText(range, 'bold', true);
        });
          
        // e.g if you want to add a custom clipboard
        quill.clipboard.addMatcher(Node.TEXT_NODE, (node, delta) => {
            return new Delta().insert(node.data);
        });
    }
}
```

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

### quill:gallery:open Event

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/image-gallery.md

Fired when the modal opens. Allows you to hook into the gallery lifecycle.

```APIDOC
## quill:gallery:open Event

### Description
Fired when the modal opens. Allows you to hook into the gallery lifecycle.

### Event Name
`quill:gallery:open`

### Detail
None

### Example
```javascript
document.querySelector('.ql-container').addEventListener('quill:gallery:open', (e) => {
    // Handle modal open
});
```
```

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

### Manual rendering with default class styling

Source: https://github.com/ehyiah/ux-quill/blob/main/README.md

If you use the default class styling option, encapsulate the content in divs with the ql-snow and ql-editor classes so the Quill stylesheet can be applied.

```html
    <div class="ql-snow">
        <div class="ql-editor">
            {{ myField|raw }}
        </div>
    </div>
```

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

### Manual rendering with inline styling

Source: https://github.com/ehyiah/ux-quill/blob/main/README.md

If you use the inline styling option, simply wrap the field in a div and output it raw.

```html
    <div>{{ myField|raw }}</div>
```

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

### MapModule with Custom Tile Provider

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/map.md

Specify a custom tile URL using the 'tileUrl' option. The URL uses placeholders {s}, {z}, {x}, {y} for subdomain, zoom, x, and y coordinates.

```php
new MapModule(options: [
    'tileUrl' => 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
]),
```

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

### Configure List, Indent, Align, and Direction Fields in PHP

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/fields/lists-alignment.md

Shows how to build Quill toolbar groups for lists, indentation, alignment, and text direction using the QuillJsBundle DTOs. Each QuillGroup::build() call creates a separate toolbar group with the specified field options.

```php
use Ehyiah\QuillJsBundle\DTO\QuillGroup;
use Ehyiah\QuillJsBundle\DTO\Fields\BlockField\ListField;
use Ehyiah\QuillJsBundle\DTO\Fields\BlockField\IndentField;
use Ehyiah\QuillJsBundle\DTO\Fields\BlockField\AlignField;
use Ehyiah\QuillJsBundle\DTO\Fields\BlockField\DirectionField;

'quill_options' => [
    QuillGroup::build(
        new ListField(ListField::LIST_FIELD_OPTION_ORDERED),
        new ListField(ListField::LIST_FIELD_OPTION_BULLET),
        new ListField(ListField::LIST_FIELD_OPTION_CHECK),
    ),
    QuillGroup::build(
        new IndentField(IndentField::INDENT_FIELD_OPTION_PLUS),
        new IndentField(IndentField::INDENT_FIELD_OPTION_MINUS),
    ),
    QuillGroup::build(
        new AlignField(),
    ),
    QuillGroup::build(
        new DirectionField(),
    ),
],
```

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

### STTModule Constructor

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules.md

Creates an STTModule instance for configuring the Speech-to-Text module in a Quill editor. Requires a browser supporting the Web Speech API.

```APIDOC
## STTModule Constructor

### Description
Creates an STTModule instance for configuring the Speech-to-Text module in a Quill editor. Requires a browser supporting the Web Speech API.

### Method
Constructor

### Parameters
#### Constructor Parameters
- **language** (string) - Optional - Speech recognition language in BCP 47 format (e.g., 'en-US', 'fr-FR', 'es-ES'). Default: 'en-EN'.
- **continuous** (boolean) - Optional - If true, recognition automatically restarts after each pause. If false, user must manually restart. Default: false.
- **visualizer** (boolean) - Optional - Display animated audio visualizer (equalizer with 14 columns) reflecting microphone input in real-time. Default: true.
- **waveformColor** (string) - Optional - Gradient secondary color for the audio visualizer (top part of columns). Default: '#4285f4'.
- **histogramColor** (string) - Optional - Primary/accent color used for visualizer gradient, toolbar button when active, and listening label. Default: '#25D366'.
- **debug** (boolean) - Optional - Enable debug mode to display recognition logs and events in browser console. Default: false.
- **buttonTitleStart** (string) - Optional - Tooltip text shown on microphone button hover when recognition is inactive. Default: 'Start listening'.
- **buttonTitleStop** (string) - Optional - Tooltip text shown on microphone button hover when recognition is active. Default: 'Stop listening'.
- **titleInactive** (string) - Optional - Label text displayed in the STT bar when recognition is inactive. Default: 'Inactive'.
- **titleStarting** (string) - Optional - Label text displayed in the STT bar when recognition is initializing. Default: 'Starting...'.
- **titleActive** (string) - Optional - Label text displayed in the STT bar during active listening. Default: 'Listening...'.

### Request Example
```php
use Ehyiah\QuillJsBundle\Form\QuillType;
use Ehyiah\QuillJsBundle\DTO\Modules\STTModule;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('content', QuillType::class, [
            'quill_options' => [
                QuillGroup::buildWithAllFields()
            ],
            'modules' => [
                new STTModule(
                    language: 'fr-FR',           // French language recognition
                    continuous: true,             // Auto-restart after pauses
                    visualizer: true,             // Show audio visualizer
                    waveformColor: '#4285f4',     // Blue gradient color
                    histogramColor: '#25D366',    // Green accent color
                    debug: false,                 // Disable debug logs
                    buttonTitleStart: 'Start voice dictation',
                    buttonTitleStop: 'Stop voice dictation',
                    titleInactive: 'Voice recognition inactive',
                    titleStarting: 'Initializing...',
                    titleActive: 'Listening to your voice...',
                ),
            ],
        ])
    ;
}
```

### Response
No return value.
```

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

### Configure ImageGalleryField with ImageGalleryModule in PHP

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/fields/image-gallery.md

Adds a gallery button to the Quill toolbar and opens a media gallery modal for browsing, searching, and uploading images. Requires at least a 'listEndpoint' in the ImageGalleryModule options.

```php
use Ehyiah\QuillJsBundle\DTO\QuillGroup;
use Ehyiah\QuillJsBundle\DTO\Fields\InlineField\ImageGalleryField;
use Ehyiah\QuillJsBundle\DTO\Modules\ImageGalleryModule;

'quill_options' => [
    QuillGroup::build(new ImageGalleryField()),
],
'modules' => [
    new ImageGalleryModule(options: [
        'listEndpoint' => '/api/media/list',
        'searchEndpoint' => '/api/media/search',
        'uploadEndpoint' => '/api/media/upload',
        'buttonTitle' => 'Browse Media Library',
    ]),
],
```

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

### MentionModule with Remote Search

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/modules/mention.md

Configures the MentionModule to fetch suggestions from a remote API endpoint. The remote URL must return a JSON array of objects with at least `id` and `value` properties.

```APIDOC
## MentionModule with Remote Search

### Description
Configures the MentionModule to fetch suggestions from a remote API endpoint. The remote URL must return a JSON array of objects with at least `id` and `value` properties.

### Method
Constructor

### Endpoint
`new MentionModule(options: array)`

### Parameters
#### Options
- **trigger** (string) - Optional - The character that triggers the suggestion list. Default: `'@'`.
- **remote_url** (string) - Optional - URL for AJAX search. Use `{query}` as a placeholder for the user input. Default: `null`.
- **min_chars** (int) - Optional - Minimum characters to type after the trigger before showing suggestions. Default: `1`.
- **max_results** (int) - Optional - Maximum number of results displayed in the suggestion list. Default: `10`.

### Request Example
```php
new MentionModule(options: [
    'trigger' => '#',
    'remote_url' => '/api/tags/search?q={query}',
    'min_chars' => 2,
    'max_results' => 5,
])
```

### Response
No return value; the module is added to the editor's modules configuration.
```

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

### Configure assets in CrudController (AssetMapper)

Source: https://github.com/ehyiah/ux-quill/blob/main/docs/guide/easyadmin.md

Workaround for an issue with EasyAdmin's ->addAssetMapperEntries() function. Add this method to your CrudController to register the 'quill-admin' entry.

```php
public function configureAssets(Assets $assets): Assets
{
    $assets->addAssetMapperEntry('quill-admin');

    return parent::configureAssets($assets);
}
```
Tokens:
Raw