- 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
This commit is contained in:
parent
38d184d518
commit
460093b952
6 changed files with 87 additions and 26 deletions
|
@ -3,6 +3,22 @@ import {basename, extname, isObject, isDarkTheme} from '../utils.js';
|
||||||
const languagesByFilename = {};
|
const languagesByFilename = {};
|
||||||
const languagesByExt = {};
|
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) {
|
function getEditorconfig(input) {
|
||||||
try {
|
try {
|
||||||
return JSON.parse(input.dataset.editorconfig);
|
return JSON.parse(input.dataset.editorconfig);
|
||||||
|
@ -27,7 +43,7 @@ function getLanguage(filename) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateEditor(monaco, editor, filename, lineWrapExts) {
|
function updateEditor(monaco, editor, filename, lineWrapExts) {
|
||||||
editor.updateOptions({...getFileBasedOptions(filename, lineWrapExts)});
|
editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
|
||||||
const model = editor.getModel();
|
const model = editor.getModel();
|
||||||
const language = model.getModeId();
|
const language = model.getModeId();
|
||||||
const newLanguage = getLanguage(filename);
|
const newLanguage = getLanguage(filename);
|
||||||
|
@ -51,9 +67,40 @@ export async function createMonaco(textarea, filename, editorOpts) {
|
||||||
container.className = 'monaco-editor-container';
|
container.className = 'monaco-editor-container';
|
||||||
textarea.parentNode.appendChild(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, {
|
const editor = monaco.editor.create(container, {
|
||||||
value: textarea.value,
|
value: textarea.value,
|
||||||
theme: isDarkTheme() ? 'vs-dark' : 'vs',
|
theme: 'gitea',
|
||||||
language,
|
language,
|
||||||
...other,
|
...other,
|
||||||
});
|
});
|
||||||
|
@ -100,6 +147,7 @@ export async function createCodeEditor(textarea, filenameInput, previewFileModes
|
||||||
}
|
}
|
||||||
|
|
||||||
const {monaco, editor} = await createMonaco(textarea, filename, {
|
const {monaco, editor} = await createMonaco(textarea, filename, {
|
||||||
|
...baseOptions,
|
||||||
...getFileBasedOptions(filenameInput.value, lineWrapExts),
|
...getFileBasedOptions(filenameInput.value, lineWrapExts),
|
||||||
...getEditorConfigOptions(editorConfig),
|
...getEditorConfigOptions(editorConfig),
|
||||||
});
|
});
|
||||||
|
|
|
@ -103,13 +103,14 @@
|
||||||
--color-menu: #ffffff;
|
--color-menu: #ffffff;
|
||||||
--color-card: #ffffff;
|
--color-card: #ffffff;
|
||||||
--color-markdown-table-row: #00000008;
|
--color-markdown-table-row: #00000008;
|
||||||
--color-markdown-code-block: #00000008;
|
--color-markdown-code-block: #00000010;
|
||||||
--color-button: #ffffff;
|
--color-button: #ffffff;
|
||||||
--color-code-bg: #ffffff;
|
--color-code-bg: #ffffff;
|
||||||
--color-markdown-code-block: #00000010;
|
--color-shadow: #00000030;
|
||||||
--color-secondary-bg: #f4f4f4;
|
--color-secondary-bg: #f4f4f4;
|
||||||
--color-expand-button: #d8efff;
|
--color-expand-button: #d8efff;
|
||||||
--color-placeholder-text: #aaa;
|
--color-placeholder-text: #aaa;
|
||||||
|
--color-editor-line-highlight: var(--color-primary-light-6);
|
||||||
/* backgrounds */
|
/* 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-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>');
|
--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-left: 1px solid var(--color-secondary) !important;
|
||||||
border-right: 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;
|
|
||||||
}
|
|
||||||
|
|
32
web_src/less/features/codeeditor.less
Normal file
32
web_src/less/features/codeeditor.less
Normal file
|
@ -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/animations.less";
|
||||||
@import "./features/heatmap.less";
|
@import "./features/heatmap.less";
|
||||||
@import "./features/imagediff.less";
|
@import "./features/imagediff.less";
|
||||||
|
@import "./features/codeeditor.less";
|
||||||
@import "./markdown/mermaid.less";
|
@import "./markdown/mermaid.less";
|
||||||
|
|
||||||
@import "./chroma/base.less";
|
@import "./chroma/base.less";
|
||||||
|
|
|
@ -106,6 +106,7 @@
|
||||||
--color-text-focus: #fff;
|
--color-text-focus: #fff;
|
||||||
--color-expand-button: #3c404d;
|
--color-expand-button: #3c404d;
|
||||||
--color-placeholder-text: #6a737d;
|
--color-placeholder-text: #6a737d;
|
||||||
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.horizontal.segments > .segment {
|
.ui.horizontal.segments > .segment {
|
||||||
|
|
Reference in a new issue