Insert <a> (no href) instead of <span> (#114)

This allows the links to be "clicked" with [Vimium]. I also needed to add a little CSS to keep links the same color as before. [Vimium]: https://vimium.github.io/ (adapted from commit 0a69fee)
OctoLinker · Jun 30, 2016 · 9dd0c30 · 9dd0c30
1 parent 45f54c5
commit 9dd0c30
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -10,3 +10,7 @@ body.octo-linker-debug .octo-linker-link {
   background-color: rgba(255, 0, 255, 0.2);
   border: 1px solid rgb(255, 0, 255);
 }
+
+a.octo-linker-link {
+    color: inherit;
+}
diff --git a/lib/insert-link.js b/lib/insert-link.js
@@ -4,7 +4,7 @@ import findAndReplaceDOMText from 'findandreplacedomtext';
 const CLASS_NAME = 'octo-linker-link';
 
 function createLinkElement(text, dataAttr = {}) {
-  const linkEl = document.createElement('span');
+  const linkEl = document.createElement('a');
 
   // Set link text
   linkEl.textContent = text;

diff --git a/test/insert-link.test.js b/test/insert-link.test.js
@@ -19,9 +19,9 @@ describe('helper-replace-keywords', () => {
       dataAttributes += ` data-${key}="${value}"`;
     }
 
-    const start = `<span class="octo-linker-link"${dataAttributes}>`;
+    const start = `<a class="octo-linker-link"${dataAttributes}>`;
     const input = el.replace(/\$0/g, '');
-    const output = el.replace('$0', start).replace('$0', '</span>');
+    const output = el.replace('$0', start).replace('$0', '</a>');
 
     return {
       input,