loading up the forgejo repo on tangled to test page performance
Monaco improvements (#15333)
- Create theme at runtime which follows the CSS variables of the site
- Disable a few opinionated Monaco defaults like minimap and word highlights
- Move styles to separate file
Co-authored-by: zeripath <art27@cantab.net>
authored by
silverwind
zeripath
and committed by
GitHub
4eea819b
05b7e328
+86
-24
+50
-2
web_src/js/features/codeeditor.js
+50
-2
web_src/js/features/codeeditor.js
···
3
3
const languagesByFilename = {};
4
4
const languagesByExt = {};
5
5
6
+
const baseOptions = {
7
+
fontFamily: 'var(--fonts-monospace)',
8
+
fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
9
+
links: false,
10
+
minimap: {enabled: false},
11
+
occurrencesHighlight: false,
12
+
overviewRulerLanes: 0,
13
+
renderIndentGuides: false,
14
+
renderLineHighlight: 'all',
15
+
renderLineHighlightOnlyWhenFocus: true,
16
+
renderWhitespace: 'none',
17
+
rulers: false,
18
+
scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
19
+
scrollBeyondLastLine: false,
20
+
};
21
+
6
22
function getEditorconfig(input) {
7
23
try {
8
24
return JSON.parse(input.dataset.editorconfig);
···
27
43
}
28
44
29
45
function updateEditor(monaco, editor, filename, lineWrapExts) {
30
-
editor.updateOptions({...getFileBasedOptions(filename, lineWrapExts)});
46
+
editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
31
47
const model = editor.getModel();
32
48
const language = model.getModeId();
33
49
const newLanguage = getLanguage(filename);
···
51
67
container.className = 'monaco-editor-container';
52
68
textarea.parentNode.appendChild(container);
53
69
70
+
// https://github.com/microsoft/monaco-editor/issues/2427
71
+
const styles = window.getComputedStyle(document.documentElement);
72
+
const getProp = (name) => styles.getPropertyValue(name).trim();
73
+
74
+
monaco.editor.defineTheme('gitea', {
75
+
base: isDarkTheme() ? 'vs-dark' : 'vs',
76
+
inherit: true,
77
+
rules: [
78
+
{
79
+
background: getProp('--color-code-bg'),
80
+
}
81
+
],
82
+
colors: {
83
+
'editor.background': getProp('--color-code-bg'),
84
+
'editor.foreground': getProp('--color-text'),
85
+
'editor.inactiveSelectionBackground': getProp('--color-primary-light-4'),
86
+
'editor.lineHighlightBackground': getProp('--color-editor-line-highlight'),
87
+
'editor.selectionBackground': getProp('--color-primary-light-3'),
88
+
'editor.selectionForeground': getProp('--color-primary-light-3'),
89
+
'editorLineNumber.background': getProp('--color-code-bg'),
90
+
'editorLineNumber.foreground': getProp('--color-secondary-dark-6'),
91
+
'editorWidget.background': getProp('--color-body'),
92
+
'editorWidget.border': getProp('--color-secondary'),
93
+
'input.background': getProp('--color-input-background'),
94
+
'input.border': getProp('--color-input-border'),
95
+
'input.foreground': getProp('--color-input-text'),
96
+
'scrollbar.shadow': getProp('--color-shadow'),
97
+
'progressBar.background': getProp('--color-primary'),
98
+
}
99
+
});
100
+
54
101
const editor = monaco.editor.create(container, {
55
102
value: textarea.value,
56
-
theme: isDarkTheme() ? 'vs-dark' : 'vs',
103
+
theme: 'gitea',
57
104
language,
58
105
...other,
59
106
});
···
100
147
}
101
148
102
149
const {monaco, editor} = await createMonaco(textarea, filename, {
150
+
...baseOptions,
103
151
...getFileBasedOptions(filenameInput.value, lineWrapExts),
104
152
...getEditorConfigOptions(editorConfig),
105
153
});
+2
web_src/less/_base.less
+2
web_src/less/_base.less
···
106
106
--color-markdown-code-block: #00000010;
107
107
--color-button: #ffffff;
108
108
--color-code-bg: #ffffff;
109
+
--color-shadow: #00000030;
109
110
--color-secondary-bg: #f4f4f4;
110
111
--color-expand-button: #d8efff;
111
112
--color-placeholder-text: #aaa;
113
+
--color-editor-line-highlight: var(--color-primary-light-6);
112
114
/* backgrounds */
113
115
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
114
116
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
-22
web_src/less/_editor.less
-22
web_src/less/_editor.less
···
74
74
border-left: 1px solid var(--color-secondary) !important;
75
75
border-right: 1px solid var(--color-secondary) !important;
76
76
}
77
-
78
-
.monaco-editor-container {
79
-
width: 100%;
80
-
min-height: 200px;
81
-
height: 90vh;
82
-
}
83
-
84
-
/* overwrite conflicting styles from fomantic */
85
-
.monaco-editor-container .inputarea {
86
-
min-height: 0 !important;
87
-
margin: 0 !important;
88
-
padding: 0 !important;
89
-
resize: none !important;
90
-
border: none !important;
91
-
color: transparent !important;
92
-
background-color: transparent !important;
93
-
}
94
-
95
-
.edit.githook .monaco-editor-container {
96
-
border: 1px solid var(--color-secondary);
97
-
height: 70vh;
98
-
}
+32
web_src/less/features/codeeditor.less
+32
web_src/less/features/codeeditor.less
···
1
+
.monaco-editor-container {
2
+
width: 100%;
3
+
min-height: 200px;
4
+
height: 90vh;
5
+
}
6
+
7
+
.edit.githook .monaco-editor-container {
8
+
border: 1px solid var(--color-secondary);
9
+
height: 70vh;
10
+
}
11
+
12
+
/* overwrite conflicting styles from fomantic */
13
+
.monaco-editor-container .inputarea {
14
+
min-height: 0 !important;
15
+
margin: 0 !important;
16
+
padding: 0 !important;
17
+
resize: none !important;
18
+
border: none !important;
19
+
color: transparent !important;
20
+
background-color: transparent !important;
21
+
}
22
+
23
+
/* these seem unthemeable */
24
+
.monaco-scrollable-element > .scrollbar > .slider {
25
+
background: var(--color-primary) !important;
26
+
}
27
+
.monaco-scrollable-element > .scrollbar > .slider:hover {
28
+
background: var(--color-primary-dark-1) !important;
29
+
}
30
+
.monaco-scrollable-element > .scrollbar > .slider:active {
31
+
background: var(--color-primary-dark-2) !important;
32
+
}
+1
web_src/less/index.less
+1
web_src/less/index.less