@bhsd/codemirror-mediawiki 3.3.0 → 3.4.1

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__ */ (() => {
@@ -42,8 +42,6 @@ function getLintMarker(view, severity, menu) {
 const updateDiagnosticsCount = (diagnostics, s, marker) => {
     marker.lastChild.textContent = String(diagnostics.filter(({ severity }) => severity === s).length);
 };
-const hasFix = (diagnostic) => diagnostic.actions?.some(({ name }) => name === 'fix' || name.startsWith('Fix:'));
-const isItemActionable = (cm, { name, isActionable }) => cm.hasPreference(name) && isActionable(cm);
 const toggleClass = (classList, enabled) => {
     classList.toggle('cm-status-fix-enabled', enabled);
     classList.toggle('cm-status-fix-disabled', !enabled);
@@ -74,8 +72,8 @@ const updateDiagnosticMessage = (cm, allDiagnostics, main, msg) => {
 };
 const updateMenu = (cm, allDiagnostics, main, classList, menu, fixer) => {
     if (menu) {
-        const actionable = menuRegistry.filter(item => isItemActionable(cm, item)), fixable = new Set(fixer && getDiagnostics(allDiagnostics, main).filter(hasFix)
-            .map(({ message }) => / \(([^()]+)\)$/u.exec(message)?.[1])
+        const actionable = menuRegistry.filter(({ name, isActionable }) => cm.hasPreference(name) && isActionable(cm)), fixable = new Set(fixer && getDiagnostics(allDiagnostics, main).filter(({ actions }) => actions?.some(({ name }) => name === 'fix'
+            || name !== 'Fix: Stylelint' && name.startsWith('Fix:'))).map(({ message }) => / \(([^()]+)\)$/u.exec(message)?.[1])
             .filter(Boolean));
         if (actionable.length === 0 && fixable.size === 0) {
             toggleClass(classList, false);
@@ -94,66 +92,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.js

@@ -53,15 +53,15 @@ nord = [
     nordBase,
     /* @__PURE__ */ EditorView.theme({
         'div.cm-activeLine': {
-            backgroundColor: '#4c566a44',
-        },
-        '&.cm-focused .cm-matchingTag, &.cm-focused .cm-nonmatchingTag': {
-            outline: '1px solid #8fbcbb',
+            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',