stuzer05/mediawiki-extensions-monaco-editor
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix inconsistent and broken monaco editor loading

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
MonacoEditorHooks.php
View File

@ -3,7 +3,8 @@
class MonacoEditorHooks { class MonacoEditorHooks {
public static function editPageShowEditFormInitial(EditPage $editpage, OutputPage $output){ 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; return true;
} }
} }

106
assets/js/scripts.js
View File

@ -1,8 +1,13 @@
// @see https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance // @see https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance
(function(){ // #REDIRECT [[Main Page]]
let init = function() { // {| valign="top"
let MediaWikiTokenizer = (function () { // |-
// |<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 MediaWikiTokenizer = (function () {
function MediaWikiTokenizer() { function MediaWikiTokenizer() {
this.ignorecase = true; this.ignorecase = true;
this.empty = [ this.empty = [
@ -17,13 +22,22 @@
// Link reference // Link reference
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }], [/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }],
[/\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceSingleBlock' }],
// Template usage // Template usage
[/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }], [/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }],
[/}}/, { token: 'type.type-$1', bracket: '@close' }], [/}}/, { 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 // Bold & Italic
[/'{5}/, { token: 'bold_italic.quote', bracket: '@open', next: '@boldItalicBlock' }], [/'{5}/, { token: 'bolditalic.quote', bracket: '@open', next: '@boldItalicBlock' }],
// Bold // Bold
[/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }], [/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
@ -31,7 +45,16 @@
// Italic // Italic
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }], [/'{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 // HTML-Style blocks
[/<(\w+)\/>/, 'tag.tag-$1'], [/<(\w+)\/>/, 'tag.tag-$1'],
@ -45,31 +68,63 @@
[/&\w+;/, 'string.escape'] [/&\w+;/, 'string.escape']
], ],
boldItalicBlock: [ boldItalicBlock: [
[/'{5}/, { token: "bold_italic.quote", bracket: "@close", next: "@pop" }], [/'{5}/, { token: "bolditalic.quote", bracket: "@close", next: "@pop" }],
[/[^']{5}/, { token: "bold_italic" }] [/[^''''']+/, { token: "bolditalic" }]
], ],
boldBlock: [ boldBlock: [
[/'{3}/, { token: 'bold.quote', bracket: '@close', next: '@pop' }], [/'{3}/, { token: 'bold.quote', bracket: '@close', next: '@pop' }],
[/[^']{3}/, { token: 'bold' }], [/[^''']+/, { token: 'bold' }],
// Nested italic + bold, need a style to present both // 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: [ italicBlock: [
[/'{2}/, { token: "italic.quote", bracket: "@close", next: "@pop" }], [/'{2}/, { token: "italic.quote", bracket: "@close", next: "@pop" }],
[/[^']{2}/, { token: "italic" }] [/[^'']+/, { token: "italic" }]
], ],
linkReferenceBlock: [ linkReferenceBlock: [
[/\]\]/, { token: "string.quote", bracket: "@close", next: "@pop" }], [/\]\]/, { token: "string.quote", bracket: "@close", next: "@pop" }],
[/[^\]\]]+/, { token: "string.quote.content" }] [/[^\]\]]+/, { token: "string.quote.content" }]
], ],
linkReferenceSingleBlock: [
[/\]/, { token: "string.quote", bracket: "@close", next: "@pop" }],
[/[^\]]+/, { token: "string.quote.content" }]
],
templateBlock: [ templateBlock: [
[/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }], [/{{/, { token: 'type.type-$1', bracket: '@open', next: '@templateBlock.$1' }],
[/}}/, { token: 'type.type-$2', next: '@pop' }], [/}}/, { token: 'type.type-$2', next: '@pop' }],
[/\[\[/, { token: 'string.quote', bracket: '@open', next: '@linkReferenceBlock' }], [/\[\[/, { 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' }], [/'{3}/, { token: 'bold.quote', bracket: '@open', next: '@boldBlock' }],
[/'{2}/, { token: 'italic.quote', bracket: '@open', next: '@italicBlock' }] [/'{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 // Tags
tag: [ tag: [
[/[ \t\r\n]+/, 'white'], [/[ \t\r\n]+/, 'white'],
@ -128,10 +183,11 @@
this.tokenPostfix = ""; this.tokenPostfix = "";
} }
return MediaWikiTokenizer; return MediaWikiTokenizer;
}()); }());
window.require.config({ paths: { 'vs': '/extensions/MonacoEditor/node_modules/monaco-editor/min/vs' }}); require.config({ paths: { vs: '/extensions/MonacoEditor/node_modules/monaco-editor/min/vs' } });
window.require(['vs/editor/editor.main'], function() {
require(['vs/editor/editor.main'], function () {
let el_stock_editor = document.getElementById("wpTextbox1"); let el_stock_editor = document.getElementById("wpTextbox1");
el_stock_editor.style.display = "none"; el_stock_editor.style.display = "none";
@ -378,17 +434,16 @@
base: 'vs', base: 'vs',
inherit: true, inherit: true,
rules: [ rules: [
{ token: 'heading', foreground: '21a1fc' }, { token: 'heading', foreground: '0a2bff' },
{ token: 'tag', foreground: '22863a' }, { token: 'tag', foreground: '22863a' },
{ token: 'string.quote', foreground: '8e09e0' }, { token: 'string.quote', foreground: '8e09e0' },
{ token: 'string.quote.content', foreground: '8e09e0' }, { token: 'string.quote.content', foreground: '8e09e0' },
{ token: 'bold', fontStyle: 'bold', }, { token: 'bold', fontStyle: 'bold', },
{ token: 'italic', fontStyle: 'italic' }, { token: 'italic', fontStyle: 'italic' },
{ token: 'bold_italic', fontStyle: 'bold italic', foreground: '21a1fc' }, { token: 'bolditalic', fontStyle: 'bold italic' },
{ token: 'heading', foreground: '21a1fc' },
{ token: 'heading', foreground: '21a1fc' }, { token: 'list', foreground: 'ff7c0a' },
{ token: 'heading', foreground: '21a1fc' },
// Scraped from https://github.com/braver/vscode-solarized/ // Scraped from https://github.com/braver/vscode-solarized/
// { token: '', foreground: '839496', background: '002b36' }, // { token: '', foreground: '839496', background: '002b36' },
@ -619,15 +674,4 @@
el_btn_save.addEventListener('click', event => { el_btn_save.addEventListener('click', event => {
el_stock_editor.value = window.monaco_editor.getValue(); 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
View File

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