From fe5c979b90a09542272505507ca1dbebefa1915c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 10 Jun 2026 20:50:05 -0400
Subject: [PATCH 01/11] fix composer title

---
 static/lib/composer.js                              | 13 ++++++-------
 .../templates/partials/composer-title-container.tpl |  4 ++--
 .../templates/partials/composer-write-preview.tpl   |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/static/lib/composer.js b/static/lib/composer.js
index 8990041..ac341d3 100644
--- a/static/lib/composer.js
+++ b/static/lib/composer.js
@@ -445,16 +445,15 @@ define('composer', [
 		const privileges = postData.category ? postData.category.privileges : ajaxify.data.privileges;
 		const topicTemplate = isTopic && postData.category ? postData.category.topicTemplate : '';
 
+		const titleLabel = isEditing ?
+			await translator.translateKey('topic:composer.editing-in', [`"${postData.title}"`]) :
+			await translator.translateKey('topic:composer.replying-to', [`"${postData.title}"`]);
+
 		let data = {
 			topicTitle: postData.title,
 			titleLength: postData.title.length,
-			titleLabel: translator.compile(
-				isEditing ?
-					'topic:composer.editing-in' :
-					'topic:composer.replying-to',
-				`"${postData.title}"`
-			),
-			body: utils.escapeHTML(translator.escape(postData.body) || topicTemplate),
+			titleLabel: titleLabel,
+			body: postData.body || topicTemplate,
 			mobile: composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm',
 			resizable: true,
 			thumb: postData.thumb,
diff --git a/static/templates/partials/composer-title-container.tpl b/static/templates/partials/composer-title-container.tpl
index c75f294..a853340 100644
--- a/static/templates/partials/composer-title-container.tpl
+++ b/static/templates/partials/composer-title-container.tpl
@@ -13,9 +13,9 @@
 
 	<div data-component="composer/title" class="position-relative flex-1" style="min-width: 0;">
 		{{{ if isTopicOrMain }}}
-		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{topicTitle}" />
+		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{{escapeTxHtml(topicTitle)}}" />
 		{{{ else }}}
-		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{titleLabel}</span>
+		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{{escapeTxHtml(titleLabel)}}</span>
 		{{{ end }}}
 		<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
 			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
diff --git a/static/templates/partials/composer-write-preview.tpl b/static/templates/partials/composer-write-preview.tpl
index b820c94..4357960 100644
--- a/static/templates/partials/composer-write-preview.tpl
+++ b/static/templates/partials/composer-write-preview.tpl
@@ -2,7 +2,7 @@
 	<div class="write-container d-flex d-md-flex w-50 position-relative">
 		<div component="composer/post-queue/alert" class="m-2 alert alert-info fade pe-none position-absolute top-0 start-0 alert-dismissible">[[modules:composer.post-queue-alert]]<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>
 		<div class="draft-icon position-absolute end-0 top-0 mx-2 my-1 hidden-md hidden-lg"></div>
-		<textarea class="write shadow-none rounded-1 w-100 form-control overscroll-behavior-contain" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
+		<textarea class="write shadow-none rounded-1 w-100 form-control overscroll-behavior-contain" placeholder="[[modules:composer.textarea.placeholder]]">{{escapeTxHtml(body)}}</textarea>
 	</div>
 	<div class="preview-container d-none d-md-flex w-50">
 		<div class="preview w-100 overflow-auto"></div>

From 6fbe33029410ec51b9e14aca6b2dc756e5fbc99c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Fri, 12 Jun 2026 14:08:17 -0400
Subject: [PATCH 02/11] fix drafts and titles

---
 library.js                                       | 16 ++++++++++------
 static/lib/composer/drafts.js                    | 12 ++++++------
 .../partials/composer-title-container.tpl        |  4 ++--
 .../partials/composer-write-preview.tpl          |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/library.js b/library.js
index dfb73d5..4e9c92b 100644
--- a/library.js
+++ b/library.js
@@ -115,6 +115,7 @@ plugin.filterComposerBuild = async function (hookData) {
 	await checkPrivileges(req, res);
 
 	const [
+		{ userLang },
 		isMainPost,
 		postData,
 		topicData,
@@ -127,6 +128,7 @@ plugin.filterComposerBuild = async function (hookData) {
 		canTagTopics,
 		canScheduleTopics,
 	] = await Promise.all([
+		user.getSettings(req.uid),
 		posts.isMain(req.query.pid),
 		getPostData(req),
 		getTopicData(req),
@@ -162,6 +164,13 @@ plugin.filterComposerBuild = async function (hookData) {
 	const topicTitle = topicData && topicData.title ?
 		topicData.title :
 		validator.escape(String(req.query.title || ''));
+
+	const titleLabel = await translator.translateKey(translator.compile(
+		isEditing ?
+			'topic:composer.editing-in' :
+			'topic:composer.replying-to',
+		`"${topicTitle}"`
+	), userLang);
 	return {
 		req: req,
 		res: res,
@@ -180,12 +189,7 @@ plugin.filterComposerBuild = async function (hookData) {
 			// can't use title property as that is used for page title
 			topicTitle: topicTitle,
 			titleLength: topicTitle ? topicTitle.length : 0,
-			titleLabel: translator.compile(
-				isEditing ?
-					'topic:composer.editing-in' :
-					'topic:composer.replying-to',
-				`"${topicTitle}"`
-			),
+			titleLabel: titleLabel,
 
 			topic: topicData,
 			thumb: topicData ? topicData.thumb : '',
diff --git a/static/lib/composer/drafts.js b/static/lib/composer/drafts.js
index f2f3a63..9ad7076 100644
--- a/static/lib/composer/drafts.js
+++ b/static/lib/composer/drafts.js
@@ -66,14 +66,14 @@ define('composer/drafts', ['api', 'hooks'], function (api, hooks) {
 			}
 			$(window).trigger('action:composer.drafts.get', {
 				save_id: save_id,
-				draft: draft,
+				draft: { ...draft },
 				storage: storage,
 			});
 			return draft;
 		} catch (e) {
 			console.warn(`[composer/drafts] Could not get draft ${save_id}, removing`);
-			drafts.removeFromDraftList('available');
-			drafts.removeFromDraftList('open');
+			drafts.removeFromDraftList('available', save_id);
+			drafts.removeFromDraftList('open', save_id);
 			return null;
 		}
 	};
@@ -263,8 +263,8 @@ define('composer/drafts', ['api', 'hooks'], function (api, hooks) {
 				fromDraft: true,
 				save_id: draft.save_id,
 				cid: draft.cid,
-				handle: app.user && app.user.uid ? undefined : utils.escapeHTML(draft.handle),
-				title: utils.escapeHTML(draft.title),
+				handle: app.user && app.user.uid ? undefined : draft.handle,
+				title: draft.title,
 				body: draft.text,
 				tags: String(draft.tags || '').split(','),
 				thumbs: draft.thumbs || [],
@@ -288,7 +288,7 @@ define('composer/drafts', ['api', 'hooks'], function (api, hooks) {
 				fromDraft: true,
 				save_id: draft.save_id,
 				pid: draft.pid,
-				title: draft.title ? utils.escapeHTML(draft.title) : undefined,
+				title: draft.title || undefined,
 				body: draft.text,
 				thumbs: draft.thumbs || [],
 			};
diff --git a/static/templates/partials/composer-title-container.tpl b/static/templates/partials/composer-title-container.tpl
index a853340..c75f294 100644
--- a/static/templates/partials/composer-title-container.tpl
+++ b/static/templates/partials/composer-title-container.tpl
@@ -13,9 +13,9 @@
 
 	<div data-component="composer/title" class="position-relative flex-1" style="min-width: 0;">
 		{{{ if isTopicOrMain }}}
-		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{{escapeTxHtml(topicTitle)}}" />
+		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{topicTitle}" />
 		{{{ else }}}
-		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{{escapeTxHtml(titleLabel)}}</span>
+		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{titleLabel}</span>
 		{{{ end }}}
 		<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
 			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
diff --git a/static/templates/partials/composer-write-preview.tpl b/static/templates/partials/composer-write-preview.tpl
index 4357960..b820c94 100644
--- a/static/templates/partials/composer-write-preview.tpl
+++ b/static/templates/partials/composer-write-preview.tpl
@@ -2,7 +2,7 @@
 	<div class="write-container d-flex d-md-flex w-50 position-relative">
 		<div component="composer/post-queue/alert" class="m-2 alert alert-info fade pe-none position-absolute top-0 start-0 alert-dismissible">[[modules:composer.post-queue-alert]]<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>
 		<div class="draft-icon position-absolute end-0 top-0 mx-2 my-1 hidden-md hidden-lg"></div>
-		<textarea class="write shadow-none rounded-1 w-100 form-control overscroll-behavior-contain" placeholder="[[modules:composer.textarea.placeholder]]">{{escapeTxHtml(body)}}</textarea>
+		<textarea class="write shadow-none rounded-1 w-100 form-control overscroll-behavior-contain" placeholder="[[modules:composer.textarea.placeholder]]">{body}</textarea>
 	</div>
 	<div class="preview-container d-none d-md-flex w-50">
 		<div class="preview w-100 overflow-auto"></div>

From 7d339f871c243593e92c31a475dbb98e92ec97c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Fri, 12 Jun 2026 14:08:47 -0400
Subject: [PATCH 03/11] chore: up compat

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 200814f..7d97a44 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   },
   "readmeFilename": "README.md",
   "nbbpm": {
-    "compatibility": "^4.13.0"
+    "compatibility": "^4.14.0"
   },
   "dependencies": {
     "screenfull": "^5.0.2",

From 8b8d30f17fff7a01e2e8155ddf1901322a8fa1e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sat, 13 Jun 2026 13:54:54 -0400
Subject: [PATCH 04/11] fix: post body getting translated when quoting

moved the translation for replying-to and editing-in into the template, it was duplicated
---
 library.js                                    |  9 ------
 static/lib/composer.js                        | 30 +++++++------------
 .../partials/composer-title-container.tpl     | 10 ++++++-
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/library.js b/library.js
index 4e9c92b..2b5820e 100644
--- a/library.js
+++ b/library.js
@@ -115,7 +115,6 @@ plugin.filterComposerBuild = async function (hookData) {
 	await checkPrivileges(req, res);
 
 	const [
-		{ userLang },
 		isMainPost,
 		postData,
 		topicData,
@@ -128,7 +127,6 @@ plugin.filterComposerBuild = async function (hookData) {
 		canTagTopics,
 		canScheduleTopics,
 	] = await Promise.all([
-		user.getSettings(req.uid),
 		posts.isMain(req.query.pid),
 		getPostData(req),
 		getTopicData(req),
@@ -165,12 +163,6 @@ plugin.filterComposerBuild = async function (hookData) {
 		topicData.title :
 		validator.escape(String(req.query.title || ''));
 
-	const titleLabel = await translator.translateKey(translator.compile(
-		isEditing ?
-			'topic:composer.editing-in' :
-			'topic:composer.replying-to',
-		`"${topicTitle}"`
-	), userLang);
 	return {
 		req: req,
 		res: res,
@@ -189,7 +181,6 @@ plugin.filterComposerBuild = async function (hookData) {
 			// can't use title property as that is used for page title
 			topicTitle: topicTitle,
 			titleLength: topicTitle ? topicTitle.length : 0,
-			titleLabel: titleLabel,
 
 			topic: topicData,
 			thumb: topicData ? topicData.thumb : '',
diff --git a/static/lib/composer.js b/static/lib/composer.js
index ac341d3..e200948 100644
--- a/static/lib/composer.js
+++ b/static/lib/composer.js
@@ -203,7 +203,7 @@ define('composer', [
 		push(pushData);
 	};
 
-	composer.addQuote = function (data) {
+	composer.addQuote = async function (data) {
 		// tid, toPid, selectedPid, title, username, text, uuid
 		data.uuid = data.uuid || composer.active;
 
@@ -227,13 +227,14 @@ define('composer', [
 		const quoteKey = useTopicLink ?
 			`> ${translator.compile('modules:composer.user-said-in', data.username, topicLink)}\n>\n` :
 			`> ${translator.compile('modules:composer.user-said', data.username, postHref)}\n>\n`;
+		const quoteText = await translator.translate(quoteKey, config.defaultLang);
 
 		if (data.uuid === undefined) {
 			composer.newReply({
 				tid: data.tid,
 				toPid: data.toPid,
 				title: data.title,
-				body: quoteKey + data.body,
+				body: quoteText + data.body,
 			});
 			return;
 		} else if (data.uuid !== composer.active) {
@@ -245,16 +246,13 @@ define('composer', [
 		const bodyEl = postContainer.find('textarea');
 		const prevText = bodyEl.val();
 
-		translator.translate(quoteKey, config.defaultLang, function (translated) {
-			composer.posts[data.uuid].body = (prevText.length ? prevText + '\n\n' : '') + translated + data.body;
-			bodyEl.val(composer.posts[data.uuid].body);
-			focusElements(postContainer);
-			preview.render(postContainer);
-		});
+		composer.posts[data.uuid].body = (prevText.length ? prevText + '\n\n' : '') + quoteText + data.body;
+		bodyEl.val(composer.posts[data.uuid].body);
+		focusElements(postContainer);
+		preview.render(postContainer);
 	};
 
 	composer.newReply = async function (data) {
-		const translated = await translator.translate(data.body, config.defaultLang);
 		let pushData = {
 			fromDraft: data.fromDraft,
 			save_id: data.save_id,
@@ -262,8 +260,8 @@ define('composer', [
 			tid: data.tid,
 			toPid: data.toPid,
 			title: data.title,
-			body: translated,
-			modified: !!(translated && translated.length),
+			body: data.body,
+			modified: !!(data.body && data.body.length),
 			isMain: false,
 		};
 		({ pushData } = await hooks.fire('filter:composer.reply.push', {
@@ -445,14 +443,10 @@ define('composer', [
 		const privileges = postData.category ? postData.category.privileges : ajaxify.data.privileges;
 		const topicTemplate = isTopic && postData.category ? postData.category.topicTemplate : '';
 
-		const titleLabel = isEditing ?
-			await translator.translateKey('topic:composer.editing-in', [`"${postData.title}"`]) :
-			await translator.translateKey('topic:composer.replying-to', [`"${postData.title}"`]);
-
 		let data = {
+			action: postData.action,
 			topicTitle: postData.title,
 			titleLength: postData.title.length,
-			titleLabel: titleLabel,
 			body: postData.body || topicTemplate,
 			mobile: composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm',
 			resizable: true,
@@ -504,10 +498,6 @@ define('composer', [
 			}
 			composerTemplate = $(composerTemplate);
 
-			composerTemplate.find('.title, textarea.write').each(function () {
-				$(this).text(translator.unescape($(this).text()));
-			});
-
 			composerTemplate.attr('data-uuid', post_uuid);
 
 			$(document.body).append(composerTemplate);
diff --git a/static/templates/partials/composer-title-container.tpl b/static/templates/partials/composer-title-container.tpl
index c75f294..7eefecd 100644
--- a/static/templates/partials/composer-title-container.tpl
+++ b/static/templates/partials/composer-title-container.tpl
@@ -15,7 +15,15 @@
 		{{{ if isTopicOrMain }}}
 		<input class="title form-control h-100 rounded-1 shadow-none" type="text" placeholder="[[topic:composer.title-placeholder]]" value="{topicTitle}" />
 		{{{ else }}}
-		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">{titleLabel}</span>
+		<span class="{{{ if !template.compose }}}d-none d-md-block{{{ else }}}d-block{{{ end }}} title h-100 text-truncate">
+			{{{ if (./action == "posts.reply") }}}
+			{{tx("topic:composer.replying-to", txEscape(quote(./topicTitle)))}}
+			{{{ end }}}
+
+			{{{ if (./action == "posts.edit") }}}
+			{{tx("topic:composer.editing-in", txEscape(quote(./topicTitle)))}}
+			{{{ end }}}
+		</span>
 		{{{ end }}}
 		<div id="quick-search-container" class="quick-search-container mt-2 dropdown-menu d-block p-2 hidden">
 			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>

From 4e5703ea3707255168f445b0ef7c4c7e97bf8adc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sun, 14 Jun 2026 13:14:11 -0400
Subject: [PATCH 05/11] translate titles dropdown items

---
 static/templates/partials/composer-formatting.tpl | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/templates/partials/composer-formatting.tpl b/static/templates/partials/composer-formatting.tpl
index 5b148ec..9e911fa 100644
--- a/static/templates/partials/composer-formatting.tpl
+++ b/static/templates/partials/composer-formatting.tpl
@@ -6,7 +6,7 @@
 			{{{ else }}}
 			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
 			{{{ if ./dropdownItems.length }}}
-			<li class="dropdown dropdown-left bottom-sheet" title="{./title}">
+			<li class="dropdown dropdown-left bottom-sheet" title="{tx(./title)}">
 				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{./title}">
 					<i class="{./className}"></i>
 				</button>
@@ -14,7 +14,7 @@
 				{{{ each ./dropdownItems }}}
 					<li>
 						<a href="#" data-format="{./name}" class="dropdown-item rounded-1 position-relative" role="menuitem">
-							<i class="{./className} text-secondary"></i> {./text}
+							<i class="{./className} text-secondary"></i> {tx(./text)}
 							{{{ if ./badge }}}
 							<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>
 							{{{ end }}}
@@ -24,8 +24,8 @@
 				</ul>
 			</li>
 			{{{ else }}}
-			<li title="{./title}">
-				<button data-format="{./name}" class="btn btn-sm btn-link text-reset position-relative" aria-label="{./title}">
+			<li title="{tx(./title)}">
+				<button data-format="{./name}" class="btn btn-sm btn-link text-reset position-relative" aria-label="{tx(./title)}">
 					<i class="{./className}"></i>
 					{{{ if ./badge }}}
 					<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>

From 5e70f841171c45fd41618c430bdcf6954a969f29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sun, 14 Jun 2026 17:32:52 -0400
Subject: [PATCH 06/11] use translateKey

---
 static/lib/composer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/lib/composer.js b/static/lib/composer.js
index e200948..e0ff0e6 100644
--- a/static/lib/composer.js
+++ b/static/lib/composer.js
@@ -227,7 +227,7 @@ define('composer', [
 		const quoteKey = useTopicLink ?
 			`> ${translator.compile('modules:composer.user-said-in', data.username, topicLink)}\n>\n` :
 			`> ${translator.compile('modules:composer.user-said', data.username, postHref)}\n>\n`;
-		const quoteText = await translator.translate(quoteKey, config.defaultLang);
+		const quoteText = await translator.translateKey(quoteKey, config.defaultLang);
 
 		if (data.uuid === undefined) {
 			composer.newReply({

From 29a2ab7bdb2a3af0afb562db8a028273f90daa29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 15 Jun 2026 00:23:32 -0400
Subject: [PATCH 07/11] remove validator.escape

mobile mobile header to partial
fix image drop on /compose
---
 library.js                                    |  6 ++---
 static/templates/compose.tpl                  |  4 ++-
 static/templates/composer.tpl                 | 25 ++-----------------
 .../partials/composer-mobile-header.tpl       | 21 ++++++++++++++++
 4 files changed, 29 insertions(+), 27 deletions(-)
 create mode 100644 static/templates/partials/composer-mobile-header.tpl

diff --git a/library.js b/library.js
index 2b5820e..6868a59 100644
--- a/library.js
+++ b/library.js
@@ -161,7 +161,7 @@ plugin.filterComposerBuild = async function (hookData) {
 	const cid = req.query.cid || '';
 	const topicTitle = topicData && topicData.title ?
 		topicData.title :
-		validator.escape(String(req.query.title || ''));
+		String(req.query.title || '');
 
 	return {
 		req: req,
@@ -226,7 +226,7 @@ async function checkPrivileges(req, res) {
 
 function generateDiscardRoute(req, topicData) {
 	if (req.query.cid) {
-		return `${nconf.get('relative_path')}/category/${validator.escape(String(req.query.cid))}`;
+		return `${nconf.get('relative_path')}/category/${req.query.cid}`;
 	} else if ((req.query.tid || req.query.pid)) {
 		if (topicData) {
 			return `${nconf.get('relative_path')}/topic/${topicData.slug}`;
@@ -244,7 +244,7 @@ async function generateBody(req, postData) {
 		body = `${translated}\n` +
 			`> ${postData ? `${postData.content.replace(/\n/g, '\n> ')}\n\n` : ''}`;
 	} else if (req.query.body || req.query.content) {
-		body = validator.escape(String(req.query.body || req.query.content));
+		body = req.query.body || req.query.content;
 	} else {
 		body = postData ? postData.content : '';
 	}
diff --git a/static/templates/compose.tpl b/static/templates/compose.tpl
index 9fb4300..caa18cc 100644
--- a/static/templates/compose.tpl
+++ b/static/templates/compose.tpl
@@ -1,5 +1,5 @@
 <div component="composer" class="composer pb-3 h-100 {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}"{{{ if !disabled }}} style="visibility: inherit;"{{{ end }}}>
-	<div class="composer-container d-flex flex-column gap-1 h-100">
+	<div class="composer-container d-flex flex-column gap-1 h-100 position-relative">
 		<form id="compose-form" method="post">
 			{{{ if pid }}}
 			<input type="hidden" name="pid" value="{pid}" />
@@ -23,5 +23,7 @@
 		{{{ if isTopicOrMain }}}
 		<!-- IMPORT partials/composer-tags.tpl -->
 		{{{ end }}}
+
+		<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
 	</div>
 </div>
diff --git a/static/templates/composer.tpl b/static/templates/composer.tpl
index e5abf24..edaf8fd 100644
--- a/static/templates/composer.tpl
+++ b/static/templates/composer.tpl
@@ -1,27 +1,6 @@
 <div component="composer" class="composer {{{ if resizable }}} resizable{{{ end }}}{{{ if !isTopicOrMain }}} reply{{{ end }}}">
-	<div class="composer-container d-flex flex-column gap-1 h-100">
-		<!-- mobile header -->
-		<nav class="navbar fixed-top mobile-navbar text-bg-primary d-flex d-md-none flex-nowrap gap-1 px-1">
-			<div class="btn-group">
-				<button class="btn btn-sm btn-primary composer-discard fs-5" data-action="discard" tabindex="-1"><i class="fa fa-fw fa-times"></i></button>
-				<button class="btn btn-sm btn-primary composer-minimize fs-5" data-action="minimize" tabindex="-1"><i class="fa fa-fw fa-minus"></i></button>
-			</div>
-			{{{ if isTopic }}}
-			<div class="flex-1" style="min-width: 0px;">
-				<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
-			</div>
-			{{{ end }}}
-			{{{ if !isTopicOrMain }}}
-			<h4 class="title text-center text-bg-primary text-truncate fs-6 mb-0 px-2">{titleLabel}</h4>
-			{{{ end }}}
-
-			<div class="d-flex gap-1 flex-nowrap">
-				<button class="btn btn-sm btn-primary display-scheduler fs-5 {{{ if !canSchedule }}} hidden{{{ end }}}">
-					<i class="fa fa-fw fa-clock-o"></i>
-				</button>
-				<button class="btn btn-sm btn-primary composer-submit fs-5" data-action="post" tabindex="-1"><i class="fa fa-fw fa-chevron-right"></i></button>
-			</div>
-		</nav>
+	<div class="composer-container d-flex flex-column gap-1 h-100 position-relative">
+		<!-- IMPORT partials/composer-mobile-header.tpl -->
 		<div class="p-2 d-flex flex-column gap-1 h-100">
 			<!-- IMPORT partials/composer-title-container.tpl -->
 
diff --git a/static/templates/partials/composer-mobile-header.tpl b/static/templates/partials/composer-mobile-header.tpl
new file mode 100644
index 0000000..4830786
--- /dev/null
+++ b/static/templates/partials/composer-mobile-header.tpl
@@ -0,0 +1,21 @@
+<nav class="navbar fixed-top mobile-navbar text-bg-primary d-flex d-md-none flex-nowrap gap-1 px-1">
+	<div class="btn-group">
+		<button class="btn btn-sm btn-primary composer-discard fs-5" data-action="discard" tabindex="-1"><i class="fa fa-fw fa-times"></i></button>
+		<button class="btn btn-sm btn-primary composer-minimize fs-5" data-action="minimize" tabindex="-1"><i class="fa fa-fw fa-minus"></i></button>
+	</div>
+	{{{ if isTopic }}}
+	<div class="flex-1" style="min-width: 0px;">
+		<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
+	</div>
+	{{{ end }}}
+	{{{ if !isTopicOrMain }}}
+	<h4 class="title text-center text-bg-primary text-truncate fs-6 mb-0 px-2">{titleLabel}</h4>
+	{{{ end }}}
+
+	<div class="d-flex gap-1 flex-nowrap">
+		<button class="btn btn-sm btn-primary display-scheduler fs-5 {{{ if !canSchedule }}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-clock-o"></i>
+		</button>
+		<button class="btn btn-sm btn-primary composer-submit fs-5" data-action="post" tabindex="-1"><i class="fa fa-fw fa-chevron-right"></i></button>
+	</div>
+</nav>
\ No newline at end of file

From 4188102efbbba72d017b6bee0a33c56c1585aace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 15 Jun 2026 00:27:01 -0400
Subject: [PATCH 08/11] remove validator dep

---
 library.js   | 1 -
 package.json | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/library.js b/library.js
index 6868a59..fd1157c 100644
--- a/library.js
+++ b/library.js
@@ -2,7 +2,6 @@
 
 
 const nconf = nodebb.require('nconf');
-const validator = require('validator');
 
 const plugins = nodebb.require('./src/plugins');
 const topics = nodebb.require('./src/topics');
diff --git a/package.json b/package.json
index 7d97a44..5f51727 100644
--- a/package.json
+++ b/package.json
@@ -29,8 +29,7 @@
     "compatibility": "^4.14.0"
   },
   "dependencies": {
-    "screenfull": "^5.0.2",
-    "validator": "^13.7.0"
+    "screenfull": "^5.0.2"
   },
   "devDependencies": {
     "eslint": "^10.0.0",

From d0dfdcc3a96bb727dd06f3d8965f7b0e61804802 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 15 Jun 2026 22:55:18 -0400
Subject: [PATCH 09/11] fix: weird mobile/desktop logic that didn't let you
 control where to show formatting buttons

just use BS5 classes to control visibility
remove unused tags formatting button
check privileges before adding upload buttons
---
 library.js                                    | 57 ++++++++++++-------
 static/lib/composer.js                        |  2 +-
 .../partials/composer-formatting.tpl          | 22 +------
 websockets.js                                 |  4 +-
 4 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/library.js b/library.js
index fd1157c..0dc5d6c 100644
--- a/library.js
+++ b/library.js
@@ -42,27 +42,20 @@ plugin.addAdminNavigation = async function (header) {
 	return header;
 };
 
-plugin.getFormattingOptions = async function () {
+plugin.getFormattingOptions = async function (uid) {
 	const defaultVisibility = {
-		mobile: true,
-		desktop: true,
+		// use d-none d-lg-block, visible on desktop
+		// use d-block d-lg-none, visible on mobile
+		class: 'd-block',
 
 		// op or reply
 		main: true,
 		reply: true,
 	};
 	let payload = {
+		uid,
 		defaultVisibility,
 		options: [
-			{
-				name: 'tags',
-				title: '[[global:tags.tags]]',
-				className: 'fa fa-tags',
-				visibility: {
-					...defaultVisibility,
-					desktop: false,
-				},
-			},
 			{
 				name: 'zen',
 				title: '[[modules:composer.zen-mode]]',
@@ -71,16 +64,36 @@ plugin.getFormattingOptions = async function () {
 			},
 		],
 	};
-	if (parseInt(meta.config.allowTopicsThumbnail, 10) === 1) {
+	const [canUploadImage, canUploadFile] = await privileges.global.can(
+		['upload:post:image', 'upload:post:file'], uid
+	);
+	if (canUploadImage) {
+		if (meta.config.allowTopicsThumbnail) {
+			payload.options.push({
+				name: 'thumbs',
+				title: '[[topic:composer.thumb-title]]',
+				className: 'fa fa-address-card-o',
+				badge: true,
+				visibility: {
+					...defaultVisibility,
+					reply: false,
+				},
+			});
+		}
 		payload.options.push({
-			name: 'thumbs',
-			title: '[[topic:composer.thumb-title]]',
-			className: 'fa fa-address-card-o',
-			badge: true,
-			visibility: {
-				...defaultVisibility,
-				reply: false,
-			},
+			name: 'picture',
+			title: '[[modules:composer.upload-picture]]',
+			className: 'fa fa-file-image-o',
+			visibility: defaultVisibility,
+		});
+	}
+
+	if (canUploadFile) {
+		payload.options.push({
+			name: 'upload',
+			title: '[[modules:composer.upload-file]]',
+			className: 'fa fa-file-o',
+			visibility: defaultVisibility,
 		});
 	}
 
@@ -134,7 +147,7 @@ plugin.filterComposerBuild = async function (hookData) {
 		]),
 		user.isAdministrator(req.uid),
 		isModerator(req),
-		plugin.getFormattingOptions(),
+		plugin.getFormattingOptions(req.uid),
 		getTagWhitelist(req.query, req.uid),
 		privileges.global.get(req.uid),
 		canTag(req),
diff --git a/static/lib/composer.js b/static/lib/composer.js
index e0ff0e6..e4ad15b 100644
--- a/static/lib/composer.js
+++ b/static/lib/composer.js
@@ -485,7 +485,7 @@ define('composer', [
 			app.toggleNavbar(false);
 		}
 
-		postData.mobile = composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm';
+		postData.mobile = data.mobile;
 
 		({ postData, createData: data } = await hooks.fire('filter:composer.create', {
 			postData: postData,
diff --git a/static/templates/partials/composer-formatting.tpl b/static/templates/partials/composer-formatting.tpl
index 9e911fa..685b863 100644
--- a/static/templates/partials/composer-formatting.tpl
+++ b/static/templates/partials/composer-formatting.tpl
@@ -4,9 +4,9 @@
 			{{{ if ./spacer }}}
 			<li class="small spacer"></li>
 			{{{ else }}}
-			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
+			{{{ if ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply)) }}}
 			{{{ if ./dropdownItems.length }}}
-			<li class="dropdown dropdown-left bottom-sheet" title="{tx(./title)}">
+			<li class="dropdown dropdown-left bottom-sheet {./visibility.class}" title="{tx(./title)}">
 				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{./title}">
 					<i class="{./className}"></i>
 				</button>
@@ -24,7 +24,7 @@
 				</ul>
 			</li>
 			{{{ else }}}
-			<li title="{tx(./title)}">
+			<li title="{tx(./title)}" class="{./visibility.class}">
 				<button data-format="{./name}" class="btn btn-sm btn-link text-reset position-relative" aria-label="{tx(./title)}">
 					<i class="{./className}"></i>
 					{{{ if ./badge }}}
@@ -37,22 +37,6 @@
 			{{{ end }}}
 		{{{ end }}}
 
-		{{{ if canUploadImage }}}
-		<li title="[[modules:composer.upload-picture]]">
-			<button data-format="picture" class="img-upload-btn btn btn-sm btn-link text-reset" aria-label="[[modules:composer.upload-picture]]">
-				<i class="fa fa-file-image-o"></i>
-			</button>
-		</li>
-		{{{ end }}}
-
-		{{{ if canUploadFile }}}
-		<li title="[[modules:composer.upload-file]]">
-			<button data-format="upload" class="file-upload-btn btn btn-sm btn-link text-reset" aria-label="[[modules:composer.upload-file]]">
-				<i class="fa fa-file-o"></i>
-			</button>
-		</li>
-		{{{ end }}}
-
 		<form id="fileForm" method="post" enctype="multipart/form-data">
 			<input type="file" id="files" name="files[]" multiple class="hide"/>
 		</form>
diff --git a/websockets.js b/websockets.js
index 2da3b56..d1dbd12 100644
--- a/websockets.js
+++ b/websockets.js
@@ -64,8 +64,8 @@ Sockets.renderHelp = async function () {
 	return helpText;
 };
 
-Sockets.getFormattingOptions = async function () {
-	return await require('./library').getFormattingOptions();
+Sockets.getFormattingOptions = async function (socket) {
+	return await require('./library').getFormattingOptions(socket.uid);
 };
 
 Sockets.shouldQueue = async function (socket, data) {

From 15a786c37568826feb8621b401157f8d7bdf11a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 15 Jun 2026 23:42:09 -0400
Subject: [PATCH 10/11] fix: opening composer after visiting /compose

---
 static/lib/composer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/static/lib/composer.js b/static/lib/composer.js
index e4ad15b..51023d3 100644
--- a/static/lib/composer.js
+++ b/static/lib/composer.js
@@ -106,7 +106,9 @@ define('composer', [
 
 		// Find a match
 		for (const uuid of Object.keys(composer.posts)) {
-			if (composer.posts[uuid].hasOwnProperty(type) && id === String(composer.posts[uuid][type])) {
+			const openPost = composer.posts[uuid];
+			// make sure dom element exists too
+			if (openPost.hasOwnProperty(type) && id === String(openPost[type]) && $(`.composer[data-uuid="${uuid}"]`).length) {
 				return uuid;
 			}
 		}
@@ -124,7 +126,7 @@ define('composer', [
 		if (existingUUID) {
 			taskbar.updateActive(existingUUID);
 			if (post.body && !post.fromDraft) {
-				const postContainer = $('.composer[data-uuid="' + existingUUID + '"]');
+				const postContainer = $(`.composer[data-uuid="${existingUUID}"]`);
 				const bodyEl = postContainer.find('textarea');
 				const prevText = bodyEl.val();
 				composer.posts[existingUUID].body = (prevText.length ? prevText + '\n\n' : '') + post.body;

From 7e1dea22c7074151dba27bbe84269f0dc7bca80c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Tue, 16 Jun 2026 00:35:51 -0400
Subject: [PATCH 11/11] remove tx escape on body, already escaped in template

---
 library.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/library.js b/library.js
index 0dc5d6c..ef6bb42 100644
--- a/library.js
+++ b/library.js
@@ -249,6 +249,7 @@ function generateDiscardRoute(req, topicData) {
 
 async function generateBody(req, postData) {
 	let body;
+	console.log('generate body', req.query, postData);
 	// Quoted reply
 	if (req.query.toPid && parseInt(req.query.quoted, 10) === 1 && postData) {
 		const username = await user.getUserField(postData.uid, 'username');
@@ -260,7 +261,7 @@ async function generateBody(req, postData) {
 	} else {
 		body = postData ? postData.content : '';
 	}
-	return translator.escape(body);
+	return body;
 }
 
 async function getPostData(req) {