From 47b387921a4f0eabd74327bebcf138c7b95155cd Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 11 Feb 2026 20:55:46 +0100 Subject: [PATCH] Add code editor setting dropdowns (#36534) Adds three ` + {{svg "octicon-info"}} {{else}} {{$v}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 008376ce16..8a5ed4a39c 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -18,19 +18,22 @@ {{if not .NotEditableReason}}
-
- {{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}} - {{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}} - {{if not .IsNewFile}} - {{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}} - {{end}} +
+
+ {{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}} + {{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}} + {{if not .IsNewFile}} + {{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}} + {{end}} +
+ {{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
+ data-previewable-extensions="{{StringUtils.Join $.CodeEditorConfig.PreviewableExtensions ","}}" + data-line-wrap-extensions="{{StringUtils.Join $.CodeEditorConfig.LineWrapExtensions ","}}">{{.FileContent}}
diff --git a/templates/repo/editor/options.tmpl b/templates/repo/editor/options.tmpl new file mode 100644 index 0000000000..04cbd44cd6 --- /dev/null +++ b/templates/repo/editor/options.tmpl @@ -0,0 +1,30 @@ +{{$indentStyle := $.CodeEditorConfig.IndentStyle}} +{{$indentSize := or $.CodeEditorConfig.IndentSize 4}} +{{$lineWrapOn := $.CodeEditorConfig.LineWrapOn}} +
+
+ +
+
+ +
+
+ +
+
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index 9b82bb855f..a70464dacb 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -20,15 +20,20 @@
-
- {{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}} +
+
+
+ {{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}} +
+ {{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}} +
-
- -
+
+
+ +
+
{{template "repo/editor/commit_form" .}} diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl index 40f2907cf3..97bd5ebf4d 100644 --- a/templates/repo/settings/githook_edit.tmpl +++ b/templates/repo/settings/githook_edit.tmpl @@ -1,11 +1,14 @@ {{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit githook")}}
-

- {{ctx.Locale.Tr "repo.settings.githooks"}} -

-
-

{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}

-
+ +

+ {{ctx.Locale.Tr "repo.settings.githooks"}} +
+ {{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}} +
+

+
+

{{ctx.Locale.Tr "repo.settings.githook_edit_desc"}}

{{with .Hook}}
@@ -20,7 +23,7 @@
{{end}} - -
+
+
{{template "repo/settings/layout_footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index c0caee5191..cdd1e28d4f 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -18,6 +18,7 @@ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); --octicon-chevron-right: url('data:image/svg+xml;utf8,'); + --select-arrows: url('data:image/svg+xml;utf8,'); /* other variables */ --border-radius: 4px; --border-radius-medium: 6px; @@ -309,6 +310,34 @@ a.label, text-decoration-line: none !important; } +.native-select { + position: relative; +} + +.native-select > select { + appearance: none; /* hide default triangle */ + padding: 6px 26px 6px 10px; + border-radius: var(--border-radius); +} + +/* ::before and ::after pseudo elements don't work on select elements, + so we need to put it on the parent wrapper element. */ +.native-select::after { + position: absolute; + pointer-events: none; /* make the click event can pass through the svg to the select element */ + top: 50%; + transform: translateY(-50%); + right: 5px; + content: ""; + width: 16px; + height: 16px; + mask-size: cover; + -webkit-mask-size: cover; + mask-image: var(--select-arrows); + -webkit-mask-image: var(--select-arrows); + background: currentcolor; +} + .ui.search > .results { background: var(--color-body); border-color: var(--color-secondary); @@ -416,7 +445,9 @@ a.label, .ui.selection.dropdown .menu > .item { border-color: var(--color-secondary); } - +.ui.selection.dropdown .menu .item:first-of-type { + border-radius: 0; +} .ui.selection.visible.dropdown > .text:not(.default) { color: var(--color-text); } diff --git a/web_src/css/modules/form.css b/web_src/css/modules/form.css index 09d247cf17..56d4f9ba61 100644 --- a/web_src/css/modules/form.css +++ b/web_src/css/modules/form.css @@ -142,14 +142,6 @@ textarea:focus, margin-top: 0.7em; } -.ui.form select { - display: block; - height: auto; - width: 100%; - border-radius: 0.28571429rem; - padding: 0.62em 1em; -} - .ui.form .field > .selection.dropdown { min-width: 14em; /* matches the default min width */ width: 100%; diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js index f40d77df13..47d815490d 100644 --- a/web_src/fomantic/build/components/dropdown.js +++ b/web_src/fomantic/build/components/dropdown.js @@ -407,6 +407,9 @@ $.fn.dropdown = function(parameters) { .html( templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className) ) .insertBefore($input) ; + + $module.attr('data-tooltip-content', $input.attr('data-tooltip-content') ?? null); // GITEA-PATCH: convert "select" to "dropdown" with attrs + if($input.hasClass(className.multiple) && $input.prop('multiple') === false) { module.error(error.missingMultiple); $input.prop('multiple', true); diff --git a/web_src/js/features/codeeditor.ts b/web_src/js/features/codeeditor.ts index e47a678bda..94c7e18234 100644 --- a/web_src/js/features/codeeditor.ts +++ b/web_src/js/features/codeeditor.ts @@ -10,15 +10,11 @@ type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions; type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions; type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions; -type EditorConfig = { +type CodeEditorConfig = { indent_style?: 'tab' | 'space', - indent_size?: string | number, // backend emits this as string + indent_size?: number, tab_width?: string | number, // backend emits this as string - end_of_line?: 'lf' | 'cr' | 'crlf', - charset?: 'latin1' | 'utf-8' | 'utf-8-bom' | 'utf-16be' | 'utf-16le', trim_trailing_whitespace?: boolean, - insert_final_newline?: boolean, - root?: boolean, }; const languagesByFilename: Record = {}; @@ -38,14 +34,15 @@ const baseOptions: MonacoOpts = { scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6, alwaysConsumeMouseWheel: false}, scrollBeyondLastLine: false, automaticLayout: true, + indentSize: 'tabSize', wrappingIndent: 'none', wordWrapBreakAfterCharacters: '', wordWrapBreakBeforeCharacters: '', matchBrackets: 'never', }; -function getEditorconfig(input: HTMLInputElement): EditorConfig | null { - const json = input.getAttribute('data-editorconfig'); +function getCodeEditorConfig(input: HTMLInputElement): CodeEditorConfig | null { + const json = input.getAttribute('data-code-editor-config'); if (!json) return null; try { return JSON.parse(json); @@ -152,6 +149,7 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri const editor = monaco.editor.create(container, { model, theme: 'gitea', + ...baseOptions, ...other, }); @@ -167,6 +165,22 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure }); + const elEditorOptions = textarea.closest('form')?.querySelector('.code-editor-options'); + if (elEditorOptions) { + elEditorOptions.querySelector('.js-indent-style-select')!.addEventListener('change', (e) => { + const insertSpaces = (e.target as HTMLSelectElement).value === 'space'; + editor.updateOptions({insertSpaces, useTabStops: !insertSpaces}); + }); + elEditorOptions.querySelector('.js-indent-size-select')!.addEventListener('change', (e) => { + const tabSize = Number((e.target as HTMLSelectElement).value); + editor.updateOptions({tabSize}); + }); + elEditorOptions.querySelector('.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'); @@ -203,14 +217,13 @@ export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameIn const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(',')); const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(','); const isPreviewable = previewableExts.has(extname(filename)); - const editorConfig = getEditorconfig(filenameInput); + const editorConfig = getCodeEditorConfig(filenameInput); togglePreviewDisplay(isPreviewable); const {monaco, editor} = await createMonaco(textarea, filename, { - ...baseOptions, ...getFileBasedOptions(filenameInput.value, lineWrapExts), - ...getEditorConfigOptions(editorConfig), + ...getMonacoOptsByCodeEditorConfig(editorConfig), }); filenameInput.addEventListener('input', onInputDebounce(() => { @@ -223,20 +236,15 @@ export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameIn return editor; } -function getEditorConfigOptions(ec: EditorConfig | null): MonacoOpts { +function getMonacoOptsByCodeEditorConfig(ec: CodeEditorConfig | null): MonacoOpts { if (!ec || !isObject(ec)) return {}; const opts: MonacoOpts = {}; - opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec); + opts.detectIndentation = !ec.indent_style || !ec.indent_size; - 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); - } - if ('max_line_length' in ec) { - opts.rulers = [Number(ec.max_line_length)]; + // with indentSize='tabSize', this also controls the `indentSize` option + if (!opts.detectIndentation) { + opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size) || 4; } opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;