Skip to content

Commit 374ff60

Browse files
silverwindlunnytechknowlogick
authored
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 <[email protected]> Co-authored-by: techknowlogick <[email protected]>
1 parent a2efcb6 commit 374ff60

File tree

7 files changed

+74
-62
lines changed

7 files changed

+74
-62
lines changed

routers/repo/setting.go

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -787,7 +787,6 @@ func GitHooks(ctx *context.Context) {
787787
func GitHooksEdit(ctx *context.Context) {
788788
ctx.Data["Title"] = ctx.Tr("repo.settings.githooks")
789789
ctx.Data["PageIsSettingsGitHooks"] = true
790-
ctx.Data["RequireSimpleMDE"] = true
791790

792791
name := ctx.Params(":name")
793792
hook, err := ctx.Repo.GitRepo.GetHook(name)

templates/repo/editor/edit.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
{{end}}
3737
</div>
3838
<div class="ui bottom attached active tab segment" data-tab="write">
39-
<textarea id="edit_area" name="content" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
39+
<textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
4040
data-url="{{.Repository.APIURL}}/markdown"
4141
data-context="{{.RepoLink}}"
4242
data-markdown-file-exts="{{.MarkdownFileExts}}"

templates/repo/settings/githook_edit.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
{{with .Hook}}
1515
<div class="inline field">
1616
<label>{{$.i18n.Tr "repo.settings.githook_name"}}</label>
17-
<span>{{.Name}}</span>
17+
<span class="hook-filename">{{.Name}}</span>
1818
</div>
1919
<div class="field">
2020
<label for="content">{{$.i18n.Tr "repo.settings.githook_content"}}</label>
21-
<textarea id="content" name="content" rows="20" wrap="off" autofocus>{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
21+
<textarea id="content" name="content" class="hide">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
22+
<div class="editor-loading is-loading"></div>
2223
</div>
23-
2424
<div class="inline field">
2525
<button class="ui green button">{{$.i18n.Tr "repo.settings.update_githook"}}</button>
2626
</div>

templates/repo/settings/githooks.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<div class="item">
1717
<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill"}}</span>
1818
<span>{{.Name}}</span>
19-
<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}"><i class="fa fa-pencil"></i></a>
19+
<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name}}">
20+
{{svg "octicon-pencil"}}
21+
</a>
2022
</div>
2123
{{end}}
2224
</div>

web_src/js/features/codeeditor.js

Lines changed: 56 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,11 @@ function getLanguage(filename) {
2626
return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
2727
}
2828

29-
function updateEditor(monaco, editor, filenameInput) {
30-
const newFilename = filenameInput.value;
31-
editor.updateOptions(getOptions(filenameInput));
29+
function updateEditor(monaco, editor, filename, lineWrapExts) {
30+
editor.updateOptions({...getFileBasedOptions(filename, lineWrapExts)});
3231
const model = editor.getModel();
3332
const language = model.getModeId();
34-
const newLanguage = getLanguage(newFilename);
33+
const newLanguage = getLanguage(filename);
3534
if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
3635
}
3736

@@ -41,33 +40,22 @@ function exportEditor(editor) {
4140
if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
4241
}
4342

44-
export async function createCodeEditor(textarea, filenameInput, previewFileModes) {
45-
const filename = basename(filenameInput.value);
46-
const previewLink = document.querySelector('a[data-tab=preview]');
47-
const markdownExts = (textarea.dataset.markdownFileExts || '').split(',');
48-
const lineWrapExts = (textarea.dataset.lineWrapExtensions || '').split(',');
49-
const isMarkdown = markdownExts.includes(extname(filename));
50-
51-
if (previewLink) {
52-
if (isMarkdown && (previewFileModes || []).includes('markdown')) {
53-
previewLink.dataset.url = previewLink.dataset.url.replace(/(.*)\/.*/i, `$1/markdown`);
54-
previewLink.style.display = '';
55-
} else {
56-
previewLink.style.display = 'none';
57-
}
58-
}
59-
43+
export async function createMonaco(textarea, filename, editorOpts) {
6044
const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
45+
6146
initLanguages(monaco);
47+
let {language, ...other} = editorOpts;
48+
if (!language) language = getLanguage(filename);
6249

6350
const container = document.createElement('div');
6451
container.className = 'monaco-editor-container';
6552
textarea.parentNode.appendChild(container);
6653

6754
const editor = monaco.editor.create(container, {
6855
value: textarea.value,
69-
language: getLanguage(filename),
70-
...getOptions(filenameInput, lineWrapExts),
56+
theme: isDarkTheme() ? 'vs-dark' : 'vs',
57+
language,
58+
...other,
7159
});
7260

7361
const model = editor.getModel();
@@ -80,33 +68,60 @@ export async function createCodeEditor(textarea, filenameInput, previewFileModes
8068
editor.layout();
8169
});
8270

83-
filenameInput.addEventListener('keyup', () => {
84-
updateEditor(monaco, editor, filenameInput);
85-
});
71+
exportEditor(editor);
8672

8773
const loading = document.querySelector('.editor-loading');
8874
if (loading) loading.remove();
8975

90-
exportEditor(editor);
76+
return {monaco, editor};
77+
}
9178

92-
return editor;
79+
function getFileBasedOptions(filename, lineWrapExts) {
80+
return {
81+
wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
82+
};
9383
}
9484

95-
function getOptions(filenameInput, lineWrapExts) {
96-
const ec = getEditorconfig(filenameInput);
97-
const theme = isDarkTheme() ? 'vs-dark' : 'vs';
98-
const wordWrap = (lineWrapExts || []).includes(extname(filenameInput.value)) ? 'on' : 'off';
99-
100-
const opts = {theme, wordWrap};
101-
if (isObject(ec)) {
102-
opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
103-
if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
104-
if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
105-
if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)];
106-
opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
107-
opts.insertSpaces = ec.indent_style === 'space';
108-
opts.useTabStops = ec.indent_style === 'tab';
85+
export async function createCodeEditor(textarea, filenameInput, previewFileModes) {
86+
const filename = basename(filenameInput.value);
87+
const previewLink = document.querySelector('a[data-tab=preview]');
88+
const markdownExts = (textarea.dataset.markdownFileExts || '').split(',');
89+
const lineWrapExts = (textarea.dataset.lineWrapExtensions || '').split(',');
90+
const isMarkdown = markdownExts.includes(extname(filename));
91+
const editorConfig = getEditorconfig(filenameInput);
92+
93+
if (previewLink) {
94+
if (isMarkdown && (previewFileModes || []).includes('markdown')) {
95+
previewLink.dataset.url = previewLink.dataset.url.replace(/(.*)\/.*/i, `$1/markdown`);
96+
previewLink.style.display = '';
97+
} else {
98+
previewLink.style.display = 'none';
99+
}
109100
}
110101

102+
const {monaco, editor} = await createMonaco(textarea, filename, {
103+
...getFileBasedOptions(filenameInput.value, lineWrapExts),
104+
...getEditorConfigOptions(editorConfig),
105+
});
106+
107+
filenameInput.addEventListener('keyup', () => {
108+
const filename = filenameInput.value;
109+
updateEditor(monaco, editor, filename, lineWrapExts);
110+
});
111+
112+
return editor;
113+
}
114+
115+
function getEditorConfigOptions(ec) {
116+
if (!isObject(ec)) return {};
117+
118+
const opts = {};
119+
opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
120+
if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
121+
if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
122+
if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)];
123+
opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
124+
opts.insertSpaces = ec.indent_style === 'space';
125+
opts.useTabStops = ec.indent_style === 'tab';
111126
return opts;
112127
}

web_src/js/index.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import createDropzone from './features/dropzone.js';
2323
import initTableSort from './features/tablesort.js';
2424
import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
2525
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
26-
import {createCodeEditor} from './features/codeeditor.js';
26+
import {createCodeEditor, createMonaco} from './features/codeeditor.js';
2727
import {svg, svgs} from './svg.js';
2828
import {stripTags} from './utils.js';
2929

@@ -1732,15 +1732,10 @@ function initUserSettings() {
17321732
}
17331733
}
17341734

1735-
function initGithook() {
1736-
if ($('.edit.githook').length === 0) {
1737-
return;
1738-
}
1739-
1740-
CodeMirror.autoLoadMode(CodeMirror.fromTextArea($('#content')[0], {
1741-
lineNumbers: true,
1742-
mode: 'shell'
1743-
}), 'shell');
1735+
async function initGithook() {
1736+
if ($('.edit.githook').length === 0) return;
1737+
const filename = document.querySelector('.hook-filename').textContent;
1738+
await createMonaco($('#content')[0], filename, {language: 'shell'});
17441739
}
17451740

17461741
function initWebhook() {
@@ -2517,7 +2512,6 @@ $(document).ready(async () => {
25172512
initEditForm();
25182513
initEditor();
25192514
initOrganization();
2520-
initGithook();
25212515
initWebhook();
25222516
initAdmin();
25232517
initCodeView();
@@ -2575,6 +2569,7 @@ $(document).ready(async () => {
25752569
initServiceWorker(),
25762570
initNotificationCount(),
25772571
renderMarkdownContent(),
2572+
initGithook(),
25782573
]);
25792574
});
25802575

web_src/less/_editor.less

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,6 @@
5353
border-right: 1px solid var(--color-secondary) !important;
5454
}
5555

56-
#edit_area {
57-
display: none;
58-
}
59-
6056
.monaco-editor-container {
6157
width: 100%;
6258
min-height: 200px;
@@ -73,3 +69,8 @@
7369
color: transparent !important;
7470
background-color: transparent !important;
7571
}
72+
73+
.edit.githook .monaco-editor-container {
74+
border: 1px solid var(--color-secondary);
75+
height: 70vh;
76+
}

0 commit comments

Comments
 (0)