Fix EOL handling in web editor (#27141)

Fixes https://github.com/go-gitea/gitea/issues/27136.

This does the following for Monaco's EOL setting:

1. Use editorconfig setting if present
2. Use the file's dominant line ending as detected by monaco, which uses
LF for empty file

diff --git a/routers/web/repo/editor.go b/routers/web/repo/editor.go
index 0a606582e583bfd069a82d0d1bb4ad584d8db17a..9d9fee3a77c37c679bbe427333c5f50175d95712 100644 (file)
--- a/routers/web/repo/editor.go
+++ b/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,

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 2b303be97ccdb7d1c76041ce8765d1cef7ca8d60..abe2e345fcd828b95f379e552f843d4669a964a3 100644 (file)
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -34,12 +34,13 @@
                                        {{end}}
                                </div>
                                <div class="ui bottom attached active tab segment" data-tab="write">
-                                       <textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+                                       <textarea id="edit_area" name="content" class="gt-hidden"
+                                               data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
                                                data-url="{{.Repository.Link}}/markup"
                                                data-context="{{.RepoLink}}"
                                                data-previewable-extensions="{{.PreviewableExtensions}}"
-                                               data-line-wrap-extensions="{{.LineWrapExtensions}}">
-{{.FileContent}}</textarea>
+                                               data-line-wrap-extensions="{{.LineWrapExtensions}}"
+                                               data-initial-value="{{JsonUtils.EncodeToString .FileContent}}"></textarea>
                                        <div class="editor-loading is-loading"></div>
                                </div>
                                <div class="ui bottom attached tab segment markup" data-tab="preview">

diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js
index 7dbbcd3dd62a9b5c2fa2bc792a2f9938a9e30f76..5f924fd0864cf0509a85340a7522b8750f61a9d8 100644 (file)
--- a/web_src/js/features/codeeditor.js
+++ b/web_src/js/features/codeeditor.js
@@ -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,28 @@ export async function createMonaco(textarea, filename, editorOpts) {
   monaco.languages.register({id: 'vs.editor.nullLanguage'});
   monaco.languages.setLanguageConfiguration('vs.editor.nullLanguage', {});
 
+  // We encode the initial value in JSON on the backend to prevent browsers from
+  // discarding the \r during HTML parsing:
+  // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
+  const value = JSON.parse(textarea.getAttribute('data-initial-value') || '""');
+  textarea.value = value;
+  textarea.removeAttribute('data-initial-value');
+
   const editor = monaco.editor.create(container, {
-    value: textarea.value,
+    value,
     theme: 'gitea',
     language,
     ...other,
   });
 
   const model = editor.getModel();
+
+  // Monaco performs auto-detection of dominant EOL in the file, biased towards LF for
+  // empty files. If there is an editorconfig value, override this detected value.
+  if (eol in monaco.editor.EndOfLineSequence) {
+    model.setEOL(monaco.editor.EndOfLineSequence[eol]);
+  }
+
   model.onDidChangeContent(() => {
     textarea.value = editor.getValue();
     textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
@@ -187,5 +201,6 @@ function getEditorConfigOptions(ec) {
   opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
   opts.insertSpaces = ec.indent_style === 'space';
   opts.useTabStops = ec.indent_style === 'tab';
+  opts.eol = ec.end_of_line?.toUpperCase();
   return opts;
 }