From b22e5fae8110c5c99926aa8eb00496902b89fbf5 Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Mon, 27 Apr 2020 17:41:11 +0200
Subject: [PATCH] Make url clickable

---
 src/App.svelte      |  3 ++-
 src/JSONNode.svelte | 24 +++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 678f21d..625bbb5 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -34,7 +34,8 @@
 				coordinates: [23.44, 1.23]
 			},
 		}},
-		'string': 'Hello World'
+		'string': 'Hello World',
+		'url': 'https://jsoneditoronline.org'
 	}
 
 	let uniDirectionalValue = 'test uni directional flow in Svelte';
diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index 4e587c2..7cb431f 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -40,9 +40,10 @@
 
   $: escapedKey = escapeHTML(key, escapeUnicode)
   $: escapedValue = escapeHTML(value, escapeUnicode)
+  $: valueIsUrl = isUrl(value)
 
   $: valueClass = classnames('value', type, {
-    url: isUrl(value),
+    url: valueIsUrl,
     empty: escapedValue.length === 0,
     search: searchResult
       ? !!searchResult[SEARCH_VALUE]
@@ -64,6 +65,24 @@
     onChangeValue(newValue, key)
   }
 
+  function handleValueClick (event) {
+    if (valueIsUrl && event.ctrlKey) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      window.open(value, '_blank')
+    }
+  }
+
+  function handleValueKeyDown (event) {
+    if (event.ctrlKey && event.key === 'Enter') {
+      event.preventDefault()
+      event.stopPropagation()
+
+      window.open(value, '_blank')
+    }
+  }
+
   function handleChangeKey (newChildKey, oldChildKey) {
     if (type === 'object') {
       const updatedValue = {}
@@ -364,6 +383,9 @@
         class={valueClass}
         contenteditable="true"
         on:input={handleValueInput}
+        on:click={handleValueClick}
+        on:keydown={handleValueKeyDown}
+        title={valueIsUrl ? 'Ctrl+Click or Ctrl+Enter to open url in new window' : null}
       >
         {escapedValue}
       </div>