feat(open_link): add open link on a tags

darkcl · darkcl · commit 6b5fd15da51d · 2019-07-28T20:50:24.000+08:00
diff --git a/helpers/browser.go b/helpers/browser.go
@@ -0,0 +1,27 @@
+package helpers
+
+import (
+	"fmt"
+	"log"
+	"os/exec"
+	"runtime"
+)
+
+// OpenBrowser - Open URL in Browser
+func OpenBrowser(url string) {
+	var err error
+
+	switch runtime.GOOS {
+	case "linux":
+		err = exec.Command("xdg-open", url).Start()
+	case "windows":
+		err = exec.Command("rundll32", "url.dll,FileProtocolHandler", url).Start()
+	case "darwin":
+		err = exec.Command("open", url).Start()
+	default:
+		err = fmt.Errorf("unsupported platform")
+	}
+	if err != nil {
+		log.Fatal(err)
+	}
+}
diff --git a/main.go b/main.go
@@ -9,14 +9,19 @@ import (
 	"strings"
 
 	"github.com/darkcl/Notorious/models"
+	"github.com/darkcl/Notorious/helpers"
 	"github.com/leaanthony/mewn"
 	webview "github.com/zserge/webview"
 )
 
 func handleRPC(w webview.WebView, data string) {
 	switch {
 	case strings.HasPrefix(data, "editor.onChange: "):
-		fmt.Printf("Recieved Editor changes:\n%s\n", strings.TrimPrefix(data, "editor.onChange: "))
+		fmt.Printf("editor.onChange:\n%s\n", strings.TrimPrefix(data, "editor.onChange: "))
+	case strings.HasPrefix(data, "openlink: "):
+		url := strings.TrimPrefix(data, "openlink: ")
+		fmt.Printf("openlink:\n%s\n", url)
+		helpers.OpenBrowser(url)
 	default:
 		panic("Not Implemented")
 	}
diff --git a/ui/package.json b/ui/package.json
@@ -28,6 +28,7 @@
     "react-dom": "^16.8.6",
     "react-markdown": "^4.1.0",
     "react-split-pane": "^0.1.87",
+    "react-syntax-highlighter": "^11.0.2",
     "showdown": "^1.9.0",
     "styled-components": "^4.3.2"
   }
diff --git a/ui/src/components/App.tsx b/ui/src/components/App.tsx
@@ -1,18 +1,19 @@
 import * as React from "react";
 import SplitPane from "react-split-pane";
-import * as ReactMarkdown from "react-markdown";
+import * as ReactMarkdown from "react-markdown/with-html";
 
 import "../style/App.css";
 import { IAppState } from "../interface/IAppState";
 
 import { Editor } from "./Editor";
+import { CodeBlock } from "./CodeBlock";
 
 class App extends React.Component<{}, IAppState> {
   constructor(props) {
     super(props);
 
     this.state = {
-      markdownSrc: "# Hello World"
+      markdownSrc: "# Hello World\n\n[google](http://google.com)"
     };
 
     this.onMarkdownChange = this.onMarkdownChange.bind(this);
@@ -35,7 +36,11 @@ class App extends React.Component<{}, IAppState> {
           />
         </div>
         <div className="view-pane">
-          <ReactMarkdown className="result" source={this.state.markdownSrc} />
+          <ReactMarkdown
+            className="result"
+            source={this.state.markdownSrc}
+            renderers={{ code: CodeBlock }}
+          />
         </div>
       </SplitPane>
     );
diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { solarizedlight } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface ICodeBlock {
+  value;
+  language;
+}
+
+export class CodeBlock extends React.Component<ICodeBlock, {}> {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { language, value } = this.props;
+    return (
+      <SyntaxHighlighter language={language} style={solarizedlight}>
+        {value}
+      </SyntaxHighlighter>
+    );
+  }
+}
diff --git a/ui/src/index.html b/ui/src/index.html
@@ -1,14 +1,12 @@
-<!DOCTYPE html> 
-<html lang="en"> 
-  <head> 
-    <meta charset="UTF-8"> 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
-    <title>TypeScript + React</title> 
-  </head> 
-  <body> 
-    <div id="root"> 
-
-    </div>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>TypeScript + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
   </body>
-</html>
+</html>
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -5,12 +5,20 @@ import "./style/index.css";
 
 import App from "./components/App";
 
-// declare var counter;
+declare var external;
 declare var folder;
 
 const render = () => ReactDOM.render(<App />, document.getElementById("root"));
 
 // counter.render = render;
 folder.render = render;
 
+window.onclick = function(e) {
+  const elem = e.target as Element;
+  if (elem.localName === "a") {
+    e.preventDefault();
+    external.invoke("openlink: " + elem.getAttribute("href"));
+  }
+};
+
 render();
diff --git a/ui/yarn.lock b/ui/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@`
`28`	`28`	`"react-dom": "^16.8.6",`
`29`	`29`	`"react-markdown": "^4.1.0",`
`30`	`30`	`"react-split-pane": "^0.1.87",`
	`31`	`+ "react-syntax-highlighter": "^11.0.2",`
`31`	`32`	`"showdown": "^1.9.0",`
`32`	`33`	`"styled-components": "^4.3.2"`
`33`	`34`	`}`