Bug fixes for #179, #271, #273, and #286

This commit fixes several issues related to `links`.

 - #179 is fixed since the links are now underlined and highlighted blue
   like a hyperlink. Links are also clickable even when formatted with
   various formatting options (which was an issue before).

 - #271 was fixed in the last commit but made links not clickable - this
   nature has been fixed by traversing a clicked element's ancestors and
   opening the link if an `a` (anchor) tag is found.

 - #273 is fixed by taking care of the edge case when [Tab] is used before
   a link. This would cause a tab character to have the `link` format, this
   has been fixed by removing the `link` formatting for any whitespace characters
   before a link

 - #286 is fixed by specifically making sure the Delta objects for pasting a link
   in a bulleted or ordered list does not fall under the same category being matched
   as the fix for #273 (which was the cause of this)

src/sidebar/panel.js

@@ -90,7 +90,7 @@ quill.on('text-change', function(delta) {
   const regex = /https?:\/\/[^\s]+$/;
   if (delta.ops.length === 2 && delta.ops[0].retain ) {
     let endRetain = delta.ops[0].retain;
-    if (delta.ops[1].hasOwnProperty('insert')) {
+    if ('insert' in delta.ops[1]) {
       endRetain += 1;
     }
     const text = quill.getText().substr(0, endRetain);
@@ -105,16 +105,16 @@ quill.on('text-change', function(delta) {
         ops.push({ retain: endRetain - url.length });
       }
 
-      const attributes = {};
+      let formats = {};
       // apply any previous formatting options to the attributes object
       Object.keys(format).forEach(function(key) {
-        attributes[key] = format[key];
+        formats[key] = format[key];
       });
-      attributes['link'] = url;
+      formats.link = url;
 
       ops = ops.concat([
         { delete: url.length },
-        { insert: url, attributes }
+        { insert: url, attributes: formats }
       ]);
 
       quill.updateContents({
@@ -150,18 +150,32 @@ quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
   return delta;
 });
 
+function containsAnchor(el) {
+  if (el.tagName === 'A')
+    return el;
+
+  while (el.parentElement) {
+    el = el.parentElement;
+
+    if (el.tagName === 'A')
+      return el;
+  }
+}
+
 // adds an eventListener to every <a> element which opens their respective
 // href link in a new tab when clicked
 document.querySelector('#editor').addEventListener('click', function(e) {
-  const anchor = e.target;
-  if (anchor !== null && anchor.tagName === 'A') {
+  let el = e.target;
+  el = containsAnchor(el);
+
+  if (el !== null && el.tagName === 'A') {
     browser.runtime.sendMessage({
       action: 'link-clicked',
       context: getPadStats()
     });
     browser.tabs.create({
       active: true,
-      url: anchor.href
+      url: el.href
     });
   }
 });
@@ -173,8 +187,16 @@ quill.on('text-change', function(delta) {
     const format = quill.getFormat(delta.ops[0].retain, 1);
     if ('link' in format)
       quill.formatText(delta.ops[0].retain, 1, 'link', false);
-  } else if (delta.ops.length === 1 && delta.ops[0].hasOwnProperty('insert')) {
-    quill.formatText(0, 1, 'link', false);
+  }
+  // delta match when [Space] is used before link at beginning of document, fixes #273
+  else if (delta.ops.length === 1 && 'insert' in delta.ops[0]) {
+    if (isWhitespace(delta.ops[0].insert)) {
+      quill.formatText(0, 1, 'link', false);
+    }
+  }
+  // delta match when [Tab] is used before link at beginning of document, fixes #273
+  else if (delta.ops.length === 2 && 'insert' in delta.ops[0]) {
+    quill.formatText(0, delta.ops[1].retain + 1, 'link', false);
   } else
     return;
 });