Add note field to progress window

src/common/connector.js

@@ -65,6 +65,7 @@ Zotero.Connector = new function() {
 			Zotero.Connector.automaticSnapshots = !!response.prefs.automaticSnapshots;
 			Zotero.Connector.googleDocsAddNoteEnabled = !!response.prefs.googleDocsAddNoteEnabled;
 			Zotero.Connector.googleDocsCitationExplorerEnabled = !!response.prefs.googleDocsCitationExplorerEnabled;
+			Zotero.Connector.canUserAddNote = !!response.prefs.canUserAddNote;
 			if (response.prefs.translatorsHash) {
 				(async () => {
 					let sorted = !!response.prefs.sortedTranslatorHash;

src/common/inject/progressWindow_inject.js

@@ -58,7 +58,7 @@ if (isTopWindow) {
 	var isReadOnly = false;
 	var syncDelayIntervalID;
 	var insideIframe = false;
-	var insideTags = false;
+	var closeTimerDisabled = false;
 	var blurred = false;
 	var frameSrc;
 	var frameIsHidden = false;
@@ -212,7 +212,7 @@ if (isTopWindow) {
 	function startCloseTimer(delay) {
 		// Don't start the timer if the mouse is over the popup or the tags box has focus
 		if (insideIframe) return;
-		if (insideTags) return;
+		if (closeTimerDisabled) return;
 
 		if (!delay) delay = 5000;
 		stopCloseTimer();
@@ -301,6 +301,7 @@ if (isTopWindow) {
 					{
 						sessionID: currentSessionID,
 						target: data.target.id,
+						note: (data.note || "").replace(/\n/g, '<br>'), // Convert newlines to <br> for note-editor
 						tags: data.tags
 							// TEMP: Avoid crash on leading/trailing comma pre-5.0.57
 							? data.tags.replace(/(^,|,$)/g, '') : data.tags
@@ -344,8 +345,8 @@ if (isTopWindow) {
 		addMessageListener('progressWindowIframe.mouseenter', handleMouseEnter);
 		addMessageListener('progressWindowIframe.mouseleave', handleMouseLeave);
 
-		addMessageListener('progressWindowIframe.tagsfocus', () => insideTags = true);
-		addMessageListener('progressWindowIframe.tagsblur', () => insideTags = false);
+		addMessageListener('progressWindowIframe.disableCloseTimer', () => closeTimerDisabled = true);
+		addMessageListener('progressWindowIframe.enableCloseTimer', () => closeTimerDisabled = false);
 
 		addMessageListener('progressWindowIframe.blurred', async function() {
 			blurred = true;

src/common/progressWindow/progressWindow.css

@@ -108,6 +108,18 @@ button:active {
 	min-width: 0; 
 }
 
+.ProgressWindow-noteEditor {
+	width: 100%;
+	resize: none;
+	max-height: 6em; /* expand up to 5 lines of text */
+	height: 36px; /* initial height that may increase as user types */
+}
+
+.ProgressWindow-noteEditorRow {
+	margin-top: 6px;
+	display: flex;
+}
+
 .ProgressWindow-button {
 	background-color: white;
 	padding: 3px 24px;

src/common/ui/ProgressWindow.jsx

@@ -60,12 +60,14 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 		this.announceAlerts = false;
 		this.alertTimeout = null;
 		this.done = false;
+		this.canUserAddNote = false;
 
 		this.text = {
 			more: Zotero.getString('general_more'),
 			done: Zotero.getString('general_done'),
 			tagsPlaceholder: Zotero.getString('progressWindow_tagPlaceholder'),
-			filterPlaceholder: Zotero.getString('progressWindow_filterPlaceholder')
+			filterPlaceholder: Zotero.getString('progressWindow_filterPlaceholder'),
+			addNotePlaceholder: Zotero.getString('progressWindow_noteEditorPlaceholder')
 		};
 
 		this.expandedRowsCache = {};
@@ -86,6 +88,10 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 		this.handleKeyDown = this.handleKeyDown.bind(this);
 		this.handleKeyPress = this.handleKeyPress.bind(this);
 		this.onTagsChange = this.onTagsChange.bind(this);
+		this.onNoteChange = this.onNoteChange.bind(this);
+		this.onNoteFocus = this.onNoteFocus.bind(this);
+		this.onNoteBlur = this.onNoteBlur.bind(this);
+		this.onNoteKeyPress = this.onNoteKeyPress.bind(this);
 		this.onTagsKeyPress = this.onTagsKeyPress.bind(this);
 		this.onTagsFocus = this.onTagsFocus.bind(this);
 		this.onTagsBlur = this.onTagsBlur.bind(this);
@@ -103,7 +109,8 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 			targetSelectorShown: false,
 			tags: "",
 			itemProgress: new Map(),
-			errors: []
+			errors: [],
+			note: ""
 		};
 	}
 
@@ -124,6 +131,9 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 		this.sendMessage('registered');
 
 		document.querySelector("#progress-window").setAttribute("aria-label", Zotero.getString('general_saveTo', 'Zotero'));
+		Zotero.Connector.getPref('canUserAddNote').then(res => {
+			this.canUserAddNote = res;
+		});
 	}
 
 
@@ -351,7 +361,7 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 	}
 
 	sendUpdate() {
-		this.sendMessage('updated', { target: this.target, tags: this.tags });
+		this.sendMessage('updated', { target: this.target, tags: this.tags, note: this.state.note });
 	}
 
 	//
@@ -572,14 +582,38 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 	}
 
 	onTagsFocus() {
-		this.sendMessage('tagsfocus');
+		this.sendMessage('disableCloseTimer');
 	}
 
 	onTagsBlur() {
-		this.sendMessage('tagsblur');
+		this.sendMessage('enableCloseTimer');
 		this.sendUpdate();
 	}
 
+	onNoteChange(event) {
+		let textarea = event.target;
+		this.setState({ note: textarea.value });
+		// auto-expand the textarea as the user types
+		textarea.style.height = 'auto';
+		textarea.style.height = textarea.scrollHeight + 'px';
+	}
+
+	onNoteFocus() {
+		this.sendMessage('disableCloseTimer');;
+	}
+
+	onNoteBlur() {
+		this.sendMessage('enableCloseTimer');
+		this.sendUpdate();
+	}
+
+	onNoteKeyPress(event) {
+		// Allow Enter to add new line. Shift-Enter will close the window
+		if (event.key == 'Enter' && !event.shiftKey) {
+			event.stopPropagation();
+		}
+	}
+
 	handleDone() {
 		//this.headlineSelectNode.current.focus();
 		this.sendMessage('close');
@@ -762,6 +796,18 @@ Zotero.UI.ProgressWindow = class ProgressWindow extends React.PureComponent {
 						onRowToggle={this.handleRowToggle}
 						onRowFocus={this.onTargetChange}/>
 				</div>
+				{ this.canUserAddNote ? 
+					<div className="ProgressWindow-noteEditorRow">
+						<textarea
+							className="ProgressWindow-noteEditor"
+							placeholder={this.text.addNotePlaceholder}
+							value={this.state.note}
+							onChange={this.onNoteChange}
+							onBlur={this.onNoteBlur}
+							onFocus={this.onNoteFocus}
+							onKeyPress={this.onNoteKeyPress}/>
+					</div>
+				: <></> }
 				<div className="ProgressWindow-inputRow ProgressWindow-targetSelectorTagsRow">
 					<input className="ProgressWindow-tagsInput"
 						type="text"

src/messages.json

@@ -109,6 +109,9 @@
 	"progressWindow_filterPlaceholder": {
 		"message": "Filter Collections"
 	},
+	"progressWindow_noteEditorPlaceholder": {
+		"message": "Add a note"
+	},
 	"progressWindow_error_translation": {
 		"message": "An error occurred while saving this item. See $1 for more information."
 	},