[Feature] Quill Rich Text Editor (#53)

* Add quill editor component

* Update js deps

Author: rawilk

config/form-components.php

@@ -88,6 +88,9 @@
         'tree-select' => Components\Inputs\TreeSelect::class,
         'tree-select-option' => Components\Inputs\TreeSelectOption::class,
 
+        // Rich Text
+        'quill' => Components\RichText\Quill::class,
+
     ],
 
     /*
@@ -171,6 +174,11 @@
         ],
 
         'popper' => 'https://unpkg.com/@popperjs/core@2',
+
+        'quill' => [
+            'https://cdn.quilljs.com/1.3.6/quill.snow.css',
+            'https://cdn.quilljs.com/1.3.6/quill.js',
+        ],
     ],
 
     /*

dist/form-components.js

@@ -1,3 +1,3 @@
 {
-    "/form-components.js": "/form-components.js?id=aa42a80457d5af2a5e64"
+    "/form-components.js": "/form-components.js?id=8cd94f15e0bfe6dd5376"
 }

dist/mix-manifest.json

@@ -1,11 +1,13 @@
 import customSelect from './custom-select';
 import customSelectOption from './custom-select-option';
+import quill from './quill';
 import treeSelect from './tree-select';
 import treeSelectOption from './tree-select-option';
 
 document.addEventListener('alpine:init', () => {
     Alpine.data('customSelect', customSelect);
     Alpine.data('customSelectOption', customSelectOption);
+    Alpine.data('quill', quill);
     Alpine.data('treeSelect', treeSelect);
     Alpine.data('treeSelectOption', treeSelectOption);
 });

package-lock.json

@@ -0,0 +1,52 @@
+export default options => ({
+    autofocus: false,
+    value: '',
+    theme: 'snow',
+    readOnly: false,
+    placeholder: null,
+    toolbar: {},
+    toolbarHandlers: {},
+    ...options,
+    _quill: null,
+
+    init() {
+        if (typeof Quill !== 'function') {
+            throw new TypeError(`Quill Editor requires Quill (https://quilljs.com)`);
+        }
+
+        this._quill = new Quill(this.$refs.quill, this._quillOptions());
+
+        this._quill.root.innerHTML = this.value;
+
+        this._quill.on('text-change', () => {
+            this.value = this._quill.root.innerHTML;
+
+            this.$dispatch('quill-input', this.value);
+        });
+
+        if (this.autofocus) {
+            this.$nextTick(() => this._quill.focus());
+        }
+    },
+
+    _quillOptions() {
+        const toolbarHandlers = this.toolbarHandlers;
+        if (toolbarHandlers !== null) {
+            Object.keys(toolbarHandlers).forEach(key => {
+                toolbarHandlers[key] = new Function('value', toolbarHandlers[key]);
+            });
+        }
+
+        return {
+            theme: this.theme,
+            readOnly: this.readOnly,
+            placeholder: this.placeholder,
+            modules: {
+                toolbar: {
+                    container: this.toolbar,
+                    handlers: toolbarHandlers || {},
+                },
+            },
+        };
+    }
+});

resources/js/components/index.js

@@ -0,0 +1,22 @@
+<div x-data="quill({
+         @if ($hasWireModel())
+            value: @entangle($attributes->wire('model')),
+         @elseif ($hasXModel())
+            value: {{ $attributes->first('x-model') }},
+         @else
+            value: {{ \Illuminate\Support\Js::from($value) }},
+         @endif
+         ...{{ $options() }}
+     })"
+     x-cloak
+     id="{{ $id }}"
+     @class([
+        'quill-wrapper',
+        'has-error' => $hasErrorsAndShow($name),
+     ])
+>
+    <input type="hidden" name="{{ $name }}" x-bind:value="value">
+    <div @if ($hasWireModel()) wire:ignore @endif>
+        <div x-ref="quill"></div>
+    </div>
+</div>

resources/js/components/quill.js

@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Rawilk\FormComponents\Components\RichText;
+
+use Illuminate\Support\Js;
+use Rawilk\FormComponents\Components\BladeComponent;
+use Rawilk\FormComponents\Concerns\HandlesValidationErrors;
+use Rawilk\FormComponents\Concerns\HasModels;
+use Rawilk\FormComponents\Dto\QuillOptions;
+
+class Quill extends BladeComponent
+{
+    use HandlesValidationErrors;
+    use HasModels;
+
+    public function __construct(
+        public null|string $name = null,
+        public null|string $id = null,
+        public null|string $value = null,
+        bool $showErrors = true,
+        public bool $autofocus = false,
+        public bool $readonly = false,
+        public null|string $placeholder = null,
+        public null|QuillOptions $quillOptions = null,
+    ) {
+        $this->id = $this->id ?? $this->name;
+        $this->value = $this->name ? old($this->name, $this->value) : $this->value;
+        $this->showErrors = $showErrors;
+
+        if (is_null($this->quillOptions)) {
+            $this->quillOptions = QuillOptions::defaults();
+        }
+    }
+
+    public function options(): Js
+    {
+        return Js::from([
+            'autofocus' => $this->autofocus,
+            'theme' => $this->quillOptions->theme,
+            'readOnly' => $this->readonly,
+            'placeholder' => $this->placeholder,
+            'toolbar' => $this->quillOptions->getToolbar(),
+            'toolbarHandlers' => count($this->quillOptions->toolbarHandlers) ? $this->quillOptions->toolbarHandlers : null,
+        ]);
+    }
+}