@tutorialkit-rb/react 1.5.2-rb.0.1.0

package/dist/Panels/WorkspacePanel.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from '@nanostores/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { DialogProvider } from '../core/Dialog.js';
+import resizePanelStyles from '../styles/resize-panel.module.css';
+import { classNames } from '../utils/classnames.js';
+import { EditorPanel } from './EditorPanel.js';
+import { PreviewPanel } from './PreviewPanel.js';
+import { TerminalPanel } from './TerminalPanel.js';
+const DEFAULT_TERMINAL_SIZE = 25;
+/**
+ * This component is the orchestrator between various interactive components.
+ */
+export function WorkspacePanel({ tutorialStore, theme, dialog }) {
+    /**
+     * Re-render when lesson changes.
+     * The `tutorialStore.hasEditor()` and other methods below access
+     * stale data as they are not reactive.
+     */
+    useStore(tutorialStore.ref);
+    const hasEditor = tutorialStore.hasEditor();
+    const hasPreviews = tutorialStore.hasPreviews();
+    const hideTerminalPanel = !tutorialStore.hasTerminalPanel();
+    const terminalPanelRef = useRef(null);
+    const terminalExpanded = useRef(false);
+    return (_jsxs(PanelGroup, { className: resizePanelStyles.PanelGroup, id: "right-panel-group", direction: "vertical", children: [_jsx(DialogProvider, { value: dialog, children: _jsx(EditorSection, { theme: theme, tutorialStore: tutorialStore, hasEditor: hasEditor, hasPreviews: hasPreviews, hideTerminalPanel: hideTerminalPanel }) }), _jsx(PanelResizeHandle, { className: resizePanelStyles.PanelResizeHandle, hitAreaMargins: { fine: 5, coarse: 5 }, disabled: !hasEditor }), _jsx(PreviewsSection, { theme: theme, tutorialStore: tutorialStore, terminalPanelRef: terminalPanelRef, terminalExpanded: terminalExpanded, hideTerminalPanel: hideTerminalPanel, hasPreviews: hasPreviews, hasEditor: hasEditor }), _jsx(PanelResizeHandle, { className: resizePanelStyles.PanelResizeHandle, hitAreaMargins: { fine: 5, coarse: 5 }, disabled: hideTerminalPanel || !hasPreviews }), _jsx(TerminalSection, { tutorialStore: tutorialStore, theme: theme, terminalPanelRef: terminalPanelRef, terminalExpanded: terminalExpanded, hideTerminalPanel: hideTerminalPanel, hasEditor: hasEditor, hasPreviews: hasPreviews })] }));
+}
+function EditorSection({ theme, tutorialStore, hasEditor }) {
+    const [helpAction, setHelpAction] = useState('reset');
+    const selectedFile = useStore(tutorialStore.selectedFile);
+    const currentDocument = useStore(tutorialStore.currentDocument);
+    const lessonFullyLoaded = useStore(tutorialStore.lessonFullyLoaded);
+    const editorConfig = useStore(tutorialStore.editorConfig);
+    const storeRef = useStore(tutorialStore.ref);
+    const files = useStore(tutorialStore.files);
+    const lesson = tutorialStore.lesson;
+    function onHelpClick() {
+        if (tutorialStore.hasSolution()) {
+            setHelpAction((action) => {
+                if (action === 'reset') {
+                    tutorialStore.reset();
+                    return 'solve';
+                }
+                else {
+                    tutorialStore.solve();
+                    return 'reset';
+                }
+            });
+        }
+        else {
+            tutorialStore.reset();
+        }
+    }
+    async function onFileTreeChange({ method, type, value }) {
+        if (method === 'add' && type === 'file') {
+            return tutorialStore.addFile(value);
+        }
+        if (method === 'add' && type === 'folder') {
+            return tutorialStore.addFolder(value);
+        }
+    }
+    useEffect(() => {
+        if (tutorialStore.hasSolution()) {
+            setHelpAction('solve');
+        }
+        else {
+            setHelpAction('reset');
+        }
+    }, [storeRef]);
+    return (_jsx(Panel, { id: hasEditor ? 'editor-opened' : 'editor-closed', defaultSize: hasEditor ? 50 : 0, minSize: 10, maxSize: hasEditor ? 100 : 0, collapsible: !hasEditor, className: "transition-theme bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor", children: _jsx(EditorPanel, { id: storeRef, theme: theme, showFileTree: tutorialStore.hasFileTree(), editorDocument: currentDocument, files: files, i18n: lesson.data.i18n, hideRoot: lesson.data.hideRoot, helpAction: helpAction, onHelpClick: lessonFullyLoaded ? onHelpClick : undefined, onFileSelect: (filePath) => tutorialStore.setSelectedFile(filePath), onFileTreeChange: onFileTreeChange, allowEditPatterns: editorConfig.fileTree.allowEdits || undefined, selectedFile: selectedFile, onEditorScroll: (position) => tutorialStore.setCurrentDocumentScrollPosition(position), onEditorChange: (update) => tutorialStore.setCurrentDocumentContent(update.content) }) }));
+}
+function PreviewsSection({ tutorialStore, terminalPanelRef, terminalExpanded, hideTerminalPanel, hasPreviews, hasEditor, }) {
+    const previewRef = useRef(null);
+    const lesson = tutorialStore.lesson;
+    const terminalConfig = useStore(tutorialStore.terminalConfig);
+    const storeRef = useStore(tutorialStore.ref);
+    function showTerminal() {
+        const { current: terminal } = terminalPanelRef;
+        if (!terminal) {
+            return;
+        }
+        if (!terminalExpanded.current) {
+            terminalExpanded.current = true;
+            terminal.resize(DEFAULT_TERMINAL_SIZE);
+        }
+        else {
+            terminal.expand();
+        }
+    }
+    const toggleTerminal = useCallback(() => {
+        if (terminalPanelRef.current?.isCollapsed()) {
+            showTerminal();
+        }
+        else if (terminalPanelRef.current) {
+            terminalPanelRef.current.collapse();
+        }
+    }, []);
+    useEffect(() => {
+        if (hideTerminalPanel) {
+            // force hide the terminal if we don't have any panels to show
+            terminalPanelRef.current?.collapse();
+            terminalExpanded.current = false;
+        }
+    }, [hideTerminalPanel]);
+    useEffect(() => {
+        if (terminalConfig.defaultOpen) {
+            showTerminal();
+        }
+    }, [terminalConfig.defaultOpen]);
+    useEffect(() => {
+        const lesson = tutorialStore.lesson;
+        const unsubscribe = tutorialStore.lessonFullyLoaded.subscribe((loaded) => {
+            if (loaded && lesson.data.autoReload) {
+                previewRef.current?.reload();
+            }
+        });
+        return () => unsubscribe();
+    }, [storeRef]);
+    const MIN_SIZE_IN_PIXELS = 38;
+    const [panelMinSize, setPanelMinSize] = useState(10);
+    useEffect(() => {
+        const panelGroup = document.querySelector('div[data-panel-group-id="right-panel-group"]');
+        if (!panelGroup) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            const height = panelGroup?.offsetHeight;
+            setPanelMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
+        });
+        observer.observe(panelGroup);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return (_jsx(Panel, { id: hasPreviews ? 'previews-opened' : 'previews-closed', defaultSize: hasPreviews ? 50 : 0, minSize: panelMinSize, maxSize: hasPreviews ? 100 : 0, collapsible: !hasPreviews, className: classNames({
+            'transition-theme border-t border-tk-elements-app-borderColor': hasEditor,
+        }), children: _jsx(PreviewPanel, { ref: previewRef, tutorialStore: tutorialStore, i18n: lesson.data.i18n, showToggleTerminal: !hideTerminalPanel, toggleTerminal: toggleTerminal }) }));
+}
+function TerminalSection({ tutorialStore, theme, terminalPanelRef, terminalExpanded, hideTerminalPanel, hasEditor, hasPreviews, }) {
+    let id = 'terminal-closed';
+    if (hideTerminalPanel) {
+        id = 'terminal-none';
+    }
+    else if (!hasPreviews && !hasEditor) {
+        id = 'terminal-full';
+    }
+    else if (!hasPreviews) {
+        id = 'terminal-opened';
+    }
+    let defaultSize = 0;
+    if (hideTerminalPanel) {
+        defaultSize = 0;
+    }
+    else if (!hasPreviews && !hasEditor) {
+        defaultSize = 100;
+    }
+    else if (!hasPreviews) {
+        defaultSize = DEFAULT_TERMINAL_SIZE;
+    }
+    return (_jsx(Panel, { id: id, defaultSize: defaultSize, minSize: hideTerminalPanel ? 0 : 10, collapsible: hasPreviews, ref: terminalPanelRef, onExpand: () => {
+            terminalExpanded.current = true;
+        }, className: classNames('transition-theme bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor', {
+            'border-t border-tk-elements-app-borderColor': hasPreviews,
+        }), children: _jsx(TerminalPanel, { tutorialStore: tutorialStore, theme: theme }) }));
+}

package/dist/core/CodeMirrorEditor/BinaryContent.d.ts

@@ -0,0 +1 @@
+export declare function BinaryContent(): import("react/jsx-runtime").JSX.Element;

package/dist/core/CodeMirrorEditor/BinaryContent.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BinaryContent() {
+    return (_jsx("div", { className: "flex items-center justify-center absolute inset-0 z-10 text-sm bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor", children: "File format cannot be displayed." }));
+}

package/dist/core/CodeMirrorEditor/cm-theme.d.ts

@@ -0,0 +1,8 @@
+import { Compartment, type Extension } from '@codemirror/state';
+import '../../styles/cm.css';
+import type { Theme } from '../types.js';
+import type { EditorSettings } from './index.js';
+export declare const darkTheme: Extension;
+export declare const themeSelection: Compartment;
+export declare function getTheme(theme: Theme, settings?: EditorSettings): Extension;
+export declare function reconfigureTheme(theme: Theme): import("@codemirror/state").StateEffect<unknown>;

package/dist/core/CodeMirrorEditor/cm-theme.js

@@ -0,0 +1,167 @@
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { transitionTheme } from '@tutorialkit-rb/theme/transition-theme';
+import '../../styles/cm.css';
+import { vscodeDarkTheme } from './themes/vscode-dark.js';
+export const darkTheme = EditorView.theme({}, { dark: true });
+export const themeSelection = new Compartment();
+export function getTheme(theme, settings = {}) {
+    return [
+        getEditorTheme(settings),
+        theme === 'dark' ? themeSelection.of([getDarkTheme()]) : themeSelection.of([getLightTheme()]),
+    ];
+}
+export function reconfigureTheme(theme) {
+    return themeSelection.reconfigure(theme === 'dark' ? getDarkTheme() : getLightTheme());
+}
+function getEditorTheme(settings) {
+    return EditorView.theme({
+        ...(settings.fontSize && {
+            '&': {
+                fontSize: settings.fontSize,
+            },
+        }),
+        '&.cm-editor': {
+            height: '100%',
+            background: 'var(--cm-backgroundColor)',
+            color: 'var(--cm-textColor)',
+            ...transitionTheme,
+        },
+        '.cm-cursor': {
+            borderLeft: 'var(--cm-cursor-width) solid var(--cm-cursor-backgroundColor)',
+        },
+        '.cm-scroller': {
+            lineHeight: '1.5',
+        },
+        '.cm-line': {
+            padding: '0 0 0 4px',
+        },
+        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+            backgroundColor: 'var(--cm-selection-backgroundColorFocused)',
+            opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)',
+            ...transitionTheme,
+        },
+        '&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+            backgroundColor: 'var(--cm-selection-backgroundColorBlured)',
+            opacity: 'var(--cm-selection-backgroundOpacityBlured, 0.3)',
+            ...transitionTheme,
+        },
+        '&.cm-focused > .cm-scroller .cm-matchingBracket': {
+            backgroundColor: 'var(--cm-matching-bracket)',
+        },
+        '.cm-activeLine': {
+            background: 'var(--cm-activeLineBackgroundColor)',
+            ...transitionTheme,
+        },
+        '.cm-gutters': {
+            background: 'var(--cm-gutter-backgroundColor)',
+            borderRight: 0,
+            color: 'var(--cm-gutter-textColor)',
+            ...transitionTheme,
+        },
+        '.cm-gutter': {
+            '&.cm-lineNumbers': {
+                fontFamily: 'Roboto Mono, monospace',
+                fontSize: '13px',
+                minWidth: '28px',
+            },
+            '& .cm-activeLineGutter': {
+                background: 'transparent',
+                color: 'var(--cm-gutter-activeLineTextColor)',
+            },
+            '&.cm-foldGutter .cm-gutterElement > .fold-icon': {
+                cursor: 'pointer',
+                color: 'var(--cm-foldGutter-textColor)',
+                transform: 'translateY(2px)',
+                '&:hover': {
+                    color: 'var(--cm-foldGutter-textColorHover)',
+                },
+            },
+        },
+        '.cm-foldGutter .cm-gutterElement': {
+            padding: '0 4px',
+        },
+        '.cm-tooltip-autocomplete > ul > li': {
+            minHeight: '18px',
+        },
+        '.cm-panel.cm-search label': {
+            marginLeft: '2px',
+        },
+        '.cm-panel.cm-search input[type=checkbox]': {
+            position: 'relative',
+            transform: 'translateY(2px)',
+            marginRight: '4px',
+        },
+        '.cm-panels': {
+            borderColor: 'var(--cm-panels-borderColor)',
+        },
+        '.cm-panel.cm-search': {
+            background: 'var(--cm-search-backgroundColor)',
+            color: 'var(--cm-search-textColor)',
+            padding: '6px 8px',
+            ...transitionTheme,
+        },
+        '.cm-search .cm-button': {
+            background: 'var(--cm-search-button-backgroundColor)',
+            borderColor: 'var(--cm-search-button-borderColor)',
+            color: 'var(--cm-search-button-textColor)',
+            borderRadius: '4px',
+            '&:hover': {
+                color: 'var(--cm-search-button-textColorHover)',
+            },
+            '&:focus-visible': {
+                outline: 'none',
+                borderColor: 'var(--cm-search-button-borderColorFocused)',
+            },
+            '&:hover:not(:focus-visible)': {
+                background: 'var(--cm-search-button-backgroundColorHover)',
+                borderColor: 'var(--cm-search-button-borderColorHover)',
+            },
+            '&:hover:focus-visible': {
+                background: 'var(--cm-search-button-backgroundColorHover)',
+                borderColor: 'var(--cm-search-button-borderColorFocused)',
+            },
+            ...transitionTheme,
+        },
+        '.cm-panel.cm-search [name=close]': {
+            top: '6px',
+            right: '6px',
+            padding: '0 6px',
+            backgroundColor: 'var(--cm-search-closeButton-backgroundColor)',
+            color: 'var(--cm-search-closeButton-textColor)',
+            '&:hover': {
+                'border-radius': '6px',
+                color: 'var(--cm-search-closeButton-textColorHover)',
+                backgroundColor: 'var(--cm-search-closeButton-backgroundColorHover)',
+                ...transitionTheme,
+            },
+            ...transitionTheme,
+        },
+        '.cm-search input': {
+            background: 'var(--cm-search-input-backgroundColor)',
+            borderColor: 'var(--cm-search-input-borderColor)',
+            outline: 'none',
+            borderRadius: '4px',
+            '&:focus-visible': {
+                borderColor: 'var(--cm-search-input-borderColorFocused)',
+                ...transitionTheme,
+            },
+        },
+        '.cm-tooltip': {
+            background: 'var(--cm-tooltip-backgroundColor)',
+            borderColor: 'var(--cm-tooltip-borderColor)',
+            color: 'var(--cm-tooltip-textColor)',
+        },
+        '.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': {
+            background: 'var(--cm-tooltip-backgroundColorSelected)',
+            color: 'var(--cm-tooltip-textColorSelected)',
+        },
+    });
+}
+function getLightTheme() {
+    return syntaxHighlighting(defaultHighlightStyle);
+}
+function getDarkTheme() {
+    return syntaxHighlighting(vscodeDarkTheme);
+}

package/dist/core/CodeMirrorEditor/indent.d.ts

@@ -0,0 +1,2 @@
+import { type KeyBinding } from '@codemirror/view';
+export declare const indentKeyBinding: KeyBinding;

package/dist/core/CodeMirrorEditor/indent.js

@@ -0,0 +1,49 @@
+import { indentLess } from '@codemirror/commands';
+import { indentUnit } from '@codemirror/language';
+import { EditorSelection, EditorState, Line } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+export const indentKeyBinding = {
+    key: 'Tab',
+    run: indentMore,
+    shift: indentLess,
+};
+function indentMore({ state, dispatch }) {
+    if (state.readOnly) {
+        return false;
+    }
+    dispatch(state.update(changeBySelectedLine(state, (from, to, changes) => {
+        changes.push({ from, to, insert: state.facet(indentUnit) });
+    }), { userEvent: 'input.indent' }));
+    return true;
+}
+function changeBySelectedLine(state, cb) {
+    return state.changeByRange((range) => {
+        const changes = [];
+        const line = state.doc.lineAt(range.from);
+        // just insert single indent unit at the current cursor position
+        if (range.from === range.to) {
+            cb(range.from, undefined, changes, line);
+        }
+        // handle the case when multiple characters are selected in a single line
+        else if (range.from < range.to && range.to <= line.to) {
+            cb(range.from, range.to, changes, line);
+        }
+        else {
+            let atLine = -1;
+            // handle the case when selection spans multiple lines
+            for (let pos = range.from; pos <= range.to;) {
+                const line = state.doc.lineAt(pos);
+                if (line.number > atLine && (range.empty || range.to > line.from)) {
+                    cb(line.from, undefined, changes, line);
+                    atLine = line.number;
+                }
+                pos = line.to + 1;
+            }
+        }
+        const changeSet = state.changes(changes);
+        return {
+            changes,
+            range: EditorSelection.range(changeSet.mapPos(range.anchor, 1), changeSet.mapPos(range.head, 1)),
+        };
+    });
+}

package/dist/core/CodeMirrorEditor/index.d.ts

@@ -0,0 +1,39 @@
+import { EditorSelection } from '@codemirror/state';
+import type { Theme } from '../types.js';
+export interface EditorDocument {
+    value: string | Uint8Array;
+    loading: boolean;
+    filePath: string;
+    scroll?: ScrollPosition;
+}
+export interface EditorSettings {
+    fontSize?: string;
+    tabSize?: number;
+}
+export interface ScrollPosition {
+    top: number;
+    left: number;
+}
+export interface EditorUpdate {
+    selection: EditorSelection;
+    content: string;
+}
+export type OnChangeCallback = (update: EditorUpdate) => void;
+export type OnScrollCallback = (position: ScrollPosition) => void;
+interface Props {
+    theme: Theme;
+    id?: unknown;
+    doc?: EditorDocument;
+    debounceChange?: number;
+    debounceScroll?: number;
+    autoFocusOnDocumentChange?: boolean;
+    onChange?: OnChangeCallback;
+    onScroll?: OnScrollCallback;
+    className?: string;
+    settings?: EditorSettings;
+}
+export declare function CodeMirrorEditor({ id, doc, debounceScroll, debounceChange, autoFocusOnDocumentChange, onScroll, onChange, theme, settings, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeMirrorEditor {
+    var displayName: string;
+}
+export default CodeMirrorEditor;

package/dist/core/CodeMirrorEditor/index.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { acceptCompletion, autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, foldGutter, indentOnInput, indentUnit } from '@codemirror/language';
+import { searchKeymap } from '@codemirror/search';
+import { Compartment, EditorSelection, EditorState } from '@codemirror/state';
+import { EditorView, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, scrollPastEnd, } from '@codemirror/view';
+import { useEffect, useRef, useState } from 'react';
+import { classNames } from '../../utils/classnames.js';
+import { debounce } from '../../utils/debounce.js';
+import { BinaryContent } from './BinaryContent.js';
+import { getTheme, reconfigureTheme } from './cm-theme.js';
+import { indentKeyBinding } from './indent.js';
+import { getLanguage } from './languages.js';
+export function CodeMirrorEditor({ id, doc, debounceScroll = 100, debounceChange = 150, autoFocusOnDocumentChange = false, onScroll, onChange, theme, settings, className = '', }) {
+    const [language] = useState(new Compartment());
+    const [readOnly] = useState(new Compartment());
+    const containerRef = useRef(null);
+    const viewRef = useRef();
+    const themeRef = useRef();
+    const docRef = useRef();
+    const editorStatesRef = useRef();
+    const onScrollRef = useRef(onScroll);
+    const onChangeRef = useRef(onChange);
+    const isBinaryFile = doc?.value instanceof Uint8Array;
+    onScrollRef.current = onScroll;
+    onChangeRef.current = onChange;
+    docRef.current = doc;
+    themeRef.current = theme;
+    useEffect(() => {
+        const onUpdate = debounce((update) => {
+            onChangeRef.current?.(update);
+        }, debounceChange);
+        const view = new EditorView({
+            parent: containerRef.current,
+            dispatchTransactions(transactions) {
+                const previousSelection = view.state.selection;
+                view.update(transactions);
+                const newSelection = view.state.selection;
+                const selectionChanged = newSelection !== previousSelection &&
+                    (newSelection === undefined || previousSelection === undefined || !newSelection.eq(previousSelection));
+                if (docRef.current &&
+                    !docRef.current.loading &&
+                    (transactions.some((transaction) => transaction.docChanged) || selectionChanged)) {
+                    onUpdate({
+                        selection: view.state.selection,
+                        content: view.state.doc.toString(),
+                    });
+                    editorStatesRef.current.set(docRef.current.filePath, view.state);
+                }
+            },
+        });
+        viewRef.current = view;
+        // we grab the style tag that codemirror mounts
+        const codemirrorStyleTag = document.head.children[0];
+        codemirrorStyleTag.setAttribute('data-astro-transition-persist', 'codemirror');
+        return () => {
+            viewRef.current?.destroy();
+            viewRef.current = undefined;
+        };
+    }, []);
+    useEffect(() => {
+        if (!viewRef.current) {
+            return;
+        }
+        viewRef.current.dispatch({
+            effects: [reconfigureTheme(theme)],
+        });
+    }, [theme]);
+    useEffect(() => {
+        editorStatesRef.current = new Map();
+    }, [id]);
+    useEffect(() => {
+        const editorStates = editorStatesRef.current;
+        const view = viewRef.current;
+        const theme = themeRef.current;
+        if (!doc) {
+            setNoDocument(view);
+            return;
+        }
+        if (doc.value instanceof Uint8Array) {
+            return;
+        }
+        let state = editorStates.get(doc.filePath);
+        if (!state) {
+            state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, [
+                language.of([]),
+                readOnly.of([EditorState.readOnly.of(doc.loading)]),
+            ]);
+            editorStates.set(doc.filePath, state);
+        }
+        view.setState(state);
+        setEditorDocument(view, theme, language, readOnly, autoFocusOnDocumentChange, doc);
+    }, [doc?.value, doc?.filePath, doc?.loading, autoFocusOnDocumentChange]);
+    return (_jsxs("div", { className: classNames('relative', className), children: [isBinaryFile && _jsx(BinaryContent, {}), _jsx("div", { className: "h-full overflow-hidden", ref: containerRef })] }));
+}
+export default CodeMirrorEditor;
+CodeMirrorEditor.displayName = 'CodeMirrorEditor';
+function newEditorState(content, theme, settings, onScrollRef, debounceScroll, extensions) {
+    return EditorState.create({
+        doc: content,
+        extensions: [
+            EditorView.contentAttributes.of({ 'aria-label': 'Editor' }),
+            EditorView.domEventHandlers({
+                scroll: debounce((_event, view) => {
+                    onScrollRef.current?.({ left: view.scrollDOM.scrollLeft, top: view.scrollDOM.scrollTop });
+                }, debounceScroll),
+                keydown: (event) => {
+                    if (event.code === 'KeyS' && (event.ctrlKey || event.metaKey)) {
+                        event.preventDefault();
+                    }
+                },
+            }),
+            getTheme(theme, settings),
+            history(),
+            keymap.of([
+                ...defaultKeymap,
+                ...historyKeymap,
+                ...searchKeymap,
+                { key: 'Tab', run: acceptCompletion },
+                indentKeyBinding,
+            ]),
+            indentUnit.of('\t'),
+            autocompletion({
+                closeOnBlur: false,
+            }),
+            closeBrackets(),
+            lineNumbers(),
+            scrollPastEnd(),
+            dropCursor(),
+            drawSelection(),
+            bracketMatching(),
+            EditorState.tabSize.of(settings?.tabSize ?? 2),
+            indentOnInput(),
+            highlightActiveLineGutter(),
+            highlightActiveLine(),
+            foldGutter({
+                markerDOM: (open) => {
+                    const icon = document.createElement('div');
+                    icon.className = `fold-icon ${open ? 'i-ph-caret-down-bold' : 'i-ph-caret-right-bold'}`;
+                    return icon;
+                },
+            }),
+            ...extensions,
+        ],
+    });
+}
+function setNoDocument(view) {
+    view.dispatch({
+        selection: { anchor: 0 },
+        changes: {
+            from: 0,
+            to: view.state.doc.length,
+            insert: '',
+        },
+    });
+    view.scrollDOM.scrollTo(0, 0);
+}
+function setEditorDocument(view, theme, language, readOnly, autoFocus, doc) {
+    if (doc.value !== view.state.doc.toString()) {
+        view.dispatch({
+            selection: { anchor: 0 },
+            changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: doc.value,
+            },
+        });
+    }
+    view.dispatch({
+        effects: [readOnly.reconfigure([EditorState.readOnly.of(doc.loading)])],
+    });
+    getLanguage(doc.filePath).then((languageSupport) => {
+        if (!languageSupport) {
+            return;
+        }
+        view.dispatch({
+            effects: [language.reconfigure([languageSupport]), reconfigureTheme(theme)],
+        });
+        requestAnimationFrame(() => {
+            const currentLeft = view.scrollDOM.scrollLeft;
+            const currentTop = view.scrollDOM.scrollTop;
+            const newLeft = doc.scroll?.left ?? 0;
+            const newTop = doc.scroll?.top ?? 0;
+            const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
+            if (autoFocus) {
+                if (needsScrolling) {
+                    // we have to wait until the scroll position was changed before we can set the focus
+                    view.scrollDOM.addEventListener('scroll', () => {
+                        view.focus();
+                    }, { once: true });
+                }
+                else {
+                    // if the scroll position is still the same we can focus immediately
+                    view.focus();
+                }
+            }
+            view.scrollDOM.scrollTo(newLeft, newTop);
+        });
+    });
+}

package/dist/core/CodeMirrorEditor/languages.d.ts

@@ -0,0 +1,3 @@
+import { LanguageDescription, LanguageSupport } from '@codemirror/language';
+export declare const supportedLanguages: LanguageDescription[];
+export declare function getLanguage(fileName: string): Promise<LanguageSupport | undefined>;