@bhsd/codemirror-mediawiki 3.9.1 → 3.10.0

package/dist/mwConfig.js

@@ -149,7 +149,7 @@ var getMwConfig = async (modes) => {
     config = getStaticMwConfig(parserConfig, modes);
   } else {
     await mw.loader.using("mediawiki.api");
-    const { query: { general: { variants }, magicwords, extensiontags, functionhooks, variables } } = await new mw.Api().get({
+    const { query: { general: { variants, langconversion }, magicwords, extensiontags, functionhooks, variables } } = await new mw.Api().get({
       meta: "siteinfo",
       siprop: [
         "general",
@@ -185,7 +185,7 @@ var getMwConfig = async (modes) => {
     Object.assign(config, {
       ...getKeywords(magicwords, true),
       tagModes: modes,
-      variants: getVariants(variants),
+      variants: langconversion ? getVariants(variants) : [],
       urlProtocols: mw.config.get("wgUrlProtocols").replace(/\\:/gu, ":")
     });
     (_b = config.variableIDs) != null ? _b : config.variableIDs = variables;

package/dist/openLinks.d.ts

@@ -2,6 +2,8 @@ import { EditorView } from '@codemirror/view';
 import type { Extension } from '@codemirror/state';
 import type { CodeMirror6 } from './codemirror';
 import type { MwConfig } from './token';
-export declare const mouseEventListener: (e: MouseEvent, view: EditorView, langConfig: MwConfig | undefined) => string | undefined;
-declare const _default: ({ langConfig }: CodeMirror6) => Extension;
+declare type ISBNParser = (link: string) => string;
+export declare const getISBNParser: (articlePath?: string) => ISBNParser | undefined;
+export declare const mouseEventListener: (e: MouseEvent, view: EditorView, isbnParser?: ISBNParser, titleParser?: MwConfig["titleParser"]) => string | undefined;
+declare const _default: (articlePath?: string) => ({ langConfig }: CodeMirror6) => Extension;
 export default _default;

package/dist/openLinks.js

@@ -3,42 +3,27 @@ import { ensureSyntaxTree } from '@codemirror/language';
 import { tokens } from './config.js';
 import { isMac } from './constants.js';
 import { hasTag } from './util.js';
-const modKey = isMac ? 'metaKey' : 'ctrlKey', key = isMac ? 'Meta' : 'Control', tags = ['extLinkProtocol', 'extLink', 'freeExtLinkProtocol', 'freeExtLink', 'magicLink', 'pageName'], links = ['extlink-protocol', 'extlink', 'free-extlink-protocol', 'free-extlink', 'magic-link'], pagename = '.cm-mw-pagename', wikiLinks = [
+const tags = ['extLinkProtocol', 'extLink', 'freeExtLinkProtocol', 'freeExtLink', 'magicLink', 'pageName'], links = ['extlink-protocol', 'extlink', 'free-extlink-protocol', 'free-extlink', 'magic-link'], pagename = '.cm-mw-pagename', wikiLinks = [
     'template-name',
     'link-pagename',
     `parserfunction${pagename}`,
     `exttag-attribute-value${pagename}`,
     `file-text${pagename}`,
-];
-const toggleOpenLinks = (toggle) => {
-    for (const ele of document.querySelectorAll('.cm-content')) {
-        if (toggle) {
-            ele.style.setProperty('--codemirror-cursor', 'pointer');
-        }
-        else {
-            ele.style.removeProperty('--codemirror-cursor');
-        }
-    }
+], modKey = isMac ? 'metaKey' : 'ctrlKey', key = isMac ? 'Meta' : 'Control';
+const toggleOpenLinks = ({ contentDOM }, toggle) => {
+    contentDOM.style[toggle ? 'setProperty' : 'removeProperty']('--codemirror-cursor', 'pointer');
 };
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-globalThis.document?.addEventListener('keydown', e => {
-    if (e.key === key) {
-        toggleOpenLinks(true);
-    }
-});
-globalThis.document?.addEventListener('keyup', e => {
-    if (e.key === key) {
-        toggleOpenLinks();
-    }
-});
-globalThis.document?.addEventListener('visibilitychange', () => {
-    if (document.hidden) {
-        toggleOpenLinks();
-    }
-});
-/* eslint-enable @typescript-eslint/no-unnecessary-condition */
 const wrapURL = (url) => url.startsWith('//') ? location.protocol + url : url;
-export const mouseEventListener = (e, view, langConfig) => {
+export const getISBNParser = (articlePath) => articlePath
+    ? (link) => {
+        const page = `Special:Booksources/${link.slice(4).replace(/[\p{Zs}\t-]/gu, '')
+            .replace(/x$/u, 'X')}`;
+        return articlePath.includes('$1')
+            ? articlePath.replace('$1', page)
+            : articlePath + (articlePath.endsWith('/') ? '' : '/') + page;
+    }
+    : undefined;
+export const mouseEventListener = (e, view, isbnParser, titleParser) => {
     if (!e[modKey]
         || !(e.target instanceof Element && getComputedStyle(e.target).textDecorationLine === 'underline')) {
         return undefined;
@@ -62,8 +47,8 @@ export const mouseEventListener = (e, view, langConfig) => {
     if (name.includes('-extlink-protocol')) {
         return wrapURL(state.sliceDoc(from, node.nextSibling.to));
     }
-    else if (name.includes(tokens.pageName) && typeof langConfig?.titleParser === 'function') {
-        return langConfig.titleParser(state, node);
+    else if (name.includes(tokens.pageName) && typeof titleParser === 'function') {
+        return titleParser(state, node);
     }
     else if (/-extlink(?:_|$)/u.test(name)) {
         return wrapURL(state.sliceDoc(node.prevSibling.from, to));
@@ -76,30 +61,47 @@ export const mouseEventListener = (e, view, langConfig) => {
         else if (link.startsWith('PMID')) {
             return `https://pubmed.ncbi.nlm.nih.gov/${link.slice(4).trim()}`;
         }
-        else if (typeof langConfig?.isbnParser === 'function') {
-            return langConfig.isbnParser(link);
-        }
+        return isbnParser?.(link);
     }
     return undefined;
 };
-export default ({ langConfig }) => [
-    EditorView.domEventHandlers({
-        mousedown(e, view) {
-            if (e.button !== 0) {
+export default (articlePath) => ({ langConfig }) => {
+    const isbnParser = getISBNParser(articlePath || langConfig?.articlePath);
+    return [
+        EditorView.domEventHandlers({
+            mousedown(e, view) {
+                if (e.button !== 0) {
+                    return undefined;
+                }
+                const url = mouseEventListener(e, view, isbnParser, langConfig?.titleParser);
+                if (url) {
+                    open(url, '_blank', 'noreferrer');
+                    return true;
+                }
                 return undefined;
-            }
-            const url = mouseEventListener(e, view, langConfig);
-            if (url) {
-                open(url, '_blank', 'noopener noreferrer');
-                return true;
-            }
-            return undefined;
-        },
-    }),
-    EditorView.theme({
-        [[...links, ...langConfig?.titleParser ? wikiLinks : []]
-            .map(type => `.cm-mw-${type}`).join()]: {
-            cursor: 'var(--codemirror-cursor)',
-        },
-    }),
-];
+            },
+            keydown(e, view) {
+                if (e.key === key) {
+                    toggleOpenLinks(view, true);
+                }
+            },
+            keyup(e, view) {
+                if (e.key === key) {
+                    toggleOpenLinks(view);
+                }
+            },
+            mousemove(e, view) {
+                toggleOpenLinks(view, e[modKey]);
+            },
+        }),
+        EditorView.theme({
+            [[
+                ...links,
+                ...langConfig?.titleParser ? wikiLinks : [],
+            ]
+                .map(type => `.cm-mw-${type}`).join()]: {
+                cursor: 'var(--codemirror-cursor)',
+            },
+        }),
+    ];
+};

package/dist/ref.d.ts

@@ -1,4 +1,4 @@
 import type { Extension } from '@codemirror/state';
 import type { CodeMirror6 } from './codemirror';
-declare const _default: (cm: CodeMirror6) => Extension;
+declare const _default: (articlePath?: string) => (cm: CodeMirror6) => Extension;
 export default _default;

package/dist/ref.js

@@ -6,109 +6,108 @@ import elt from 'crelt';
 import { base } from './constants.js';
 import { tokens } from './config.js';
 import { getTag } from './matchTag.js';
-import { indexToPos, posToIndex, escHTML, } from './util.js';
+import { sliceDoc, indexToPos, posToIndex, escHTML, toConfigGetter, } from './util.js';
 const trees = new WeakMap(), selector = '.cm-tooltip-ref', noDef = '.cm-tooltip-no-def';
 /**
  * 获取节点内容
  * @param state
  * @param node 语法树节点
- * @param node.from 起始位置
- * @param node.to 结束位置
  */
-const getName = (state, { from, to }) => state.sliceDoc(from, to).trim();
-export default (cm) => [
-    hoverTooltip(async (view, pos, side) => {
-        const { state } = view, node = ensureSyntaxTree(state, pos)?.resolve(pos, side);
-        if (node && /-exttag-(?!bracket)/u.test(node.name)) {
-            const tag = getTag(state, node);
-            if (!tag) {
-                return null;
-            }
-            const { name, selfClosing, first, last, to } = tag;
-            if (name === 'ref' && selfClosing) {
-                let prevSibling = last, nextSibling = null;
-                while (prevSibling && prevSibling.from > first.to) {
-                    const key = getName(state, prevSibling);
-                    if (prevSibling.name.split('_').includes(tokens.extTagAttribute)
-                        && /(?:^|\s)name(?:$|[\s=])/iu.test(key)) {
-                        if (/(?:^|\s)name\s*=/iu.test(key)) {
-                            ({ nextSibling } = prevSibling);
-                        }
-                        break;
-                    }
-                    ({ prevSibling } = prevSibling);
+const getName = (state, node) => sliceDoc(state, node).trim();
+export default (articlePath) => (cm) => {
+    return [
+        hoverTooltip(async (view, pos, side) => {
+            const { state } = view, node = ensureSyntaxTree(state, pos)?.resolve(pos, side);
+            if (node && /-exttag-(?!bracket)/u.test(node.name)) {
+                const tag = getTag(state, node);
+                if (!tag) {
+                    return null;
                 }
-                if (nextSibling?.name.includes(tokens.extTagAttributeValue)) {
-                    let target = getName(state, nextSibling);
-                    const quote = target.charAt(0);
-                    if (quote === '"' || quote === "'") {
-                        target = target.slice(1, target.slice(-1) === quote ? -1 : undefined).trim();
+                const { name, selfClosing, first, last, to } = tag;
+                if (name === 'ref' && selfClosing) {
+                    let prevSibling = last, nextSibling = null;
+                    while (prevSibling && prevSibling.from > first.to) {
+                        const key = getName(state, prevSibling);
+                        if (prevSibling.name.split('_').includes(tokens.extTagAttribute)
+                            && /(?:^|\s)name(?:$|[\s=])/iu.test(key)) {
+                            if (/(?:^|\s)name\s*=/iu.test(key)) {
+                                ({ nextSibling } = prevSibling);
+                            }
+                            break;
+                        }
+                        ({ prevSibling } = prevSibling);
                     }
-                    if (target) {
-                        const { doc } = state, ref = await getLSP(view, false, cm.getWikiConfig, base.CDN)
-                            ?.provideDefinition(doc.toString(), indexToPos(doc, first.to));
-                        return {
-                            pos,
-                            end: to,
-                            above: true,
-                            create() {
-                                const dom = elt('div', { class: selector.slice(1) });
-                                dom.style.font = getComputedStyle(view.contentDOM).font;
-                                if (ref) {
-                                    const { range: { start, end } } = ref[0], anchor = posToIndex(doc, start), head = posToIndex(doc, end), text = state.sliceDoc(anchor, head);
-                                    let result = '';
-                                    highlightCode(text, state.facet(language).parser.parse(text), {
-                                        style(tags) {
-                                            return highlightingFor(state, tags);
-                                        },
-                                    }, (code, classes) => {
-                                        const escaped = escHTML(code);
-                                        result += classes
-                                            ? `<span class="${classes}">${escaped}</span>`
-                                            : escaped;
-                                    }, () => {
-                                        result += '<br>';
-                                    });
-                                    dom.innerHTML = result;
-                                    dom.addEventListener('click', () => {
-                                        view.dispatch({
-                                            selection: { anchor, head },
-                                            scrollIntoView: true,
+                    if (nextSibling?.name.includes(tokens.extTagAttributeValue)) {
+                        let target = getName(state, nextSibling);
+                        const quote = target.charAt(0);
+                        if (quote === '"' || quote === "'") {
+                            target = target.slice(1, target.slice(-1) === quote ? -1 : undefined).trim();
+                        }
+                        if (target) {
+                            const { doc } = state, ref = await getLSP(view, false, toConfigGetter(cm.getWikiConfig, articlePath), base.CDN)?.provideDefinition(doc.toString(), indexToPos(doc, first.to));
+                            return {
+                                pos,
+                                end: to,
+                                above: true,
+                                create() {
+                                    const dom = elt('div', { class: selector.slice(1) });
+                                    dom.style.font = getComputedStyle(view.contentDOM).font;
+                                    if (ref) {
+                                        const { range: { start, end } } = ref[0], anchor = posToIndex(doc, start), head = posToIndex(doc, end), text = state.sliceDoc(anchor, head);
+                                        let result = '';
+                                        highlightCode(text, state.facet(language).parser.parse(text), {
+                                            style(tags) {
+                                                return highlightingFor(state, tags);
+                                            },
+                                        }, (code, classes) => {
+                                            const escaped = escHTML(code);
+                                            result += classes
+                                                ? `<span class="${classes}">${escaped}</span>`
+                                                : escaped;
+                                        }, () => {
+                                            result += '<br>';
+                                        });
+                                        dom.innerHTML = result;
+                                        dom.addEventListener('click', () => {
+                                            view.dispatch({
+                                                selection: { anchor, head },
+                                                scrollIntoView: true,
+                                            });
+                                            view.focus();
                                         });
-                                        view.focus();
-                                    });
-                                }
-                                else {
-                                    dom.textContent = state.phrase('No definition found');
-                                    dom.classList.add(noDef.slice(1));
-                                }
-                                return { dom };
-                            },
-                        };
+                                    }
+                                    else {
+                                        dom.textContent = state.phrase('No definition found');
+                                        dom.classList.add(noDef.slice(1));
+                                    }
+                                    return { dom };
+                                },
+                            };
+                        }
                     }
                 }
             }
-        }
-        return null;
-    }),
-    EditorView.updateListener.of(({ view, docChanged }) => {
-        if (docChanged) {
-            const tree = trees.get(view);
-            if (tree) {
-                tree.docChanged = true;
+            return null;
+        }),
+        EditorView.updateListener.of(({ view, docChanged }) => {
+            if (docChanged) {
+                const tree = trees.get(view);
+                if (tree) {
+                    tree.docChanged = true;
+                }
             }
-        }
-    }),
-    EditorView.theme({
-        [selector]: {
-            padding: '2px 5px',
-            width: 'max-content',
-            maxWidth: '60vw',
-            cursor: 'pointer',
-            whiteSpace: 'pre-wrap',
-        },
-        [noDef]: {
-            color: 'var(--cm-comment)',
-        },
-    }),
-];
+        }),
+        EditorView.theme({
+            [selector]: {
+                padding: '2px 5px',
+                width: 'max-content',
+                maxWidth: '60vw',
+                cursor: 'pointer',
+                whiteSpace: 'pre-wrap',
+            },
+            [noDef]: {
+                color: 'var(--cm-comment)',
+            },
+        }),
+    ];
+};

package/dist/signature.d.ts

@@ -1,4 +1,4 @@
 import type { Extension } from '@codemirror/state';
 import type { CodeMirror6 } from './codemirror';
-declare const _default: (cm: CodeMirror6) => Extension;
+declare const _default: (articlePath?: string) => (cm: CodeMirror6) => Extension;
 export default _default;

package/dist/signature.js

@@ -2,7 +2,7 @@ import { EditorView, showTooltip } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
 import { getLSP } from '@bhsd/browser';
 import { base } from './constants.js';
-import { createTooltipView, indexToPos, escHTML, } from './util.js';
+import { createTooltipView, indexToPos, escHTML, toConfigGetter, } from './util.js';
 const stateEffect = StateEffect.define(), field = StateField.define({
     create() {
         return undefined;
@@ -20,52 +20,53 @@ const stateEffect = StateEffect.define(), field = StateField.define({
         return oldValue;
     },
 });
-export default (cm) => [
-    field,
-    EditorView.updateListener.of(({ view, state, docChanged, selectionSet }) => {
-        if (docChanged || selectionSet && state.field(field)?.signatureHelp?.signatures.length) {
-            const { doc, selection: { main } } = state, { head: cursor } = main, text = doc.toString();
-            if (!main.empty) {
-                view.dispatch({
-                    effects: stateEffect.of({ text, cursor }),
-                });
-                return;
+export default (articlePath) => (cm) => {
+    return [
+        field,
+        EditorView.updateListener.of(({ view, state, docChanged, selectionSet }) => {
+            if (docChanged || selectionSet && state.field(field)?.signatureHelp?.signatures.length) {
+                const { doc, selection: { main } } = state, { head: cursor } = main, text = doc.toString();
+                if (!main.empty) {
+                    view.dispatch({
+                        effects: stateEffect.of({ text, cursor }),
+                    });
+                    return;
+                }
+                (async () => {
+                    view.dispatch({
+                        effects: stateEffect.of({
+                            text,
+                            cursor,
+                            signatureHelp: await getLSP(view, false, toConfigGetter(cm.getWikiConfig, articlePath), base.CDN)?.provideSignatureHelp(text, indexToPos(doc, cursor)),
+                        }),
+                    });
+                })();
             }
-            (async () => {
-                view.dispatch({
-                    effects: stateEffect.of({
-                        text,
-                        cursor,
-                        signatureHelp: await getLSP(view, false, cm.getWikiConfig, base.CDN)
-                            ?.provideSignatureHelp(text, indexToPos(doc, cursor)),
-                    }),
-                });
-            })();
-        }
-    }),
-    showTooltip.from(field, (value) => {
-        if (!value) {
-            return null;
-        }
-        const { cursor, signatureHelp } = value;
-        if (!signatureHelp || signatureHelp.signatures.length === 0) {
-            return null;
-        }
-        const { signatures, activeParameter: active } = signatureHelp;
-        return {
-            pos: cursor,
-            above: true,
-            create(view) {
-                return createTooltipView(view, signatures.map(({ label, parameters, activeParameter = active }) => {
-                    const safeLabel = escHTML(label);
-                    if (activeParameter < 0 || activeParameter >= parameters.length) {
-                        return safeLabel;
-                    }
-                    const colon = safeLabel.indexOf(':'), parts = safeLabel.slice(colon + 1, -2).split('|');
-                    parts[activeParameter] = `<b>${parts[activeParameter]}</b>`;
-                    return `${safeLabel.slice(0, colon)}:${parts.join('|')}}}`;
-                }).join('<br>'));
-            },
-        };
-    }),
-];
+        }),
+        showTooltip.from(field, (value) => {
+            if (!value) {
+                return null;
+            }
+            const { cursor, signatureHelp } = value;
+            if (!signatureHelp || signatureHelp.signatures.length === 0) {
+                return null;
+            }
+            const { signatures, activeParameter: active } = signatureHelp;
+            return {
+                pos: cursor,
+                above: true,
+                create(view) {
+                    return createTooltipView(view, signatures.map(({ label, parameters, activeParameter = active }) => {
+                        const safeLabel = escHTML(label);
+                        if (activeParameter < 0 || activeParameter >= parameters.length) {
+                            return safeLabel;
+                        }
+                        const colon = safeLabel.indexOf(':'), parts = safeLabel.slice(colon + 1, -2).split('|');
+                        parts[activeParameter] = `<b>${parts[activeParameter]}</b>`;
+                        return `${safeLabel.slice(0, colon)}:${parts.join('|')}}}`;
+                    }).join('<br>'));
+                },
+            };
+        }),
+    ];
+};

package/dist/statusBar.js

@@ -3,8 +3,8 @@ import { nextDiagnostic, setDiagnosticsEffect } from '@codemirror/lint';
 import { gotoLine } from '@codemirror/search';
 import elt from 'crelt';
 import { menuRegistry } from './codemirror.js';
-import { panelSelector, diagnosticSelector, menuSelector, messageSelector, actionSelector } from './constants.js';
-const statusSelector = '.cm-panel-status', workerSelector = '.cm-status-worker', errorSelector = '.cm-status-error', warningSelector = '.cm-status-warning', enabledSelector = '.cm-status-fix-enabled', disabledSelector = '.cm-status-fix-disabled', workerCls = 'cm-status-worker-enabled', lineCls = 'cm-status-line';
+import { panelSelector, diagnosticSelector, actionSelector, bgDark, } from './constants.js';
+const statusSelector = '.cm-panel-status', workerSelector = '.cm-status-worker', errorSelector = '.cm-status-error', warningSelector = '.cm-status-warning', enabledSelector = '.cm-status-fix-enabled', disabledSelector = '.cm-status-fix-disabled', menuSelector = '.cm-status-fix-menu', menuHover = `${menuSelector}>div:hover`, messageSelector = '.cm-status-message', workerCls = 'cm-status-worker-enabled', lineCls = 'cm-status-line';
 function getLintMarker(view, severity, menu) {
     const marker = elt('div', { class: `cm-status-${severity}` }), icon = elt('div');
     if (severity === 'fix') {
@@ -43,13 +43,13 @@ const toggleClass = (classList, enabled) => {
     classList.toggle(disabledSelector.slice(1), !enabled);
 };
 const getDiagnostics = (all, main) => all.filter(({ from, to }) => from <= main.to && to >= main.from);
-const updateDiagnosticMessage = (cm, allDiagnostics, main, msg) => {
+const updateDiagnosticMessage = (view, allDiagnostics, main, msg) => {
     const diagnostics = getDiagnostics(allDiagnostics, main);
     if (diagnostics.length === 0) {
         msg.textContent = '';
     }
     else {
-        const diagnostic = diagnostics.find(({ from, to }) => from <= main.head && to >= main.head) ?? diagnostics[0], view = cm.view;
+        const diagnostic = diagnostics.find(({ from, to }) => from <= main.head && to >= main.head) ?? diagnostics[0];
         if (diagnostic.renderMessage) {
             msg.replaceChildren(diagnostic.renderMessage(view));
         }
@@ -94,7 +94,8 @@ const updateMenu = (cm, allDiagnostics, main, classList, optionAll, menu, fixer)
 };
 export default (cm, fixer) => [
     showPanel.of(view => {
-        let diagnostics = [], menu;
+        let diagnostics = [];
+        let menu;
         if (!view.state.readOnly && (fixer || menuRegistry.length > 0)) {
             menu = elt('div', { class: menuSelector.slice(1), tabIndex: -1 });
             if (fixer) {
@@ -118,7 +119,7 @@ export default (cm, fixer) => [
             });
             view.dom.append(menu);
         }
-        const error = getLintMarker(view, 'error'), warning = getLintMarker(view, 'warning'), fix = getLintMarker(view, 'fix', menu), optionAll = elt('div', 'Fix all auto-fixable problems'), worker = elt('div', { class: workerSelector.slice(1) }, error, warning, fix), message = elt('div', { class: messageSelector.slice(1) }), position = elt('div', { class: lineCls }, '0:0'), dom = elt('div', { class: `${panelSelector.slice(1)} ${statusSelector.slice(1)}` }, worker, message, position), { classList } = fix.firstChild;
+        const error = getLintMarker(view, 'error'), warning = getLintMarker(view, 'warning'), fix = getLintMarker(view, 'fix', menu), { classList } = fix.firstChild, optionAll = elt('div', 'Fix all auto-fixable problems'), worker = elt('div', { class: workerSelector.slice(1) }, error, warning, fix), message = elt('div', { class: messageSelector.slice(1) }), position = elt('div', { class: lineCls }, '0:0'), dom = elt('div', { class: `${panelSelector.slice(1)} ${statusSelector.slice(1)}` }, worker, message, position);
         position.addEventListener('click', () => {
             gotoLine(view);
         });
@@ -132,13 +133,13 @@ export default (cm, fixer) => [
                             worker.classList.toggle(workerCls, diagnostics.length > 0);
                             updateDiagnosticsCount(diagnostics, 'error', error);
                             updateDiagnosticsCount(diagnostics, 'warning', warning);
-                            updateDiagnosticMessage(cm, diagnostics, main, message);
+                            updateDiagnosticMessage(view, diagnostics, main, message);
                             updateMenu(cm, diagnostics, main, classList, optionAll, menu, fixer);
                         }
                     }
                 }
                 if (docChanged || selectionSet) {
-                    updateDiagnosticMessage(cm, diagnostics, main, message);
+                    updateDiagnosticMessage(view, diagnostics, main, message);
                     updateMenu(cm, diagnostics, main, classList, optionAll, menu, fixer);
                     const { number, from } = doc.lineAt(main.head);
                     position.textContent = `${number}:${main.head - from}`;
@@ -174,7 +175,7 @@ export default (cm, fixer) => [
         [`${errorSelector},${warningSelector}`]: {
             paddingRight: '8px',
         },
-        [`.${workerCls} ${errorSelector},.${workerCls} ${warningSelector}`]: {
+        [`.${workerCls} ${errorSelector}, .${workerCls} ${warningSelector}`]: {
             cursor: 'pointer',
         },
         [`${workerSelector}>*>div`]: {
@@ -233,4 +234,25 @@ export default (cm, fixer) => [
             cursor: 'pointer',
         },
     }),
+    EditorView.baseTheme({
+        [`&light ${menuSelector}`]: {
+            backgroundColor: '#f5f5f5',
+            boxShadow: '0 2px 2px 0 rgb(0,0,0,.25)',
+        },
+        [`&light ${menuHover}`]: {
+            backgroundColor: '#e2f2ff',
+        },
+        [`&light ${messageSelector}`]: {
+            borderColor: '#c8ccd1',
+        },
+        [`&dark ${menuSelector}`]: {
+            backgroundColor: '#252a33',
+        },
+        [`&dark ${menuHover}`]: {
+            backgroundColor: bgDark,
+        },
+        [`&dark ${messageSelector}`]: {
+            borderColor: '#000',
+        },
+    }),
 ];