Add code editor setting dropdowns (#36534)

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>
2026-03-20 03:40:27 +00:00 · 2026-02-11 20:55:46 +01:00
parent 45ee571693
commit 47b387921a
16 changed files with 171 additions and 70 deletions
--- 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
  --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
  --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
+  --select-arrows: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427m0-1.957L7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426"/></svg>');
  /* 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);
 }
--- 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%;
--- 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);
--- 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<string, string> = {};
@@ -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<HTMLSelectElement>('.js-indent-style-select')!.addEventListener('change', (e) => {
+      const insertSpaces = (e.target as HTMLSelectElement).value === 'space';
+      editor.updateOptions({insertSpaces, useTabStops: !insertSpaces});
+    });
+    elEditorOptions.querySelector<HTMLSelectElement>('.js-indent-size-select')!.addEventListener('change', (e) => {
+      const tabSize = Number((e.target as HTMLSelectElement).value);
+      editor.updateOptions({tabSize});
+    });
+    elEditorOptions.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');
@@ -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;