Open documentation URLs in new web browser

src/view-browser.js

@@ -56,6 +56,10 @@ class BrowserHostService {
         request.open('GET', file, true);
         request.send();
     }
+
+    openURL(url) {
+        window.open(url, '_target');
+    }
 }
 
 var hostService = new BrowserHostService();

src/view-electron.js

@@ -84,6 +84,10 @@ class ElectronHostService {
         });
     }
 
+    openURL(url) {
+        electron.shell.openExternal(url);
+    }
+
     openBuffer(file) {
         fs.exists(file, (exists) => {
             if (!exists) {

src/view-template.js

@@ -70,7 +70,7 @@ var operatorTemplate = `
 .documentation dd { padding: 0 16px; margin-left: 0; margin-bottom: 16px; }
 </style>
 
-<div class='documentation'>
+<div id='documentation' class='documentation'>
 
 <h1>{{{name}}}</h1>
 {{#if summary}}
@@ -226,7 +226,7 @@ var nodeTemplate = `
 <div class='node-summary'>
 <div class='node-group'>
 {{#if operator}}
-<h1>{{{operator}}}{{#if documentation}} <a id='operator-documentation' class='documentation-button'>?</a>{{/if}}</h1>
+<h1>{{{operator}}}{{#if documentation}} <a id='documentation-button' class='documentation-button'>?</a>{{/if}}</h1>
 {{/if}}
 {{#if name}}
 <div class='node-item'><b>name</b><br><pre>{{{name}}}</pre></div>

src/view.js

@@ -389,14 +389,31 @@ function showNode(node) {
         var data = template(node);
         sidebar.open(data, 'Node');
 
-        var documentationButton = document.getElementById('operator-documentation');
+        var documentationButton = document.getElementById('documentation-button');
         if (documentationButton) {
             documentationButton.addEventListener('click', () => { 
-                var documentation = node.documentation;
-                if (documentation) {
-                    sidebar.open(documentation, 'Documentation');
+                showDocumentation(node);
+            });
+        }
+    }
+}
+
+function showDocumentation(node) {
+    var documentation = node.documentation;
+    if (documentation) {
+        sidebar.open(documentation, 'Documentation');
+
+        var documentationElement = document.getElementById('documentation');
+        if (documentationElement) {
+            documentationElement.addEventListener('click', (e) => {
+                if (e.target && e.target.href) {
+                    var link = e.target.href;
+                    if (link.startsWith('http://') || link.startsWith('https://')) {
+                        hostService.openURL(link);
+                        e.preventDefault();
+                    }
                 }
-            });    
+            });
         }
     }
 }