@bhsd/codemirror-mediawiki 3.5.2 → 3.6.0

package/dist/openLinks.d.ts

@@ -2,7 +2,6 @@ import { EditorView } from '@codemirror/view';
 import type { Extension } from '@codemirror/state';
 import type { CodeMirror6 } from './codemirror';
 import type { MwConfig } from './token';
-export declare const isMac: boolean;
 export declare const mouseEventListener: (e: MouseEvent, view: EditorView, langConfig: MwConfig | undefined) => string | undefined;
 declare const _default: ({ langConfig }: CodeMirror6) => Extension;
 export default _default;

package/dist/openLinks.js

@@ -1,18 +1,14 @@
 import { EditorView } from '@codemirror/view';
 import { ensureSyntaxTree } from '@codemirror/language';
 import { tokens } from './config';
-import { hasTag } from './mediawiki';
-const { vendor, userAgent, maxTouchPoints, platform } = navigator;
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-export const isMac = vendor?.includes('Apple Computer')
-    && (userAgent.includes('Mobile/') || maxTouchPoints > 2)
-    || platform.includes('Mac');
-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'], wikiLinks = [
+import { isMac } from './constants';
+import { hasTag } from './util';
+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 = [
     'template-name',
     'link-pagename',
-    'parserfunction.cm-mw-pagename',
-    'exttag-attribute-value.cm-mw-pagename',
-    'file-text.cm-mw-pagename',
+    `parserfunction${pagename}`,
+    `exttag-attribute-value${pagename}`,
+    `file-text${pagename}`,
 ];
 const toggleOpenLinks = (toggle) => {
     for (const ele of document.querySelectorAll('.cm-content')) {

package/dist/ref.js

@@ -1,11 +1,12 @@
 import { hoverTooltip, EditorView } from '@codemirror/view';
-import { ensureSyntaxTree } from '@codemirror/language';
+import { ensureSyntaxTree, language, highlightingFor } from '@codemirror/language';
+import { highlightCode } from '@lezer/highlight';
 import { getLSP } from '@bhsd/browser';
 import elt from 'crelt';
-import { getTag } from './matchTag';
 import { tokens } from './config';
-import { indexToPos, posToIndex } from './hover';
-const trees = new WeakMap();
+import { getTag } from './matchTag';
+import { indexToPos, posToIndex, escHTML } from './util';
+const trees = new WeakMap(), selector = '.cm-tooltip-ref', noDef = '.cm-tooltip-no-def';
 /**
  * 获取节点内容
  * @param state
@@ -50,20 +51,33 @@ export default (cm) => [
                             end: to,
                             above: true,
                             create() {
-                                const dom = elt('div', { class: 'cm-tooltip-ref' });
+                                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);
-                                    dom.textContent = state.sliceDoc(anchor, head);
+                                    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();
                                     });
                                 }
                                 else {
                                     dom.textContent = state.phrase('No definition found');
+                                    dom.classList.add(noDef.slice(1));
                                 }
                                 return { dom };
                             },
@@ -83,12 +97,15 @@ export default (cm) => [
         }
     }),
     EditorView.theme({
-        '.cm-tooltip-ref': {
+        [selector]: {
             padding: '2px 5px',
             width: 'max-content',
             maxWidth: '60vw',
             cursor: 'pointer',
             whiteSpace: 'pre-wrap',
         },
+        [noDef]: {
+            color: 'var(--cm-comment)',
+        },
     }),
 ];

package/dist/signature.js

@@ -1,7 +1,7 @@
 import { EditorView, showTooltip } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
 import { getLSP } from '@bhsd/browser';
-import { indexToPos, createTooltipView } from './hover';
+import { createTooltipView, indexToPos } from './util';
 const stateEffect = StateEffect.define(), field = StateField.define({
     create() {
         return undefined;

package/dist/statusBar.js

@@ -2,16 +2,17 @@ import { showPanel, EditorView } from '@codemirror/view';
 import { nextDiagnostic, setDiagnosticsEffect } from '@codemirror/lint';
 import elt from 'crelt';
 import { menuRegistry } from './codemirror';
-const optionAll = elt('div', 'Fix all auto-fixable problems');
+import { panelSelector, diagnosticSelector, menuSelector, messageSelector, actionSelector } from './constants';
+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';
 function getLintMarker(view, severity, menu) {
     const marker = elt('div', { class: `cm-status-${severity}` }), icon = elt('div');
     if (severity === 'fix') {
-        icon.className = 'cm-status-fix-disabled';
+        icon.className = disabledSelector.slice(1);
         marker.title = 'Fix all';
         marker.append(icon);
         if (menu) {
             marker.addEventListener('click', ({ clientX, clientY }) => {
-                if (icon.className === 'cm-status-fix-enabled') {
+                if (icon.className === enabledSelector.slice(1)) {
                     const { bottom, left } = view.dom.getBoundingClientRect();
                     menu.style.bottom = `${bottom - clientY + 5}px`;
                     menu.style.left = `${clientX - 20 - left}px`;
@@ -25,7 +26,7 @@ function getLintMarker(view, severity, menu) {
         icon.className = `cm-lint-marker-${severity}`;
         marker.append(icon, elt('div', '0'));
         marker.addEventListener('click', () => {
-            if (marker.parentElement?.classList.contains('cm-status-worker-enabled')) {
+            if (marker.parentElement?.classList.contains(workerCls)) {
                 nextDiagnostic(view);
                 view.focus();
             }
@@ -37,8 +38,8 @@ const updateDiagnosticsCount = (diagnostics, s, marker) => {
     marker.lastChild.textContent = String(diagnostics.filter(({ severity }) => severity === s).length);
 };
 const toggleClass = (classList, enabled) => {
-    classList.toggle('cm-status-fix-enabled', enabled);
-    classList.toggle('cm-status-fix-disabled', !enabled);
+    classList.toggle(enabledSelector.slice(1), 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) => {
@@ -51,7 +52,7 @@ const updateDiagnosticMessage = (cm, allDiagnostics, main, msg) => {
         msg.textContent = diagnostic.message;
         if (diagnostic.actions) {
             msg.append(...diagnostic.actions.map(({ name, apply }) => {
-                const button = elt('button', { type: 'button', class: 'cm-diagnosticAction' }, name);
+                const button = elt('button', { type: 'button', class: actionSelector.slice(1) }, name);
                 button.addEventListener('click', e => {
                     e.preventDefault();
                     apply(view, diagnostic.from, diagnostic.to);
@@ -61,7 +62,7 @@ const updateDiagnosticMessage = (cm, allDiagnostics, main, msg) => {
         }
     }
 };
-const updateMenu = (cm, allDiagnostics, main, classList, menu, fixer) => {
+const updateMenu = (cm, allDiagnostics, main, classList, optionAll, menu, fixer) => {
     if (menu) {
         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])
@@ -82,13 +83,12 @@ 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 = elt('div', { class: 'cm-status-fix-menu', tabIndex: -1 });
+            menu = elt('div', { class: menuSelector.slice(1), tabIndex: -1 });
             if (fixer) {
                 menu.addEventListener('click', ({ target }) => {
                     if (target === menu) {
@@ -110,7 +110,7 @@ export default (cm, fixer) => [
             });
             view.dom.append(menu);
         }
-        const error = getLintMarker(view, 'error'), warning = getLintMarker(view, 'warning'), fix = getLintMarker(view, 'fix', menu), worker = elt('div', { class: 'cm-status-worker' }, error, warning, fix), message = elt('div', { class: 'cm-status-message' }), position = elt('div', { class: 'cm-status-line' }, '0:0'), dom = elt('div', { class: 'cm-panel cm-panel-status' }, worker, message, position), { classList } = fix.firstChild;
+        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;
         return {
             dom,
             update({ state: { selection: { main }, doc }, transactions, docChanged, selectionSet }) {
@@ -118,17 +118,17 @@ export default (cm, fixer) => [
                     for (const effect of tr.effects) {
                         if (effect.is(setDiagnosticsEffect)) {
                             diagnostics = effect.value;
-                            worker.classList.toggle('cm-status-worker-enabled', diagnostics.length > 0);
+                            worker.classList.toggle(workerCls, diagnostics.length > 0);
                             updateDiagnosticsCount(diagnostics, 'error', error);
                             updateDiagnosticsCount(diagnostics, 'warning', warning);
                             updateDiagnosticMessage(cm, diagnostics, main, message);
-                            updateMenu(cm, diagnostics, main, classList, menu, fixer);
+                            updateMenu(cm, diagnostics, main, classList, optionAll, menu, fixer);
                         }
                     }
                 }
                 if (docChanged || selectionSet) {
                     updateDiagnosticMessage(cm, diagnostics, main, message);
-                    updateMenu(cm, diagnostics, main, classList, menu, fixer);
+                    updateMenu(cm, diagnostics, main, classList, optionAll, menu, fixer);
                     const { number, from } = doc.lineAt(main.head);
                     position.textContent = `${number}:${main.head - from}`;
                     if (!main.empty) {
@@ -139,10 +139,10 @@ export default (cm, fixer) => [
         };
     }),
     EditorView.theme({
-        [panelSelector]: {
+        [statusSelector]: {
             lineHeight: 1.4,
         },
-        [`${panelSelector}>div`]: {
+        [`${statusSelector}>div`]: {
             padding: '0 .3em',
             display: 'table-cell',
         },
@@ -163,7 +163,7 @@ export default (cm, fixer) => [
         [`${errorSelector},${warningSelector}`]: {
             paddingRight: '8px',
         },
-        [`.cm-status-worker-enabled ${errorSelector},.cm-status-worker-enabled ${warningSelector}`]: {
+        [`.${workerCls} ${errorSelector},.${workerCls} ${warningSelector}`]: {
             cursor: 'pointer',
         },
         [`${workerSelector}>*>div`]: {
@@ -210,14 +210,14 @@ export default (cm, fixer) => [
             borderWidth: '0 1px',
             width: '100%',
         },
-        [`${messageSelector} .cm-diagnosticAction`]: {
+        [`${messageSelector} ${actionSelector}`]: {
             paddingTop: 0,
             paddingBottom: 0,
         },
-        '.cm-status-line': {
+        [`.${lineCls}`]: {
             whiteSpace: 'nowrap',
         },
-        '.cm-diagnosticText-clickable': {
+        [diagnosticSelector]: {
             cursor: 'pointer',
         },
     }),

package/dist/theme.js

@@ -1,29 +1,10 @@
 import { EditorView } from '@codemirror/view';
 import { nord as nordBase } from 'cm6-theme-nord';
+import { foldSelector, hoverSelector, matchingCls, nonmatchingCls, menuSelector, messageSelector, actionSelector, panelsSelector, } from './constants';
+const focused = '&.cm-focused', matching = `${focused} .${matchingCls}`, nonmatching = `${focused} .${nonmatchingCls}`, code = `${hoverSelector} code`, menuHover = `${menuSelector}>div:hover`;
 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',
@@ -43,39 +24,77 @@ export const light = /* @__PURE__ */ EditorView.theme({
         '--cm-var': '#ad9300',
         '--cm-var-name': '#ac6600',
     },
+    [matching]: {
+        backgroundColor: 'rgb(50,140,130,.32)',
+    },
+    [nonmatching]: {
+        backgroundColor: 'rgb(187,85,85,.27)',
+    },
+    [code]: {
+        backgroundColor: '#e0e6eb',
+    },
+    [menuSelector]: {
+        backgroundColor: '#f5f5f5',
+        boxShadow: '0 2px 2px 0 rgb(0,0,0,.25)',
+    },
+    [menuHover]: {
+        backgroundColor: '#e2f2ff',
+    },
+    [messageSelector]: {
+        borderColor: '#c8ccd1',
+    },
 }), 
 /**
  * @author 鬼影233
  * @author Bhsd
  * @see https://zh.moegirl.org.cn/User:%E9%AC%BC%E5%BD%B1233/nord-moeskin.css
  */
-nord = [
+nord = /* @__PURE__ */ (() => [
     nordBase,
-    /* @__PURE__ */ EditorView.theme({
+    EditorView.theme({
+        '&': {
+            '--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',
+        },
         'div.cm-activeLine': {
             backgroundColor: 'rgb(76,86,106,.27)',
         },
-        '&.cm-focused .cm-matchingTag': {
+        [matching]: {
             backgroundColor: '#eceff4',
             color: '#434c5e',
         },
-        '&.cm-focused .cm-nonmatchingTag': {
+        [nonmatching]: {
             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']: {
+        [`${focused}>.cm-scroller>.cm-selectionLayer div.cm-selectionBackground, ${code}, ${menuHover}, ${actionSelector}, div${foldSelector}`]: {
             backgroundColor: '#4c566a',
         },
-        'div.cm-panels': {
+        [`div${panelsSelector}`]: {
             color: '#d8dee9',
         },
-        '.cm-status-fix-menu': {
+        [menuSelector]: {
             backgroundColor: '#252a33',
         },
-        '.cm-status-message': {
+        [messageSelector]: {
             borderColor: '#000',
         },
-        '&.cm-focused .cm-searchMatch.cm-searchMatch-selected': {
+        [`${focused} .cm-searchMatch.cm-searchMatch-selected`]: {
             color: '#b48ead',
         },
         'div.cm-tooltip-autocomplete ul li[aria-selected]': {
@@ -84,25 +103,5 @@ nord = [
         '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',
-        },
     }),
-];
+])();

package/dist/token.d.ts

@@ -49,14 +49,16 @@ declare interface StringStream extends StringStreamBase {
     match(pattern: RegExp, consume?: boolean): RegExpMatchArray | null;
 }
 export type TagName = keyof typeof tokens;
-export type ApiSuggestions = [string, string?][];
+export type ApiSuggestions = [string, string?][] & {
+    description?: string;
+};
 /**
  * 获取维基链接建议
  * @param search 搜索字符串，开头不包含` `
- * @param namespace 命名空间
  * @param subpage 是否为子页面
+ * @param namespace 命名空间
  */
-export type ApiSuggest = (search: string, namespace?: number, subpage?: boolean) => ApiSuggestions | Promise<ApiSuggestions>;
+export type ApiSuggest = (search: string, subpage?: boolean, namespace?: number) => ApiSuggestions | Promise<ApiSuggestions>;
 export interface MwConfig extends MwConfigBase {
     nsid: Record<string, number>;
     variants?: string[];

package/dist/util.d.ts

@@ -0,0 +1,39 @@
+import type { EditorView, TooltipView } from '@codemirror/view';
+import type { Text, EditorState } from '@codemirror/state';
+import type { SyntaxNode } from '@lezer/common';
+import type { Position } from 'vscode-languageserver-types';
+/**
+ * 转义HTML字符串
+ * @param text 原字符串
+ */
+export declare const escHTML: (text: string) => string;
+/**
+ * 将索引转换为位置
+ * @param doc Text 实例
+ * @param index 索引
+ */
+export declare const indexToPos: (doc: Text, index: number) => Position;
+/**
+ * 将位置转换为索引
+ * @param doc Text 实例
+ * @param pos 位置
+ */
+export declare const posToIndex: (doc: Text, pos: Position) => number;
+/**
+ * 创建 TooltipView
+ * @param view EditorView 实例
+ * @param innerHTML 提示内容
+ */
+export declare const createTooltipView: (view: EditorView, innerHTML: string) => TooltipView;
+/**
+ * Update the stack of opening (+) or closing (-) brackets
+ * @param state
+ * @param node 语法树节点
+ */
+export declare const braceStackUpdate: (state: EditorState, node: SyntaxNode) => [number, number];
+/**
+ * 判断节点是否包含指定类型
+ * @param types 节点类型
+ * @param names 指定类型
+ */
+export declare const hasTag: (types: Set<string>, names: string | string[]) => boolean;

package/dist/util.js

@@ -0,0 +1,53 @@
+import elt from 'crelt';
+import { tokens } from './config';
+import { hoverSelector } from './constants';
+const dict = { '\n': '<br>', '&': '&amp;', '<': '&lt;' };
+/**
+ * 转义HTML字符串
+ * @param text 原字符串
+ */
+export const escHTML = (text) => text.replace(/[\n<&]/gu, ch => dict[ch]);
+/**
+ * 将索引转换为位置
+ * @param doc Text 实例
+ * @param index 索引
+ */
+export const indexToPos = (doc, index) => {
+    const line = doc.lineAt(index);
+    return { line: line.number - 1, character: index - line.from };
+};
+/**
+ * 将位置转换为索引
+ * @param doc Text 实例
+ * @param pos 位置
+ */
+export const posToIndex = (doc, pos) => {
+    const line = doc.line(pos.line + 1);
+    return Math.min(line.from + pos.character, line.to);
+};
+/**
+ * 创建 TooltipView
+ * @param view EditorView 实例
+ * @param innerHTML 提示内容
+ */
+export const createTooltipView = (view, innerHTML) => {
+    const inner = elt('div'), dom = elt('div', { class: hoverSelector.slice(1) }, inner);
+    dom.style.font = getComputedStyle(view.contentDOM).font;
+    inner.innerHTML = innerHTML;
+    return { dom };
+};
+/**
+ * Update the stack of opening (+) or closing (-) brackets
+ * @param state
+ * @param node 语法树节点
+ */
+export const braceStackUpdate = (state, node) => {
+    const brackets = state.sliceDoc(node.from, node.to);
+    return [brackets.split('{{').length - 1, 1 - brackets.split('}}').length];
+};
+/**
+ * 判断节点是否包含指定类型
+ * @param types 节点类型
+ * @param names 指定类型
+ */
+export const hasTag = (types, names) => (Array.isArray(names) ? names : [names]).some(name => types.has(name in tokens ? tokens[name] : name));

package/dist/vue.js

@@ -2,8 +2,8 @@ import { vue } from '@codemirror/lang-vue';
 import { htmlLanguage, htmlCompletionSource } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
 import { LanguageSupport } from '@codemirror/language';
-import { jsCompletion } from './javascript';
 import { cssCompletion } from './css';
+import { jsCompletion } from './javascript';
 export default () => vue({
     base: new LanguageSupport(htmlLanguage, [
         htmlLanguage.data.of({ autocomplete: htmlCompletionSource }),