Desktop: Load all codemirror modes for syntax highlighting

[CalebJohn]

I know the best option here would be to only add the languages that are specifically enabled for highlight.js in Joplin. But this was the easier and supports more languages. If we want to support the same languages between editor and render (on desktop), it would be possible to swap out highlight.js with codemirror. Personally I don't think it's an issue.

[laurent22]

I've done a few tests and in my case it was about 450ms to load everything, which I think is too high given that we're loading many languages that are not so useful. My MacBook is quite recent as well so users on older computers might have a second delay or more.

So I've tried to change the code to load only the top languages from this page: http://pypl.github.io/PYPL.html and it went to about 50ms to load just these so I'd prefer if we go for this approach. In fact the ideal solution would be to package all these languages in one JS file which can be loaded in one go. It would probably go down to 10ms or less but if there's no easy way to automate this, we can just load them separately.

For info this is how I've change the code:

// Based on http://pypl.github.io/PYPL.html
// +XML (HTML) and Markdown added
const topLanguages = [
	'python',
	'clike',
	'javascript',
	'jsx',
	'php',
	'r',
	'swift',
	'go',
	'vb',
	'vbscript',
	'ruby',
	'rust',
	'dart',
	'lua',
	'groovy',
	'perl',
	'cobol',
	'julia',
	'haskell',
	'pascal',
	'xml',
	'markdown',
];

for (let i = 0; i < topLanguages.length; i++) {
	const mode = topLanguages[i];
	require(`codemirror/mode/${mode}/${mode}`);
}

Let me know what you think or if you see any issue with this approach.

[CalebJohn]

This makes sense, particularly because the Joplin version of highlight.js only supports a specific set of languages anyway. Perhaps we could store the list of top languages in a setting (that isn't user facing?) This way plugin developers would have the ability to modify the loaded modes for users who want that.

If that makes sense, I can update this pull accordingly (or feel free since you know more about the impending plugin system).

[laurent22]

This makes sense, particularly because the Joplin version of highlight.js only supports a specific set of languages anyway. Perhaps we could store the list of top languages in a setting (that isn't user facing?) This way plugin developers would have the ability to modify the loaded modes for users who want that.

For this kind of thing, there will be the concept of filters in plugin system as is done here for example: https://github.com/laurent22/joplin/pull/3257/files#diff-460ba17b94ebf6f80fade51620e549d3R171 In that case, we could for example emit a "codeMirrorModes" filter to allow plugin developers to add more modes:

const extraModes = eventManager.filterEmit('codeMirrorModes');

But we can deal with this later. For now if you could simply integrate the top languages to your PR that would be great, also please add CSS as I see it's missing.

Also also check that whatever language we pass actually exist in CodeMirror before requiring the mode. This is just in case they change how a mode is called (although I guess it's unlikely they'll do this without mentioning the breaking change).

[CalebJohn]

@laurent this should be good now!

[laurent22]

Perfect, thanks @CalebJohn!