testomatio-editor-blocks 0.4.65 → 0.4.66

package/src/editor/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/src/editor/testMetaFields.ts

@@ -0,0 +1,53 @@
+export type MetaFieldSuggestion = {
+  /** The field key that gets inserted, e.g. "priority". */
+  key: string;
+  /** Optional display label; defaults to `key`. */
+  label?: string;
+};
+
+/**
+ * Either a flat list (applied to both test and suite blocks) or per-kind lists.
+ * Configure from the host app via `setMetaFieldSuggestions` so embedders can
+ * plug in their own set of suggested metadata fields.
+ */
+export type MetaFieldSuggestionsConfig =
+  | MetaFieldSuggestion[]
+  | { test?: MetaFieldSuggestion[]; suite?: MetaFieldSuggestion[] };
+
+// Defaults follow the classical Testomatio markdown format. `id` is intentionally
+// omitted: it is a read-only, system-assigned field, not something users add.
+const DEFAULT_TEST_FIELDS: MetaFieldSuggestion[] = [
+  { key: "priority" },
+  { key: "type" },
+  { key: "tags" },
+  { key: "labels" },
+  { key: "assignee" },
+  { key: "creator" },
+  { key: "shared" },
+];
+
+const DEFAULT_SUITE_FIELDS: MetaFieldSuggestion[] = [
+  { key: "emoji" },
+  { key: "tags" },
+  { key: "labels" },
+  { key: "assignee" },
+];
+
+let configured: MetaFieldSuggestionsConfig | null = null;
+
+export function setMetaFieldSuggestions(config: MetaFieldSuggestionsConfig | null) {
+  configured = config;
+}
+
+export function getMetaFieldSuggestions(kind: "test" | "suite"): MetaFieldSuggestion[] {
+  if (configured) {
+    if (Array.isArray(configured)) {
+      return configured;
+    }
+    const list = kind === "suite" ? configured.suite : configured.test;
+    if (list) {
+      return list;
+    }
+  }
+  return kind === "suite" ? DEFAULT_SUITE_FIELDS : DEFAULT_TEST_FIELDS;
+}

package/src/index.ts

@@ -6,6 +6,13 @@ 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 {
+  setMetaFieldSuggestions,
+  getMetaFieldSuggestions,
+  type MetaFieldSuggestion,
+  type MetaFieldSuggestionsConfig,
+} from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 
 export {