Switched BBCode library to improve BBCode handling

.gitmodules

@@ -2,6 +2,6 @@
 	path = asm/libraries/opus
 	url = https://github.com/xiph/opus.git
 	branch = 1.1.2
-[submodule "vendor/bbcode"]
+[submodule "vendor/xbbcode"]
-	path = vendor/bbcode
+	path = vendor/xbbcode
-	url = https://github.com/WolverinDEV/Extendible-BBCode-Parser.git
+	url = https://github.com/WolverinDEV/XBBCode.git

shared/css/static/ts/chat.scss

@@ -32,7 +32,7 @@
                 display: inline-block;
 
                 * {
-                    display: inline-block;
+                    display: inline;
                     vertical-align: top;
                 }
 

shared/js/connection/CommandHandler.ts

@@ -348,6 +348,7 @@ namespace connection {
                             }
                         }
                     }
+
                     if(client_chat) {
                         client_chat.appendMessage(
                             "{0}", true,
@@ -356,6 +357,7 @@ namespace connection {
                                 .text(tr("Your chat partner has reconnected"))
                         );
                         client_chat.flag_offline = false;
+                        client.initialize_chat(client_chat);
                     }
                 }
 
@@ -457,6 +459,8 @@ namespace connection {
                         const chat = client.chat(false);
                         if(chat) {
                             chat.flag_offline = true;
+                            chat.onMessageSend = undefined;
+                            chat.onClose = undefined;
                             chat.appendMessage(
                                 "{0}", true,
                                 $.spawn("div")

shared/js/load.ts

@@ -487,7 +487,7 @@ const loader_javascript = {
 
         await loader.load_script("vendor/jsrender/jsrender.min.js");
         await loader.load_scripts([
-            ["vendor/bbcode/xbbcode.js"],
+            ["vendor/xbbcode/src/parser.js"],
             ["vendor/moment/moment.js"],
             ["adapter/adapter-latest.js", "https://webrtc.github.io/adapter/adapter-latest.js"]
         ]);
@@ -681,7 +681,7 @@ const loader_webassembly = {
 const loader_style = {
     load_style: async () => {
         await loader.load_styles([
-            "vendor/bbcode/xbbcode.css"
+            "vendor/xbbcode/src/xbbcode.css"
         ]);
 
         if(app.type == app.Type.WEB_DEBUG || app.type == app.Type.CLIENT_DEBUG) {

shared/js/ui/client.ts

@@ -701,6 +701,10 @@ class ClientEntry {
         }
     }
 
+    private chat_name() {
+        return "client_" + this.clientUid() + ":" + this.clientId();
+    }
+
     chat(create: boolean = false) : ChatEntry {
         let chatName = "client_" + this.clientUid() + ":" + this.clientId();
         let chat = this.channelTree.client.chat.findChat(chatName);
@@ -709,22 +713,30 @@ class ClientEntry {
             chat.flag_closeable = true;
             chat.name = this.clientNickName();
             chat.owner_unique_id = this.properties.client_unique_identifier;
-
-            chat.onMessageSend = text => {
-                this.channelTree.client.serverConnection.command_helper.sendMessage(text, ChatType.CLIENT, this);
-            };
-
-            chat.onClose = () => {
-                if(!chat.flag_offline)
-                    this.channelTree.client.serverConnection.send_command("clientchatclosed", {"clid": this.clientId()}, {process_result: false}).catch(error => {
-                        log.warn(LogCategory.GENERAL, tr("Failed to notify chat participant (%o) that the chat has been closed. Error: %o"), this, error);
-                    });
-                return true;
-            }
         }
+
+        this.initialize_chat(chat);
         return chat;
     }
 
+    initialize_chat(handle?: ChatEntry) {
+        handle = handle || this.channelTree.client.chat.findChat(this.chat_name());
+        if(!handle)
+            return;
+
+        handle.onMessageSend = text => {
+            this.channelTree.client.serverConnection.command_helper.sendMessage(text, ChatType.CLIENT, this);
+        };
+
+        handle.onClose = () => {
+            if(!handle.flag_offline)
+                this.channelTree.client.serverConnection.send_command("clientchatclosed", {"clid": this.clientId()}, {process_result: false}).catch(error => {
+                    log.warn(LogCategory.GENERAL, tr("Failed to notify chat participant (%o) that the chat has been closed. Error: %o"), this, error);
+                });
+            return true;
+        };
+    }
+
     updateClientIcon() {
         this.tag.find(".container-icon-client").children().detach();
         if(this.properties.client_icon_id > 0) {
@@ -1107,6 +1119,9 @@ class MusicClientEntry extends ClientEntry {
                         max_volume = 100;
 
                     Modals.spawnChangeRemoteVolume(this.properties.player_volume, max_volume / 100, value => {
+                        if(typeof(value) !== "number")
+                            return;
+
                         this.channelTree.client.serverConnection.send_command("clientedit", {
                             clid: this.clientId(),
                             player_volume: value,

shared/js/ui/frames/chat.ts

@@ -90,11 +90,7 @@ namespace MessageHelper {
     }
 
     export function bbcode_chat(message: string) : JQuery[] {
-        let result = XBBCODE.process({
+        const result: xbbcode.Result = xbbcode.parse(message, {
-            text: message,
-            escapeHtml: true,
-            addInLineBreaks: false,
-
             /* TODO make this configurable and allow IMG */
             tag_whitelist: [
                 "b",
@@ -104,13 +100,14 @@ namespace MessageHelper {
                 "url"
             ]
         });
-
+        /*
         if(result.error) {
             log.error(LogCategory.GENERAL, tr("BBCode parse error: %o"), result.errorQueue);
             return formatElement(message);
         }
-
+        */
-        return result.html.split("\n").map((entry, idx, array) => $.spawn("a").css("display", (idx == 0 ? "inline" : "") + "block").html(entry == "" && idx != 0 ? " " : entry));
+        return [$.spawn("div").html(result.build_html()).contents() as any];
+        //return result.root_tag.content.map(e => e.build_html()).map((entry, idx, array) => $.spawn("a").css("display", (idx == 0 ? "inline" : "") + "block").html(entry == "" && idx != 0 ? " " : entry));
     }
 }
 

shared/js/ui/htmltags.ts

@@ -156,49 +156,46 @@ namespace htmltags {
 
     namespace bbcodes {
         /* the = because we sometimes get that */
-        //const url_client_regex = /(?:=)?client:\/\/(?<client_id>[0-9]+)\/(?<client_unique_id>[a-zA-Z0-9+=#]+)~(?<client_name>(?:[^%]|%[0-9A-Fa-f]{2})+)$/g;
+        //const url_client_regex = /?client:\/\/(?<client_id>[0-9]+)\/(?<client_unique_id>[a-zA-Z0-9+=#]+)~(?<client_name>(?:[^%]|%[0-9A-Fa-f]{2})+)$/g;
-        const url_client_regex = /(?:=)?client:\/\/([0-9]+)\/([a-zA-Z0-9+=/#]+)~((?:[^%]|%[0-9A-Fa-f]{2})+)$/g; /* IDK which browsers already support group naming */
+        const url_client_regex = /client:\/\/([0-9]+)\/([a-zA-Z0-9+=/#]+)~((?:[^%]|%[0-9A-Fa-f]{2})+)$/g; /* IDK which browsers already support group naming */
-        const url_channel_regex = /(?:=)?channel:\/\/([0-9]+)~((?:[^%]|%[0-9A-Fa-f]{2})+)$/g;
+        const url_channel_regex = /channel:\/\/([0-9]+)~((?:[^%]|%[0-9A-Fa-f]{2})+)$/g;
 
         function initialize() {
-            const origin_url = XBBCODE.tags()["url"];
+            const origin_url = xbbcode.register.find_parser('url');
+            xbbcode.register.register_parser({
+                tag: 'url',
+                build_html_tag_open(layer: xbbcode.TagLayer): string {
+                    if(layer.options) {
+                        if(layer.options.match(url_channel_regex)) {
+                            const groups = url_channel_regex.exec(layer.options);
 
-            XBBCODE.addTags({
+                            return generate_channel_open({
-                function: {
+                                add_braces: false,
-                    openTag: (params, content) => {
+                                channel_id: parseInt(groups[1]),
-                        if(params) {
+                                channel_name: decodeURIComponent(groups[2])
-                            if(params.match(url_channel_regex)) {
+                            });
-                                const groups = url_channel_regex.exec(params);
+                        } else if(layer.options.match(url_client_regex)) {
+                            const groups = url_client_regex.exec(layer.options);
 
-                                return generate_channel_open({
+                            return generate_client_open({
-                                    add_braces: false,
+                                add_braces: false,
-                                    channel_id: parseInt(groups[1]),
+                                client_id: parseInt(groups[1]),
-                                    channel_name: decodeURIComponent(groups[2])
+                                client_unique_id: groups[2],
-                                });
+                                client_name: decodeURIComponent(groups[3])
-                            } else if(params.match(url_client_regex)) {
+                            });
-                                const groups = url_client_regex.exec(params);
-
-                                return generate_client_open({
-                                    add_braces: false,
-                                    client_id: parseInt(groups[1]),
-                                    client_unique_id: groups[2],
-                                    client_name: decodeURIComponent(groups[3])
-                                });
-                            }
                         }
-                        return origin_url.openTag(params, content);
-                    },
-                    closeTag: (params, content) => {
-                        if(params) {
-                            if(params.match(url_client_regex))
-                                return "</div>";
-                            if(params.match(url_channel_regex))
-                                return "</div>";
-                        }
-                        return origin_url.closeTag(params, content);
                     }
+                    return origin_url.build_html_tag_open(layer);
                 },
-                tag: "url"
+                build_html_tag_close(layer: xbbcode.TagLayer): string {
+                    if(layer.options) {
+                        if(layer.options.match(url_client_regex))
+                            return "</div>";
+                        if(layer.options.match(url_channel_regex))
+                            return "</div>";
+                    }
+                    return origin_url.build_html_tag_close(layer);
+                }
             })
             /*
               "img":  {

vendor/bbcode

@@ -1 +0,0 @@
-Subproject commit 454f0a8069fd842ff967b0a7f127f2d89e97f2be

vendor/xbbcode

@@ -0,0 +1 @@
+Subproject commit 84d449786e59fdce8048af6d64038a6604ccfd2b