testomatio-editor-blocks 0.4.26 → 0.4.28

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

@@ -14,6 +14,16 @@ export declare const isEmptyParagraph: (b: any) => boolean;
 export declare function canInsertStepOrSnippet(editor: {
     document: any[];
 }, referenceBlockId: string): boolean;
+/**
+ * Programmatically add an empty step block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty step at the end.
+ * Returns the inserted step's block ID (for focusing), or null.
+ */
+export declare function addStepsBlock(editor: {
+    document: any[];
+    insertBlocks: (blocks: any[], referenceId: string, placement: string) => any[];
+}): string | null;
 export declare const stepBlock: {
     config: {
         readonly type: "testStep";

package/package/editor/blocks/step.js

@@ -85,6 +85,60 @@ export function canInsertStepOrSnippet(editor, referenceBlockId) {
     }
     return false;
 }
+/**
+ * Programmatically add an empty step block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty step at the end.
+ * Returns the inserted step's block ID (for focusing), or null.
+ */
+export function addStepsBlock(editor) {
+    var _a, _b, _c, _d;
+    const allBlocks = editor.document;
+    const emptyStep = {
+        type: "testStep",
+        props: { stepTitle: "", stepData: "", expectedResult: "" },
+        children: [],
+    };
+    let stepsHeadingIndex = -1;
+    for (let i = 0; i < allBlocks.length; i++) {
+        const b = allBlocks[i];
+        if (b.type !== "heading")
+            continue;
+        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(/[:\-–—]$/, "");
+        if (isStepsHeading(text)) {
+            stepsHeadingIndex = i;
+            break;
+        }
+    }
+    if (stepsHeadingIndex >= 0) {
+        let lastIndex = stepsHeadingIndex;
+        for (let i = stepsHeadingIndex + 1; i < allBlocks.length; i++) {
+            const b = allBlocks[i];
+            if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
+                lastIndex = i;
+                continue;
+            }
+            break;
+        }
+        const inserted = editor.insertBlocks([emptyStep], allBlocks[lastIndex].id, "after");
+        return (_b = (_a = inserted === null || inserted === void 0 ? void 0 : inserted[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    }
+    const lastBlock = allBlocks[allBlocks.length - 1];
+    const stepsHeading = {
+        type: "heading",
+        props: { level: 3 },
+        content: [{ type: "text", text: "Steps" }],
+        children: [],
+    };
+    const inserted = editor.insertBlocks([stepsHeading, emptyStep], lastBlock.id, "after");
+    return (_d = (_c = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null;
+}
 export const stepBlock = createReactBlockSpec({
     type: "testStep",
     content: "none",

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,49 @@
+export function createMarkdownPasteHandler(converter) {
+    return ({ event, editor, defaultPasteHandler }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const types = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : [];
+        if (types.includes("blocknote/html"))
+            return defaultPasteHandler();
+        if (types.includes("vscode-editor-data"))
+            return defaultPasteHandler();
+        if (types.includes("text/html")) {
+            const html = (_d = (_c = event.clipboardData) === null || _c === void 0 ? void 0 : _c.getData("text/html")) !== null && _d !== void 0 ? _d : "";
+            if (/<(pre|code)[\s>]/i.test(html))
+                return defaultPasteHandler();
+        }
+        const cursorBlock = editor.getTextCursorPosition().block;
+        if ((cursorBlock === null || cursorBlock === void 0 ? void 0 : cursorBlock.type) === "codeBlock" || (cursorBlock === null || cursorBlock === void 0 ? void 0 : cursorBlock.type) === "quote" || (cursorBlock === null || cursorBlock === void 0 ? void 0 : cursorBlock.type) === "table")
+            return defaultPasteHandler();
+        const plainText = (_f = (_e = event.clipboardData) === null || _e === void 0 ? void 0 : _e.getData("text/plain")) !== null && _f !== void 0 ? _f : "";
+        if (!plainText.trim())
+            return defaultPasteHandler();
+        try {
+            const parsedBlocks = converter(plainText);
+            if (parsedBlocks.length === 0)
+                return defaultPasteHandler();
+            const selection = editor.getSelection();
+            const selectedIds = (_h = (_g = selection === null || selection === void 0 ? void 0 : selection.blocks) === null || _g === void 0 ? void 0 : _g.map((block) => block.id).filter((id) => Boolean(id))) !== null && _h !== void 0 ? _h : [];
+            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

@@ -464,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;
 }

package/package/index.d.ts

@@ -1,8 +1,9 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
-export { stepBlock, canInsertStepOrSnippet, isStepsHeading } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } 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, isStepsHeading } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } 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.26",
+  "version": "0.4.28",
   "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

@@ -96,6 +96,65 @@ export function canInsertStepOrSnippet(
   return false;
 }
 
+/**
+ * Programmatically add an empty step block to the editor.
+ * - If a "Steps" heading exists, inserts after the last step/snippet under it.
+ * - Otherwise, appends a "Steps" heading + empty step at the end.
+ * Returns the inserted step's block ID (for focusing), or null.
+ */
+export function addStepsBlock(editor: {
+  document: any[];
+  insertBlocks: (blocks: any[], referenceId: string, placement: string) => any[];
+}): string | null {
+  const allBlocks = editor.document;
+  const emptyStep = {
+    type: "testStep" as const,
+    props: { stepTitle: "", stepData: "", expectedResult: "" },
+    children: [],
+  };
+
+  let stepsHeadingIndex = -1;
+  for (let i = 0; i < allBlocks.length; i++) {
+    const b = allBlocks[i];
+    if (b.type !== "heading") continue;
+    const text = (Array.isArray(b.content) ? b.content : [])
+      .filter((n: any) => n.type === "text")
+      .map((n: any) => n.text ?? "")
+      .join("")
+      .trim()
+      .toLowerCase()
+      .replace(/[:\-–—]$/, "");
+    if (isStepsHeading(text)) {
+      stepsHeadingIndex = i;
+      break;
+    }
+  }
+
+  if (stepsHeadingIndex >= 0) {
+    let lastIndex = stepsHeadingIndex;
+    for (let i = stepsHeadingIndex + 1; i < allBlocks.length; i++) {
+      const b = allBlocks[i];
+      if (b.type === "testStep" || b.type === "snippet" || isEmptyParagraph(b)) {
+        lastIndex = i;
+        continue;
+      }
+      break;
+    }
+    const inserted = editor.insertBlocks([emptyStep], allBlocks[lastIndex].id, "after");
+    return inserted?.[0]?.id ?? null;
+  }
+
+  const lastBlock = allBlocks[allBlocks.length - 1];
+  const stepsHeading = {
+    type: "heading" as const,
+    props: { level: 3 },
+    content: [{ type: "text" as const, text: "Steps" }],
+    children: [],
+  };
+  const inserted = editor.insertBlocks([stepsHeading, emptyStep], lastBlock.id, "after");
+  return inserted?.[1]?.id ?? null;
+}
+
 export const stepBlock = createReactBlockSpec(
   {
     type: "testStep",

package/src/editor/createMarkdownPasteHandler.ts

@@ -0,0 +1,62 @@
+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 types = event.clipboardData?.types ?? [];
+
+    if (types.includes("blocknote/html")) return defaultPasteHandler();
+    if (types.includes("vscode-editor-data")) return defaultPasteHandler();
+
+    if (types.includes("text/html")) {
+      const html = event.clipboardData?.getData("text/html") ?? "";
+      if (/<(pre|code)[\s>]/i.test(html)) return defaultPasteHandler();
+    }
+
+    const cursorBlock = editor.getTextCursorPosition().block;
+    if (cursorBlock?.type === "codeBlock" || cursorBlock?.type === "quote" || cursorBlock?.type === "table") return defaultPasteHandler();
+
+    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.ts

@@ -578,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;

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, isStepsHeading } from "./editor/blocks/step";
+export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock } 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";