Enhance changelog input to textarea with character counter

[bookstack] / resources / js / components / page-editor.js

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index 64cd601a9203163dffc0141178390ca960a23da3..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);
-        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));
@@ -112,7 +117,7 @@ export class PageEditor extends Component {
     }
 
     savePage() {
-        this.container.closest('form').submit();
+        this.container.closest('form').requestSubmit();
     }
 
     async saveDraft() {