testomatio-editor-blocks 0.4.0 → 0.4.6

package/package/editor/blocks/snippet.js

@@ -1,130 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createReactBlockSpec } from "@blocknote/react";
-import OverType from "overtype";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { StepField } from "./stepField";
 import { useSnippetAutocomplete } from "../snippetAutocomplete";
-import { useStepImageUpload } from "../stepImageUpload";
-function SnippetDataField({ label, value, placeholder, onChange, onFieldFocus, fieldName, enableImageUpload = false, }) {
+function SnippetDropdown({ value, placeholder, suggestions, onSelect }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [search, setSearch] = useState("");
     const containerRef = useRef(null);
-    const instanceRef = useRef(null);
-    const uploadImage = useStepImageUpload();
-    const [isFocused, setIsFocused] = useState(false);
-    const onChangeRef = useRef(onChange);
-    const initialValueRef = useRef(value);
+    const searchRef = useRef(null);
     useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    const insertImageMarkdown = useCallback((url) => {
-        var _a, _b, _c;
-        const instance = instanceRef.current;
-        const textarea = instance === null || instance === void 0 ? void 0 : instance.textarea;
-        if (!instance || !textarea) {
+        if (!isOpen)
             return;
-        }
-        const currentValue = instance.getValue();
-        const selectionStart = (_a = textarea.selectionStart) !== null && _a !== void 0 ? _a : currentValue.length;
-        const selectionEnd = (_b = textarea.selectionEnd) !== null && _b !== void 0 ? _b : currentValue.length;
-        const before = currentValue.slice(0, selectionStart);
-        const after = currentValue.slice(selectionEnd);
-        const needsNewlineBefore = before.length > 0 && !before.endsWith("\n");
-        const needsNewlineAfter = after.length > 0 && !after.startsWith("\n");
-        const markdown = `${needsNewlineBefore ? "\n" : ""}![](${url})${needsNewlineAfter ? "\n" : ""}`;
-        const nextValue = `${before}${markdown}${after}`;
-        instance.setValue(nextValue);
-        (_c = onChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onChangeRef, nextValue);
-        requestAnimationFrame(() => {
-            const cursor = selectionStart + markdown.length;
-            textarea.selectionStart = cursor;
-            textarea.selectionEnd = cursor;
-            textarea.focus();
-        });
-    }, []);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container) {
-            return;
-        }
-        const [instance] = OverType.init(container, {
-            value: initialValueRef.current,
-            placeholder,
-            autoResize: true,
-            minHeight: "5rem",
-            toolbar: false,
-            onChange: (nextValue) => {
-                var _a;
-                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextValue);
-            },
-        });
-        instanceRef.current = instance;
-        const textarea = instance.textarea;
-        if (fieldName) {
-            textarea.dataset.stepField = fieldName;
-        }
-        const handleFocus = () => {
-            setIsFocused(true);
-            onFieldFocus === null || onFieldFocus === void 0 ? void 0 : onFieldFocus();
-        };
-        const handleBlur = () => setIsFocused(false);
-        textarea.addEventListener("focus", handleFocus);
-        textarea.addEventListener("blur", handleBlur);
-        return () => {
-            textarea.removeEventListener("focus", handleFocus);
-            textarea.removeEventListener("blur", handleBlur);
-            instance.destroy();
-            instanceRef.current = null;
+        const handleMouseDown = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
         };
-    }, [fieldName, onFieldFocus, placeholder]);
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [isOpen]);
     useEffect(() => {
-        const instance = instanceRef.current;
-        if (!instance) {
-            return;
-        }
-        if (instance.getValue() !== value) {
-            instance.setValue(value);
-        }
-    }, [value]);
-    useEffect(() => {
-        var _a;
-        if (!enableImageUpload || !uploadImage) {
-            return;
-        }
-        const textarea = (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.textarea;
-        if (!textarea) {
-            return;
+        if (isOpen) {
+            setSearch("");
+            requestAnimationFrame(() => { var _a; return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
-        const handlePaste = async (event) => {
-            var _a, _b;
-            const items = Array.from((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
-            const imageItem = items.find((item) => item.kind === "file" && item.type.startsWith("image/"));
-            const file = imageItem === null || imageItem === void 0 ? void 0 : imageItem.getAsFile();
-            if (!file) {
-                return;
-            }
-            event.preventDefault();
-            try {
-                const response = await uploadImage(file);
-                if (response === null || response === void 0 ? void 0 : response.url) {
-                    insertImageMarkdown(response.url);
-                }
-            }
-            catch (error) {
-                console.error("Failed to upload pasted image", error);
-            }
-        };
-        textarea.addEventListener("paste", handlePaste);
-        return () => {
-            textarea.removeEventListener("paste", handlePaste);
-        };
-    }, [enableImageUpload, insertImageMarkdown, uploadImage]);
-    const editorClassName = useMemo(() => [
-        "bn-step-editor",
-        "bn-step-editor--multiline",
-        isFocused ? "bn-step-editor--focused" : "",
-    ]
-        .filter(Boolean)
-        .join(" "), [isFocused]);
-    return (_jsxs("div", { className: "bn-step-field", children: [_jsx("div", { className: "bn-step-field__top", children: _jsx("span", { className: "bn-step-field__label", children: label }) }), _jsx("div", { ref: containerRef, className: editorClassName, "data-step-field": fieldName })] }));
+    }, [isOpen]);
+    const filtered = useMemo(() => {
+        const snippets = suggestions.filter((s) => s.isSnippet === true);
+        if (!search)
+            return snippets;
+        const lower = search.toLowerCase();
+        return snippets.filter((s) => s.title.toLowerCase().includes(lower));
+    }, [suggestions, search]);
+    const handleSearchChange = useCallback((event) => {
+        setSearch(event.target.value);
+    }, []);
+    return (_jsxs("div", { className: "bn-snippet-dropdown", ref: containerRef, children: [_jsxs("button", { type: "button", className: "bn-snippet-dropdown__trigger", onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { className: "bn-snippet-dropdown__text", children: value || placeholder }), _jsx("svg", { className: "bn-snippet-dropdown__chevron", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), isOpen && (_jsxs("div", { className: "bn-snippet-dropdown__panel", role: "listbox", children: [_jsxs("div", { className: "bn-snippet-dropdown__search", children: [_jsx("svg", { className: "bn-snippet-dropdown__search-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z", fill: "currentColor" }) }), _jsx("input", { ref: searchRef, type: "text", className: "bn-snippet-dropdown__search-input", placeholder: "Search", value: search, onChange: handleSearchChange })] }), _jsxs("div", { className: "bn-snippet-dropdown__list", children: [filtered.map((suggestion) => (_jsx("button", { type: "button", role: "option", className: "bn-snippet-dropdown__item", onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    onSelect(suggestion);
+                                    setIsOpen(false);
+                                }, tabIndex: -1, children: suggestion.title }, suggestion.id))), filtered.length === 0 && (_jsx("div", { className: "bn-snippet-dropdown__empty", children: "No snippets found" }))] })] }))] }));
 }
 export const snippetBlock = createReactBlockSpec({
     type: "snippet",
@@ -151,26 +65,6 @@ export const snippetBlock = createReactBlockSpec({
         const snippetSuggestions = useSnippetAutocomplete();
         const hasSnippets = snippetSuggestions.length > 0;
         const isSnippetSelected = snippetId.length > 0;
-        const handleSnippetChange = useCallback((nextTitle) => {
-            if (nextTitle === snippetTitle) {
-                return;
-            }
-            editor.updateBlock(block.id, {
-                props: {
-                    snippetTitle: nextTitle,
-                },
-            });
-        }, [block.id, editor, snippetTitle]);
-        const handleSnippetDataChange = useCallback((next) => {
-            if (next === snippetData) {
-                return;
-            }
-            editor.updateBlock(block.id, {
-                props: {
-                    snippetData: next,
-                },
-            });
-        }, [editor, block.id, snippetData]);
         const handleSnippetSelect = useCallback((suggestion) => {
             var _a;
             const rawBody = (_a = suggestion.body) !== null && _a !== void 0 ? _a : "";
@@ -192,6 +86,6 @@ export const snippetBlock = createReactBlockSpec({
         if (!hasSnippets) {
             return (_jsx("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: _jsx("p", { className: "bn-snippet__empty", children: "No snippets in this project." }) }));
         }
-        return (_jsx("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: !isSnippetSelected ? (_jsx(StepField, { label: "Snippet Title", value: snippetTitle, onChange: handleSnippetChange, autoFocus: snippetTitle.length === 0, enableAutocomplete: true, suggestionFilter: (suggestion) => suggestion.isSnippet === true, suggestionsOverride: snippetSuggestions, onSuggestionSelect: handleSnippetSelect, fieldName: "snippet-title", showSuggestionsOnFocus: true, enableImageUpload: false, onFieldFocus: handleFieldFocus, readOnly: false })) : (_jsx(SnippetDataField, { label: `Snippet: ${snippetTitle}`, value: snippetData, onChange: handleSnippetDataChange, fieldName: "snippet-data", enableImageUpload: true, onFieldFocus: handleFieldFocus, placeholder: "Snippet data will appear here..." })) }));
+        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, onFocus: handleFieldFocus, children: [_jsxs("div", { className: "bn-snippet__header", children: [_jsx("span", { className: "bn-snippet__label", children: "Snippet" }), _jsx(SnippetDropdown, { value: snippetTitle, placeholder: "Select Snippet", suggestions: snippetSuggestions, onSelect: handleSnippetSelect })] }), isSnippetSelected && (_jsx("div", { className: "bn-snippet__content", children: snippetData }))] }));
     },
 });

package/package/editor/blocks/step.d.ts

@@ -12,6 +12,9 @@ export declare const stepBlock: {
             readonly expectedResult: {
                 readonly default: "";
             };
+            readonly listStyle: {
+                readonly default: "bullet";
+            };
         };
     };
     implementation: import("@blocknote/core").TiptapBlockImplementation<{
@@ -27,6 +30,9 @@ export declare const stepBlock: {
             readonly expectedResult: {
                 readonly default: "";
             };
+            readonly listStyle: {
+                readonly default: "bullet";
+            };
         };
     }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
 };

package/package/editor/blocks/step.js

@@ -1,26 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createReactBlockSpec } from "@blocknote/react";
+import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { StepField } from "./stepField";
+import { StepHorizontalView } from "./stepHorizontalView";
 import { useStepImageUpload } from "../stepImageUpload";
 const EXPECTED_COLLAPSED_KEY = "bn-expected-collapsed";
-const readExpectedCollapsedPreference = () => {
+const VIEW_MODE_KEY = "bn-step-view-mode";
+const STEP_TITLE_PLACEHOLDER = "Enter step title...";
+const STEP_DATA_PLACEHOLDER = "Enter step data...";
+const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result...";
+/* readExpectedCollapsedPreference removed — currently unused */
+const writeExpectedCollapsedPreference = (collapsed) => {
     if (typeof window === "undefined") {
-        return false;
+        return;
     }
     try {
-        return window.localStorage.getItem(EXPECTED_COLLAPSED_KEY) === "true";
+        window.localStorage.setItem(EXPECTED_COLLAPSED_KEY, collapsed ? "true" : "false");
     }
     catch {
-        return false;
+        //
     }
 };
-const writeExpectedCollapsedPreference = (collapsed) => {
+const readStepViewMode = () => {
+    if (typeof window === "undefined") {
+        return "vertical";
+    }
+    try {
+        return window.localStorage.getItem(VIEW_MODE_KEY) === "horizontal" ? "horizontal" : "vertical";
+    }
+    catch {
+        return "vertical";
+    }
+};
+const writeStepViewMode = (mode) => {
     if (typeof window === "undefined") {
         return;
     }
     try {
-        window.localStorage.setItem(EXPECTED_COLLAPSED_KEY, collapsed ? "true" : "false");
+        window.localStorage.setItem(VIEW_MODE_KEY, mode);
     }
     catch {
         //
@@ -39,6 +56,9 @@ export const stepBlock = createReactBlockSpec({
         expectedResult: {
             default: "",
         },
+        listStyle: {
+            default: "bullet",
+        },
     },
 }, {
     render: ({ block, editor }) => {
@@ -46,19 +66,62 @@ export const stepBlock = createReactBlockSpec({
         const stepData = block.props.stepData || "";
         const expectedResult = block.props.expectedResult || "";
         const expectedHasContent = expectedResult.trim().length > 0;
-        const storedExpectedCollapsed = useMemo(() => readExpectedCollapsedPreference(), []);
+        /* storedExpectedCollapsed removed — currently unused */
         const dataHasContent = stepData.trim().length > 0;
-        const [isExpectedVisible, setIsExpectedVisible] = useState(expectedHasContent ? true : !storedExpectedCollapsed);
+        const [isExpectedVisible, setIsExpectedVisible] = useState(expectedHasContent);
         const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
         const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
+        const [documentVersion, setDocumentVersion] = useState(0);
         const uploadImage = useStepImageUpload();
+        const [viewMode, setViewMode] = useState(() => readStepViewMode());
         // Calculate step number based on position in document
         const stepNumber = useMemo(() => {
             const allBlocks = editor.document;
             const stepBlocks = allBlocks.filter((b) => b.type === "testStep");
             const index = stepBlocks.findIndex((b) => b.id === block.id);
             return index >= 0 ? index + 1 : 1;
-        }, [editor.document, block.id]);
+        }, [block.id, documentVersion, editor.document]);
+        useEditorChange(() => {
+            setDocumentVersion((version) => version + 1);
+        }, editor);
+        useEffect(() => {
+            if (typeof window === "undefined") {
+                return;
+            }
+            const handleStorage = (event) => {
+                if (event.key === VIEW_MODE_KEY) {
+                    setViewMode(readStepViewMode());
+                }
+            };
+            const handleLocal = () => {
+                setViewMode(readStepViewMode());
+            };
+            window.addEventListener("storage", handleStorage);
+            window.addEventListener("bn-step-view-mode", handleLocal);
+            return () => {
+                window.removeEventListener("storage", handleStorage);
+                window.removeEventListener("bn-step-view-mode", handleLocal);
+            };
+        }, []);
+        const combinedStepValue = useMemo(() => {
+            if (!stepData) {
+                return stepTitle;
+            }
+            return stepTitle ? `${stepTitle}\n${stepData}` : stepData;
+        }, [stepData, stepTitle]);
+        const handleCombinedStepChange = useCallback((next) => {
+            if (next === combinedStepValue) {
+                return;
+            }
+            const [nextTitle = "", ...rest] = next.split("\n");
+            const nextData = rest.join("\n");
+            editor.updateBlock(block.id, {
+                props: {
+                    stepTitle: nextTitle,
+                    stepData: nextData,
+                },
+            });
+        }, [block.id, combinedStepValue, editor]);
         useEffect(() => {
             if (dataHasContent && !isDataVisible) {
                 setIsDataVisible(true);
@@ -115,8 +178,29 @@ export const stepBlock = createReactBlockSpec({
             ], block.id, "after");
         }, [editor, block.id]);
         const handleFieldFocus = useCallback(() => {
-            editor.setSelection(block.id, block.id);
+            var _a, _b, _c;
+            const selection = editor.getSelection();
+            const blocks = (_a = selection === null || selection === void 0 ? void 0 : selection.blocks) !== null && _a !== void 0 ? _a : [];
+            const firstId = (_b = blocks[0]) === null || _b === void 0 ? void 0 : _b.id;
+            const lastId = (_c = blocks[blocks.length - 1]) === null || _c === void 0 ? void 0 : _c.id;
+            if (firstId === block.id && lastId === block.id) {
+                return;
+            }
+            try {
+                editor.setSelection(block.id, block.id);
+            }
+            catch {
+                //
+            }
         }, [editor, block.id]);
+        const handleToggleView = useCallback(() => {
+            const next = viewMode === "horizontal" ? "vertical" : "horizontal";
+            writeStepViewMode(next);
+            setViewMode(next);
+            if (typeof window !== "undefined") {
+                window.dispatchEvent(new Event("bn-step-view-mode"));
+            }
+        }, [viewMode]);
         const [dataFocusSignal] = useState(0);
         const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
         const handleShowExpected = useCallback(() => {
@@ -135,46 +219,29 @@ export const stepBlock = createReactBlockSpec({
         }, [expectedHasContent, isExpectedVisible]);
         const canToggleData = !dataHasContent;
         const canToggleExpected = !expectedHasContent;
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: `Step ${stepNumber}`, value: stepTitle, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
-                        if (!uploadImage) {
-                            return;
-                        }
-                        setIsDataVisible(true);
-                        setShouldFocusDataField(true);
-                        try {
-                            const result = await uploadImage(file);
-                            if (result === null || result === void 0 ? void 0 : result.url) {
-                                const nextValue = stepData.trim().length > 0 ? `${stepData}\n![](${result.url})` : `![](${result.url})`;
-                                editor.updateBlock(block.id, {
-                                    props: {
-                                        stepData: nextValue,
-                                    },
-                                });
-                            }
-                        }
-                        catch (error) {
-                            console.error("Failed to upload image to Step Data", error);
-                        }
-                    } }), isDataVisible ? (_jsx(StepField, { label: "Step Data", labelToggle: canToggleData
-                        ? {
-                            onClick: handleHideData,
-                            expanded: true,
-                        }
-                        : undefined, value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : (_jsx("div", { className: "bn-step-field bn-step-field--collapsed", children: _jsx("span", { className: "bn-step-field__label bn-step-field__label--toggle", role: "button", tabIndex: -1, onClick: handleShowData, onKeyDown: (event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                handleShowData();
-                            }
-                        }, "aria-expanded": "false", children: "Step Data" }) })), isExpectedVisible ? (_jsx(StepField, { label: "Expected Result", labelToggle: canToggleExpected
-                        ? {
-                            onClick: handleHideExpected,
-                            expanded: true,
-                        }
-                        : undefined, value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : (_jsx("div", { className: "bn-step-field bn-step-field--collapsed", children: _jsx("span", { className: "bn-step-field__label bn-step-field__label--toggle", role: "button", tabIndex: -1, onClick: handleShowExpected, onKeyDown: (event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                handleShowExpected();
-                            }
-                        }, "aria-expanded": "false", children: "Expected Result" }) })), _jsx("button", { type: "button", className: "bn-step-add", onClick: handleInsertNextStep, children: "+ Step" })] }));
+        if (viewMode === "horizontal") {
+            return (_jsx(StepHorizontalView, { blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: _jsx("button", { type: "button", className: "bn-teststep__view-toggle bn-teststep__view-toggle--horizontal", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }) }));
+        }
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), _jsx("button", { type: "button", className: "bn-teststep__view-toggle", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) })] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+                                if (!uploadImage) {
+                                    return;
+                                }
+                                setIsDataVisible(true);
+                                setShouldFocusDataField(true);
+                                try {
+                                    const result = await uploadImage(file);
+                                    if (result === null || result === void 0 ? void 0 : result.url) {
+                                        const nextValue = stepData.trim().length > 0 ? `${stepData}\n![](${result.url})` : `![](${result.url})`;
+                                        editor.updateBlock(block.id, {
+                                            props: {
+                                                stepData: nextValue,
+                                            },
+                                        });
+                                    }
+                                }
+                                catch (error) {
+                                    console.error("Failed to upload image to Step Data", error);
+                                }
+                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: canToggleData ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" })) : undefined, value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: canToggleExpected ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" })) : undefined, value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
     },
 });

package/package/editor/blocks/stepField.d.ts

@@ -4,10 +4,13 @@ import { type SnippetSuggestion } from "../snippetAutocomplete";
 type Suggestion = StepSuggestion | SnippetSuggestion;
 type StepFieldProps = {
     label: string;
+    showLabel?: boolean;
     labelToggle?: {
         onClick: () => void;
         expanded: boolean;
     };
+    labelAction?: ReactNode;
+    placeholder?: string;
     value: string;
     onChange: (nextValue: string) => void;
     autoFocus?: boolean;
@@ -27,5 +30,5 @@ type StepFieldProps = {
     showImageButton?: boolean;
     onFieldFocus?: () => void;
 };
-export declare function StepField({ label, labelToggle, value, onChange, autoFocus, focusSignal, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepField({ label, showLabel, labelToggle, labelAction, placeholder, value, onChange, autoFocus, focusSignal, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};