nodebb-plugin-composer-default 10.2.4 → 10.2.6

package/package.json

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

package/static/lib/composer/formatting.js

@@ -77,15 +77,47 @@ define('composer/formatting', [
 	formatting.addComposerButtons = function () {
 		const fileForm = $('.formatting-bar .formatting-group #fileForm');
 		buttons.forEach((btn) => {
-			fileForm
-				.before(`
+			let markup = ``;
+			if (Array.isArray(btn.dropdownItems) && btn.dropdownItems.length) {
+				markup = generateFormattingDropdown(btn);
+			} else {
+				markup = `
 					<li data-format="${btn.name}" title="${btn.title || ''}" href="#" class="btn btn-sm btn-link text-reset position-relative" tabindex="-1">
 						<i class="${btn.iconClass}"></i>
 					</li>
-				`);
+				`;
+			}
+			fileForm.before(markup);
 		});
 	};
 
+	function generateFormattingDropdown(btn) {
+		const dropdownItemsHtml = btn.dropdownItems.map(function (btn) {
+			let badgeHtml = '';
+			if (btn.badge) {
+				badgeHtml = `<span class="px-1 position-absolute top-0 start-100 translate-middle-x badge rounded text-bg-info"></span>`;
+			}
+			return `
+				<li data-format="${btn.name}">
+					<a href="#" class="dropdown-item rounded-1 position-relative">
+						<i class="${btn.iconClass} text-secondary"></i> ${btn.text}
+						${badgeHtml}
+					</a>
+				</li>
+			`;
+		});
+		return `
+			<li class="dropdown bottom-sheet" tab-index="-1">
+				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" title="${btn.title}">
+					<i class="${btn.iconClass}"></i>
+				</button>
+				<ul class="dropdown-menu p-1">
+				${dropdownItemsHtml}
+				</ul>
+			</li>
+		`;
+	}
+
 	formatting.addButton = function (iconClass, onClick, title, name) {
 		name = name || iconClass.replace('fa fa-', '');
 		formattingDispatchTable[name] = onClick;
@@ -96,6 +128,19 @@ define('composer/formatting', [
 		});
 	};
 
+	formatting.addDropdown = function (data) {
+		buttons.push({
+			iconClass: data.iconClass,
+			title: data.title,
+			dropdownItems: data.dropdownItems,
+		});
+		data.dropdownItems.forEach((btn) => {
+			if (btn.name && btn.onClick) {
+				formattingDispatchTable[btn.name] = btn.onClick;
+			}
+		});
+	};
+
 	formatting.getDispatchTable = function () {
 		return formattingDispatchTable;
 	};
@@ -105,7 +150,7 @@ define('composer/formatting', [
 	};
 
 	formatting.addHandler = function (postContainer) {
-		postContainer.on('click', '.formatting-bar li', function (event) {
+		postContainer.on('click', '.formatting-bar li[data-format]', function (event) {
 			var format = $(this).attr('data-format');
 			var textarea = $(this).parents('[component="composer"]').find('textarea')[0];
 

package/static/lib/composer/uploads.js

@@ -78,7 +78,7 @@ define('composer/uploads', [
 					route: '/api/post/upload',
 					formData: upload.formData,
 				});
-			}
+			},
 		});
 	}
 
@@ -137,7 +137,7 @@ define('composer/uploads', [
 			filenameMapping.push(i + '_' + Date.now() + '_' + (params.fileNames ? params.fileNames[i] : files[i].name));
 			isImage = files[i].type.match(/image./);
 
-			if (files[i].size > parseInt(config.maximumFileSize, 10) * 1024) {
+			if (!app.user.isAdmin && files[i].size > parseInt(config.maximumFileSize, 10) * 1024) {
 				uploadForm[0].reset();
 				return alerts.error('[[error:file-too-big, ' + config.maximumFileSize + ']]');
 			}

package/static/scss/composer.scss

@@ -344,6 +344,14 @@
 	}
 }
 
+@include media-breakpoint-up(md) {
+	// without this formatting elements that are dropdowns are not visible on desktop.
+	// on mobile dropdowns use bottom-sheet and overflow is auto
+	.formatting-group {
+		overflow: visible!important;
+	}
+}
+
 @import './zen-mode';
 @import './page-compose';
 @import './textcomplete';

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

@@ -5,6 +5,25 @@
 			<li class="small spacer"></li>
 			{{{ else }}}
 			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
+			{{{ if ./dropdownItems.length }}}
+			<li class="dropdown bottom-sheet" tabindex="-1">
+				<button class="btn btn-sm btn-link text-reset" data-bs-toggle="dropdown" title="{./title}">
+					<i class="{./className}"></i>
+				</button>
+				<ul class="dropdown-menu p-1">
+				{{{ each ./dropdownItems }}}
+					<li data-format="{./name}">
+						<a href="#" class="dropdown-item rounded-1 position-relative">
+							<i class="{./className} text-secondary"></i> {./text}
+							{{{ 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 }}}
+				</ul>
+			</li>
+			{{{ else }}}
 			<li class="btn btn-sm btn-link text-reset position-relative" tabindex="-1" data-format="{./name}" title="{./title}">
 				<i class="{./className}"></i>
 				{{{ if ./badge }}}
@@ -13,6 +32,7 @@
 			</li>
 			{{{ end }}}
 			{{{ end }}}
+			{{{ end }}}
 		{{{ end }}}
 
 		{{{ if privileges.upload:post:image }}}