From: Shresth Kapoor <redacted>
Date: Thu, 19 Jun 2025 00:10:20 +0000 (-0400)
Subject: Enhance changelog input to textarea with character counter
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/refs/pull/5663/head?ds=sidebyside

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 81378e944..2a155f37f 100644
--- 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);
-        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));
diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index 341fbf67d..deddc3cd3 100644
--- 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>
-                    <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>