testomatio-editor-blocks 0.4.64 → 0.4.66

package/package/styles.css

@@ -595,6 +595,207 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   flex-shrink: 0;
 }
 
+/* ============================================
+   HEADING SIZES INSIDE THE EDITOR
+   Override BlockNote's default heading scale (3em / 2em / 1.3em) with a
+   compact 22px → 14px range. BlockNote derives heading font-size from the
+   `--level` custom property, so we just redefine it per level.
+   ============================================ */
+.testomatio-editor [data-content-type="heading"] {
+  --level: 22px; /* h1 (level 1 has no [data-level] rule of its own) */
+}
+.testomatio-editor [data-content-type="heading"][data-level="2"] {
+  --level: 20px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="3"] {
+  --level: 18px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="4"] {
+  --level: 16px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="5"] {
+  --level: 14px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="6"] {
+  --level: 14px;
+}
+/* Keep size stable during BlockNote's heading-transition animation. */
+.testomatio-editor [data-prev-level="1"] {
+  --prev-level: 22px;
+}
+.testomatio-editor [data-prev-level="2"] {
+  --prev-level: 20px;
+}
+.testomatio-editor [data-prev-level="3"] {
+  --prev-level: 18px;
+}
+
+/* ============================================
+   TEST / SUITE METADATA BLOCK
+   Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.
+   ============================================ */
+.bn-testmeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  background: var(--bg-muted);
+  /*border: 1px solid var(--border-default);*/
+  /* Stronger top edge signals that the test case begins below this line. */
+  border-top: 3px solid var(--color-slate-400);
+  /*border-radius: 8px;*/
+  margin-top: 2rem;
+  opacity: 0.5;
+}
+
+/* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
+   always share one row. */
+.bn-testmeta__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+}
+
+.bn-testmeta__header .bn-testmeta__add-wrap {
+  margin-left: auto;
+}
+
+.bn-testmeta__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.bn-testmeta__id {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.bn-testmeta__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bn-testmeta__row {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 8px;
+}
+
+.bn-testmeta__key {
+  min-width: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Defined values blend into the block like normal text, and only reveal the
+   input affordance on hover/focus ("activate on click"). */
+.bn-testmeta__key--input,
+.bn-testmeta__value {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: text;
+}
+
+.bn-testmeta__key--input:hover,
+.bn-testmeta__value:hover {
+  border-color: var(--border-light);
+}
+
+.bn-testmeta__key--input:focus,
+.bn-testmeta__value:focus {
+  outline: none;
+  background: var(--bg-white);
+  border-color: var(--step-input-border-focus);
+  box-shadow: 0 0 0 2px var(--step-input-shadow);
+}
+
+.bn-testmeta__remove,
+.bn-testmeta__add {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.bn-testmeta__remove:hover,
+.bn-testmeta__add:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__add-wrap {
+  position: relative;
+}
+
+.bn-testmeta__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 100;
+  min-width: 160px;
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--bg-white-opaque);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px var(--shadow-medium);
+}
+
+.bn-testmeta__menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.bn-testmeta__menu-item:hover {
+  background: var(--bg-muted);
+}
+
+.bn-testmeta__menu-item--custom {
+  margin-top: 2px;
+  border-top: 1px solid var(--border-light);
+  border-radius: 0 0 6px 6px;
+  color: var(--text-muted);
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }

package/package.json

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

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