1
0

Fix inconsistent and broken monaco editor loading

This commit is contained in:
Illya Marchenko 2022-01-04 01:21:38 +02:00
parent 4b527816ba
commit 93397a164d
3 changed files with 659 additions and 612 deletions

@ -3,7 +3,8 @@
class MonacoEditorHooks {
public static function editPageShowEditFormInitial(EditPage $editpage, OutputPage $output){
$output->addScript('<script type="text/javascript" src="/extensions/MonacoEditor/assets/js/scripts.js"></script>');
$output->addHeadItem('monaco-loader', '<script type="text/javascript" src="/extensions/MonacoEditor/node_modules/monaco-editor/min/vs/loader.js"></script>');
$output->addScript('<script type="text/javascript" src="/extensions/MonacoEditor/assets/js/scripts.js" async></script>');
return true;
}
}

@ -1,7 +1,12 @@
// @see https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance
(function(){
// #REDIRECT [[Main Page]]
// {| valign="top"
// |-
// |<ul><ol start="125"><li>a<li>bb<li>ccc</ol></ul>
// |<ul><ol start="128"><li>ddd<li>ee<li>f</ol></ul>
// |}
let init = function() {
let MediaWikiTokenizer = (function () {
function MediaWikiTokenizer() {
this.ignorecase = true;
@ -17,13 +22,22 @@
// Link reference
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
// Template usage
[/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }],
[/}}/, { token: 'type.type-$1', bracket: '@close' }],
// List usage
[/^\*/, { token: 'list.bullet-$1', bracket: '@open', next: '@listBulletBlock.$1' }],
[/\n/, { token: 'list.bullet-$1', bracket: '@close' }],
[/^[:;]/, { token: 'list.definition-$1', bracket: '@open', next: '@listDefinitionBlock.$1' }],
[/\n/, { token: 'list.definition-$1', bracket: '@close' }],
[/^#/, { token: 'list.numbered-$1', bracket: '@open', next: '@listNumberedBlock.$1' }],
[/\n/, { token: 'list.numbered-$1', bracket: '@close' }],
// Bold & Italic
[/'{5}/, { token: 'bold_italic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
// Bold
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
@ -31,7 +45,16 @@
// Italic
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }],
[/[=]{1,5}.*[=]{1,5}/, "heading"],
[/=[^=]+=/, "heading.1"],
[/==[^==]+==/, "heading.2"],
[/===[^===]+===/, "heading.3"],
[/====[^=====]+====/, "heading.4"],
[/=====[^======]+=====/, "heading.5"],
[/======[^=======]+======/, "heading.6"],
// [/^\*.+/, "list.bullet"],
// [/^[:;].+/, "list.definition"],
// [/^#.+/, "list.numbered"],
// HTML-Style blocks
[/<(\w+)\/>/, 'tag.tag-$1'],
@ -45,31 +68,63 @@
[/&\w+;/, 'string.escape']
],
boldItalicBlock: [
[/'{5}/, { token: "bold_italic.quote", bracket: "@close", next: "@pop" }],
[/[^']{5}/, { token: "bold_italic" }]
[/'{5}/, { token: "bolditalic.quote", bracket: "@close", next: "@pop" }],
[/[^''''']+/, { token: "bolditalic" }]
],
boldBlock: [
[/'{3}/, { token: 'bold.quote', bracket: '@close', next: '@pop' }],
[/[^']{3}/, { token: 'bold' }],
[/[^''']+/, { token: 'bold' }],
// Nested italic + bold, need a style to present both
// [/''/, { token: "italic.quote", bracket: "@open", next: "@italicBlock" }]
[/'{2}/, { token: "italic.quote", bracket: "@open", next: "@italicBlock" }]
],
italicBlock: [
[/'{2}/, { token: "italic.quote", bracket: "@close", next: "@pop" }],
[/[^']{2}/, { token: "italic" }]
[/[^'']+/, { token: "italic" }]
],
linkReferenceBlock: [
[/\]\]/, { token: "string.quote", bracket: "@close", next: "@pop" }],
[/[^\]\]]+/, { token: "string.quote.content" }]
],
linkReferenceSingleBlock: [
[/\]/, { token: "string.quote", bracket: "@close", next: "@pop" }],
[/[^\]]+/, { token: "string.quote.content" }]
],
templateBlock: [
[/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }],
[/}}/, { token: 'type.type-$2', next: '@pop' }],
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/'{5}/, { token: 'bold_italic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
[/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }]
],
listBulletBlock: [
[/\*/, { token: 'list.bullet-$1', bracket: '@open', next: '@listBulletBlock.$1' }],
[/\n/, { token: 'list.bullet-$2', next: '@pop' }],
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
[/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }],
],
listDefinitionBlock: [
[/[:;]/, { token: 'list.definition-$1', bracket: '@open', next: '@listDefinitionBlock.$1' }],
[/\n/, { token: 'list.definition-$2', next: '@pop' }],
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
[/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }],
],
listNumberedBlock: [
[/#/, { token: 'list.numbered-$1', bracket: '@open', next: '@listNumberedBlock.$1' }],
[/\n/, { token: 'list.numbered-$2', next: '@pop' }],
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
[/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }],
],
// Tags
tag: [
[/[ \t\r\n]+/, 'white'],
@ -130,8 +185,9 @@
return MediaWikiTokenizer;
}());
window.require.config({ paths: { 'vs': '/extensions/MonacoEditor/node_modules/monaco-editor/min/vs' }});
window.require(['vs/editor/editor.main'], function() {
require.config({ paths: { vs: '/extensions/MonacoEditor/node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
let el_stock_editor = document.getElementById("wpTextbox1");
el_stock_editor.style.display = "none";
@ -378,17 +434,16 @@
base: 'vs',
inherit: true,
rules: [
{ token: 'heading', foreground: '21a1fc' },
{ token: 'heading', foreground: '0a2bff' },
{ token: 'tag', foreground: '22863a' },
{ token: 'string.quote', foreground: '8e09e0' },
{ token: 'string.quote.content', foreground: '8e09e0' },
{ token: 'bold', fontStyle: 'bold', },
{ token: 'italic', fontStyle: 'italic' },
{ token: 'bold_italic', fontStyle: 'bold italic', foreground: '21a1fc' },
{ token: 'heading', foreground: '21a1fc' },
{ token: 'heading', foreground: '21a1fc' },
{ token: 'heading', foreground: '21a1fc' },
{ token: 'bolditalic', fontStyle: 'bold italic' },
{ token: 'list', foreground: 'ff7c0a' },
// Scraped from https://github.com/braver/vscode-solarized/
// { token: '', foreground: '839496', background: '002b36' },
@ -620,14 +675,3 @@
el_stock_editor.value = window.monaco_editor.getValue();
});
});
};
function initializer() {
if (typeof window.require !== 'undefined') {
init();
} else {
setTimeout(initializer, 20);
}
}
initializer();
})();

4
package-lock.json generated

@ -1,6 +1,8 @@
{
"requires": true,
"name": "mediawiki-monacoeditor",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"monaco-editor": {
"version": "0.20.0",