testomatio-editor-blocks 0.1.0 → 0.1.2

package/package/styles.css

@@ -140,6 +140,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  position: relative;
 }
 
 .bn-step-field__top {
@@ -150,6 +151,9 @@
 }
 
 .bn-step-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -216,6 +220,54 @@
   pointer-events: none;
 }
 
+.bn-step-suggestions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 0.65rem;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  z-index: 5;
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.bn-step-suggestion {
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.bn-step-suggestion:hover,
+.bn-step-suggestion--active {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.bn-step-suggestion__title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.bn-step-suggestion__meta {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.65);
+}
+
 .bn-inline-image {
   display: block;
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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.css

@@ -147,6 +147,47 @@
   color: #f87171;
 }
 
+.app__panel--light {
+  background: #ffffff;
+  color: #0f172a;
+}
+
+.app__panel-text {
+  margin: 0;
+  color: rgba(15, 23, 42, 0.85);
+  font-size: 0.9rem;
+}
+
+.app__step-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.app__step-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  border-radius: 0.5rem;
+  background: rgba(37, 99, 235, 0.08);
+  color: inherit;
+  font-size: 0.95rem;
+}
+
+.app__step-title {
+  font-weight: 600;
+}
+
+.app__step-meta {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.6);
+}
+
 @media (max-width: 960px) {
   #root {
     padding: 1.5rem;

package/src/App.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { BlockNoteView } from "@blocknote/mantine";
 import {
   useCreateBlockNote,
@@ -17,9 +17,39 @@ import {
   type CustomEditorBlock,
   type CustomPartialBlock,
 } from "./editor/customMarkdownConverter";
-import { customSchema } from "./editor/customSchema";
+import { customSchema, type CustomEditor } from "./editor/customSchema";
+import { setGlobalStepSuggestionsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
+import { setImageUploadHandler } from "./editor/stepImageUpload";
 import "./App.css";
 
+const focusTestStepTitle = (editor: CustomEditor | null | undefined, blockId?: string) => {
+  if (!editor || !blockId) {
+    return;
+  }
+
+  const focus = () => {
+    const stepTitle = document.querySelector<HTMLElement>(
+      `[data-block-id="${blockId}"] [data-step-field="title"]`,
+    );
+
+    if (stepTitle) {
+      stepTitle.focus();
+      return;
+    }
+
+    editor.setSelection(blockId, blockId);
+    editor.setTextCursorPosition(blockId, "end");
+    editor.focus();
+  };
+
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(focus);
+    return;
+  }
+
+  setTimeout(focus, 0);
+};
+
 type Schema = typeof customSchema;
 
 const DEFAULT_BLOCK_PROPS = {
@@ -28,6 +58,151 @@ const DEFAULT_BLOCK_PROPS = {
   backgroundColor: "default" as const,
 };
 
+const DEMO_STEP_FIXTURES: StepJsonApiDocument = {
+  data: [
+    {
+      id: "145",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Donec placerat, dui vitae",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 23,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "146",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Ut auctor mi erat ac dolor.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 23,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "147",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 23,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "148",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Felis libero varius orci, in vulputate",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 19,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "149",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Massa turpis scelerisque diam.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 19,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "150",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Nunc et felis est. Phasellus laoreet nibh vel augue",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 19,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "151",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Suspendisse interdum sem non sem cursus consequat.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 17,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "152",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Aliquam tempor, nibh sed facilisis lacinia, nisl velit aliquet nunc.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 16,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "153",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Praesent tellus neque, efficitur vel hendrerit sed, porta id sapien.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 14,
+        "comments-count": 0,
+      },
+    },
+    {
+      id: "154",
+      type: "step",
+      attributes: {
+        labels: [],
+        title: "Maecenas suscipit lacus vitae viverra fermentum.",
+        kind: "manual",
+        description: null,
+        keywords: [],
+        "is-snippet": null,
+        "usage-count": 12,
+        "comments-count": 0,
+      },
+    },
+  ],
+};
+
 function CustomSlashMenu() {
   const editor = useBlockNoteEditor<Schema["blockSchema"], Schema["inlineContentSchema"], Schema["styleSchema"]>();
 
@@ -46,7 +221,7 @@ function CustomSlashMenu() {
       icon: <span className="bn-suggestion-icon">TS</span>,
       aliases: ["step", "test step", "expected"],
       onItemClick: () => {
-        insertOrUpdateBlock(editor, {
+        const inserted = insertOrUpdateBlock(editor, {
           type: "testStep",
           props: {
             stepTitle: "",
@@ -54,6 +229,7 @@ function CustomSlashMenu() {
             expectedResult: "",
           },
         });
+        focusTestStepTitle(editor, inserted.id);
       },
     };
 
@@ -113,6 +289,9 @@ function App() {
   const [copyStatus, setCopyStatus] = useState<"idle" | "copied" | "failed">(
     "idle",
   );
+  const [copyBlocksStatus, setCopyBlocksStatus] = useState<"idle" | "copied" | "failed">(
+    "idle",
+  );
 
   useEditorChange((editorInstance) => {
     try {
@@ -130,6 +309,67 @@ function App() {
     }
   }, editor);
 
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const unsubscribe = editor.onChange((instance, context) => {
+      const changes = context.getChanges();
+      const newlyInsertedStep = changes.find(({ type, block, source }) => {
+        if (type !== "insert") {
+          return false;
+        }
+
+        if (source?.type === "yjs-remote") {
+          return false;
+        }
+
+        return block.type === "testStep" && ((block.props as any)?.stepTitle ?? "") === "";
+      });
+
+      if (newlyInsertedStep) {
+        focusTestStepTitle(instance, newlyInsertedStep.block.id);
+      }
+    });
+
+    return () => {
+      if (typeof unsubscribe === "function") {
+        unsubscribe();
+      }
+    };
+  }, [editor]);
+
+  const uploadStepImage = useMemo(
+    () => async (_image: Blob) => ({ url: `https://placehold.co/600x400?text=Uploaded+${Date.now()}` }),
+    [],
+  );
+
+  useEffect(() => {
+    // Demo defaults: configure global handlers so the editor works without manual providers.
+    setGlobalStepSuggestionsFetcher(() => DEMO_STEP_FIXTURES);
+
+    const handler = editor?.uploadFile
+      ? async (file: Blob) => {
+          const result = await editor.uploadFile!(file as File);
+          if (typeof result === "string") {
+            return { url: result };
+          }
+          if (result && typeof result === "object" && "url" in result && typeof (result as any).url === "string") {
+            return { url: (result as any).url as string };
+          }
+          throw new Error("uploadFile did not return a URL");
+        }
+      : uploadStepImage;
+
+    setImageUploadHandler(handler);
+
+    return () => {
+      setGlobalStepSuggestionsFetcher(null);
+      setImageUploadHandler(null);
+    };
+  }, [editor, uploadStepImage]);
+
   const createTestCaseBlock = useMemo<() => CustomPartialBlock>(() => {
     return () => ({
       type: "testCase",
@@ -173,7 +413,11 @@ function App() {
       return;
     }
 
-    editor.insertBlocks([createBlock()], referenceId, "after");
+    const inserted = editor.insertBlocks([createBlock()], referenceId, "after");
+    const firstInserted = inserted[0];
+    if (firstInserted) {
+      focusTestStepTitle(editor, firstInserted.id);
+    }
   };
 
   const insertTestCase = () => insertBlockAfterSelection(createTestCaseBlock);
@@ -214,10 +458,6 @@ function App() {
     }
   };
 
-  const [copyBlocksStatus, setCopyBlocksStatus] = useState<
-    "idle" | "copied" | "failed"
-  >("idle");
-
   const handleCopyBlocks = async () => {
     if (conversionError) {
       return;
@@ -317,6 +557,24 @@ function App() {
               <pre>{markdown}</pre>
             )}
           </div>
+          <div className="app__panel app__panel--light">
+            <div className="app__panel-header">
+              <h2>Autocomplete Steps</h2>
+            </div>
+            <p className="app__panel-text">
+              Start typing in the Step Title field to filter this list instantly.
+            </p>
+            <ol className="app__step-list">
+              {(DEMO_STEP_FIXTURES.data ?? []).map((step) => (
+                <li key={step.id ?? step.attributes?.title}>
+                  <span className="app__step-title">{step.attributes?.title}</span>
+                  {typeof step.attributes?.["usage-count"] === "number" && (
+                    <span className="app__step-meta">{step.attributes?.["usage-count"]} uses</span>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
           <div className="app__panel">
             <div className="app__panel-header">
               <h2>Blocks JSON</h2>

package/src/editor/customMarkdownConverter.test.ts

@@ -94,9 +94,9 @@ describe("blocksToMarkdown", () => {
     expect(blocksToMarkdown(blocks)).toBe(
       [
         "* Open the Login page.",
-        "  *Expected Result*: The Login page loads successfully.",
+        "  *Expected*: The Login page loads successfully.",
         "* Enter a valid username.",
-        "  *Expected Result*: The username is accepted.",
+        "  *Expected*: The username is accepted.",
       ].join("\n"),
     );
   });
@@ -119,7 +119,7 @@ describe("blocksToMarkdown", () => {
      expect(blocksToMarkdown(blocks)).toBe(
        [
          "* **Click** the _Login_ button",
-         "  *Expected Result*: **Success** is shown",
+        "  *Expected*: **Success** is shown",
          "  Second line with <u>underline</u>",
        ].join("\n"),
      );
@@ -140,15 +140,15 @@ describe("blocksToMarkdown", () => {
        },
      ];
 
-   expect(blocksToMarkdown(blocks)).toBe(
-     [
-       "* Navigate to login",
-       "  Open browser",
-       "  Go to login page",
-       "  *Expected Result*: Login form visible",
-     ].join("\n"),
-   );
-  });
+  expect(blocksToMarkdown(blocks)).toBe(
+    [
+      "* Navigate to login",
+      "  Open browser",
+      "  Go to login page",
+      "  *Expected*: Login form visible",
+    ].join("\n"),
+  );
+ });
 
   it("serializes step data containing code fences, blank lines, and images", () => {
     const blocks: CustomEditorBlock[] = [
@@ -191,7 +191,7 @@ describe("blocksToMarkdown", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected Result*: The user receives a real-time notification for the order update.",
+        "  *Expected*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -275,13 +275,28 @@ describe("blocksToMarkdown", () => {
       ].join("\n"),
     );
   });
+
+  it("parses a test step with inline image in the title, moving the image to step data", () => {
+    const markdown = [
+      "## Steps",
+      "* asdsadsad aaaaa  asd ![](https://placehold.co/600x400?text=Uploaded+1763329962213)",
+    ].join("\n");
+
+    const blocks = markdownToBlocks(markdown);
+    const step = blocks.find((b) => b.type === "testStep") as any;
+
+    expect(step).toBeTruthy();
+    expect(step.props.stepTitle).toBe("asdsadsad aaaaa asd !");
+    expect(step.props.stepData).toBe("![](https://placehold.co/600x400?text=Uploaded+1763329962213)");
+    expect(step.props.expectedResult).toBe("");
+  });
 });
 
 describe("markdownToBlocks", () => {
   it("parses test steps and test cases", () => {
     const markdown = [
       "* Open the Login page.",
-      "  *Expected Result*: The Login page loads successfully.",
+      "  *Expected*: The Login page loads successfully.",
       "",
       ":::test-case status=\"ready\" reference=\"QA-7\"",
       "Run the smoke tests.",
@@ -325,13 +340,13 @@ describe("markdownToBlocks", () => {
       "### Steps",
       "",
       "* Step 1: Send a chat message to the user.",
-      "**Expected Result**: The user receives a real-time notification for the chat message.",
+      "**Expected**: The user receives a real-time notification for the chat message.",
       "* Step 2: Update an order status.",
-      "**Expected Result**: The user receives a real-time notification for the order update.",
+      "**Expected**: The user receives a real-time notification for the order update.",
       "* Step 3: Send a file to the user.",
-      "**Expected Result**: The user receives a real-time notification for the file received.",
+      "**Expected**: The user receives a real-time notification for the file received.",
       "* Step 4: Verify that the notifications are displayed correctly in the application's notification panel.",
-      "**Expected Result**: All notifications (chat message, order update, file received) are listed in the notification panel with the correct information (e.g., timestamp, message content).",
+      "**Expected**: All notifications (chat message, order update, file received) are listed in the notification panel with the correct information (e.g., timestamp, message content).",
       "",
       "### Postconditions",
       "* The user has received and viewed the notifications.",
@@ -395,7 +410,7 @@ describe("markdownToBlocks", () => {
       "  asdsadas",
       "  ```",
       "  ![](/attachments/HMhkVtlDrO.png)",
-      "**Expected Result**: The user receives a real-time notification for the order update.",
+      "**Expected**: The user receives a real-time notification for the order update.",
     ].join("\n");
 
     const expectedData = [
@@ -452,7 +467,7 @@ describe("markdownToBlocks", () => {
         "  asdsadas",
         "  ```",
         "  ![](/attachments/HMhkVtlDrO.png)",
-        "  *Expected Result*: The user receives a real-time notification for the order update.",
+        "  *Expected*: The user receives a real-time notification for the order update.",
       ].join("\n"),
     );
   });
@@ -537,7 +552,7 @@ describe("markdownToBlocks", () => {
    it("parses expected result prefixes with emphasis", () => {
      const markdown = [
        "* Open the form.",
-       "  **Expected Result:** The form opens.",
+       "  **Expected:** The form opens.",
        "  Expected: Fields are empty.",
      ].join("\n");
 
@@ -559,7 +574,7 @@ describe("markdownToBlocks", () => {
        "* Navigate to login",
        "  Open browser",
        "  Go to login page",
-       "  *Expected Result*: Login form visible",
+       "  *Expected*: Login form visible",
      ].join("\n");
 
      expect(markdownToBlocks(markdown)).toEqual([
@@ -580,7 +595,7 @@ describe("markdownToBlocks", () => {
       "* Prepare test fixtures",
       "Collect user accounts from staging.",
       "Reset passwords for all test accounts.",
-      "*Expected Result*: Test accounts are ready for execution.",
+      "*Expected*: Test accounts are ready for execution.",
     ].join("\n");
 
     expect(markdownToBlocks(markdown)).toEqual([
@@ -599,7 +614,7 @@ describe("markdownToBlocks", () => {
   it("parses expected result containing a markdown image", () => {
     const markdown = [
       "* Display the generated report.",
-      "  *Expected Result*: ![](/attachments/report.png)",
+      "  *Expected*: ![](/attachments/report.png)",
     ].join("\n");
 
     expect(markdownToBlocks(markdown)).toEqual([
@@ -667,7 +682,7 @@ describe("markdownToBlocks", () => {
     expect(roundTrip).toBe(
       [
         "* Should open login screen",
-        "  *Expected Result*: Login should look like this",
+        "  *Expected*: Login should look like this",
         "  ![](/login.png)",
       ].join("\n"),
     );
@@ -746,4 +761,23 @@ describe("markdownToBlocks", () => {
       },
     ]);
   });
+
+  it("parses expected result lines written with bold 'Expected Result' prefix for compatibility", () => {
+    const markdown = [
+      "* Step 1: Send a chat message to the user.",
+      "**Expected Result**: The user receives a real-time notification for the chat message.",
+    ].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "testStep",
+        props: {
+          stepTitle: "Step 1: Send a chat message to the user.",
+          stepData: "",
+          expectedResult: "The user receives a real-time notification for the chat message.",
+        },
+        children: [],
+      },
+    ]);
+  });
 });