testomatio-editor-blocks 0.1.1 → 0.2.0

package/src/editor/snippetAutocomplete.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import React from "react";
+import {
+  setSnippetFetcher,
+  useSnippetAutocomplete,
+  parseSnippetsFromJsonApi,
+} from "./snippetAutocomplete";
+
+describe("snippet autocomplete", () => {
+  it("parses JSON:API snippet resources", () => {
+    const suggestions = parseSnippetsFromJsonApi({
+      data: [
+        {
+          id: "501",
+          type: "snippet",
+          attributes: {
+            title: "Login setup",
+            body: "Open /login",
+            description: "Ready state",
+            "usage-count": 4,
+          },
+        },
+      ],
+    });
+
+    expect(suggestions).toEqual([
+      {
+        id: "501",
+        title: "Login setup",
+        body: "Open /login",
+        description: "Ready state",
+        usageCount: 4,
+        isSnippet: true,
+      },
+    ]);
+  });
+
+  it("reads suggestions from the global snippet fetcher via useSnippetAutocomplete", () => {
+    setSnippetFetcher(() => [{ id: "1", title: "Reusable snippet" }]);
+
+    let seen: any[] = [];
+    const Probe = () => {
+      seen = useSnippetAutocomplete();
+      return null;
+    };
+
+    renderToStaticMarkup(React.createElement(Probe));
+
+    expect(seen).toEqual([{ id: "1", title: "Reusable snippet" }]);
+
+    setSnippetFetcher(null);
+  });
+});

package/src/editor/snippetAutocomplete.ts

@@ -0,0 +1,133 @@
+import { useEffect, useState } from "react";
+
+export type SnippetSuggestion = {
+  id: string;
+  title: string;
+  body?: string | null;
+  description?: string | null;
+  usageCount?: number | null;
+  isSnippet?: boolean | null;
+};
+
+export type SnippetJsonApiAttributes = {
+  title?: string | null;
+  body?: string | null;
+  description?: string | null;
+  "usage-count"?: number | string | null;
+};
+
+export type SnippetJsonApiResource = {
+  id?: string | number | null;
+  type?: string | null;
+  attributes?: SnippetJsonApiAttributes | null;
+};
+
+export type SnippetJsonApiDocument = {
+  data?: SnippetJsonApiResource[] | null;
+};
+
+export type SnippetSuggestionsFetcher = () => Promise<SnippetInput> | SnippetInput;
+
+type SnippetInput = SnippetSuggestion[] | SnippetJsonApiDocument | SnippetJsonApiResource[] | null | undefined;
+
+let globalFetcher: SnippetSuggestionsFetcher | null = null;
+let cachedSuggestions: SnippetSuggestion[] = [];
+
+export function setSnippetFetcher(fetcher: SnippetSuggestionsFetcher | null) {
+  globalFetcher = fetcher;
+  cachedSuggestions = [];
+}
+
+export function useSnippetAutocomplete(): SnippetSuggestion[] {
+  const [suggestions, setSuggestions] = useState<SnippetSuggestion[]>(() => {
+    if (cachedSuggestions.length > 0) {
+      return cachedSuggestions;
+    }
+    if (globalFetcher) {
+      const result = globalFetcher();
+      if (!result || typeof (result as Promise<unknown>).then !== "function") {
+        const normalized = normalizeSnippetSuggestions(result as SnippetInput);
+        cachedSuggestions = normalized;
+        return normalized;
+      }
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (suggestions.length > 0) {
+      return;
+    }
+    if (!globalFetcher) {
+      return;
+    }
+
+    let cancelled = false;
+    Promise.resolve(globalFetcher())
+      .then((result) => normalizeSnippetSuggestions(result))
+      .then((items) => {
+        if (cancelled) return;
+        cachedSuggestions = items;
+        setSuggestions(items);
+      })
+      .catch((error) => console.error("Failed to fetch snippet suggestions", error));
+
+    return () => {
+      cancelled = true;
+    };
+  }, [suggestions.length]);
+
+  return suggestions;
+}
+
+export function parseSnippetsFromJsonApi(
+  document: SnippetJsonApiDocument | SnippetJsonApiResource[] | null | undefined,
+): SnippetSuggestion[] {
+  const resources = Array.isArray(document) ? document : document?.data;
+  if (!Array.isArray(resources) || resources.length === 0) {
+    return [];
+  }
+
+  return resources
+    .map((resource) => normalizeJsonApiResource(resource))
+    .filter((value): value is SnippetSuggestion => Boolean(value));
+}
+
+function normalizeSnippetSuggestions(snippets?: SnippetInput): SnippetSuggestion[] {
+  if (!snippets) return [];
+
+  if (Array.isArray(snippets)) {
+    if (snippets.length === 0) return [];
+    if (isSnippetSuggestionArray(snippets)) return snippets;
+    return parseSnippetsFromJsonApi(snippets);
+  }
+
+  return parseSnippetsFromJsonApi(snippets);
+}
+
+function normalizeJsonApiResource(resource: SnippetJsonApiResource | null | undefined): SnippetSuggestion | null {
+  if (!resource) return null;
+  const attrs = resource.attributes;
+  const id = resource.id;
+  const title = attrs?.title ?? "";
+  if (!id || !title) return null;
+
+  return {
+    id: String(id),
+    title: String(title),
+    body: attrs?.body ?? null,
+    description: attrs?.description ?? null,
+    usageCount: coerceNumber(attrs?.["usage-count"]),
+    isSnippet: true,
+  };
+}
+
+function isSnippetSuggestionArray(value: SnippetInput): value is SnippetSuggestion[] {
+  return Array.isArray(value) && value.length > 0 && typeof (value[0] as SnippetSuggestion | any)?.title === "string";
+}
+
+function coerceNumber(value: string | number | null | undefined): number | null {
+  if (value === null || value === undefined) return null;
+  const num = Number(value);
+  return Number.isFinite(num) ? num : null;
+}

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 { setStepsFetcher, 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", () => {
+    setStepsFetcher(() => [{ 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
+    setStepsFetcher(null);
+  });
 });

package/src/editor/stepAutocomplete.tsx

@@ -40,13 +40,26 @@ type StepInput = StepSuggestion[] | StepJsonApiDocument | StepJsonApiResource[]
 let globalFetcher: StepSuggestionsFetcher | null = null;
 let cachedSuggestions: StepSuggestion[] = [];
 
-export function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher | null) {
+export function setStepsFetcher(fetcher: StepSuggestionsFetcher | null) {
   globalFetcher = fetcher;
   cachedSuggestions = [];
 }
 
 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/editor/styles.css

@@ -112,6 +112,63 @@
   box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
 }
 
+.bn-snippet {
+  border-left-color: rgba(16, 185, 129, 0.75);
+  background: rgba(16, 185, 129, 0.12);
+}
+
+.bn-snippet::after {
+  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.16);
+}
+
+.bn-snippet .bn-teststep__toggle {
+  border-color: rgba(16, 185, 129, 0.45);
+  background: rgba(16, 185, 129, 0.1);
+  color: #0f766e;
+}
+
+.bn-snippet .bn-teststep__toggle:hover {
+  background: rgba(16, 185, 129, 0.18);
+  border-color: rgba(16, 185, 129, 0.55);
+  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
+}
+
+.bn-snippet .bn-step-field__label {
+  color: #0f766e;
+}
+
+.bn-snippet .bn-step-toolbar__button {
+  border-color: rgba(16, 185, 129, 0.35);
+  color: #0f766e;
+}
+
+.bn-snippet .bn-step-toolbar__button:hover {
+  background: rgba(16, 185, 129, 0.12);
+  border-color: rgba(16, 185, 129, 0.55);
+}
+
+.bn-snippet .bn-step-editor {
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.bn-snippet .bn-step-editor:focus-visible {
+  border-color: rgba(16, 185, 129, 0.7);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+.bn-snippet .bn-step-suggestions {
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.bn-snippet .bn-step-suggestion:hover,
+.bn-snippet .bn-step-suggestion--active {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.bn-snippet .bn-step-suggestion__meta {
+  color: rgba(15, 118, 110, 0.65);
+}
+
 .bn-teststep__toggle {
   align-self: flex-start;
   padding: 0.35rem 0.6rem;

package/src/index.ts

@@ -15,7 +15,7 @@ export {
 export {
   useStepAutocomplete,
   parseStepsFromJsonApi,
-  setGlobalStepSuggestionsFetcher,
+  setStepsFetcher,
   type StepSuggestion,
   type StepJsonApiDocument,
   type StepJsonApiResource,
@@ -23,7 +23,7 @@ export {
 
 export {
   useStepImageUpload,
-  setGlobalStepImageUploadHandler,
+  setImageUploadHandler,
   type StepImageUploadHandler,
 } from "./editor/stepImageUpload";
 

package/src/editor/customSchema.test.ts

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { __markdownTestUtils } from "./customSchema";
-
-describe("customSchema markdown helpers", () => {
-  it("renders markdown images as <img> tags and round-trips back to markdown", () => {
-    const markdown = "![](/attachments/example.png)";
-    const html = __markdownTestUtils.markdownToHtml(markdown);
-
-    expect(html).toContain('<img src="/attachments/example.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
-
-    const roundTrip = __markdownTestUtils.htmlToMarkdown(html);
-    expect(roundTrip).toBe(markdown);
-  });
-
-  it("handles images mixed with surrounding text", () => {
-    const markdown = [
-      "Success screenshot:",
-      "![](/attachments/success.png)",
-      "Please archive it.",
-    ].join("\n");
-
-    const html = __markdownTestUtils.markdownToHtml(markdown);
-    expect(html).toContain('<img src="/attachments/success.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
-
-    const roundTrip = __markdownTestUtils.htmlToMarkdown(html);
-    expect(roundTrip).toBe("Success screenshot:\n![](/attachments/success.png)\nPlease archive it.");
-  });
-
-  it("renders expected-result style markdown with an image", () => {
-    const markdown = [
-      "Login should look like this",
-      "![](/login.png)",
-    ].join("\n");
-
-    const html = __markdownTestUtils.markdownToHtml(markdown);
-    expect(html).toContain('<img src="/login.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
-    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
-  });
-
-  it("keeps inline images when mixed inside a single line of markdown text", () => {
-    const markdown = "* asdsadsad aaaaa  asd ![](https://placehold.co/600x400?text=Uploaded+1763329962213)";
-    const html = __markdownTestUtils.markdownToHtml(markdown);
-
-    expect(html).toContain('<img src="https://placehold.co/600x400?text=Uploaded+1763329962213" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
-    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
-  });
-});

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;
-}