From 2da1105ff8146abe322f391da8f3986a2aeb3a89 Mon Sep 17 00:00:00 2001
From: Baptiste Augrain <daiyam@zokugun.org>
Date: Thu, 6 Sep 2018 14:57:44 +0200
Subject: [PATCH] make markdown links clickable

---
 .../codemirror/addon/hyperlink/hyperlink.js   | 116 ++++++++++++++++++
 browser/main/global.styl                      |   9 ++
 lib/main.html                                 |   2 +
 3 files changed, 127 insertions(+)
 create mode 100755 browser/codemirror/addon/hyperlink/hyperlink.js

diff --git a/browser/codemirror/addon/hyperlink/hyperlink.js b/browser/codemirror/addon/hyperlink/hyperlink.js
new file mode 100755
index 00000000..87c6a85e
--- /dev/null
+++ b/browser/codemirror/addon/hyperlink/hyperlink.js
@@ -0,0 +1,116 @@
+(function (mod) {
+  if (typeof exports === 'object' && typeof module === 'object') { // Common JS
+    mod(require('../codemirror/lib/codemirror'))
+  } else if (typeof define === 'function' && define.amd) { // AMD
+    define(['../codemirror/lib/codemirror'], mod)
+  } else { // Plain browser env
+    mod(CodeMirror)
+  }
+})(function (CodeMirror) {
+  'use strict'
+
+  const shell = require('electron').shell
+
+  class HyperLink {
+    constructor(cm) {
+      this.xOffset = 10
+      this.yOffset = 2
+      this.cm = cm
+      this.lineDiv = cm.display.lineDiv
+
+      this.onClick = this.onClick.bind(this)
+      this.onMouseEnter = this.onMouseEnter.bind(this)
+      this.onMouseLeave = this.onMouseLeave.bind(this)
+      this.onMouseMove = this.onMouseMove.bind(this)
+
+      this.tooltip = document.createElement('div')
+      this.tooltipContent = document.createElement('div')
+      this.tooltipIndicator = document.createElement('div')
+      this.tooltip.setAttribute('class', 'CodeMirror-hover')
+      this.tooltip.setAttribute('cm-ignore-events', 'true')
+      this.tooltip.appendChild(this.tooltipContent)
+      this.tooltip.appendChild(this.tooltipIndicator)
+      this.tooltipContent.textContent = 'Cmd + click to follow link'
+
+      this.lineDiv.addEventListener('click', this.onClick, true)
+      this.lineDiv.addEventListener('mouseenter', this.onMouseEnter, true)
+      this.lineDiv.addEventListener('mouseleave', this.onMouseLeave, true)
+      this.lineDiv.addEventListener('mousemove', this.onMouseMove, true)
+    }
+    getUrl(el) {
+      const className = el.className.split(' ')
+
+      if (className.indexOf('cm-url') !== -1) {
+        const match = /^\((.*)\)|\[(.*)\]|(.*)$/.exec(el.textContent)
+        return match[1] || match[2] || match[3]
+      }
+
+      return null
+    }
+    onClick(e) {
+      const { target, metaKey } = e
+      if (!metaKey) {
+        return
+      }
+
+      const url = this.getUrl(target)
+      if (url) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        shell.openExternal(url)
+      }
+    }
+    onMouseEnter(e) {
+      const { target, metaKey } = e
+
+      const url = this.getUrl(target)
+      if (url) {
+        if (metaKey) {
+          target.classList.add('CodeMirror-hyperlink')
+        }
+
+        this.showInfo(target)
+      }
+    }
+    onMouseLeave(e) {
+      if (this.tooltip.parentElement === this.lineDiv) {
+        e.target.classList.remove('CodeMirror-hyperlink')
+
+        this.lineDiv.removeChild(this.tooltip)
+      }
+    }
+    onMouseMove(e) {
+      if (this.tooltip.parentElement === this.lineDiv) {
+        if (e.metaKey) {
+          e.target.classList.add('CodeMirror-hyperlink')
+        }
+        else {
+          e.target.classList.remove('CodeMirror-hyperlink')
+        }
+      }
+    }
+    showInfo(relatedTo) {
+      const b1 = relatedTo.getBoundingClientRect()
+      const b2 = this.lineDiv.getBoundingClientRect()
+      const tdiv = this.tooltip
+      let xOffset = this.xOffset
+
+      tdiv.style.left = (b1.left - b2.left - xOffset) + 'px'
+      this.lineDiv.appendChild(tdiv)
+
+      const b3 = tdiv.getBoundingClientRect()
+      if (b3.right > b2.right) {
+        xOffset = b3.right - b2.right
+        tdiv.style.left = (b1.left - b2.left - xOffset) + 'px'
+      }
+      tdiv.style.top = (b1.top - b2.top - b3.height - this.yOffset) + 'px'
+
+      this.tooltipIndicator.style.marginLeft = xOffset + 'px'
+    }
+  }
+
+  CodeMirror.defineOption('hyperlink', true, (cm) => {
+    const addon = new HyperLink(cm)
+  })
+})
\ No newline at end of file
diff --git a/browser/main/global.styl b/browser/main/global.styl
index e4505a4e..428c6e00 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -132,6 +132,15 @@ body[data-theme="dark"]
 .CodeMirror-foldgutter-folded:after
   content: "\25B8"
 
+.CodeMirror-hover
+  position absolute
+  border-bottom 1px solid white
+  z-index 99
+
+.CodeMirror-hyperlink
+  cursor pointer
+
+
 .sortableItemHelper
   z-index modalZIndex + 5
 
diff --git a/lib/main.html b/lib/main.html
index 7366fa04..c8d89464 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
   <link rel="stylesheet" href="../node_modules/katex/dist/katex.min.css">
   <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
+
   <title>Boostnote</title>
 
   <style>
@@ -95,6 +96,7 @@
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../extra_scripts/boost/boostNewLineIndentContinueMarkdownList.js"></script>
+  <script src="../browser/codemirror/addon/hyperlink/hyperlink.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/closebrackets.js"></script>
   <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>