testomatio-editor-blocks 0.4.22 → 0.4.24

package/package/editor/blocks/step.d.ts

@@ -1,4 +1,13 @@
 export declare const isEmptyParagraph: (b: any) => boolean;
+/**
+ * Check whether a step or snippet can be inserted at / after the given block.
+ * Returns true only when walking backwards from `referenceBlockId` (skipping
+ * other steps, snippets, and empty paragraphs) reaches a heading whose text
+ * is "steps".
+ */
+export declare function canInsertStepOrSnippet(editor: {
+    document: any[];
+}, referenceBlockId: string): boolean;
 export declare const stepBlock: {
     config: {
         readonly type: "testStep";

package/package/editor/blocks/step.js

@@ -47,6 +47,36 @@ export const isEmptyParagraph = (b) => b.type === "paragraph" &&
     (!Array.isArray(b.content) ||
         b.content.length === 0 ||
         b.content.every((n) => { var _a; return n.type === "text" && !((_a = n.text) === null || _a === void 0 ? void 0 : _a.trim()); }));
+/**
+ * Check whether a step or snippet can be inserted at / after the given block.
+ * Returns true only when walking backwards from `referenceBlockId` (skipping
+ * other steps, snippets, and empty paragraphs) reaches a heading whose text
+ * is "steps".
+ */
+export function canInsertStepOrSnippet(editor, referenceBlockId) {
+    const allBlocks = editor.document;
+    const blockIndex = allBlocks.findIndex((b) => b.id === referenceBlockId);
+    if (blockIndex < 0)
+        return false;
+    for (let i = blockIndex; i >= 0; i--) {
+        const b = allBlocks[i];
+        if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
+            continue;
+        }
+        if (b.type === "heading") {
+            const text = (Array.isArray(b.content) ? b.content : [])
+                .filter((n) => n.type === "text")
+                .map((n) => { var _a; return (_a = n.text) !== null && _a !== void 0 ? _a : ""; })
+                .join("")
+                .trim()
+                .toLowerCase()
+                .replace(/[:\-–—]$/, "");
+            return text === "steps";
+        }
+        return false;
+    }
+    return false;
+}
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",

package/package/editor/blocks/stepHorizontalView.js

@@ -3,5 +3,5 @@ import { StepField } from "./stepField";
 const STEP_PLACEHOLDER = "Enter step name";
 const EXPECTED_RESULT_PLACEHOLDER = "Enter expected result";
 export function StepHorizontalView({ blockId, stepNumber, stepValue, expectedResult, onStepChange, onExpectedChange, onInsertNextStep, onFieldFocus, viewToggle, }) {
-    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), viewToggle] }), _jsxs("div", { className: "bn-teststep__horizontal-fields", children: [_jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Step" }) }), _jsx(StepField, { label: "Step", showLabel: false, value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true })] }), _jsxs("div", { className: "bn-teststep__horizontal-col", children: [_jsx("div", { className: "bn-teststep__header", children: _jsx("span", { className: "bn-teststep__title", children: "Expected result" }) }), _jsx(StepField, { label: "Expected result", showLabel: false, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus })] })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
+    return (_jsxs("div", { className: "bn-teststep bn-teststep--horizontal", "data-block-id": blockId, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__horizontal-fields", children: [_jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Step", value: stepValue, onChange: onStepChange, placeholder: STEP_PLACEHOLDER, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: onFieldFocus, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true }) }), _jsx("div", { className: "bn-teststep__horizontal-col", children: _jsx(StepField, { label: "Expected result", labelAction: viewToggle, value: expectedResult, onChange: onExpectedChange, placeholder: EXPECTED_RESULT_PLACEHOLDER, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: onFieldFocus }) })] }), _jsx("div", { className: "bn-step-actions", children: _jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: onInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }) })] })] }));
 }

package/package/editor/snippetAutocomplete.js

@@ -1,24 +1,31 @@
 import { useEffect, useState } from "react";
 let globalFetcher = null;
 let cachedSuggestions = [];
+let inflightPromise = null;
 export function setSnippetFetcher(fetcher) {
     globalFetcher = fetcher;
     cachedSuggestions = [];
+    inflightPromise = null;
 }
 export function useSnippetAutocomplete() {
     const [suggestions, setSuggestions] = useState(() => {
-        if (cachedSuggestions.length > 0) {
+        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;
+        if (!globalFetcher)
+            return [];
+        const result = globalFetcher();
+        if (result && typeof result.then === "function") {
+            if (!inflightPromise) {
+                inflightPromise = result
+                    .then((r) => normalizeSnippetSuggestions(r))
+                    .then((items) => { cachedSuggestions = items; inflightPromise = null; return items; })
+                    .catch((error) => { inflightPromise = null; console.error("Failed to fetch snippet suggestions", error); return []; });
             }
+            return [];
         }
-        return [];
+        const normalized = normalizeSnippetSuggestions(result);
+        cachedSuggestions = normalized;
+        return normalized;
     });
     useEffect(() => {
         if (suggestions.length > 0) {
@@ -28,15 +35,24 @@ export function useSnippetAutocomplete() {
             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));
+        if (!inflightPromise) {
+            inflightPromise = Promise.resolve(globalFetcher())
+                .then((result) => normalizeSnippetSuggestions(result))
+                .then((items) => {
+                cachedSuggestions = items;
+                inflightPromise = null;
+                return items;
+            })
+                .catch((error) => {
+                inflightPromise = null;
+                console.error("Failed to fetch snippet suggestions", error);
+                return [];
+            });
+        }
+        inflightPromise.then((items) => {
+            if (!cancelled)
+                setSuggestions(items);
+        });
         return () => {
             cancelled = true;
         };

package/package/editor/stepAutocomplete.js

@@ -1,24 +1,31 @@
 import { useEffect, useState } from "react";
 let globalFetcher = null;
 let cachedSuggestions = [];
+let inflightPromise = null;
 export function setStepsFetcher(fetcher) {
     globalFetcher = fetcher;
     cachedSuggestions = [];
+    inflightPromise = null;
 }
 export function useStepAutocomplete() {
     const [suggestions, setSuggestions] = useState(() => {
-        if (cachedSuggestions.length > 0) {
+        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;
+        if (!globalFetcher)
+            return [];
+        const result = globalFetcher();
+        if (result && typeof result.then === "function") {
+            if (!inflightPromise) {
+                inflightPromise = result
+                    .then((r) => normalizeStepSuggestions(r))
+                    .then((items) => { cachedSuggestions = items; inflightPromise = null; return items; })
+                    .catch((error) => { inflightPromise = null; console.error("Failed to fetch step suggestions", error); return []; });
             }
+            return [];
         }
-        return [];
+        const normalized = normalizeStepSuggestions(result);
+        cachedSuggestions = normalized;
+        return normalized;
     });
     useEffect(() => {
         if (suggestions.length > 0) {
@@ -28,15 +35,24 @@ export function useStepAutocomplete() {
             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));
+        if (!inflightPromise) {
+            inflightPromise = Promise.resolve(globalFetcher())
+                .then((result) => normalizeStepSuggestions(result))
+                .then((items) => {
+                cachedSuggestions = items;
+                inflightPromise = null;
+                return items;
+            })
+                .catch((error) => {
+                inflightPromise = null;
+                console.error("Failed to fetch step suggestions", error);
+                return [];
+            });
+        }
+        inflightPromise.then((items) => {
+            if (!cancelled)
+                setSuggestions(items);
+        });
         return () => {
             cancelled = true;
         };

package/package/styles.css

@@ -510,13 +510,17 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__horizontal-col {
-  flex: 1 0 0%;
+  flex: 1 1 0%;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
+.bn-teststep__horizontal-col .bn-step-field__top {
+  min-height: 28px;
+}
+
 @media (max-width: 860px) {
   .bn-teststep__horizontal-fields {
     flex-direction: column;
@@ -1207,6 +1211,12 @@ html.dark .bn-step-image-preview__content {
   border-radius: 999px;
   width: 1.35rem;
   height: 1.35rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 0.85rem;
+  line-height: 1;
   background: var(--overlay-dark);
   color: var(--color-white);
   cursor: pointer;

package/package.json

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

@@ -21,6 +21,7 @@ import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import { setImageUploadHandler } from "./editor/stepImageUpload";
+import { canInsertStepOrSnippet } from "./editor/blocks/step";
 import "./App.css";
 
 const focusStepField = (
@@ -333,7 +334,11 @@ function CustomSlashMenu() {
       },
     };
 
-    return filterSuggestionItems([...defaultItems, stepItem, snippetItem], query);
+    const cursorBlock = editor.getTextCursorPosition()?.block;
+    const canInsert = cursorBlock ? canInsertStepOrSnippet(editor, cursorBlock.id) : false;
+    const customItems = canInsert ? [stepItem, snippetItem] : [];
+
+    return filterSuggestionItems([...defaultItems, ...customItems], query);
   };
 
   return <SuggestionMenuController triggerCharacter="/" getItems={getItems} />;
@@ -519,7 +524,7 @@ function App() {
     const fallbackBlock = documentBlocks[documentBlocks.length - 1];
     const referenceId = selectedBlock?.id ?? fallbackBlock?.id;
 
-    if (!referenceId) {
+    if (!referenceId || !canInsertStepOrSnippet(editor, referenceId)) {
       return;
     }
 

package/src/editor/blocks/step.tsx

@@ -53,6 +53,40 @@ export const isEmptyParagraph = (b: any): boolean =>
     b.content.length === 0 ||
     b.content.every((n: any) => n.type === "text" && !n.text?.trim()));
 
+/**
+ * Check whether a step or snippet can be inserted at / after the given block.
+ * Returns true only when walking backwards from `referenceBlockId` (skipping
+ * other steps, snippets, and empty paragraphs) reaches a heading whose text
+ * is "steps".
+ */
+export function canInsertStepOrSnippet(
+  editor: { document: any[] },
+  referenceBlockId: string,
+): boolean {
+  const allBlocks = editor.document;
+  const blockIndex = allBlocks.findIndex((b: any) => b.id === referenceBlockId);
+  if (blockIndex < 0) return false;
+
+  for (let i = blockIndex; i >= 0; i--) {
+    const b = allBlocks[i];
+    if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
+      continue;
+    }
+    if (b.type === "heading") {
+      const text = (Array.isArray(b.content) ? b.content : [])
+        .filter((n: any) => n.type === "text")
+        .map((n: any) => n.text ?? "")
+        .join("")
+        .trim()
+        .toLowerCase()
+        .replace(/[:\-–—]$/, "");
+      return text === "steps";
+    }
+    return false;
+  }
+  return false;
+}
+
 export const stepBlock = createReactBlockSpec(
   {
     type: "testStep",

package/src/editor/blocks/stepHorizontalView.tsx

@@ -35,18 +35,10 @@ export function StepHorizontalView({
         <div className="bn-teststep__line" />
       </div>
       <div className="bn-teststep__content">
-        <div className="bn-teststep__header">
-          <span className="bn-teststep__title">Step</span>
-          {viewToggle}
-        </div>
         <div className="bn-teststep__horizontal-fields">
           <div className="bn-teststep__horizontal-col">
-            <div className="bn-teststep__header">
-              <span className="bn-teststep__title">Step</span>
-            </div>
             <StepField
               label="Step"
-              showLabel={false}
               value={stepValue}
               onChange={onStepChange}
               placeholder={STEP_PLACEHOLDER}
@@ -61,12 +53,9 @@ export function StepHorizontalView({
             />
           </div>
           <div className="bn-teststep__horizontal-col">
-            <div className="bn-teststep__header">
-              <span className="bn-teststep__title">Expected result</span>
-            </div>
             <StepField
               label="Expected result"
-              showLabel={false}
+              labelAction={viewToggle}
               value={expectedResult}
               onChange={onExpectedChange}
               placeholder={EXPECTED_RESULT_PLACEHOLDER}

package/src/editor/snippetAutocomplete.ts

@@ -33,26 +33,31 @@ type SnippetInput = SnippetSuggestion[] | SnippetJsonApiDocument | SnippetJsonAp
 
 let globalFetcher: SnippetSuggestionsFetcher | null = null;
 let cachedSuggestions: SnippetSuggestion[] = [];
+let inflightPromise: Promise<SnippetSuggestion[]> | null = null;
 
 export function setSnippetFetcher(fetcher: SnippetSuggestionsFetcher | null) {
   globalFetcher = fetcher;
   cachedSuggestions = [];
+  inflightPromise = null;
 }
 
 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;
+    if (cachedSuggestions.length > 0) return cachedSuggestions;
+    if (!globalFetcher) return [];
+    const result = globalFetcher();
+    if (result && typeof (result as Promise<unknown>).then === "function") {
+      if (!inflightPromise) {
+        inflightPromise = (result as Promise<SnippetInput>)
+          .then((r) => normalizeSnippetSuggestions(r))
+          .then((items) => { cachedSuggestions = items; inflightPromise = null; return items; })
+          .catch((error) => { inflightPromise = null; console.error("Failed to fetch snippet suggestions", error); return [] as SnippetSuggestion[]; });
       }
+      return [];
     }
-    return [];
+    const normalized = normalizeSnippetSuggestions(result as SnippetInput);
+    cachedSuggestions = normalized;
+    return normalized;
   });
 
   useEffect(() => {
@@ -64,14 +69,23 @@ export function useSnippetAutocomplete(): SnippetSuggestion[] {
     }
 
     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));
+    if (!inflightPromise) {
+      inflightPromise = Promise.resolve(globalFetcher())
+        .then((result) => normalizeSnippetSuggestions(result))
+        .then((items) => {
+          cachedSuggestions = items;
+          inflightPromise = null;
+          return items;
+        })
+        .catch((error) => {
+          inflightPromise = null;
+          console.error("Failed to fetch snippet suggestions", error);
+          return [] as SnippetSuggestion[];
+        });
+    }
+    inflightPromise.then((items) => {
+      if (!cancelled) setSuggestions(items);
+    });
 
     return () => {
       cancelled = true;

package/src/editor/stepAutocomplete.tsx

@@ -39,26 +39,31 @@ type StepInput = StepSuggestion[] | StepJsonApiDocument | StepJsonApiResource[]
 
 let globalFetcher: StepSuggestionsFetcher | null = null;
 let cachedSuggestions: StepSuggestion[] = [];
+let inflightPromise: Promise<StepSuggestion[]> | null = null;
 
 export function setStepsFetcher(fetcher: StepSuggestionsFetcher | null) {
   globalFetcher = fetcher;
   cachedSuggestions = [];
+  inflightPromise = null;
 }
 
 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;
+    if (cachedSuggestions.length > 0) return cachedSuggestions;
+    if (!globalFetcher) return [];
+    const result = globalFetcher();
+    if (result && typeof (result as Promise<unknown>).then === "function") {
+      if (!inflightPromise) {
+        inflightPromise = (result as Promise<StepInput>)
+          .then((r) => normalizeStepSuggestions(r))
+          .then((items) => { cachedSuggestions = items; inflightPromise = null; return items; })
+          .catch((error) => { inflightPromise = null; console.error("Failed to fetch step suggestions", error); return [] as StepSuggestion[]; });
       }
+      return [];
     }
-    return [];
+    const normalized = normalizeStepSuggestions(result as StepInput);
+    cachedSuggestions = normalized;
+    return normalized;
   });
 
   useEffect(() => {
@@ -70,14 +75,23 @@ export function useStepAutocomplete(): StepSuggestion[] {
     }
 
     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));
+    if (!inflightPromise) {
+      inflightPromise = Promise.resolve(globalFetcher())
+        .then((result) => normalizeStepSuggestions(result))
+        .then((items) => {
+          cachedSuggestions = items;
+          inflightPromise = null;
+          return items;
+        })
+        .catch((error) => {
+          inflightPromise = null;
+          console.error("Failed to fetch step suggestions", error);
+          return [] as StepSuggestion[];
+        });
+    }
+    inflightPromise.then((items) => {
+      if (!cancelled) setSuggestions(items);
+    });
 
     return () => {
       cancelled = true;

package/src/editor/styles.css

@@ -510,13 +510,17 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__horizontal-col {
-  flex: 1 0 0%;
+  flex: 1 1 0%;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
+.bn-teststep__horizontal-col .bn-step-field__top {
+  min-height: 28px;
+}
+
 @media (max-width: 860px) {
   .bn-teststep__horizontal-fields {
     flex-direction: column;
@@ -1207,6 +1211,12 @@ html.dark .bn-step-image-preview__content {
   border-radius: 999px;
   width: 1.35rem;
   height: 1.35rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 0.85rem;
+  line-height: 1;
   background: var(--overlay-dark);
   color: var(--color-white);
   cursor: pointer;