Use monaco for the git hook editor (#13552)

Migrate git hook editor to monaco, replacing CodeMirror. Had to do a few
refactors to make the monaco instantiation generic enough to be of use.

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2020-11-14 04:57:34 +01:00 committed by GitHub
parent a2efcb6acc
commit 374ff60465
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 74 additions and 62 deletions

View file

@ -787,7 +787,6 @@ func GitHooks(ctx *context.Context) {
func GitHooksEdit(ctx *context.Context) { func GitHooksEdit(ctx *context.Context) {
ctx.Data["Title"] = ctx.Tr("repo.settings.githooks") ctx.Data["Title"] = ctx.Tr("repo.settings.githooks")
ctx.Data["PageIsSettingsGitHooks"] = true ctx.Data["PageIsSettingsGitHooks"] = true
ctx.Data["RequireSimpleMDE"] = true
name := ctx.Params(":name") name := ctx.Params(":name")
hook, err := ctx.Repo.GitRepo.GetHook(name) hook, err := ctx.Repo.GitRepo.GetHook(name)

View file

@ -36,7 +36,7 @@
{{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" data-id="repo-{{.Repository.Name}}-{{.TreePath}}" <textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
data-url="{{.Repository.APIURL}}/markdown" data-url="{{.Repository.APIURL}}/markdown"
data-context="{{.RepoLink}}" data-context="{{.RepoLink}}"
data-markdown-file-exts="{{.MarkdownFileExts}}" data-markdown-file-exts="{{.MarkdownFileExts}}"

View file

@ -14,13 +14,13 @@
{{with .Hook}} {{with .Hook}}
<div class="inline field"> <div class="inline field">
<label>{{$.i18n.Tr "repo.settings.githook_name"}}</label> <label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
<span>{{.Name}}</span> <span class="hook-filename">{{.Name}}</span>
</div> </div>
<div class="field"> <div class="field">
<label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label> <label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
<textarea id="content" name="content" rows="20" wrap="off" autofocus>{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea> <textarea id="content" name="content" class="hide">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
<div class="editor-loading is-loading"></div>
</div> </div>
<div class="inline field"> <div class="inline field">
<button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button> <button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
</div> </div>

View file

@ -16,7 +16,9 @@
<div class="item"> <div class="item">
<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill"}}</span> <span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill"}}</span>
<span>{{.Name}}</span> <span>{{.Name}}</span>
<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}"><i class="fa fa-pencil"></i></a> <a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}">
{{svg "octicon-pencil"}}
</a>
</div> </div>
{{end}} {{end}}
</div> </div>

View file

@ -26,12 +26,11 @@ function getLanguage(filename) {
return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext'; return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
} }
function updateEditor(monaco, editor, filenameInput) { function updateEditor(monaco, editor, filename, lineWrapExts) {
const newFilename = filenameInput.value; editor.updateOptions({...getFileBasedOptions(filename, lineWrapExts)});
editor.updateOptions(getOptions(filenameInput));
const model = editor.getModel(); const model = editor.getModel();
const language = model.getModeId(); const language = model.getModeId();
const newLanguage = getLanguage(newFilename); const newLanguage = getLanguage(filename);
if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage); if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
} }
@ -41,24 +40,12 @@ function exportEditor(editor) {
if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor); if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
} }
export async function createCodeEditor(textarea, filenameInput, previewFileModes) { export async function createMonaco(textarea, filename, editorOpts) {
const filename = basename(filenameInput.value);
const previewLink = document.querySelector('a[data-tab=preview]');
const markdownExts = (textarea.dataset.markdownFileExts || '').split(',');
const lineWrapExts = (textarea.dataset.lineWrapExtensions || '').split(',');
const isMarkdown = markdownExts.includes(extname(filename));
if (previewLink) {
if (isMarkdown && (previewFileModes || []).includes('markdown')) {
previewLink.dataset.url = previewLink.dataset.url.replace(/(.*)\/.*/i, `$1/markdown`);
previewLink.style.display = '';
} else {
previewLink.style.display = 'none';
}
}
const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor'); const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
initLanguages(monaco); initLanguages(monaco);
let {language, ...other} = editorOpts;
if (!language) language = getLanguage(filename);
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'monaco-editor-container'; container.className = 'monaco-editor-container';
@ -66,8 +53,9 @@ export async function createCodeEditor(textarea, filenameInput, previewFileModes
const editor = monaco.editor.create(container, { const editor = monaco.editor.create(container, {
value: textarea.value, value: textarea.value,
language: getLanguage(filename), theme: isDarkTheme() ? 'vs-dark' : 'vs',
...getOptions(filenameInput, lineWrapExts), language,
...other,
}); });
const model = editor.getModel(); const model = editor.getModel();
@ -80,25 +68,54 @@ export async function createCodeEditor(textarea, filenameInput, previewFileModes
editor.layout(); editor.layout();
}); });
filenameInput.addEventListener('keyup', () => { exportEditor(editor);
updateEditor(monaco, editor, filenameInput);
});
const loading = document.querySelector('.editor-loading'); const loading = document.querySelector('.editor-loading');
if (loading) loading.remove(); if (loading) loading.remove();
exportEditor(editor); return {monaco, editor};
}
function getFileBasedOptions(filename, lineWrapExts) {
return {
wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
};
}
export async function createCodeEditor(textarea, filenameInput, previewFileModes) {
const filename = basename(filenameInput.value);
const previewLink = document.querySelector('a[data-tab=preview]');
const markdownExts = (textarea.dataset.markdownFileExts || '').split(',');
const lineWrapExts = (textarea.dataset.lineWrapExtensions || '').split(',');
const isMarkdown = markdownExts.includes(extname(filename));
const editorConfig = getEditorconfig(filenameInput);
if (previewLink) {
if (isMarkdown && (previewFileModes || []).includes('markdown')) {
previewLink.dataset.url = previewLink.dataset.url.replace(/(.*)\/.*/i, `$1/markdown`);
previewLink.style.display = '';
} else {
previewLink.style.display = 'none';
}
}
const {monaco, editor} = await createMonaco(textarea, filename, {
...getFileBasedOptions(filenameInput.value, lineWrapExts),
...getEditorConfigOptions(editorConfig),
});
filenameInput.addEventListener('keyup', () => {
const filename = filenameInput.value;
updateEditor(monaco, editor, filename, lineWrapExts);
});
return editor; return editor;
} }
function getOptions(filenameInput, lineWrapExts) { function getEditorConfigOptions(ec) {
const ec = getEditorconfig(filenameInput); if (!isObject(ec)) return {};
const theme = isDarkTheme() ? 'vs-dark' : 'vs';
const wordWrap = (lineWrapExts || []).includes(extname(filenameInput.value)) ? 'on' : 'off';
const opts = {theme, wordWrap}; const opts = {};
if (isObject(ec)) {
opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec); opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
if ('indent_size' in ec) opts.indentSize = Number(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) || opts.indentSize; if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
@ -106,7 +123,5 @@ function getOptions(filenameInput, lineWrapExts) {
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';
}
return opts; return opts;
} }

View file

@ -23,7 +23,7 @@ import createDropzone from './features/dropzone.js';
import initTableSort from './features/tablesort.js'; import initTableSort from './features/tablesort.js';
import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {initNotificationsTable, initNotificationCount} from './features/notification.js';
import {createCodeEditor} from './features/codeeditor.js'; import {createCodeEditor, createMonaco} from './features/codeeditor.js';
import {svg, svgs} from './svg.js'; import {svg, svgs} from './svg.js';
import {stripTags} from './utils.js'; import {stripTags} from './utils.js';
@ -1732,15 +1732,10 @@ function initUserSettings() {
} }
} }
function initGithook() { async function initGithook() {
if ($('.edit.githook').length === 0) { if ($('.edit.githook').length === 0) return;
return; const filename = document.querySelector('.hook-filename').textContent;
} await createMonaco($('#content')[0], filename, {language: 'shell'});
CodeMirror.autoLoadMode(CodeMirror.fromTextArea($('#content')[0], {
lineNumbers: true,
mode: 'shell'
}), 'shell');
} }
function initWebhook() { function initWebhook() {
@ -2517,7 +2512,6 @@ $(document).ready(async () => {
initEditForm(); initEditForm();
initEditor(); initEditor();
initOrganization(); initOrganization();
initGithook();
initWebhook(); initWebhook();
initAdmin(); initAdmin();
initCodeView(); initCodeView();
@ -2575,6 +2569,7 @@ $(document).ready(async () => {
initServiceWorker(), initServiceWorker(),
initNotificationCount(), initNotificationCount(),
renderMarkdownContent(), renderMarkdownContent(),
initGithook(),
]); ]);
}); });

View file

@ -53,10 +53,6 @@
border-right: 1px solid var(--color-secondary) !important; border-right: 1px solid var(--color-secondary) !important;
} }
#edit_area {
display: none;
}
.monaco-editor-container { .monaco-editor-container {
width: 100%; width: 100%;
min-height: 200px; min-height: 200px;
@ -73,3 +69,8 @@
color: transparent !important; color: transparent !important;
background-color: transparent !important; background-color: transparent !important;
} }
.edit.githook .monaco-editor-container {
border: 1px solid var(--color-secondary);
height: 70vh;
}