testomatio-editor-blocks 0.1.1 → 0.2.0

package/package/editor/snippetAutocomplete.js

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+let globalFetcher = null;
+let cachedSuggestions = [];
+export function setSnippetFetcher(fetcher) {
+    globalFetcher = fetcher;
+    cachedSuggestions = [];
+}
+export function useSnippetAutocomplete() {
+    const [suggestions, setSuggestions] = useState(() => {
+        if (cachedSuggestions.length > 0) {
+            return cachedSuggestions;
+        }
+        if (globalFetcher) {
+            const result = globalFetcher();
+            if (!result || typeof result.then !== "function") {
+                const normalized = normalizeSnippetSuggestions(result);
+                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) {
+    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 normalizeSnippetSuggestions(snippets) {
+    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) {
+    var _a, _b, _c;
+    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),
+        body: (_b = attrs === null || attrs === void 0 ? void 0 : attrs.body) !== null && _b !== void 0 ? _b : null,
+        description: (_c = attrs === null || attrs === void 0 ? void 0 : attrs.description) !== null && _c !== void 0 ? _c : null,
+        usageCount: coerceNumber(attrs === null || attrs === void 0 ? void 0 : attrs["usage-count"]),
+        isSnippet: true,
+    };
+}
+function isSnippetSuggestionArray(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/stepAutocomplete.d.ts

@@ -29,7 +29,7 @@ export type StepJsonApiDocument = {
 };
 export type StepSuggestionsFetcher = () => Promise<StepInput> | StepInput;
 type StepInput = StepSuggestion[] | StepJsonApiDocument | StepJsonApiResource[] | null | undefined;
-export declare function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher | null): void;
+export declare function setStepsFetcher(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

@@ -1,12 +1,25 @@
 import { useEffect, useState } from "react";
 let globalFetcher = null;
 let cachedSuggestions = [];
-export function setGlobalStepSuggestionsFetcher(fetcher) {
+export function setStepsFetcher(fetcher) {
     globalFetcher = 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 { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
+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 { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
+export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";
 export const testomatioEditorClassName = "markdown testomatio-editor";

package/package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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

@@ -18,18 +18,23 @@ import {
   type CustomPartialBlock,
 } from "./editor/customMarkdownConverter";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
-import { setGlobalStepSuggestionsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
-import { setGlobalStepImageUploadHandler } from "./editor/stepImageUpload";
+import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
+import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
+import { setImageUploadHandler } from "./editor/stepImageUpload";
 import "./App.css";
 
-const focusTestStepTitle = (editor: CustomEditor | null | undefined, blockId?: string) => {
+const focusStepField = (
+  editor: CustomEditor | null | undefined,
+  blockId?: string,
+  fieldName = "title",
+) => {
   if (!editor || !blockId) {
     return;
   }
 
   const focus = () => {
     const stepTitle = document.querySelector<HTMLElement>(
-      `[data-block-id="${blockId}"] [data-step-field="title"]`,
+      `[data-block-id="${blockId}"] [data-step-field="${fieldName}"]`,
     );
 
     if (stepTitle) {
@@ -52,12 +57,6 @@ const focusTestStepTitle = (editor: CustomEditor | null | undefined, blockId?: s
 
 type Schema = typeof customSchema;
 
-const DEFAULT_BLOCK_PROPS = {
-  textAlignment: "left" as const,
-  textColor: "default" as const,
-  backgroundColor: "default" as const,
-};
-
 const DEMO_STEP_FIXTURES: StepJsonApiDocument = {
   data: [
     {
@@ -200,6 +199,83 @@ const DEMO_STEP_FIXTURES: StepJsonApiDocument = {
         "comments-count": 0,
       },
     },
+    {
+      id: "301",
+      type: "step",
+      attributes: {
+        labels: ["snippet"],
+        title: "Open login page and wait for ready state",
+        kind: "snippet",
+        description: "Reusable login navigation snippet",
+        keywords: ["login", "auth"],
+        "is-snippet": true,
+        "usage-count": 41,
+        "comments-count": 2,
+      },
+    },
+    {
+      id: "302",
+      type: "step",
+      attributes: {
+        labels: ["snippet"],
+        title: "Fill credentials with provided user object",
+        kind: "snippet",
+        description: "Populate form fields from test data",
+        keywords: ["form", "user"],
+        "is-snippet": true,
+        "usage-count": 35,
+        "comments-count": 1,
+      },
+    },
+    {
+      id: "303",
+      type: "step",
+      attributes: {
+        labels: ["snippet"],
+        title: "Verify toast message disappears",
+        kind: "snippet",
+        description: "Shared assertion for ephemeral UI",
+        keywords: ["toast", "assertion"],
+        "is-snippet": true,
+        "usage-count": 18,
+        "comments-count": 0,
+      },
+    },
+  ],
+};
+
+const DEMO_SNIPPET_FIXTURES: SnippetJsonApiDocument = {
+  data: [
+    {
+      id: "501",
+      type: "snippet",
+      attributes: {
+        title: "Login setup",
+        body: "Open /login\nWait for form to render\nEnsure no console errors",
+        description: "Navigate to login and wait for readiness",
+        "usage-count": 12,
+      },
+    },
+    {
+      id: "502",
+      type: "snippet",
+      attributes: {
+        title: "Fill credentials",
+        body: "Type email\nType password\nClick Sign In",
+        description: "Reusable credentials filler",
+        "usage-count": 9,
+      },
+    },
+    {
+      id: "503",
+      type: "snippet",
+      attributes: {
+        title: "Verify toast disappears",
+        body: "Assert toast visible\nWait 3s\nAssert toast removed",
+        description: "Shared assertion for ephemeral notifications",
+        "usage-count": 7,
+      },
+    },
   ],
 };
 
@@ -229,11 +305,32 @@ function CustomSlashMenu() {
             expectedResult: "",
           },
         });
-        focusTestStepTitle(editor, inserted.id);
+        focusStepField(editor, inserted.id, "title");
+      },
+    };
+
+    const snippetItem = {
+      key: "snippet" as any,
+      title: "Snippet",
+      subtext: "Insert a reusable snippet with data and an expected result",
+      group: "Test documentation",
+      icon: <span className="bn-suggestion-icon">SN</span>,
+      aliases: ["snippet", "reusable step"],
+      onItemClick: () => {
+        const inserted = insertOrUpdateBlock(editor, {
+          type: "snippet",
+          props: {
+            snippetId: "",
+            snippetTitle: "",
+            snippetData: "",
+            snippetExpectedResult: "",
+          },
+        });
+        focusStepField(editor, inserted.id, "snippet-title");
       },
     };
 
-    return filterSuggestionItems([...defaultItems, stepItem], query);
+    return filterSuggestionItems([...defaultItems, stepItem, snippetItem], query);
   };
 
   return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
@@ -316,7 +413,7 @@ function App() {
 
     const unsubscribe = editor.onChange((instance, context) => {
       const changes = context.getChanges();
-      const newlyInsertedStep = changes.find(({ type, block, source }) => {
+      const newlyInsertedAction = changes.find(({ type, block, source }) => {
         if (type !== "insert") {
           return false;
         }
@@ -325,11 +422,20 @@ function App() {
           return false;
         }
 
-        return block.type === "testStep" && ((block.props as any)?.stepTitle ?? "") === "";
+        if (block.type === "testStep") {
+          return ((block.props as any)?.stepTitle ?? "") === "";
+        }
+
+        if (block.type === "snippet") {
+          return ((block.props as any)?.snippetTitle ?? "") === "";
+        }
+
+        return false;
       });
 
-      if (newlyInsertedStep) {
-        focusTestStepTitle(instance, newlyInsertedStep.block.id);
+      if (newlyInsertedAction) {
+        const fieldName = newlyInsertedAction.block.type === "snippet" ? "snippet-title" : "title";
+        focusStepField(instance, newlyInsertedAction.block.id, fieldName);
       }
     });
 
@@ -347,47 +453,57 @@ function App() {
 
   useEffect(() => {
     // Demo defaults: configure global handlers so the editor works without manual providers.
-    setGlobalStepSuggestionsFetcher(() => DEMO_STEP_FIXTURES);
-    setGlobalStepImageUploadHandler(uploadStepImage);
+    setStepsFetcher(() => DEMO_STEP_FIXTURES);
+    setSnippetFetcher(() => DEMO_SNIPPET_FIXTURES);
+
+    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);
+      setStepsFetcher(null);
+      setSnippetFetcher(null);
+      setImageUploadHandler(null);
     };
-  }, [uploadStepImage]);
+  }, [editor, uploadStepImage]);
 
-  const createTestCaseBlock = useMemo<() => CustomPartialBlock>(() => {
+  const createTestStepBlock = useMemo<() => CustomPartialBlock>(() => {
     return () => ({
-      type: "testCase",
+      type: "testStep",
       props: {
-        ...DEFAULT_BLOCK_PROPS,
-        status: "draft",
-        reference: "",
+        stepTitle: "",
+        stepData: "",
+        expectedResult: "",
       },
-      content: [
-        {
-          type: "text",
-          text: "Write the expected result, steps, and assertions here…",
-          styles: {},
-        },
-      ],
       children: [],
     });
   }, []);
 
-  const createTestStepBlock = useMemo<() => CustomPartialBlock>(() => {
+  const createSnippetBlock = useMemo<() => CustomPartialBlock>(() => {
     return () => ({
-      type: "testStep",
+      type: "snippet",
       props: {
-        stepTitle: "",
-        stepData: "",
-        expectedResult: "",
+        snippetId: "",
+        snippetTitle: "",
+        snippetData: "",
+        snippetExpectedResult: "",
       },
       children: [],
     });
   }, []);
 
-  const insertBlockAfterSelection = (createBlock: () => CustomPartialBlock) => {
+  const insertBlockAfterSelection = (createBlock: () => CustomPartialBlock, focusFieldName?: string) => {
     const selection = editor.getSelection();
     const selectedBlocks = selection?.blocks ?? [];
     const selectedBlock = selectedBlocks[selectedBlocks.length - 1];
@@ -401,13 +517,13 @@ function App() {
 
     const inserted = editor.insertBlocks([createBlock()], referenceId, "after");
     const firstInserted = inserted[0];
-    if (firstInserted) {
-      focusTestStepTitle(editor, firstInserted.id);
+    if (firstInserted && focusFieldName) {
+      focusStepField(editor, firstInserted.id, focusFieldName);
     }
   };
 
-  const insertTestCase = () => insertBlockAfterSelection(createTestCaseBlock);
-  const insertTestStep = () => insertBlockAfterSelection(createTestStepBlock);
+  const insertTestStep = () => insertBlockAfterSelection(createTestStepBlock, "title");
+  const insertSnippet = () => insertBlockAfterSelection(createSnippetBlock, "snippet-title");
 
   const handleCopyMarkdown = async () => {
     if (conversionError) {
@@ -495,9 +611,9 @@ function App() {
           <button
             type="button"
             className="app__action app__action--ghost"
-            onClick={insertTestCase}
+            onClick={insertSnippet}
           >
-            Insert Test Case
+            Insert Snippet
           </button>
         </div>
       </header>

package/src/editor/blocks/blocks.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { customSchema } from "../customSchema";
+
+describe("custom block specs", () => {
+  it("registers the step block", () => {
+    const step = customSchema.blockSpecs.testStep;
+    expect(step).toBeDefined();
+    expect((step as any).config?.type ?? (step as any).type).toBe("testStep");
+    expect((step as any).config?.propSchema?.stepTitle?.default).toBe("");
+    expect((step as any).config?.propSchema?.stepData?.default).toBe("");
+    expect((step as any).config?.propSchema?.expectedResult?.default).toBe("");
+  });
+
+  it("registers the snippet block", () => {
+    const snippet = customSchema.blockSpecs.snippet;
+    expect(snippet).toBeDefined();
+    expect((snippet as any).config?.type ?? (snippet as any).type).toBe("snippet");
+    expect((snippet as any).config?.propSchema?.snippetId?.default).toBe("");
+    expect((snippet as any).config?.propSchema?.snippetTitle?.default).toBe("");
+    expect((snippet as any).config?.propSchema?.snippetData?.default).toBe("");
+  });
+});