From 4eea819b2496b849ca8e1e7a6e11fef45e141225 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 8 Apr 2021 11:53:00 +0200
Subject: [PATCH] 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>
---
web_src/js/features/codeeditor.js | 52 +++++++++++++++++++++++-
web_src/less/_base.less | 2 +
web_src/less/_editor.less | 22 ----------
web_src/less/features/codeeditor.less | 32 +++++++++++++++
web_src/less/index.less | 1 +
web_src/less/themes/theme-arc-green.less | 1 +
6 files changed, 86 insertions(+), 24 deletions(-)
create mode 100644 web_src/less/features/codeeditor.less
diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js
index 3b6864ffe7..f6a50dc8b8 100644
--- a/web_src/js/features/codeeditor.js
+++ b/web_src/js/features/codeeditor.js
@@ -3,6 +3,22 @@ import {basename, extname, isObject, isDarkTheme} from '../utils.js';
const languagesByFilename = {};
const languagesByExt = {};
+const baseOptions = {
+ fontFamily: 'var(--fonts-monospace)',
+ fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
+ links: false,
+ minimap: {enabled: false},
+ occurrencesHighlight: false,
+ overviewRulerLanes: 0,
+ renderIndentGuides: false,
+ renderLineHighlight: 'all',
+ renderLineHighlightOnlyWhenFocus: true,
+ renderWhitespace: 'none',
+ rulers: false,
+ scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
+ scrollBeyondLastLine: false,
+};
+
function getEditorconfig(input) {
try {
return JSON.parse(input.dataset.editorconfig);
@@ -27,7 +43,7 @@ function getLanguage(filename) {
}
function updateEditor(monaco, editor, filename, lineWrapExts) {
- editor.updateOptions({...getFileBasedOptions(filename, lineWrapExts)});
+ editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
const model = editor.getModel();
const language = model.getModeId();
const newLanguage = getLanguage(filename);
@@ -51,9 +67,40 @@ export async function createMonaco(textarea, filename, editorOpts) {
container.className = 'monaco-editor-container';
textarea.parentNode.appendChild(container);
+ // https://github.com/microsoft/monaco-editor/issues/2427
+ const styles = window.getComputedStyle(document.documentElement);
+ const getProp = (name) => styles.getPropertyValue(name).trim();
+
+ monaco.editor.defineTheme('gitea', {
+ base: isDarkTheme() ? 'vs-dark' : 'vs',
+ inherit: true,
+ rules: [
+ {
+ background: getProp('--color-code-bg'),
+ }
+ ],
+ colors: {
+ 'editor.background': getProp('--color-code-bg'),
+ 'editor.foreground': getProp('--color-text'),
+ 'editor.inactiveSelectionBackground': getProp('--color-primary-light-4'),
+ 'editor.lineHighlightBackground': getProp('--color-editor-line-highlight'),
+ 'editor.selectionBackground': getProp('--color-primary-light-3'),
+ 'editor.selectionForeground': getProp('--color-primary-light-3'),
+ 'editorLineNumber.background': getProp('--color-code-bg'),
+ 'editorLineNumber.foreground': getProp('--color-secondary-dark-6'),
+ 'editorWidget.background': getProp('--color-body'),
+ 'editorWidget.border': getProp('--color-secondary'),
+ 'input.background': getProp('--color-input-background'),
+ 'input.border': getProp('--color-input-border'),
+ 'input.foreground': getProp('--color-input-text'),
+ 'scrollbar.shadow': getProp('--color-shadow'),
+ 'progressBar.background': getProp('--color-primary'),
+ }
+ });
+
const editor = monaco.editor.create(container, {
value: textarea.value,
- theme: isDarkTheme() ? 'vs-dark' : 'vs',
+ theme: 'gitea',
language,
...other,
});
@@ -100,6 +147,7 @@ export async function createCodeEditor(textarea, filenameInput, previewFileModes
}
const {monaco, editor} = await createMonaco(textarea, filename, {
+ ...baseOptions,
...getFileBasedOptions(filenameInput.value, lineWrapExts),
...getEditorConfigOptions(editorConfig),
});
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index bbd80c45f7..45d88db5d2 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -106,9 +106,11 @@
--color-markdown-code-block: #00000010;
--color-button: #ffffff;
--color-code-bg: #ffffff;
+ --color-shadow: #00000030;
--color-secondary-bg: #f4f4f4;
--color-expand-button: #d8efff;
--color-placeholder-text: #aaa;
+ --color-editor-line-highlight: var(--color-primary-light-6);
/* backgrounds */
--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>');
--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>');
diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index c23de4f2e0..156430af0e 100644
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -74,25 +74,3 @@
border-left: 1px solid var(--color-secondary) !important;
border-right: 1px solid var(--color-secondary) !important;
}
-
-.monaco-editor-container {
- width: 100%;
- min-height: 200px;
- height: 90vh;
-}
-
-/* overwrite conflicting styles from fomantic */
-.monaco-editor-container .inputarea {
- min-height: 0 !important;
- margin: 0 !important;
- padding: 0 !important;
- resize: none !important;
- border: none !important;
- color: transparent !important;
- background-color: transparent !important;
-}
-
-.edit.githook .monaco-editor-container {
- border: 1px solid var(--color-secondary);
- height: 70vh;
-}
diff --git a/web_src/less/features/codeeditor.less b/web_src/less/features/codeeditor.less
new file mode 100644
index 0000000000..3bd290876f
--- /dev/null
+++ b/web_src/less/features/codeeditor.less
@@ -0,0 +1,32 @@
+.monaco-editor-container {
+ width: 100%;
+ min-height: 200px;
+ height: 90vh;
+}
+
+.edit.githook .monaco-editor-container {
+ border: 1px solid var(--color-secondary);
+ height: 70vh;
+}
+
+/* overwrite conflicting styles from fomantic */
+.monaco-editor-container .inputarea {
+ min-height: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ resize: none !important;
+ border: none !important;
+ color: transparent !important;
+ background-color: transparent !important;
+}
+
+/* these seem unthemeable */
+.monaco-scrollable-element > .scrollbar > .slider {
+ background: var(--color-primary) !important;
+}
+.monaco-scrollable-element > .scrollbar > .slider:hover {
+ background: var(--color-primary-dark-1) !important;
+}
+.monaco-scrollable-element > .scrollbar > .slider:active {
+ background: var(--color-primary-dark-2) !important;
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index ec3008df3b..3fea33a65d 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -6,6 +6,7 @@
@import "./features/animations.less";
@import "./features/heatmap.less";
@import "./features/imagediff.less";
+@import "./features/codeeditor.less";
@import "./markdown/mermaid.less";
@import "./chroma/base.less";
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 2f9bd4a4b1..c7f15e1d1e 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -106,6 +106,7 @@
--color-text-focus: #fff;
--color-expand-button: #3c404d;
--color-placeholder-text: #6a737d;
+ --color-editor-line-highlight: var(--color-primary-light-5);
}
.ui.horizontal.segments > .segment {