diff --git a/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6 b/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
index d4f15d95cf..313ab332c3 100644
--- a/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
+++ b/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
@@ -1,15 +1,140 @@
import ModalFunctionality from "discourse/mixins/modal-functionality";
+import { searchForTerm } from "discourse/lib/search";
export default Ember.Controller.extend(ModalFunctionality, {
- linkUrl: "",
- linkText: "",
+ _debounced: null,
+ _activeSearch: null,
onShow() {
- Ember.run.next(() =>
- $(this)
- .find("input.link-url")
- .focus()
- );
+ this.setProperties({
+ linkUrl: "",
+ linkText: "",
+ searchResults: [],
+ searchLoading: false,
+ selectedRow: -1
+ });
+
+ Ember.run.scheduleOnce("afterRender", () => {
+ const element = document.querySelector(".insert-link");
+
+ element.addEventListener("keydown", e => this.keyDown(e));
+
+ element
+ .closest(".modal-inner-container")
+ .addEventListener("mousedown", e => this.mouseDown(e));
+
+ document.querySelector("input.link-url").focus();
+ });
+ },
+
+ keyDown(e) {
+ switch (e.which) {
+ case 40:
+ this.highlightRow(e, "down");
+ break;
+ case 38:
+ this.highlightRow(e, "up");
+ break;
+ case 13:
+ // override Enter behaviour when a row is selected
+ if (this.selectedRow > -1) {
+ const selected = document.querySelectorAll(
+ ".internal-link-results .search-link"
+ )[this.selectedRow];
+ this.selectLink(selected);
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ break;
+ case 27:
+ // Esc should cancel dropdown first
+ if (this.searchResults.length) {
+ this.set("searchResults", []);
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ break;
+ }
+ },
+
+ mouseDown(e) {
+ if (!e.target.closest(".inputs")) {
+ this.set("searchResults", []);
+ }
+ },
+
+ highlightRow(e, direction) {
+ const index =
+ direction === "down" ? this.selectedRow + 1 : this.selectedRow - 1;
+
+ if (index > -1 && index < this.searchResults.length) {
+ document
+ .querySelectorAll(".internal-link-results .search-link")
+ [index].focus();
+ this.set("selectedRow", index);
+ } else {
+ this.set("selectedRow", -1);
+ document.querySelector("input.link-url").focus();
+ }
+
+ e.preventDefault();
+ },
+
+ selectLink(el) {
+ this.setProperties({
+ linkUrl: el.href,
+ searchResults: [],
+ selectedRow: -1
+ });
+
+ if (!this.linkText && el.dataset.title) {
+ this.set("linkText", el.dataset.title);
+ }
+
+ document.querySelector("input.link-text").focus();
+ },
+
+ triggerSearch() {
+ if (this.linkUrl.length > 3 && this.linkUrl.indexOf("http") === -1) {
+ this.set("searchLoading", true);
+ this._activeSearch = searchForTerm(this.linkUrl, {
+ typeFilter: "topic"
+ });
+ this._activeSearch
+ .then(results => {
+ if (results && results.topics && results.topics.length > 0) {
+ this.set("searchResults", results.topics);
+ } else {
+ this.set("searchResults", []);
+ }
+ })
+ .finally(() => {
+ this.set("searchLoading", false);
+ this._activeSearch = null;
+ });
+ } else {
+ this.abortSearch();
+ }
+ },
+
+ abortSearch() {
+ if (this._activeSearch) {
+ this._activeSearch.abort();
+ }
+ this.setProperties({
+ searchResults: [],
+ searchLoading: false
+ });
+ },
+
+ onClose() {
+ const element = document.querySelector(".insert-link");
+ element.removeEventListener("keydown", this.keyDown);
+ element
+ .closest(".modal-inner-container")
+ .removeEventListener("mousedown", this.mouseDown);
+
+ Ember.run.cancel(this._debounced);
},
actions: {
@@ -35,12 +160,20 @@ export default Ember.Controller.extend(ModalFunctionality, {
this.toolbarEvent.selectText(sel.start + 1, origLink.length);
}
}
- this.set("linkUrl", "");
- this.set("linkText", "");
this.send("closeModal");
},
cancel() {
this.send("closeModal");
+ },
+ linkClick(e) {
+ if (!e.metaKey && !e.ctrlKey) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.selectLink(e.target);
+ }
+ },
+ search() {
+ this._debounced = Ember.run.debounce(this, this.triggerSearch, 400);
}
}
});
diff --git a/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs b/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
index 8aa0607266..ec15a2b501 100644
--- a/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
@@ -1,6 +1,27 @@
{{#d-modal-body title="composer.link_dialog_title" class="insert-link"}}
{{text-field value=linkText placeholderKey="composer.link_optional_text" class="link-text"}}
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index bf181bfc70..44f7c2fbf2 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -201,9 +201,42 @@
}
&.insert-link {
+ overflow-y: visible;
input {
min-width: 300px;
}
+
+ .inputs {
+ position: relative;
+ .spinner {
+ position: absolute;
+ right: 8px;
+ top: -15px;
+ width: 10px;
+ height: 10px;
+ }
+ .internal-link-results {
+ position: absolute;
+ top: 70%;
+ padding: 5px 10px;
+ box-shadow: shadow("card");
+ z-index: 5;
+ background-color: $secondary;
+ max-height: 150px;
+ width: 90%;
+ overflow-y: auto;
+ > a {
+ padding: 6px;
+ border-bottom: 1px solid $primary-low;
+ cursor: pointer;
+ display: block;
+ &:hover,
+ &:focus {
+ background-color: $highlight-medium;
+ }
+ }
+ }
+ }
}
textarea {
width: 99%;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f30f1087fb..df10b60207 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1685,7 +1685,7 @@ en:
link_description: "enter link description here"
link_dialog_title: "Insert Hyperlink"
link_optional_text: "optional title"
- link_url_placeholder: "https://example.com"
+ link_url_placeholder: "Paste a URL or type to search topics"
quote_title: "Blockquote"
quote_text: "Blockquote"
code_title: "Preformatted text"
diff --git a/test/javascripts/acceptance/composer-hyperlink-test.js.es6 b/test/javascripts/acceptance/composer-hyperlink-test.js.es6
index 52ff6c7d03..dd1914ed8c 100644
--- a/test/javascripts/acceptance/composer-hyperlink-test.js.es6
+++ b/test/javascripts/acceptance/composer-hyperlink-test.js.es6
@@ -9,18 +9,13 @@ QUnit.test("add a hyperlink to a reply", async assert => {
await click(".topic-post:first-child button.reply");
await fillIn(".d-editor-input", "This is a link to ");
- assert.equal(
- find(".insert-link.modal-body").length,
- 0,
+ assert.ok(
+ !exists(".insert-link.modal-body"),
"no hyperlink modal by default"
);
await click(".d-editor button.link");
- assert.equal(
- find(".insert-link.modal-body").length,
- 1,
- "hyperlink modal visible"
- );
+ assert.ok(exists(".insert-link.modal-body"), "hyperlink modal visible");
await fillIn(".modal-body .link-url", "google.com");
await fillIn(".modal-body .link-text", "Google");
@@ -32,9 +27,8 @@ QUnit.test("add a hyperlink to a reply", async assert => {
"adds link with url and text, prepends 'http://'"
);
- assert.equal(
- find(".insert-link.modal-body").length,
- 0,
+ assert.ok(
+ !exists(".insert-link.modal-body"),
"modal dismissed after submitting link"
);
@@ -51,9 +45,8 @@ QUnit.test("add a hyperlink to a reply", async assert => {
"adds link with url and text, prepends 'http://'"
);
- assert.equal(
- find(".insert-link.modal-body").length,
- 0,
+ assert.ok(
+ !exists(".insert-link.modal-body"),
"modal dismissed after cancelling"
);
@@ -70,4 +63,36 @@ QUnit.test("add a hyperlink to a reply", async assert => {
"[Reset](http://somelink.com) textarea contents.",
"adds link to a selected text"
);
+
+ await fillIn(".d-editor-input", "");
+
+ await click(".d-editor button.link");
+ await fillIn(".modal-body .link-url", "http://google.com");
+ await keyEvent(".modal-body .link-url", "keyup", 32);
+ assert.ok(
+ !exists(".internal-link-results"),
+ "does not show internal links search dropdown when inputting a url"
+ );
+
+ await fillIn(".modal-body .link-url", "local");
+ await keyEvent(".modal-body .link-url", "keyup", 32);
+ assert.ok(
+ exists(".internal-link-results"),
+ "shows internal links search dropdown when entering keywords"
+ );
+
+ await keyEvent(".insert-link", "keydown", 40);
+ await keyEvent(".insert-link", "keydown", 13);
+
+ assert.ok(
+ !exists(".internal-link-results"),
+ "search dropdown dismissed after selecting an internal link"
+ );
+
+ assert.ok(
+ find(".link-url")
+ .val()
+ .includes("http"),
+ "replaces link url field with internal link"
+ );
});