From 220b655150b5c950a7b69a6e428492c772d40ced Mon Sep 17 00:00:00 2001
From: Daniel James <danielt70@icloud.com>
Date: Fri, 7 Feb 2025 17:02:26 +0000
Subject: [PATCH] [ticket/17326] Updated js to use same as pages ext and fixed
 icon bug

PHPBB-17326
---
 phpBB/adm/style/acp_bbcodes.html   |  2 +-
 phpBB/adm/style/admin.js           | 23 ++++++++++++++++++-----
 phpBB/includes/acp/acp_bbcodes.php |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/phpBB/adm/style/acp_bbcodes.html b/phpBB/adm/style/acp_bbcodes.html
index cb3480f946..aade2f8aac 100644
--- a/phpBB/adm/style/acp_bbcodes.html
+++ b/phpBB/adm/style/acp_bbcodes.html
@@ -53,7 +53,7 @@
 		<dt><label for="bbcode_font_icon">{{ lang('BBCODE_FONT_ICON') }}</label><br><span>{{ lang('BBCODE_FONT_ICON_EXPLAIN', '<a href="https://fontawesome.com/v6/icons/" target="_blank">', '</a>') }}</span></dt>
 		<dd>
 			<input type="text" name="bbcode_font_icon" id="bbcode_font_icon" value="{{ BBCODE_FONT_ICON }}" />
-			{{ Icon('font', BBCODE_FONT_ICON, '', false, '', {'id':'bbcode_icon_preview'}) }}
+			{{ Icon('font', ' ', '', false, '', {'id':'bbcode_icon_preview'}) }}
 		</dd>
 	</dl>
 	</fieldset>
diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js
index 2ae75db062..f53329b5a7 100644
--- a/phpBB/adm/style/admin.js
+++ b/phpBB/adm/style/admin.js
@@ -279,11 +279,24 @@ function parse_document(container)
 		});
 
 		// Live update BBCode font icon preview
-		$('#bbcode_font_icon').on('keyup', function(e) {
-			const iconName = $(this).val();
-			if (iconName.match(/^[\w-]+$/)) {
-				$('#bbcode_icon_preview').attr('class', "o-icon o-icon-font fa-fw fas icon fa-" + $(this).val());
-			}
+		const updateIconClass = (element, newClass) => {
+			element.classList.forEach(className => {
+				if (className.startsWith('fa-') && className !== 'fa-fw') {
+					element.classList.remove(className);
+				}
+			});
+
+			element.classList.add(`fa-${newClass}`);
+		};
+
+		const pageIconFont = document.getElementById('bbcode_font_icon');
+
+		pageIconFont.addEventListener('keyup', function() {
+			updateIconClass(this.nextElementSibling, this.value);
+		});
+
+		pageIconFont.addEventListener('blur', function() {
+			updateIconClass(this.nextElementSibling, this.value);
 		});
 	});
 })(jQuery);
diff --git a/phpBB/includes/acp/acp_bbcodes.php b/phpBB/includes/acp/acp_bbcodes.php
index 291151ab6f..6fb2dfbb9a 100644
--- a/phpBB/includes/acp/acp_bbcodes.php
+++ b/phpBB/includes/acp/acp_bbcodes.php
@@ -103,7 +103,7 @@ class acp_bbcodes
 					'S_EDIT_BBCODE'		=> true,
 					'U_BACK'			=> $this->u_action,
 					'U_ACTION'			=> $this->u_action . '&amp;action=' . (($action == 'add') ? 'create' : 'modify') . (($bbcode_id) ? "&amp;bbcode=$bbcode_id" : ''),
-
+					'L_BBCODE_USAGE_EXPLAIN'		=> sprintf($user->lang['BBCODE_USAGE_EXPLAIN'], '<a href="#down">', '</a>'),
 					'BBCODE_MATCH'					=> $bbcode_match,
 					'BBCODE_TPL'					=> $bbcode_tpl,
 					'BBCODE_HELPLINE'				=> $bbcode_helpline,