Fix EOL handling in web editor (#27141) (#27234)

Backport #27141 by @silverwind

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

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Giteabot 2023-09-25 06:10:38 +08:00 committed by GitHub
parent 134c7636ef
commit a1029cb2ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 6 deletions

View file

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

View file

@ -34,12 +34,13 @@
{{end}} {{end}}
</div> </div>
<div class="ui bottom attached active tab segment" data-tab="write"> <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-url="{{.Repository.Link}}/markup"
data-context="{{.RepoLink}}" data-context="{{.RepoLink}}"
data-previewable-extensions="{{.PreviewableExtensions}}" data-previewable-extensions="{{.PreviewableExtensions}}"
data-line-wrap-extensions="{{.LineWrapExtensions}}"> data-line-wrap-extensions="{{.LineWrapExtensions}}"
{{.FileContent}}</textarea> data-initial-value="{{JsonUtils.EncodeToString .FileContent}}"></textarea>
<div class="editor-loading is-loading"></div> <div class="editor-loading is-loading"></div>
</div> </div>
<div class="ui bottom attached tab segment markup" data-tab="preview"> <div class="ui bottom attached tab segment markup" data-tab="preview">

View file

@ -62,7 +62,7 @@ export async function createMonaco(textarea, filename, editorOpts) {
const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor'); const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
initLanguages(monaco); initLanguages(monaco);
let {language, ...other} = editorOpts; let {language, eol, ...other} = editorOpts;
if (!language) language = getLanguage(filename); if (!language) language = getLanguage(filename);
const container = document.createElement('div'); 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.register({id: 'vs.editor.nullLanguage'});
monaco.languages.setLanguageConfiguration('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, { const editor = monaco.editor.create(container, {
value: textarea.value, value,
theme: 'gitea', theme: 'gitea',
language, language,
...other, ...other,
}); });
const model = editor.getModel(); 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(() => { model.onDidChangeContent(() => {
textarea.value = editor.getValue(); textarea.value = editor.getValue();
textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure 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.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
opts.insertSpaces = ec.indent_style === 'space'; opts.insertSpaces = ec.indent_style === 'space';
opts.useTabStops = ec.indent_style === 'tab'; opts.useTabStops = ec.indent_style === 'tab';
opts.eol = ec.end_of_line?.toUpperCase();
return opts; return opts;
} }