Add settings UI to code editor

modules/templates/helper.go

@@ -9,6 +9,7 @@ import (
 	"html"
 	"html/template"
 	"net/url"
+	"path"
 	"strings"
 	"time"
 
@@ -49,6 +50,7 @@ func NewFuncMap() template.FuncMap {
 
 		"PathEscape":         url.PathEscape,
 		"PathEscapeSegments": util.PathEscapeSegments,
+		"PathExt":            path.Ext,
 
 		// utils
 		"StringUtils": NewStringUtils,

options/locale/locale_en-US.ini

@@ -163,6 +163,14 @@ filter.private = Private
 no_results_found = No results found.
 internal_error_skipped = Internal error occurred but is skipped: %s
 
+characters_spaces = Spaces
+characters_tabs = Tabs
+text_indent_style = Indent style
+text_indent_size = Indent size
+text_line_wrap = Wrap
+text_line_nowrap = No wrap
+text_line_wrap_mode = Line wrap mode
+
 [search]
 search = Search...
 type_tooltip = Search type

routers/web/repo/cherry_pick.go

@@ -56,7 +56,7 @@ func CherryPick(ctx *context.Context) {
 	}
 	ctx.Data["new_branch_name"] = GetUniquePatchBranchName(ctx)
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.RefTypeNameSubURL()
 
 	ctx.HTML(200, tplCherryPick)
@@ -84,7 +84,7 @@ func CherryPickPost(ctx *context.Context) {
 	ctx.Data["commit_choice"] = form.CommitChoice
 	ctx.Data["new_branch_name"] = form.NewBranchName
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.RefTypeNameSubURL()
 
 	if ctx.HasError() {

routers/web/repo/editor.go

@@ -28,6 +28,8 @@ import (
 	"code.gitea.io/gitea/services/context/upload"
 	"code.gitea.io/gitea/services/forms"
 	files_service "code.gitea.io/gitea/services/repository/files"
+
+	"github.com/editorconfig/editorconfig-core-go/v2"
 )
 
 const (
@@ -190,9 +192,14 @@ func editFile(ctx *context.Context, isNewFile bool) {
 	}
 	ctx.Data["new_branch_name"] = GetUniquePatchBranchName(ctx)
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["PreviewableExtensions"] = strings.Join(markup.PreviewableExtensions(), ",")
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
-	ctx.Data["EditorconfigJson"] = GetEditorConfig(ctx, treePath)
+	ctx.Data["PreviewableExtensions"] = markup.PreviewableExtensions()
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
+
+	ecDef := GetEditorConfig(ctx, treePath)
+	ecBytes, _ := json.Marshal(ecDef)
+	ctx.Data["EditorconfigJson"] = string(ecBytes)
+	ctx.Data["EditorconfigIndentStyle"] = ecDef.IndentStyle
+	ctx.Data["EditorconfigIndentSize"] = ecDef.IndentSize
 
 	ctx.Data["IsEditingFileOnly"] = ctx.FormString("return_uri") != ""
 	ctx.Data["ReturnURI"] = ctx.FormString("return_uri")
@@ -201,16 +208,16 @@ func editFile(ctx *context.Context, isNewFile bool) {
 }
 
 // GetEditorConfig returns a editorconfig JSON string for given treePath or "null"
-func GetEditorConfig(ctx *context.Context, treePath string) string {
+func GetEditorConfig(ctx *context.Context, treePath string) *editorconfig.Definition {
 	ec, _, err := ctx.Repo.GetEditorconfig()
 	if err == nil {
 		def, err := ec.GetDefinitionForFilename(treePath)
 		if err == nil {
-			jsonStr, _ := json.Marshal(def)
-			return string(jsonStr)
+			return def
 		}
+		return nil
 	}
-	return "null"
+	return nil
 }
 
 // EditFile render edit file page
@@ -244,8 +251,8 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
 	ctx.Data["commit_choice"] = form.CommitChoice
 	ctx.Data["new_branch_name"] = form.NewBranchName
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["PreviewableExtensions"] = strings.Join(markup.PreviewableExtensions(), ",")
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["PreviewableExtensions"] = markup.PreviewableExtensions()
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 	ctx.Data["EditorconfigJson"] = GetEditorConfig(ctx, form.TreePath)
 
 	if ctx.HasError() {

routers/web/repo/patch.go

@@ -36,7 +36,7 @@ func NewDiffPatch(ctx *context.Context) {
 	}
 	ctx.Data["new_branch_name"] = GetUniquePatchBranchName(ctx)
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 	ctx.Data["BranchLink"] = ctx.Repo.RepoLink + "/src/" + ctx.Repo.RefTypeNameSubURL()
 
 	ctx.HTML(200, tplPatchFile)
@@ -59,7 +59,7 @@ func NewDiffPatchPost(ctx *context.Context) {
 	ctx.Data["commit_choice"] = form.CommitChoice
 	ctx.Data["new_branch_name"] = form.NewBranchName
 	ctx.Data["last_commit"] = ctx.Repo.CommitID
-	ctx.Data["LineWrapExtensions"] = strings.Join(setting.Repository.Editor.LineWrapExtensions, ",")
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 
 	if ctx.HasError() {
 		ctx.HTML(200, tplPatchFile)

templates/repo/editor/edit.tmpl

@@ -30,19 +30,24 @@
 			</div>
 			<div class="field">
 				<div class="ui top attached header">
-					<div class="ui compact small menu small-menu-items repo-editor-menu">
-						<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-						<a class="item" data-tab="preview" data-preview-url="{{.Repository.Link}}/markup" data-preview-context-ref="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
-						{{if not .IsNewFile}}
-						<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
-						{{end}}
+					<div class="tw-w-100 tw-flex tw-justify-between tw-flex-col md:tw-flex-row tw-gap-2 tw-items-stretch">
+						<div class="ui compact small menu small-menu-items repo-editor-menu tw-self-start">
+							<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
+							<a class="item" data-tab="preview" data-preview-url="{{.Repository.Link}}/markup" data-preview-context-ref="{{.RepoLink}}/src/{{.RefTypeNameSubURL}}">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+							{{if not .IsNewFile}}
+							<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
+							{{end}}
+						</div>
+						<div class="tw-flex tw-gap-3">
+							{{template "repo/editor/options" .}}
+						</div>
 					</div>
 				</div>
 				<div class="ui bottom attached segment tw-p-0">
 					<div class="ui active tab tw-rounded-b" data-tab="write">
 						<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
-							data-previewable-extensions="{{.PreviewableExtensions}}"
-							data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
+							data-previewable-extensions="{{StringUtils.Join .PreviewableExtensions ","}}"
+							data-line-wrap-extensions="{{StringUtils.Join .LineWrapExtensions ","}}">{{.FileContent}}</textarea>
 						<div class="editor-loading is-loading"></div>
 					</div>
 					<div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">

templates/repo/editor/options.tmpl

@@ -0,0 +1,20 @@
+<select class="js-indent-style-select tw-w-auto">
+	<optgroup label="{{ctx.Locale.Tr "text_indent_style"}}">
+		<option{{if eq .EditorconfigIndentStyle "space"}} selected{{end}} value="space">{{ctx.Locale.Tr "characters_spaces"}}</option>
+		<option{{if eq .EditorconfigIndentStyle "tab"}} selected{{end}} value="tab">{{ctx.Locale.Tr "characters_tabs"}}</option>
+	</optgroup>
+</select>
+<select class="js-indent-size-select tw-w-auto">
+	<optgroup label="{{ctx.Locale.Tr "text_indent_size"}}">
+		<option{{if eq .EditorconfigIndentSize "2"}} selected{{end}} value="2">2</option>
+		<option{{if eq .EditorconfigIndentSize "4"}} selected{{end}} value="4">4</option>
+		<option{{if eq .EditorconfigIndentSize "8"}} selected{{end}} value="8">8</option>
+	</optgroup>
+</select>
+{{$mode := (Iif (SliceUtils.Contains .LineWrapExtensions (PathExt .TreePath)) "on" "off")}}
+<select class="js-line-wrap-select tw-w-auto">
+	<optgroup label="{{ctx.Locale.Tr "text_line_wrap_mode"}}">
+		<option{{if eq $mode "on"}} selected{{end}} value="on">{{ctx.Locale.Tr "text_line_wrap"}}</option>
+		<option{{if eq $mode "off"}} selected{{end}} value="off">{{ctx.Locale.Tr "text_line_nowrap"}}</option>
+	</optgroup>
+</select>

templates/repo/editor/patch.tmpl

@@ -28,7 +28,7 @@
 				<div class="ui active tab segment tw-rounded tw-p-0" data-tab="write">
 					<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
 						data-context="{{.RepoLink}}"
-						data-line-wrap-extensions="{{.LineWrapExtensions}}">
+						data-line-wrap-extensions="{{StringUtils.Join .LineWrapExtensions ","}}">
 {{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
 				</div>

web_src/js/features/codeeditor.ts

@@ -38,6 +38,7 @@ const baseOptions: MonacoOpts = {
   scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
   scrollBeyondLastLine: false,
   automaticLayout: true,
+  indentSize: 'tabSize',
 };
 
 function getEditorconfig(input: HTMLInputElement): EditorConfig | null {
@@ -163,6 +164,20 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
     textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
   });
 
+  const form = textarea.closest('form');
+  form.querySelector<HTMLSelectElement>('.js-indent-style-select').addEventListener('change', (e) => {
+    const insertSpaces = (e.target as HTMLSelectElement).value === 'space';
+    editor.updateOptions({insertSpaces, useTabStops: !insertSpaces});
+  });
+  form.querySelector<HTMLSelectElement>('.js-indent-size-select').addEventListener('change', (e) => {
+    const tabSize = Number((e.target as HTMLSelectElement).value);
+    editor.updateOptions({tabSize});
+  });
+  form.querySelector<HTMLSelectElement>('.js-line-wrap-select').addEventListener('change', (e) => {
+    const wordWrap = (e.target as HTMLSelectElement).value as IEditorOptions['wordWrap'];
+    editor.updateOptions({wordWrap});
+  });
+
   exportEditor(editor);
 
   const loading = document.querySelector('.editor-loading');
@@ -225,12 +240,9 @@ function getEditorConfigOptions(ec: EditorConfig | null): MonacoOpts {
   const opts: MonacoOpts = {};
   opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
 
-  if ('indent_size' in ec) {
-    opts.indentSize = Number(ec.indent_size);
-  }
-  if ('tab_width' in ec) {
-    opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size);
-  }
+  // we use indentSize='tabSize' so these numbers always match
+  opts.tabSize = Number(ec.indent_size) || Number(ec.tab_width) || 4;
+
   if ('max_line_length' in ec) {
     opts.rulers = [Number(ec.max_line_length)];
   }