fix: bbcode preview height

resources/views/livewire/bbcode-input.blade.php

@@ -22,6 +22,10 @@
             }
         },
         showButtons: false,
+        bbcodePreviewHeight: null,
+        isPreviewEnabled: @entangle('isPreviewEnabled'),
+        isOverInput: false,
+        previousActiveElement: document.activeElement,
     }"
 >
     <p class="bbcode-input__tabs">
@@ -188,28 +192,33 @@
         </li>
     </menu>
     <div class="bbcode-input__tab-pane">
-        @if ($isPreviewEnabled)
-            <div class="bbcode-input__preview bbcode-rendered">
-                @joypixels($contentHtml)
-            </div>
-            <input type="hidden" name="{{ $name }}" wire:model.defer="contentBbcode">
-        @else
-            <p class="form__group">
-                <textarea
-                    id="bbcode-{{ $name }}"
-                    name="{{ $name }}"
-                    class="form__textarea bbcode-input__input"
-                    placeholder=" "
-                    x-ref="bbcode"
-                    wire:model.defer="contentBbcode"
-                    @if ($isRequired)
-                        required
-                    @endif
-                ></textarea>
-                <label class="form__label form__label--floating" for="{{ $name }}">
-                    {{ $label }}
-                </label>
-            </p>
-        @endif
+        <div class="bbcode-input__preview bbcode-rendered" x-show="isPreviewEnabled">
+            @joypixels($contentHtml)
+        </div>
+        <p class="form__group" x-show="! isPreviewEnabled">
+            <textarea
+                id="bbcode-{{ $name }}"
+                name="{{ $name }}"
+                class="form__textarea bbcode-input__input"
+                placeholder=" "
+                x-ref="bbcode"
+                x-on:mouseup="
+                    if (isOverInput) {
+                        bbcodePreviewHeight = $el.style.height;
+                    }
+                "
+                x-on:mousedown="previousActiveElement = document.activeElement;"
+                x-on:mouseover="isOverInput = true"
+                x-on:mouseleave="isOverInput = false"
+                wire:model.defer="contentBbcode"
+                x-bind:style="{ height: bbcodePreviewHeight !== null && bbcodePreviewHeight, transition: previousActiveElement === $el ? 'none' : 'border-color 600ms cubic-bezier(0.25, 0.8, 0.25, 1), height 600ms cubic-bezier(0.25, 0.8, 0.25, 1)' }"
+                @if ($isRequired)
+                    required
+                @endif
+            ></textarea>
+            <label class="form__label form__label--floating" for="bbcode-{{ $name }}">
+                {{ $label }}
+            </label>
+        </p>
     </div>
-</div>
+</div>