nodebb-plugin-composer-default 10.3.33 → 11.0.0

package/library.js

@@ -1,20 +1,19 @@
 'use strict';
 
 
-const nconf = require.main.require('nconf');
-const validator = require('validator');
-
-const plugins = require.main.require('./src/plugins');
-const topics = require.main.require('./src/topics');
-const categories = require.main.require('./src/categories');
-const posts = require.main.require('./src/posts');
-const user = require.main.require('./src/user');
-const meta = require.main.require('./src/meta');
-const privileges = require.main.require('./src/privileges');
-const translator = require.main.require('./src/translator');
-const utils = require.main.require('./src/utils');
-const helpers = require.main.require('./src/controllers/helpers');
-const SocketPlugins = require.main.require('./src/socket.io/plugins');
+const nconf = nodebb.require('nconf');
+
+const plugins = nodebb.require('./src/plugins');
+const topics = nodebb.require('./src/topics');
+const categories = nodebb.require('./src/categories');
+const posts = nodebb.require('./src/posts');
+const user = nodebb.require('./src/user');
+const meta = nodebb.require('./src/meta');
+const privileges = nodebb.require('./src/privileges');
+const tx = nodebb.require('./src/translator');
+const utils = nodebb.require('./src/utils');
+const helpers = nodebb.require('./src/controllers/helpers');
+const SocketPlugins = nodebb.require('./src/socket.io/plugins');
 const socketMethods = require('./websockets');
 
 const plugin = module.exports;
@@ -23,7 +22,7 @@ plugin.socketMethods = socketMethods;
 
 plugin.init = async function (data) {
 	const { router } = data;
-	const routeHelpers = require.main.require('./src/routes/helpers');
+	const routeHelpers = nodebb.require('./src/routes/helpers');
 	const controllers = require('./controllers');
 	SocketPlugins.composer = socketMethods;
 	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/composer-default', controllers.renderAdminPage);
@@ -43,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]]',
@@ -72,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,
 		});
 	}
 
@@ -135,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),
@@ -161,7 +173,8 @@ 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,
 		res: res,
@@ -180,12 +193,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: translator.compile(
-				isEditing ?
-					'topic:composer.editing-in' :
-					'topic:composer.replying-to',
-				`"${topicTitle}"`
-			),
 
 			topic: topicData,
 			thumb: topicData ? topicData.thumb : '',
@@ -231,7 +238,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}`;
@@ -245,15 +252,15 @@ async function generateBody(req, postData) {
 	// Quoted reply
 	if (req.query.toPid && parseInt(req.query.quoted, 10) === 1 && postData) {
 		const username = await user.getUserField(postData.uid, 'username');
-		const translated = await translator.translate(`[[modules:composer.user-said, ${username}]]`);
+		const translated = await tx.translateKey('modules:composer.user-said', [tx.escape(username)]);
 		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 : '';
 	}
-	return translator.escape(body);
+	return body;
 }
 
 async function getPostData(req) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-composer-default",
-  "version": "10.3.33",
+  "version": "11.0.0",
   "description": "Default composer for NodeBB",
   "main": "library.js",
   "repository": {
@@ -26,15 +26,13 @@
   },
   "readmeFilename": "README.md",
   "nbbpm": {
-    "compatibility": "^4.13.0"
+    "compatibility": "^4.14.0"
   },
   "dependencies": {
-    "screenfull": "^5.0.2",
-    "validator": "^13.7.0"
+    "screenfull": "^5.0.2"
   },
   "devDependencies": {
     "eslint": "^10.0.0",
-    "eslint-config-nodebb": "^2.0.1",
-    "eslint-plugin-import": "^2.31.0"
+    "eslint-config-nodebb": "^2.0.2"
   }
 }

package/static/lib/composer/categoryList.js

@@ -1,7 +1,7 @@
 'use strict';
 
 define('composer/categoryList', [
-	'categorySelector', 'taskbar', 'api', 'alerts'
+	'categorySelector', 'taskbar', 'api', 'alerts',
 ], function (categorySelector, taskbar, api, alerts) {
 	const categoryList = {};
 

package/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 || [],
 			};

package/static/lib/composer/scheduler.js

@@ -1,8 +1,8 @@
 'use strict';
 
-define('composer/scheduler', ['benchpress', 'bootbox', 'alerts', 'translator'], function (
+define('composer/scheduler', ['benchpress', 'modals', 'alerts', 'translator'], function (
 	Benchpress,
-	bootbox,
+	modals,
 	alerts,
 	translator
 ) {
@@ -91,7 +91,7 @@ define('composer/scheduler', ['benchpress', 'bootbox', 'alerts', 'translator'],
 
 	async function openModal() {
 		const html = await Benchpress.render('modals/topic-scheduler');
-		bootbox.dialog({
+		modals.dialog({
 			message: html,
 			title: '[[modules:composer.schedule-for]]',
 			className: 'topic-scheduler',

package/static/lib/composer/uploads.js

@@ -20,7 +20,7 @@ define('composer/uploads', [
 
 		addChangeHandlers(post_uuid);
 
-		translator.translate('[[modules:composer.uploading, ' + 0 + '%]]', function (translated) {
+		translator.translateKey('modules:composer.uploading', [0]).then((translated) => {
 			uploadingText = translated;
 		});
 	};
@@ -177,7 +177,7 @@ define('composer/uploads', [
 				},
 
 				uploadProgress: function (event, position, total, percent) {
-					translator.translate('[[modules:composer.uploading, ' + percent + '%]]', function (translated) {
+					translator.translateKey('modules:composer.uploading', [percent]).then(function (translated) {
 						if (doneUploading) {
 							return;
 						}

package/static/lib/composer.js

@@ -16,15 +16,15 @@ define('composer', [
 	'scrollStop',
 	'topicThumbs',
 	'api',
-	'bootbox',
+	'modals',
 	'alerts',
 	'hooks',
 	'messages',
 	'search',
 	'screenfull',
-], function (taskbar, translator, uploads, formatting, drafts, tags,
+], function (taskbar, tx, uploads, formatting, drafts, tags,
 	categoryList, preview, resize, autocomplete, scheduler, postQueue, scrollStop,
-	topicThumbs, api, bootbox, alerts, hooks, messagesModule, search, screenfull) {
+	topicThumbs, api, modals, alerts, hooks, messagesModule, search, screenfull) {
 	const composer = {
 		active: undefined,
 		posts: {},
@@ -52,7 +52,7 @@ define('composer', [
 				return;
 			}
 
-			composer.discardConfirm = bootbox.confirm('[[modules:composer.discard]]', function (confirm) {
+			composer.discardConfirm = modals.confirm('[[modules:composer.discard]]', function (confirm) {
 				if (confirm) {
 					composer.discard(composer.active);
 				} else {
@@ -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;
@@ -136,9 +138,9 @@ define('composer', [
 		const uuid = utils.generateUUID();
 		let actionText = '[[topic:composer.new-topic]]';
 		if (post.action === 'posts.reply') {
-			actionText = translator.compile('topic:composer.replying-to', `"${post.title}"`);
+			actionText = tx.compile('topic:composer.replying-to', `"${tx.escape(post.title)}"`);
 		} else if (post.action === 'posts.edit') {
-			actionText = translator.compile('topic:composer.editing-in', `"${post.title}"`);
+			actionText = tx.compile('topic:composer.editing-in', `"${tx.escape(post.title)}"`);
 		}
 
 		taskbar.push('composer', uuid, {
@@ -203,7 +205,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;
 
@@ -224,16 +226,18 @@ define('composer', [
 		const postHref = `${config.relative_path}/post/${encodeURIComponent(data.selectedPid || data.toPid)}`;
 		const topicLink = `[${escapedTitle}](${postHref})`;
 
-		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 txQuoteText = useTopicLink ?
+			await tx.translateKey('modules:composer.user-said-in', [tx.escape(data.username), topicLink]) :
+			await tx.translateKey('modules:composer.user-said', [tx.escape(data.username), postHref]);
+
+		const quoteText = `> ${txQuoteText}\n>\n`;
 
 		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 +249,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 +263,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', {
@@ -370,7 +371,7 @@ define('composer', [
 			formatting.exitFullscreen();
 
 			const btn = $(this).prop('disabled', true);
-			bootbox.confirm('[[modules:composer.discard]]', function (confirm) {
+			modals.confirm('[[modules:composer.discard]]', function (confirm) {
 				if (confirm) {
 					composer.discard(post_uuid);
 					removeComposerHistory();
@@ -446,15 +447,10 @@ define('composer', [
 		const topicTemplate = isTopic && postData.category ? postData.category.topicTemplate : '';
 
 		let data = {
+			action: postData.action,
 			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),
+			body: postData.body || topicTemplate,
 			mobile: composer.bsEnvironment === 'xs' || composer.bsEnvironment === 'sm',
 			resizable: true,
 			thumb: postData.thumb,
@@ -492,7 +488,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,
@@ -505,10 +501,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);
@@ -592,7 +584,7 @@ define('composer', [
 		helpBtn.on('click', async function () {
 			const html = await socket.emit('plugins.composer.renderHelp');
 			if (html && html.length > 0) {
-				bootbox.dialog({
+				modals.dialog({
 					size: 'large',
 					message: html,
 					onEscape: true,

package/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>

package/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 -->
 

package/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="{./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>
@@ -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)}" 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 }}}
 					<span class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info"></span>
@@ -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>

package/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>

package/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>
@@ -37,7 +45,7 @@
 					<li><a class="dropdown-item rounded-1 display-scheduler {{{ if !canSchedule }}}hidden{{{ end }}}" role="menuitem">[[topic:composer.post-later]]</a></li>
 					<li><a class="dropdown-item rounded-1 cancel-scheduling hidden" role="menuitem">[[modules:composer.cancel-scheduling]]</a></li>
 					{{{ each submitOptions }}}
-					<li><a class="dropdown-item rounded-1" href="#" data-action="{./action}" role="menuitem">{./text}</a></li>
+					<li><a class="dropdown-item rounded-1" href="#" data-action="{./action}" role="menuitem">{{./text}}</a></li>
 					{{{ end }}}
 				</ul>
 			</div>

package/websockets.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const meta = require.main.require('./src/meta');
-const privileges = require.main.require('./src/privileges');
-const posts = require.main.require('./src/posts');
-const topics = require.main.require('./src/topics');
-const plugins = require.main.require('./src/plugins');
+const meta = nodebb.require('./src/meta');
+const privileges = nodebb.require('./src/privileges');
+const posts = nodebb.require('./src/posts');
+const topics = nodebb.require('./src/topics');
+const plugins = nodebb.require('./src/plugins');
 
 const Sockets = module.exports;
 
@@ -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) {