- 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>tags/v1.15.0-rc1
@@ -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), | |||
}); |
@@ -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>'); |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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"; |
@@ -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 { |