Add code editor setting dropdowns (#36534)

Adds three `<select>` controls on top right for indent style, indent
size, and line wrap to the code editor (`_edit`), diff patch editor
(`_diffpatch`) and git hook editor (`/settings/hooks/git/pre-receive`).

The git hooks editor is restyled to wrap the content in a box. Also
included is a bugfix for the git hooks editor where monaco was not
initialized correctly.

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

routers/web/repo/editor.go

@@ -18,7 +18,6 @@ import (
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/httplib"
 	"code.gitea.io/gitea/modules/log"
-	"code.gitea.io/gitea/modules/markup"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/templates"
 	"code.gitea.io/gitea/modules/util"
@@ -78,8 +77,6 @@ func prepareEditorPageFormOptions(ctx *context.Context, editorAction string) *co
 	ctx.Data["CommitFormOptions"] = commitFormOptions
 
 	// for online editor
-	ctx.Data["PreviewableExtensions"] = strings.Join(markup.PreviewableExtensions(), ",")
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
 	ctx.Data["IsEditingFileOnly"] = ctx.FormString("return_uri") != ""
 	ctx.Data["ReturnURI"] = ctx.FormString("return_uri")
 
@@ -321,7 +318,7 @@ func EditFile(ctx *context.Context) {
 		}
 	}
 
-	ctx.Data["EditorconfigJson"] = getContextRepoEditorConfig(ctx, ctx.Repo.TreePath)
+	ctx.Data["CodeEditorConfig"] = getCodeEditorConfig(ctx, ctx.Repo.TreePath)
 	ctx.HTML(http.StatusOK, tplEditFile)
 }
 

routers/web/repo/editor_apply_patch.go

@@ -20,6 +20,7 @@ func NewDiffPatch(ctx *context.Context) {
 	}
 
 	ctx.Data["PageIsPatch"] = true
+	ctx.Data["CodeEditorConfig"] = CodeEditorConfig{} // not really editing a file, so no need to fill in the config
 	ctx.HTML(http.StatusOK, tplPatchFile)
 }
 

routers/web/repo/editor_util.go

@@ -7,6 +7,7 @@ import (
 	"context"
 	"fmt"
 	"path"
+	"strconv"
 	"strings"
 
 	git_model "code.gitea.io/gitea/models/git"
@@ -14,9 +15,11 @@ import (
 	user_model "code.gitea.io/gitea/models/user"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/gitrepo"
-	"code.gitea.io/gitea/modules/json"
 	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/markup"
 	repo_module "code.gitea.io/gitea/modules/repository"
+	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/util"
 	context_service "code.gitea.io/gitea/services/context"
 )
 
@@ -62,17 +65,33 @@ func getClosestParentWithFiles(gitRepo *git.Repository, branchName, originTreePa
 	return f(originTreePath, commit)
 }
 
-// getContextRepoEditorConfig returns the editorconfig JSON string for given treePath or "null"
-func getContextRepoEditorConfig(ctx *context_service.Context, treePath string) string {
+// CodeEditorConfig is also used by frontend, defined in "codeeditor.ts"
+type CodeEditorConfig struct {
+	PreviewableExtensions []string `json:"previewable_extensions"`
+	LineWrapExtensions    []string `json:"line_wrap_extensions"`
+	LineWrapOn            bool     `json:"line_wrap_on"`
+
+	IndentStyle            string `json:"indent_style"`
+	IndentSize             int    `json:"indent_size"`
+	TabWidth               int    `json:"tab_width"`
+	TrimTrailingWhitespace *bool  `json:"trim_trailing_whitespace,omitempty"`
+}
+
+func getCodeEditorConfig(ctx *context_service.Context, treePath string) (ret CodeEditorConfig) {
+	ret.PreviewableExtensions = markup.PreviewableExtensions()
+	ret.LineWrapExtensions = setting.Repository.Editor.LineWrapExtensions
+	ret.LineWrapOn = util.SliceContainsString(ret.LineWrapExtensions, path.Ext(treePath), true)
 	ec, _, err := ctx.Repo.GetEditorconfig()
 	if err == nil {
 		def, err := ec.GetDefinitionForFilename(treePath)
 		if err == nil {
-			jsonStr, _ := json.Marshal(def)
-			return string(jsonStr)
+			ret.IndentStyle = def.IndentStyle
+			ret.IndentSize, _ = strconv.Atoi(def.IndentSize)
+			ret.TabWidth = def.TabWidth
+			ret.TrimTrailingWhitespace = def.TrimTrailingWhitespace
 		}
 	}
-	return "null"
+	return ret
 }
 
 // getParentTreeFields returns list of parent tree names and corresponding tree paths based on given treePath.

routers/web/repo/setting/git_hooks.go

@@ -7,6 +7,7 @@ import (
 	"net/http"
 
 	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/routers/web/repo"
 	"code.gitea.io/gitea/services/context"
 )
 
@@ -41,6 +42,7 @@ func GitHooksEdit(ctx *context.Context) {
 		return
 	}
 	ctx.Data["Hook"] = hook
+	ctx.Data["CodeEditorConfig"] = repo.CodeEditorConfig{} // not really editing a repo file, so no editor config
 	ctx.HTML(http.StatusOK, tplGithookEdit)
 }