Enhance changelog input to textarea with character counter

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index 81378e944c045249a22a81913c120dbfd64a12db..2a155f37fb8aea3d37ee3ec7f2ef5d764086568e 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -75,7 +75,12 @@ export class PageEditor extends Component {
 
         // Changelog controls
         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
 
         // Changelog controls
         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);

-        this.changelogInput.addEventListener('input', updateChangelogDebounced);
+        this.changelogInput.addEventListener('input', () => {
+            const count = this.changelogInput.value.length;
+            const counterEl = document.getElementById('changelog-count');
+            if (counterEl) counterEl.innerText = `${count} / 250`;
+            updateChangelogDebounced();
+        });

 
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
 
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index 341fbf67d6ce36a5a3928a89916802e9ad7efb0d..deddc3cd321f3dfdf36322420a5ac07de5e561a9 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -106,11 +106,15 @@
             <ul refs="dropdown@menu" class="wide dropdown-menu">
                 <li class="px-l py-m">
                     <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
             <ul refs="dropdown@menu" class="wide dropdown-menu">
                 <li class="px-l py-m">
                     <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>

-                    <input refs="page-editor@changelogInput"
-                           name="summary"
-                           id="summary-input"
-                           type="text"
-                           placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
+                    <textarea
+                        refs="page-editor@changelogInput"
+                        name="summary"
+                        id="summary-input"
+                        rows="2"
+                        maxlength="250"
+                        placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
+                    ></textarea>
+                    <small class="text-muted mt-xs" id="changelog-count">0 / 250</small>

                 </li>
             </ul>
             <span>{{-- Prevents button jumping on menu show --}}</span>
                 </li>
             </ul>
             <span>{{-- Prevents button jumping on menu show --}}</span>