testomatio-editor-blocks 0.3.0 → 0.4.0

package/package/editor/blocks/snippet.js

@@ -1,8 +1,131 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback } from "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, }) {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+    const uploadImage = useStepImageUpload();
+    const [isFocused, setIsFocused] = useState(false);
+    const onChangeRef = useRef(onChange);
+    const initialValueRef = useRef(value);
+    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) {
+            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;
+        };
+    }, [fieldName, onFieldFocus, placeholder]);
+    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;
+        }
+        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 })] }));
+}
 export const snippetBlock = createReactBlockSpec({
     type: "snippet",
     content: "none",
@@ -24,8 +147,10 @@ export const snippetBlock = createReactBlockSpec({
     render: ({ block, editor }) => {
         const snippetTitle = block.props.snippetTitle || "";
         const snippetData = block.props.snippetData || "";
+        const snippetId = block.props.snippetId || "";
         const snippetSuggestions = useSnippetAutocomplete();
         const hasSnippets = snippetSuggestions.length > 0;
+        const isSnippetSelected = snippetId.length > 0;
         const handleSnippetChange = useCallback((nextTitle) => {
             if (nextTitle === snippetTitle) {
                 return;
@@ -67,6 +192,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 (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: [_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 }), _jsx(StepField, { label: "Snippet Data", value: snippetData, onChange: handleSnippetDataChange, multiline: true, fieldName: "snippet-data", enableImageUpload: true, onFieldFocus: handleFieldFocus })] }));
+        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..." })) }));
     },
 });

package/package/editor/blocks/step.js

@@ -1,8 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { StepField } from "./stepField";
 import { useStepImageUpload } from "../stepImageUpload";
+const EXPECTED_COLLAPSED_KEY = "bn-expected-collapsed";
+const readExpectedCollapsedPreference = () => {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    try {
+        return window.localStorage.getItem(EXPECTED_COLLAPSED_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+};
+const writeExpectedCollapsedPreference = (collapsed) => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    try {
+        window.localStorage.setItem(EXPECTED_COLLAPSED_KEY, collapsed ? "true" : "false");
+    }
+    catch {
+        //
+    }
+};
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",
@@ -22,22 +45,25 @@ export const stepBlock = createReactBlockSpec({
         const stepTitle = block.props.stepTitle || "";
         const stepData = block.props.stepData || "";
         const expectedResult = block.props.expectedResult || "";
-        const showExpectedField = stepTitle.trim().length > 0 || stepData.trim().length > 0 || expectedResult.trim().length > 0;
-        const [isDataVisible, setIsDataVisible] = useState(() => stepData.trim().length > 0);
+        const expectedHasContent = expectedResult.trim().length > 0;
+        const storedExpectedCollapsed = useMemo(() => readExpectedCollapsedPreference(), []);
+        const dataHasContent = stepData.trim().length > 0;
+        const [isExpectedVisible, setIsExpectedVisible] = useState(expectedHasContent ? true : !storedExpectedCollapsed);
+        const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
         const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
         const uploadImage = useStepImageUpload();
+        // 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]);
         useEffect(() => {
-            if (stepData.trim().length > 0 && !isDataVisible) {
+            if (dataHasContent && !isDataVisible) {
                 setIsDataVisible(true);
             }
-        }, [isDataVisible, stepData]);
-        useEffect(() => {
-            if (shouldFocusDataField && isDataVisible) {
-                const timer = setTimeout(() => setShouldFocusDataField(false), 0);
-                return () => clearTimeout(timer);
-            }
-            return undefined;
-        }, [isDataVisible, shouldFocusDataField]);
+        }, [dataHasContent, isDataVisible]);
         const handleStepTitleChange = useCallback((next) => {
             if (next === stepTitle) {
                 return;
@@ -58,10 +84,13 @@ export const stepBlock = createReactBlockSpec({
                 },
             });
         }, [editor, block.id, stepData]);
-        const handleShowDataField = useCallback(() => {
+        const handleShowData = useCallback(() => {
             setIsDataVisible(true);
             setShouldFocusDataField(true);
         }, []);
+        const handleHideData = useCallback(() => {
+            setIsDataVisible(false);
+        }, []);
         const handleExpectedChange = useCallback((next) => {
             if (next === expectedResult) {
                 return;
@@ -88,7 +117,25 @@ export const stepBlock = createReactBlockSpec({
         const handleFieldFocus = useCallback(() => {
             editor.setSelection(block.id, block.id);
         }, [editor, block.id]);
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: "Step Title", value: stepTitle, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, rightAction: !isDataVisible ? (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })) : null, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        const [dataFocusSignal] = useState(0);
+        const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
+        const handleShowExpected = useCallback(() => {
+            setIsExpectedVisible(true);
+            setExpectedFocusSignal((value) => value + 1);
+            writeExpectedCollapsedPreference(false);
+        }, []);
+        const handleHideExpected = useCallback(() => {
+            setIsExpectedVisible(false);
+            writeExpectedCollapsedPreference(true);
+        }, []);
+        useEffect(() => {
+            if (expectedHasContent && !isExpectedVisible) {
+                setIsExpectedVisible(true);
+            }
+        }, [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;
                         }
@@ -108,6 +155,26 @@ export const stepBlock = createReactBlockSpec({
                         catch (error) {
                             console.error("Failed to upload image to Step Data", error);
                         }
-                    } }), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, onChange: handleExpectedChange, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), _jsx("button", { type: "button", className: "bn-step-add", onClick: handleInsertNextStep, children: "+ Step" })] }));
+                    } }), 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" })] }));
     },
 });

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

@@ -4,9 +4,14 @@ import { type SnippetSuggestion } from "../snippetAutocomplete";
 type Suggestion = StepSuggestion | SnippetSuggestion;
 type StepFieldProps = {
     label: string;
+    labelToggle?: {
+        onClick: () => void;
+        expanded: boolean;
+    };
     value: string;
     onChange: (nextValue: string) => void;
     autoFocus?: boolean;
+    focusSignal?: number;
     multiline?: boolean;
     enableAutocomplete?: boolean;
     fieldName?: string;
@@ -22,5 +27,5 @@ type StepFieldProps = {
     showImageButton?: boolean;
     onFieldFocus?: () => void;
 };
-export declare function StepField({ label, value, onChange, autoFocus, 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, 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 {};

package/package/editor/blocks/stepField.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useStepAutocomplete } from "../stepAutocomplete";
 import { useStepImageUpload } from "../stepImageUpload";
 import { escapeMarkdownText, normalizePlainText } from "./markdown";
+import { useAutoResize } from "./useAutoResize";
 const READ_ONLY_ALLOWED_KEYS = new Set([
     "ArrowDown",
     "ArrowUp",
@@ -30,7 +31,7 @@ function markdownToPlainText(markdown) {
         return markdown.replace(/!\[[^\]]*]\([^)]+\)/g, "").replace(/\[[^\]]*]\([^)]+\)/g, "").replace(/[*_`~]/g, "").replace(/\s+/g, " ").trim();
     }
 }
-export function StepField({ label, value, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, onFieldFocus, }) {
+export function StepField({ label, labelToggle, value, onChange, autoFocus, focusSignal, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, onFieldFocus, }) {
     const stepSuggestions = useStepAutocomplete();
     const suggestions = suggestionsOverride !== null && suggestionsOverride !== void 0 ? suggestionsOverride : stepSuggestions;
     const uploadImage = useStepImageUpload();
@@ -86,6 +87,12 @@ export function StepField({ label, value, onChange, autoFocus, multiline = false
             textareaNode.focus();
         }
     }, [textareaNode]);
+    useEffect(() => {
+        if (!textareaNode || !focusSignal) {
+            return;
+        }
+        textareaNode.focus();
+    }, [focusSignal, textareaNode]);
     useEffect(() => {
         const instance = editorInstanceRef.current;
         if (!instance) {
@@ -120,6 +127,12 @@ export function StepField({ label, value, onChange, autoFocus, multiline = false
         }
         textareaNode.readOnly = readOnly;
     }, [readOnly, textareaNode]);
+    useAutoResize({
+        textarea: textareaNode,
+        multiline,
+        minRows: 3,
+        maxRows: 16,
+    });
     useEffect(() => {
         if (!textareaNode) {
             return;
@@ -409,7 +422,12 @@ export function StepField({ label, value, onChange, autoFocus, multiline = false
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsxs("span", { className: "bn-step-field__label", children: [label, enableAutocomplete && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsxs("div", { className: "bn-step-field__label-row", children: [labelToggle ? (_jsx("span", { className: "bn-step-field__label bn-step-field__label--toggle", role: "button", tabIndex: -1, onClick: labelToggle.onClick, onKeyDown: (event) => {
+                                    if (event.key === "Enter" || event.key === " ") {
+                                        event.preventDefault();
+                                        labelToggle.onClick();
+                                    }
+                                }, "aria-expanded": labelToggle.expanded, children: label })) : (_jsx("span", { className: "bn-step-field__label", children: label })), enableAutocomplete && (_jsx("button", { type: "button", className: "bn-step-suggestions-toggle", onMouseDown: (event) => {
                                     event.preventDefault();
                                     setShowAllSuggestions(true);
                                     textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.focus();

package/package/editor/blocks/useAutoResize.d.ts

@@ -0,0 +1,8 @@
+type Options = {
+    textarea: HTMLTextAreaElement | null;
+    multiline?: boolean;
+    minRows?: number;
+    maxRows?: number;
+};
+export declare function useAutoResize({ textarea, multiline, minRows, maxRows }: Options): void;
+export {};

package/package/editor/blocks/useAutoResize.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+export function useAutoResize({ textarea, multiline = false, minRows = 2, maxRows = 12 }) {
+    const frameRef = useRef(0);
+    useEffect(() => {
+        if (!textarea || !multiline) {
+            return;
+        }
+        const resize = () => {
+            textarea.style.height = "auto";
+            const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight || "16");
+            const minHeight = lineHeight * minRows;
+            const maxHeight = lineHeight * maxRows;
+            textarea.style.height = `${Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight)}px`;
+        };
+        const observer = new MutationObserver(resize);
+        observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+        const handleInput = () => {
+            var _a;
+            cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
+            frameRef.current = requestAnimationFrame(resize);
+        };
+        textarea.addEventListener("input", handleInput);
+        resize();
+        return () => {
+            var _a;
+            observer.disconnect();
+            textarea.removeEventListener("input", handleInput);
+            cancelAnimationFrame((_a = frameRef.current) !== null && _a !== void 0 ? _a : 0);
+        };
+    }, [textarea, multiline, minRows, maxRows]);
+}