testomatio-editor-blocks 0.1.0 → 0.1.1

package/README.md

@@ -110,6 +110,57 @@ return (
    - `testCase`: rich-text wrapper with status and reference metadata.
    - `testStep`: inline WYSIWYG inputs for Step Title, Data, and Expected Result with bold/italic/underline formatting.
 
+## Step Autocomplete & Image Upload Hooks
+
+Configure everything via JS—no React providers required:
+
+```ts
+import {
+  customSchema,
+  setGlobalStepSuggestionsFetcher,
+  setGlobalStepImageUploadHandler,
+} from "testomatio-editor-blocks";
+
+// Step suggestions (fetch or return an array of { id, title, ... })
+setGlobalStepSuggestionsFetcher(async () => {
+  const res = await fetch("https://api.testomatio.com/v1/steps");
+  return res.json();
+});
+
+// Image upload handler used by Step Data / Expected fields
+setGlobalStepImageUploadHandler(async (image: Blob) => {
+  const formData = new FormData();
+  formData.append("file", image);
+  const res = await fetch("https://api.testomatio.com/v1/uploads", { method: "POST", body: formData });
+  return res.json(); // must resolve to { url: "https://..." }
+});
+```
+
+Step suggestions accept either an array of `{ id, title, ... }` or the JSON:API shape:
+
+```json
+{
+  "data": [
+    {
+      "id": "145",
+      "type": "step",
+      "attributes": {
+        "title": "Donec placerat, dui vitae",
+        "description": null,
+        "kind": "manual",
+        "labels": [],
+        "keywords": [],
+        "usage-count": 23,
+        "comments-count": 0,
+        "is-snippet": null
+      }
+    }
+  ]
+}
+```
+
+When a user types in Step Title, autocomplete filters these titles; Tab/Enter/Ctrl/Cmd+Space or the ⌄ button will insert the selection.
+
 ## Running Tests
 
 Vitest covers the Markdown/block converter. Run the suite with:

package/package/editor/customMarkdownConverter.js

@@ -273,7 +273,7 @@ function serializeBlock(block, ctx, orderedIndex) {
             const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
             if (normalizedExpected.length > 0) {
                 const expectedLines = normalizedExpected.split(/\r?\n/);
-                const label = "*Expected Result*";
+                const label = "*Expected*";
                 expectedLines.forEach((expectedLine, index) => {
                     const trimmedLine = expectedLine.trim();
                     if (trimmedLine.length === 0) {
@@ -611,7 +611,16 @@ function parseTestStep(lines, index) {
     if (!trimmed.startsWith("* ") && !trimmed.startsWith("- ")) {
         return null;
     }
-    const stepTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+    const rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+    const titleImages = [];
+    const titleWithPlaceholders = rawTitle
+        .replace(/!\[[^\]]*\]\(([^)]+)\)/g, (match) => {
+        titleImages.push(match);
+        return "!";
+    })
+        .replace(/\s{2,}/g, " ")
+        .trim();
+    const isLikelyStep = /^step\b/i.test(titleWithPlaceholders) || titleImages.length > 0;
     const stepDataLines = [];
     let expectedResult = "";
     let next = index + 1;
@@ -678,22 +687,24 @@ function parseTestStep(lines, index) {
         .map((line) => line.trimEnd())
         .join("\n")
         .trim();
-    // Only parse as test step if there's expected result or data content
-    if (expectedResult || stepData) {
-        return {
-            block: {
-                type: "testStep",
-                props: {
-                    stepTitle,
-                    stepData,
-                    expectedResult,
-                },
-                children: [],
-            },
-            nextIndex: next,
-        };
+    if (!isLikelyStep && !expectedResult && stepDataLines.length === 0) {
+        return null;
     }
-    return null;
+    const stepDataWithImages = [stepData, titleImages.join("\n")]
+        .filter(Boolean)
+        .join(stepData ? "\n" : "");
+    return {
+        block: {
+            type: "testStep",
+            props: {
+                stepTitle: titleWithPlaceholders,
+                stepData: stepDataWithImages,
+                expectedResult,
+            },
+            children: [],
+        },
+        nextIndex: next,
+    };
 }
 function parseTestCase(lines, index) {
     var _a;

package/package/editor/customSchema.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useStepAutocomplete } from "./stepAutocomplete";
+import { useStepImageUpload } from "./stepImageUpload";
 function escapeHtml(text) {
     return text
         .replace(/&/g, "&")
@@ -160,23 +162,61 @@ const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
 function escapeMarkdownText(text) {
     return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
 }
-function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false }) {
+function normalizePlainText(text) {
+    return text.replace(/\s+/g, " ").trim().toLowerCase();
+}
+function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, enableImageUpload = false, onImageFile, }) {
     const editorRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const autoFocusRef = useRef(false);
+    const [plainTextValue, setPlainTextValue] = useState("");
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+    const [showAllSuggestions, setShowAllSuggestions] = useState(false);
+    const suggestions = useStepAutocomplete();
+    const uploadImage = useStepImageUpload();
+    const fileInputRef = useRef(null);
+    const [isUploading, setIsUploading] = useState(false);
+    const normalizedQuery = normalizePlainText(plainTextValue);
+    const filteredSuggestions = useMemo(() => {
+        if (!enableAutocomplete) {
+            return [];
+        }
+        const pool = showAllSuggestions || !normalizedQuery
+            ? suggestions
+            : suggestions.filter((item) => normalizePlainText(item.title).startsWith(normalizedQuery));
+        return pool.slice(0, 8);
+    }, [enableAutocomplete, normalizedQuery, showAllSuggestions, suggestions]);
+    const hasExactMatch = filteredSuggestions.some((item) => normalizePlainText(item.title) === normalizedQuery);
+    const shouldShowAutocomplete = enableAutocomplete &&
+        isFocused &&
+        filteredSuggestions.length > 0 &&
+        (!hasExactMatch || showAllSuggestions) &&
+        (showAllSuggestions || normalizedQuery.length >= 1);
+    useEffect(() => {
+        setActiveSuggestionIndex(0);
+    }, [normalizedQuery, filteredSuggestions.length, showAllSuggestions]);
+    useEffect(() => {
+        if (normalizedQuery.length > 0) {
+            setShowAllSuggestions(false);
+        }
+    }, [normalizedQuery]);
     useEffect(() => {
+        var _a;
         const element = editorRef.current;
         if (!element || isFocused) {
             return;
         }
         if (value.trim().length === 0) {
             element.innerHTML = "";
+            setPlainTextValue("");
         }
         else {
             element.innerHTML = markdownToHtml(value);
+            setPlainTextValue((_a = element.textContent) !== null && _a !== void 0 ? _a : "");
         }
     }, [value, isFocused]);
     const syncValue = useCallback(() => {
+        var _a;
         const element = editorRef.current;
         if (!element) {
             return;
@@ -185,47 +225,228 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
         if (markdown !== value) {
             onChange(markdown);
         }
+        setPlainTextValue((_a = element.innerText) !== null && _a !== void 0 ? _a : "");
         if (!markdown && element.innerHTML !== "") {
             element.innerHTML = "";
         }
     }, [onChange, value]);
     useEffect(() => {
-        if (autoFocus && !autoFocusRef.current && editorRef.current) {
-            editorRef.current.focus();
+        if (!autoFocus || autoFocusRef.current || !editorRef.current) {
+            return;
+        }
+        autoFocusRef.current = true;
+        const element = editorRef.current;
+        const focusElement = () => {
+            var _a;
+            element.focus();
             setIsFocused(true);
-            autoFocusRef.current = true;
+            const selection = typeof window !== "undefined" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : null;
+            if (selection) {
+                selection.selectAllChildren(element);
+                selection.collapseToEnd();
+            }
+        };
+        if (typeof requestAnimationFrame === "function") {
+            const frame = requestAnimationFrame(focusElement);
+            return () => cancelAnimationFrame(frame);
         }
+        const timeout = setTimeout(focusElement, 0);
+        return () => clearTimeout(timeout);
     }, [autoFocus]);
     const applyFormat = useCallback((command) => {
         document.execCommand(command);
         syncValue();
     }, [syncValue]);
-    const handlePaste = useCallback((event) => {
-        var _a, _b;
+    const ensureCaretInEditor = useCallback(() => {
+        var _a;
+        const element = editorRef.current;
+        if (!element) {
+            return false;
+        }
+        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
+        if (!selection) {
+            return false;
+        }
+        if (selection.rangeCount === 0 || !element.contains(selection.anchorNode)) {
+            const range = document.createRange();
+            range.selectNodeContents(element);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        element.focus();
+        return true;
+    }, []);
+    const insertImageAtCursor = useCallback((url) => {
+        const element = editorRef.current;
+        if (!element) {
+            return;
+        }
+        const escapedUrl = escapeHtml(url);
+        const imgHtml = `<img src="${escapedUrl}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`;
+        element.focus();
+        ensureCaretInEditor();
+        document.execCommand("insertHTML", false, imgHtml);
+        syncValue();
+    }, [ensureCaretInEditor, syncValue]);
+    const handleImagePick = useCallback(async () => {
+        if (!enableImageUpload || !uploadImage) {
+            return;
+        }
+        const fileInput = fileInputRef.current;
+        if (fileInput) {
+            fileInput.click();
+        }
+    }, [enableImageUpload, uploadImage]);
+    const handleFileChange = useCallback(async (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file || !uploadImage) {
+            return;
+        }
+        try {
+            setIsUploading(true);
+            const response = await uploadImage(file);
+            if (response === null || response === void 0 ? void 0 : response.url) {
+                insertImageAtCursor(response.url);
+            }
+        }
+        catch (error) {
+            console.error("Failed to upload image", error);
+        }
+        finally {
+            setIsUploading(false);
+            event.target.value = "";
+        }
+    }, [insertImageAtCursor, uploadImage]);
+    const handlePaste = useCallback(async (event) => {
+        var _a, _b, _c;
+        if ((enableImageUpload && uploadImage) || onImageFile) {
+            const items = Array.from((_a = event.clipboardData.items) !== null && _a !== void 0 ? _a : []);
+            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) {
+                event.preventDefault();
+                if (onImageFile) {
+                    await onImageFile(file);
+                    return;
+                }
+                if (enableImageUpload && uploadImage) {
+                    try {
+                        setIsUploading(true);
+                        const result = await uploadImage(file);
+                        if (result === null || result === void 0 ? void 0 : result.url) {
+                            ensureCaretInEditor();
+                            document.execCommand("insertHTML", false, `<img src="${escapeHtml(result.url)}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`);
+                            syncValue();
+                        }
+                    }
+                    catch (error) {
+                        console.error("Failed to upload image from paste", error);
+                    }
+                    finally {
+                        setIsUploading(false);
+                    }
+                    return;
+                }
+            }
+        }
         event.preventDefault();
-        const text = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text/plain")) !== null && _b !== void 0 ? _b : "";
-        document.execCommand("insertText", false, text);
+        const text = (_c = (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.getData("text/plain")) !== null && _c !== void 0 ? _c : "";
+        const html = markdownToHtml(text);
+        ensureCaretInEditor();
+        document.execCommand("insertHTML", false, html);
         syncValue();
-    }, [syncValue]);
-    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsx("span", { className: "bn-step-field__label", children: label }), _jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} formatting`, children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+    }, [enableImageUpload, ensureCaretInEditor, syncValue, uploadImage]);
+    const applySuggestion = useCallback((suggestion) => {
+        var _a;
+        const escaped = escapeMarkdownText(suggestion.title);
+        onChange(escaped);
+        setPlainTextValue(suggestion.title);
+        setActiveSuggestionIndex(0);
+        setShowAllSuggestions(false);
+        if (editorRef.current) {
+            editorRef.current.innerHTML = markdownToHtml(escaped);
+            editorRef.current.focus();
+            const selection = typeof window !== "undefined" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : null;
+            if (selection && editorRef.current.firstChild) {
+                const range = document.createRange();
+                range.selectNodeContents(editorRef.current);
+                range.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+    }, [onChange]);
+    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) => {
+                                    var _a;
+                                    event.preventDefault();
+                                    setShowAllSuggestions(true);
+                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }, "aria-label": "Show step suggestions", tabIndex: -1, children: "\u2304" }))] }), _jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} formatting`, children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
                                     var _a;
                                     event.preventDefault();
                                     (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     applyFormat("bold");
-                                }, "aria-label": "Bold", children: "B" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                }, "aria-label": "Bold", tabIndex: -1, children: "B" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
                                     var _a;
                                     event.preventDefault();
                                     (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     applyFormat("italic");
-                                }, "aria-label": "Italic", children: "I" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                }, "aria-label": "Italic", tabIndex: -1, children: "I" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
                                     var _a;
                                     event.preventDefault();
                                     (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     applyFormat("underline");
-                                }, "aria-label": "Underline", children: "U" })] })] }), _jsx("div", { ref: editorRef, className: "bn-step-editor", contentEditable: true, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-multiline": multiline ? "true" : "false", onFocus: () => setIsFocused(true), onBlur: () => {
+                                }, "aria-label": "Underline", tabIndex: -1, children: "U" }), enableImageUpload && uploadImage && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    handleImagePick();
+                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: "Img" }))] })] }), enableImageUpload && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileChange })), _jsx("div", { ref: editorRef, className: "bn-step-editor", contentEditable: true, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-multiline": multiline ? "true" : "false", "data-step-field": fieldName, onFocus: () => {
+                    var _a, _b;
+                    setIsFocused(true);
+                    setPlainTextValue((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : "");
+                }, onBlur: () => {
                     setIsFocused(false);
                     syncValue();
                 }, onInput: syncValue, onPaste: handlePaste, onKeyDown: (event) => {
+                    var _a, _b;
+                    if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
+                        event.preventDefault();
+                        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
+                        const node = editorRef.current;
+                        if (selection && node) {
+                            const range = document.createRange();
+                            range.selectNodeContents(node);
+                            selection.removeAllRanges();
+                            selection.addRange(range);
+                        }
+                        return;
+                    }
+                    if (enableAutocomplete && shouldShowAutocomplete) {
+                        if (event.key === "ArrowDown") {
+                            event.preventDefault();
+                            setActiveSuggestionIndex((prev) => prev + 1 >= filteredSuggestions.length ? 0 : prev + 1);
+                            return;
+                        }
+                        if (event.key === "ArrowUp") {
+                            event.preventDefault();
+                            setActiveSuggestionIndex((prev) => prev - 1 < 0 ? filteredSuggestions.length - 1 : prev - 1);
+                            return;
+                        }
+                        if (event.key === "Enter" || event.key === "Tab") {
+                            event.preventDefault();
+                            const suggestion = (_b = filteredSuggestions[activeSuggestionIndex]) !== null && _b !== void 0 ? _b : filteredSuggestions[0];
+                            if (suggestion) {
+                                applySuggestion(suggestion);
+                            }
+                            return;
+                        }
+                    }
+                    if (enableAutocomplete && (event.metaKey || event.ctrlKey) && (event.code === "Space" || event.key === "" || event.key === " ")) {
+                        event.preventDefault();
+                        setShowAllSuggestions(true);
+                        return;
+                    }
                     if (event.key === "Enter") {
                         event.preventDefault();
                         if (multiline && event.shiftKey) {
@@ -237,7 +458,12 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
                         }
                         syncValue();
                     }
-                } })] }));
+                } }), shouldShowAutocomplete && (_jsx("div", { className: "bn-step-suggestions", role: "listbox", "aria-label": `${label} suggestions`, children: filteredSuggestions.map((suggestion, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === activeSuggestionIndex, className: index === activeSuggestionIndex
+                        ? "bn-step-suggestion bn-step-suggestion--active"
+                        : "bn-step-suggestion", onMouseDown: (event) => {
+                        event.preventDefault();
+                        applySuggestion(suggestion);
+                    }, tabIndex: -1, children: [_jsx("span", { className: "bn-step-suggestion__title", children: suggestion.title }), typeof suggestion.usageCount === "number" && suggestion.usageCount > 0 && (_jsxs("span", { className: "bn-step-suggestion__meta", children: [suggestion.usageCount, " uses"] }))] }, suggestion.id))) }))] }));
 }
 const statusOptions = ["draft", "ready", "blocked"];
 const statusLabels = {
@@ -272,6 +498,7 @@ const testStepBlock = createReactBlockSpec({
         const showExpectedField = stepTitle.trim().length > 0 || stepData.trim().length > 0 || expectedResult.trim().length > 0;
         const [isDataVisible, setIsDataVisible] = useState(() => stepData.trim().length > 0);
         const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
+        const uploadImage = useStepImageUpload();
         useEffect(() => {
             if (stepData.trim().length > 0 && !isDataVisible) {
                 setIsDataVisible(true);
@@ -318,7 +545,27 @@ const testStepBlock = createReactBlockSpec({
                 },
             });
         }, [editor, block.id, expectedResult]);
-        return (_jsxs("div", { className: "bn-teststep", children: [_jsx(StepField, { label: "Step Title", value: stepTitle, placeholder: "Describe the action to perform", onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0 }), !isDataVisible && (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", children: "[+ Data]" })), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true }))] }));
+        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", enableImageUpload: false, 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("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true, enableImageUpload: true }))] }));
     },
 });
 const testCaseBlock = createReactBlockSpec({

package/package/editor/stepAutocomplete.d.ts

@@ -0,0 +1,35 @@
+export type StepSuggestion = {
+    id: string;
+    title: string;
+    description?: string | null;
+    kind?: string | null;
+    usageCount?: number | null;
+    commentsCount?: number | null;
+    isSnippet?: boolean | null;
+    labels?: string[];
+    keywords?: string[];
+};
+export type StepJsonApiAttributes = {
+    title?: string | null;
+    description?: string | null;
+    kind?: string | null;
+    keywords?: string[] | null;
+    labels?: string[] | null;
+    "usage-count"?: number | string | null;
+    "comments-count"?: number | string | null;
+    "is-snippet"?: boolean | null;
+};
+export type StepJsonApiResource = {
+    id?: string | number | null;
+    type?: string | null;
+    attributes?: StepJsonApiAttributes | null;
+};
+export type StepJsonApiDocument = {
+    data?: StepJsonApiResource[] | null;
+};
+export type StepSuggestionsFetcher = () => Promise<StepInput> | StepInput;
+type StepInput = StepSuggestion[] | StepJsonApiDocument | StepJsonApiResource[] | null | undefined;
+export declare function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher | null): void;
+export declare function useStepAutocomplete(): StepSuggestion[];
+export declare function parseStepsFromJsonApi(document: StepJsonApiDocument | StepJsonApiResource[] | null | undefined): StepSuggestion[];
+export {};

package/package/editor/stepAutocomplete.js

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+let globalFetcher = null;
+let cachedSuggestions = [];
+export function setGlobalStepSuggestionsFetcher(fetcher) {
+    globalFetcher = fetcher;
+    cachedSuggestions = [];
+}
+export function useStepAutocomplete() {
+    const [suggestions, setSuggestions] = useState(cachedSuggestions);
+    useEffect(() => {
+        if (suggestions.length > 0) {
+            return;
+        }
+        if (!globalFetcher) {
+            return;
+        }
+        let cancelled = false;
+        Promise.resolve(globalFetcher())
+            .then((result) => normalizeStepSuggestions(result))
+            .then((items) => {
+            if (cancelled)
+                return;
+            cachedSuggestions = items;
+            setSuggestions(items);
+        })
+            .catch((error) => console.error("Failed to fetch step suggestions", error));
+        return () => {
+            cancelled = true;
+        };
+    }, [suggestions.length]);
+    return suggestions;
+}
+export function parseStepsFromJsonApi(document) {
+    const resources = Array.isArray(document) ? document : document === null || document === void 0 ? void 0 : document.data;
+    if (!Array.isArray(resources) || resources.length === 0) {
+        return [];
+    }
+    return resources
+        .map((resource) => normalizeJsonApiResource(resource))
+        .filter((value) => Boolean(value));
+}
+function normalizeStepSuggestions(steps) {
+    if (!steps)
+        return [];
+    if (Array.isArray(steps)) {
+        if (steps.length === 0)
+            return [];
+        if (isStepSuggestionArray(steps))
+            return steps;
+        return parseStepsFromJsonApi(steps);
+    }
+    return parseStepsFromJsonApi(steps);
+}
+function normalizeJsonApiResource(resource) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!resource)
+        return null;
+    const attrs = resource.attributes;
+    const id = resource.id;
+    const title = (_a = attrs === null || attrs === void 0 ? void 0 : attrs.title) !== null && _a !== void 0 ? _a : "";
+    if (!id || !title)
+        return null;
+    return {
+        id: String(id),
+        title: String(title),
+        description: (_b = attrs === null || attrs === void 0 ? void 0 : attrs.description) !== null && _b !== void 0 ? _b : null,
+        kind: (_c = attrs === null || attrs === void 0 ? void 0 : attrs.kind) !== null && _c !== void 0 ? _c : null,
+        usageCount: coerceNumber(attrs === null || attrs === void 0 ? void 0 : attrs["usage-count"]),
+        commentsCount: coerceNumber(attrs === null || attrs === void 0 ? void 0 : attrs["comments-count"]),
+        isSnippet: (_d = attrs === null || attrs === void 0 ? void 0 : attrs["is-snippet"]) !== null && _d !== void 0 ? _d : null,
+        labels: (_e = attrs === null || attrs === void 0 ? void 0 : attrs.labels) !== null && _e !== void 0 ? _e : [],
+        keywords: (_f = attrs === null || attrs === void 0 ? void 0 : attrs.keywords) !== null && _f !== void 0 ? _f : [],
+    };
+}
+function isStepSuggestionArray(value) {
+    var _a;
+    return Array.isArray(value) && value.length > 0 && typeof ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.title) === "string";
+}
+function coerceNumber(value) {
+    if (value === null || value === undefined)
+        return null;
+    const num = Number(value);
+    return Number.isFinite(num) ? num : null;
+}

package/package/editor/stepImageUpload.d.ts

@@ -0,0 +1,5 @@
+export type StepImageUploadHandler = (image: Blob) => Promise<{
+    url: string;
+}>;
+export declare function setGlobalStepImageUploadHandler(handler: StepImageUploadHandler | null): void;
+export declare function useStepImageUpload(): StepImageUploadHandler | null;

package/package/editor/stepImageUpload.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+let globalUploadHandler = null;
+export function setGlobalStepImageUploadHandler(handler) {
+    globalUploadHandler = handler;
+}
+export function useStepImageUpload() {
+    const [handler, setHandler] = useState(globalUploadHandler);
+    useEffect(() => {
+        setHandler(globalUploadHandler);
+    }, []);
+    return handler;
+}

package/package/index.d.ts

@@ -1,3 +1,5 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, } from "./editor/customMarkdownConverter";
+export { useStepAutocomplete, parseStepsFromJsonApi, setGlobalStepSuggestionsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
+export { useStepImageUpload, setGlobalStepImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";
 export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -1,3 +1,5 @@
 export { customSchema, } from "./editor/customSchema";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
+export { useStepAutocomplete, parseStepsFromJsonApi, setGlobalStepSuggestionsFetcher, } from "./editor/stepAutocomplete";
+export { useStepImageUpload, setGlobalStepImageUploadHandler, } from "./editor/stepImageUpload";
 export const testomatioEditorClassName = "markdown testomatio-editor";