add char count to babycode editor

This commit is contained in:
2026-05-28 21:40:35 +03:00
parent 27314f34a5
commit 0224e2e390
2 changed files with 23 additions and 2 deletions

View File

@@ -109,10 +109,10 @@
<button type="button" title="insert spoiler" class="minimal" data-babycode-tag="spoiler=" data-break-line data-prefill="spoiler content" data-s="insertBabycode">s</button>
<button type="button" title="insert emoji&hellip;" class="minimal"><img src="/static/emoji/angry.png" class="emoji"></button>
</span>
<span class="flex-last js-only" data-r="enhance">stub: char count</span>
<span class="flex-last js-only" data-r="enhance babycodeEditorCharCount">stub: char count</span>
</span>
<input type="hidden" name="babycode_banned_tags" id="{{id}}-banned-tags" value="{{banned_tags | unique | list | tojson | forceescape}}">
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
<textarea name="babycode_content" id="{{id}}" class="babycode-editor" placeholder="{{placeholder}}" {{'required' if required else ''}} autocomplete="off" maxlength="5000" data-r="insertBabycode babycodePreviewInit babycodeEditorCharCountInit" data-listeners="input" data-s="babycodeEditorCharCount" data-banned-tags="{{banned_tags | unique | list | tojson | forceescape}}">{{ prefill }}</textarea>
{%- if banned_tags -%}
<div>
<span>Forbidden tags:</span>

View File

@@ -1,5 +1,6 @@
export const b = {
babycodePreviewEndpoint: '/api/babycode-preview/',
init: 'babycodeEditorCharCountInit',
}
export function setTab(_, sender, el) {
@@ -79,6 +80,26 @@ export function insertBabycode(_, sender, el) {
el.setSelectionRange(newCursor, newCursor);
}
el.focus();
b.send({ sender: el }, 'babycodeEditorCharCount');
}
export function babycodeEditorCharCount(evOrPayload, sender, el) {
if (!sender) { // sent from bitty, not input
sender = evOrPayload.sender;
}
if (!sender.parentNode.contains(el)) {
return;
}
const maxLength = sender.maxLength;
const currentLength = sender.value.length;
el.innerText = `${currentLength}/${maxLength}`
}
export function babycodeEditorCharCountInit(_, __, el) {
b.send({ sender: el }, 'babycodeEditorCharCount');
}
export function babycodePreviewInit(ev, sender, el) {