nodebb-plugin-composer-default 10.0.22 → 10.0.24

package/package.json

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

package/static/lib/composer/drafts.js

@@ -5,7 +5,14 @@ define('composer/drafts', ['api', 'alerts'], function (api, alerts) {
 	const draftSaveDelay = 1000;
 	drafts.init = function (postContainer, postData) {
 		const draftIconEl = postContainer.find('.draft-icon');
+		const uuid = postContainer.attr('data-uuid');
 		function doSaveDraft() {
+			// check if composer is still around,
+			// it might have been gone by the time this timeout triggers
+			if (!$(`[component="composer"][data-uuid="${uuid}"]`).length) {
+				return;
+			}
+
 			if (!postData.save_id) {
 				postData.save_id = utils.generateSaveId(app.user.uid);
 			}

package/static/lib/composer/preview.js

@@ -48,6 +48,8 @@ define('composer/preview', ['hooks'], function (hooks) {
 
 		const isMobile = ['xs', 'sm'].includes(utils.findBootstrapEnvironment());
 		const toggler = postContainer.querySelector('.formatting-bar [data-action="preview"]');
+		const showText = toggler.querySelector('.show-text');
+		const hideText = toggler.querySelector('.hide-text');
 		let show = localStorage.getItem('composer:previewToggled') || (preview.env === 'xs' || preview.env === 'sm');
 		const previewContainer = postContainer.querySelector('.preview-container');
 		const writeContainer = postContainer.querySelector('.write-container');
@@ -64,11 +66,6 @@ define('composer/preview', ['hooks'], function (hooks) {
 				previewContainer.classList.toggle('d-flex', show);
 				writeContainer.classList.toggle('d-flex', !show);
 				writeContainer.classList.toggle('d-none', show);
-
-				// Render preview once on mobile
-				if (show) {
-					preview.render($postContainer);
-				}
 			} else {
 				previewContainer.classList.toggle('hide', !show);
 				writeContainer.classList.toggle('w-50', show);
@@ -76,7 +73,11 @@ define('composer/preview', ['hooks'], function (hooks) {
 
 				localStorage[show ? 'removeItem' : 'setItem']('composer:previewToggled', true);
 			}
-
+			showText.classList.toggle('hide', show);
+			hideText.classList.toggle('hide', !show);
+			if (show) {
+				preview.render($postContainer);
+			}
 			preview.matchScroll($postContainer);
 		}
 		preview.toggle = togglePreview;

package/static/lib/composer.js

@@ -417,7 +417,7 @@ define('composer', [
 
 		// Hide "zen mode" if fullscreen API is not enabled/available (ahem, iOS...)
 		if (!screenfull.isEnabled) {
-			$('[data-format="zen"]').addClass('hidden');
+			$('[data-format="zen"]').parent().addClass('hidden');
 		}
 
 		hooks.fire('action:composer.enhanced', { postContainer, postData, draft });

package/static/templates/composer.tpl

@@ -1,6 +1,6 @@
 <div component="composer" class="composer pt-2 px-2<!-- IF resizable --> resizable<!-- ENDIF resizable --><!-- IF !isTopicOrMain --> reply<!-- ENDIF !isTopicOrMain -->">
 
-	<div class="composer-container d-flex flex-column h-100">
+	<div class="composer-container d-flex flex-column gap-1 h-100">
 		<!-- mobile header -->
 		<nav class="navbar fixed-top mobile-navbar hidden-md hidden-lg text-bg-primary flex-nowrap">
 			<div class="btn-group">

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

@@ -1,12 +1,12 @@
-<nav class="navbar navbar-expand formatting-bar">
-	<ul class="formatting-group navbar-nav me-auto gap-2">
+<div class="d-flex justify-content-between align-items-center formatting-bar">
+	<ul class="list-unstyled mb-0 d-flex formatting-group gap-2">
 		<!-- BEGIN formatting -->
 			<!-- IF formatting.spacer -->
-			<li class="nav-item small spacer"></li>
+			<li class="small spacer"></li>
 			<!-- ELSE -->
 			{{{ if (./visibility.desktop && ((isTopicOrMain && ./visibility.main) || (!isTopicOrMain && ./visibility.reply))) }}}
-			<li class="nav-item small">
-				<a href="#" class="nav-link" tabindex="-1" data-format="{formatting.name}" title="{formatting.title}">
+			<li class="small">
+				<a href="#" class="btn btn-sm btn-link text-reset" tabindex="-1" data-format="{formatting.name}" title="{formatting.title}">
 					<i class="{formatting.className}"></i>
 				</a>
 			</li>
@@ -15,15 +15,15 @@
 		<!-- END formatting -->
 
 		<!-- IF privileges.upload:post:image -->
-		<li class="img-upload-btn nav-item small">
-			<a href="#" class="nav-link" data-format="picture" tabindex="-1" title="[[modules:composer.upload-picture]]">
+		<li class="img-upload-btn small">
+			<a href="#" class="btn btn-sm btn-link text-reset" data-format="picture" tabindex="-1" title="[[modules:composer.upload-picture]]">
 				<i class="fa fa-file-image-o"></i>
 			</a>
 		</li>
 		<!-- ENDIF privileges.upload:post:image -->
 		<!-- IF privileges.upload:post:file -->
-		<li class="file-upload-btn nav-item small">
-			<a href="#" class="nav-link" data-format="upload" tabindex="-1" title="[[modules:composer.upload-file]]">
+		<li class="file-upload-btn small">
+			<a href="#" class="btn btn-sm btn-link text-reset" data-format="upload" tabindex="-1" title="[[modules:composer.upload-file]]">
 				<i class="fa fa-file-o"></i>
 			</a>
 		</li>
@@ -33,14 +33,17 @@
 			<input type="file" id="files" name="files[]" multiple class="gte-ie9 hide"/>
 		</form>
 	</ul>
+	<div class="d-flex gap-1">
+		<div class="draft-icon mx-2 hidden-xs hidden-sm"></div>
+		<button class="btn btn-sm btn-link py-2 text-body fw-semibold" data-action="preview">
+			<i class="fa fa-eye"></i>
+			<span class="d-none d-md-inline show-text">[[modules:composer.show_preview]]</span>
+			<span class="d-none d-md-inline hide-text">[[modules:composer.hide_preview]]</span>
+		</button>
+		<button class="btn btn-sm btn-link py-2 text-body fw-semibold" data-action="help">
+			<i class="fa fa-question"></i>
+			<span class="d-none d-md-inline">[[modules:composer.help]]</span>
+		</button>
+	</div>
+</div>
 
-	<div class="draft-icon mx-2 hidden-xs hidden-sm"></div>
-	<button class="btn btn-sm btn-link text-body fw-semibold" data-action="preview">
-		<i class="fa fa-eye"></i>
-		<span class="d-none d-md-inline">[[modules:composer.show_preview]]</span>
-	</button>
-	<button class="btn btn-sm btn-link text-body fw-semibold" data-action="help">
-		<i class="fa fa-question"></i>
-		<span class="d-none d-md-inline">[[modules:composer.help]]</span>
-	</button>
-</nav>

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

@@ -1,4 +1,4 @@
-<div class="title-container d-flex">
+<div class="title-container align-items-center gap-2 d-flex">
 	{{{ if isTopic }}}
 	<div class="category-list-container hidden-sm hidden-xs align-self-center">
 		<!-- IMPORT partials/category-selector.tpl -->
@@ -10,11 +10,11 @@
 		<input class="handle form-control h-100 border-0 shadow-none" type="text" tabindex="1" placeholder="[[topic:composer.handle_placeholder]]" value="{handle}" />
 	</div>
 	{{{ end }}}
-	<div data-component="composer/title" class="position-relative flex-grow-1">
+	<div data-component="composer/title" class="position-relative flex-1" style="min-width: 0;">
 		{{{ if isTopicOrMain }}}
 		<input class="title form-control h-100 rounded-1 shadow-none" type="text" tabindex="1" placeholder="[[topic:composer.title_placeholder]]" value="{topicTitle}"/>
 		{{{ else }}}
-		<span class="title h-100 text-truncate">{{{ if isEditing }}}[[topic:composer.editing]]{{{ else }}}[[topic:composer.replying_to, "{topicTitle}"]]{{{ end }}}</span>
+		<span class="d-block title h-100 text-truncate">{{{ 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>
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 
-	<div class="d-flex action-bar hidden-sm hidden-xs align-items-center">
+	<div class="d-flex action-bar gap-1 hidden-sm hidden-xs align-items-center">
 		<button class="btn btn-sm btn-link text-body fw-semibold" data-action="hide" tabindex="-1"><i class="fa fa-angle-down"></i> [[topic:composer.hide]]</button>
 		<button class="btn btn-sm btn-link composer-discard text-body fw-semibold" data-action="discard" tabindex="-1"><i class="fa fa-trash"></i> [[topic:composer.discard]]</button>
 		<div class="btn-group btn-group-sm">