@fusion.dev/helix-editor 0.220.0 → 0.221.0

package/dist/codemirror/codemirror-engine.js

@@ -1,370 +0,0 @@
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { bracketMatching, codeFolding, foldGutter, foldKeymap, indentOnInput, indentUnit, StreamLanguage, syntaxHighlighting, } from '@codemirror/language';
-import { setDiagnostics } from '@codemirror/lint';
-import { closeSearchPanel, highlightSelectionMatches, openSearchPanel, replaceAll, replaceNext, SearchQuery, search, searchPanelOpen, setSearchQuery, } from '@codemirror/search';
-import { Annotation, Compartment, EditorState, RangeSet } from '@codemirror/state';
-import { drawSelection, EditorView, GutterMarker, gutterLineClass, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, placeholder, } from '@codemirror/view';
-import { syntaxHighlighter, syntaxRules } from '@fusion.dev/helix-sandbox/highlight';
-const LANGUAGES = {
-    css: async () => (await import('@codemirror/lang-css')).css(),
-    html: async () => (await import('@codemirror/lang-html')).html(),
-    js: async () => (await import('@codemirror/lang-javascript')).javascript(),
-    json: async () => (await import('@codemirror/lang-json')).json(),
-    jsx: async () => (await import('@codemirror/lang-javascript')).javascript({ jsx: true }),
-    md: async () => (await import('@codemirror/lang-markdown')).markdown(),
-    py: async () => (await import('@codemirror/lang-python')).python(),
-    rs: async () => (await import('@codemirror/lang-rust')).rust(),
-    sh: async () => StreamLanguage.define((await import('@codemirror/legacy-modes/mode/shell')).shell),
-    ts: async () => (await import('@codemirror/lang-javascript')).javascript({ typescript: true }),
-    tsx: async () => (await import('@codemirror/lang-javascript')).javascript({ jsx: true, typescript: true }),
-};
-const ALIASES = {
-    bash: 'sh',
-    cjs: 'js',
-    htm: 'html',
-    javascript: 'js',
-    markdown: 'md',
-    mjs: 'js',
-    python: 'py',
-    rust: 'rs',
-    shell: 'sh',
-    typescript: 'ts',
-    zsh: 'sh',
-};
-export const languageName = (name) => {
-    const key = name.trim().toLowerCase();
-    const known = ALIASES[key] ?? key;
-    return known in LANGUAGES ? known : undefined;
-};
-export const languageNames = () => [...Object.keys(LANGUAGES), ...Object.keys(ALIASES)].sort();
-const given = Annotation.define();
-const helixTheme = EditorView.theme({
-    '.cm-activeLine, .cm-activeLineGutter': {
-        backgroundColor: 'color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)',
-    },
-    '.cm-content': {
-        caretColor: 'var(--helix-color-primary)',
-        paddingBlock: 'var(--helix-space-xs)',
-    },
-    '.cm-cursor': { borderLeftColor: 'var(--helix-color-primary)' },
-    '.cm-foldGutter .cm-gutterElement': { paddingInline: 'var(--helix-space-2xs)' },
-    '.cm-foldPlaceholder': {
-        backgroundColor: 'var(--helix-color-surface-sunken)',
-        border: 'none',
-        color: 'var(--helix-color-foreground-muted)',
-    },
-    '.cm-gutterElement.cm-helix-problem-danger': {
-        color: 'var(--helix-color-danger)',
-        fontWeight: 'var(--helix-weight-semibold)',
-    },
-    '.cm-gutterElement.cm-helix-problem-info': { color: 'var(--helix-color-info)' },
-    '.cm-gutterElement.cm-helix-problem-warning': {
-        color: 'var(--helix-color-warning)',
-        fontWeight: 'var(--helix-weight-semibold)',
-    },
-    '.cm-gutters': {
-        backgroundColor: 'transparent',
-        border: 'none',
-        color: 'var(--helix-color-foreground-muted)',
-    },
-    '.cm-lineNumbers .cm-gutterElement': {
-        minInlineSize: '3ch',
-        paddingInline: 'var(--helix-space-sm) var(--helix-space-2xs)',
-    },
-    '.cm-lintRange-error': {
-        backgroundImage: 'none',
-        textDecoration: 'underline wavy var(--helix-color-danger)',
-    },
-    '.cm-lintRange-info': {
-        backgroundImage: 'none',
-        textDecoration: 'underline dotted var(--helix-color-foreground-muted)',
-    },
-    '.cm-lintRange-warning': {
-        backgroundImage: 'none',
-        textDecoration: 'underline wavy var(--helix-color-warning)',
-    },
-    '.cm-panels:has(> .cm-helix-find:only-child)': { display: 'none' },
-    '.cm-placeholder': { color: 'var(--helix-color-foreground-muted)' },
-    '.cm-scroller': {
-        fontFamily: 'inherit',
-        fontVariantLigatures: 'none',
-        lineHeight: 'var(--helix-leading-normal)',
-        scrollbarColor: 'var(--helix-scrollbar-thumb-color) transparent',
-        scrollbarWidth: 'thin',
-    },
-    '.cm-searchMatch': {
-        backgroundColor: 'color-mix(in oklab, var(--helix-color-warning) 25%, transparent)',
-    },
-    '.cm-searchMatch-selected': {
-        backgroundColor: 'color-mix(in oklab, var(--helix-color-warning) 50%, transparent)',
-        outline: 'var(--helix-border-thin) solid var(--helix-color-warning)',
-    },
-    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
-        backgroundColor: 'var(--helix-color-primary-subtle)',
-    },
-    '.cm-tooltip': {
-        backgroundColor: 'var(--helix-color-surface-overlay)',
-        border: 'var(--helix-border-thin) solid var(--helix-color-border)',
-        borderRadius: 'var(--helix-radii-sm)',
-    },
-    '&': { blockSize: '100%', color: 'var(--helix-color-foreground)', fontSize: 'inherit' },
-    '&:not(.cm-focused) .cm-activeLine, &:not(.cm-focused) .cm-activeLineGutter': {
-        backgroundColor: 'transparent',
-    },
-    '&.cm-focused': { outline: 'none' },
-});
-const SEVERITY = { danger: 'error', info: 'info', warning: 'warning' };
-const lintOf = (state, length) => state.diagnostics.map((one) => ({
-    from: Math.min(Math.max(0, one.from), length),
-    message: one.message,
-    severity: SEVERITY[one.tone ?? 'danger'],
-    to: Math.min(Math.max(one.from, one.to), length),
-}));
-class ProblemLine extends GutterMarker {
-    constructor(tone) {
-        super();
-        this.tone = tone;
-        this.elementClass = `cm-helix-problem-${tone}`;
-    }
-    eq(other) {
-        return other.tone === this.tone;
-    }
-}
-const RANK = { danger: 2, info: 0, warning: 1 };
-const problemLines = (state, diagnostics) => {
-    const worst = new Map();
-    for (const one of diagnostics) {
-        const line = state.doc.lineAt(Math.min(Math.max(0, one.from), state.doc.length)).from;
-        const tone = one.tone ?? 'danger';
-        const held = worst.get(line);
-        if (!held || RANK[tone] > RANK[held]) {
-            worst.set(line, tone);
-        }
-    }
-    const marks = [...worst]
-        .sort(([a], [b]) => a - b)
-        .map(([from, tone]) => new ProblemLine(tone).range(from));
-    return gutterLineClass.of(RangeSet.of(marks));
-};
-const queryOf = (query) => new SearchQuery({
-    caseSensitive: query.caseSensitive,
-    literal: !query.regex,
-    regexp: query.regex,
-    replace: query.replace,
-    search: query.search,
-    wholeWord: query.wholeWord,
-});
-const COUNTED = 10_000;
-const matchesOf = (state, query) => {
-    const found = [];
-    const cursor = query.getCursor(state);
-    for (let next = cursor.next(); !next.done && found.length < COUNTED; next = cursor.next()) {
-        if (next.value.to > next.value.from) {
-            found.push([next.value.from, next.value.to]);
-        }
-    }
-    return found;
-};
-const standing = (state, query) => {
-    const matches = matchesOf(state, query);
-    const { from, to } = state.selection.main;
-    return {
-        count: matches.length,
-        index: matches.findIndex(([start, end]) => start === from && end === to),
-    };
-};
-const adoptSyntax = (root) => {
-    if (typeof CSSStyleSheet !== 'function' || !('adoptedStyleSheets' in root)) {
-        return;
-    }
-    const marked = root;
-    if (marked.helixSyntax) {
-        return;
-    }
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(syntaxRules);
-    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
-    marked.helixSyntax = true;
-};
-export const codeMirrorEngine = (options = {}) => ({
-    mount(parent, state, listeners) {
-        const root = parent.getRootNode();
-        adoptSyntax(root);
-        const language = new Compartment();
-        const numbers = new Compartment();
-        const editable = new Compartment();
-        const wrapping = new Compartment();
-        const words = new Compartment();
-        const hint = new Compartment();
-        const problems = new Compartment();
-        let current = state;
-        let asked = '';
-        const load = (name, view) => {
-            asked = name;
-            const known = languageName(name);
-            if (!known) {
-                view.dispatch({ effects: language.reconfigure([]) });
-                return;
-            }
-            void LANGUAGES[known]?.().then((grammar) => {
-                if (asked === name) {
-                    view.dispatch({ effects: language.reconfigure(grammar) });
-                }
-            });
-        };
-        const view = new EditorView({
-            parent,
-            root,
-            state: EditorState.create({
-                doc: state.value,
-                extensions: [
-                    numbers.of(state.lineNumbers ? [lineNumbers(), highlightActiveLineGutter(), foldGutter()] : []),
-                    history(),
-                    drawSelection(),
-                    indentOnInput(),
-                    bracketMatching(),
-                    codeFolding(),
-                    highlightActiveLine(),
-                    highlightSelectionMatches(),
-                    search({
-                        createPanel: () => {
-                            const dom = document.createElement('div');
-                            dom.className = 'cm-helix-find';
-                            return { dom, top: true };
-                        },
-                    }),
-                    problems.of(problemLines(EditorState.create({ doc: state.value }), state.diagnostics)),
-                    indentUnit.of('  '),
-                    EditorState.tabSize.of(2),
-                    keymap.of([...defaultKeymap, ...historyKeymap, ...foldKeymap, indentWithTab]),
-                    syntaxHighlighting(syntaxHighlighter, { fallback: true }),
-                    helixTheme,
-                    language.of([]),
-                    editable.of(EditorState.readOnly.of(state.readOnly)),
-                    wrapping.of(state.wrap ? EditorView.lineWrapping : []),
-                    words.of(EditorView.contentAttributes.of({
-                        'aria-label': state.label,
-                        'aria-multiline': 'true',
-                    })),
-                    hint.of(state.placeholder ? placeholder(state.placeholder) : []),
-                    EditorState.transactionFilter.of((transaction) => {
-                        if (!transaction.docChanged || transaction.annotation(given)) {
-                            return transaction;
-                        }
-                        return listeners.change(transaction.newDoc.toString()) ? transaction : [];
-                    }),
-                    EditorView.updateListener.of((update) => {
-                        if (update.selectionSet || update.docChanged) {
-                            const { from, to } = update.state.selection.main;
-                            listeners.caret?.(from, to);
-                        }
-                    }),
-                    ...(options.extensions ?? []),
-                ],
-            }),
-        });
-        load(state.language, view);
-        view.dispatch(setDiagnostics(view.state, lintOf(state, view.state.doc.length)));
-        const ask = (query) => {
-            const asked = queryOf(query);
-            if (!searchPanelOpen(view.state)) {
-                openSearchPanel(view);
-            }
-            view.dispatch({ effects: setSearchQuery.of(asked) });
-            return asked;
-        };
-        return {
-            destroy: () => view.destroy(),
-            find: (query, direction) => {
-                const asked = ask(query);
-                if (!asked.valid) {
-                    return { count: 0, index: -1 };
-                }
-                const matches = matchesOf(view.state, asked);
-                if (matches.length === 0) {
-                    return { count: 0, index: -1 };
-                }
-                const { from, to } = view.state.selection.main;
-                let index = direction === 'previous'
-                    ? matches.findLastIndex(([start]) => start < from)
-                    : matches.findIndex(([start]) => (direction === 'first' ? start >= from : start >= to));
-                if (index === -1) {
-                    index = direction === 'previous' ? matches.length - 1 : 0;
-                }
-                const [anchor, head] = matches[index] ?? [0, 0];
-                view.dispatch({ scrollIntoView: true, selection: { anchor, head } });
-                return { count: matches.length, index };
-            },
-            findEnd: () => {
-                closeSearchPanel(view);
-            },
-            focus: () => view.focus(),
-            replace: (query, all) => {
-                const asked = ask(query);
-                if (!asked.valid) {
-                    return { count: 0, index: -1 };
-                }
-                if (all) {
-                    replaceAll(view);
-                }
-                else {
-                    replaceNext(view);
-                }
-                return standing(view.state, asked);
-            },
-            select: (from, to) => {
-                const length = view.state.doc.length;
-                view.dispatch({
-                    scrollIntoView: true,
-                    selection: { anchor: Math.min(from, length), head: Math.min(to, length) },
-                });
-                view.focus();
-            },
-            update: (next) => {
-                const effects = [];
-                if (next.lineNumbers !== current.lineNumbers) {
-                    effects.push(numbers.reconfigure(next.lineNumbers ? [lineNumbers(), highlightActiveLineGutter(), foldGutter()] : []));
-                }
-                if (next.readOnly !== current.readOnly) {
-                    effects.push(editable.reconfigure(EditorState.readOnly.of(next.readOnly)));
-                }
-                if (next.wrap !== current.wrap) {
-                    effects.push(wrapping.reconfigure(next.wrap ? EditorView.lineWrapping : []));
-                }
-                if (next.label !== current.label) {
-                    effects.push(words.reconfigure(EditorView.contentAttributes.of({
-                        'aria-label': next.label,
-                        'aria-multiline': 'true',
-                    })));
-                }
-                if (next.placeholder !== current.placeholder) {
-                    effects.push(hint.reconfigure(next.placeholder ? placeholder(next.placeholder) : []));
-                }
-                const doc = view.state.doc.toString();
-                view.dispatch({
-                    annotations: given.of(true),
-                    ...(next.value === doc
-                        ? {}
-                        : { changes: { from: 0, insert: next.value, to: doc.length } }),
-                    effects,
-                });
-                if (next.diagnostics !== current.diagnostics || next.value !== doc) {
-                    view.dispatch(setDiagnostics(view.state, lintOf(next, view.state.doc.length)));
-                    view.dispatch({
-                        effects: problems.reconfigure(problemLines(view.state, next.diagnostics)),
-                    });
-                }
-                if (next.language !== current.language) {
-                    load(next.language, view);
-                }
-                current = next;
-            },
-        };
-    },
-});
-export const connectEditor = (editor, options = {}) => {
-    editor.engine = codeMirrorEngine(options);
-    return () => {
-        editor.engine = undefined;
-    };
-};

package/dist/codemirror/index.d.ts

@@ -1 +0,0 @@
-export * from './codemirror-engine.js';

package/dist/codemirror/index.js

@@ -1 +0,0 @@
-export * from './codemirror-engine.js';