Links plugin is.. functional..

2 files changed, 60 insertions, 25 deletions

diff --git a/pydis_site/static/js/wiki/load_editor.js b/pydis_site/static/js/wiki/load_editor.js
index 0671daed..589d8a75 100644
--- a/pydis_site/static/js/wiki/load_editor.js
+++ b/pydis_site/static/js/wiki/load_editor.js
@@ -43,6 +43,15 @@
         }
     }
 
+    function add_insert_text(editor) {
+        editor.insert_text = function(text) {
+            let doc = editor.codemirror.getDoc(),
+                cursor = doc.getCursor();
+
+            doc.replaceRange(text, cursor);
+        }
+    }
+
     for (let element of elements) {
         let editor = new SimpleMDE({
             "element": element,
@@ -80,6 +89,8 @@
         });
 
         add_insert_image_wiki(editor);
+        add_insert_text(editor);
+
         window.editors[element.id] = editor;
     }
 })();
diff --git a/pydis_site/templates/wiki/plugins/links/sidebar.html b/pydis_site/templates/wiki/plugins/links/sidebar.html
index 45096edd..80c390dc 100644
--- a/pydis_site/templates/wiki/plugins/links/sidebar.html
+++ b/pydis_site/templates/wiki/plugins/links/sidebar.html
@@ -1,44 +1,68 @@
-{% load i18n sekizai_tags static %}
+{% load sekizai_tags static %}
 
-<h4>{% trans "Link to another wiki page" %}</h4>
+<h4 class="title is-4">Link to another wiki page</h4>
 
 <p>
-  {% trans "Type in something from another wiki page's title and auto-complete will help you create a tag for your wiki link. Tags for links look like this:" %}<br />
+  Type in something from another wiki page's title and auto-complete will help you create a tag for your wiki link. Tags for links look like this:<br />
 </p>
 
 <pre>[Title of link](wiki:ArticleSlug)</pre>
 
-<div class="input-group">
-  <input type="text" class="page_title_query form-control" id="links_page_title_query" value="" placeholder="Type to search..." />
-  <span class="input-group-btn">
-    <button type="button" class="btn btn-default" onclick="wikiInsertLink()">
-      {% trans "Insert" %}
-    </button>
-  </span>
+<div class="field">
+  <div class="control has-icons-left">
+    <div class="dropdown">
+      <div class="dropdown-trigger">
+        <input class="input" type="text" id="page_title_input" value="" placeholder="Search: 3+ chars" aria-haspopup="true" aria-controls="page_title_menu">
+      </div>
+      <div class="dropdown-menu" id="page_title_menu" role="menu"></div>
+    </div>
+
+    <span class="icon is-small is-left">
+      <i class="fas fa-search"></i>
+    </span>
+  </div>
 </div>
 
-<hr />
+<div class="is-divider"></div>
 
-<h4>{% trans "An external link" %}</h4>
+<h4 class="title is-4">An external link</h4>
 
 <p>
-  {% trans "You can link to another website simply by inserting an address example.com or http://example.com or by using the markdown syntax:" %}<br />
+  You can link to another website simply by inserting an address example.com or http://example.com or by using the markdown syntax:<br />
 </p>
+
 <pre>[Clickable text](http://example.com)</pre>
 
-{% addtoblock "js" %}<script type="text/javascript" src="{% static "wiki/js/typeahead.min.js" %}"></script>{% endaddtoblock %}
 {% addtoblock "js" %}
-<script type="text/javascript">
-  $(document).ready(function() {
-      $('.page_title_query').typeahead({
-        remote: "{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}?query=%QUERY",
-        dataType: String
-      });
-  });
-
-function wikiInsertLink() {
-  $('#id_content').insertAtCaret($('#links_page_title_query').val());
-}
+  <script src="https://cdn.rawgit.com/mattmezza/bulmahead/master/dist/bulmahead.bundle.js"></script>
+
+  <script type="text/javascript">
+    $(document).ready(function() {
+      function search(query) {
+        query = encodeURIComponent(query);
+        return fetch(`{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}?query=${query}`).then(function(response) {
+          return response.json();
+        }).then(function(data){
+          return data.map(function(element) {
+            return {label: element, value: element};
+          })
+        });
+      }
+
+      function selected(state) {
+        let value = state.value;
+        wikiInsertLink(value);
+        document.getElementById("page_title_input").value = "";
+      }
+
+      bulmahead("page_title_input", "page_title_menu", search, selected, 10);
+    });
+
+    function wikiInsertLink(value) {
+      let editor = window.editors["id_content"];
+
+      editor.insert_text(value);
+    }
 
 </script>
 {% endaddtoblock %}