@bhsd/codemirror-mediawiki 3.2.0 → 3.4.0

package/dist/ref.js

@@ -82,4 +82,13 @@ export default (cm) => [
             }
         }
     }),
+    EditorView.theme({
+        '.cm-tooltip-ref': {
+            padding: '2px 5px',
+            width: 'max-content',
+            maxWidth: '60vw',
+            cursor: 'pointer',
+            whiteSpace: 'pre-wrap',
+        },
+    }),
 ];

package/dist/statusBar.js

@@ -1,4 +1,4 @@
-import { showPanel } from '@codemirror/view';
+import { showPanel, EditorView } from '@codemirror/view';
 import { nextDiagnostic, setDiagnosticsEffect } from '@codemirror/lint';
 import { menuRegistry } from './codemirror';
 const optionAll = /* @__PURE__ */ (() => {
@@ -94,66 +94,144 @@ const updateMenu = (cm, allDiagnostics, main, classList, menu, fixer) => {
         menu.replaceChildren(...actions, ...quickfix);
     }
 };
+const panelSelector = '.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', messageSelector = '.cm-status-message';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default (cm, fixer) => showPanel.of(view => {
-    let diagnostics = [], menu;
-    if (!view.state.readOnly && (fixer || menuRegistry.length > 0)) {
-        menu = document.createElement('div');
-        menu.className = 'cm-status-fix-menu';
-        menu.tabIndex = -1;
-        if (fixer) {
-            menu.addEventListener('click', ({ target }) => {
-                if (target === menu) {
-                    return;
-                }
-                (async () => {
-                    const { doc } = view.state, output = await fixer(doc, target.dataset['rule']);
-                    if (output !== doc.toString()) {
-                        view.dispatch({
-                            changes: { from: 0, to: doc.length, insert: output },
-                        });
+export default (cm, fixer) => [
+    showPanel.of(view => {
+        let diagnostics = [], menu;
+        if (!view.state.readOnly && (fixer || menuRegistry.length > 0)) {
+            menu = document.createElement('div');
+            menu.className = 'cm-status-fix-menu';
+            menu.tabIndex = -1;
+            if (fixer) {
+                menu.addEventListener('click', ({ target }) => {
+                    if (target === menu) {
+                        return;
                     }
-                    view.focus();
-                })();
+                    (async () => {
+                        const { doc } = view.state, output = await fixer(doc, target.dataset['rule']);
+                        if (output !== doc.toString()) {
+                            view.dispatch({
+                                changes: { from: 0, to: doc.length, insert: output },
+                            });
+                        }
+                        view.focus();
+                    })();
+                });
+            }
+            menu.addEventListener('focusout', () => {
+                menu.style.display = 'none';
             });
+            view.dom.append(menu);
         }
-        menu.addEventListener('focusout', () => {
-            menu.style.display = 'none';
-        });
-        view.dom.append(menu);
-    }
-    const dom = document.createElement('div'), worker = document.createElement('div'), message = document.createElement('div'), position = document.createElement('div'), error = getLintMarker(view, 'error'), warning = getLintMarker(view, 'warning'), fix = getLintMarker(view, 'fix', menu), { classList } = fix.firstChild;
-    worker.className = 'cm-status-worker';
-    worker.append(error, warning, fix);
-    message.className = 'cm-status-message';
-    position.className = 'cm-status-line';
-    position.textContent = '0:0';
-    dom.className = 'cm-panel cm-panel-status';
-    dom.append(worker, message, position);
-    return {
-        dom,
-        update({ state: { selection: { main }, doc }, transactions, docChanged, selectionSet }) {
-            for (const tr of transactions) {
-                for (const effect of tr.effects) {
-                    if (effect.is(setDiagnosticsEffect)) {
-                        diagnostics = effect.value;
-                        worker.classList.toggle('cm-status-worker-enabled', diagnostics.length > 0);
-                        updateDiagnosticsCount(diagnostics, 'error', error);
-                        updateDiagnosticsCount(diagnostics, 'warning', warning);
-                        updateDiagnosticMessage(cm, diagnostics, main, message);
-                        updateMenu(cm, diagnostics, main, classList, menu, fixer);
+        const dom = document.createElement('div'), worker = document.createElement('div'), message = document.createElement('div'), position = document.createElement('div'), error = getLintMarker(view, 'error'), warning = getLintMarker(view, 'warning'), fix = getLintMarker(view, 'fix', menu), { classList } = fix.firstChild;
+        worker.className = 'cm-status-worker';
+        worker.append(error, warning, fix);
+        message.className = 'cm-status-message';
+        position.className = 'cm-status-line';
+        position.textContent = '0:0';
+        dom.className = 'cm-panel cm-panel-status';
+        dom.append(worker, message, position);
+        return {
+            dom,
+            update({ state: { selection: { main }, doc }, transactions, docChanged, selectionSet }) {
+                for (const tr of transactions) {
+                    for (const effect of tr.effects) {
+                        if (effect.is(setDiagnosticsEffect)) {
+                            diagnostics = effect.value;
+                            worker.classList.toggle('cm-status-worker-enabled', diagnostics.length > 0);
+                            updateDiagnosticsCount(diagnostics, 'error', error);
+                            updateDiagnosticsCount(diagnostics, 'warning', warning);
+                            updateDiagnosticMessage(cm, diagnostics, main, message);
+                            updateMenu(cm, diagnostics, main, classList, menu, fixer);
+                        }
                     }
                 }
-            }
-            if (docChanged || selectionSet) {
-                updateDiagnosticMessage(cm, diagnostics, main, message);
-                updateMenu(cm, diagnostics, main, classList, menu, fixer);
-                const { number, from } = doc.lineAt(main.head);
-                position.textContent = `${number}:${main.head - from}`;
-                if (!main.empty) {
-                    position.textContent += ` (${main.to - main.from})`;
+                if (docChanged || selectionSet) {
+                    updateDiagnosticMessage(cm, diagnostics, main, message);
+                    updateMenu(cm, diagnostics, main, classList, menu, fixer);
+                    const { number, from } = doc.lineAt(main.head);
+                    position.textContent = `${number}:${main.head - from}`;
+                    if (!main.empty) {
+                        position.textContent += ` (${main.to - main.from})`;
+                    }
                 }
-            }
+            },
+        };
+    }),
+    EditorView.theme({
+        [panelSelector]: {
+            lineHeight: 1.4,
+        },
+        [`${panelSelector}>div`]: {
+            padding: '0 .3em',
+            display: 'table-cell',
+        },
+        [workerSelector]: {
+            '-webkitUserSelect': 'none',
+            userSelect: 'none',
+        },
+        [`${workerSelector}>*`]: {
+            display: 'table-cell',
+            whiteSpace: 'nowrap',
+        },
+        [`${errorSelector},${warningSelector}`]: {
+            paddingRight: '8px',
+        },
+        [`.cm-status-worker-enabled ${errorSelector},.cm-status-worker-enabled ${warningSelector}`]: {
+            cursor: 'pointer',
+        },
+        [`${workerSelector}>*>div`]: {
+            display: 'inline-block',
+            verticalAlign: 'middle',
+        },
+        [`${workerSelector}>*>div:first-child`]: {
+            marginRight: '4px',
+            width: '1em',
+            height: '1em',
+        },
+        [`${disabledSelector},${enabledSelector}`]: {
+            maskImage: "url('data:image/svg+xml,"
+                + '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">'
+                // eslint-disable-next-line @stylistic/max-len
+                + '<path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/>'
+                + '</svg>'
+                + "')",
+            maskSize: '100%',
+            maskRepeat: 'no-repeat',
+            maskPosition: 'center',
+        },
+        [disabledSelector]: {
+            backgroundColor: '#dadde3',
+        },
+        [enabledSelector]: {
+            backgroundColor: '#ffce31',
+            cursor: 'pointer',
+        },
+        [menuSelector]: {
+            display: 'none',
+            position: 'absolute',
+            zIndex: 301,
+            border: '1px solid #ddd',
+            borderRadius: '2px',
+            outline: 'none',
+            whiteSpace: 'nowrap',
+        },
+        [`${menuSelector}>div`]: {
+            padding: '1px 5px',
+            cursor: 'pointer',
+        },
+        [messageSelector]: {
+            borderStyle: 'solid',
+            borderWidth: '0 1px',
+            width: '100%',
+        },
+        [`${messageSelector} .cm-diagnosticAction`]: {
+            paddingTop: 0,
+            paddingBottom: 0,
+        },
+        '.cm-status-line': {
+            whiteSpace: 'nowrap',
         },
-    };
-});
+    }),
+];

package/dist/theme.d.ts

@@ -0,0 +1,8 @@
+import type { Extension } from '@codemirror/state';
+export declare const light: Extension, 
+/**
+ * @author 鬼影233
+ * @author Bhsd
+ * @see https://zh.moegirl.org.cn/User:%E9%AC%BC%E5%BD%B1233/nord-moeskin.css
+ */
+nord: Extension;

package/dist/theme.js

@@ -0,0 +1,108 @@
+import { EditorView } from '@codemirror/view';
+import { nord as nordBase } from 'cm6-theme-nord';
+export const light = /* @__PURE__ */ EditorView.theme({
+    '&': {
+        backgroundColor: '#fff',
+    },
+    '&.cm-focused .cm-matchingTag': {
+        backgroundColor: 'rgb(50,140,130,.32)',
+    },
+    '&.cm-focused .cm-nonmatchingTag': {
+        backgroundColor: 'rgb(187,85,85,.27)',
+    },
+    '.cm-tooltip-hover code': {
+        backgroundColor: '#e0e6eb',
+    },
+    '.cm-status-fix-menu': {
+        backgroundColor: '#f5f5f5',
+        boxShadow: '0 2px 2px 0 rgb(0,0,0,.25)',
+    },
+    '.cm-status-fix-menu>div:hover': {
+        backgroundColor: '#e2f2ff',
+    },
+    '.cm-status-message': {
+        borderColor: '#c8ccd1',
+    },
+    '.cm-content': {
+        '--cm-arg': '#b0c',
+        '--cm-attr': '#179b1c',
+        '--cm-comment': '#7b8c8f',
+        '--cm-convert': '#b68',
+        '--cm-entity': '#00a1a1',
+        '--cm-error': '#d73333',
+        '--cm-func': '#a11',
+        '--cm-hr': '#0076dd',
+        '--cm-hr-bg': 'rgb(0,0,0,.07)',
+        '--cm-link': '#000aaa',
+        '--cm-sect': '#006fe6',
+        '--cm-sp': 'rgb(134,206,255,.3)',
+        '--cm-table': '#d08',
+        '--cm-table-attr': '#f500d4',
+        '--cm-tag': '#14866d',
+        '--cm-tpl': '#80c',
+        '--cm-var': '#ad9300',
+        '--cm-var-name': '#ac6600',
+    },
+}), 
+/**
+ * @author 鬼影233
+ * @author Bhsd
+ * @see https://zh.moegirl.org.cn/User:%E9%AC%BC%E5%BD%B1233/nord-moeskin.css
+ */
+nord = [
+    nordBase,
+    /* @__PURE__ */ EditorView.theme({
+        'div.cm-activeLine': {
+            backgroundColor: 'rgb(76,86,106,.27)',
+        },
+        '&.cm-focused .cm-matchingTag': {
+            backgroundColor: '#eceff4',
+            color: '#434c5e',
+        },
+        '&.cm-focused .cm-nonmatchingTag': {
+            backgroundColor: 'rgb(235,203,139,.32)',
+        },
+        ['&.cm-focused>.cm-scroller>.cm-selectionLayer div.cm-selectionBackground,'
+            + '.cm-tooltip-hover code, .cm-status-fix-menu>div:hover, .cm-diagnosticAction, div.cm-tooltip-fold']: {
+            backgroundColor: '#4c566a',
+        },
+        'div.cm-panels': {
+            color: '#d8dee9',
+        },
+        '.cm-status-fix-menu': {
+            backgroundColor: '#252a33',
+        },
+        '.cm-status-message': {
+            borderColor: '#000',
+        },
+        '&.cm-focused .cm-searchMatch.cm-searchMatch-selected': {
+            color: '#b48ead',
+        },
+        'div.cm-tooltip-autocomplete ul li[aria-selected]': {
+            color: 'inherit',
+        },
+        'div.cm-gutters': {
+            color: '#5e81ac',
+        },
+        '.cm-content': {
+            '--cm-arg': '#9f78a5',
+            '--cm-attr': '#97b757',
+            '--cm-comment': '#4c566a',
+            '--cm-convert': '#b68',
+            '--cm-entity': '#00a1a1',
+            '--cm-error': '#bf616a',
+            '--cm-func': '#bf616a',
+            '--cm-hr': '#5e81ac',
+            '--cm-hr-bg': '#3b4252',
+            '--cm-link': '#5e81ac',
+            '--cm-sect': '#81a1c1',
+            '--cm-sp': '#88c0d0',
+            '--cm-table': '#b48ead',
+            '--cm-table-attr': '#9f78a5',
+            '--cm-tag': '#a3be8c',
+            '--cm-tpl': '#9f78a5',
+            '--cm-var': '#d08770',
+            '--cm-var-name': '#d08770',
+        },
+    }),
+];