@joinezco/codeblock 0.0.8 → 0.0.10

package/dist/editor.d.ts

@@ -4,7 +4,23 @@ import { HighlightStyle } from "@codemirror/language";
 import { VfsInterface } from "./types";
 import { ExtensionOrLanguage } from "./lsps";
 import { SearchIndex } from "./utils/search";
-export type { CommandResult } from "./panels/toolbar";
+import { TypescriptDefaultsConfig } from "./utils/typescript-defaults";
+import type { EditorSettings } from "./panels/settings";
+export type { CommandResult, BrowseEntry } from "./panels/toolbar";
+declare class FileChangeBus {
+    private listeners;
+    subscribe(path: string, view: EditorView, callback: (content: string) => void): () => void;
+    /** Notify all listeners for `path` except the source view. */
+    notify(path: string, content: string, sourceView: EditorView): void;
+}
+export declare const fileChangeBus: FileChangeBus;
+type SettingsChangeCallback = (settings: Partial<import("./panels/settings").EditorSettings>) => void;
+declare class SettingsChangeBus {
+    private listeners;
+    subscribe(view: EditorView, callback: SettingsChangeCallback): () => void;
+    notify(settings: Partial<import("./panels/settings").EditorSettings>, sourceView: EditorView): void;
+}
+export declare const settingsChangeBus: SettingsChangeBus;
 export type CodeblockConfig = {
     fs: VfsInterface;
     cwd?: string;
@@ -14,6 +30,11 @@ export type CodeblockConfig = {
     index?: SearchIndex;
     language?: ExtensionOrLanguage;
     dark?: boolean;
+    settings?: Partial<EditorSettings>;
+    typescript?: TypescriptDefaultsConfig & {
+        /** Resolves a TypeScript lib name (e.g. "es5") to its `.d.ts` file content */
+        resolveLib: (name: string) => Promise<string>;
+    };
 };
 export type CreateCodeblockArgs = CodeblockConfig & {
     parent: HTMLElement;
@@ -25,8 +46,13 @@ export declare const languageSupportCompartment: Compartment;
 export declare const languageServerCompartment: Compartment;
 export declare const indentationCompartment: Compartment;
 export declare const readOnlyCompartment: Compartment;
+export declare const lineWrappingCompartment: Compartment;
+export declare const terminalCompartment: Compartment;
+export declare const lineNumbersCompartment: Compartment;
+export declare const foldGutterCompartment: Compartment;
 export declare const openFileEffect: import("@codemirror/state").StateEffectType<{
     path: string;
+    skipSave?: boolean;
 }>;
 export declare const fileLoadedEffect: import("@codemirror/state").StateEffectType<{
     path: string;
@@ -36,6 +62,7 @@ export declare const fileLoadedEffect: import("@codemirror/state").StateEffectTy
 export declare const setThemeEffect: import("@codemirror/state").StateEffectType<{
     dark: boolean;
 }>;
+export declare const toggleSvgPreviewEffect: import("@codemirror/state").StateEffectType<void>;
 export declare const currentFileField: StateField<{
     path: string | null;
     content: string;
@@ -43,11 +70,11 @@ export declare const currentFileField: StateField<{
     loading: boolean;
 }>;
 export declare const renderMarkdownCode: (code: any, parser: any, highlighter: HighlightStyle) => string;
-export declare const codeblock: ({ content, fs, cwd, filepath, language, toolbar, index }: CodeblockConfig) => (Extension | StateField<import("./panels/toolbar").SearchResult[]> | StateField<{
+export declare const codeblock: ({ content, fs, cwd, filepath, language, toolbar, index, dark, settings, typescript }: CodeblockConfig) => (Extension | StateField<EditorSettings> | StateField<import("./panels/toolbar").SearchResult[]> | StateField<{
     path: string | null;
     content: string;
     language: ExtensionOrLanguage | null;
     loading: boolean;
 }>)[];
 export declare const basicSetup: Extension;
-export declare function createCodeblock({ parent, fs, filepath, language, content, cwd, toolbar, index, dark }: CreateCodeblockArgs): EditorView;
+export declare function createCodeblock({ parent, fs, filepath, language, content, cwd, toolbar, index, dark, settings, typescript }: CreateCodeblockArgs): EditorView;

package/dist/editor.js

@@ -9,13 +9,59 @@ import { completionKeymap, closeBrackets, closeBracketsKeymap } from "@codemirro
 import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, indentUnit, syntaxHighlighting } from "@codemirror/language";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 import { extOrLanguageToLanguageId, getLanguageSupport } from "./lsps";
-import { documentUri, languageId } from '@marimo-team/codemirror-languageserver';
-import { lintKeymap } from "@codemirror/lint";
+import { lintKeymap, setDiagnostics } from "@codemirror/lint";
 import { highlightCode } from "@lezer/highlight";
-import { LSP } from "./utils/lsp";
-import { toolbarPanel, searchResultsField } from "./panels/toolbar";
+import { LSP, FileChangeType } from "./utils/lsp";
+import { prefillTypescriptDefaults, getCachedLibFiles } from "./utils/typescript-defaults";
+import { toolbarPanel, searchResultsField, registerFileAction } from "./panels/toolbar";
+import { settingsField, updateSettingsEffect, resolveThemeDark, InitialSettingsFacet } from "./panels/settings";
 import { StyleModule } from "style-mod";
 import { dirname } from "path-browserify";
+class FileChangeBus {
+    listeners = new Map();
+    subscribe(path, view, callback) {
+        let set = this.listeners.get(path);
+        if (!set) {
+            set = new Set();
+            this.listeners.set(path, set);
+        }
+        const listener = { view, callback };
+        set.add(listener);
+        return () => {
+            set.delete(listener);
+            if (set.size === 0)
+                this.listeners.delete(path);
+        };
+    }
+    /** Notify all listeners for `path` except the source view. */
+    notify(path, content, sourceView) {
+        const set = this.listeners.get(path);
+        if (!set)
+            return;
+        for (const listener of set) {
+            if (listener.view !== sourceView) {
+                listener.callback(content);
+            }
+        }
+    }
+}
+export const fileChangeBus = new FileChangeBus();
+class SettingsChangeBus {
+    listeners = new Set();
+    subscribe(view, callback) {
+        const entry = { view, callback };
+        this.listeners.add(entry);
+        return () => this.listeners.delete(entry);
+    }
+    notify(settings, sourceView) {
+        for (const entry of this.listeners) {
+            if (entry.view !== sourceView) {
+                entry.callback(settings);
+            }
+        }
+    }
+}
+export const settingsChangeBus = new SettingsChangeBus();
 export const CodeblockFacet = Facet.define({
     combine: (values) => values[0]
 });
@@ -25,11 +71,17 @@ export const languageSupportCompartment = new Compartment();
 export const languageServerCompartment = new Compartment();
 export const indentationCompartment = new Compartment();
 export const readOnlyCompartment = new Compartment();
+export const lineWrappingCompartment = new Compartment();
+export const terminalCompartment = new Compartment();
+export const lineNumbersCompartment = new Compartment();
+export const foldGutterCompartment = new Compartment();
 // Effects + Fields for async file handling
 export const openFileEffect = StateEffect.define();
 export const fileLoadedEffect = StateEffect.define();
 // Light mode/dark mode theme toggle
 export const setThemeEffect = StateEffect.define();
+// SVG preview toggle
+export const toggleSvgPreviewEffect = StateEffect.define();
 // Holds the current file lifecycle
 export const currentFileField = StateField.define({
     create(state) {
@@ -95,43 +147,242 @@ export const renderMarkdownCode = (code, parser, highlighter) => {
     return result.getHTML();
 };
 // Main codeblock factory
-export const codeblock = ({ content, fs, cwd, filepath, language, toolbar = true, index }) => [
-    configCompartment.of(CodeblockFacet.of({ content, fs, filepath, cwd, language, toolbar, index })),
-    currentFileField,
-    languageSupportCompartment.of([]),
-    languageServerCompartment.of([]),
-    indentationCompartment.of(indentUnit.of("    ")),
-    readOnlyCompartment.of(EditorState.readOnly.of(false)),
-    tooltips({ position: "fixed" }),
-    showPanel.of(toolbar ? toolbarPanel : null),
-    codeblockTheme,
-    codeblockView,
-    keymap.of(navigationKeymap.concat([indentWithTab])),
-    vscodeLightDark,
-    searchResultsField,
-];
+export const codeblock = ({ content, fs, cwd, filepath, language, toolbar = true, index, dark, settings, typescript }) => {
+    // Merge dark flag into initial settings for backward compat
+    const resolvedSettings = { ...settings };
+    if (dark !== undefined && !('theme' in resolvedSettings)) {
+        resolvedSettings.theme = dark ? 'dark' : 'light';
+    }
+    const showLineNums = resolvedSettings.showLineNumbers !== false; // default true
+    const showFold = resolvedSettings.showFoldGutter !== false; // default true
+    return [
+        configCompartment.of(CodeblockFacet.of({ content, fs, filepath, cwd, language, toolbar, index, dark, settings, typescript })),
+        InitialSettingsFacet.of(resolvedSettings),
+        currentFileField,
+        languageSupportCompartment.of([]),
+        languageServerCompartment.of([]),
+        indentationCompartment.of(indentUnit.of("    ")),
+        readOnlyCompartment.of(EditorState.readOnly.of(false)),
+        lineWrappingCompartment.of([]),
+        terminalCompartment.of([]),
+        lineNumbersCompartment.of(showLineNums ? [lineNumbers(), highlightActiveLineGutter()] : []),
+        foldGutterCompartment.of(showFold ? [foldGutter()] : []),
+        tooltips({ position: "fixed" }),
+        showPanel.of(toolbar ? toolbarPanel : null),
+        settingsField,
+        codeblockTheme,
+        codeblockView,
+        keymap.of(navigationKeymap.concat([indentWithTab])),
+        vscodeLightDark,
+        searchResultsField,
+    ];
+};
 // ViewPlugin reacts to field state & effects, with microtask scheduling to avoid nested updates
+// Inject @font-face for Nerd Font icons (idempotent)
+let nerdFontInjected = false;
+function injectNerdFontFace() {
+    if (nerdFontInjected)
+        return;
+    nerdFontInjected = true;
+    const style = document.createElement('style');
+    style.textContent = `@font-face {
+  font-family: 'UbuntuMono NF';
+  src: url('/fonts/UbuntuMonoNerdFont-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}`;
+    document.head.appendChild(style);
+}
 const codeblockView = ViewPlugin.define((view) => {
     StyleModule.mount(document, vscodeStyleMod);
+    injectNerdFontFace();
     let { fs } = view.state.facet(CodeblockFacet);
+    // Flag to suppress save when receiving external file updates
+    let receivingExternalUpdate = false;
+    // Flag to suppress re-broadcast when receiving settings from another editor
+    let receivingExternalSettings = false;
+    // Subscription cleanup for file change notifications
+    let unsubscribeFileChanges = null;
+    // Subscribe to settings changes from other editors
+    const unsubscribeSettings = settingsChangeBus.subscribe(view, (partial) => {
+        receivingExternalSettings = true;
+        try {
+            const effects = [updateSettingsEffect.of(partial)];
+            if ('theme' in partial && partial.theme) {
+                effects.push(setThemeEffect.of({ dark: resolveThemeDark(partial.theme) }));
+            }
+            if ('lineWrap' in partial) {
+                effects.push(lineWrappingCompartment.reconfigure(partial.lineWrap ? EditorView.lineWrapping : []));
+            }
+            if ('showLineNumbers' in partial) {
+                effects.push(lineNumbersCompartment.reconfigure(partial.showLineNumbers ? [lineNumbers(), highlightActiveLineGutter()] : []));
+            }
+            if ('showFoldGutter' in partial) {
+                effects.push(foldGutterCompartment.reconfigure(partial.showFoldGutter ? [foldGutter()] : []));
+            }
+            // autoHideToolbar is handled by the toolbar panel's JS event handlers,
+            // not CSS classes — the updateSettingsEffect propagation is sufficient.
+            view.dispatch({ effects });
+        }
+        finally {
+            receivingExternalSettings = false;
+        }
+    });
     // Debounced save
     const save = debounce(async () => {
         const fileState = view.state.field(currentFileField);
         if (fileState.path) {
+            const content = view.state.doc.toString();
             // confirm parent exists
             const parent = dirname(fileState.path);
             if (parent) {
                 await fs.mkdir(parent, { recursive: true }).catch(console.error);
             }
-            await fs.writeFile(fileState.path, view.state.doc.toString()).catch(console.error);
+            await fs.writeFile(fileState.path, content).catch(console.error);
+            LSP.notifyFileChanged(fileState.path, FileChangeType.Changed);
+            // Notify other views of the same file
+            fileChangeBus.notify(fileState.path, content, view);
         }
     }, 500);
+    // Subscribe to external file changes for the given path
+    function subscribeToFileChanges(path) {
+        // Unsubscribe from previous file
+        if (unsubscribeFileChanges) {
+            unsubscribeFileChanges();
+            unsubscribeFileChanges = null;
+        }
+        unsubscribeFileChanges = fileChangeBus.subscribe(path, view, (newContent) => {
+            const currentContent = view.state.doc.toString();
+            if (newContent === currentContent)
+                return; // No change
+            receivingExternalUpdate = true;
+            try {
+                view.dispatch({
+                    changes: { from: 0, to: view.state.doc.length, insert: newContent }
+                });
+            }
+            finally {
+                receivingExternalUpdate = false;
+            }
+        });
+    }
     // Guard to prevent duplicate opens for same path while loading
     let opening = null;
+    // Track the path of the currently loaded file for correct save-on-switch.
+    // Only set AFTER a file has actually been loaded (not during initial loading state).
+    const initialFile = view.state.field(currentFileField);
+    let activePath = (initialFile.loading) ? null : initialFile.path;
+    // Preview element for images/SVGs
+    let previewEl = null;
+    let svgViewMode = 'preview';
+    const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'ico', 'avif']);
+    const SVG_EXTENSION = 'svg';
+    function hideScroller() {
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            // CodeMirror sets `display: flex !important` on .cm-scroller,
+            // so we can't use display:none. Hide via collapse instead.
+            scroller.style.visibility = 'hidden';
+            scroller.style.height = '0';
+            scroller.style.overflow = 'hidden';
+            scroller.style.position = 'absolute';
+        }
+    }
+    function showScroller() {
+        const scroller = view.dom.querySelector('.cm-scroller');
+        if (scroller) {
+            scroller.style.visibility = '';
+            scroller.style.height = '';
+            scroller.style.overflow = '';
+            scroller.style.position = '';
+        }
+    }
+    function removePreview() {
+        if (previewEl) {
+            previewEl.remove();
+            previewEl = null;
+        }
+        svgViewMode = 'preview';
+        showScroller();
+    }
+    function showImagePreview(content) {
+        removePreview();
+        previewEl = document.createElement('div');
+        previewEl.className = 'cm-image-preview';
+        previewEl.style.cssText = 'display:flex;align-items:center;justify-content:center;padding:16px;min-height:200px;overflow:auto;background:var(--cm-background, #1e1e1e);';
+        const img = document.createElement('img');
+        if (content.startsWith('data:') || content.startsWith('http') || content.startsWith('blob:')) {
+            img.src = content;
+        }
+        else {
+            const msg = document.createElement('div');
+            msg.style.cssText = 'color:var(--cm-toolbar-color, #ccc);text-align:center;';
+            msg.textContent = 'Image preview unavailable (import from disk to view)';
+            previewEl.appendChild(msg);
+            view.dom.appendChild(previewEl);
+            return;
+        }
+        img.style.maxWidth = '100%';
+        img.style.maxHeight = '400px';
+        img.style.objectFit = 'contain';
+        previewEl.appendChild(img);
+        hideScroller();
+        view.dom.appendChild(previewEl);
+    }
+    function renderSvgInto(container, content) {
+        container.innerHTML = '';
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(content, 'image/svg+xml');
+            const svgEl = doc.documentElement;
+            if (svgEl.tagName === 'svg') {
+                svgEl.style.maxWidth = '100%';
+                svgEl.style.maxHeight = '300px';
+                svgEl.removeAttribute('width');
+                svgEl.removeAttribute('height');
+                container.appendChild(document.importNode(svgEl, true));
+            }
+            else {
+                container.textContent = 'Invalid SVG';
+                container.style.color = 'var(--cm-toolbar-color, #ccc)';
+            }
+        }
+        catch {
+            container.textContent = 'SVG parse error';
+            container.style.color = 'var(--cm-toolbar-color, #ccc)';
+        }
+    }
+    function showSvgView(content, mode) {
+        removePreview();
+        svgViewMode = mode;
+        previewEl = document.createElement('div');
+        previewEl.className = 'cm-svg-preview';
+        if (mode === 'preview') {
+            // Preview mode: hide editor, show rendered SVG
+            hideScroller();
+            previewEl.style.cssText = 'padding:16px;display:flex;align-items:center;justify-content:center;overflow:auto;background:var(--cm-background, #1e1e1e);min-height:200px;';
+            renderSvgInto(previewEl, content);
+        }
+        else {
+            // Source mode: show editor, hide preview
+            showScroller();
+            previewEl.style.display = 'none';
+        }
+        view.dom.appendChild(previewEl);
+    }
+    function updateSvgPreview() {
+        if (!previewEl || !previewEl.classList.contains('cm-svg-preview') || previewEl.style.display === 'none')
+            return;
+        renderSvgInto(previewEl, view.state.doc.toString());
+    }
     async function setLanguageSupport(language) {
         if (!language)
             return;
-        const langSupport = await getLanguageSupport(extOrLanguageToLanguageId[language]);
+        const langSupport = await getLanguageSupport(extOrLanguageToLanguageId[language]).catch((e) => {
+            console.error(`Failed to load language support for ${language}`, e);
+            return null;
+        });
         safeDispatch(view, {
             effects: [
                 languageSupportCompartment.reconfigure(langSupport || []),
@@ -144,10 +395,28 @@ const codeblockView = ViewPlugin.define((view) => {
         if (opening === path)
             return;
         opening = path;
+        // Cancel the debounced save and manually flush the current file.
+        // We can't use save.flush() because openFileEffect has already updated
+        // currentFileField.path to the NEW path, but the document still holds
+        // the OLD file's content. Using activePath ensures we write to the
+        // correct location.
+        save.cancel();
+        if (activePath && view.state.field(settingsField).autosave) {
+            const oldPath = activePath;
+            const oldContent = view.state.doc.toString();
+            const parent = dirname(oldPath);
+            if (parent)
+                await fs.mkdir(parent, { recursive: true }).catch(console.error);
+            await fs.writeFile(oldPath, oldContent).catch(console.error);
+            LSP.notifyFileChanged(oldPath, FileChangeType.Changed);
+        }
         try {
             const ext = path.split('.').pop()?.toLowerCase();
             const lang = (ext ? (extOrLanguageToLanguageId)[ext] ?? null : language) || 'markdown';
-            let langSupport = lang ? await getLanguageSupport(lang) : null;
+            let langSupport = lang ? await getLanguageSupport(lang).catch((e) => {
+                console.error(`Failed to load language support for ${lang}`, e);
+                return null;
+            }) : null;
             safeDispatch(view, {
                 effects: [
                     languageSupportCompartment.reconfigure(langSupport || []),
@@ -155,20 +424,78 @@ const codeblockView = ViewPlugin.define((view) => {
             });
             const exists = await fs.exists(path);
             const content = exists ? await fs.readFile(path) : "";
+            // Ensure the file exists on VFS before LSP initialization.
+            // The LSP uses readDirectory to find source files and match them
+            // against tsconfig. If the file doesn't exist yet, Volar falls
+            // back to an inferred project that lacks lib file configuration.
+            if (!exists) {
+                await fs.mkdir(dirname(path), { recursive: true }).catch(() => { });
+                await fs.writeFile(path, content);
+                LSP.notifyFileChanged(path, FileChangeType.Created);
+            }
+            // Add new files to the search index so they appear in future searches
+            const { index } = view.state.facet(CodeblockFacet);
+            if (index) {
+                index.add(path);
+                if (index.savePath)
+                    index.save(fs, index.savePath);
+            }
             const unit = detectIndentationUnit(content) || "    ";
-            let lsp = lang ? await LSP.client({ view, language: lang, path, fs }) : null;
-            safeDispatch(view, {
-                changes: { from: 0, to: view.state.doc.length, insert: content },
-                effects: [
-                    indentationCompartment.reconfigure(indentUnit.of(unit)),
-                    fileLoadedEffect.of({ path, content, language: lang }),
-                    languageServerCompartment.reconfigure([
-                        documentUri.of(`file:///${path}`),
-                        languageId.of(lang || ""),
-                        ...(lsp ? [lsp] : [])
-                    ]),
-                ]
-            });
+            // Lazily pre-fill TypeScript lib definitions when a TS/JS file is first opened
+            const tsExtensions = ['ts', 'tsx', 'js', 'jsx', 'mjs', 'cjs', 'mts', 'cts'];
+            const { typescript } = view.state.facet(CodeblockFacet);
+            let libFiles;
+            if (typescript?.resolveLib && ext && tsExtensions.includes(ext)) {
+                libFiles = await prefillTypescriptDefaults(fs, typescript.resolveLib, typescript);
+            }
+            else {
+                libFiles = getCachedLibFiles();
+            }
+            let lsp = null;
+            if (lang) {
+                try {
+                    lsp = await LSP.client({ language: lang, path, fs, libFiles });
+                }
+                catch (lspErr) {
+                    // Gracefully degrade when LSP is unavailable (e.g. missing worker, test environment)
+                    console.warn("LSP unavailable for this view:", lspErr);
+                }
+            }
+            activePath = path;
+            // Check for image/SVG files
+            const isRasterImage = ext ? IMAGE_EXTENSIONS.has(ext) : false;
+            const isSvg = ext === SVG_EXTENSION;
+            // Clear stale diagnostics from previous file
+            safeDispatch(view, setDiagnostics(view.state, []));
+            if (isRasterImage) {
+                // Raster image: show preview, hide editor content
+                safeDispatch(view, {
+                    changes: { from: 0, to: view.state.doc.length, insert: content },
+                    effects: [
+                        fileLoadedEffect.of({ path, content, language: null }),
+                        readOnlyCompartment.reconfigure(EditorState.readOnly.of(true)),
+                    ]
+                });
+                showImagePreview(content);
+            }
+            else {
+                // Remove any existing preview
+                removePreview();
+                safeDispatch(view, {
+                    changes: { from: 0, to: view.state.doc.length, insert: content },
+                    effects: [
+                        indentationCompartment.reconfigure(indentUnit.of(unit)),
+                        fileLoadedEffect.of({ path, content, language: lang }),
+                        languageServerCompartment.reconfigure(lsp ? [lsp] : []),
+                    ]
+                });
+                // SVG: show live preview below the editor
+                if (isSvg) {
+                    showSvgView(content, 'preview');
+                }
+            }
+            // Subscribe to changes from other views of the same file
+            subscribeToFileChanges(path);
         }
         catch (e) {
             console.error("Failed to open file", e);
@@ -189,12 +516,25 @@ const codeblockView = ViewPlugin.define((view) => {
         update(u) {
             // React to explicit openFileEffect requests
             for (let e of u.transactions.flatMap(t => t.effects)) {
-                if (e.is(openFileEffect))
+                if (e.is(openFileEffect)) {
+                    // Cancel debounced save immediately to prevent it from writing
+                    // the old document content to the wrong (new) file path
+                    save.cancel();
+                    if (e.value.skipSave) {
+                        // Caller already handled file operations (e.g. rename) —
+                        // clear activePath so handleOpen won't save-on-switch
+                        activePath = null;
+                    }
                     queueMicrotask(() => handleOpen(e.value.path));
+                }
                 if (e.is(setThemeEffect)) {
                     const dark = e.value.dark;
                     u.view.dom.setAttribute('data-theme', dark ? 'dark' : 'light');
                 }
+                if (e.is(toggleSvgPreviewEffect)) {
+                    const newMode = svgViewMode === 'preview' ? 'source' : 'preview';
+                    showSvgView(view.state.doc.toString(), newMode);
+                }
             }
             // Keep read-only in sync with loading state without dispatching new transactions
             const prev = u.startState.field(currentFileField);
@@ -203,21 +543,46 @@ const codeblockView = ViewPlugin.define((view) => {
                 // Reconfigure readOnly via compartment inside the same update when possible
                 safeDispatch(view, { effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(next.loading)) });
             }
-            if (u.docChanged)
+            if (u.docChanged && !receivingExternalUpdate && u.state.field(settingsField).autosave)
                 save();
+            // Live SVG preview update
+            if (u.docChanged && previewEl?.classList.contains('cm-svg-preview')) {
+                updateSvgPreview();
+            }
+            // Broadcast settings changes to other editors (unless we received them externally)
+            const prevSettings = u.startState.field(settingsField);
+            const nextSettings = u.state.field(settingsField);
+            if (prevSettings !== nextSettings && !receivingExternalSettings) {
+                // Compute the diff
+                const diff = {};
+                for (const key of Object.keys(nextSettings)) {
+                    if (prevSettings[key] !== nextSettings[key]) {
+                        diff[key] = nextSettings[key];
+                    }
+                }
+                if (Object.keys(diff).length > 0) {
+                    settingsChangeBus.notify(diff, view);
+                }
+            }
             // If fs changed via facet reconfig, refresh handle references
             const newFs = u.state.facet(CodeblockFacet).fs;
             if (fs !== newFs)
                 fs = newFs;
+        },
+        destroy() {
+            if (unsubscribeFileChanges) {
+                unsubscribeFileChanges();
+                unsubscribeFileChanges = null;
+            }
+            unsubscribeSettings();
+            removePreview();
+            save.cancel();
         }
     };
 });
 export const basicSetup = (() => [
-    lineNumbers(),
-    highlightActiveLineGutter(),
     highlightSpecialChars(),
     history(),
-    foldGutter(),
     drawSelection(),
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
@@ -239,10 +604,18 @@ export const basicSetup = (() => [
         ...lintKeymap
     ])
 ])();
-export function createCodeblock({ parent, fs, filepath, language, content = '', cwd = '/', toolbar = true, index, dark }) {
+export function createCodeblock({ parent, fs, filepath, language, content = '', cwd = '/', toolbar = true, index, dark, settings, typescript }) {
     const state = EditorState.create({
         doc: content,
-        extensions: [basicSetup, codeblock({ content, fs, filepath, cwd, language, toolbar, index, dark })]
+        extensions: [basicSetup, codeblock({ content, fs, filepath, cwd, language, toolbar, index, dark, settings, typescript })]
     });
-    return new EditorView({ state, parent });
+    const view = new EditorView({ state, parent });
+    return view;
 }
+// --- File-extension-specific toolbar commands ---
+registerFileAction({
+    extensions: ['svg'],
+    label: 'SVG > Toggle preview',
+    icon: '\udb82\ude1b', // nf-md-image_outline (󰈛)
+    action: (view) => view.dispatch({ effects: toggleSvgPreviewEffect.of(undefined) }),
+});

package/dist/index.d.ts

@@ -1,6 +1,10 @@
-export { createCodeblock, codeblock, basicSetup, type CodeblockConfig, CodeblockFacet, setThemeEffect } from "./editor";
+export { createCodeblock, codeblock, basicSetup, type CodeblockConfig, CodeblockFacet, setThemeEffect, fileChangeBus, settingsChangeBus, lineNumbersCompartment, foldGutterCompartment, toggleSvgPreviewEffect } from "./editor";
+export { settingsField, updateSettingsEffect, InitialSettingsFacet, type EditorSettings } from "./panels/settings";
+export { registerFileAction, type FileActionEntry } from "./panels/toolbar";
+export { LspLog, type LspLogEntry } from "./utils/lsp";
 export { Vfs as CodeblockFS } from './utils/fs';
 export * from './utils/snapshot';
 export * from './types';
 export * from './utils/search';
 export * from './lsps';
+export { prefillTypescriptDefaults, getCachedLibFiles, getRequiredLibs, getLibFieldForTarget, type TypescriptDefaultsConfig } from './utils/typescript-defaults';

package/dist/index.js

@@ -1,6 +1,10 @@
-export { createCodeblock, codeblock, basicSetup, CodeblockFacet, setThemeEffect } from "./editor";
+export { createCodeblock, codeblock, basicSetup, CodeblockFacet, setThemeEffect, fileChangeBus, settingsChangeBus, lineNumbersCompartment, foldGutterCompartment, toggleSvgPreviewEffect } from "./editor";
+export { settingsField, updateSettingsEffect, InitialSettingsFacet } from "./panels/settings";
+export { registerFileAction } from "./panels/toolbar";
+export { LspLog } from "./utils/lsp";
 export { Vfs as CodeblockFS } from './utils/fs';
 export * from './utils/snapshot';
 export * from './types';
 export * from './utils/search';
 export * from './lsps';
+export { prefillTypescriptDefaults, getCachedLibFiles, getRequiredLibs, getLibFieldForTarget } from './utils/typescript-defaults';