testomatio-editor-blocks 0.4.75 → 0.4.76

package/package/editor/blocks/testMeta.d.ts

@@ -3,6 +3,24 @@ export type MetaField = {
     value: string;
 };
 export declare function serializeMetaFields(fields: MetaField[]): string;
+type TestEditorLike = {
+    document: any[];
+    getTextCursorPosition?: () => {
+        block?: {
+            id?: string;
+        };
+    };
+    insertBlocks: (blocks: any[], referenceId: string, placement: "before" | "after") => any[];
+};
+/**
+ * Insert a new test: a `testMeta` panel (labelled "NEW TEST" until it gets an id)
+ * seeded with default metadata — `type: manual`, `priority: normal`, and `labels`
+ * copied from the suite block — followed by an empty H2 heading for the test title.
+ *
+ * Inserts at the text cursor when the editor is focused, otherwise at the end of
+ * the document. Returns the title heading's block id (for focusing), or null.
+ */
+export declare function addTestBlock(editor: TestEditorLike): string | null;
 export declare const testMetaBlock: {
     config: {
         readonly type: "testMeta";
@@ -35,3 +53,4 @@ export declare const testMetaBlock: {
         };
     }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
 };
+export {};

package/package/editor/blocks/testMeta.js

@@ -26,6 +26,70 @@ function parseMetaFields(raw) {
 export function serializeMetaFields(fields) {
     return JSON.stringify(fields);
 }
+/** Reads the `labels` value from the first suite `testMeta` block, if any. */
+function suiteLabelsFromDocument(document) {
+    var _a, _b;
+    for (const block of document) {
+        if ((block === null || block === void 0 ? void 0 : block.type) !== "testMeta")
+            continue;
+        if (((_a = block.props) === null || _a === void 0 ? void 0 : _a.metaKind) !== "suite")
+            continue;
+        const fields = parseMetaFields((_b = block.props) === null || _b === void 0 ? void 0 : _b.metaFields);
+        const labels = fields.find((f) => f.key.trim().toLowerCase() === "labels");
+        if (labels)
+            return labels.value;
+    }
+    return "";
+}
+/**
+ * Insert a new test: a `testMeta` panel (labelled "NEW TEST" until it gets an id)
+ * seeded with default metadata — `type: manual`, `priority: normal`, and `labels`
+ * copied from the suite block — followed by an empty H2 heading for the test title.
+ *
+ * Inserts at the text cursor when the editor is focused, otherwise at the end of
+ * the document. Returns the title heading's block id (for focusing), or null.
+ */
+export function addTestBlock(editor) {
+    var _a, _b, _c, _d, _e;
+    const fields = [
+        { key: "type", value: "manual" },
+        { key: "priority", value: "normal" },
+        { key: "labels", value: suiteLabelsFromDocument(editor.document) },
+    ];
+    const metaBlock = {
+        type: "testMeta",
+        props: {
+            metaKind: "test",
+            metaFields: serializeMetaFields(fields),
+            metaInline: false,
+        },
+        children: [],
+    };
+    const titleHeading = {
+        type: "heading",
+        props: { level: 2 },
+        content: [],
+        children: [],
+    };
+    // Prefer the text cursor position — BlockNote keeps it in the editor state even
+    // after the editor blurs (e.g. when a toolbar button is clicked), so the test
+    // lands where the user left the caret. Fall back to the document end only when
+    // there is no cursor at all.
+    const docs = editor.document;
+    let referenceId;
+    try {
+        referenceId = (_b = (_a = editor.getTextCursorPosition) === null || _a === void 0 ? void 0 : _a.call(editor).block) === null || _b === void 0 ? void 0 : _b.id;
+    }
+    catch {
+        referenceId = undefined;
+    }
+    if (!referenceId)
+        referenceId = (_c = docs[docs.length - 1]) === null || _c === void 0 ? void 0 : _c.id;
+    if (!referenceId)
+        return null;
+    const inserted = editor.insertBlocks([metaBlock, titleHeading], referenceId, "after");
+    return (_e = (_d = inserted === null || inserted === void 0 ? void 0 : inserted[1]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : null;
+}
 function AddFieldMenu({ kind, usedKeys, onPick }) {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
@@ -122,6 +186,6 @@ export const testMetaBlock = createReactBlockSpec({
         // so it's immediately editable. `expanded` is UI-only state — never
         // serialized.
         const [expanded, setExpanded] = useState(() => fields.length === 0);
-        return (_jsxs("div", { className: `bn-testmeta${expanded ? " bn-testmeta--expanded" : " bn-testmeta--collapsed"}`, "data-block-id": block.id, "data-kind": kind, contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: [_jsxs("div", { className: "bn-testmeta__header", children: [_jsx("span", { className: "bn-testmeta__label", children: kind.toUpperCase() }), (idField === null || idField === void 0 ? void 0 : idField.value) && _jsx("span", { className: "bn-testmeta__id", children: idField.value }), !expanded && (_jsx("button", { type: "button", className: "bn-testmeta__summary", title: summaryText || "No metadata yet", onClick: () => setExpanded(true), children: summaryText || _jsx("span", { className: "bn-testmeta__summary--empty", children: "No metadata" }) })), _jsxs("div", { className: "bn-testmeta__actions", children: [expanded && _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField }), _jsx("button", { type: "button", className: `bn-testmeta__toggle${expanded ? " bn-testmeta__toggle--expanded" : ""}`, "aria-expanded": expanded, "aria-label": expanded ? "Collapse metadata" : "Expand metadata", title: expanded ? "Collapse" : "Expand", onClick: () => setExpanded((prev) => !prev), children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), expanded && editableFields.length > 0 && (_jsx("div", { className: "bn-testmeta__rows", children: editableFields.map(({ field, index }) => (_jsxs("div", { className: "bn-testmeta__row", children: [_jsx("input", { className: "bn-testmeta__key bn-testmeta__key--input", type: "text", value: field.key, placeholder: "key", spellCheck: false, onChange: (e) => handleKeyChange(index, e.target.value) }), _jsx("input", { className: "bn-testmeta__value", type: "text", value: field.value, placeholder: "value", spellCheck: false, onChange: (e) => handleValueChange(index, e.target.value) }), _jsx("button", { type: "button", className: "bn-testmeta__remove", "aria-label": "Remove field", title: "Remove field", onClick: () => handleRemove(index), children: "\u00D7" })] }, index))) }))] }));
+        return (_jsxs("div", { className: `bn-testmeta${expanded ? " bn-testmeta--expanded" : " bn-testmeta--collapsed"}`, "data-block-id": block.id, "data-kind": kind, contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: [_jsxs("div", { className: "bn-testmeta__header", children: [_jsx("span", { className: "bn-testmeta__label", children: kind === "test" && !(idField === null || idField === void 0 ? void 0 : idField.value) ? "NEW TEST" : kind.toUpperCase() }), (idField === null || idField === void 0 ? void 0 : idField.value) && _jsx("span", { className: "bn-testmeta__id", children: idField.value }), !expanded && (_jsx("button", { type: "button", className: "bn-testmeta__summary", title: summaryText || "No metadata yet", onClick: () => setExpanded(true), children: summaryText || _jsx("span", { className: "bn-testmeta__summary--empty", children: "No metadata" }) })), _jsxs("div", { className: "bn-testmeta__actions", children: [expanded && _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField }), _jsx("button", { type: "button", className: `bn-testmeta__toggle${expanded ? " bn-testmeta__toggle--expanded" : ""}`, "aria-expanded": expanded, "aria-label": expanded ? "Collapse metadata" : "Expand metadata", title: expanded ? "Collapse" : "Expand", onClick: () => setExpanded((prev) => !prev), children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), expanded && editableFields.length > 0 && (_jsx("div", { className: "bn-testmeta__rows", children: editableFields.map(({ field, index }) => (_jsxs("div", { className: "bn-testmeta__row", children: [_jsx("input", { className: "bn-testmeta__key bn-testmeta__key--input", type: "text", value: field.key, placeholder: "key", spellCheck: false, onChange: (e) => handleKeyChange(index, e.target.value) }), _jsx("input", { className: "bn-testmeta__value", type: "text", value: field.value, placeholder: "value", spellCheck: false, onChange: (e) => handleValueChange(index, e.target.value) }), _jsx("button", { type: "button", className: "bn-testmeta__remove", "aria-label": "Remove field", title: "Remove field", onClick: () => handleRemove(index), children: "\u00D7" })] }, index))) }))] }));
     },
 });

package/package/index.d.ts

@@ -1,7 +1,7 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
-export { testMetaBlock } from "./editor/blocks/testMeta";
+export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export { setMetaFieldSuggestions, getMetaFieldSuggestions, type MetaFieldSuggestion, type MetaFieldSuggestionsConfig, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, type TagMatch, } from "./editor/tagBadge";

package/package/index.js

@@ -1,7 +1,7 @@
 export { customSchema, } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
-export { testMetaBlock } from "./editor/blocks/testMeta";
+export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export { setMetaFieldSuggestions, getMetaFieldSuggestions, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, } from "./editor/tagBadge";

package/package/styles.css

@@ -998,6 +998,19 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   color: var(--text-muted);
 }
 
+/*
+ * The "new test" title heading is inserted directly after a testMeta panel, so it
+ * is the block-outer immediately following the one containing a testMeta block.
+ * Override BlockNote's injected "Heading" placeholder just for that heading.
+ * !important beats the dynamically injected placeholder rule.
+ */
+.bn-block-outer:has(.bn-block-content[data-content-type="testMeta"])
+  + .bn-block-outer
+  .bn-block-content[data-content-type="heading"]
+  .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: "Enter test title" !important;
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }

package/package.json

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

@@ -25,6 +25,7 @@ import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomp
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import { setImageUploadHandler } from "./editor/stepImageUpload";
 import { canInsertStepOrSnippet, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
+import { addTestBlock } from "./editor/blocks/testMeta";
 import "./App.css";
 
 const focusStepField = (
@@ -356,14 +357,8 @@ function CustomSlashMenu() {
       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 headingId = addTestBlock(editor);
+        focusStepField(editor, headingId ?? undefined);
       },
     };
 
@@ -554,6 +549,10 @@ function App() {
     const id = addSnippetBlock(editor);
     if (id) focusStepField(editor, id, "snippet-title");
   };
+  const insertTest = () => {
+    const id = addTestBlock(editor);
+    if (id) focusStepField(editor, id);
+  };
 
   const handleCopyMarkdown = async () => {
     if (conversionError) {
@@ -645,6 +644,13 @@ function App() {
           >
             Insert Snippet
           </button>
+          <button
+            type="button"
+            className="app__action app__action--ghost"
+            onClick={insertTest}
+          >
+            Insert Test
+          </button>
           <button
             type="button"
             className="app__dark-toggle"

package/src/editor/blocks/testMeta.tsx

@@ -31,6 +31,77 @@ export function serializeMetaFields(fields: MetaField[]): string {
   return JSON.stringify(fields);
 }
 
+type TestEditorLike = {
+  document: any[];
+  getTextCursorPosition?: () => { block?: { id?: string } };
+  insertBlocks: (
+    blocks: any[],
+    referenceId: string,
+    placement: "before" | "after",
+  ) => any[];
+};
+
+/** Reads the `labels` value from the first suite `testMeta` block, if any. */
+function suiteLabelsFromDocument(document: any[]): string {
+  for (const block of document) {
+    if (block?.type !== "testMeta") continue;
+    if ((block.props as any)?.metaKind !== "suite") continue;
+    const fields = parseMetaFields((block.props as any)?.metaFields);
+    const labels = fields.find((f) => f.key.trim().toLowerCase() === "labels");
+    if (labels) return labels.value;
+  }
+  return "";
+}
+
+/**
+ * Insert a new test: a `testMeta` panel (labelled "NEW TEST" until it gets an id)
+ * seeded with default metadata — `type: manual`, `priority: normal`, and `labels`
+ * copied from the suite block — followed by an empty H2 heading for the test title.
+ *
+ * Inserts at the text cursor when the editor is focused, otherwise at the end of
+ * the document. Returns the title heading's block id (for focusing), or null.
+ */
+export function addTestBlock(editor: TestEditorLike): string | null {
+  const fields: MetaField[] = [
+    { key: "type", value: "manual" },
+    { key: "priority", value: "normal" },
+    { key: "labels", value: suiteLabelsFromDocument(editor.document) },
+  ];
+
+  const metaBlock = {
+    type: "testMeta" as const,
+    props: {
+      metaKind: "test",
+      metaFields: serializeMetaFields(fields),
+      metaInline: false,
+    },
+    children: [],
+  };
+  const titleHeading = {
+    type: "heading" as const,
+    props: { level: 2 },
+    content: [],
+    children: [],
+  };
+
+  // Prefer the text cursor position — BlockNote keeps it in the editor state even
+  // after the editor blurs (e.g. when a toolbar button is clicked), so the test
+  // lands where the user left the caret. Fall back to the document end only when
+  // there is no cursor at all.
+  const docs = editor.document;
+  let referenceId: string | undefined;
+  try {
+    referenceId = editor.getTextCursorPosition?.().block?.id;
+  } catch {
+    referenceId = undefined;
+  }
+  if (!referenceId) referenceId = docs[docs.length - 1]?.id;
+  if (!referenceId) return null;
+
+  const inserted = editor.insertBlocks([metaBlock, titleHeading], referenceId, "after");
+  return inserted?.[1]?.id ?? null;
+}
+
 type AddFieldMenuProps = {
   kind: "test" | "suite";
   usedKeys: string[];
@@ -214,7 +285,9 @@ export const testMetaBlock = createReactBlockSpec(
           draggable={false}
         >
           <div className="bn-testmeta__header">
-            <span className="bn-testmeta__label">{kind.toUpperCase()}</span>
+            <span className="bn-testmeta__label">
+              {kind === "test" && !idField?.value ? "NEW TEST" : kind.toUpperCase()}
+            </span>
             {idField?.value && <span className="bn-testmeta__id">{idField.value}</span>}
             {!expanded && (
               <button

package/src/editor/styles.css

@@ -998,6 +998,19 @@ html.dark .testomatio-editor [data-content-type="heading"] .bn-tag-badge {
   color: var(--text-muted);
 }
 
+/*
+ * The "new test" title heading is inserted directly after a testMeta panel, so it
+ * is the block-outer immediately following the one containing a testMeta block.
+ * Override BlockNote's injected "Heading" placeholder just for that heading.
+ * !important beats the dynamically injected placeholder rule.
+ */
+.bn-block-outer:has(.bn-block-content[data-content-type="testMeta"])
+  + .bn-block-outer
+  .bn-block-content[data-content-type="heading"]
+  .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: "Enter test title" !important;
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }

package/src/index.ts

@@ -6,7 +6,7 @@ export {
 } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
-export { testMetaBlock } from "./editor/blocks/testMeta";
+export { testMetaBlock, addTestBlock } from "./editor/blocks/testMeta";
 export {
   setMetaFieldSuggestions,
   getMetaFieldSuggestions,