nodebb-plugin-composer-default 10.2.3 → 10.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-composer-default",
-  "version": "10.2.3",
+  "version": "10.2.5",
   "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/scss/composer.scss

@@ -296,20 +296,14 @@
 	}
 }
 
-@include media-breakpoint-up(sm) {
-	html.composing {
-		.composer {
-			left: 15%;
-			width: 70%;
-		}
-	}
+@include media-breakpoint-down(lg) {
+	html.composing .composer { z-index: $zindex-modal; }
 }
 
 @include media-breakpoint-down(sm) {
 	html.composing {
 		.composer {
 			height: 100%;
-			z-index: $zindex-modal;
 
 			.draft-icon {
 				position: absolute;
@@ -333,7 +327,29 @@
 }
 
 @include media-breakpoint-up(sm) {
-	@import './medium';
+	html.composing {
+		.composer {
+			left: 15%;
+			width: 70%;
+			min-height: 400px;
+
+			.resizer {
+				display: block;
+			}
+
+			.minimize {
+				display: block;
+			}
+		}
+	}
+}
+
+@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';

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 }}}

package/static/scss/medium.scss

@@ -1,12 +0,0 @@
-
-.composer {
-	min-height: 400px;
-
-	.resizer {
-		display: block;
-	}
-
-	.minimize {
-		display: block;
-	}
-}