Merge pull request #27 from bizley/active-field-and-resize

Active Field class fix and allowResize property

README.md

@@ -21,15 +21,15 @@ You can find Quill at https://quilljs.com/
 Run console command
 
 ```
-composer require bizley/quill:^3.1
+composer require bizley/quill:^3.2
 ```
 
 Or add the package to your `composer.json`:
 
 ```json
 {
     "require": {
-        "bizley/quill": "^3.1"
+        "bizley/quill": "^3.2"
     }
 }
 ```
@@ -104,8 +104,9 @@ copied to hidden input field so it can be used in forms. You can modify containe
 
 ### Editor box's height
 
-Default editor height is *150px* (this can be changed by setting `'options'` parameter) and its box extends as new text 
-lines are added.
+When `allowResize` option is set to `false` (default) editor's height is *150px* (this can be changed by setting 
+`'options'` parameter). Setting `allowResize` to `true` resets the minimum height and allows it to be expanded freely. 
+Editor's box extends as new text lines are added.
 
 ### Quill source
 
@@ -169,15 +170,15 @@ the `'katexVersion'` parameter. Starting from version 3.0.0 you can use local as
 packet manager - to do so run
 
 ```
-composer require npm-asset/katex:^0.11
+composer require npm-asset/katex:^0.12
 ```
 
 Or add the package to your `composer.json`:
 
 ```json
 {
     "require": {
-        "npm-asset/katex": "^0.11"
+        "npm-asset/katex": "^0.12"
     }
 }
 ```
@@ -203,15 +204,15 @@ highlight.js by setting the `'highlightVersion'` parameter. Starting from versio
 highlight.js provided through NPM packet manager - to do so run
 
 ```
-composer require npm-asset/highlight.js:^9.18
+composer require npm-asset/highlight.js:^10.2
 ```
 
 Or add the package to your `composer.json`:
 
 ```json
 {
     "require": {
-        "npm-asset/highlight.js": "^9.18"
+        "npm-asset/highlight.js": "^10.2"
     }
 }
 ```
@@ -239,15 +240,15 @@ previous versions you would have to add it through custom JS (see `js` property)
 Run
 
 ```
-composer require npm-asset/quill-smart-break:^0.1
+composer require npm-asset/quill-smart-break:^0.2
 ```
 
 Or add the package to your `composer.json`:
 
 ```json
 {
     "require": {
-        "npm-asset/quill-smart-break": ">=0.1.1 <1.0.0"
+        "npm-asset/quill-smart-break": "^0.2"
     }
 }
 ```

composer.json

@@ -18,10 +18,10 @@
     "yiisoft/yii2": "^2.0.0"
   },
   "require-dev": {
-    "npm-asset/highlight.js": "^10.1",
+    "npm-asset/highlight.js": "^10.2",
     "npm-asset/katex": "^0.12",
     "npm-asset/quill": "^1.3",
-    "npm-asset/quill-smart-break": ">= 0.1.1 <1.0.0",
+    "npm-asset/quill-smart-break": "^0.2",
     "phpunit/phpunit": "^7.5",
     "roave/security-advisories": "dev-master"
   },

src/Quill.php

@@ -32,7 +32,7 @@
  * See the documentation for more details.
  *
  * @author Paweł Bizley Brzozowski
- * @version 3.1.0
+ * @version 3.2.0
  * @license Apache 2.0
  * https://github.com/bizley/yii2-quill
  *
@@ -49,8 +49,8 @@ class Quill extends InputWidget
     public const TOOLBAR_BASIC = 'BASIC';
 
     public const QUILL_VERSION = '1.3.7';
-    public const KATEX_VERSION = '0.11.1';
-    public const HIGHLIGHTJS_VERSION = '9.18.1';
+    public const KATEX_VERSION = '0.12.0';
+    public const HIGHLIGHTJS_VERSION = '10.2.0';
 
     /** {@inheritdoc} */
     public static $autoIdPrefix = 'quill-';
@@ -182,12 +182,6 @@ class Quill extends InputWidget
      */
     public $highlightStyle = 'default';
 
-    /**
-     * @var array HTML attributes for the input tag (editor box).
-     * @see Html::renderTagAttributes() for details on how attributes are being rendered.
-     */
-    public $options = ['style' => 'min-height:150px;'];
-
     /**
      * @var array HTML attributes for the hidden input tag (field keeping raw HTML text).
      * @see Html::renderTagAttributes() for details on how attributes are being rendered.
@@ -207,6 +201,12 @@ class Quill extends InputWidget
      */
     public $localAssets = false;
 
+    /**
+     * @var bool Whether to allow resizing the editor box.
+     * @since 3.2.0
+     */
+    public $allowResize = false;
+
     /** @var string ID of the editor */
     protected $_fieldId;
 
@@ -245,6 +245,10 @@ public function init(): void
         $this->_fieldId = $this->options['id'];
         $this->options['id'] = 'editor-' . $this->id;
 
+        if (!$this->allowResize && !isset($this->options['style'])) {
+            $this->options['style'] = 'min-height:150px;';
+        }
+
         $this->prepareOptions();
     }
 
@@ -523,13 +527,29 @@ public function renderToolbar()
         return $this->toolbarOptions;
     }
 
+    private function removeFormControlClass(): void
+    {
+        if (isset($this->options['class'])) {
+            $oldClasses = explode(' ', $this->options['class']);
+            $newClasses = [];
+            foreach ($oldClasses as $class) {
+                if ($class !== 'form-control') {
+                    $newClasses[] = $class;
+                }
+            }
+            $this->options['class'] = implode(' ', $newClasses);
+        }
+    }
+
     /** {@inheritdoc} */
     public function run(): string
     {
         $this->registerClientScript();
 
         $hiddenOptions = array_merge($this->hiddenOptions, ['id' => $this->_fieldId]);
 
+        $this->removeFormControlClass();
+
         if ($this->hasModel()) {
             return Html::activeHiddenInput($this->model, $this->attribute, $hiddenOptions)
                 . Html::tag($this->tag, $this->model->{$this->attribute}, $this->options);
@@ -547,6 +567,10 @@ public function registerClientScript(): void
     {
         $view = $this->view;
 
+        if ($this->allowResize) {
+            $view->registerCss('.ql-editor{resize:vertical;overflow-y:scroll}');
+        }
+
         if ($this->localAssets) {
             if ($this->isKatex()) {
                 KatexLocalAsset::register($view);