Make url clickable

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';

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>