-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
Switch code editor to Monaco #11366
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Switch code editor to Monaco #11366
Changes from all commits
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
1f3dbed
Switch code editor to Monaco
silverwind c752908
inline editorconfig, fix diff, use for markdown, remove more dead code
silverwind e98b1c9
refactors, remove jquery usage
silverwind 61702bb
use tab_width
silverwind 0529866
fix intellisense
silverwind ec541d0
rename function for clarity
silverwind 800b871
misc tweaks, enable webpack progress display
silverwind 201dc7b
only use --progress on dev build
silverwind 7620465
remove useless borders in arc-green
silverwind f0becfe
fix typo
silverwind 749116c
remove obsolete comment
silverwind 1ab5997
small refactor
silverwind c8b3fb2
fix file creation and various refactors
silverwind b88e4f9
unset useTabStops too when no editorconfig
silverwind 09d6f0a
small refactor
silverwind 48d4a94
disable webpack's [big] warnings
silverwind 686eadf
remove useless await
silverwind 91c1265
fix dark theme check
silverwind d992c88
rename chunk to 'monaco'
silverwind 4eff6cf
add to .gitignore and delete webpack dest before build
silverwind 89d2b55
increase editor height
silverwind a671949
support more editorconfig properties
silverwind acc4657
remove empty element filter
silverwind 7e8a3b4
rename
silverwind 0a641bd
Merge branch 'master' into monaco
jolheiser File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import {basename, extname, isObject, isDarkTheme} from '../utils.js'; | ||
|
|
||
| const languagesByFilename = {}; | ||
| const languagesByExt = {}; | ||
|
|
||
| function getEditorconfig(input) { | ||
| try { | ||
| return JSON.parse(input.dataset.editorconfig); | ||
| } catch (_err) { | ||
| 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, filenameInput) { | ||
| const newFilename = filenameInput.value; | ||
| editor.updateOptions(getOptions(filenameInput)); | ||
| const model = editor.getModel(); | ||
| const language = model.getModeId(); | ||
| const newLanguage = getLanguage(newFilename); | ||
| if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage); | ||
| } | ||
|
|
||
| export async function createCodeEditor(textarea, filenameInput, previewFileModes) { | ||
| const filename = basename(filenameInput.value); | ||
| const previewLink = document.querySelector('a[data-tab=preview]'); | ||
| const markdownExts = (textarea.dataset.markdownFileExts || '').split(','); | ||
| const lineWrapExts = (textarea.dataset.lineWrapExtensions || '').split(','); | ||
| const isMarkdown = markdownExts.includes(extname(filename)); | ||
|
|
||
| if (previewLink) { | ||
| if (isMarkdown && (previewFileModes || []).includes('markdown')) { | ||
| previewLink.dataset.url = previewLink.dataset.url.replace(/(.*)\/.*/i, `$1/markdown`); | ||
| previewLink.style.display = ''; | ||
| } else { | ||
| previewLink.style.display = 'none'; | ||
| } | ||
| } | ||
|
|
||
| const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor'); | ||
| initLanguages(monaco); | ||
|
|
||
| const container = document.createElement('div'); | ||
| container.className = 'monaco-editor-container'; | ||
| textarea.parentNode.appendChild(container); | ||
|
|
||
| const editor = monaco.editor.create(container, { | ||
| value: textarea.value, | ||
| language: getLanguage(filename), | ||
| ...getOptions(filenameInput, lineWrapExts), | ||
| }); | ||
|
|
||
| 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(); | ||
| }); | ||
|
|
||
| filenameInput.addEventListener('keyup', () => { | ||
| updateEditor(monaco, editor, filenameInput); | ||
| }); | ||
|
|
||
| const loading = document.querySelector('.editor-loading'); | ||
| if (loading) loading.remove(); | ||
|
|
||
| return editor; | ||
| } | ||
|
|
||
| function getOptions(filenameInput, lineWrapExts) { | ||
| const ec = getEditorconfig(filenameInput); | ||
| const theme = isDarkTheme() ? 'vs-dark' : 'vs'; | ||
| const wordWrap = (lineWrapExts || []).includes(extname(filenameInput.value)) ? 'on' : 'off'; | ||
|
|
||
| const opts = {theme, wordWrap}; | ||
| if (isObject(ec)) { | ||
| 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; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How to handle non-login user?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think anonymous users have access to code edditor
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
he's right, condition should be improved as even unsigned users should have a theme, just not in this variable. Right now it does not matter but I want to move the theme to CSS variables using this class so it has to work then.