Add wikitext support to monaco (#54)

* fix(monaco): font color for intellisense * feat(monaco): wikitext support
inpageedit · Apr 3, 2024 · afd6c32 · afd6c32
1 parent 9b41074
commit afd6c32
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/index.json b/src/index.json
@@ -30,7 +30,7 @@
   },
   "monaco/script.js": {
     "name": "Monaco Editor",
-    "description": "Provides the advanced editor VSCode is using. Currently supported languages: CSS, JavaScript, JSON, Lua. [!] In conflict with CodeMirror. ([https://github.com/inpageedit/plugins/blob/HEAD/src/plugins/monaco/README.md More info])",
+    "description": "Provides the advanced editor VSCode is using. Currently supported languages: Wikitext, CSS, JavaScript, JSON, Lua. [!] In conflict with CodeMirror. ([https://github.com/inpageedit/plugins/blob/HEAD/src/plugins/monaco/README.md More info])",
     "author": "InPageEdit"
   },
   "color-preview.js": {

diff --git a/src/plugins/monaco/README.md b/src/plugins/monaco/README.md
@@ -4,6 +4,7 @@ This plugin adds a Monaco Editor to the InPageEdit.
 
 ## Supported content models
 
+- Wikitext
 - CSS
 - JavaScript
 - JSON

diff --git a/src/plugins/monaco/script.js b/src/plugins/monaco/script.js
@@ -1,8 +1,10 @@
 /**
  * MediaWiki Gadget MonacoEditor
  * @author Dragon-Fish <dragon-fish@qq.com>
+ * @author Bhsd <https://github.com/bhsd-harry>
  * @license MIT
  */
+mw.loader.addStyleTag('.monaco-hover-content code{color:inherit}')
 mw.hook('InPageEdit.quickEdit').add(
   /**
    * hook payload
@@ -16,9 +18,9 @@ mw.hook('InPageEdit.quickEdit').add(
       const language = getLangFromContentModel(
         $modalTitle.find('.editPage').text()
       )
-      if (!textarea || !language) {
+      if (!textarea) {
         return console.warn(
-          'Missing textarea or language not supported yet.',
+          'Missing textarea.',
           textarea,
           language
         )
@@ -81,10 +83,15 @@ importScripts('${MONACO_CDN_BASE}/vs/${path}')
           vs: `${MONACO_CDN_BASE}/vs`,
         },
       })
-      require(['vs/editor/editor.main'], () => {
+      require(['vs/editor/editor.main'], async () => {
         const monaco = window.monaco
         mw.hook('InPageEdit.monaco').fire(monaco)
 
+        if (language === 'wikitext' && !monaco.languages.getEncodedLanguageId('wikitext')) {
+          const { default: registerWiki } = await import(`${MONACO_CDN_BASE.split('/monaco-editor', 1)[0]}/monaco-wiki`)
+          registerWiki(monaco)
+        }
+
         const container = document.createElement('div')
         container.classList.add('inpageedit-monaco')
         container.style.width = '100%'
@@ -93,12 +100,18 @@ importScripts('${MONACO_CDN_BASE}/vs/${path}')
         $modalContent.hide()
 
         const model = monaco.editor.createModel(initialValue, language)
-        const editor = monaco.editor.create(container, {
+        const opt = {
           model,
           automaticLayout: true,
           theme: 'vs-dark',
           tabSize: 2,
-        })
+        }
+        if (language === 'wikitext') {
+          opt.unicodeHighlight = {
+            ambiguousCharacters: false
+          }
+        }
+        const editor = monaco.editor.create(container, opt)
 
         // Initialize content from textarea
         let contentInitialized = !!initialValue
@@ -169,7 +182,7 @@ importScripts('${MONACO_CDN_BASE}/vs/${path}')
         } else if (ext === 'json') {
           return 'json'
         }
-        return null
+        return 'wikitext'
       }
 
       /**