testomatio-editor-blocks 0.4.25 → 0.4.27

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

@@ -1,3 +1,9 @@
+/**
+ * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
+ * heading text looks like a "Steps" heading.
+ * Accepted forms: steps, step, step(s).
+ */
+export declare function isStepsHeading(text: string): boolean;
 export declare const isEmptyParagraph: (b: any) => boolean;
 /**
  * Check whether a step or snippet can be inserted at / after the given block.

package/package/editor/blocks/step.js

@@ -43,6 +43,14 @@ const writeStepViewMode = (mode) => {
         //
     }
 };
+/**
+ * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
+ * heading text looks like a "Steps" heading.
+ * Accepted forms: steps, step, step(s).
+ */
+export function isStepsHeading(text) {
+    return /^step(s|\(s\))?$/.test(text);
+}
 export const isEmptyParagraph = (b) => b.type === "paragraph" &&
     (!Array.isArray(b.content) ||
         b.content.length === 0 ||
@@ -71,7 +79,7 @@ export function canInsertStepOrSnippet(editor, referenceBlockId) {
                 .trim()
                 .toLowerCase()
                 .replace(/[:\-–—]$/, "");
-            return text === "steps";
+            return isStepsHeading(text);
         }
         return false;
     }
@@ -148,7 +156,7 @@ export const stepBlock = createReactBlockSpec({
                         .trim()
                         .toLowerCase()
                         .replace(/[:\-–—]$/, "");
-                    return text === "steps";
+                    return isStepsHeading(text);
                 }
                 return false;
             }

package/package/editor/createMarkdownPasteHandler.d.ts

@@ -0,0 +1,12 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import type { CustomPartialBlock } from "./customMarkdownConverter";
+type PasteHandlerContext = {
+    event: ClipboardEvent;
+    editor: BlockNoteEditor<any, any, any>;
+    defaultPasteHandler: (context?: {
+        prioritizeMarkdownOverHTML?: boolean;
+        plainTextAsMarkdown?: boolean;
+    }) => boolean | undefined;
+};
+export declare function createMarkdownPasteHandler(converter: (markdown: string) => CustomPartialBlock[]): ({ event, editor, defaultPasteHandler }: PasteHandlerContext) => boolean | undefined;
+export {};

package/package/editor/createMarkdownPasteHandler.js

@@ -0,0 +1,36 @@
+export function createMarkdownPasteHandler(converter) {
+    return ({ event, editor, defaultPasteHandler }) => {
+        var _a, _b, _c, _d;
+        const plainText = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text/plain")) !== null && _b !== void 0 ? _b : "";
+        if (!plainText.trim())
+            return defaultPasteHandler();
+        try {
+            const parsedBlocks = converter(plainText);
+            if (parsedBlocks.length === 0)
+                return defaultPasteHandler();
+            const selection = editor.getSelection();
+            const selectedIds = (_d = (_c = selection === null || selection === void 0 ? void 0 : selection.blocks) === null || _c === void 0 ? void 0 : _c.map((block) => block.id).filter((id) => Boolean(id))) !== null && _d !== void 0 ? _d : [];
+            if (selectedIds.length > 0) {
+                editor.replaceBlocks(selectedIds, parsedBlocks);
+            }
+            else {
+                const cursorBlock = editor.getTextCursorPosition().block;
+                if (cursorBlock) {
+                    editor.replaceBlocks([cursorBlock.id], parsedBlocks);
+                }
+                else if (editor.document.length > 0) {
+                    const reference = editor.document[editor.document.length - 1];
+                    editor.insertBlocks(parsedBlocks, reference.id, "after");
+                }
+                else {
+                    return defaultPasteHandler();
+                }
+            }
+            editor.focus();
+            return true;
+        }
+        catch {
+            return defaultPasteHandler();
+        }
+    };
+}

package/package/editor/customMarkdownConverter.js

@@ -1,4 +1,5 @@
 import { isLinkInlineContent, isStyledTextInlineContent, } from "@blocknote/core";
+import { isStepsHeading } from "./blocks/step";
 const BASE_BLOCK_PROPS = {
     textAlignment: "left",
     textColor: "default",
@@ -463,9 +464,8 @@ function serializeBlocks(blocks, ctx) {
 export function blocksToMarkdown(blocks) {
     const lines = serializeBlocks(blocks, { listDepth: 0, insideQuote: false });
     const cleaned = lines
-        // Collapse excessive blank lines but preserve one extra for empty paragraphs.
         .join("\n")
-        .replace(/\n{4,}/g, "\n\n\n")
+        .replace(/\n{3,}/g, "\n\n")
         .trimEnd();
     return cleaned;
 }
@@ -1183,7 +1183,7 @@ export function markdownToBlocks(markdown) {
             const headingLevel = (_b = (_a = headingBlock.props) === null || _a === void 0 ? void 0 : _a.level) !== null && _b !== void 0 ? _b : 3;
             const headingText = inlineContentToPlainText(headingBlock.content);
             const normalizedHeading = headingText.trim().toLowerCase();
-            if (normalizedHeading.replace(/[:\-–—]$/, "") === "steps") {
+            if (isStepsHeading(normalizedHeading.replace(/[:\-–—]$/, ""))) {
                 stepsHeadingLevel = headingLevel;
             }
             else if (stepsHeadingLevel !== null &&

package/package/index.d.ts

@@ -1,8 +1,9 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading } 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";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";
+export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -1,8 +1,9 @@
 export { customSchema, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";
+export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 export const testomatioEditorClassName = "markdown testomatio-editor";

package/package/styles.css

@@ -25,7 +25,7 @@
   --color-accent-500: #10b981;
 
   /* Selection */
-  --color-selection: #f4d35e;
+  --color-selection: rgba(0, 120, 215, 0.3);
 
   /* Semantic tokens - these reference the palette above */
   --text-primary: #262626;
@@ -1162,7 +1162,7 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-field:focus-within .overtype-wrapper .overtype-input::selection {
-  background-color: rgba(244, 211, 94, 0.4) !important;
+  background-color: var(--color-selection) !important;
 }
 
 /* Hide OverType's built-in link tooltip — we use our own */

package/package.json

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

@@ -17,6 +17,7 @@ import {
   type CustomEditorBlock,
   type CustomPartialBlock,
 } from "./editor/customMarkdownConverter";
+import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
@@ -347,46 +348,7 @@ function CustomSlashMenu() {
 function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
-    pasteHandler: ({ event, editor, defaultPasteHandler }) => {
-      const plainText = event.clipboardData?.getData("text/plain") ?? "";
-
-      if (!plainText.trim()) {
-        return defaultPasteHandler();
-      }
-
-      try {
-        const parsedBlocks = markdownToBlocks(plainText);
-
-        if (parsedBlocks.length === 0) {
-          return defaultPasteHandler();
-        }
-
-        const selection = editor.getSelection();
-        const selectedIds = selection?.blocks
-          ?.map((block) => block.id)
-          .filter((id): id is string => Boolean(id)) ?? [];
-
-        if (selectedIds.length > 0) {
-          editor.replaceBlocks(selectedIds, parsedBlocks);
-        } else {
-          const cursorBlock = editor.getTextCursorPosition().block;
-          if (cursorBlock) {
-            editor.replaceBlocks([cursorBlock.id], parsedBlocks);
-          } else if (editor.document.length > 0) {
-            const reference = editor.document[editor.document.length - 1];
-            editor.insertBlocks(parsedBlocks, reference.id, "after");
-          } else {
-            return defaultPasteHandler();
-          }
-        }
-
-        editor.focus();
-        return true;
-      } catch (error) {
-        console.error("Failed to paste custom markdown", error);
-        return defaultPasteHandler();
-      }
-    },
+    pasteHandler: createMarkdownPasteHandler(markdownToBlocks),
   });
   const [markdown, setMarkdown] = useState("");
   const [conversionError, setConversionError] = useState<string | null>(null);

package/src/editor/blocks/step.tsx

@@ -47,6 +47,15 @@ const writeStepViewMode = (mode: StepViewMode) => {
   }
 };
 
+/**
+ * Returns true when a normalised (lowercased, trailing-punctuation-stripped)
+ * heading text looks like a "Steps" heading.
+ * Accepted forms: steps, step, step(s).
+ */
+export function isStepsHeading(text: string): boolean {
+  return /^step(s|\(s\))?$/.test(text);
+}
+
 export const isEmptyParagraph = (b: any): boolean =>
   b.type === "paragraph" &&
   (!Array.isArray(b.content) ||
@@ -80,7 +89,7 @@ export function canInsertStepOrSnippet(
         .trim()
         .toLowerCase()
         .replace(/[:\-–—]$/, "");
-      return text === "steps";
+      return isStepsHeading(text);
     }
     return false;
   }
@@ -162,7 +171,7 @@ export const stepBlock = createReactBlockSpec(
               .trim()
               .toLowerCase()
               .replace(/[:\-–—]$/, "");
-            return text === "steps";
+            return isStepsHeading(text);
           }
           return false;
         }

package/src/editor/createMarkdownPasteHandler.ts

@@ -0,0 +1,49 @@
+import type { BlockNoteEditor } from "@blocknote/core";
+import type { CustomPartialBlock } from "./customMarkdownConverter";
+
+type PasteHandlerContext = {
+  event: ClipboardEvent;
+  editor: BlockNoteEditor<any, any, any>;
+  defaultPasteHandler: (context?: {
+    prioritizeMarkdownOverHTML?: boolean;
+    plainTextAsMarkdown?: boolean;
+  }) => boolean | undefined;
+};
+
+export function createMarkdownPasteHandler(
+  converter: (markdown: string) => CustomPartialBlock[],
+) {
+  return ({ event, editor, defaultPasteHandler }: PasteHandlerContext): boolean | undefined => {
+    const plainText = event.clipboardData?.getData("text/plain") ?? "";
+    if (!plainText.trim()) return defaultPasteHandler();
+
+    try {
+      const parsedBlocks = converter(plainText);
+      if (parsedBlocks.length === 0) return defaultPasteHandler();
+
+      const selection = editor.getSelection();
+      const selectedIds = selection?.blocks
+        ?.map((block: any) => block.id)
+        .filter((id: unknown): id is string => Boolean(id)) ?? [];
+
+      if (selectedIds.length > 0) {
+        editor.replaceBlocks(selectedIds, parsedBlocks);
+      } else {
+        const cursorBlock = editor.getTextCursorPosition().block;
+        if (cursorBlock) {
+          editor.replaceBlocks([cursorBlock.id], parsedBlocks);
+        } else if (editor.document.length > 0) {
+          const reference = editor.document[editor.document.length - 1];
+          editor.insertBlocks(parsedBlocks, reference.id, "after");
+        } else {
+          return defaultPasteHandler();
+        }
+      }
+
+      editor.focus();
+      return true;
+    } catch {
+      return defaultPasteHandler();
+    }
+  };
+}

package/src/editor/customMarkdownConverter.test.ts

@@ -863,6 +863,40 @@ describe("markdownToBlocks", () => {
     ]);
   });
 
+  it("parses steps under a 'Step' heading (singular)", () => {
+    const markdown = ["## Step", "", "* Open the app", "* Click login"].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+    expect(stepBlocks).toHaveLength(2);
+    expect(stepBlocks[0].props).toMatchObject({ stepTitle: "Open the app" });
+    expect(stepBlocks[1].props).toMatchObject({ stepTitle: "Click login" });
+  });
+
+  it("parses steps under a 'Step(s)' heading", () => {
+    const markdown = ["# Step(s)", "", "1. First step", "2. Second step"].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+    expect(stepBlocks).toHaveLength(2);
+    expect(stepBlocks[0].props).toMatchObject({ stepTitle: "First step", listStyle: "ordered" });
+    expect(stepBlocks[1].props).toMatchObject({ stepTitle: "Second step", listStyle: "ordered" });
+  });
+
+  it("parses steps under an h4 'step' heading (lowercase)", () => {
+    const markdown = ["#### step", "", "* Do something"].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({ stepTitle: "Do something" });
+  });
+
+  it("parses steps under a 'Step:' heading with trailing colon", () => {
+    const markdown = ["### Step:", "", "* Verify output"].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    const stepBlocks = blocks.filter((block) => block.type === "testStep");
+    expect(stepBlocks).toHaveLength(1);
+    expect(stepBlocks[0].props).toMatchObject({ stepTitle: "Verify output" });
+  });
+
   it("handles multiple steps with expected results without extra asterisks", () => {
     const markdown = [
       "### Preconditions",

package/src/editor/customMarkdownConverter.ts

@@ -9,6 +9,7 @@ import type {
   Styles,
 } from "@blocknote/core";
 import type { customSchema } from "./customSchema";
+import { isStepsHeading } from "./blocks/step";
 
 // Types derived from the custom schema so the converter stays type-safe when the schema evolves.
 type Schema = typeof customSchema;
@@ -577,9 +578,8 @@ 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 excessive blank lines but preserve one extra for empty paragraphs.
     .join("\n")
-    .replace(/\n{4,}/g, "\n\n\n")
+    .replace(/\n{3,}/g, "\n\n")
     .trimEnd();
 
   return cleaned;
@@ -1413,7 +1413,7 @@ export function markdownToBlocks(markdown: string): CustomPartialBlock[] {
       const headingText = inlineContentToPlainText(headingBlock.content as any);
       const normalizedHeading = headingText.trim().toLowerCase();
 
-      if (normalizedHeading.replace(/[:\-–—]$/, "") === "steps") {
+      if (isStepsHeading(normalizedHeading.replace(/[:\-–—]$/, ""))) {
         stepsHeadingLevel = headingLevel;
       } else if (
         stepsHeadingLevel !== null &&

package/src/editor/styles.css

@@ -25,7 +25,7 @@
   --color-accent-500: #10b981;
 
   /* Selection */
-  --color-selection: #f4d35e;
+  --color-selection: rgba(0, 120, 215, 0.3);
 
   /* Semantic tokens - these reference the palette above */
   --text-primary: #262626;
@@ -1162,7 +1162,7 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-step-field:focus-within .overtype-wrapper .overtype-input::selection {
-  background-color: rgba(244, 211, 94, 0.4) !important;
+  background-color: var(--color-selection) !important;
 }
 
 /* Hide OverType's built-in link tooltip — we use our own */

package/src/index.ts

@@ -4,7 +4,7 @@ export {
   type CustomBlock,
   type CustomEditor,
 } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 
@@ -30,4 +30,6 @@ export {
   type StepImageUploadHandler,
 } from "./editor/stepImageUpload";
 
+export { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler";
+
 export const testomatioEditorClassName = "markdown testomatio-editor";