testomatio-editor-blocks 0.1.0 → 0.1.2

package/src/editor/stepAutocomplete.test.ts

@@ -0,0 +1,103 @@
+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", () => {
+    const suggestions = parseStepsFromJsonApi({
+      data: [
+        {
+          id: "42",
+          type: "step",
+          attributes: {
+            title: "Click the red button",
+            description: "Opens the modal",
+            kind: "manual",
+            labels: ["ui"],
+            keywords: ["button"],
+            "usage-count": 12,
+            "comments-count": 4,
+            "is-snippet": true,
+          },
+        },
+      ],
+    });
+
+    expect(suggestions).toEqual([
+      {
+        id: "42",
+        title: "Click the red button",
+        description: "Opens the modal",
+        kind: "manual",
+        labels: ["ui"],
+        keywords: ["button"],
+        usageCount: 12,
+        commentsCount: 4,
+        isSnippet: true,
+      },
+    ]);
+  });
+
+  it("skips entries without identifiers or titles", () => {
+    const suggestions = parseStepsFromJsonApi({
+      data: [
+        { id: "100", type: "step", attributes: { title: "" } },
+        { type: "step", attributes: { title: "Valid Step" } },
+        { id: "101", type: "step", attributes: { title: "Another Step" } },
+      ],
+    });
+
+    expect(suggestions).toEqual([
+      {
+        id: "101",
+        title: "Another Step",
+        description: null,
+        kind: null,
+        labels: [],
+        keywords: [],
+        usageCount: null,
+        commentsCount: null,
+        isSnippet: null,
+      },
+    ]);
+  });
+
+  it("accepts a raw array of JSON:API resources", () => {
+    const suggestions = parseStepsFromJsonApi([
+      {
+        id: "200",
+        type: "step",
+        attributes: { title: "Enter credentials" },
+      },
+      {
+        id: "201",
+        type: "step",
+        attributes: { title: "Click submit" },
+      },
+    ]);
+
+    expect(suggestions.map((item) => item.title)).toEqual([
+      "Enter credentials",
+      "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

@@ -0,0 +1,143 @@
+import { useEffect, useState } from "react";
+
+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;
+
+let globalFetcher: StepSuggestionsFetcher | null = null;
+let cachedSuggestions: StepSuggestion[] = [];
+
+export function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher | null) {
+  globalFetcher = fetcher;
+  cachedSuggestions = [];
+}
+
+export function useStepAutocomplete(): StepSuggestion[] {
+  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) {
+      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: StepJsonApiDocument | StepJsonApiResource[] | null | undefined,
+): StepSuggestion[] {
+  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 StepSuggestion => Boolean(value));
+}
+
+function normalizeStepSuggestions(steps?: StepInput): StepSuggestion[] {
+  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: StepJsonApiResource | null | undefined): StepSuggestion | 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),
+    description: attrs?.description ?? null,
+    kind: attrs?.kind ?? null,
+    usageCount: coerceNumber(attrs?.["usage-count"]),
+    commentsCount: coerceNumber(attrs?.["comments-count"]),
+    isSnippet: attrs?.["is-snippet"] ?? null,
+    labels: attrs?.labels ?? [],
+    keywords: attrs?.keywords ?? [],
+  };
+}
+
+function isStepSuggestionArray(value: StepInput): value is StepSuggestion[] {
+  return Array.isArray(value) && value.length > 0 && typeof (value[0] as StepSuggestion | 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/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

@@ -140,6 +140,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  position: relative;
 }
 
 .bn-step-field__top {
@@ -150,6 +151,9 @@
 }
 
 .bn-step-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -216,6 +220,54 @@
   pointer-events: none;
 }
 
+.bn-step-suggestions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 0.65rem;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  z-index: 5;
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.bn-step-suggestion {
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.bn-step-suggestion:hover,
+.bn-step-suggestion--active {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.bn-step-suggestion__title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.bn-step-suggestion__meta {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.65);
+}
+
 .bn-inline-image {
   display: block;
   max-width: 100%;

package/src/index.ts

@@ -12,4 +12,19 @@ export {
   type CustomPartialBlock,
 } from "./editor/customMarkdownConverter";
 
+export {
+  useStepAutocomplete,
+  parseStepsFromJsonApi,
+  setGlobalStepSuggestionsFetcher,
+  type StepSuggestion,
+  type StepJsonApiDocument,
+  type StepJsonApiResource,
+} from "./editor/stepAutocomplete";
+
+export {
+  useStepImageUpload,
+  setImageUploadHandler,
+  type StepImageUploadHandler,
+} from "./editor/stepImageUpload";
+
 export const testomatioEditorClassName = "markdown testomatio-editor";