@theia/getting-started 1.75.0-next.21 → 1.75.0-next.28

package/lib/browser/walkthrough-detail.js

@@ -0,0 +1,210 @@
+"use strict";
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalkthroughDetail = WalkthroughDetail;
+const browser_1 = require("@theia/core/lib/browser");
+const disposable_1 = require("@theia/core/lib/common/disposable");
+const nls_1 = require("@theia/core/lib/common/nls");
+const React = require("@theia/core/shared/react");
+const plugin_shared_style_1 = require("@theia/plugin-ext/lib/main/browser/plugin-shared-style");
+const walkthrough_icon_1 = require("./walkthrough-icon");
+function WalkthroughDetail(props) {
+    const { walkthrough, onStepSelect, onBack, selectedStep, markdownRenderer, themeService } = props;
+    return (React.createElement("div", { className: 'gs-walkthrough-detail' },
+        React.createElement("div", { className: 'gs-walkthrough-detail-header' },
+            React.createElement("a", { role: 'button', tabIndex: 0, className: 'gs-walkthrough-back-link', onClick: onBack, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        onBack();
+                    }
+                } },
+                React.createElement("i", { className: (0, browser_1.codicon)('arrow-left') }),
+                React.createElement("span", { className: 'gs-walkthrough-back-label' }, nls_1.nls.localizeByDefault('Back'))),
+            React.createElement("h2", { className: 'gs-walkthrough-detail-title' },
+                React.createElement(walkthrough_icon_1.WalkthroughIcon, { walkthrough: walkthrough }),
+                walkthrough.title),
+            React.createElement("p", { className: 'gs-walkthrough-detail-description' }, walkthrough.description)),
+        React.createElement("div", { className: 'gs-walkthrough-detail-body' },
+            React.createElement("div", { className: 'gs-walkthrough-steps' },
+                walkthrough.steps.map(step => (React.createElement(WalkthroughStepItem, { key: step.id, step: step, isSelected: selectedStep?.id === step.id, onSelect: onStepSelect, onToggleDone: props.onToggleStepDone }))),
+                props.onMarkAllStepsDone && (React.createElement("button", { className: 'theia-button secondary gs-walkthrough-mark-all-done', disabled: walkthrough.steps.every(step => step.isComplete), onClick: props.onMarkAllStepsDone }, nls_1.nls.localizeByDefault('Mark Done')))),
+            selectedStep && (React.createElement("div", { className: 'gs-walkthrough-step-content' },
+                React.createElement(WalkthroughStepContent, { step: selectedStep, markdownRenderer: markdownRenderer, onLinkClick: props.onLinkClick, themeService: themeService, logger: props.logger }))))));
+}
+function WalkthroughStepItem(props) {
+    const { step, isSelected, onSelect, onToggleDone } = props;
+    const iconClass = step.isComplete ? (0, browser_1.codicon)('pass-filled') : (0, browser_1.codicon)('circle-large-outline');
+    const toggleDone = (event) => {
+        // Completing a step is a separate action from opening it.
+        event.stopPropagation();
+        onToggleDone?.(step);
+    };
+    return (React.createElement("div", { className: `gs-walkthrough-step-item ${isSelected ? 'selected' : ''} ${step.isComplete ? 'completed' : ''}`, role: 'button', tabIndex: 0, onClick: () => onSelect(step), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                onSelect(step);
+            }
+        } },
+        React.createElement("span", { className: `gs-walkthrough-step-icon ${iconClass}`, role: onToggleDone ? 'checkbox' : undefined, "aria-checked": onToggleDone ? step.isComplete : undefined, tabIndex: onToggleDone ? 0 : undefined, title: onToggleDone
+                ? (step.isComplete
+                    ? nls_1.nls.localize('theia/getting-started/markStepUndone', 'Mark Undone')
+                    : nls_1.nls.localizeByDefault('Mark Done'))
+                : undefined, onClick: onToggleDone && toggleDone, onKeyDown: onToggleDone && ((e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    toggleDone(e);
+                }
+            }) }),
+        React.createElement("span", { className: 'gs-walkthrough-step-title' }, step.title)));
+}
+function WalkthroughStepContent(props) {
+    const { step, markdownRenderer, themeService } = props;
+    return (React.createElement("div", { className: 'gs-walkthrough-step-detail' },
+        React.createElement("h3", null, step.title),
+        React.createElement(WalkthroughDescriptionContent, { description: step.description, markdownRenderer: markdownRenderer, onLinkClick: props.onLinkClick }),
+        step.media && renderMedia(step.media, markdownRenderer, themeService, props.logger, props.onLinkClick)));
+}
+function WalkthroughDescriptionContent(props) {
+    // eslint-disable-next-line no-null/no-null
+    const containerRef = React.useRef(null);
+    const renderResultRef = React.useRef();
+    const disposablesRef = React.useRef();
+    const onLinkClickRef = React.useRef(props.onLinkClick);
+    onLinkClickRef.current = props.onLinkClick;
+    React.useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        renderResultRef.current?.dispose();
+        disposablesRef.current?.dispose();
+        const options = createMarkdownOptions(onLinkClickRef, disposablesRef);
+        const result = props.markdownRenderer.render(toTrustedMarkdown(toMarkdownWithLineBreaks(props.description)), options);
+        renderResultRef.current = result;
+        containerRef.current.innerHTML = '';
+        containerRef.current.appendChild(result.element);
+        return () => {
+            renderResultRef.current?.dispose();
+            disposablesRef.current?.dispose();
+        };
+    }, [props.description, props.markdownRenderer]);
+    return React.createElement("div", { className: 'gs-walkthrough-step-description', ref: containerRef });
+}
+/**
+ * Walkthrough content is rendered as trusted Markdown so that the `command:` links it relies on survive
+ * rendering. It comes from an installed plugin, which can execute commands through its own API anyway.
+ */
+function toTrustedMarkdown(value) {
+    return { value, isTrusted: true };
+}
+/**
+ * Routes link activation to `onLinkClick`. Without an action handler the Monaco based renderer clears every
+ * `href` and installs no click handling, which leaves the links of the rendered content inert.
+ */
+function createMarkdownOptions(onLinkClickRef, disposablesRef) {
+    if (!onLinkClickRef.current) {
+        return undefined;
+    }
+    const disposables = new disposable_1.DisposableCollection();
+    disposablesRef.current = disposables;
+    return {
+        actionHandler: {
+            callback: (content) => onLinkClickRef.current?.(content),
+            disposables
+        }
+    };
+}
+/**
+ * Turn the single newlines that walkthrough step descriptions use for line breaks into Markdown hard breaks.
+ *
+ * VS Code renders every line of a step description as its own block, while Markdown collapses single
+ * newlines into spaces. Blank lines are left alone so that explicit paragraphs still work.
+ */
+function toMarkdownWithLineBreaks(description) {
+    return description.replace(/(?<!\n)\n(?!\n)/g, '  \n');
+}
+function renderMedia(media, markdownRenderer, themeService, logger, onLinkClick) {
+    if (!media) {
+        return undefined;
+    }
+    if ('markdown' in media) {
+        return React.createElement(WalkthroughMedia, { src: media.markdown, markdownRenderer: markdownRenderer, logger: logger, onLinkClick: onLinkClick });
+    }
+    if ('svg' in media) {
+        return React.createElement(WalkthroughMediaImage, { src: media.svg, altText: media.altText || '', themeService: themeService });
+    }
+    if ('image' in media) {
+        return React.createElement(WalkthroughMediaImage, { src: media.image, altText: media.altText || '', themeService: themeService });
+    }
+    return undefined;
+}
+function pickThemeVariant(source, themeType) {
+    if (typeof source === 'string') {
+        return source;
+    }
+    switch (themeType) {
+        case 'light': return source.light;
+        case 'hc': return source.hc;
+        case 'hcLight': return source.hcLight;
+        default: return source.dark;
+    }
+}
+function WalkthroughMediaImage(props) {
+    const { themeService } = props;
+    const [themeType, setThemeType] = React.useState(() => themeService.getCurrentTheme().type);
+    const [failed, setFailed] = React.useState(false);
+    React.useEffect(() => {
+        const disposable = themeService.onDidColorThemeChange(event => setThemeType(event.newTheme.type));
+        return () => disposable.dispose();
+    }, [themeService]);
+    const src = plugin_shared_style_1.PluginSharedStyle.toExternalIconUrl(pickThemeVariant(props.src, themeType));
+    React.useEffect(() => setFailed(false), [src]);
+    if (failed) {
+        // A missing image must not leave a broken image placeholder behind.
+        return undefined;
+    }
+    return React.createElement("img", { className: 'gs-walkthrough-media-image', src: src, alt: props.altText, onError: () => setFailed(true) });
+}
+function WalkthroughMedia(props) {
+    // eslint-disable-next-line no-null/no-null
+    const containerRef = React.useRef(null);
+    const renderResultRef = React.useRef();
+    const disposablesRef = React.useRef();
+    const onLinkClickRef = React.useRef(props.onLinkClick);
+    onLinkClickRef.current = props.onLinkClick;
+    React.useEffect(() => {
+        let cancelled = false;
+        fetch(plugin_shared_style_1.PluginSharedStyle.toExternalIconUrl(props.src))
+            .then(response => !cancelled && response.ok ? response.text() : '')
+            .then(text => {
+            if (!cancelled && containerRef.current && text) {
+                renderResultRef.current?.dispose();
+                disposablesRef.current?.dispose();
+                const options = createMarkdownOptions(onLinkClickRef, disposablesRef);
+                const result = props.markdownRenderer.render(toTrustedMarkdown(text), options);
+                renderResultRef.current = result;
+                containerRef.current.innerHTML = '';
+                containerRef.current.appendChild(result.element);
+            }
+        })
+            .catch(error => props.logger.warn(`Could not load the walkthrough media '${props.src}'.`, error));
+        return () => {
+            cancelled = true;
+            renderResultRef.current?.dispose();
+            renderResultRef.current = undefined;
+            disposablesRef.current?.dispose();
+        };
+    }, [props.src, props.markdownRenderer]);
+    return React.createElement("div", { className: 'gs-walkthrough-media-markdown', ref: containerRef });
+}
+//# sourceMappingURL=walkthrough-detail.js.map

package/lib/browser/walkthrough-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkthrough-detail.js","sourceRoot":"","sources":["../../src/browser/walkthrough-detail.tsx"],"names":[],"mappings":"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"}

package/lib/browser/walkthrough-detail.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=walkthrough-detail.spec.d.ts.map

package/lib/browser/walkthrough-detail.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walkthrough-detail.spec.d.ts","sourceRoot":"","sources":["../../src/browser/walkthrough-detail.spec.tsx"],"names":[],"mappings":""}

package/lib/browser/walkthrough-detail.spec.js

@@ -0,0 +1,409 @@
+"use strict";
+// *****************************************************************************
+// Copyright (C) 2026 EclipseSource and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert = require("assert");
+const React = require("react");
+const jsdom_1 = require("@theia/core/lib/browser/test/jsdom");
+let disableJSDOM = (0, jsdom_1.enableJSDOM)();
+const client_1 = require("react-dom/client");
+const disposable_1 = require("@theia/core/lib/common/disposable");
+const walkthrough_detail_1 = require("./walkthrough-detail");
+function createMockStep(overrides) {
+    return {
+        id: 'step-1',
+        title: 'Test Step',
+        description: 'A test step description',
+        isComplete: false,
+        ...overrides
+    };
+}
+function createMockWalkthrough(overrides) {
+    return {
+        id: 'test-walkthrough',
+        title: 'Test Walkthrough',
+        description: 'A test walkthrough description',
+        steps: [
+            createMockStep({ id: 'step-1', title: 'First Step' }),
+            createMockStep({ id: 'step-2', title: 'Second Step' }),
+            createMockStep({ id: 'step-3', title: 'Third Step' })
+        ],
+        pluginId: 'test.plugin',
+        ...overrides
+    };
+}
+function createMockMarkdownRenderer() {
+    return {
+        render: (markdown) => {
+            const div = document.createElement('div');
+            div.textContent = markdown?.value ?? 'rendered markdown';
+            return { element: div, dispose: () => { } };
+        }
+    };
+}
+function createMockThemeService(themeType = 'dark') {
+    return {
+        getCurrentTheme: () => ({ id: 'test', label: 'Test', type: themeType }),
+        onDidColorThemeChange: () => disposable_1.Disposable.NULL
+    };
+}
+function createMockLogger() {
+    return { warn: () => { }, error: () => { }, info: () => { }, debug: () => { } };
+}
+describe('WalkthroughDetail', () => {
+    let container;
+    let root;
+    let mockRenderer;
+    before(() => disableJSDOM = (0, jsdom_1.enableJSDOM)());
+    after(() => disableJSDOM());
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = (0, client_1.createRoot)(container);
+        mockRenderer = createMockMarkdownRenderer();
+    });
+    afterEach(() => {
+        root.unmount();
+        document.body.removeChild(container);
+    });
+    it('should render walkthrough title and back button', done => {
+        const walkthrough = createMockWalkthrough({ title: 'Detail Walkthrough' });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const title = container.querySelector('.gs-walkthrough-detail-title');
+            assert.ok(title, 'Title element should exist');
+            assert.ok(title?.textContent?.includes('Detail Walkthrough'), 'Should contain walkthrough title');
+            const backLink = container.querySelector('.gs-walkthrough-back-link');
+            assert.ok(backLink, 'Back link should exist');
+            // The label is a separate element so that it, and not the arrow icon, can carry the hover underline.
+            assert.ok(backLink?.querySelector('.gs-walkthrough-back-label'), 'Back label should be its own element');
+            done();
+        }, 50);
+    });
+    it('should render all steps in the step list', done => {
+        const walkthrough = createMockWalkthrough({
+            steps: [
+                createMockStep({ id: 's1', title: 'Step A' }),
+                createMockStep({ id: 's2', title: 'Step B' }),
+                createMockStep({ id: 's3', title: 'Step C' })
+            ]
+        });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepItems = container.querySelectorAll('.gs-walkthrough-step-item');
+            assert.strictEqual(stepItems.length, 3, 'Should render 3 step items');
+            const stepTitles = container.querySelectorAll('.gs-walkthrough-step-title');
+            assert.ok(stepTitles[0]?.textContent?.includes('Step A'), 'First step should be Step A');
+            assert.ok(stepTitles[1]?.textContent?.includes('Step B'), 'Second step should be Step B');
+            assert.ok(stepTitles[2]?.textContent?.includes('Step C'), 'Third step should be Step C');
+            done();
+        }, 50);
+    });
+    it('should highlight the selected step', done => {
+        const selectedStep = createMockStep({ id: 's2', title: 'Selected Step' });
+        const walkthrough = createMockWalkthrough({
+            steps: [
+                createMockStep({ id: 's1', title: 'Step A' }),
+                selectedStep,
+                createMockStep({ id: 's3', title: 'Step C' })
+            ]
+        });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepItems = container.querySelectorAll('.gs-walkthrough-step-item');
+            assert.ok(!stepItems[0].classList.contains('selected'), 'First step should not be selected');
+            assert.ok(stepItems[1].classList.contains('selected'), 'Second step should be selected');
+            assert.ok(!stepItems[2].classList.contains('selected'), 'Third step should not be selected');
+            done();
+        }, 50);
+    });
+    it('should call onBack when back button is clicked', done => {
+        const walkthrough = createMockWalkthrough();
+        let backCalled = false;
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { backCalled = true; }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const backLink = container.querySelector('.gs-walkthrough-back-link');
+            assert.ok(backLink, 'Back link should exist');
+            backLink.click();
+            setTimeout(() => {
+                assert.ok(backCalled, 'onBack should have been called');
+                done();
+            }, 50);
+        }, 50);
+    });
+    it('should call onStepSelect when a step is clicked', done => {
+        const steps = [
+            createMockStep({ id: 's1', title: 'Step A' }),
+            createMockStep({ id: 's2', title: 'Step B' })
+        ];
+        const walkthrough = createMockWalkthrough({ steps });
+        let selectedStep;
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: step => { selectedStep = step; }, onBack: () => { }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepItems = container.querySelectorAll('.gs-walkthrough-step-item');
+            stepItems[1].click();
+            setTimeout(() => {
+                assert.ok(selectedStep, 'onStepSelect should have been called');
+                assert.strictEqual(selectedStep?.id, 's2', 'Should select the clicked step');
+                done();
+            }, 50);
+        }, 50);
+    });
+    it('should render step content for the selected step', done => {
+        const selectedStep = createMockStep({
+            id: 's1',
+            title: 'Content Step',
+            description: 'Step with content'
+        });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepContent = container.querySelector('.gs-walkthrough-step-content');
+            assert.ok(stepContent, 'Step content section should exist');
+            const stepDetail = container.querySelector('.gs-walkthrough-step-detail');
+            assert.ok(stepDetail, 'Step detail should exist');
+            assert.ok(stepDetail?.textContent?.includes('Content Step'), 'Should show step title');
+            const descriptionContainer = container.querySelector('.gs-walkthrough-step-description');
+            assert.ok(descriptionContainer, 'Description container should exist');
+            assert.ok(descriptionContainer?.textContent?.includes('Step with content'), 'Should show step description via markdown renderer');
+            done();
+        }, 50);
+    });
+    it('should not render step content when no step is selected', done => {
+        const walkthrough = createMockWalkthrough();
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepContent = container.querySelector('.gs-walkthrough-step-content');
+            // eslint-disable-next-line no-null/no-null
+            assert.strictEqual(stepContent, null, 'Step content should not be rendered');
+            done();
+        }, 50);
+    });
+    it('should show completion icon for completed steps', done => {
+        const walkthrough = createMockWalkthrough({
+            steps: [
+                createMockStep({ id: 's1', isComplete: true }),
+                createMockStep({ id: 's2', isComplete: false })
+            ]
+        });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const stepItems = container.querySelectorAll('.gs-walkthrough-step-item');
+            assert.ok(stepItems[0].classList.contains('completed'), 'Completed step should have completed class');
+            assert.ok(!stepItems[1].classList.contains('completed'), 'Incomplete step should not have completed class');
+            const icons = container.querySelectorAll('.gs-walkthrough-step-icon');
+            assert.ok(icons[0].classList.contains('codicon-pass-filled'), 'Completed step should have pass-filled icon');
+            assert.ok(icons[1].classList.contains('codicon-circle-large-outline'), 'Incomplete step should have circle-outline icon');
+            done();
+        }, 50);
+    });
+    it('should render image media for selected step', done => {
+        const selectedStep = createMockStep({
+            id: 's1',
+            media: { image: '/path/to/image.png', altText: 'test image' }
+        });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const img = container.querySelector('.gs-walkthrough-media-image');
+            assert.ok(img, 'Image element should exist');
+            assert.strictEqual(img.getAttribute('src'), '/path/to/image.png', 'Image src should be set');
+            assert.strictEqual(img.getAttribute('alt'), 'test image', 'Image alt should be set');
+            done();
+        }, 50);
+    });
+    it('should render SVG media for selected step', done => {
+        const selectedStep = createMockStep({
+            id: 's1',
+            media: { svg: '/path/to/graphic.svg' }
+        });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const img = container.querySelector('.gs-walkthrough-media-image');
+            assert.ok(img, 'SVG image element should exist');
+            assert.strictEqual(img.getAttribute('src'), '/path/to/graphic.svg', 'SVG src should be set');
+            done();
+        }, 50);
+    });
+    it('should turn single newlines in a description into Markdown hard breaks', done => {
+        const renderedMarkdown = [];
+        const recordingRenderer = {
+            render: (markdown) => {
+                renderedMarkdown.push(markdown.value);
+                return { element: document.createElement('div'), dispose: () => { } };
+            }
+        };
+        const selectedStep = createMockStep({
+            id: 's1',
+            description: 'First line\nSecond line\n\nNew paragraph'
+        });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: recordingRenderer }));
+        setTimeout(() => {
+            const description = renderedMarkdown.find(value => value.includes('First line'));
+            assert.ok(description, 'The description should have been rendered');
+            assert.ok(description?.includes('First line  \nSecond line'), 'A single newline should become a hard break');
+            assert.ok(description?.includes('Second line\n\nNew paragraph'), 'A blank line should stay a paragraph break');
+            done();
+        }, 50);
+    });
+    it('should mark a step done when its step icon is clicked, without selecting the step', done => {
+        const step = createMockStep({ id: 's1', isComplete: false });
+        const walkthrough = createMockWalkthrough({ steps: [step] });
+        let markedStep;
+        let selectedStep;
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: s => { selectedStep = s; }, onBack: () => { }, markdownRenderer: mockRenderer, onToggleStepDone: s => { markedStep = s; } }));
+        setTimeout(() => {
+            const icon = container.querySelector('.gs-walkthrough-step-icon');
+            assert.ok(icon, 'Step icon should exist');
+            icon.click();
+            setTimeout(() => {
+                assert.strictEqual(markedStep?.id, 's1', 'onToggleStepDone should receive the step');
+                assert.strictEqual(selectedStep, undefined, 'Clicking the icon should not select the step');
+                done();
+            }, 50);
+        }, 50);
+    });
+    it('should toggle a completed step back to pending when its step icon is clicked', done => {
+        const step = createMockStep({ id: 's1', isComplete: true });
+        const walkthrough = createMockWalkthrough({ steps: [step] });
+        let toggledStep;
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer, onToggleStepDone: s => { toggledStep = s; } }));
+        setTimeout(() => {
+            const icon = container.querySelector('.gs-walkthrough-step-icon');
+            assert.strictEqual(icon.getAttribute('aria-checked'), 'true', 'A completed step should read as checked');
+            icon.click();
+            setTimeout(() => {
+                assert.strictEqual(toggledStep?.id, 's1', 'onToggleStepDone should receive the completed step');
+                done();
+            }, 50);
+        }, 50);
+    });
+    it('should offer a Mark All Done action below the step list', done => {
+        const walkthrough = createMockWalkthrough({
+            steps: [createMockStep({ id: 's1' }), createMockStep({ id: 's2' })]
+        });
+        let markedAll = false;
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer, onMarkAllStepsDone: () => { markedAll = true; } }));
+        setTimeout(() => {
+            const button = container.querySelector('.gs-walkthrough-mark-all-done');
+            assert.ok(button, 'Mark All Done button should exist');
+            assert.ok(button.closest('.gs-walkthrough-steps'), 'It should sit with the step list');
+            assert.ok(!button.disabled, 'It should be enabled while steps are pending');
+            button.click();
+            setTimeout(() => {
+                assert.strictEqual(markedAll, true, 'onMarkAllStepsDone should have been called');
+                done();
+            }, 50);
+        }, 50);
+    });
+    it('should disable Mark All Done once every step is complete', done => {
+        const walkthrough = createMockWalkthrough({
+            steps: [createMockStep({ id: 's1', isComplete: true }), createMockStep({ id: 's2', isComplete: true })]
+        });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, markdownRenderer: mockRenderer, onMarkAllStepsDone: () => { } }));
+        setTimeout(() => {
+            const button = container.querySelector('.gs-walkthrough-mark-all-done');
+            assert.ok(button, 'Mark All Done button should exist');
+            assert.ok(button.disabled, 'It should be disabled when nothing is left to complete');
+            done();
+        }, 50);
+    });
+    it('should keep `command:` links as plain inline links', done => {
+        const selectedStep = createMockStep({ id: 's1', description: '[Do it](command:my.command)' });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        const linkRenderer = {
+            render: () => {
+                const div = document.createElement('div');
+                const anchor = document.createElement('a');
+                anchor.setAttribute('data-href', 'command:my.command');
+                anchor.textContent = 'Do it';
+                div.appendChild(anchor);
+                return { element: div, dispose: () => { } };
+            }
+        };
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: linkRenderer }));
+        setTimeout(() => {
+            const anchor = container.querySelector('.gs-walkthrough-step-description a');
+            assert.ok(anchor, 'The command link should be rendered');
+            assert.ok(!anchor.classList.contains('theia-button'), 'A command link should not be styled as a button');
+            done();
+        }, 50);
+    });
+    it('should pick the image variant matching the current theme and resolve the plugin resource', done => {
+        const selectedStep = createMockStep({
+            id: 's1',
+            media: {
+                image: {
+                    dark: 'hostedPlugin/pub_name/dark.png',
+                    light: 'hostedPlugin/pub_name/light.png',
+                    hc: 'hostedPlugin/pub_name/hc.png',
+                    hcLight: 'hostedPlugin/pub_name/hc-light.png'
+                },
+                altText: 'themed'
+            }
+        });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService('light'), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer }));
+        setTimeout(() => {
+            const img = container.querySelector('.gs-walkthrough-media-image');
+            assert.ok(img, 'Image element should exist');
+            const src = img.getAttribute('src');
+            assert.ok(src.includes('light.png'), `Should use the light variant, was '${src}'`);
+            assert.ok(!src.startsWith('hostedPlugin/'), `Should resolve against the backend endpoint, was '${src}'`);
+            done();
+        }, 50);
+    });
+    it('should not render completion actions inside the step content', done => {
+        const selectedStep = createMockStep({ id: 's1', isComplete: false });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: mockRenderer, onToggleStepDone: () => { }, onMarkAllStepsDone: () => { } }));
+        setTimeout(() => {
+            const content = container.querySelector('.gs-walkthrough-step-content');
+            // eslint-disable-next-line no-null/no-null
+            assert.strictEqual(content.querySelector('button'), null, 'The step content should carry no buttons');
+            // eslint-disable-next-line no-null/no-null
+            assert.strictEqual(content.querySelector('.gs-walkthrough-step-done'), null, 'The step content should carry no done indicator');
+            done();
+        }, 50);
+    });
+    it('should render markdown media as trusted and with an action handler, so that its links work', done => {
+        const originalFetch = global.fetch;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        global.fetch = () => Promise.resolve({ ok: true, text: () => Promise.resolve('[Run](command:my.command)') });
+        const captured = [];
+        const recordingRenderer = {
+            render: (markdown, options) => {
+                captured.push({ ...markdown, options });
+                return { element: document.createElement('div'), dispose: () => { } };
+            }
+        };
+        const selectedStep = createMockStep({ id: 's1', media: { markdown: 'content.md' } });
+        const walkthrough = createMockWalkthrough({ steps: [selectedStep] });
+        root.render(React.createElement(walkthrough_detail_1.WalkthroughDetail, { logger: createMockLogger(), themeService: createMockThemeService(), walkthrough: walkthrough, onStepSelect: () => { }, onBack: () => { }, selectedStep: selectedStep, markdownRenderer: recordingRenderer, onLinkClick: () => { } }));
+        setTimeout(() => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            global.fetch = originalFetch;
+            const media = captured.find(entry => entry.value.includes('command:my.command'));
+            assert.ok(media, 'The media content should have been rendered');
+            assert.strictEqual(media?.isTrusted, true, 'Media has to be trusted, otherwise command links are stripped');
+            assert.ok(media?.options?.actionHandler, 'Media needs an action handler, otherwise its links are inert');
+            done();
+        }, 50);
+    });
+});
+//# sourceMappingURL=walkthrough-detail.spec.js.map