Add support for Font Awesome 6 icons to BBCodes

diff --git a/XSD/bbcode.xsd b/XSD/bbcode.xsd
index 95ac92413f1a25cb27dd09b824b89c0712a901e1..a6e1015f93737cfce0b72a12c96d3dcc67d557a1 100644 (file)
--- a/XSD/bbcode.xsd
+++ b/XSD/bbcode.xsd
@@ -32,6 +32,10 @@
        <xs:complexType name="bbcode_delete">
                <xs:attribute name="name" type="woltlab_varchar" use="required" />
        </xs:complexType>
+
+       <xs:complexType name="bbcode_icon">
+               <xs:attribute name="solid" type="xs:boolean" />
+       </xs:complexType>
        
        <!-- imported/updated page menu item element -->
        <xs:complexType name="bbcode_import">
@@ -43,7 +47,7 @@
                                        <xs:element name="classname" type="woltlab_varchar_nullable" minOccurs="0" />
                                        <xs:element name="attributes" type="attributes_element" minOccurs="0" />
                                        <xs:element name="sourcecode" type="woltlab_boolean" minOccurs="0" />
-                                       <xs:element name="wysiwygicon" type="woltlab_varchar_nullable" minOccurs="0" />
+                                       <xs:element name="wysiwygicon" type="bbcode_icon" minOccurs="0" />
                                        <xs:element name="buttonlabel" type="woltlab_varchar_nullable" minOccurs="0" />
                                        <xs:element name="isBlockElement" type="woltlab_boolean" minOccurs="0" />
                                </xs:all>

diff --git a/com.woltlab.wcf/bbcode.xml b/com.woltlab.wcf/bbcode.xml
index 3c5e131c3b7206947c0b52c3558bb4c82eea32ee..bd40e7246537568f67bf1b1a8a0fb324e348d8f1 100644 (file)
--- a/com.woltlab.wcf/bbcode.xml
+++ b/com.woltlab.wcf/bbcode.xml
@@ -83,7 +83,7 @@
                <bbcode name="quote">
                        <isBlockElement>1</isBlockElement>
                        <buttonlabel>wcf.editor.button.quote</buttonlabel>
-                       <wysiwygicon>fa-quote-left</wysiwygicon>
+                       <wysiwygicon solid="true">quote-left</wysiwygicon>
                        <attributes>
                                <attribute name="0"/>
                                <attribute name="1"/>
@@ -93,7 +93,7 @@
                        <isBlockElement>1</isBlockElement>
                        <sourcecode>1</sourcecode>
                        <buttonlabel>wcf.editor.button.code</buttonlabel>
-                       <wysiwygicon>fa-code</wysiwygicon>
+                       <wysiwygicon>code</wysiwygicon>
                        <attributes>
                                <attribute name="0"/>
                                <attribute name="1"/>
@@ -150,7 +150,7 @@
                <bbcode name="spoiler">
                        <isBlockElement>1</isBlockElement>
                        <buttonlabel>wcf.editor.button.spoiler</buttonlabel>
-                       <wysiwygicon>fa-eye-slash</wysiwygicon>
+                       <wysiwygicon>eye-slash</wysiwygicon>
                        <attributes>
                                <attribute name="0"/>
                        </attributes>
@@ -160,7 +160,7 @@
                        <htmlclose><![CDATA[kbd]]></htmlclose>
                        <sourcecode>1</sourcecode>
                        <buttonlabel>wcf.editor.button.inlineCode</buttonlabel>
-                       <wysiwygicon>fa-terminal</wysiwygicon>
+                       <wysiwygicon>terminal</wysiwygicon>
                </bbcode>
                <bbcode name="attach">
                        <classname>wcf\system\bbcode\AttachmentBBCode</classname>
@@ -219,7 +219,7 @@
                        <isBlockElement>1</isBlockElement>
                        <sourcecode>1</sourcecode>
                        <buttonlabel>wcf.editor.button.woltlabHtml</buttonlabel>
-                       <wysiwygicon>fa-html5</wysiwygicon>
+                       <wysiwygicon>html5</wysiwygicon>
                </bbcode>
                <bbcode name="wsa">
                        <classname>wcf\system\bbcode\WoltLabSuiteArticleBBCode</classname>

diff --git a/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts b/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts
index 306800d6536084cc238c25f7419a4b1229808d80..d5b72c0e3bf057a37f55556aea54a074ae621942 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts
+++ b/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts
@@ -204,6 +204,7 @@ class UiRedactorAutosave {
 
     const buttonKeep = document.createElement("button");
     buttonKeep.innerHTML = '<fa-icon size="16" name="check"></fa-icon>';
+    buttonKeep.type = "button";
     buttonKeep.classList.add("jsTooltip");
     buttonKeep.title = Language.get("wcf.editor.autosave.keep");
     buttonKeep.addEventListener("click", () => this.hideOverlay());
@@ -211,6 +212,7 @@ class UiRedactorAutosave {
 
     const buttonDiscard = document.createElement("button");
     buttonDiscard.innerHTML = '<fa-icon size="16" name="xmark"></fa-icon>';
+    buttonDiscard.type = "button";
     buttonDiscard.classList.add("jsTooltip");
     buttonDiscard.title = Language.get("wcf.editor.autosave.discard");
     buttonDiscard.addEventListener("click", () => {

diff --git a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
index fe339cd6e0d7e132f48d8f12744e170ad94e2412..faee5ffd7607a198a02ca62e3b3405236205bc0f 100644 (file)
--- a/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/bbcodeAdd.tpl
@@ -191,8 +191,8 @@
                                <dt><label for="wysiwygIcon">{lang}wcf.acp.bbcode.wysiwygIcon{/lang}</label></dt>
                                <dd>
                                        <div class="inputAddon">
-                                               <input type="text" id="wysiwygIcon" name="wysiwygIcon" value="{$wysiwygIcon}" class="medium">
-                                               <a href="#" class="inputSuffix button jsButtonSearchWysiwygIcon">{icon size=16 name='magnifying-glass'}</a>
+                                               <input type="text" id="wysiwygIcon" name="wysiwygIcon" value="{$wysiwygIcon}" class="medium" readonly>
+                                               <button type="button" class="inputSuffix button jsButtonSearchWysiwygIcon">{icon size=16 name='magnifying-glass'}</button>
                                        </div>
                                        {if $errorField == 'wysiwygIcon'}
                                                <small class="innerError">
@@ -277,14 +277,18 @@
 
 {include file='fontAwesomeJavaScript'}
 <script data-relocate="true">
-       require(['WoltLabSuite/Core/Ui/Style/FontAwesome'], function (UiStyleFontAwesome) {
-               elBySel('.jsButtonSearchWysiwygIcon').addEventListener('click', function(event) {
-                       event.preventDefault();
-                       
-                       UiStyleFontAwesome.open(function(iconName) {
-                               elById('wysiwygIcon').value = 'fa-' + iconName;
+       require(['WoltLabSuite/Core/Ui/Style/FontAwesome'], (UiStyleFontAwesome) => {
+               const button = document.querySelector('.jsButtonSearchWysiwygIcon');
+               const input = document.getElementById('wysiwygIcon');
+
+               function openFontAwesomePicker() {
+                       UiStyleFontAwesome.open((iconName, forceSolid) => {
+                               input.value = `${ iconName };${ String(forceSolid) }`;
                        });
-               });
+               }
+
+               button.addEventListener("click", () => openFontAwesomePicker());
+               input.addEventListener("click", () => openFontAwesomePicker());
        });
 </script>
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
index 9f1c7ef39ef93e7468336077d10de77825fd8401..05b18fa257a7a8a2a55da5ac2f2d47b748698af0 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
@@ -160,12 +160,14 @@ define(["require", "exports", "tslib", "../../Core", "../../Devtools", "../../Ev
             container.appendChild(title);
             const buttonKeep = document.createElement("button");
             buttonKeep.innerHTML = '<fa-icon size="16" name="check"></fa-icon>';
+            buttonKeep.type = "button";
             buttonKeep.classList.add("jsTooltip");
             buttonKeep.title = Language.get("wcf.editor.autosave.keep");
             buttonKeep.addEventListener("click", () => this.hideOverlay());
             container.appendChild(buttonKeep);
             const buttonDiscard = document.createElement("button");
             buttonDiscard.innerHTML = '<fa-icon size="16" name="xmark"></fa-icon>';
+            buttonDiscard.type = "button";
             buttonDiscard.classList.add("jsTooltip");
             buttonDiscard.title = Language.get("wcf.editor.autosave.discard");
             buttonDiscard.addEventListener("click", () => {

diff --git a/wcfsetup/install/files/lib/system/package/plugin/BBCodePackageInstallationPlugin.class.php b/wcfsetup/install/files/lib/system/package/plugin/BBCodePackageInstallationPlugin.class.php
index 52fcc5f8c8d0e6bc53126ea35376910bb9fbf13e..79d7011809e376ea1a27597a2747121d932a78bc 100644 (file)
--- a/wcfsetup/install/files/lib/system/package/plugin/BBCodePackageInstallationPlugin.class.php
+++ b/wcfsetup/install/files/lib/system/package/plugin/BBCodePackageInstallationPlugin.class.php
@@ -104,6 +104,13 @@ class BBCodePackageInstallationPlugin extends AbstractXMLPackageInstallationPlug
                     $nodeValue[$attributeNo][$attributeValue->tagName] = $attributeValue->nodeValue;
                 }
             }
+        } else if ($element->tagName === 'wysiwygicon') {
+            $solid = $element->getAttribute('solid');
+            $nodeValue = \sprintf(
+                "%s;%s",
+                $element->nodeValue,
+                $solid === 'true' ? 'true' : 'false'
+            );
         }
 
         $elements[$element->tagName] = $nodeValue;