mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-08 08:33:27 +00:00
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:
parent
a2efcb6acc
commit
374ff60465
7 changed files with 74 additions and 62 deletions
|
@ -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)
|
||||||
|
|
|
@ -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}}"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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(),
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue