nodebb-plugin-composer-default 10.0.17 → 10.0.19

package/library.js

@@ -3,7 +3,6 @@
 const url = require('url');
 
 const nconf = require.main.require('nconf');
-const winston = require.main.require('winston');
 const validator = require('validator');
 
 const plugins = require.main.require('./src/plugins');
@@ -14,6 +13,7 @@ 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 socketMethods = require('./websockets');
@@ -164,7 +164,7 @@ plugin.filterComposerBuild = async function (hookData) {
 
 	const isEditing = !!req.query.pid;
 	const isGuestPost = postData && parseInt(postData.uid, 10) === 0;
-	const save_id = generateSaveId(req);
+	const save_id = utils.generateSaveId(req.uid);
 	const discardRoute = generateDiscardRoute(req, topicData);
 	const body = await generateBody(req, postData);
 
@@ -251,16 +251,6 @@ async function generateBody(req, postData) {
 	return postData ? postData.content : '';
 }
 
-function generateSaveId(req) {
-	if (req.query.cid) {
-		return ['composer', req.uid, 'cid', req.query.cid].join(':');
-	} else if (req.query.tid) {
-		return ['composer', req.uid, 'tid', req.query.tid].join(':');
-	} else if (req.query.pid) {
-		return ['composer', req.uid, 'pid', req.query.pid].join(':');
-	}
-}
-
 async function getPostData(req) {
 	if (!req.query.pid && !req.query.toPid) {
 		return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-composer-default",
-  "version": "10.0.17",
+  "version": "10.0.19",
   "description": "Default composer for NodeBB",
   "main": "library.js",
   "repository": {

package/static/lib/client.js

@@ -30,7 +30,7 @@ $(document).ready(function () {
 	$(window).on('action:composer.post.edit', function (ev, data) {
 		if (config['composer-default'].composeRouteEnabled !== 'on') {
 			require(['composer'], function (composer) {
-				composer.editPost(data.pid);
+				composer.editPost({ pid: data.pid });
 			});
 		} else {
 			ajaxify.go('compose?pid=' + data.pid);
@@ -40,7 +40,12 @@ $(document).ready(function () {
 	$(window).on('action:composer.post.new', function (ev, data) {
 		if (config['composer-default'].composeRouteEnabled !== 'on') {
 			require(['composer'], function (composer) {
-				composer.newReply(data.tid, data.pid, data.topicName, data.text);
+				composer.newReply({
+					tid: data.tid,
+					pid: data.pid,
+					title: data.topicName,
+					body: data.text,
+				});
 			});
 		} else {
 			ajaxify.go(
@@ -56,7 +61,15 @@ $(document).ready(function () {
 		if (config['composer-default'].composeRouteEnabled !== 'on') {
 			require(['composer'], function (composer) {
 				var topicUUID = composer.findByTid(data.tid);
-				composer.addQuote(data.tid, data.pid, data.selectedPid, data.topicName, data.username, data.text, topicUUID);
+				composer.addQuote({
+					tid: data.tid,
+					toPid: data.pid,
+					selectedPid: data.selectedPid,
+					title: data.topicName,
+					username: data.username,
+					body: data.text,
+					uuid: topicUUID,
+				});
 			});
 		} else {
 			ajaxify.go('compose?tid=' + data.tid + '&toPid=' + data.pid + '&quoted=1&username=' + data.username);

package/static/lib/composer/drafts.js

@@ -1,19 +1,24 @@
 'use strict';
 
 define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
-	var drafts = {};
-
+	const drafts = {};
+	const draftSaveDelay = 2000;
 	drafts.init = function (postContainer, postData) {
-		var draftIconEl = postContainer.find('.draft-icon');
+		const draftIconEl = postContainer.find('.draft-icon');
 		function doSaveDraft() {
+			if (!postData.save_id) {
+				postData.save_id = utils.generateSaveId(app.user.uid);
+			}
 			// Post is modified, save to list of opened drafts
-			drafts.updateVisibility('available', postData.save_id, true);
-			drafts.updateVisibility('open', postData.save_id, true);
+			drafts.addToDraftList('available', postData.save_id);
+			drafts.addToDraftList('open', postData.save_id);
 			saveDraft(postContainer, draftIconEl, postData);
 		}
 
-		postContainer.on('keyup', 'textarea, input.handle, input.title', utils.debounce(doSaveDraft, 1000));
-		postContainer.on('click', 'input[type="checkbox"]', utils.debounce(doSaveDraft, 1000));
+		postContainer.on('keyup', 'textarea, input.handle, input.title', utils.debounce(doSaveDraft, draftSaveDelay));
+		postContainer.on('click', 'input[type="checkbox"]', utils.debounce(doSaveDraft, draftSaveDelay));
+		postContainer.on('click', '[component="category/list"] [data-cid]', utils.debounce(doSaveDraft, draftSaveDelay));
+		postContainer.on('itemAdded', '.tags', utils.debounce(doSaveDraft, draftSaveDelay));
 		postContainer.on('thumb.uploaded', doSaveDraft);
 
 		draftIconEl.on('animationend', function () {
@@ -21,19 +26,10 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 		});
 
 		$(window).on('unload', function () {
-			// Update visibility on all open composers
-			var open = [];
-			try {
-				open = localStorage.getItem('drafts:open');
-				open = JSON.parse(open) || [];
-			} catch (e) {
-				console.warn('[composer/drafts] Could not read list of open/available drafts');
-				open = [];
-			}
+			// remove all drafts from the open list
+			const open = drafts.getList('open');
 			if (open.length) {
-				open.forEach(function (save_id) {
-					drafts.updateVisibility('open', save_id);
-				});
+				open.forEach(save_id => drafts.removeFromDraftList('open', save_id));
 			}
 		});
 
@@ -46,62 +42,72 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	}
 
 	drafts.get = function (save_id) {
-		var uid = save_id.split(':')[1];
-		var storage = getStorage(uid);
-		var draft = {
-			text: storage.getItem(save_id),
-			save_id: save_id,
-		};
-		['cid', 'title', 'tags', 'uuid', 'timestamp'].forEach(function (key) {
-			const value = storage.getItem(save_id + ':' + key);
-			if (value) {
-				draft[key] = value;
-			}
-		});
-		if (!parseInt(uid, 10)) {
-			draft.handle = storage.getItem(save_id + ':handle');
+		if (!save_id) {
+			return null;
 		}
-		if (draft.timestamp) {
-			draft.timestampISO = utils.toISOString(draft.timestamp);
+		const uid = save_id.split(':')[1];
+		const storage = getStorage(uid);
+		try {
+			const draftJson = storage.getItem(save_id);
+			const draft = JSON.parse(draftJson) || null;
+			if (!draft) {
+				throw new Error(`can't parse draft json for ${save_id}`);
+			}
+			draft.save_id = save_id;
+			if (draft.timestamp) {
+				draft.timestampISO = utils.toISOString(draft.timestamp);
+			}
+			$(window).trigger('action:composer.drafts.get', {
+				save_id: save_id,
+				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');
+			return null;
 		}
-
-		$(window).trigger('action:composer.drafts.get', {
-			save_id: save_id,
-			draft: draft,
-			storage: storage,
-		});
-		return draft;
 	};
 
 	function saveDraft(postContainer, draftIconEl, postData) {
 		if (canSave(app.user.uid ? 'localStorage' : 'sessionStorage') && postData && postData.save_id && postContainer.length) {
 			const titleEl = postContainer.find('input.title');
 			const title = titleEl && titleEl.val();
-			var raw = postContainer.find('textarea').val();
-			var storage = getStorage(app.user.uid);
-
-			if (postData.hasOwnProperty('cid') && !postData.save_id.endsWith(':cid:' + postData.cid)) {
-				// A new cid was selected, the save_id needs updating
-				drafts.removeDraft(postData.save_id);	// First, delete the old draft
-				postData.save_id = postData.save_id.replace(/cid:\d+$/, 'cid:' + postData.cid);	// then create a new save_id
-			}
+			const raw = postContainer.find('textarea').val();
+			const storage = getStorage(app.user.uid);
 
 			if (raw.length || (title && title.length)) {
-				storage.setItem(postData.save_id, raw);
-				storage.setItem(`${postData.save_id}:uuid`, postContainer.attr('data-uuid'));
-				storage.setItem(`${postData.save_id}:timestamp`, Date.now());
-
-				if (postData.hasOwnProperty('cid')) {
+				const draftData = {
+					save_id: postData.save_id,
+					action: postData.action,
+					text: raw,
+					uuid: postContainer.attr('data-uuid'),
+					timestamp: Date.now(),
+				};
+
+				if (postData.action === 'topics.post') {
 					// New topic only
 					const tags = postContainer.find('input.tags').val();
-					storage.setItem(postData.save_id + ':tags', tags);
-					storage.setItem(postData.save_id + ':title', title);
+					draftData.tags = tags;
+					draftData.title = title;
+					draftData.cid = postData.cid;
+				} else if (postData.action === 'posts.reply') {
+					// new reply only
+					draftData.title = postData.title;
+					draftData.tid = postData.tid;
+					draftData.toPid = postData.toPid;
+				} else if (postData.action === 'posts.edit') {
+					draftData.pid = postData.pid;
 				}
 				if (!app.user.uid) {
-					var handle = postContainer.find('input.handle').val();
-					storage.setItem(postData.save_id + ':handle', handle);
+					draftData.handle = postContainer.find('input.handle').val();
 				}
 
+				// save all draft data into single item as json
+				storage.setItem(postData.save_id, JSON.stringify(draftData));
+
 				$(window).trigger('action:composer.drafts.save', {
 					storage: storage,
 					postData: postData,
@@ -120,54 +126,64 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 		}
 
 		// Remove save_id from list of open and available drafts
-		drafts.updateVisibility('available', save_id);
-		drafts.updateVisibility('open', save_id);
-		var uid = save_id.split(':')[1];
-		var storage = getStorage(uid);
-		const keys = Object.keys(storage).filter(key => key.startsWith(save_id));
-		keys.forEach(key => storage.removeItem(key));
+		drafts.removeFromDraftList('available', save_id);
+		drafts.removeFromDraftList('open', save_id);
+		const uid = save_id.split(':')[1];
+		const storage = getStorage(uid);
+		storage.removeItem(save_id);
+
 		$(window).trigger('action:composer.drafts.remove', {
 			storage: storage,
 			save_id: save_id,
 		});
 	};
 
-	drafts.updateVisibility = function (set, save_id, add) {
-		if (!canSave(app.user.uid ? 'localStorage' : 'sessionStorage') || !save_id) {
-			return;
-		}
-		var open = [];
+	drafts.getList = function (set) {
 		try {
-			open = localStorage.getItem('drafts:' + set);
-			open = open ? JSON.parse(open) : [];
+			const draftIds = localStorage.getItem(`drafts:${set}`);
+			return JSON.parse(draftIds) || [];
 		} catch (e) {
-			console.warn('[composer/drafts] Could not read list of open drafts');
-			open = [];
+			console.warn('[composer/drafts] Could not read list of available drafts');
+			return [];
 		}
-		var idx = open.indexOf(save_id);
+	};
 
-		if (add && idx === -1) {
-			open.push(save_id);
-		} else if (!add && idx !== -1) {
-			open.splice(idx, 1);
-		}	// otherwise do nothing
+	drafts.addToDraftList = function (set, save_id) {
+		if (!canSave(app.user.uid ? 'localStorage' : 'sessionStorage') || !save_id) {
+			return;
+		}
+		const list = drafts.getList(set);
+		if (!list.includes(save_id)) {
+			list.push(save_id);
+			localStorage.setItem('drafts:' + set, JSON.stringify(list));
+		}
+	};
 
-		localStorage.setItem('drafts:' + set, JSON.stringify(open));
+	drafts.removeFromDraftList = function (set, save_id) {
+		if (!canSave(app.user.uid ? 'localStorage' : 'sessionStorage') || !save_id) {
+			return;
+		}
+		const list = drafts.getList(set);
+		if (list.includes(save_id)) {
+			list.splice(list.indexOf(save_id), 1);
+			localStorage.setItem('drafts:' + set, JSON.stringify(list));
+		}
 	};
 
 	drafts.migrateGuest = function () {
 		// If any drafts are made while as guest, and user then logs in, assume control of those drafts
 		if (canSave('localStorage') && app.user.uid) {
-			var test = /^composer:\d+:\w+:\d+(:\w+)?$/;
-			var keys = Object.keys(sessionStorage).filter(function (key) {
+			// composer:<uid>:<timestamp>
+			const test = /^composer:\d+:\d$/;
+			const keys = Object.keys(sessionStorage).filter(function (key) {
 				return test.test(key);
 			});
-			var migrated = new Set([]);
-			var renamed = keys.map(function (key) {
-				var parts = key.split(':');
+			const migrated = new Set([]);
+			const renamed = keys.map(function (key) {
+				const parts = key.split(':');
 				parts[1] = app.user.uid;
 
-				migrated.add(parts.slice(0, 4).join(':'));
+				migrated.add(parts.join(':'));
 				return parts.join(':');
 			});
 
@@ -177,7 +193,7 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 			});
 
 			migrated.forEach(function (save_id) {
-				drafts.updateVisibility('available', save_id, 1);
+				drafts.addToDraftList('available', save_id);
 			});
 
 			return migrated;
@@ -205,14 +221,8 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	};
 
 	drafts.listAvailable = function () {
-		try {
-			let available = localStorage.getItem('drafts:available');
-			available = JSON.parse(available) || [];
-			return available.map(drafts.get);
-		} catch (e) {
-			console.warn('[composer/drafts] Could not read list of available drafts');
-		}
-		return [];
+		const available = drafts.getList('available');
+		return available.map(drafts.get);
 	};
 
 	drafts.getAvailableCount = function () {
@@ -228,40 +238,23 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	};
 
 	drafts.loadOpen = function () {
-		if (ajaxify.data.template.login || ajaxify.data.template.register) {
+		if (ajaxify.data.template.login || ajaxify.data.template.register || !config.hasOwnProperty('openDraftsOnPageLoad') || !config.openDraftsOnPageLoad) {
 			return;
 		}
 		// Load drafts if they were open
-		var available;
-		var open = [];
-		try {
-			available = localStorage.getItem('drafts:available');
-			open = localStorage.getItem('drafts:open');
-			available = JSON.parse(available) || [];
-			open = JSON.parse(open) || [];
-		} catch (e) {
-			console.warn('[composer/drafts] Could not read list of open/available drafts');
-			available = [];
-			open = [];
-		}
+		const available = drafts.getList('available');
+		const open = drafts.getList('open');
 
 		if (available.length) {
 			// Deconstruct each save_id and open up composer
 			available.forEach(function (save_id) {
-				if (!save_id) {
-					return;
-				}
-				var draft = drafts.get(save_id);
-
-				// If draft is already open, do nothing
-				if (open.indexOf(save_id) !== -1) {
+				if (!save_id || open.includes(save_id)) {
 					return;
 				}
-
+				const draft = drafts.get(save_id);
 				if (!draft || (!draft.text && !draft.title)) {
-					// Empty content, remove from list of open drafts
-					drafts.updateVisibility('available', save_id);
-					drafts.updateVisibility('open', save_id);
+					drafts.removeFromDraftList('available', save_id);
+					drafts.removeFromDraftList('open', save_id);
 					return;
 				}
 				openComposer(save_id, draft);
@@ -270,32 +263,42 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	};
 
 	function openComposer(save_id, draft) {
-		var saveObj = save_id.split(':');
-		var uid = saveObj[1];
-		var type = saveObj[2];
-		var id = saveObj[3];
+		const saveObj = save_id.split(':');
+		const uid = saveObj[1];
 		// Don't open other peoples' drafts
 		if (parseInt(app.user.uid, 10) !== parseInt(uid, 10)) {
 			return;
 		}
 		require(['composer'], function (composer) {
-			if (type === 'cid') {
+			if (draft.action === 'topics.post') {
 				composer.newTopic({
-					cid: id,
+					save_id: draft.save_id,
+					cid: draft.cid,
 					handle: app.user && app.user.uid ? undefined : utils.escapeHTML(draft.handle),
 					title: utils.escapeHTML(draft.title),
 					body: utils.escapeHTML(draft.text),
 					tags: String(draft.tags || '').split(','),
 				});
-			} else if (type === 'tid') {
-				api.get('/topics/' + id, {}, function (err, topicObj) {
+			} else if (draft.action === 'posts.reply') {
+				api.get('/topics/' + draft.tid, {}, function (err, topicObj) {
 					if (err) {
 						return alerts.error(err);
 					}
-					composer.newReply(id, undefined, topicObj.title, utils.escapeHTML(draft.text));
+
+					composer.newReply({
+						save_id: draft.save_id,
+						tid: draft.tid,
+						toPid: draft.toPid,
+						title: topicObj.title,
+						body: utils.escapeHTML(draft.text),
+					});
+				});
+			} else if (draft.action === 'posts.edit') {
+				composer.editPost({
+					save_id: draft.save_id,
+					pid: draft.pid,
+					body: utils.escapeHTML(draft.text),
 				});
-			} else if (type === 'pid') {
-				composer.editPost(id);
 			}
 		});
 	}

package/static/lib/composer.js

@@ -152,15 +152,6 @@ define('composer', [
 			});
 		});
 
-		// Construct a save_id
-		if (post.hasOwnProperty('cid')) {
-			post.save_id = ['composer', app.user.uid, 'cid', post.cid].join(':');
-		} else if (post.hasOwnProperty('tid')) {
-			post.save_id = ['composer', app.user.uid, 'tid', post.tid].join(':');
-		} else if (post.hasOwnProperty('pid')) {
-			post.save_id = ['composer', app.user.uid, 'pid', post.pid].join(':');
-		}
-
 		composer.posts[uuid] = post;
 		composer.load(uuid);
 	}
@@ -197,7 +188,8 @@ define('composer', [
 	};
 
 	composer.newTopic = async (data) => {
-		var pushData = {
+		let pushData = {
+			save_id: data.save_id,
 			action: 'topics.post',
 			cid: data.cid,
 			handle: data.handle,
@@ -216,72 +208,90 @@ define('composer', [
 		push(pushData);
 	};
 
-	composer.addQuote = function (tid, toPid, selectedPid, title, username, text, uuid) {
-		uuid = uuid || composer.active;
+	composer.addQuote = function (data) {
+		// tid, toPid, selectedPid, title, username, text, uuid
+		data.uuid = data.uuid || composer.active;
 
-		var escapedTitle = (title || '')
+		var escapedTitle = (data.title || '')
 			.replace(/([\\`*_{}[\]()#+\-.!])/g, '\\$1')
 			.replace(/\[/g, '[')
 			.replace(/\]/g, ']')
 			.replace(/%/g, '%')
 			.replace(/,/g, ',');
 
-		if (text) {
-			text = '> ' + text.replace(/\n/g, '\n> ') + '\n\n';
+		if (data.body) {
+			data.body = '> ' + data.body.replace(/\n/g, '\n> ') + '\n\n';
 		}
-		var link = '[' + escapedTitle + '](' + config.relative_path + '/post/' + (selectedPid || toPid) + ')';
-		if (uuid === undefined) {
-			if (title && (selectedPid || toPid)) {
-				composer.newReply(tid, toPid, title, '[[modules:composer.user_said_in, ' + username + ', ' + link + ']]\n' + text);
+		var link = '[' + escapedTitle + '](' + config.relative_path + '/post/' + (data.selectedPid || data.toPid) + ')';
+		if (data.uuid === undefined) {
+			if (data.title && (data.selectedPid || data.toPid)) {
+				composer.newReply({
+					tid: data.tid,
+					toPid: data.toPid,
+					title: data.title,
+					body: '[[modules:composer.user_said_in, ' + data.username + ', ' + link + ']]\n' + data.body,
+				});
 			} else {
-				composer.newReply(tid, toPid, title, '[[modules:composer.user_said, ' + username + ']]\n' + text);
+				composer.newReply({
+					tid: data.tid,
+					toPid: data.toPid,
+					title: data.title,
+					body: '[[modules:composer.user_said, ' + data.username + ']]\n' + data.body,
+				});
 			}
 			return;
-		} else if (uuid !== composer.active) {
+		} else if (data.uuid !== composer.active) {
 			// If the composer is not currently active, activate it
-			composer.load(uuid);
+			composer.load(data.uuid);
 		}
 
-		var postContainer = $('.composer[data-uuid="' + uuid + '"]');
+		var postContainer = $('.composer[data-uuid="' + data.uuid + '"]');
 		var bodyEl = postContainer.find('textarea');
 		var prevText = bodyEl.val();
-		if (title && (selectedPid || toPid)) {
-			translator.translate('[[modules:composer.user_said_in, ' + username + ', ' + link + ']]\n', config.defaultLang, onTranslated);
+		if (data.title && (data.selectedPid || data.toPid)) {
+			translator.translate('[[modules:composer.user_said_in, ' + data.username + ', ' + link + ']]\n', config.defaultLang, onTranslated);
 		} else {
-			translator.translate('[[modules:composer.user_said, ' + username + ']]\n', config.defaultLang, onTranslated);
+			translator.translate('[[modules:composer.user_said, ' + data.username + ']]\n', config.defaultLang, onTranslated);
 		}
 
 		function onTranslated(translated) {
-			composer.posts[uuid].body = (prevText.length ? prevText + '\n\n' : '') + translated + text;
-			bodyEl.val(composer.posts[uuid].body);
+			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.newReply = function (tid, toPid, title, text) {
-		translator.translate(text, config.defaultLang, function (translated) {
+	composer.newReply = function (data) {
+		translator.translate(data.body, config.defaultLang, function (translated) {
 			push({
+				save_id: data.save_id,
 				action: 'posts.reply',
-				tid: tid,
-				toPid: toPid,
-				title: title,
+				tid: data.tid,
+				toPid: data.toPid,
+				title: data.title,
 				body: translated,
-				modified: !!((title && title.length) || (translated && translated.length)),
+				modified: !!((data.title && data.title.length) || (translated && translated.length)),
 				isMain: false,
 			});
 		});
 	};
 
-	composer.editPost = function (pid) {
-		socket.emit('plugins.composer.push', pid, function (err, threadData) {
+	composer.editPost = function (data) {
+		// pid, text
+		socket.emit('plugins.composer.push', data.pid, function (err, postData) {
 			if (err) {
 				return alerts.error(err);
 			}
-			threadData.action = 'posts.edit';
-			threadData.pid = pid;
-			threadData.modified = false;
-			push(threadData);
+			postData.save_id = data.save_id;
+			postData.action = 'posts.edit';
+			postData.pid = data.pid;
+			postData.modified = false;
+			if (data.body) {
+				postData.body = data.body;
+				postData.modified = true;
+			}
+			push(postData);
 		});
 	};
 

package/static/scss/composer.scss

@@ -1,6 +1,5 @@
 .composer {
-	@include no-select;
-
+	user-select: none;
 	background-color: $body-bg;
 	color: $body-color;
 	z-index: $zindex-modal;

package/static/templates/partials/composer-title-container.tpl

@@ -1,21 +1,21 @@
 <div class="title-container">
 	{{{ if isTopic }}}
-	<div class="category-list-container hidden-sm hidden-xs">
+	<div class="category-list-container hidden-sm hidden-xs align-self-center">
 		<!-- IMPORT partials/category-selector.tpl -->
 	</div>
 	{{{ end }}}
 
-	<!-- IF showHandleInput -->
+	{{{ if showHandleInput }}}
 	<div data-component="composer/handle">
 		<input class="handle form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
 	</div>
-	<!-- ENDIF showHandleInput -->
+	{{{ end }}}
 	<div data-component="composer/title" class="position-relative">
-		<!-- IF isTopicOrMain -->
+		{{{ if isTopicOrMain }}}
 		<input class="title form-control h-100" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
-		<!-- ELSE -->
-		<span class="title h-100">[[topic:composer.replying_to, "{topicTitle}"]]</span>
-		<!-- ENDIF isTopicOrMain -->
+		{{{ else }}}
+		<span class="title h-100">{{{ if isEditing }}}[[topic:composer.editing]]{{{ else }}}[[topic:composer.replying_to, "{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>
 			<div class="quick-search-results-container"></div>