diff --git a/sourcing/static/js/build_links.js b/sourcing/static/js/build_links.js
new file mode 100644
index 0000000..199d10f
--- /dev/null
+++ b/sourcing/static/js/build_links.js
@@ -0,0 +1,47 @@
+  $('#new-link').hide();
+  $('#new-link').click((e) => {
+    var selection = window.getSelection();
+    if(selection.type != 'Range')
+      return;
+
+    var range = selection.getRangeAt(0);
+    var start = range.startContainer;
+    var start_element = range.startContainer.parentElement;
+    var end_element = range.endContainer.parentElement;
+
+    var start = parseInt(start_element.getAttribute('data-start')) + range.startOffset;
+    var end = parseInt(end_element.getAttribute('data-start')) + range.endOffset;
+    var length = end - start;
+
+    console.log('start', start, 'length', length);
+
+    var text = start_element.textContent;
+    var text1 = text.substring(0, range.startOffset);
+    var text2 = text.substring(range.startOffset + 1);
+
+    console.log([text1, text2]);
+
+    var e = start_element;
+    var count = 0;
+
+    while (e != end_element && count < 50) {
+      $(e).wrapInner('<span class="selected-span"></span>');
+      count++;
+      e = e.nextElementSibling;
+    }
+    e = end_element;
+    $(e).wrapInner('<span class="selected-span"></span>');
+
+    selection.removeAllRanges();
+    $('#new-link').hide();
+
+  });
+
+  document.addEventListener('selectionchange', () => {
+    var selection = window.getSelection();
+    if (selection.toString()) {
+      $('#new-link').show();
+    } else {
+      $('#new-link').hide();
+    }
+  });