123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- 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
- guides: {bracketPairs: false, indentation: false},
- links: false,
- minimap: {enabled: false},
- occurrencesHighlight: false,
- overviewRulerLanes: 0,
- renderLineHighlight: 'all',
- renderLineHighlightOnlyWhenFocus: true,
- renderWhitespace: 'none',
- rulers: false,
- scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
- scrollBeyondLastLine: false,
- };
-
- function getEditorconfig(input) {
- try {
- return JSON.parse(input.getAttribute('data-editorconfig'));
- } catch {
- return null;
- }
- }
-
- function initLanguages(monaco) {
- for (const {filenames, extensions, id} of monaco.languages.getLanguages()) {
- for (const filename of filenames || []) {
- languagesByFilename[filename] = id;
- }
- for (const extension of extensions || []) {
- languagesByExt[extension] = id;
- }
- }
- }
-
- function getLanguage(filename) {
- return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
- }
-
- function updateEditor(monaco, editor, filename, lineWrapExts) {
- editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
- const model = editor.getModel();
- const language = model.getLanguageId();
- const newLanguage = getLanguage(filename);
- if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
- }
-
- // export editor for customization - https://github.com/go-gitea/gitea/issues/10409
- function exportEditor(editor) {
- if (!window.codeEditors) window.codeEditors = [];
- if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
- }
-
- export async function createMonaco(textarea, filename, editorOpts) {
- const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
-
- initLanguages(monaco);
- let {language, ...other} = editorOpts;
- if (!language) language = getLanguage(filename);
-
- const container = document.createElement('div');
- 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: 'gitea',
- language,
- ...other,
- });
-
- const model = editor.getModel();
- model.onDidChangeContent(() => {
- textarea.value = editor.getValue();
- textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
- });
-
- window.addEventListener('resize', () => {
- editor.layout();
- });
-
- exportEditor(editor);
-
- const loading = document.querySelector('.editor-loading');
- if (loading) loading.remove();
-
- return {monaco, editor};
- }
-
- function getFileBasedOptions(filename, lineWrapExts) {
- return {
- wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
- };
- }
-
- export async function createCodeEditor(textarea, filenameInput, previewFileModes) {
- const filename = basename(filenameInput.value);
- const previewLink = document.querySelector('a[data-tab=preview]');
- const markdownExts = (textarea.getAttribute('data-markdown-file-exts') || '').split(',');
- const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
- const isMarkdown = markdownExts.includes(extname(filename));
- const editorConfig = getEditorconfig(filenameInput);
-
- if (previewLink) {
- if (isMarkdown && (previewFileModes || []).includes('markdown')) {
- const newUrl = (previewLink.getAttribute('data-url') || '').replace(/(.*)\/.*/i, `$1/markdown`);
- previewLink.setAttribute('data-url', newUrl);
- previewLink.style.display = '';
- } else {
- previewLink.style.display = 'none';
- }
- }
-
- const {monaco, editor} = await createMonaco(textarea, filename, {
- ...baseOptions,
- ...getFileBasedOptions(filenameInput.value, lineWrapExts),
- ...getEditorConfigOptions(editorConfig),
- });
-
- filenameInput.addEventListener('keyup', () => {
- const filename = filenameInput.value;
- updateEditor(monaco, editor, filename, lineWrapExts);
- });
-
- return editor;
- }
-
- function getEditorConfigOptions(ec) {
- if (!isObject(ec)) return {};
-
- const opts = {};
- opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
- if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
- if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
- if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)];
- opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
- opts.insertSpaces = ec.indent_style === 'space';
- opts.useTabStops = ec.indent_style === 'tab';
- return opts;
- }
|