Tab in the editor for quotes

com.woltlab.wcf/coreObject.xml

@@ -55,6 +55,9 @@
 		<coreobject>
 			<objectname>wcf\system\file\upload\UploadHandler</objectname>
 		</coreobject>
+		<coreobject>
+			<objectname>wcf\system\message\quote\MessageQuoteManager</objectname>
+		</coreobject>
 	</import>
 	<delete>
 		<coreobject name="wcf\system\user\authentication\UserAuthenticationFactory"/>

com.woltlab.wcf/objectTypeDefinition.xml

@@ -27,7 +27,6 @@
 		</definition>
 		<definition>
 			<name>com.woltlab.wcf.message.quote</name>
-			<interfacename>wcf\system\message\quote\IMessageQuoteHandler</interfacename>
 		</definition>
 		<definition>
 			<name>com.woltlab.wcf.user.recentActivityEvent</name>

com.woltlab.wcf/templates/__messageFormQuote.tpl

@@ -0,0 +1,8 @@
+<div id="quotes_{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}"
+	class="messageTabMenuContent messageTabMenuContent--quotes"></div>
+
+<script data-relocate="true">
+require(["WoltLabSuite/Core/Component/Quote/List"], ({ setup }) => {
+	setup("{if $wysiwygSelector|isset}{$wysiwygSelector}{else}text{/if}");
+});
+</script>

com.woltlab.wcf/templates/headIncludeJavaScript.tpl

@@ -101,7 +101,12 @@ window.addEventListener('pageshow', function(event) {
 					{event name='javascriptShareButtonProviders'}
 				],
 			{/if}
-			styleChanger: {if $__wcf->getStyleHandler()->showStyleChanger()}true{else}false{/if}
+			styleChanger: {if $__wcf->getStyleHandler()->showStyleChanger()}true{else}false{/if},
+			{if $__wcf->user->userID && !$__wcf->getMessageQuoteManager()->getRemoveQuoteIDs()|empty}removeQuotes: [{implode from=$__wcf->getMessageQuoteManager()->getRemoveQuoteIDs() item=uuid}'{$uuid|encodeJS}'{/implode}],{/if}
+			{if $__wcf->user->userID && !$__wcf->getMessageQuoteManager()->getUsedQuotes()|empty}usedQuotes: new Map([
+				{foreach from=$__wcf->getMessageQuoteManager()->getUsedQuotes() key=editorID item=uuids}['{$editorID|encodeJS}', [{implode from=$uuids item=uuid}'{$uuid|encodeJS}'{/implode}]]{/foreach}
+			]),
+			{/if}
 		});
 	});
 </script>

com.woltlab.wcf/templates/messageFormTabs.tpl

@@ -41,6 +41,13 @@
 				</li>
 			{/if}
 			{event name='tabMenuTabs'}
+
+			<li data-name="quotes" hidden>
+				<button type="button">
+					{icon name='quote-left'}
+					<span>{lang}wcf.bbcode.quote{/lang}</span>
+				</button>
+			</li>
 		</ul>
 	</nav>
 
@@ -53,4 +60,6 @@
 	{include file='__messageFormPoll'}
 
 	{event name='tabMenuContents'}
-</div>
+
+	{include file='__messageFormQuote'}
+</div>

com.woltlab.wcf/templates/messageFormTabsInline.tpl

@@ -44,6 +44,13 @@
 				</li>
 			{/if}
 			{event name='tabMenuTabs'}
+
+			<li data-name="quotes" hidden>
+				<button type="button">
+					{icon name='quote-left'}
+					<span>{lang}wcf.bbcode.quote{/lang}</span>
+				</button>
+			</li>
 		</ul>
 	</nav>
 
@@ -57,4 +64,6 @@
 	{include file='__messageFormPollInline'}
 
 	{event name='tabMenuContents'}
-</div>
+
+	{include file='__messageFormQuote'}
+</div>

com.woltlab.wcf/templates/shared_messageQuoteManager.tpl

@@ -1,14 +1,2 @@
-WCF.Language.addObject({
-	'wcf.message.quote.insertAllQuotes': '{jslang}wcf.message.quote.insertAllQuotes{/jslang}',
-	'wcf.message.quote.insertSelectedQuotes': '{jslang}wcf.message.quote.insertSelectedQuotes{/jslang}',
-	'wcf.message.quote.manageQuotes': '{jslang}wcf.message.quote.manageQuotes{/jslang}',
-	'wcf.message.quote.quoteSelected': '{jslang}wcf.message.quote.quoteSelected{/jslang}',
-	'wcf.message.quote.quoteAndReply': '{jslang}wcf.message.quote.quoteAndReply{/jslang}',
-	'wcf.message.quote.removeAllQuotes': '{jslang}wcf.message.quote.removeAllQuotes{/jslang}',
-	'wcf.message.quote.removeSelectedQuotes': '{jslang}wcf.message.quote.removeSelectedQuotes{/jslang}',
-	'wcf.message.quote.showQuotes': '{jslang __literal=true}wcf.message.quote.showQuotes{/jslang}'
-});
-
-{if !$wysiwygSelector|isset}{assign var=wysiwygSelector value=''}{/if}
-{if !$supportPaste|isset}{assign var=supportPaste value=false}{/if}
-var $quoteManager = new WCF.Message.Quote.Manager({@$__quoteCount}, '{$wysiwygSelector|encodeJS}', {if $supportPaste}true{else}false{/if}, [ {implode from=$__quoteRemove item=quoteID}'{$quoteID}'{/implode} ]);
+{* Deprecated since 6.2 *}
+var $quoteManager = undefined;

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

@@ -1 +1,29 @@
-{include file='shared_tabMenuFormContainer' __tabMenuCSSClassName='messageTabMenuNavigation'}
+<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}>
+	<nav class="messageTabMenuNavigation jsOnly">
+		<ul>
+			{foreach from=$container item='child'}
+				{if $child->isAvailable()}
+					<li data-name="{$child->getName()}"{if !$child->checkDependencies()} hidden{/if}>
+						<button type="button">
+							{if $child->getIcon()}{unsafe:$child->getIcon()->toHtml()}{/if}
+							<span>{@$child->getLabel()}</span>
+						</button>
+					</li>
+				{/if}
+			{/foreach}
+		</ul>
+	</nav>
+
+	{include file='shared_formContainerChildren'}
+</div>
+
+{include file='shared_formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTabMenu'], ({ WysiwygTabMenu }) => {
+		new WysiwygTabMenu('{@$container->getPrefixedId()|encodeJS}Container');
+	});
+</script>

ts/WoltLabSuite/Core/Api/Messages/Author.ts

@@ -0,0 +1,37 @@
+/**
+ * Requests render a full quote of a message.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+type Response = {
+  objectID: number;
+  authorID: number;
+  author: string;
+  time: string;
+  title: string;
+  link: string;
+  avatar: string;
+};
+
+export async function messageAuthor(className: string, objectID: number): Promise<ApiResult<Response>> {
+  const url = new URL(window.WSC_RPC_API_URL + "core/messages/message-author");
+  url.searchParams.set("className", className);
+  url.searchParams.set("objectID", objectID.toString());
+
+  let response: Response;
+  try {
+    response = (await prepareRequest(url).get().allowCaching().fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}

ts/WoltLabSuite/Core/Api/Messages/RenderQuote.ts

@@ -0,0 +1,45 @@
+/**
+ * Requests render a full quote of a message.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+type Response = {
+  objectID: number;
+  authorID: number | null;
+  author: string;
+  time: string;
+  link: string;
+  title: string;
+  avatar: string;
+  message: string | null;
+  rawMessage: string | null;
+};
+
+export async function renderQuote(
+  objectType: string,
+  className: string,
+  objectID: number,
+): Promise<ApiResult<Response>> {
+  const url = new URL(window.WSC_RPC_API_URL + "core/messages/render-quote");
+  url.searchParams.set("objectType", objectType);
+  url.searchParams.set("className", className);
+  url.searchParams.set("fullQuote", "true");
+  url.searchParams.set("objectID", objectID.toString());
+
+  let response: Response;
+  try {
+    response = (await prepareRequest(url).get().fetchAsJson()) as Response;
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue(response);
+}

ts/WoltLabSuite/Core/Api/Messages/ResetRemovalQuotes.ts

@@ -0,0 +1,24 @@
+/**
+ * Requests to reset the removal quotes.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.2
+ * @woltlabExcludeBundle tiny
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { ApiResult, apiResultFromError, apiResultFromValue } from "../Result";
+
+export async function resetRemovalQuotes(): Promise<ApiResult<[]>> {
+  const url = new URL(window.WSC_RPC_API_URL + "core/messages/reset-removal-quotes");
+
+  try {
+    await prepareRequest(url).post().fetchAsJson();
+  } catch (e) {
+    return apiResultFromError(e);
+  }
+
+  return apiResultFromValue([]);
+}

ts/WoltLabSuite/Core/BootstrapFrontend.ts

@@ -37,6 +37,8 @@ interface BootstrapOptions {
   executeCronjobs: string | undefined;
   shareButtonProviders?: ShareProvider[];
   styleChanger: boolean;
+  removeQuotes?: string[];
+  usedQuotes?: Map<string, string[]>;
 }
 
 /**
@@ -86,6 +88,20 @@ export function setup(options: BootstrapOptions): void {
     enableMobileMenu: true,
     pageMenuMainProvider: new UiPageMenuMainFrontend(),
   });
+
+  if (options.removeQuotes?.length) {
+    void import("./Component/Quote/Storage").then(({ removeQuotes }) => removeQuotes(options.removeQuotes!));
+  }
+  if (options.usedQuotes?.size) {
+    void import("./Component/Quote/Storage").then(({ markQuoteAsUsed }) => {
+      options.usedQuotes!.forEach((uuids, editorId) => {
+        for (const uuid of uuids) {
+          markQuoteAsUsed(editorId, uuid);
+        }
+      });
+    });
+  }
+
   UiPageHeaderMenu.init();
 
   if (options.styleChanger) {

ts/WoltLabSuite/Core/Component/Ckeditor.ts

@@ -163,6 +163,10 @@ class Ckeditor {
   get sourceElement(): HTMLElement {
     return this.#editor.sourceElement!;
   }
+
+  get focusTracker(): CKEditor5.Utils.FocusTracker {
+    return this.#editor.ui.focusTracker;
+  }
 }
 
 function* findModelForRemoval(

ts/WoltLabSuite/Core/Component/Comment/Add.ts

@@ -17,6 +17,8 @@ import { listenToCkeditor } from "../Ckeditor/Event";
 import { createComment } from "WoltLabSuite/Core/Api/Comments/CreateComment";
 import { getGuestToken } from "../GuestTokenDialog";
 import User from "WoltLabSuite/Core/User";
+import { clearQuotesForEditor } from "WoltLabSuite/Core/Component/Quote/Storage";
+import { setActiveEditor } from "WoltLabSuite/Core/Component/Quote/Message";
 
 type CallbackInsertComment = (commentId: number) => void;
 
@@ -180,6 +182,8 @@ export class CommentAdd {
    */
   #reset(): void {
     this.#getEditor().reset();
+    clearQuotesForEditor(this.#getEditor().sourceElement.id);
+    setActiveEditor();
 
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();

ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts

@@ -17,6 +17,8 @@ import { listenToCkeditor } from "../../Ckeditor/Event";
 import User from "WoltLabSuite/Core/User";
 import { getGuestToken } from "../../GuestTokenDialog";
 import { createResponse } from "WoltLabSuite/Core/Api/Comments/Responses/CreateResponse";
+import { clearQuotesForEditor } from "WoltLabSuite/Core/Component/Quote/Storage";
+import { setActiveEditor } from "WoltLabSuite/Core/Component/Quote/Message";
 
 type CallbackInsertResponse = (commentId: number, responseId: number) => void;
 
@@ -131,6 +133,8 @@ export class CommentResponseAdd {
    */
   #reset(): void {
     this.#getEditor().reset();
+    clearQuotesForEditor(this.#getEditor().sourceElement.id);
+    setActiveEditor();
 
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();