nodebb-plugin-composer-default 10.0.16 → 10.0.18

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.16",
+  "version": "10.0.18",
   "description": "Default composer for NodeBB",
   "main": "library.js",
   "repository": {

package/static/lib/composer/drafts.js

@@ -1,41 +1,34 @@
 'use strict';
 
 define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
-	var drafts = {};
-	var saveThrottleId;
+	const drafts = {};
 
 	drafts.init = function (postContainer, postData) {
-		var draftIconEl = postContainer.find('.draft-icon');
-		function saveThrottle() {
-			resetTimeout();
-
-			saveThrottleId = setTimeout(function () {
-				saveDraft(postContainer, draftIconEl, postData);
-			}, 1000);
+		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.addToDraftList('available', postData.save_id);
+			drafts.addToDraftList('open', postData.save_id);
+			saveDraft(postContainer, draftIconEl, postData);
 		}
 
-		postContainer.on('keyup', 'textarea, input.handle, input.title', saveThrottle);
-		postContainer.on('click', 'input[type="checkbox"]', saveThrottle);
-		postContainer.on('thumb.uploaded', saveThrottle);
+		postContainer.on('keyup', 'textarea, input.handle, input.title', utils.debounce(doSaveDraft, 1000));
+		postContainer.on('click', 'input[type="checkbox"]', utils.debounce(doSaveDraft, 1000));
+		postContainer.on('click', '[component="category/list"] [data-cid]', utils.debounce(doSaveDraft, 1000));
+		postContainer.on('thumb.uploaded', doSaveDraft);
 
 		draftIconEl.on('animationend', function () {
 			$(this).toggleClass('active', false);
 		});
 
 		$(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));
 			}
 		});
 
@@ -43,69 +36,75 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 		drafts.migrateThumbs(...arguments);
 	};
 
-	function resetTimeout() {
-		if (saveThrottleId) {
-			clearTimeout(saveThrottleId);
-			saveThrottleId = 0;
-		}
-	}
-
 	function getStorage(uid) {
 		return parseInt(uid, 10) > 0 ? localStorage : sessionStorage;
 	}
 
 	drafts.get = function (save_id) {
-		var uid = save_id.split(':')[1];
-		var storage = getStorage(uid);
-		var draft = {
-			text: storage.getItem(save_id),
-		};
-		['cid', 'title', 'tags', 'uuid'].forEach(function (key) {
-			const value = storage.getItem(save_id + ':' + key);
-			if (value) {
-				draft[key] = value;
+		if (!save_id) {
+			return null;
+		}
+		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}`);
 			}
-		});
-		if (!parseInt(uid, 10)) {
-			draft.handle = storage.getItem(save_id + ':handle');
+			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'));
-
-				if (postData.hasOwnProperty('cid')) {
+				const draftData = {
+					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;
+				} 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,
@@ -122,52 +121,66 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 		if (!save_id) {
 			return;
 		}
-		resetTimeout();
+
 		// 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 +190,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;
@@ -204,76 +217,77 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 		}
 	};
 
+	drafts.listAvailable = function () {
+		const available = drafts.getList('available');
+		return available.map(drafts.get);
+	};
+
+	drafts.getAvailableCount = function () {
+		return drafts.listAvailable().length;
+	};
+
+	drafts.open = function (save_id) {
+		if (!save_id) {
+			return;
+		}
+		const draft = drafts.get(save_id);
+		openComposer(save_id, draft);
+	};
+
 	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) {
+				if (!save_id || open.includes(save_id)) {
 					return;
 				}
-				var saveObj = save_id.split(':');
-				var uid = saveObj[1];
-				var type = saveObj[2];
-				var id = saveObj[3];
-				var draft = drafts.get(save_id);
-
-				// If draft is already open, do nothing
-				if (open.indexOf(save_id) !== -1) {
+				const draft = drafts.get(save_id);
+				if (!draft || (!draft.text && !draft.title)) {
+					drafts.removeFromDraftList('available', save_id);
+					drafts.removeFromDraftList('open', save_id);
 					return;
 				}
-
-				// Don't open other peoples' drafts
-				if (parseInt(app.user.uid, 10) !== parseInt(uid, 10)) {
-					return;
-				}
-
-				if (!draft || (draft.text && draft.title && !draft.text.title && !draft.text.length)) {
-					// Empty content, remove from list of open drafts
-					drafts.updateVisibility('available', save_id);
-					drafts.updateVisibility('open', save_id);
-					return;
-				}
-				require(['composer'], function (composer) {
-					if (type === 'cid') {
-						composer.newTopic({
-							cid: id,
-							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) {
-							if (err) {
-								return alerts.error(err);
-							}
-							composer.newReply(id, undefined, topicObj.title, utils.escapeHTML(draft.text));
-						});
-					} else if (type === 'pid') {
-						composer.editPost(id);
-					}
-				});
+				openComposer(save_id, draft);
 			});
 		}
 	};
 
+	function openComposer(save_id, draft) {
+		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 (draft.action === 'topics.post') {
+				composer.newTopic({
+					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 (draft.action === 'posts.reply') {
+				api.get('/topics/' + draft.tid, {}, function (err, topicObj) {
+					if (err) {
+						return alerts.error(err);
+					}
+					composer.newReply(draft.tid, undefined, topicObj.title, utils.escapeHTML(draft.text));
+				});
+			} else if (draft.action === 'posts.edit') {
+				composer.editPost(draft.pid, draft.text);
+			}
+		});
+	}
+
 	// Feature detection courtesy of: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
 	function canSave(type) {
 		var storage;

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);
 	}
@@ -273,7 +264,7 @@ define('composer', [
 		});
 	};
 
-	composer.editPost = function (pid) {
+	composer.editPost = function (pid, text) {
 		socket.emit('plugins.composer.push', pid, function (err, threadData) {
 			if (err) {
 				return alerts.error(err);
@@ -281,6 +272,10 @@ define('composer', [
 			threadData.action = 'posts.edit';
 			threadData.pid = pid;
 			threadData.modified = false;
+			if (text) {
+				threadData.body = text;
+				threadData.modified = true;
+			}
 			push(threadData);
 		});
 	};
@@ -334,10 +329,6 @@ define('composer', [
 
 		postContainer.on('change', 'input, textarea', function () {
 			composer.posts[post_uuid].modified = true;
-
-			// Post is modified, save to list of opened drafts
-			drafts.updateVisibility('available', composer.posts[post_uuid].save_id, true);
-			drafts.updateVisibility('open', composer.posts[post_uuid].save_id, true);
 		});
 
 		submitBtn.on('click', function (e) {

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/admin/plugins/composer-default.tpl

@@ -12,6 +12,4 @@
 	</div>
 </form>
 
-<button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
-	<i class="material-icons">save</i>
-</button>
+<!-- IMPORT admin/partials/save_button.tpl -->

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>