testomatio-editor-blocks 0.4.23 → 0.4.25

package/package/editor/blocks/snippet.js

@@ -110,11 +110,11 @@ export const snippetBlock = createReactBlockSpec({
         if (!hasSnippets) {
             return (_jsx("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: _jsx("p", { className: "bn-snippet__empty", children: "No snippets in this project." }) }));
         }
-        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, onFocus: handleFieldFocus, children: [_jsxs("div", { className: "bn-snippet__header", children: [_jsx("span", { className: "bn-snippet__label", children: "Snippet" }), _jsx(SnippetDropdown, { value: resolvedTitle, placeholder: "Select Snippet", suggestions: snippetSuggestions, selectedId: snippetId, onSelect: handleSnippetSelect })] }), isSnippetSelected && snippetData && (_jsx("div", { className: "bn-snippet__content", dangerouslySetInnerHTML: {
-                        __html: snippetData
-                            .replace(/&/g, "&")
-                            .replace(/</g, "&lt;")
-                            .replace(/>/g, "&gt;"),
-                    } }))] }));
+        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, onFocus: handleFieldFocus, children: [_jsxs("div", { className: "bn-snippet__header", children: [_jsx("span", { className: "bn-snippet__label", children: "Snippet" }), _jsx(SnippetDropdown, { value: resolvedTitle, placeholder: "Select Snippet", suggestions: snippetSuggestions, selectedId: snippetId, onSelect: handleSnippetSelect })] }), isSnippetSelected && (_jsx("div", { className: "bn-snippet__content", children: snippetData ? (_jsx("span", { dangerouslySetInnerHTML: {
+                            __html: snippetData
+                                .replace(/&/g, "&amp;")
+                                .replace(/</g, "&lt;")
+                                .replace(/>/g, "&gt;"),
+                        } })) : (_jsx("span", { className: "bn-snippet__empty", children: "No content here. Please update the snippet." })) }))] }));
     },
 });

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/customMarkdownConverter.js

@@ -257,6 +257,14 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             lines.push(...serializeChildren(block, ctx));
             return lines;
         }
+        case "image": {
+            const url = block.props.url || "";
+            const caption = block.props.caption || "";
+            if (url) {
+                lines.push(`![${caption}](${url})`);
+            }
+            return flattenWithBlankLine(lines, true);
+        }
         case "testStep":
         case "snippet": {
             const isSnippet = block.type === "snippet";
@@ -455,9 +463,9 @@ function serializeBlocks(blocks, ctx) {
 export function blocksToMarkdown(blocks) {
     const lines = serializeBlocks(blocks, { listDepth: 0, insideQuote: false });
     const cleaned = lines
-        // Collapse more than two blank lines into just two for readability.
+        // Collapse excessive blank lines but preserve one extra for empty paragraphs.
         .join("\n")
-        .replace(/\n{3,}/g, "\n\n")
+        .replace(/\n{4,}/g, "\n\n\n")
         .trimEnd();
     return cleaned;
 }
@@ -1086,12 +1094,6 @@ export function fixMalformedImageBlocks(blocks) {
     while (i < blocks.length) {
         const current = blocks[i];
         const next = blocks[i + 1];
-        // Skip empty paragraphs
-        if (current.type === "paragraph" &&
-            (!current.content || !Array.isArray(current.content) || current.content.length === 0)) {
-            i += 1;
-            continue;
-        }
         // Check if current is a paragraph with just "!" - this is definitely a malformed image
         if (current.type === "paragraph" &&
             current.content &&
@@ -1133,7 +1135,7 @@ export function fixMalformedImageBlocks(blocks) {
     return result;
 }
 export function markdownToBlocks(markdown) {
-    var _a, _b;
+    var _a, _b, _c;
     const normalized = markdown.replace(/\r\n/g, "\n");
     const lines = normalized.split("\n");
     const blocks = [];
@@ -1143,6 +1145,16 @@ export function markdownToBlocks(markdown) {
         const line = lines[index];
         if (!line.trim()) {
             index += 1;
+            // Count consecutive blank lines
+            let blankCount = 1;
+            while (index < lines.length && !lines[index].trim()) {
+                blankCount++;
+                index++;
+            }
+            // Create empty paragraph for each extra blank line beyond the first
+            for (let i = 1; i < blankCount; i++) {
+                blocks.push({ type: "paragraph", content: [], children: [] });
+            }
             continue;
         }
         const snippetWrapper = parseSnippetWrapper(lines, index);
@@ -1202,11 +1214,33 @@ export function markdownToBlocks(markdown) {
             index = nextIndex;
             continue;
         }
+        const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+        if (imageMatch) {
+            blocks.push({
+                type: "image",
+                props: {
+                    url: imageMatch[2],
+                    caption: imageMatch[1] || "",
+                    name: "",
+                },
+                children: [],
+            });
+            index += 1;
+            continue;
+        }
         const paragraph = parseParagraph(lines, index);
         blocks.push(paragraph.block);
         index = paragraph.nextIndex;
     }
-    return fixMalformedImageBlocks(blocks);
+    // Insert empty paragraphs between consecutive headings so users can type between them
+    const result = [];
+    for (let i = 0; i < blocks.length; i++) {
+        result.push(blocks[i]);
+        if (blocks[i].type === "heading" && ((_c = blocks[i + 1]) === null || _c === void 0 ? void 0 : _c.type) === "heading") {
+            result.push({ type: "paragraph", content: [], children: [] });
+        }
+    }
+    return fixMalformedImageBlocks(result);
 }
 function splitTableRow(line) {
     let value = line.trim();

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/index.d.ts

@@ -1,5 +1,5 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
-export { stepBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, } from "./editor/customMarkdownConverter";

package/package/index.js

@@ -1,5 +1,5 @@
 export { customSchema, } from "./editor/customSchema";
-export { stepBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";

package/package/styles.css

@@ -515,7 +515,6 @@ html.dark .bn-step-image-preview__content {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  overflow: hidden;
 }
 
 .bn-teststep__horizontal-col .bn-step-field__top {
@@ -1212,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.23",
+  "version": "0.4.25",
   "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/snippet.tsx

@@ -200,16 +200,21 @@ export const snippetBlock = createReactBlockSpec(
               onSelect={handleSnippetSelect}
             />
           </div>
-          {isSnippetSelected && snippetData && (
-            <div
-              className="bn-snippet__content"
-              dangerouslySetInnerHTML={{
-                __html: snippetData
-                  .replace(/&/g, "&amp;")
-                  .replace(/</g, "&lt;")
-                  .replace(/>/g, "&gt;"),
-              }}
-            />
+          {isSnippetSelected && (
+            <div className="bn-snippet__content">
+              {snippetData ? (
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: snippetData
+                      .replace(/&/g, "&amp;")
+                      .replace(/</g, "&lt;")
+                      .replace(/>/g, "&gt;"),
+                  }}
+                />
+              ) : (
+                <span className="bn-snippet__empty">No content here. Please update the snippet.</span>
+              )}
+            </div>
           )}
         </div>
       );

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/customMarkdownConverter.test.ts

@@ -1173,36 +1173,17 @@ describe("markdownToBlocks", () => {
 
     const blocks = markdownToBlocks(markdown);
 
-    // Find the paragraph blocks that contain the images (links)
-    const imageBlocks = blocks.filter(block =>
-      block.type === "paragraph" &&
-      block.content &&
-      Array.isArray(block.content) &&
-      block.content.some((item: any) =>
-        (item.type === "text" && item.text === "!") ||
-        (item.type === "link" && item.href && item.href.includes("/attachments/"))
-      )
-    );
+    // Find the image blocks
+    const imageBlocks = blocks.filter(block => block.type === "image");
 
-    // Should have two paragraph blocks with images
+    // Should have two image blocks
     expect(imageBlocks.length).toBe(2);
 
-    // Check that both image links are properly parsed
-    const imageLinks: any[] = [];
-    imageBlocks.forEach(block => {
-      if (block.content && Array.isArray(block.content)) {
-        const link = (block.content as any[]).find(item => item.type === "link");
-        if (link) {
-          imageLinks.push(link);
-        }
-      }
-    });
-
-    expect(imageLinks).toHaveLength(2);
-    expect(imageLinks[0].href).toBe("/attachments/se2n8jaGon.png");
-    expect(imageLinks[0].content).toEqual([{ type: "text", text: "logs", styles: {} }]);
-    expect(imageLinks[1].href).toBe("/attachments/p5DgklVeMg.png");
-    expect(imageLinks[1].content).toEqual([{ type: "text", text: "", styles: {} }]);
+    // Check image block props
+    expect((imageBlocks[0].props as any).url).toBe("/attachments/se2n8jaGon.png");
+    expect((imageBlocks[0].props as any).caption).toBe("logs");
+    expect((imageBlocks[1].props as any).url).toBe("/attachments/p5DgklVeMg.png");
+    expect((imageBlocks[1].props as any).caption).toBe("");
 
     // Test round-trip conversion
     const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
@@ -1311,47 +1292,19 @@ describe("markdownToBlocks", () => {
 
     const blocks = markdownToBlocks(markdown);
 
-    // Find image paragraphs
-    const imageParagraphs = blocks.filter(block =>
-      block.type === "paragraph" &&
-      block.content &&
-      Array.isArray(block.content) &&
-      block.content.some((item: any) => item.type === "link")
-    );
+    // Find image blocks
+    const imageBlocks = blocks.filter(block => block.type === "image");
 
-    // Should have exactly 2 image paragraphs
-    expect(imageParagraphs).toHaveLength(2);
+    // Should have exactly 2 image blocks
+    expect(imageBlocks).toHaveLength(2);
 
     // First image with alt text
-    expect(imageParagraphs[0].content).toContainEqual({
-      type: "text",
-      text: "!",
-      styles: {}
-    });
-    expect(imageParagraphs[0].content).toContainEqual({
-      type: "link",
-      href: "/attachments/se2n8jaGon.png",
-      content: [{ type: "text", text: "logs", styles: {} }]
-    });
+    expect((imageBlocks[0].props as any).url).toBe("/attachments/se2n8jaGon.png");
+    expect((imageBlocks[0].props as any).caption).toBe("logs");
 
     // Second image without alt text
-    expect(imageParagraphs[1].content).toContainEqual({
-      type: "text",
-      text: "!",
-      styles: {}
-    });
-    expect(imageParagraphs[1].content).toContainEqual({
-      type: "link",
-      href: "/attachments/p5DgklVeMg.png",
-      content: [{ type: "text", text: "", styles: {} }]
-    });
-
-    // No extra empty paragraphs
-    const emptyParagraphs = blocks.filter(block =>
-      block.type === "paragraph" &&
-      (!block.content || block.content.length === 0)
-    );
-    expect(emptyParagraphs).toHaveLength(0);
+    expect((imageBlocks[1].props as any).url).toBe("/attachments/p5DgklVeMg.png");
+    expect((imageBlocks[1].props as any).caption).toBe("");
 
     // Test round-trip conversion
     const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);
@@ -1374,18 +1327,9 @@ describe("markdownToBlocks", () => {
 
     const blocks = markdownToBlocks(markdown);
 
-    // Should have exactly 2 image paragraphs, no empty paragraphs
-    const imageParagraphs = blocks.filter(block =>
-      block.type === "paragraph" &&
-      block.content &&
-      Array.isArray(block.content) &&
-      block.content.some((item: any) => item.type === "link")
-    );
-
-    const emptyParagraphs = blocks.filter(block =>
-      block.type === "paragraph" &&
-      (!block.content || block.content.length === 0)
-    );
+    // Should have exactly 2 image blocks
+    const imageBlocks = blocks.filter(block => block.type === "image");
+    expect(imageBlocks).toHaveLength(2);
 
     // Check for malformed image blocks (paragraphs with just "!" but no link)
     const malformedBlocks = blocks.filter(block =>
@@ -1395,9 +1339,6 @@ describe("markdownToBlocks", () => {
       block.content.some((item: any) => item.type === "text" && item.text === "!") &&
       !block.content.some((item: any) => item.type === "link")
     );
-
-    expect(imageParagraphs).toHaveLength(2);
-    expect(emptyParagraphs).toHaveLength(0);
     expect(malformedBlocks).toHaveLength(0);
 
     // Test round-trip conversion
@@ -1489,8 +1430,8 @@ describe("markdownToBlocks", () => {
     // Apply the fixMalformedImageBlocks function
     const fixedBlocks = fixMalformedImageBlocks(malformedBlocks);
 
-    // Should have removed the malformed image blocks (both the "!" only block and the empty block)
-    expect(fixedBlocks.length).toBe(2);
+    // Should have removed the malformed "!" only block but kept the empty paragraph and image block
+    expect(fixedBlocks.length).toBe(3);
     expect(fixedBlocks[0].type).toBe("heading");
     expect(fixedBlocks[1].type).toBe("paragraph");
     expect(fixedBlocks[1].content).toContainEqual(
@@ -1499,6 +1440,8 @@ describe("markdownToBlocks", () => {
     expect(fixedBlocks[1].content).toContainEqual(
       { type: "link", href: "/attachments/se2n8jaGon.png", content: [{ type: "text", text: "logs", styles: {} }] }
     );
+    expect(fixedBlocks[2].type).toBe("paragraph");
+    expect(fixedBlocks[2].content).toHaveLength(0);
   });
 
   it("reproduces the exact Unsplash URL issue", () => {
@@ -1525,14 +1468,9 @@ describe("markdownToBlocks", () => {
     // Should have at least 3 blocks
     expect(blocks.length).toBeGreaterThanOrEqual(3);
 
-    // Should have at least one paragraph with content (images)
-    const imageBlocks = blocks.filter(b =>
-      b.type === "paragraph" &&
-      b.content &&
-      Array.isArray(b.content) &&
-      b.content.some((item: any) => item.type === "link")
-    );
-    expect(imageBlocks.length).toBeGreaterThan(0);
+    // Should have image blocks
+    const imageBlocks = blocks.filter(b => b.type === "image");
+    expect(imageBlocks.length).toBe(2);
 
     // Test round-trip conversion - check that we get the images back
     const roundTripMarkdown = blocksToMarkdown(blocks as CustomEditorBlock[]);

package/src/editor/customMarkdownConverter.ts

@@ -335,6 +335,14 @@ function serializeBlock(
       lines.push(...serializeChildren(block, ctx));
       return lines;
     }
+    case "image": {
+      const url = (block.props as any).url || "";
+      const caption = (block.props as any).caption || "";
+      if (url) {
+        lines.push(`![${caption}](${url})`);
+      }
+      return flattenWithBlankLine(lines, true);
+    }
     case "testStep":
     case "snippet": {
       const isSnippet = block.type === "snippet";
@@ -569,9 +577,9 @@ function serializeBlocks(blocks: CustomEditorBlock[], ctx: MarkdownContext): str
 export function blocksToMarkdown(blocks: CustomEditorBlock[]): string {
   const lines = serializeBlocks(blocks, { listDepth: 0, insideQuote: false });
   const cleaned = lines
-    // Collapse more than two blank lines into just two for readability.
+    // Collapse excessive blank lines but preserve one extra for empty paragraphs.
     .join("\n")
-    .replace(/\n{3,}/g, "\n\n")
+    .replace(/\n{4,}/g, "\n\n\n")
     .trimEnd();
 
   return cleaned;
@@ -1300,15 +1308,6 @@ export function fixMalformedImageBlocks(blocks: CustomPartialBlock[]): CustomPar
     const current = blocks[i];
     const next = blocks[i + 1];
 
-    // Skip empty paragraphs
-    if (
-      current.type === "paragraph" &&
-      (!current.content || !Array.isArray(current.content) || current.content.length === 0)
-    ) {
-      i += 1;
-      continue;
-    }
-
     // Check if current is a paragraph with just "!" - this is definitely a malformed image
     if (
       current.type === "paragraph" &&
@@ -1371,6 +1370,16 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
     const line = lines[index];
     if (!line.trim()) {
       index += 1;
+      // Count consecutive blank lines
+      let blankCount = 1;
+      while (index < lines.length && !lines[index].trim()) {
+        blankCount++;
+        index++;
+      }
+      // Create empty paragraph for each extra blank line beyond the first
+      for (let i = 1; i < blankCount; i++) {
+        blocks.push({ type: "paragraph", content: [], children: [] } as CustomPartialBlock);
+      }
       continue;
     }
 
@@ -1447,12 +1456,36 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       continue;
     }
 
+    const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+    if (imageMatch) {
+      blocks.push({
+        type: "image",
+        props: {
+          url: imageMatch[2],
+          caption: imageMatch[1] || "",
+          name: "",
+        },
+        children: [],
+      } as CustomPartialBlock);
+      index += 1;
+      continue;
+    }
+
     const paragraph = parseParagraph(lines, index);
     blocks.push(paragraph.block);
     index = paragraph.nextIndex;
   }
 
-  return fixMalformedImageBlocks(blocks);
+  // Insert empty paragraphs between consecutive headings so users can type between them
+  const result: CustomPartialBlock[] = [];
+  for (let i = 0; i < blocks.length; i++) {
+    result.push(blocks[i]);
+    if (blocks[i].type === "heading" && blocks[i + 1]?.type === "heading") {
+      result.push({ type: "paragraph", content: [], children: [] } as CustomPartialBlock);
+    }
+  }
+
+  return fixMalformedImageBlocks(result);
 }
 
 function splitTableRow(line: string): string[] {

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

@@ -515,7 +515,6 @@ html.dark .bn-step-image-preview__content {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  overflow: hidden;
 }
 
 .bn-teststep__horizontal-col .bn-step-field__top {
@@ -1212,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/src/index.ts

@@ -4,7 +4,7 @@ export {
   type CustomBlock,
   type CustomEditor,
 } from "./editor/customSchema";
-export { stepBlock } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";