testomatio-editor-blocks 0.1.1 → 0.1.2

package/README.md

@@ -127,13 +127,8 @@ setGlobalStepSuggestionsFetcher(async () => {
   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://..." }
-});
+// Image upload uses BlockNote's `uploadFile` handler you pass to `useCreateBlockNote`.
+// No extra setup is required for step fields.
 ```
 
 Step suggestions accept either an array of `{ id, title, ... }` or the JSON:API shape:

package/package/editor/stepAutocomplete.js

@@ -6,7 +6,20 @@ export function setGlobalStepSuggestionsFetcher(fetcher) {
     cachedSuggestions = [];
 }
 export function useStepAutocomplete() {
-    const [suggestions, setSuggestions] = useState(cachedSuggestions);
+    const [suggestions, setSuggestions] = useState(() => {
+        if (cachedSuggestions.length > 0) {
+            return cachedSuggestions;
+        }
+        if (globalFetcher) {
+            const result = globalFetcher();
+            if (!result || typeof result.then !== "function") {
+                const normalized = normalizeStepSuggestions(result);
+                cachedSuggestions = normalized;
+                return normalized;
+            }
+        }
+        return [];
+    });
     useEffect(() => {
         if (suggestions.length > 0) {
             return;

package/package/editor/stepImageUpload.d.ts

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

package/package/editor/stepImageUpload.js

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

package/package/index.d.ts

@@ -1,5 +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 { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";
 export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -1,5 +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 { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";
 export const testomatioEditorClassName = "markdown testomatio-editor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",

package/src/App.tsx

@@ -19,7 +19,7 @@ import {
 } from "./editor/customMarkdownConverter";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { setGlobalStepSuggestionsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
-import { setGlobalStepImageUploadHandler } from "./editor/stepImageUpload";
+import { setImageUploadHandler } from "./editor/stepImageUpload";
 import "./App.css";
 
 const focusTestStepTitle = (editor: CustomEditor | null | undefined, blockId?: string) => {
@@ -348,13 +348,27 @@ function App() {
   useEffect(() => {
     // Demo defaults: configure global handlers so the editor works without manual providers.
     setGlobalStepSuggestionsFetcher(() => DEMO_STEP_FIXTURES);
-    setGlobalStepImageUploadHandler(uploadStepImage);
+
+    const handler = editor?.uploadFile
+      ? async (file: Blob) => {
+          const result = await editor.uploadFile!(file as File);
+          if (typeof result === "string") {
+            return { url: result };
+          }
+          if (result && typeof result === "object" && "url" in result && typeof (result as any).url === "string") {
+            return { url: (result as any).url as string };
+          }
+          throw new Error("uploadFile did not return a URL");
+        }
+      : uploadStepImage;
+
+    setImageUploadHandler(handler);
 
     return () => {
       setGlobalStepSuggestionsFetcher(null);
-      setGlobalStepImageUploadHandler(null);
+      setImageUploadHandler(null);
     };
-  }, [uploadStepImage]);
+  }, [editor, uploadStepImage]);
 
   const createTestCaseBlock = useMemo<() => CustomPartialBlock>(() => {
     return () => ({

package/src/editor/stepAutocomplete.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
 import { parseStepsFromJsonApi } from "./stepAutocomplete";
+import { renderToStaticMarkup } from "react-dom/server";
+import React from "react";
+import { setGlobalStepSuggestionsFetcher, useStepAutocomplete } from "./stepAutocomplete";
 
 describe("parseStepsFromJsonApi", () => {
   it("converts JSON:API resources into step suggestions", () => {
@@ -80,4 +83,21 @@ describe("parseStepsFromJsonApi", () => {
       "Click submit",
     ]);
   });
+
+  it("reads suggestions from the global fetcher via useStepAutocomplete", () => {
+    setGlobalStepSuggestionsFetcher(() => [{ id: "1", title: "Global step" }]);
+
+    let seen: any[] = [];
+    const Probe = () => {
+      seen = useStepAutocomplete();
+      return null;
+    };
+
+    renderToStaticMarkup(React.createElement(Probe));
+
+    expect(seen).toEqual([{ id: "1", title: "Global step" }]);
+
+    // reset for other tests
+    setGlobalStepSuggestionsFetcher(null);
+  });
 });

package/src/editor/stepAutocomplete.tsx

@@ -46,7 +46,20 @@ export function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher
 }
 
 export function useStepAutocomplete(): StepSuggestion[] {
-  const [suggestions, setSuggestions] = useState<StepSuggestion[]>(cachedSuggestions);
+  const [suggestions, setSuggestions] = useState<StepSuggestion[]>(() => {
+    if (cachedSuggestions.length > 0) {
+      return cachedSuggestions;
+    }
+    if (globalFetcher) {
+      const result = globalFetcher();
+      if (!result || typeof (result as Promise<unknown>).then !== "function") {
+        const normalized = normalizeStepSuggestions(result as StepInput);
+        cachedSuggestions = normalized;
+        return normalized;
+      }
+    }
+    return [];
+  });
 
   useEffect(() => {
     if (suggestions.length > 0) {

package/src/editor/stepImageUpload.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import React from "react";
+import { setImageUploadHandler, useStepImageUpload, type StepImageUploadHandler } from "./stepImageUpload";
+
+describe("image upload handler hook", () => {
+  it("returns the configured upload handler", async () => {
+    const handler: StepImageUploadHandler = async () => ({ url: "https://example.com/image.png" });
+    setImageUploadHandler(handler);
+
+    let seen: any;
+    const Probe = () => {
+      seen = useStepImageUpload();
+      return null;
+    };
+
+    renderToStaticMarkup(React.createElement(Probe));
+
+    expect(seen).toBe(handler);
+    const result = await (seen as StepImageUploadHandler)(new Blob(["demo"], { type: "image/png" }));
+    expect(result).toEqual({ url: "https://example.com/image.png" });
+
+    setImageUploadHandler(null);
+  });
+});

package/src/editor/stepImageUpload.ts

@@ -0,0 +1,11 @@
+export type StepImageUploadHandler = (image: Blob) => Promise<{ url: string }>;
+
+let imageUploadHandler: StepImageUploadHandler | null = null;
+
+export function setImageUploadHandler(handler: StepImageUploadHandler | null) {
+  imageUploadHandler = handler;
+}
+
+export function useStepImageUpload(): StepImageUploadHandler | null {
+  return imageUploadHandler;
+}

package/src/index.ts

@@ -23,7 +23,7 @@ export {
 
 export {
   useStepImageUpload,
-  setGlobalStepImageUploadHandler,
+  setImageUploadHandler,
   type StepImageUploadHandler,
 } from "./editor/stepImageUpload";
 

package/src/editor/stepImageUpload.tsx

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-
-export type StepImageUploadHandler = (image: Blob) => Promise<{ url: string }>;
-
-let globalUploadHandler: StepImageUploadHandler | null = null;
-
-export function setGlobalStepImageUploadHandler(handler: StepImageUploadHandler | null) {
-  globalUploadHandler = handler;
-}
-
-export function useStepImageUpload(): StepImageUploadHandler | null {
-  const [handler, setHandler] = useState<StepImageUploadHandler | null>(globalUploadHandler);
-
-  useEffect(() => {
-    setHandler(globalUploadHandler);
-  }, []);
-
-  return handler;
-}