testomatio-editor-blocks 0.4.65 → 0.4.66

package/src/App.tsx

@@ -347,11 +347,30 @@ function CustomSlashMenu() {
       },
     };
 
+    const addTestItem = {
+      key: "add_test" as any,
+      title: "Add Test",
+      subtext: "Insert test metadata (id, priority, tags…)",
+      group: "Test documentation",
+      icon: <span className="bn-suggestion-icon">@T</span>,
+      aliases: ["test", "metadata", "meta", "test id"],
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "testMeta",
+          props: {
+            metaKind: "test",
+            metaFields: "[]",
+            metaInline: false,
+          },
+        });
+      },
+    };
+
     const currentBlock = editor.getTextCursorPosition().block;
     const canInsert = canInsertStepOrSnippet(editor, currentBlock.id);
     const items = canInsert
-      ? [...defaultItems, stepItem, snippetItem]
-      : defaultItems;
+      ? [...defaultItems, stepItem, snippetItem, addTestItem]
+      : [...defaultItems, addTestItem];
     return filterSuggestionItems(items, query);
   };
 

package/src/editor/blocks/testMeta.tsx

@@ -0,0 +1,242 @@
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ChangeEvent } from "react";
+import { getMetaFieldSuggestions } from "../testMetaFields";
+
+export type MetaField = { key: string; value: string };
+
+const ID_KEYS = new Set(["id"]);
+
+function parseMetaFields(raw: unknown): MetaField[] {
+  if (typeof raw !== "string" || raw.trim().length === 0) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed
+      .filter((item) => item && typeof item === "object")
+      .map((item) => ({
+        key: typeof item.key === "string" ? item.key : "",
+        value: typeof item.value === "string" ? item.value : "",
+      }));
+  } catch {
+    return [];
+  }
+}
+
+export function serializeMetaFields(fields: MetaField[]): string {
+  return JSON.stringify(fields);
+}
+
+type AddFieldMenuProps = {
+  kind: "test" | "suite";
+  usedKeys: string[];
+  onPick: (key: string) => void;
+};
+
+function AddFieldMenu({ kind, usedKeys, onPick }: AddFieldMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+
+  const available = useMemo(() => {
+    const used = new Set(usedKeys.map((k) => k.trim().toLowerCase()));
+    return getMetaFieldSuggestions(kind).filter((s) => !used.has(s.key.trim().toLowerCase()));
+  }, [kind, usedKeys]);
+
+  const pick = useCallback(
+    (key: string) => {
+      onPick(key);
+      setIsOpen(false);
+    },
+    [onPick],
+  );
+
+  return (
+    <div className="bn-testmeta__add-wrap" ref={containerRef}>
+      <button
+        type="button"
+        className="bn-testmeta__add"
+        aria-label="Add field"
+        title="Add field"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        +
+      </button>
+      {isOpen && (
+        <div className="bn-testmeta__menu" role="listbox">
+          {available.map((suggestion) => (
+            <button
+              type="button"
+              key={suggestion.key}
+              role="option"
+              className="bn-testmeta__menu-item"
+              onMouseDown={(event) => {
+                event.preventDefault();
+                pick(suggestion.key);
+              }}
+            >
+              {suggestion.label ?? suggestion.key}
+            </button>
+          ))}
+          <button
+            type="button"
+            className="bn-testmeta__menu-item bn-testmeta__menu-item--custom"
+            onMouseDown={(event) => {
+              event.preventDefault();
+              pick("");
+            }}
+          >
+            Custom field…
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const testMetaBlock = createReactBlockSpec(
+  {
+    type: "testMeta",
+    content: "none",
+    propSchema: {
+      // "test" | "suite" — which keyword the comment opened with.
+      metaKind: {
+        default: "test",
+      },
+      // JSON-encoded MetaField[] so insertion order is preserved.
+      metaFields: {
+        default: "[]",
+      },
+      // true when the source comment was a one-liner (`<!-- test id: @T.. -->`).
+      metaInline: {
+        default: false,
+      },
+    },
+  },
+  {
+    render: ({ block, editor }) => {
+      const kind = (block.props.metaKind as string) === "suite" ? "suite" : "test";
+      const fields = useMemo(
+        () => parseMetaFields(block.props.metaFields),
+        [block.props.metaFields],
+      );
+
+      const commitFields = useCallback(
+        (next: MetaField[]) => {
+          editor.updateBlock(block.id, {
+            props: { metaFields: serializeMetaFields(next) } as any,
+          });
+        },
+        [block.id, editor],
+      );
+
+      const handleValueChange = useCallback(
+        (index: number, value: string) => {
+          const next = fields.map((field, i) =>
+            i === index ? { ...field, value } : field,
+          );
+          commitFields(next);
+        },
+        [fields, commitFields],
+      );
+
+      const handleKeyChange = useCallback(
+        (index: number, key: string) => {
+          const next = fields.map((field, i) =>
+            i === index ? { ...field, key } : field,
+          );
+          commitFields(next);
+        },
+        [fields, commitFields],
+      );
+
+      const handleRemove = useCallback(
+        (index: number) => {
+          commitFields(fields.filter((_, i) => i !== index));
+        },
+        [fields, commitFields],
+      );
+
+      const handleAddField = useCallback(
+        (key: string) => {
+          commitFields([...fields, { key, value: "" }]);
+        },
+        [fields, commitFields],
+      );
+
+      const usedKeys = useMemo(() => fields.map((f) => f.key), [fields]);
+
+      // The read-only `id` is shown inline on the header line next to the kind
+      // label; every other field renders as an editable row below.
+      const idField = fields.find((f) => ID_KEYS.has(f.key.trim().toLowerCase()));
+      const editableFields = fields
+        .map((field, index) => ({ field, index }))
+        .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
+
+      return (
+        <div
+          className="bn-testmeta"
+          data-block-id={block.id}
+          data-kind={kind}
+          contentEditable={false}
+          suppressContentEditableWarning
+          draggable={false}
+        >
+          <div className="bn-testmeta__header">
+            <span className="bn-testmeta__label">{kind.toUpperCase()}</span>
+            {idField?.value && <span className="bn-testmeta__id">{idField.value}</span>}
+            <AddFieldMenu kind={kind} usedKeys={usedKeys} onPick={handleAddField} />
+          </div>
+
+          {editableFields.length > 0 && (
+            <div className="bn-testmeta__rows">
+              {editableFields.map(({ field, index }) => (
+                <div className="bn-testmeta__row" key={index}>
+                  <input
+                    className="bn-testmeta__key bn-testmeta__key--input"
+                    type="text"
+                    value={field.key}
+                    placeholder="key"
+                    spellCheck={false}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => handleKeyChange(index, e.target.value)}
+                  />
+                  <input
+                    className="bn-testmeta__value"
+                    type="text"
+                    value={field.value}
+                    placeholder="value"
+                    spellCheck={false}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => handleValueChange(index, e.target.value)}
+                  />
+                  <button
+                    type="button"
+                    className="bn-testmeta__remove"
+                    aria-label="Remove field"
+                    title="Remove field"
+                    onClick={() => handleRemove(index)}
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    },
+  },
+);

package/src/editor/customMarkdownConverter.test.ts

@@ -3053,3 +3053,138 @@ describe("blank line <-> empty paragraph mapping", () => {
     expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
   });
 });
+
+describe("test/suite metadata comments", () => {
+  it("parses a one-liner test comment into a testMeta block", () => {
+    const blocks = markdownToBlocks("<!-- test id: @T12345678 -->");
+    expect(blocks).toEqual([
+      {
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([{ key: "id", value: "@T12345678" }]),
+          metaInline: true,
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips a one-liner test comment", () => {
+    const markdown = "<!-- test id: @T12345678 -->";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("parses a multi-line suite block with ordered fields", () => {
+    const markdown = [
+      "<!-- suite",
+      "id: @S12345678",
+      "emoji: 🔐",
+      "tags: smoke, regression",
+      "assignee: qa@example.com",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect(blocks).toEqual([
+      {
+        type: "testMeta",
+        props: {
+          metaKind: "suite",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@S12345678" },
+            { key: "emoji", value: "🔐" },
+            { key: "tags", value: "smoke, regression" },
+            { key: "assignee", value: "qa@example.com" },
+          ]),
+          metaInline: false,
+        },
+        children: [],
+      },
+    ]);
+  });
+
+  it("round-trips a multi-line suite block", () => {
+    const markdown = [
+      "<!-- suite",
+      "id: @S12345678",
+      "emoji: 🔐",
+      "tags: smoke, regression",
+      "assignee: qa@example.com",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
+
+  it("ignores lines without a colon inside a metadata block", () => {
+    const markdown = [
+      "<!-- test",
+      "id: @T12345678",
+      "this line is ignored",
+      "priority: high",
+      "-->",
+    ].join("\n");
+    const blocks = markdownToBlocks(markdown);
+    expect((blocks[0].props as any).metaFields).toBe(
+      JSON.stringify([
+        { key: "id", value: "@T12345678" },
+        { key: "priority", value: "high" },
+      ]),
+    );
+  });
+
+  it("serializes a one-liner that gained extra fields as a block", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "m1",
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@T12345678" },
+            { key: "priority", value: "high" },
+          ]),
+          metaInline: true,
+        } as any,
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["<!-- test", "id: @T12345678", "priority: high", "-->"].join("\n"),
+    );
+  });
+
+  it("skips fields with empty values when serializing", () => {
+    const blocks: CustomEditorBlock[] = [
+      {
+        id: "m2",
+        type: "testMeta",
+        props: {
+          metaKind: "test",
+          metaFields: JSON.stringify([
+            { key: "id", value: "@T12345678" },
+            { key: "priority", value: "high" },
+            { key: "tags", value: "" },
+            { key: "", value: "orphan" },
+          ]),
+          metaInline: false,
+        } as any,
+        content: undefined as any,
+        children: [],
+      },
+    ];
+    expect(blocksToMarkdown(blocks)).toBe(
+      ["<!-- test", "id: @T12345678", "priority: high", "-->"].join("\n"),
+    );
+  });
+
+  it("leaves a generic HTML comment as paragraph text", () => {
+    const blocks = markdownToBlocks("<!-- ai/agent generated description -->");
+    expect(blocks[0].type).toBe("paragraph");
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(
+      "<!-- ai/agent generated description -->",
+    );
+  });
+});

package/src/editor/customMarkdownConverter.ts

@@ -389,6 +389,36 @@ function serializeBlock(
       }
       return lines;
     }
+    case "testMeta": {
+      const kind = (block.props as any).metaKind === "suite" ? "suite" : "test";
+      const inline = Boolean((block.props as any).metaInline);
+      let fields: { key: string; value: string }[] = [];
+      try {
+        const parsed = JSON.parse(((block.props as any).metaFields ?? "[]") as string);
+        if (Array.isArray(parsed)) {
+          fields = parsed
+            .filter((f) => f && typeof f === "object" && typeof f.key === "string")
+            .map((f) => ({ key: f.key.trim(), value: typeof f.value === "string" ? f.value.trim() : "" }))
+            // Skip incomplete fields: both a key and a value are required.
+            .filter((f) => f.key.length > 0 && f.value.length > 0);
+        }
+      } catch {
+        fields = [];
+      }
+
+      // Preserve the one-liner form only when it still fits on a single line
+      // (a one-liner holds at most one `key: value` pair).
+      if (inline && fields.length <= 1) {
+        const field = fields[0];
+        lines.push(field ? `<!-- ${kind} ${field.key}: ${field.value} -->` : `<!-- ${kind} -->`);
+        return lines;
+      }
+
+      lines.push(`<!-- ${kind}`);
+      fields.forEach((field) => lines.push(`${field.key}: ${field.value}`));
+      lines.push("-->");
+      return lines;
+    }
     case "testStep":
     case "snippet": {
       const isSnippet = block.type === "snippet";
@@ -1355,6 +1385,92 @@ function parseParagraph(lines: string[], index: number): { block: CustomPartialB
   };
 }
 
+const META_COMMENT_OPEN_REGEX = /^<!--\s*(test|suite)(?=\s|-->|$)/i;
+
+function metaFieldsFromBody(bodyLines: string[]): { key: string; value: string }[] {
+  const fields: { key: string; value: string }[] = [];
+  for (const raw of bodyLines) {
+    const line = raw.trim();
+    if (!line) continue;
+    const colon = line.indexOf(":");
+    // "Each line is `key: value`; lines without `:` are ignored."
+    if (colon === -1) continue;
+    const key = line.slice(0, colon).trim();
+    const value = line.slice(colon + 1).trim();
+    if (!key) continue;
+    fields.push({ key, value });
+  }
+  return fields;
+}
+
+function parseMetaComment(
+  lines: string[],
+  index: number,
+): { block: CustomPartialBlock; nextIndex: number } | null {
+  const first = lines[index];
+  const openMatch = first.match(META_COMMENT_OPEN_REGEX);
+  if (!openMatch) {
+    return null;
+  }
+  const kind = openMatch[1].toLowerCase();
+
+  let bodyLines: string[] = [];
+  let inline = false;
+  let nextIndex: number;
+
+  // One-liner: opening and closing markers on the same line.
+  const oneLine = first.match(/^<!--\s*(?:test|suite)\b\s*([\s\S]*?)\s*-->\s*$/i);
+  if (oneLine) {
+    inline = true;
+    if (oneLine[1].trim()) {
+      bodyLines = [oneLine[1].trim()];
+    }
+    nextIndex = index + 1;
+  } else {
+    // Block form: keyword line, fields on their own lines, closing `-->`.
+    const afterKeyword = first.replace(/^<!--\s*(?:test|suite)\b/i, "").trim();
+    if (afterKeyword) {
+      bodyLines.push(afterKeyword);
+    }
+    let next = index + 1;
+    let closed = false;
+    while (next < lines.length) {
+      const current = lines[next];
+      if (/-->\s*$/.test(current)) {
+        const beforeClose = current.replace(/-->\s*$/, "").trim();
+        if (beforeClose) {
+          bodyLines.push(beforeClose);
+        }
+        next += 1;
+        closed = true;
+        break;
+      }
+      bodyLines.push(current);
+      next += 1;
+    }
+    if (!closed) {
+      // Unterminated comment — let normal parsing handle these lines.
+      return null;
+    }
+    nextIndex = next;
+  }
+
+  const fields = metaFieldsFromBody(bodyLines);
+
+  return {
+    block: {
+      type: "testMeta",
+      props: {
+        metaKind: kind,
+        metaFields: JSON.stringify(fields),
+        metaInline: inline,
+      },
+      children: [],
+    } as CustomPartialBlock,
+    nextIndex,
+  };
+}
+
 function parseSnippetWrapper(
   lines: string[],
   index: number,
@@ -1497,6 +1613,15 @@ export function markdownToBlocks(markdown: string, _options?: MarkdownToBlocksOp
       continue;
     }
 
+    // Test/suite metadata comments can appear anywhere (typically at the top of
+    // a document or right after a heading), so this runs ungated.
+    const metaComment = parseMetaComment(lines, index);
+    if (metaComment) {
+      blocks.push(metaComment.block);
+      index = metaComment.nextIndex;
+      continue;
+    }
+
     const snippetWrapper = stepsHeadingLevel !== null
       ? parseSnippetWrapper(lines, index)
       : null;

package/src/editor/customSchema.tsx

@@ -2,6 +2,7 @@ import { defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
+import { testMetaBlock } from "./blocks/testMeta";
 import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 
@@ -11,6 +12,7 @@ export const customSchema = BlockNoteSchema.create({
     file: fileBlock,
     testStep: stepBlock,
     snippet: snippetBlock,
+    testMeta: testMetaBlock,
   },
 });