Fix EOL handling in web editor

Author: silverwind

routers/web/repo/editor.go

@@ -287,7 +287,7 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
 				Operation:     operation,
 				FromTreePath:  ctx.Repo.TreePath,
 				TreePath:      form.TreePath,
-				ContentReader: strings.NewReader(strings.ReplaceAll(form.Content, "\r", "")),
+				ContentReader: strings.NewReader(form.Content),
 			},
 		},
 		Signoff: form.Signoff,

templates/repo/editor/edit.tmpl

@@ -38,9 +38,9 @@
 						data-url="{{.Repository.Link}}/markup"
 						data-context="{{.RepoLink}}"
 						data-previewable-extensions="{{.PreviewableExtensions}}"
-						data-line-wrap-extensions="{{.LineWrapExtensions}}">
-{{.FileContent}}</textarea>
+						data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
 					<div class="editor-loading is-loading"></div>
+					<script>window.monacoContent = "{{.FileContent}}";</script>
 				</div>
 				<div class="ui bottom attached tab segment markup" data-tab="preview">
 					{{.locale.Tr "loading"}}

web_src/js/features/codeeditor.js

@@ -1,5 +1,5 @@
 import tinycolor from 'tinycolor2';
-import {basename, extname, isObject, isDarkTheme} from '../utils.js';
+import {basename, extname, isObject, isDarkTheme, detectEol} from '../utils.js';
 import {onInputDebounce} from '../utils/dom.js';
 
 const languagesByFilename = {};
@@ -62,7 +62,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
   const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
 
   initLanguages(monaco);
-  let {language, ...other} = editorOpts;
+  let {language, eol, ...other} = editorOpts;
   if (!language) language = getLanguage(filename);
 
   const container = document.createElement('div');
@@ -105,14 +105,23 @@ export async function createMonaco(textarea, filename, editorOpts) {
   monaco.languages.register({id: 'vs.editor.nullLanguage'});
   monaco.languages.setLanguageConfiguration('vs.editor.nullLanguage', {});
 
+  // TODO: there must be a better way to preserve CRLF in the template rendering
+  const value = window.monacoContent || '';
+  delete window.monacoContent;
+  textarea.value = value;
+
   const editor = monaco.editor.create(container, {
-    value: textarea.value,
+    value,
     theme: 'gitea',
     language,
     ...other,
   });
 
   const model = editor.getModel();
+
+  // set eol mode to value from editorconfig or content-detected value
+  model.setEOL(monaco.editor.EndOfLineSequence[eol || detectEol(value) || 'LF']);
+
   model.onDidChangeContent(() => {
     textarea.value = editor.getValue();
     textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
@@ -187,5 +196,7 @@ function getEditorConfigOptions(ec) {
   opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
   opts.insertSpaces = ec.indent_style === 'space';
   opts.useTabStops = ec.indent_style === 'tab';
+  const eol = ec.end_of_line?.toUpperCase();
+  if (['LF', 'CRLF'].includes(eol)) opts.eol = eol;
   return opts;
 }

web_src/js/utils.js

@@ -128,3 +128,14 @@ export function decodeURLEncodedBase64(base64url) {
     .replace(/_/g, '/')
     .replace(/-/g, '+'));
 }
+
+// Detect dominant line ending in a string
+// based on https://github.com/sindresorhus/detect-newline
+export function detectEol(str) {
+  const newlines = (str || '').match(/\r?\n/g) || [];
+  if (newlines.length === 0) return undefined;
+  const crlf = newlines.filter((newline) => newline === '\r\n').length;
+  const lf = newlines.length - crlf;
+  if (crlf === lf) return undefined;
+  return crlf > lf ? 'CRLF' : 'LF';
+}

web_src/js/utils.test.js

@@ -3,6 +3,7 @@ import {
   basename, extname, isObject, stripTags, parseIssueHref,
   parseUrl, translateMonth, translateDay, blobToDataURI,
   toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64,
+  detectEol,
 } from './utils.js';
 
 test('basename', () => {
@@ -113,3 +114,11 @@ test('encodeURLEncodedBase64, decodeURLEncodedBase64', () => {
   expect(Array.from(decodeURLEncodedBase64('YQ'))).toEqual(Array.from(uint8array('a')));
   expect(Array.from(decodeURLEncodedBase64('YQ=='))).toEqual(Array.from(uint8array('a')));
 });
+
+test('detectEol', () => {
+  expect(detectEol(undefined)).toEqual(undefined);
+  expect(detectEol('')).toEqual(undefined);
+  expect(detectEol('a\nb')).toEqual('LF');
+  expect(detectEol('a\nb\r\n')).toEqual(undefined);
+  expect(detectEol('a\nb\r\nc\r\n')).toEqual('CRLF');
+});