webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Enhance changelog input to textarea with character counter

Browse Source
This commit is contained in:
Shresth Kapoor
2025-06-18 20:10:20 -04:00
parent c4839c783a
commit 3617ab1540
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/components/page-editor.js
View File

@ -75,7 +75,12 @@ export class PageEditor extends Component {
// Changelog controls // Changelog controls
const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false); 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 // Draft Controls
onSelect(this.saveDraftButton, this.saveDraft.bind(this)); onSelect(this.saveDraftButton, this.saveDraft.bind(this));

10
resources/views/pages/parts/editor-toolbar.blade.php
View File

@ -106,11 +106,15 @@
<ul refs="dropdown@menu" class="wide dropdown-menu"> <ul refs="dropdown@menu" class="wide dropdown-menu">
<li class="px-l py-m"> <li class="px-l py-m">
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p> <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
<input refs="page-editor@changelogInput" <textarea
refs="page-editor@changelogInput"
name="summary" name="summary"
id="summary-input" id="summary-input"
type="text" rows="2"
placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" /> maxlength="250"
placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
></textarea>
<small class="text-muted mt-xs" id="changelog-count">0 / 250</small>
</li> </li>
</ul> </ul>
<span>{{-- Prevents button jumping on menu show --}}</span> <span>{{-- Prevents button jumping on menu show --}}</span>