nodebb-plugin-composer-default 10.0.42 → 10.0.44

package/library.js

@@ -96,6 +96,7 @@ plugin.getFormattingOptions = async function () {
 			name: 'thumbs',
 			title: '[[topic:composer.thumb_title]]',
 			className: 'fa fa-address-card-o',
+			badge: true,
 			visibility: {
 				...defaultVisibility,
 				reply: false,

package/package.json

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

package/static/lib/composer/uploads.js

@@ -130,7 +130,7 @@ define('composer/uploads', [
 		}
 
 		var filenameMapping = [];
-
+		let filesText = '';
 		for (i = 0; i < files.length; ++i) {
 			// The filename map has datetime and iterator prepended so that they can be properly tracked even if the
 			// filenames are identical.
@@ -141,9 +141,13 @@ define('composer/uploads', [
 				uploadForm[0].reset();
 				return alerts.error('[[error:file-too-big, ' + config.maximumFileSize + ']]');
 			}
-
-			text = insertText(text, textarea.getCursorPosition(), (isImage ? '!' : '') + '[' + filenameMapping[i] + '](' + uploadingText + ') ');
+			filesText += (isImage ? '!' : '') + '[' + filenameMapping[i] + '](' + uploadingText + ') ';
 		}
+
+		const cursorPosition = textarea.getCursorPosition();
+		const textLen = text.length;
+		text = insertText(text, cursorPosition, filesText);
+
 		if (uploadForm.length) {
 			postContainer.find('[data-action="post"]').prop('disabled', true);
 		}
@@ -225,7 +229,7 @@ define('composer/uploads', [
 						}
 					}
 					preview.render(postContainer);
-					textarea.focus();
+					textarea.selectRange(cursorPosition + textarea.val().length - textLen);
 					postContainer.find('[data-action="post"]').prop('disabled', false);
 					$(window).trigger('action:composer.upload', {
 						post_uuid: post_uuid,

package/static/lib/composer.js

@@ -867,7 +867,9 @@ define('composer', [
 
 				if (thumbs.length) {
 					const formatEl = postContainer.find('[data-format="thumbs"]');
-					formatEl.attr('data-count', thumbs.length);
+					formatEl.find('.badge')
+						.text(thumbs.length)
+						.toggleClass('hidden', !thumbs.length);
 				}
 			});
 		}

package/static/scss/composer.scss

@@ -77,23 +77,6 @@
 				color: $gray-200;
 			}
 		}
-
-		.formatting-group {
-			li {
-				&[data-format="thumbs"][data-count]:after {
-					content: attr(data-count);
-					background: $info;
-					color: $white;
-					font-weight: 600;
-					position: absolute;
-					top: 5px;
-					left: 2.5em;
-					padding: 0px 5px;
-					border-radius: 5px;
-					font-size: 0.75em;
-				}
-			}
-		}
 	}
 
 	.tags-container {

package/static/templates/partials/composer-formatting.tpl

@@ -6,8 +6,11 @@
 			{{{ else }}}
 			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
 			<li class="small">
-				<a href="#" class="btn btn-sm btn-link text-reset" tabindex="-1" data-format="{./name}" title="{./title}">
+				<a href="#" class="btn btn-sm btn-link text-reset position-relative" tabindex="-1" data-format="{./name}" title="{./title}">
 					<i class="{./className}"></i>
+					{{{ if ./badge }}}
+					<span class="px-1 position-absolute top-0 start-100 translate-middle-x badge rounded text-bg-info"></span>
+					{{{ end }}}
 				</a>
 			</li>
 			{{{ end }}}