[GinR] Json editor for json file viewing

pkg/markup/markup.go

@@ -28,6 +28,11 @@ func IsIPythonNotebook(name string) bool {
 	return strings.HasSuffix(name, ".ipynb")
 }
 
+// Is JSON return whethe a filename looks liek it could be  ajson file
+func IsJSON(name string) bool {
+	return strings.HasSuffix(name, ".json")
+}
+
 const (
 	ISSUE_NAME_STYLE_NUMERIC      = "numeric"
 	ISSUE_NAME_STYLE_ALPHANUMERIC = "alphanumeric"
@@ -318,6 +323,7 @@ const (
 	MARKDOWN         Type = "markdown"
 	ORG_MODE         Type = "orgmode"
 	IPYTHON_NOTEBOOK Type = "ipynb"
+	JSON             Type = "json"
 )
 
 // Detect returns best guess of a markup type based on file name.
@@ -329,6 +335,8 @@ func Detect(filename string) Type {
 		return ORG_MODE
 	case IsIPythonNotebook(filename):
 		return IPYTHON_NOTEBOOK
+	case IsJSON(filename):
+		return JSON
 	default:
 		return UNRECOGNIZED
 	}

routes/repo/view.go

@@ -276,6 +276,9 @@ func renderFile(c *context.Context, entry *git.TreeEntry, treeLink, rawLink stri
 			c.Data["FileContent"] = string(markup.OrgMode(buf, path.Dir(treeLink), c.Repo.Repository.ComposeMetas()))
 		case markup.IPYTHON_NOTEBOOK:
 			c.Data["IsIPythonNotebook"] = true
+		case markup.JSON:
+			c.Data["IsJSON"] = true
+			c.Data["FileContent"] = string(buf)
 		case markup.UNRECOGNIZED:
 			if tool.IsOdmlFile(buf) {
 				c.Data["IsOdML"] = true

templates/base/head.tmpl

@@ -66,6 +66,11 @@
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
 		{{end}}
 
+		{{if .IsJSON}}
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.11.0/jsoneditor.min.js"></script>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.11.0/jsoneditor.min.css"/>
+		{{end}}
+
 		{{if .RequireSimpleMDE}}
 		<link rel="stylesheet" href="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.css">
 		<script src="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.js"></script>

templates/repo/view_file.tmpl

@@ -35,8 +35,8 @@
 			</div>
 		{{end}}
 	</h4>
-	<div class="ui unstackable attached table segment">
-		<div id="{{if .IsIPythonNotebook}}ipython-notebook{{end}}" class="file-view {{if .IsMarkdown}}markdown{{else if .IsIPythonNotebook}}ipython-notebook{{else if .ReadmeInList}}plain-text{{else if and .IsTextFile}}code-view{{end}} has-emoji">
+	<div class="{{if .IsJSON}}{{else}}ui attached table segment{{end}}">
+		<div id="{{if not .IsJSON}}{{if .IsIPythonNotebook}}ipython-notebook{{end}}" class="file-view {{if .IsMarkdown}}markdown{{else if .IsIPythonNotebook}}ipython-notebook{{else if .IsIPythonNotebook}}ipython-notebook{{else if .ReadmeInList}}plain-text{{else if and .IsTextFile}}code-view{{end}} has-emoji{{end}}">
 			{{if .IsMarkdown}}
 				{{if .FileContent}}{{.FileContent | Str2html}}{{end}}
 			{{else if .IsOdML}}
@@ -65,6 +65,22 @@
 				});
 				});
 			</script>
+
+			{{else if .IsJSON}}
+			<div id="jsoneditor"></div>
+			<script>
+				// create the editor
+				var container = document.getElementById("jsoneditor");
+				var options = {mode:"view"};
+				var editor = new JSONEditor(container, options);
+
+				// set json
+				var json = {{.FileContent| Str2JS}}
+				editor.set(json);
+
+				// get json
+				var json = editor.get();
+			</script>
 			{{else if .IsIPythonNotebook}}
 				<script>
 					var rendered = null;