testomatio-editor-blocks 0.4.70 → 0.4.71

package/package/editor/blocks/testMeta.js

@@ -106,6 +106,19 @@ export const testMetaBlock = createReactBlockSpec({
         const editableFields = fields
             .map((field, index) => ({ field, index }))
             .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
-        return (_jsxs("div", { className: "bn-testmeta", "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 }), _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField })] }), 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))) }))] }));
+        // Compact (reading) view: collapse the rows into a single truncated line
+        // built only from fields that actually have a value — keys without values
+        // are an editing-only concern and never appear in the compact summary (the
+        // expanded rows still show them so they can be filled in). The
+        // expand/collapse toggle pinned to the far right reveals the full rows.
+        const summaryText = editableFields
+            .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
+            .map(({ field }) => `${field.key}: ${field.value}`)
+            .join("  ·  ");
+        // Nothing readable to summarise (no fields, or only empty values) -> start
+        // expanded so the block is immediately editable. `expanded` is UI-only
+        // state — never serialized.
+        const [expanded, setExpanded] = useState(() => summaryText.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))) }))] }));
     },
 });

package/package/styles.css

@@ -752,8 +752,69 @@ html.dark .bn-teststep__view-toggle--compact svg {
   margin-left: 8px;
 }
 
-.bn-testmeta__header .bn-testmeta__add-wrap {
+/* Add button + expand/collapse toggle live in a right-pinned action group. */
+.bn-testmeta__header .bn-testmeta__actions {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Compact one-liner: the metadata rendered as truncated read text, click to
+   expand. Takes the remaining header width and ellipsizes when it overflows. */
+.bn-testmeta__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.bn-testmeta__summary:hover {
+  color: var(--text-primary);
+}
+
+.bn-testmeta__summary--empty {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.bn-testmeta__toggle {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+
+.bn-testmeta__toggle:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__toggle svg {
+  transition: transform 150ms ease;
+}
+
+.bn-testmeta__toggle--expanded svg {
+  transform: rotate(180deg);
 }
 
 .bn-testmeta__label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.70",
+  "version": "0.4.71",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",

package/src/editor/blocks/testMeta.tsx

@@ -187,9 +187,23 @@ export const testMetaBlock = createReactBlockSpec(
         .map((field, index) => ({ field, index }))
         .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
 
+      // Compact (reading) view: collapse the rows into a single truncated line
+      // built only from fields that actually have a value — keys without values
+      // are an editing-only concern and never appear in the compact summary (the
+      // expanded rows still show them so they can be filled in). The
+      // expand/collapse toggle pinned to the far right reveals the full rows.
+      const summaryText = editableFields
+        .filter(({ field }) => field.key.trim().length > 0 && field.value.trim().length > 0)
+        .map(({ field }) => `${field.key}: ${field.value}`)
+        .join("  ·  ");
+      // Nothing readable to summarise (no fields, or only empty values) -> start
+      // expanded so the block is immediately editable. `expanded` is UI-only
+      // state — never serialized.
+      const [expanded, setExpanded] = useState(() => summaryText.length === 0);
+
       return (
         <div
-          className="bn-testmeta"
+          className={`bn-testmeta${expanded ? " bn-testmeta--expanded" : " bn-testmeta--collapsed"}`}
           data-block-id={block.id}
           data-kind={kind}
           contentEditable={false}
@@ -199,10 +213,34 @@ export const testMetaBlock = createReactBlockSpec(
           <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} />
+            {!expanded && (
+              <button
+                type="button"
+                className="bn-testmeta__summary"
+                title={summaryText || "No metadata yet"}
+                onClick={() => setExpanded(true)}
+              >
+                {summaryText || <span className="bn-testmeta__summary--empty">No metadata</span>}
+              </button>
+            )}
+            <div className="bn-testmeta__actions">
+              {expanded && <AddFieldMenu kind={kind} usedKeys={usedKeys} onPick={handleAddField} />}
+              <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)}
+              >
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            </div>
           </div>
 
-          {editableFields.length > 0 && (
+          {expanded && editableFields.length > 0 && (
             <div className="bn-testmeta__rows">
               {editableFields.map(({ field, index }) => (
                 <div className="bn-testmeta__row" key={index}>

package/src/editor/styles.css

@@ -752,8 +752,69 @@ html.dark .bn-teststep__view-toggle--compact svg {
   margin-left: 8px;
 }
 
-.bn-testmeta__header .bn-testmeta__add-wrap {
+/* Add button + expand/collapse toggle live in a right-pinned action group. */
+.bn-testmeta__header .bn-testmeta__actions {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Compact one-liner: the metadata rendered as truncated read text, click to
+   expand. Takes the remaining header width and ellipsizes when it overflows. */
+.bn-testmeta__summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.bn-testmeta__summary:hover {
+  color: var(--text-primary);
+}
+
+.bn-testmeta__summary--empty {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.bn-testmeta__toggle {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+
+.bn-testmeta__toggle:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__toggle svg {
+  transition: transform 150ms ease;
+}
+
+.bn-testmeta__toggle--expanded svg {
+  transform: rotate(180deg);
 }
 
 .bn-testmeta__label {