testomatio-editor-blocks 0.2.3 → 0.4.0

package/package/editor/blocks/markdown.d.ts

@@ -3,3 +3,8 @@ export declare function markdownToHtml(markdown: string): string;
 export declare function escapeMarkdownText(text: string): string;
 export declare function normalizePlainText(text: string): string;
 export declare function htmlToMarkdown(html: string): string;
+declare function cleanupEscapedFormatting(markdown: string): string;
+export declare const __markdownStringUtils: {
+    cleanupEscapedFormatting: typeof cleanupEscapedFormatting;
+};
+export {};

package/package/editor/blocks/markdown.js

@@ -1,5 +1,6 @@
 const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+const INLINE_SEGMENT_REGEX = /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;
 export function escapeHtml(text) {
     return text
         .replace(/&/g, "&amp;")
@@ -16,11 +17,16 @@ function parseInlineMarkdown(text) {
         return [];
     }
     const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
-    const rawSegments = normalized
-        .split(/(\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/)
-        .filter(Boolean);
+    const rawSegments = normalized.split(INLINE_SEGMENT_REGEX).filter(Boolean);
     return rawSegments.map((segment) => {
         const baseStyles = { bold: false, italic: false, underline: false };
+        if (/^\*\*\*(.+)\*\*\*$/.test(segment) || /^___(.+)___$/.test(segment)) {
+            const content = segment.slice(3, -3);
+            return {
+                text: restoreEscapes(content),
+                styles: { bold: true, italic: true, underline: false },
+            };
+        }
         if (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
             const content = segment.slice(2, -2);
             return {
@@ -106,12 +112,13 @@ function fallbackHtmlToMarkdown(html) {
         .replace(/<\/span>/gi, "")
         .replace(/<u>(.*?)<\/u>/gis, (_m, content) => `<u>${content}</u>`);
     result = result.replace(/<\/?[^>]+>/g, "");
-    return result
+    const markdown = result
         .split("\n")
         .map((line) => line.trimEnd())
         .join("\n")
         .replace(/\n{3,}/g, "\n\n")
         .trim();
+    return cleanupEscapedFormatting(markdown);
 }
 export function htmlToMarkdown(html) {
     if (typeof document === "undefined") {
@@ -156,5 +163,23 @@ export function htmlToMarkdown(html) {
         }
     };
     const markdown = Array.from(temp.childNodes).map(traverse).join("");
-    return markdown.replace(/\n{3,}/g, "\n\n").trim();
+    return cleanupEscapedFormatting(markdown).replace(/\n{3,}/g, "\n\n").trim();
+}
+function cleanupEscapedFormatting(markdown) {
+    return markdown.replace(/(\\+)([*_]+)/g, (_match, slashes, markers) => {
+        if (markers.length === 0) {
+            return slashes + markers;
+        }
+        const shouldClean = markers.length === 3 ||
+            markers.length === 2 ||
+            markers.length === 1;
+        if (!shouldClean) {
+            return slashes + markers;
+        }
+        const hasPrintable = slashes.length % 2 === 0;
+        return hasPrintable ? markers : slashes + markers;
+    });
 }
+export const __markdownStringUtils = {
+    cleanupEscapedFormatting,
+};

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, placeholder: "Describe the reusable action", 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, placeholder: "Add optional data or assets for the snippet", 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, placeholder: "Describe the action to perform", 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, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", 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

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