Fix interaction of library parameters and autocomplete [#56]

lib/sequence-diagram-web.js

@@ -10264,11 +10264,17 @@
 			list.unshift(makeHintItem(selfValid, ranges, pVar.quote));
 		}
 
-		return {
+		const data = {
 			from: suggestDropdownLocation(list, ranges.fromKey),
 			list,
 			to: ranges.to.word,
 		};
+
+		// Workaround for https://github.com/codemirror/CodeMirror/issues/3092
+		const CM = cm.constructor;
+		CM.on(data, 'shown', CM.signal.bind(cm, cm, 'hint-shown'));
+
+		return data;
 	}
 
 	const themes = [

lib/sequence-diagram.js

@@ -10264,11 +10264,17 @@
 			list.unshift(makeHintItem(selfValid, ranges, pVar.quote));
 		}
 
-		return {
+		const data = {
 			from: suggestDropdownLocation(list, ranges.fromKey),
 			list,
 			to: ranges.to.word,
 		};
+
+		// Workaround for https://github.com/codemirror/CodeMirror/issues/3092
+		const CM = cm.constructor;
+		CM.on(data, 'shown', CM.signal.bind(cm, cm, 'hint-shown'));
+
+		return data;
 	}
 
 	const themes = [

scripts/sequence/codemirror/hints.mjs

@@ -221,9 +221,15 @@ export function getHints(cm, options) {
 		list.unshift(makeHintItem(selfValid, ranges, pVar.quote));
 	}
 
-	return {
+	const data = {
 		from: suggestDropdownLocation(list, ranges.fromKey),
 		list,
 		to: ranges.to.word,
 	};
+
+	// Workaround for https://github.com/codemirror/CodeMirror/issues/3092
+	const CM = cm.constructor;
+	CM.on(data, 'shown', CM.signal.bind(cm, cm, 'hint-shown'));
+
+	return data;
 }

web/lib/editor.js

@@ -1162,6 +1162,8 @@
 		}
 
 		buildCodePane() {
+			this.isAutocompleting = false;
+
 			this.code = this.dom.el('textarea')
 				.setClass('editor-simple')
 				.val(this.loadCode() || this.defaultCode)
@@ -1306,12 +1308,16 @@
 				switch(event.keyCode) {
 				case 13:
 				case 9:
+					if(!this.isAutocompleting) {
 						event.preventDefault();
+					}
 					this.advanceParams();
 					break;
 				case 27:
+					if(!this.isAutocompleting) {
 						event.preventDefault();
 						this.cancelParams();
+					}
 					break;
 				}
 			};
@@ -1661,6 +1667,20 @@
 					this.diagram.setHighlight(Math.min(from, to));
 				});
 
+				/*
+				 * See https://github.com/codemirror/CodeMirror/issues/3092
+				 * startCompletion will fire even if there are no completions, so
+				 * we cannot rely on it. Instead we hack the hints function to
+				 * propagate 'shown' as 'hint-shown', which we pick up here
+				 */
+				code.on('hint-shown', () => {
+					this.isAutocompleting = true;
+				});
+
+				code.on('endCompletion', () => {
+					this.isAutocompleting = false;
+				});
+
 				if(focussed) {
 					code.focus();
 				}

web/scripts/interface/Interface.mjs

@@ -601,6 +601,8 @@ export default class Interface {
 	}
 
 	buildCodePane() {
+		this.isAutocompleting = false;
+
 		this.code = this.dom.el('textarea')
 			.setClass('editor-simple')
 			.val(this.loadCode() || this.defaultCode)
@@ -745,12 +747,16 @@ export default class Interface {
 			switch(event.keyCode) {
 			case 13:
 			case 9:
+				if(!this.isAutocompleting) {
 					event.preventDefault();
+				}
 				this.advanceParams();
 				break;
 			case 27:
+				if(!this.isAutocompleting) {
 					event.preventDefault();
 					this.cancelParams();
+				}
 				break;
 			}
 		};
@@ -1100,6 +1106,20 @@ export default class Interface {
 				this.diagram.setHighlight(Math.min(from, to));
 			});
 
+			/*
+			 * See https://github.com/codemirror/CodeMirror/issues/3092
+			 * startCompletion will fire even if there are no completions, so
+			 * we cannot rely on it. Instead we hack the hints function to
+			 * propagate 'shown' as 'hint-shown', which we pick up here
+			 */
+			code.on('hint-shown', () => {
+				this.isAutocompleting = true;
+			});
+
+			code.on('endCompletion', () => {
+				this.isAutocompleting = false;
+			});
+
 			if(focussed) {
 				code.focus();
 			}