diff --git a/options/locale/locale_en-US.json b/options/locale/locale_en-US.json index a4e13c5ca8..96fa878b5e 100644 --- a/options/locale/locale_en-US.json +++ b/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", diff --git a/routers/web/repo/editor.go b/routers/web/repo/editor.go index 048c9f3d4a..171ccd7719 100644 --- a/routers/web/repo/editor.go +++ b/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) } diff --git a/routers/web/repo/editor_apply_patch.go b/routers/web/repo/editor_apply_patch.go index 357c6f3a21..1a01bfd5cb 100644 --- a/routers/web/repo/editor_apply_patch.go +++ b/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) } diff --git a/routers/web/repo/editor_util.go b/routers/web/repo/editor_util.go index 07bcb474f0..aca732ac70 100644 --- a/routers/web/repo/editor_util.go +++ b/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. diff --git a/routers/web/repo/setting/git_hooks.go b/routers/web/repo/setting/git_hooks.go index ba4b5e85b6..1f542a3f9f 100644 --- a/routers/web/repo/setting/git_hooks.go +++ b/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) } diff --git a/tailwind.config.ts b/tailwind.config.ts index 8693208e13..7aaea687eb 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -80,10 +80,10 @@ export default { semibold: 'var(--font-weight-semibold)', bold: 'var(--font-weight-bold)', }, - fontSize: { // not using `rem` units because our root is currently 14px - 'xs': '12px', - 'sm': '14px', - 'base': '16px', + fontSize: { // rarely used, but "text-base" (matching body's 1em=14px) is useful to reset font-size in a header container + 'xs': '11px', + 'sm': '12px', + 'base': '14px', 'lg': '18px', 'xl': '20px', '2xl': '24px', diff --git a/templates/package/content/container.tmpl b/templates/package/content/container.tmpl index 1a1335aaa6..a69b0477d2 100644 --- a/templates/package/content/container.tmpl +++ b/templates/package/content/container.tmpl @@ -78,7 +78,7 @@ {{ctx.Locale.Tr "packages.container.layers"}} {{/* only show the platform if the image metadata is not the package's, which means that it is a sub manifest */}} {{if ne .ContainerImageMetadata .PackageDescriptor.Metadata}} - + ({{svg "octicon-cpu" 12}} {{.ContainerImageMetadata.Platform}}) {{end}} diff --git a/templates/repo/editor/common_breadcrumb.tmpl b/templates/repo/editor/common_breadcrumb.tmpl index 8cfbe09d3e..44c9058457 100644 --- a/templates/repo/editor/common_breadcrumb.tmpl +++ b/templates/repo/editor/common_breadcrumb.tmpl @@ -5,7 +5,7 @@ {{range $i, $v := .TreeNames}}
/
{{if eq $i $l}} - + {{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;