add char count to babycode editor

app/templates/common/macros.html

@@ -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>

data/static/js/bits/ui.js

@@ -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) {