Update Gadget:wikieditor-highlight with CodeMirror 6 (#392)

* Update MediaWiki:Gadget-wikieditor-highlight.js using CodeMirror 6 * fix(MediaWiki:Gadget-wikieditor-highlight.js): dynamic import * feat(Gadget-wikieditor-highlight): Update definition.yaml * Delete MediaWiki:Gadget-wikieditor-highlight.css * feat(wikieditor-highlight): default addons * fix(libCachedCode): ES module * refactor(Gadget-wikieditor-highlight.js): localStorage fallback * Update MediaWiki:Gadget-wikieditor-highlight.js * fix(wikieditor-highlight): avoid reusing global CodeMirror * delete temporary gadget
MoegirlPediaInterfaceAdmins · Jan 17, 2024 · cf11a65 · cf11a65
1 parent 95d6cf0
commit cf11a65
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 252 deletions.
diff --git a/src/gadgets/wikieditor-highlight-cm6/MediaWiki:Gadget-wikieditor-highlight-cm6.js b/src/gadgets/wikieditor-highlight-cm6/MediaWiki:Gadget-wikieditor-highlight-cm6.js
diff --git a/src/gadgets/wikieditor-highlight-cm6/definition.yaml b/src/gadgets/wikieditor-highlight-cm6/definition.yaml
diff --git a/src/gadgets/wikieditor-highlight/MediaWiki:Gadget-wikieditor-highlight.css b/src/gadgets/wikieditor-highlight/MediaWiki:Gadget-wikieditor-highlight.css
diff --git a/src/gadgets/wikieditor-highlight/MediaWiki:Gadget-wikieditor-highlight.js b/src/gadgets/wikieditor-highlight/MediaWiki:Gadget-wikieditor-highlight.js
@@ -1,159 +1,71 @@
 "use strict";
 // 本页面大部分内容均直接或间接修改自[[MW:Extension:CodeMirror]]
 (async () => {
-    await $.ready;
     if (!["edit", "submit"].includes(mw.config.get("wgAction")) || mw.config.get("wgPageContentModel") !== "wikitext") {
         return;
     }
+    await $.ready;
 
     const localObjectStorage = new LocalObjectStorage("wikieditor-highlight");
-    let cm, $doc, state = localObjectStorage.getItem("wikieditor-codemirror", false);
+    let cm, state = localObjectStorage.getItem("wikieditor-codemirror", true);
     const $textarea = $("#wpTextbox1");
     const isAdvanced = ["loading", "loaded", "executing", "ready"].includes(mw.loader.getState("ext.wikiEditor"));
     const ns = mw.config.get("wgNamespaceNumber");
+    const lang = ns === 274 ? "html" : "mediawiki";
     const init = async () => {
-        const $search = $(".group-search a");
-        await libCachedCode.batchInjectCachedCode([
-            "https://npm.elemecdn.com/[email protected]/lib/codemirror.css",
-            "https://npm.elemecdn.com/@bhsd/[email protected]/mediawiki.css",
-        ], "style");
-        await libCachedCode.batchInjectCachedCode([
-            "https://npm.elemecdn.com/[email protected]/lib/codemirror.js",
-            // "https://npm.elemecdn.com/[email protected]/addon/edit/matchbrackets.js",
-            // "https://npm.elemecdn.com/[email protected]/matchtags.js",
-        ], "script");
-        await libCachedCode.batchInjectCachedCode([
-            "https://npm.elemecdn.com/@bhsd/[email protected]/mediawiki.js",
-            ...ns === 274 ? [
-                "https://npm.elemecdn.com/[email protected]/mode/javascript/javascript.js",
-                "https://npm.elemecdn.com/[email protected]/mode/css/css.js",
-            ] : [],
-        ], "script");
-        const mwConfig = JSON.parse(await libCachedCode.getCachedCode("https://npm.elemecdn.com/@bhsd/[email protected]/config.json"));
-        if (ns === 274) {
-            $.extend(mwConfig.tags, {
-                script: true, style: true,
-            });
-            $.extend(mwConfig.tagModes, {
-                script: "javascript", style: "css",
+        if (!window.CodeMirror6) {
+            await new Promise((resolve) => {
+                const script = document.createElement("script");
+                script.addEventListener("load", resolve);
+                script.type = "module";
+                script.src = "https://testingcf.jsdelivr.net/npm/@bhsd/codemirror-mediawiki/mw/dist/base.min.js";
+                document.head.append(script);
             });
         }
-        if (isAdvanced) {
-            cm = new CodeMirror($textarea.parent()[0], {
-                mode: "text/mediawiki", mwConfig,
-                lineWrapping: true, lineNumbers: true, readOnly: $textarea.prop("readonly"),
-                matchBrackets: {
-                    bracketRegex: /[{}[\]]/,
-                }, matchTags: true,
-            });
-        } else {
-            cm = CodeMirror.fromTextArea($textarea[0], {
-                mode: "text/mediawiki", mwConfig,
-                lineWrapping: true, lineNumbers: true, readOnly: $textarea.prop("readonly"),
-                matchBrackets: {
-                    bracketRegex: /[{}[\]]/,
-                }, matchTags: true,
-            });
-            cm.setSize(null, $textarea.height());
+        cm = await window.CodeMirror6.fromTextArea($textarea[0], lang);
+        cm.prefer([
+            "highlightSpecialChars",
+            "highlightActiveLine",
+            "highlightWhitespace",
+            "bracketMatching",
+            "closeBrackets",
+        ]);
+        const [config] = await Promise.all([
+            libCachedCode.getCachedCode("https://testingcf.jsdelivr.net/npm/wikiparser-node/config/moegirl.json"),
+            cm.defaultLint(true, {include: ns === 10}),
+        ]);
+        try {
+            window.wikiparse?.setConfig(JSON.parse(config));
+        } catch (e) {
+            console.error(e);
         }
-        mw.hook("wiki-codemirror").fire(cm);
-        $doc = $(cm.getWrapperElement());
-        $.valHooks.textarea = {
-            get: (ele_1) => ele_1 === $textarea[0] && state ? cm.getValue() : ele_1.value,
-            set: (ele_3, val) => {
-                ele_3 === $textarea[0] && state ? cm.setValue(val) : ele_3.value = val;
-            },
-        };
-        if (mw.loader.getState("jquery.ui.resizable") === "ready") {
-            $doc.resizable({
-                handles: "s",
-            });
-        }
-        if ($search.length === 0) {
-            return;
-        }
-        cm.addKeyMap({
-            "Ctrl-F": () => {
-                $search.trigger("click");
-            },
-            "Cmd-F": () => {
-                $search.trigger("click");
-            },
-        });
     };
-    if (state === null || !isAdvanced) {
-        state = true;
-    }
     if (!isAdvanced) {
         init();
         return;
     }
-    const $form = $(document.editform);
     const btn = new OO.ui.ButtonWidget({
         classes: ["tool"], icon: "highlight", framed: false, title: "代码高亮开关",
-    }).on("click", () => {
+    }).on("click", async () => {
         if (cm) {
-            $doc.toggle();
-            // eslint-disable-next-line no-use-before-define
-            update();
+            cm.toggle();
         } else {
-            // eslint-disable-next-line no-use-before-define
-            initAndUpdate();
+            await init();
         }
-    });
-    const fn = {
-        getSelection: () => cm.getSelection(),
-        setSelection: function (options) {
-            cm.setSelection(cm.posFromIndex(options.start), cm.posFromIndex(options.end));
-            cm.focus();
-            return this;
-        },
-        getCaretPosition: (options) => {
-            const caretPos = cm.indexFromPos(cm.getCursor("from")),
-                endPos = cm.indexFromPos(cm.getCursor("to"));
-            if (options.startAndEnd) {
-                return [caretPos, endPos];
-            }
-            return caretPos;
-        },
-        scrollToCaretPosition: function () {
-            cm.scrollIntoView();
-            return this;
-        },
-    };
-    const submit = () => {
-        $textarea[0].value = cm.getValue();
-    };
-    const shared = () => {
         btn.$element.toggleClass("tool-active");
-        if (state) {
-            cm.setValue($textarea[0].value);
-            cm.setSize(null, $textarea.height());
-        } else {
-            $textarea[0].value = cm.getValue();
-        }
-        $textarea.toggle();
-        $form[state ? "on" : "off"]("submit", submit);
-        if ($textarea.textSelection) {
-            $textarea.textSelection(state ? "register" : "unregister", fn);
-        }
-    };
-    const update = () => {
         state = !state;
         localObjectStorage.setItem("wikieditor-codemirror", state);
-        shared();
-    };
-    const initAndUpdate = () => {
-        init().then(update);
-    };
-    const group = $("#wikiEditor-section-main > .group-insert")[0];
+    });
     $textarea.on("wikiEditor-toolbar-doneInitialSections", () => {
         btn.$element.appendTo("#wikiEditor-section-main > .group-insert");
     });
+    const group = $("#wikiEditor-section-main > .group-insert")[0];
     if (group && !group.contains(btn.$element[0])) {
-        $textarea.trigger("wikiEditor-toolbar-doneInitialSections");
+        btn.$element.appendTo(group);
     }
     if (state) {
-        mw.loader.using("ext.wikiEditor").then(init).then(shared);
+        await mw.loader.using("ext.wikiEditor");
+        await init();
+        btn.$element.addClass("tool-active");
     }
 })();
diff --git a/src/gadgets/wikieditor-highlight/definition.yaml b/src/gadgets/wikieditor-highlight/definition.yaml
@@ -33,5 +33,4 @@ _sites:
 _section: editing
 
 _files:
-  - MediaWiki:Gadget-wikieditor-highlight.css
   - MediaWiki:Gadget-wikieditor-highlight.js