add babycode preview

data/static/js/bits/ui.js

@@ -1,4 +1,6 @@
-export const b = {}
+export const b = {
+  babycodePreviewEndpoint: '/api/babycode-preview/',
+}
 
 export function setTab(_, sender, el) {
   if (sender.ariaSelected === 'true') {
@@ -78,3 +80,64 @@ export function insertBabycode(_, sender, el) {
   }
   el.focus();
 }
+
+export function babycodePreviewInit(ev, sender, el) {
+  if (!sender.parentNode.parentNode.contains(el)) { // tab container > tab bar > button
+    return;
+  }
+
+  b.send({ text: el.value, sender: sender, bannedTags: JSON.parse(el.dataset.bannedTags) }, 'babycodePreview');
+}
+
+export async function babycodePreview(payload, _, el) {
+  if (!payload.sender.parentNode.parentNode.contains(el)) {
+    return;
+  }
+
+  if (!payload.text.trim()) {
+    b.send({ plain: 'Type something to get a preview.', sender: el }, 'showBabycodePreview');
+    return;
+  }
+  const options = {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      markup: payload.text,
+      banned_tags: payload.bannedTags,
+    }),
+  }
+
+  const f = await fetch(b.babycodePreviewEndpoint, options);
+  try {
+    if (!f.ok) {
+      console.error(f);
+      let msg = '';
+      switch (f.status) {
+        case 429:
+          return;
+        default:
+          msg = '(Something went wrong. Try again later.)'
+      }
+      b.send({ plain: msg, sender: el }, 'showBabycodePreview');
+      return;
+    }
+    b.send({ ...(await f.json()), sender: el }, 'showBabycodePreview');
+  } catch (error) {
+    b.send({ plain: '(Something went wrong. Try again later.)', sender: el }, 'showBabycodePreview');
+    console.error(error);
+    return;
+  }
+}
+
+export function showBabycodePreview(payload, _, el) {
+  if (!payload.sender.parentNode.contains(el)) {
+    return;
+  }
+  if (payload.plain) {
+    el.innerHTML = `<p>${payload.plain}</p>`;
+  } else {
+    el.innerHTML = payload.html;
+  }
+}