Fix the “Insert Media” button for HTML and template content

See https://www.woltlab.com/community/thread/301681-medien-einf%C3%BCgen-im-acp-funktioniert-nicht/

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.ts b/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.ts
index 02bb346a8b4875e70991e45505c6295f58b6d40e..6f390b307217c75fe05c33538b5994fee0d2e887 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.ts
@@ -7,12 +7,10 @@ class AcpUiCodeMirrorPage {
     this.element = document.getElementById(elementId)!;
 
     const insertButton = document.getElementById(`codemirror-${elementId}-page`)!;
-    insertButton.addEventListener("click", (ev) => this._click(ev));
+    insertButton.addEventListener("click", () => this._click());
   }
 
-  private _click(event: MouseEvent): void {
-    event.preventDefault();
-
+  private _click(): void {
     UiPageSearch.open((pageID) => this._insert(pageID));
   }
 

diff --git a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
index 1a350b797c4fb5f4092db3bb0f4f09f731694a1b..1fde7716558a80ebebbaf6edfc41987cc442479d 100644 (file)
--- a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
+++ b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
@@ -37,7 +37,15 @@ export class MediaManagerEditor extends MediaManager<MediaManagerEditorOptions>
 
     this._forceClipboard = true;
 
-    if (this._options.ckeditor !== undefined) {
+    if (this._options.ckeditor === undefined) {
+      if (typeof this._options.buttonClass === "string") {
+        document.querySelectorAll<HTMLElement>(`.${this._options.buttonClass}`).forEach((button) => {
+          button.addEventListener("click", (event) => {
+            this._click(event);
+          });
+        });
+      }
+    } else {
       const ckeditor = this._options.ckeditor;
       listenToCkeditor(ckeditor.sourceElement).bbcode(({ bbcode }) => {
         if (bbcode !== "media") {

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Search.ts b/ts/WoltLabSuite/Core/Ui/Page/Search.ts
index b5835dd1566c1000a209e59a715099974595a2d0..4d8c57fb19804425956a29cc9aff60614c83827f 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Search.ts
@@ -130,7 +130,7 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
           <dd>
             <div class="inputAddon">
               <input type="text" id="wcfUiPageSearchInput" class="long">
-              <a href="#" class="inputSuffix"><fa-icon name="search" solid></fa-icon></a>
+              <button type="button" class="button inputSuffix"><fa-icon name="search" solid></fa-icon></button>
             </div>
           </dd>
         </dl>

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 879aee520cf625ec1838ad9038d71a055abab3c4..46acdaa8524dafe29a0178a47cc1d4bf2c46b480 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -535,28 +535,27 @@ html[data-color-scheme="dark"] {
        background-color: var(--wcfEditorButtonBackground);
        display: flex;
        flex-wrap: wrap;
+       gap: 2px;
+       padding: 2px;
 
-       > li {
+       li {
+               display: flex;
                flex: 0 0 auto;
-               margin-bottom: 1px;
+       }
 
-               > a {
-                       color: var(--wcfEditorButtonText);
-                       display: block;
-                       font-size: 12px;
-                       outline: none;
-                       padding: 10px;
-                       text-align: center;
-                       font-weight: 400;
-
-                       &:hover {
-                               background-color: var(--wcfEditorButtonBackgroundActive);
-                               color: var(--wcfEditorButtonTextActive);
-                       }
+       :is(a, button) {
+               border-radius: var(--wcfBorderRadius);
+               color: var(--wcfEditorButtonText);
+               display: block;
+               font-size: 12px;
+               outline: none;
+               padding: 8px;
+               text-align: center;
+               font-weight: 400;
 
-                       .icon {
-                               color: inherit;
-                       }
+               &:hover {
+                       background-color: var(--wcfEditorButtonBackgroundActive);
+                       color: var(--wcfEditorButtonTextActive);
                }
        }
 }

diff --git a/wcfsetup/install/files/acp/templates/__boxAddContent.tpl b/wcfsetup/install/files/acp/templates/__boxAddContent.tpl
index 5f0e05fc90ecf7769023d8e59844755b8bd61d65..3379874c01af44f5e98cbe461a1d75f3a862e859 100644 (file)
--- a/wcfsetup/install/files/acp/templates/__boxAddContent.tpl
+++ b/wcfsetup/install/files/acp/templates/__boxAddContent.tpl
@@ -1,7 +1,7 @@
 {if $boxType == 'html' || $boxType == 'tpl'}
        <ul class="codemirrorToolbar">
-               <li><a href="#" id="codemirror-content{@$languageID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}">{icon name='file'}</a></li>
-               <li><a href="#" id="codemirror-content{@$languageID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}">{icon name='file-lines'}</a></li>
+               <li><button type="button" id="codemirror-content{@$languageID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}">{icon name='file'}</button></li>
+               <li><button type="button" id="codemirror-content{@$languageID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}">{icon name='file-lines'}</button></li>
        </ul>
        <script data-relocate="true">
                require([

diff --git a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
index 10483d507123fe3d3ccd1b2054aea70a98e48827..c3c5a02e2c0d2d678be77f6f60699adda77444e5 100644 (file)
--- a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
+++ b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
@@ -2,8 +2,8 @@
 
 {if $pageType == 'html' || $pageType == 'tpl'}
        <ul class="codemirrorToolbar">
-               <li><a href="#" id="codemirror-{@$__pageContentID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}">{icon name='file'}</a></li>
-               <li><a href="#" id="codemirror-{@$__pageContentID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}">{icon name='file-lines'}</a></li>
+               <li><button type="button" id="codemirror-{@$__pageContentID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}">{icon name='file'}</button></li>
+               <li><button type="button" id="codemirror-{@$__pageContentID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}">{icon name='file-lines'}</button></li>
        </ul>
        <script data-relocate="true">
                {include file='mediaJavaScript'}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.js
index f45b2011aecf6bdf830001cdc03c2f1142a2e29f..bf0b769dd9f7e54ca57714ef84d6da53aa73e262 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/CodeMirror/Page.js
@@ -6,10 +6,9 @@ define(["require", "exports", "tslib", "../../../Ui/Page/Search"], function (req
         constructor(elementId) {
             this.element = document.getElementById(elementId);
             const insertButton = document.getElementById(`codemirror-${elementId}-page`);
-            insertButton.addEventListener("click", (ev) => this._click(ev));
+            insertButton.addEventListener("click", () => this._click());
         }
-        _click(event) {
-            event.preventDefault();
+        _click() {
             UiPageSearch.open((pageID) => this._insert(pageID));
         }
         _insert(pageID) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
index 054801ee859f7262907bba32a095a5a5e4497bc1..245622ed9f2c57d237d4488439ed25ae658cebf6 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
@@ -29,7 +29,16 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand
             }, options);
             super(options);
             this._forceClipboard = true;
-            if (this._options.ckeditor !== undefined) {
+            if (this._options.ckeditor === undefined) {
+                if (typeof this._options.buttonClass === "string") {
+                    document.querySelectorAll(`.${this._options.buttonClass}`).forEach((button) => {
+                        button.addEventListener("click", (event) => {
+                            this._click(event);
+                        });
+                    });
+                }
+            }
+            else {
                 const ckeditor = this._options.ckeditor;
                 (0, Event_1.listenToCkeditor)(ckeditor.sourceElement).bbcode(({ bbcode }) => {
                     if (bbcode !== "media") {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
index a1016ac956f42e8af85bc6de5cee14bfcd7be325..9a884fffa26f6f3ec5feccd9eb3844ac895953de 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
@@ -101,7 +101,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Dom/Util", "../../La
           <dd>
             <div class="inputAddon">
               <input type="text" id="wcfUiPageSearchInput" class="long">
-              <a href="#" class="inputSuffix"><fa-icon name="search" solid></fa-icon></a>
+              <button type="button" class="button inputSuffix"><fa-icon name="search" solid></fa-icon></button>
             </div>
           </dd>
         </dl>