From 4eea819b2496b849ca8e1e7a6e11fef45e141225 Mon Sep 17 00:00:00 2001 From: silverwind 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 --- 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,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); 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 {