Typescript BBCode auto preview class

resources/js/core/bbcode-auto-preview.ts

@@ -0,0 +1,59 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import { route } from 'laroute';
+import { debounce } from 'lodash';
+import { fail } from 'utils/fail';
+import { htmlElementOrNull } from 'utils/html';
+
+export default class BbcodeAutoPreview {
+  private readonly debouncedLoadPreview;
+  private readonly xhr = new Map<HTMLElement, JQuery.jqXHR<string>>();
+
+  constructor() {
+    this.debouncedLoadPreview = debounce(this.loadPreview, 500);
+    document.addEventListener('input', this.onInput);
+  }
+
+  private readonly loadPreview = (target: HTMLTextAreaElement) => {
+    const form = target.closest('form') ?? fail('form element is missing');
+    const body = target.value;
+    const preview = htmlElementOrNull(form.querySelector('.js-post-preview--preview'));
+    const previewBox = form.querySelector('.js-post-preview--box');
+
+    if (preview == null) {
+      return;
+    }
+
+    this.xhr.get(preview)?.abort();
+
+    if (body === '') {
+      preview.dataset.raw = '';
+      preview.innerHTML = '';
+      previewBox?.classList.add('hidden');
+      return;
+    }
+
+    if (preview.dataset.raw === body) {
+      previewBox?.classList.remove('hidden');
+      return;
+    }
+
+    const xhr = $.post(route('bbcode-preview'), { text: body }) as JQuery.jqXHR<string>;
+    xhr.done((data) => {
+      preview.dataset.raw = body;
+      preview.innerHTML = data;
+      previewBox?.classList.remove('hidden');
+    }).always(() => {
+      this.xhr.delete(preview);
+    });
+  };
+
+  private readonly onInput = (e: InputEvent) => {
+    const target = htmlElementOrNull(e.target)?.closest('.js-post-preview--auto');
+
+    if (target instanceof HTMLTextAreaElement) {
+      this.debouncedLoadPreview(target);
+    }
+  };
+}

resources/js/forum/post-box.coffee

@@ -25,10 +25,8 @@ insert = (event, tagOpen, tagClose = '') ->
     box.selectionStart = startPos
     box.selectionEnd = texts[0].length + texts[1].length + tagClose.length
 
-  $box
-    .trigger 'bbcode:inserted' # for react
-    .trigger 'input' # ignored by react
-    .focus()
+  box.dispatchEvent(new InputEvent('input', bubbles: true))
+  box.focus()
 
 [
   ['bold', '[b]', '[/b]']

resources/js/main.coffee

@@ -24,7 +24,6 @@ import LandingGraph from 'core-legacy/landing-graph'
 import Menu from 'core-legacy/menu'
 import NavButton from 'core-legacy/nav-button'
 import Nav2 from 'core-legacy/nav2'
-import PostPreview from 'core-legacy/post-preview'
 import Search from 'core-legacy/search'
 import { StoreCheckout } from 'core-legacy/store-checkout'
 import TooltipDefault from 'core-legacy/tooltip-default'
@@ -60,7 +59,6 @@ window.globalDrag ?= new GlobalDrag
 window.landingGraph ?= new LandingGraph
 window.menu ?= new Menu
 window.navButton ?= new NavButton
-window.postPreview ?= new PostPreview
 window.search ?= new Search
 window.tooltipDefault ?= new TooltipDefault
 

resources/js/osu-core.ts

@@ -7,6 +7,7 @@ import AccountEdit from 'core/account-edit';
 import AccountEditAvatar from 'core/account-edit-avatar';
 import AccountEditBlocklist from 'core/account-edit-blocklist';
 import AnimateNav from 'core/animate-nav';
+import BbcodeAutoPreview from 'core/bbcode-auto-preview';
 import BrowserTitleWithNotificationCount from 'core/browser-title-with-notification-count';
 import Captcha from 'core/captcha';
 import ClickMenu from 'core/click-menu';
@@ -49,6 +50,7 @@ export default class OsuCore {
   readonly accountEditAvatar;
   readonly accountEditBlocklist;
   readonly animateNav;
+  readonly bbcodeAutoPreview;
   readonly beatmapsetSearchController;
   readonly browserTitleWithNotificationCount;
   readonly captcha;
@@ -102,6 +104,7 @@ export default class OsuCore {
     $.subscribe('user:update', this.onCurrentUserUpdate);
 
     this.animateNav = new AnimateNav();
+    this.bbcodeAutoPreview = new BbcodeAutoPreview();
     this.captcha = new Captcha();
     this.chatWorker = new ChatWorker();
     this.clickMenu = new ClickMenu();