Add code editor setting dropdowns by silverwind · Pull Request #36534 · go-gitea/gitea

silverwind · 2026-02-04T22:58:17Z

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.

View with: https://github.com/go-gitea/gitea/pull/36534/changes?w=1

Add `<select>` controls for indent style (spaces/tabs), indent size (2/4/8), and line wrap mode to the code editor header. The git hooks editor is restyled to include this new header. Also included it a bugfix for the hooks editor where monaco was not configured correctly before. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR adds UI controls for configuring editor settings (indent style, indent size, and line wrap) to the code editor, git patch editor, and git hooks editor. It also includes a bugfix for the git hooks editor where Monaco was not configured with baseOptions before.

Changes:

Added select controls for indent style, indent size, and line wrap mode to all code editors
Refactored editorconfig data handling to pass slices instead of pre-joined strings to templates
Fixed git hooks editor to properly apply baseOptions
Simplified editorconfig indentation handling by keeping indentSize and tabSize in sync

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
web_src/js/features/codeeditor.ts	Added `indentSize: 'tabSize'` to baseOptions, moved baseOptions application to createMonaco (fixing git hooks), added event listeners for editor settings controls, simplified editorconfig tab size handling
templates/repo/settings/githook_edit.tmpl	Restructured to wrap content in form and include editor options in header
templates/repo/editor/patch.tmpl	Added header structure with editor options controls
templates/repo/editor/options.tmpl	New template containing select controls for indent style, indent size, and line wrap mode
templates/repo/editor/edit.tmpl	Added flex layout to header and included editor options
routers/web/repo/editor_util.go	Modified getContextRepoEditorConfig to return both JSON string and definition object
routers/web/repo/editor.go	Updated to set EditorconfigIndentStyle and EditorconfigIndentSize context data, changed to pass slices instead of joined strings for PreviewableExtensions and LineWrapExtensions
options/locale/locale_en-US.json	Added localization strings for editor settings controls
modules/templates/helper.go	Added PathExt template function

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web_src/js/features/codeeditor.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: silverwind <me@silverwind.io>

routers/web/repo/editor.go

Signed-off-by: silverwind <me@silverwind.io>

routers/web/repo/editor.go

Signed-off-by: silverwind <me@silverwind.io>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lunny · 2026-02-06T08:13:29Z

It seems it used an original menu which has a different style with other menus?

silverwind · 2026-02-06T08:16:27Z

Yes, this is because GitHub also uses bare <select> there. Could be refactored to Fomantic dropdown, but I'm not sure it's really necessary, some users may appreciate similarity.

Convert editor option selects from plain <select> elements to div-based Fomantic UI dropdowns with tooltips showing the option labels previously used as optgroup headers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-10T04:35:43Z

Changed to use fomantic dropdowns:

Hover border issue is a existing bug and will be fixed in Move Fomantic dropdown CSS to custom module #36530.
Checking out border-radius issue on first dropdown item.

Selection dropdown menus connect flush to the dropdown box, so the first item should not have rounded top corners. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Prevent font-weight and font-family from .ui.header parents propagating into the editor option dropdowns. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-10T04:45:06Z

Fixed the border radius issue. There are more issues related to fomantic dropdowns like it resizing on open or the misaligned dropdown right border, but I will defer those to another time to not blow this PR out of scope.

delvh · 2026-02-10T04:54:20Z

Before reviewing, the general idea looks good.
What's the behavior on mobile?
Due to a lack of space I would recommend still merging them into one menu on mobile.

silverwind · 2026-02-10T04:57:05Z

Mobile looks alright-ish:

I think we can reduce the size of these dropdowns a bit to match the "pills" above.

silverwind · 2026-02-10T05:00:47Z

Mobile does not have enough space to fit this into one line. Maybe if the buttons before are reduced to just "Edit" and "Preview", then there might be enough space to fit a single dropdown but it will be hard if not impossible to condense the text enough.

Add small, compact classes and override min-height and padding to bring dropdown height in line with adjacent menu items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-10T05:04:27Z

Adjusted heights:

silverwind · 2026-02-11T17:37:32Z

All issues resolved. @wxiaoguang lgty?

web_src/css/base.css

Signed-off-by: silverwind <me@silverwind.io>

web_src/js/features/codeeditor.ts

Signed-off-by: silverwind <me@silverwind.io>

web_src/css/base.css

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

routers/web/repo/setting/git_hooks.go

routers/web/repo/editor_apply_patch.go

templates/repo/editor/options.tmpl

tailwind.config.ts

web_src/fomantic/build/components/dropdown.js

routers/web/repo/editor.go

web_src/js/features/codeeditor.ts

routers/web/repo/editor_util.go

Avoid overriding Monaco's indentation detection with a fallback tabSize of 4 when EditorConfig doesn't define indent_style/indent_size. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Screen readers could announce these as unnamed comboboxes since optgroup label is not a reliable accessible name. Add localized aria-label attributes to each select element. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-11T19:18:13Z

lgtm

* origin/main: (34 commits) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) Fix mirror sync parser and fix mirror messages (go-gitea#36504) Update JS and PY deps (go-gitea#36576) Add viewer controller for mermaid (zoom, drag) (go-gitea#36557) Misc typescript tweaks (go-gitea#36523) Use full-file highlighting for diff sections (go-gitea#36561) fix(diff): reprocess htmx content after loading more files (go-gitea#36568) [skip ci] Updated translations via Crowdin Add wrap to runner label list (go-gitea#36565) fix: add dnf5 command for Fedora in RPM package instructions (go-gitea#36527) Enable pagination on GiteaDownloader.getIssueReactions() (go-gitea#36549) Refactor merge conan and container auth preserve actions taskID (go-gitea#36560) Fix assignee sidebar links and empty placeholder after go-gitea#32465 refactor (go-gitea#36559) Fix various version parsing problems (go-gitea#36553) ...

* origin/main: (152 commits) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) Fix mirror sync parser and fix mirror messages (go-gitea#36504) Update JS and PY deps (go-gitea#36576) Add viewer controller for mermaid (zoom, drag) (go-gitea#36557) Misc typescript tweaks (go-gitea#36523) Use full-file highlighting for diff sections (go-gitea#36561) fix(diff): reprocess htmx content after loading more files (go-gitea#36568) [skip ci] Updated translations via Crowdin Add wrap to runner label list (go-gitea#36565) fix: add dnf5 command for Fedora in RPM package instructions (go-gitea#36527) Enable pagination on GiteaDownloader.getIssueReactions() (go-gitea#36549) Refactor merge conan and container auth preserve actions taskID (go-gitea#36560) Fix assignee sidebar links and empty placeholder after go-gitea#32465 refactor (go-gitea#36559) Fix various version parsing problems (go-gitea#36553) ...

* origin/main: (2555 commits) automate updating nix flakes (go-gitea#35641) Update AGENTS.md instructions (go-gitea#36627) use user id in noreply emails (go-gitea#36550) feat(db): Improve BuildCaseInsensitiveLike with lowercase (go-gitea#36598) [skip ci] Updated translations via Crowdin BUG: Fix workflow run jobs API returning null steps (go-gitea#36603) Refactor highlight and diff (go-gitea#36599) Fix bug when do LFS GC (go-gitea#36500) feature to be able to filter project boards by milestones (go-gitea#36321) Update emoji data for Unicode 16 (go-gitea#36596) Adapt monaco error matching pattern to recent webpack config change (go-gitea#36533) Fix a bug user could change another user's primary email (go-gitea#36586) fix(repo-editor): disable Monaco `editContext` to avoid bugs with lost focus (go-gitea#36585) Fine tune diff highlighting (go-gitea#36592) Add code editor setting dropdowns (go-gitea#36534) Update to go 1.26.0 and golangci-lint 2.9.0 (go-gitea#36588) Improve diff highlighting (go-gitea#36583) Fix markup code block layout (go-gitea#36578) Remove striped tables in UI (go-gitea#36509) Fix vertical alignment of `.commit-sign-badge` children (go-gitea#36570) ... # Conflicts: # custom/conf/app.example.ini # docs/content/administration/config-cheat-sheet.en-us.md # docs/content/administration/config-cheat-sheet.zh-cn.md # modules/setting/security.go # routers/common/errpage.go # services/context/api.go # services/context/context.go

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>

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 4, 2026

github-actions bot added modifies/go Pull requests that update Go code modifies/templates This PR modifies the template files modifies/frontend labels Feb 4, 2026

silverwind mentioned this pull request Feb 4, 2026

Add settings UI to code editor #33434

Closed

3 tasks

silverwind added the type/feature Completely new functionality. Can only be merged if feature freeze is not active. label Feb 4, 2026

silverwind requested a review from Copilot February 4, 2026 23:07

Copilot started reviewing on behalf of silverwind February 4, 2026 23:07 View session

Copilot AI reviewed Feb 4, 2026

View reviewed changes

web_src/js/features/codeeditor.ts Outdated Show resolved Hide resolved

Update web_src/js/features/codeeditor.ts

27a8fbe

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: silverwind <me@silverwind.io>

silverwind commented Feb 5, 2026

View reviewed changes

routers/web/repo/editor.go Outdated Show resolved Hide resolved

Apply suggestion from @silverwind

7f6547c

Signed-off-by: silverwind <me@silverwind.io>

silverwind commented Feb 5, 2026

View reviewed changes

routers/web/repo/editor.go Outdated Show resolved Hide resolved

silverwind and others added 3 commits February 5, 2026 13:24

Apply suggestion from @silverwind

963e4a7

Signed-off-by: silverwind <me@silverwind.io>

Rename editor options template to settings

b9a69aa

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fmt

7fc1b99

Use Fomantic dropdowns for editor option selects

75d75c5

Convert editor option selects from plain <select> elements to div-based Fomantic UI dropdowns with tooltips showing the option labels previously used as optgroup headers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind and others added 2 commits February 10, 2026 05:41

Fix first menu item border-radius for selection dropdowns

92210b3

Selection dropdown menus connect flush to the dropdown box, so the first item should not have rounded top corners. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Reset font styles on editor options container

5f70d2e

Prevent font-weight and font-family from .ui.header parents propagating into the editor option dropdowns. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge branch 'main' into editoropts

9151a8d

Reduce editor option dropdown size to match small buttons

baa4e3e

Add small, compact classes and override min-height and padding to bring dropdown height in line with adjacent menu items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind added 2 commits February 11, 2026 18:25

restore pointer-events

7a49255

fix lint

518f02b

silverwind commented Feb 11, 2026

View reviewed changes

web_src/css/base.css Outdated Show resolved Hide resolved

Apply suggestion from @silverwind

6657a32

Signed-off-by: silverwind <me@silverwind.io>

silverwind commented Feb 11, 2026

View reviewed changes

web_src/js/features/codeeditor.ts Outdated Show resolved Hide resolved

Apply suggestion from @silverwind

68c549d

Signed-off-by: silverwind <me@silverwind.io>

silverwind marked this pull request as ready for review February 11, 2026 17:40

Merge branch 'main' into editoropts

4b1b6de

silverwind requested a review from Copilot February 11, 2026 18:23

Copilot started reviewing on behalf of silverwind February 11, 2026 18:24 View session

wxiaoguang reviewed Feb 11, 2026

View reviewed changes

web_src/css/base.css Outdated Show resolved Hide resolved

use top/translate

e6f179b

Copilot AI reviewed Feb 11, 2026

View reviewed changes

silverwind and others added 7 commits February 11, 2026 19:37

Only set tabSize when EditorConfig defines indentation

d188d69

Avoid overriding Monaco's indentation detection with a fallback tabSize of 4 when EditorConfig doesn't define indent_style/indent_size. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix

3f811fb

fix CodeEditorConfig

cc81066

fix

4934181

Update web_src/fomantic/build/components/dropdown.js

93d320e

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

Rename CSS variable --gitea-select-arrows to --select-arrows

1cb2d6d

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wxiaoguang approved these changes Feb 11, 2026

View reviewed changes

wxiaoguang merged commit 47b3879 into go-gitea:main Feb 11, 2026
24 checks passed

GiteaBot added this to the 1.26.0 milestone Feb 11, 2026

wxiaoguang deleted the editoropts branch February 11, 2026 19:55

Uh oh!

Conversation

silverwind commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lunny commented Feb 6, 2026

Uh oh!

silverwind commented Feb 6, 2026

Uh oh!

silverwind commented Feb 10, 2026

Uh oh!

silverwind commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

delvh commented Feb 10, 2026

Uh oh!

silverwind commented Feb 10, 2026

Uh oh!

silverwind commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Feb 10, 2026

Uh oh!

silverwind commented Feb 11, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

silverwind commented Feb 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silverwind commented Feb 4, 2026 •

edited

Loading

silverwind commented Feb 10, 2026 •

edited

Loading

silverwind commented Feb 10, 2026 •

edited

Loading