improve add external lib modal ux

Author: chinchang

src/index.html

@@ -249,14 +249,12 @@
 					</svg>
 				</a>
 				<h1>Add Library</h1>
-				<h3>JavaScript</h3>
-				<p style="font-size: 0.8em;opacity: 0.7;">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
-				<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
 
-				<h3>CSS</h3>
-				<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
-
-				<div style="margin-top:20px;">
+				<input type="text" id="externalLibrarySearchInput" class="full-width" placeholder="Type here to search libraries">
+				<div class="tar opacity--70">
+					<small>Powered by cdnjs</small>
+				</div>
+				<div style="margin:20px 0;">
 					Choose from popular libraries:
 					<select name="" id="js-add-library-select">
 						<option value="">-------</option>
@@ -268,6 +266,14 @@ <h3>CSS</h3>
 						</optgroup>
 					</select>
 				</div>
+
+				<h3>JavaScript</h3>
+				<p style="font-size: 0.8em;" class="opacity--70">Note: You can load external scripts from following domains: localhost, https://ajax.googleapis.com, https://code.jquery.com, https://cdnjs.cloudflare.com, https://unpkg.com, https://maxcdn.com, https://cdn77.com, https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, https://rawgit.com, https://wzrd.in</p>
+				<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
+
+				<h3>CSS</h3>
+				<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
+
 			</div>
 		</div>
 

src/script.js

@@ -7,7 +7,7 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
 customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
-globalConsoleContainerEl
+globalConsoleContainerEl, externalLibrarySearchInput
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -2249,12 +2249,21 @@ globalConsoleContainerEl
 		externalJsTextarea.addEventListener('blur', onExternalLibChange);
 		externalCssTextarea.addEventListener('blur', onExternalLibChange);
 
-		new TextareaAutoComplete(externalJsTextarea, obj =>
-			obj.latest.match(/\.js$/)
-		);
-		new TextareaAutoComplete(externalCssTextarea, obj =>
-			obj.latest.match(/\.css$/)
-		);
+		new TextareaAutoComplete(externalJsTextarea, {
+			filter: obj => obj.latest.match(/\.js$/)
+		});
+		new TextareaAutoComplete(externalCssTextarea, {
+			filter: obj => obj.latest.match(/\.css$/)
+		});
+		new TextareaAutoComplete(externalLibrarySearchInput, {
+			selectedCallback: value => {
+				const textarea = value.match(/\.js$/)
+					? externalJsTextarea
+					: externalCssTextarea;
+				textarea.value = `${textarea.value}\n${value}`;
+				externalLibrarySearchInput.value = '';
+			}
+		});
 
 		// Console header drag resize logic
 		var consoleHeaderDragStartY;

src/style.css

@@ -26,9 +26,11 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
 .fr { float: right; }
 .relative { position: relative; }
 .tac { text-align: center; }
+.tar { text-align: right; }
 .va-m { vertical-align: middle; }
 .full-width { width: 100%; }
 .opacity--30 { opacity: 0.3; }
+.opacity--70 { opacity: 0.7; }
 .pointer-none { pointer-events: none; }
 .ml-1 { margin-left: 1rem; }
 .ml-2 { margin-left: 2rem; }
@@ -858,8 +860,8 @@ transition: 0.25s ease;
 }
 .autocomplete__loader {
 	position: absolute;
-	right: 10px;
-	bottom: 10px;
+	right: 3px;
+	bottom: 1px;
 }
 @keyframes wobble {
 	from {

src/textarea-autocomplete.js

@@ -1,9 +1,10 @@
 // textarea-autocomplete.js
 (function() {
 	class TextareaAutoComplete {
-		constructor(textarea, filter) {
+		constructor(textarea, options) {
 			this.t = textarea;
-			this.filter = filter;
+			this.filter = options.filter;
+			this.selectedCallback = options.selectedCallback;
 			var wrap = document.createElement('div');
 			wrap.classList.add('btn-group');
 			textarea.parentElement.insertBefore(wrap, textarea);
@@ -128,16 +129,24 @@
 				event.preventDefault();
 			} else if (event.keyCode === 13 && this.isShowingSuggestions) {
 				selectedItemElement = this.list.querySelector('.selected');
-				this.replaceCurrentLine(selectedItemElement.dataset.url);
+				this.selectSuggestion(selectedItemElement.dataset.url);
 				this.closeSuggestions();
 			}
 		}
 		onListMouseDown(event) {
 			var target = event.target;
 			if (target.parentElement.dataset.url) {
-				this.replaceCurrentLine(target.parentElement.dataset.url);
-				this.closeSuggestions();
+				this.selectSuggestion(target.parentElement.dataset.url);
+			}
+		}
+
+		selectSuggestion(value) {
+			if (this.selectedCallback) {
+				this.selectedCallback.call(null, value);
+			} else {
+				this.replaceCurrentLine(value);
 			}
+			this.closeSuggestions();
 		}
 	}