Add code editor setting dropdowns

modules/templates/helper.go

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

options/locale/locale_en-US.json

@@ -148,6 +148,13 @@
   "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…",
   "search.type_tooltip": "Search type",
   "search.fuzzy": "Fuzzy",

routers/web/repo/editor.go

@@ -78,8 +78,8 @@ 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["PreviewableExtensions"] = markup.PreviewableExtensions()
+	ctx.Data["LineWrapExtensions"] = setting.Repository.Editor.LineWrapExtensions
 	ctx.Data["IsEditingFileOnly"] = ctx.FormString("return_uri") != ""
 	ctx.Data["ReturnURI"] = ctx.FormString("return_uri")
 
@@ -321,7 +321,18 @@ func EditFile(ctx *context.Context) {
 		}
 	}
 
-	ctx.Data["EditorconfigJson"] = getContextRepoEditorConfig(ctx, ctx.Repo.TreePath)
+	ecJSON, ecDef := getContextRepoEditorConfig(ctx, ctx.Repo.TreePath)
+	ctx.Data["EditorconfigJson"] = ecJSON
+	ctx.Data["EditorconfigIndentStyle"] = "space"
+	ctx.Data["EditorconfigIndentSize"] = "4"
+	if ecDef != nil {
+		if ecDef.IndentStyle != "" {
+			ctx.Data["EditorconfigIndentStyle"] = ecDef.IndentStyle
+		}
+		if ecDef.IndentSize != "" && ecDef.IndentSize != "tab" {
+			ctx.Data["EditorconfigIndentSize"] = ecDef.IndentSize
+		}
+	}
 	ctx.HTML(http.StatusOK, tplEditFile)
 }
 

routers/web/repo/editor_util.go

@@ -18,6 +18,8 @@ import (
 	"code.gitea.io/gitea/modules/log"
 	repo_module "code.gitea.io/gitea/modules/repository"
 	context_service "code.gitea.io/gitea/services/context"
+
+	"github.com/editorconfig/editorconfig-core-go/v2"
 )
 
 // getUniquePatchBranchName Gets a unique branch name for a new patch branch
@@ -62,17 +64,17 @@ 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 {
+// getContextRepoEditorConfig returns the editorconfig JSON string and definition for given treePath
+func getContextRepoEditorConfig(ctx *context_service.Context, treePath string) (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 string(jsonStr), def
 		}
 	}
-	return "null"
+	return "null", nil
 }
 
 // getParentTreeFields returns list of parent tree names and corresponding tree paths based on given treePath.

templates/repo/editor/edit.tmpl

@@ -18,19 +18,22 @@
 					{{if not .NotEditableReason}}
 						<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>
+									{{template "repo/editor/options" .}}
 								</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 tw-px-4 tw-py-3" data-tab="preview">

templates/repo/editor/options.tmpl

@@ -0,0 +1,25 @@
+{{$indentStyle := (or .EditorconfigIndentStyle "space")}}
+{{$indentSize := (or .EditorconfigIndentSize "4")}}
+{{$treePath := (or .TreePath "")}}
+<div class="editor-options tw-flex tw-gap-2">
+	<select class="js-indent-style-select tw-w-auto">
+		<optgroup label="{{ctx.Locale.Tr "text_indent_style"}}">
+			<option{{if eq $indentStyle "space"}} selected{{end}} value="space">{{ctx.Locale.Tr "characters_spaces"}}</option>
+			<option{{if eq $indentStyle "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 $indentSize "2"}} selected{{end}} value="2">2</option>
+			<option{{if eq $indentSize "4"}} selected{{end}} value="4">4</option>
+			<option{{if eq $indentSize "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>
+</div>

templates/repo/editor/patch.tmpl

@@ -20,15 +20,22 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="ui compact small menu small-menu-items repo-editor-menu">
-					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
+				<div class="ui top attached header">
+					<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" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
+						</div>
+						{{template "repo/editor/options" .}}
+					</div>
 				</div>
-				<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}}">
+				<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}}-patch"
+							data-context="{{.RepoLink}}"
+							data-line-wrap-extensions="{{StringUtils.Join .LineWrapExtensions ","}}">
 {{.FileContent}}</textarea>
-					<div class="editor-loading is-loading"></div>
+						<div class="editor-loading is-loading"></div>
+					</div>
 				</div>
 			</div>
 			{{template "repo/editor/commit_form" .}}

templates/repo/settings/githook_edit.tmpl

@@ -1,11 +1,12 @@
 {{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit githook")}}
 	<div class="repo-setting-content">
-		<h4 class="ui top attached header">
-			{{ctx.Locale.Tr "repo.settings.githooks"}}
-		</h4>
-		<div class="ui attached segment">
-			<p>{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}</p>
-			<form class="ui form" action="{{.Link}}" method="post">
+		<form class="ui form" action="{{.Link}}" method="post">
+			<h4 class="ui top attached header tw-flex tw-justify-between tw-items-center">
+				{{ctx.Locale.Tr "repo.settings.githooks"}}
+				{{template "repo/editor/options" .}}
+			</h4>
+			<div class="ui attached segment">
+				<p>{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}</p>
 				{{with .Hook}}
 					<div class="inline field">
 						<label>{{ctx.Locale.Tr "repo.settings.githook_name"}}</label>
@@ -20,7 +21,7 @@
 						<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.update_githook"}}</button>
 					</div>
 				{{end}}
-			</form>
-		</div>
+			</div>
+		</form>
 	</div>
 {{template "repo/settings/layout_footer" .}}

web_src/js/features/codeeditor.ts

@@ -38,6 +38,7 @@ const baseOptions: MonacoOpts = {
   scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6, alwaysConsumeMouseWheel: false},
   scrollBeyondLastLine: false,
   automaticLayout: true,
+  indentSize: 'tabSize',
   wrappingIndent: 'none',
   wordWrapBreakAfterCharacters: '',
   wordWrapBreakBeforeCharacters: '',
@@ -152,6 +153,7 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
   const editor = monaco.editor.create(container, {
     model,
     theme: 'gitea',
+    ...baseOptions,
     ...other,
   });
 
@@ -167,6 +169,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');
@@ -208,7 +224,6 @@ export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameIn
   togglePreviewDisplay(isPreviewable);
 
   const {monaco, editor} = await createMonaco(textarea, filename, {
-    ...baseOptions,
     ...getFileBasedOptions(filenameInput.value, lineWrapExts),
     ...getEditorConfigOptions(editorConfig),
   });
@@ -229,12 +244,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.tab_width) || Number(ec.indent_size) || 4;
+
   if ('max_line_length' in ec) {
     opts.rulers = [Number(ec.max_line_length)];
   }