Deprecate functions no longer required in the FormBuilder for quotes.

Implement new class `IWysiwygTabFormContainer` which contains an icon for display and the information of an internal name

Author: Cyperghost

com.woltlab.wcf/templates/shared_wysiwygFormField.tpl

@@ -14,26 +14,3 @@
 *}>{$field->getValue()}</textarea>
 
 {include file='shared_wysiwyg' wysiwygSelector=$field->getPrefixedId()}
-
-{if $field->supportsQuotes()}
-	<script data-relocate="true">
-		// Bootstrap for window.__wcf_bc_eventHandler
-		require(['WoltLabSuite/Core/Bootstrap'], function(Bootstrap) {
-			{include file='shared_messageQuoteManager' wysiwygSelector=$field->getPrefixedId() supportPaste=true}
-			
-			{if $field->getQuoteData() !== null}
-				var quoteHandler = new WCF.Message.Quote.Handler(
-					$quoteManager,
-					'{$field->getQuoteData('actionClass')|encodeJS}',
-					'{$field->getQuoteData('objectType')}',
-					'{$field->getQuoteData('selectors')[container]}',
-					'{$field->getQuoteData('selectors')[messageBody]}',
-					'{$field->getQuoteData('selectors')[messageContent]}',
-					true
-				);
-				
-				elData(elById('{@$field->getPrefixedId()|encodeJS}'), 'quote-handler', quoteHandler);
-			{/if}
-		});
-	</script>
-{/if}

com.woltlab.wcf/templates/shared_wysiwygQuoteFormContainer.tpl

@@ -0,0 +1,16 @@
+<div id="{$container->getPrefixedId()|encodeJS}Container"{*
+	*} class="messageTabMenuContent messageTabMenuContent--quotes"></div>
+
+<script data-relocate="true">
+	require(["WoltLabSuite/Core/Component/Quote/List"], ({ setup }) => {
+		setup("{$container->getWysiwygId()|encodeJS}", "{$container->getPrefixedId()|encodeJS}Container");
+	});
+</script>
+
+{include file='shared_formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTab'], ({ WysiwygTab }) => {
+		new WysiwygTab('{$container->getPrefixedId()|encodeJS}Container', '{$container->getName()|encodeJS}', '{$container->getWysiwygId()|encodeJS}');
+	});
+</script>

com.woltlab.wcf/templates/shared_wysiwygTabFormContainer.tpl

@@ -0,0 +1,15 @@
+<div id="{$container->getPrefixedId()}Container"{*
+	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if !$container->checkDependencies()} hidden{/if}{*
+*}>
+	{include file='shared_formContainerChildren'}
+</div>
+
+{include file='shared_formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTab'], ({ WysiwygTab }) => {
+		new WysiwygTab('{$container->getPrefixedId()|encodeJS}Container', '{$container->getName()|encodeJS}', '{$container->getWysiwygId()|encodeJS}');
+	});
+</script>

com.woltlab.wcf/templates/shared_wysiwygTabMenuFormContainer.tpl

@@ -6,7 +6,7 @@
 		<ul>
 			{foreach from=$container item='child'}
 				{if $child->isAvailable()}
-					<li data-name="{$child->getPrefixedId()|rawurlencode}Container"{if !$child->checkDependencies()} hidden{/if}>
+					<li data-name="{$child->getName()}"{if !$child->checkDependencies()} hidden{/if}>
 						<button type="button">
 							{if $child->getIcon()}{icon name=$child->getIcon()}{/if}
 							<span>{@$child->getLabel()}</span>

ts/WoltLabSuite/Core/Component/Message/MessageTabMenu.ts

@@ -87,6 +87,15 @@ class TabMenu {
     }
   }
 
+  isHiddenTab(tabName: string): boolean {
+    const tab = this.#tabs.find((element) => element.dataset.name === tabName);
+    if (tab === undefined) {
+      return true;
+    }
+
+    return tab.hidden;
+  }
+
   setTabCounter(tabName: string, value: number): void {
     const tab = this.#tabs.find((element) => element.dataset.name === tabName);
     if (tab === undefined) {

ts/WoltLabSuite/Core/Component/Quote/List.ts

@@ -29,10 +29,10 @@ class QuoteList {
   #editor: HTMLElement;
   #editorId: string;
 
-  constructor(editorId: string, editor: HTMLElement) {
+  constructor(editorId: string, editor: HTMLElement, containerId?: string) {
     this.#editorId = editorId;
     this.#editor = editor;
-    this.#container = document.getElementById(`quotes_${editorId}`)!;
+    this.#container = document.getElementById(containerId ? containerId : `quotes_${editorId}`)!;
     if (this.#container === null) {
       throw new Error(`The quotes container for '${editorId}' does not exist.`);
     }
@@ -134,7 +134,7 @@ export function refreshQuoteLists() {
   }
 }
 
-export function setup(editorId: string): void {
+export function setup(editorId: string, containerId?: string): void {
   if (quoteLists.has(editorId)) {
     return;
   }
@@ -146,7 +146,7 @@ export function setup(editorId: string): void {
 
   listenToCkeditor(editor).ready(({ ckeditor }) => {
     if (ckeditor.features.quoteBlock) {
-      quoteLists.set(editorId, new QuoteList(editorId, editor));
+      quoteLists.set(editorId, new QuoteList(editorId, editor, containerId));
     }
 
     if (ckeditor.isVisible()) {

ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTab.ts

@@ -0,0 +1,48 @@
+/**
+ * Container visibility handler implementation for a wysiwyg tab menu tab that, in addition to the
+ * tab itself, also handles the visibility of the tab menu list item.
+ *
+ * @author  Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ */
+
+import Abstract from "./Abstract";
+import * as DependencyManager from "../Manager";
+import { getTabMenu } from "WoltLabSuite/Core/Component/Message/MessageTabMenu";
+
+export class WysiwygTab extends Abstract {
+  readonly #tabName: string;
+  readonly #wysiwygId: string;
+
+  constructor(containerId: string, tabName: string, wysiwygId: string) {
+    super(containerId);
+
+    this.#tabName = tabName;
+    this.#wysiwygId = wysiwygId;
+  }
+
+  public checkContainer(): void {
+    // only consider containers that have not been hidden by their own dependencies
+    if (DependencyManager.isHiddenByDependencies(this._container)) {
+      return;
+    }
+
+    const containerIsVisible = !this._container.hidden;
+    const tabMenu = getTabMenu(this.#wysiwygId)!;
+    const containerShouldBeVisible = tabMenu.isHiddenTab(this.#tabName);
+
+    if (containerIsVisible !== containerShouldBeVisible) {
+      if (containerShouldBeVisible) {
+        tabMenu?.showTab(this.#tabName);
+      } else {
+        tabMenu?.hideTab(this.#tabName);
+      }
+
+      // Check containers again to make sure parent containers can react to changing the visibility
+      // of this container.
+      DependencyManager.checkContainers();
+    }
+  }
+}