npm - testomatio-editor-blocks - Versions diffs - 0.4.80 → 0.4.83 - Mend

testomatio-editor-blocks 0.4.80 → 0.4.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/package/editor/blocks/exampleMarker.d.ts +19 -0
package/package/editor/blocks/exampleMarker.js +12 -0
package/package/editor/blocks/step.js +87 -16
package/package/editor/customMarkdownConverter.js +22 -0
package/package/editor/customSchema.d.ts +12 -0
package/package/editor/customSchema.js +2 -0
package/package/editor/exampleTableHighlight.d.ts +46 -0
package/package/editor/exampleTableHighlight.js +131 -0
package/package/index.d.ts +1 -0
package/package/index.js +1 -0
package/package/styles.css +31 -0
package/package.json +1 -1
package/src/App.tsx +2 -1
package/src/editor/blocks/exampleMarker.tsx +24 -0
package/src/editor/blocks/step.tsx +117 -44
package/src/editor/customMarkdownConverter.test.ts +28 -0
package/src/editor/customMarkdownConverter.ts +28 -0
package/src/editor/customSchema.tsx +2 -0
package/src/editor/exampleTableHighlight.test.ts +66 -0
package/src/editor/exampleTableHighlight.ts +148 -0
package/src/editor/styles.css +31 -0
package/src/index.ts +6 -0

package/package/editor/blocks/exampleMarker.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * A read-only marker rendered from the `<!-- example -->` HTML comment that
+ * precedes a data/examples table in a testomat.io test file. It shows a compact
+ * "examples" panel (a cropped variant of the SUITE/TEST metadata bar) so the
+ * marker reads as a UI label instead of raw comment text. It has no fields and
+ * round-trips back to `<!-- example -->` on serialize.
+ */
+export declare const exampleMarkerBlock: {
+    config: {
+        readonly type: "exampleMarker";
+        readonly content: "none";
+        readonly propSchema: {};
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "exampleMarker";
+        readonly content: "none";
+        readonly propSchema: {};
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/exampleMarker.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createReactBlockSpec } from "@blocknote/react";
+/**
+ * A read-only marker rendered from the `<!-- example -->` HTML comment that
+ * precedes a data/examples table in a testomat.io test file. It shows a compact
+ * "examples" panel (a cropped variant of the SUITE/TEST metadata bar) so the
+ * marker reads as a UI label instead of raw comment text. It has no fields and
+ * round-trips back to `<!-- example -->` on serialize.
+ */
+export const exampleMarkerBlock = createReactBlockSpec({ type: "exampleMarker", content: "none", propSchema: {} }, {
+    render: () => (_jsx("div", { className: "bn-example-marker", contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: _jsx("span", { className: "bn-example-marker__label", children: "examples" }) })),
+});

package/package/editor/blocks/step.js CHANGED Viewed

@@ -313,23 +313,62 @@ function TestStepBlock({ block, editor }) {
         focusOnMountRef.current = true;
         setEditing(true);
     }, []);
-    // Mousedown rather than click so the editor mounts before focus settles, and
-    // preventDefault so the browser doesn't move focus to <body> when the preview
-    // (the mousedown target) unmounts mid-click — that stray blur would otherwise
-    // immediately tear the new editor back down.
-    const beginEditingFromPointer = useCallback((event) => {
-        event.preventDefault();
-        beginEditing();
-    }, [beginEditing]);
     const endEditing = useCallback(() => setEditing(false), []);
-    if (editing) {
-        // Empty steps mounted eagerly (freshly inserted) auto-focus their title.
-        // A preview upgraded by a click focuses its field too, so a single click
-        // starts editing. The editor tears back down to a preview when focus
-        // leaves the step (see TestStepContent's blur handling).
-        return (_jsx(TestStepContent, { block: block, editor: editor, stepNumber: stepNumber, viewMode: viewMode, autoFocusEnabled: isEmptyStep, focusOnMount: focusOnMountRef.current, onEditEnd: endEditing }));
-    }
-    return (_jsx("div", { className: "bn-teststep-preview-wrapper", tabIndex: 0, onMouseDownCapture: beginEditingFromPointer, onFocusCapture: beginEditing, children: _jsx(TestStepPreview, { blockId: block.id, stepNumber: stepNumber, viewMode: viewMode, stepTitle: block.props.stepTitle || "", stepData: block.props.stepData || "", expectedResult: block.props.expectedResult || "" }) }));
+    // `editing` read from a ref so the single mousedown guard below (attached once)
+    // always sees the current state without re-binding.
+    const editingRef = useRef(editing);
+    editingRef.current = editing;
+    // Zero-box anchor (display: contents) used only to locate this block's node-view
+    // element; it adds no layout box, so the step renders exactly as before.
+    const anchorRef = useRef(null);
+    // The step is a ProseMirror atom node (content: "none") whose node-view
+    // (`.bn-block-content`) is wider than the visible step, so the empty area around
+    // it — and, in the collapsed preview, the whole strip to the right of the text —
+    // is inert atom surface. A plain mousedown there makes ProseMirror node-select the
+    // block (the stray blue outline) instead of editing it. One native listener on the
+    // node-view guards every mousedown in both the preview and editing states before
+    // ProseMirror sees it. Native (not onMouseDown) is required because React 18
+    // delegates at the app root, so its handlers run after ProseMirror's own.
+    useEffect(() => {
+        var _a;
+        const blockEl = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.closest(".bn-block-content");
+        if (!blockEl) {
+            return;
+        }
+        const handleMouseDown = (event) => {
+            const target = event.target;
+            // The real editor surface, form controls, and popovers/dialogs need the
+            // native mousedown (caret placement, typing, focus) to behave normally.
+            if (target === null || target === void 0 ? void 0 : target.closest('.overtype-container, textarea, input, [role="dialog"], .bn-popover-content, .bn-form-popover')) {
+                return;
+            }
+            // Buttons and links (toolbar, view toggle, action bar, autocomplete
+            // suggestions): preventDefault keeps the focused field from blurring — a blur
+            // node-selects the atom and can trip the focusout teardown on re-render — but
+            // we don't stopPropagation, so their own click/mousedown handlers still run.
+            if (target === null || target === void 0 ? void 0 : target.closest("button, a[href]")) {
+                event.preventDefault();
+                return;
+            }
+            // Everything else — field labels, the timeline, the header, surrounding
+            // padding, and the empty node-view strip — is inert atom chrome. Swallow the
+            // mousedown so ProseMirror can't node-select the block; in the collapsed
+            // preview a click there means "edit this step", so begin editing.
+            event.preventDefault();
+            event.stopPropagation();
+            if (!editingRef.current) {
+                beginEditing();
+            }
+        };
+        blockEl.addEventListener("mousedown", handleMouseDown);
+        return () => blockEl.removeEventListener("mousedown", handleMouseDown);
+    }, [beginEditing]);
+    return (_jsx("div", { ref: anchorRef, style: { display: "contents" }, children: editing ? (
+        // Empty steps mounted eagerly (freshly inserted) auto-focus their title. A
+        // preview upgraded by a click focuses its field too, so a single click starts
+        // editing. The editor tears back down to a preview when focus leaves the step
+        // (see TestStepContent's blur handling).
+        _jsx(TestStepContent, { block: block, editor: editor, stepNumber: stepNumber, viewMode: viewMode, autoFocusEnabled: isEmptyStep, focusOnMount: focusOnMountRef.current, onEditEnd: endEditing })) : (_jsx("div", { className: "bn-teststep-preview-wrapper", tabIndex: 0, onFocusCapture: beginEditing, children: _jsx(TestStepPreview, { blockId: block.id, stepNumber: stepNumber, viewMode: viewMode, stepTitle: block.props.stepTitle || "", stepData: block.props.stepData || "", expectedResult: block.props.expectedResult || "" }) })) }));
 }
 function TestStepContent({ block, editor, stepNumber, viewMode, autoFocusEnabled = false, focusOnMount = false, onEditEnd, }) {
     // When a preview is upgraded by a click, focus its primary field once on
@@ -347,6 +386,12 @@ function TestStepContent({ block, editor, stepNumber, viewMode, autoFocusEnabled
     const uploadImage = useStepImageUpload();
     const containerRef = useRef(null);
     const [forceVertical, setForceVertical] = useState(false);
+    // Set for a moment while a view-mode toggle is in flight. Switching into or
+    // out of the horizontal layout swaps the whole subtree, so the OverType editor
+    // unmounts and its blur would otherwise trip the focusout teardown below and
+    // collapse the step to a preview. The flag tells the teardown to re-focus the
+    // freshly mounted editor instead of ending the edit.
+    const viewTransitionRef = useRef(false);
     useEffect(() => {
         var _a;
         const el = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -382,12 +427,24 @@ function TestStepContent({ block, editor, stepNumber, viewMode, autoFocusEnabled
             // popover that portals to <body>, e.g. the link editor) has settled
             // before we decide whether editing has really ended.
             requestAnimationFrame(() => {
+                var _a;
                 const active = document.activeElement;
                 if (active &&
                     (root.contains(active) ||
                         active.closest(".bn-popover-content, .bn-form-popover, [role='dialog']"))) {
                     return;
                 }
+                // A view-mode toggle remounted the editor; the blur isn't the user
+                // leaving the step. Keep editing and move focus into the freshly
+                // mounted layout instead of collapsing to a preview.
+                if (viewTransitionRef.current) {
+                    viewTransitionRef.current = false;
+                    const live = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
+                    if (live) {
+                        live.focus();
+                        return;
+                    }
+                }
                 onEditEnd();
             });
         };
@@ -502,6 +559,20 @@ function TestStepContent({ block, editor, stepNumber, viewMode, autoFocusEnabled
         else {
             next = "vertical";
         }
+        // Only switching into or out of the horizontal layout swaps the subtree and
+        // remounts the editor; vertical↔compact reuse the same editor instance and
+        // never blur. Flag just the remounting transitions so the focusout teardown
+        // re-focuses the new editor instead of collapsing — and so a genuine
+        // click-away after a non-remounting toggle still tears down normally. Cleared
+        // on a timer as a safety net in case the expected blur never arrives.
+        if (viewMode === "horizontal" || next === "horizontal") {
+            viewTransitionRef.current = true;
+            if (typeof window !== "undefined") {
+                window.setTimeout(() => {
+                    viewTransitionRef.current = false;
+                }, 300);
+            }
+        }
         writeStepViewMode(next);
         // The shared useStepViewMode hook (in every step, including this one)
         // listens for this event and re-reads the mode, so we don't track it

package/package/editor/customMarkdownConverter.js CHANGED Viewed

@@ -354,6 +354,8 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return lines;
         }
+        case "exampleMarker":
+            return ["<!-- example -->"];
         case "testMeta": {
             const kind = block.props.metaKind === "suite" ? "suite" : "test";
             const inline = Boolean(block.props.metaInline);
@@ -1223,6 +1225,18 @@ function parseParagraph(lines, index) {
     };
 }
 const META_COMMENT_OPEN_REGEX = /^<!--\s*(test|suite)(?=\s|-->|$)/i;
+// Marks the data/examples table that follows in a testomat.io test file. Accepts
+// both the singular `example` and plural `examples` spellings.
+const EXAMPLE_MARKER_REGEX = /^<!--\s*examples?\s*-->\s*$/i;
+function parseExampleMarker(lines, index) {
+    if (!EXAMPLE_MARKER_REGEX.test(lines[index].trim())) {
+        return null;
+    }
+    return {
+        block: { type: "exampleMarker", props: {}, children: [] },
+        nextIndex: index + 1,
+    };
+}
 // Keys whose value is a YAML-style list (`key:` followed by indented `- item`
 // lines) in the testomat.io comment format — e.g. `issues` holding URLs. These
 // round-trip back to a list on serialize; everything else stays a flat line.
@@ -1440,6 +1454,14 @@ export function markdownToBlocks(markdown, _options) {
             index = metaComment.nextIndex;
             continue;
         }
+        // Caught before parseParagraph so the `<!-- example -->` marker renders as
+        // an "examples" panel instead of raw comment text.
+        const exampleMarker = parseExampleMarker(lines, index);
+        if (exampleMarker) {
+            blocks.push(exampleMarker.block);
+            index = exampleMarker.nextIndex;
+            continue;
+        }
         const snippetWrapper = stepsHeadingLevel !== null
             ? parseSnippetWrapper(lines, index)
             : null;

package/package/editor/customSchema.d.ts CHANGED Viewed

@@ -149,6 +149,18 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
             };
         }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
     };
+    exampleMarker: {
+        config: {
+            readonly type: "exampleMarker";
+            readonly content: "none";
+            readonly propSchema: {};
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            readonly type: "exampleMarker";
+            readonly content: "none";
+            readonly propSchema: {};
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";

package/package/editor/customSchema.js CHANGED Viewed

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

package/package/editor/exampleTableHighlight.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { BlockNoteExtension } from "@blocknote/core";
+/**
+ * An "example table" is a data table that belongs to a testomat.io `<!-- example -->`
+ * marker: it sits between that marker and the start of the next test — i.e. the next
+ * `testMeta` block (`<!-- test ... -->` / `<!-- suite ... -->`) — or the end of the
+ * document. Such tables are painted with a gray cell background so they read as the
+ * marker's data table.
+ *
+ * Given the block content-type names in document order, returns a boolean[] where
+ * entry `i` is `true` iff a `"table"` at index `i` falls inside an example region.
+ * `exampleMarker` opens a region; `testMeta` closes it; everything else (headings,
+ * paragraphs, …) leaves the region unchanged.
+ *
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export declare function markExampleTables(types: readonly string[]): boolean[];
+/**
+ * Example tables only occur in a *suite* document — one that opens with a
+ * `<!-- suite ... -->` comment (a `testMeta` block whose `metaKind` is `"suite"`).
+ * Gating on the first block lets the plugin skip the whole scan for any other
+ * document (a lone test, plain notes, …) instead of walking it on every change.
+ *
+ * Pure so it can be unit-tested directly.
+ */
+export declare function isSuiteDocument(firstBlockType: string | undefined, firstBlockMetaKind: string | undefined): boolean;
+/**
+ * BlockNote extension that grays the cells of the table following an
+ * `<!-- example -->` marker (bounded by the next test/suite comment or the end of
+ * the document).
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried by
+ * the schema, so consumers must add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [exampleTableHighlightExtension()],
+ * });
+ * ```
+ */
+export declare class ExampleTableHighlightExtension extends BlockNoteExtension {
+    static key(): string;
+    constructor();
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export declare const exampleTableHighlightExtension: () => ExampleTableHighlightExtension;

package/package/editor/exampleTableHighlight.js ADDED Viewed

@@ -0,0 +1,131 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+/**
+ * An "example table" is a data table that belongs to a testomat.io `<!-- example -->`
+ * marker: it sits between that marker and the start of the next test — i.e. the next
+ * `testMeta` block (`<!-- test ... -->` / `<!-- suite ... -->`) — or the end of the
+ * document. Such tables are painted with a gray cell background so they read as the
+ * marker's data table.
+ *
+ * Given the block content-type names in document order, returns a boolean[] where
+ * entry `i` is `true` iff a `"table"` at index `i` falls inside an example region.
+ * `exampleMarker` opens a region; `testMeta` closes it; everything else (headings,
+ * paragraphs, …) leaves the region unchanged.
+ *
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function markExampleTables(types) {
+    const flags = [];
+    let active = false;
+    for (const name of types) {
+        if (name === "exampleMarker") {
+            active = true;
+            flags.push(false);
+        }
+        else if (name === "testMeta") {
+            active = false;
+            flags.push(false);
+        }
+        else {
+            flags.push(name === "table" && active);
+        }
+    }
+    return flags;
+}
+/**
+ * Example tables only occur in a *suite* document — one that opens with a
+ * `<!-- suite ... -->` comment (a `testMeta` block whose `metaKind` is `"suite"`).
+ * Gating on the first block lets the plugin skip the whole scan for any other
+ * document (a lone test, plain notes, …) instead of walking it on every change.
+ *
+ * Pure so it can be unit-tested directly.
+ */
+export function isSuiteDocument(firstBlockType, firstBlockMetaKind) {
+    return firstBlockType === "testMeta" && firstBlockMetaKind === "suite";
+}
+/**
+ * Build node decorations that add `.bn-example-table` to every table in an example
+ * region. Tables are only *painted* — the document is untouched, so markdown
+ * serialization round-trips unchanged.
+ *
+ * The `<!-- example -->` marker, the metadata comment, and the table each become a
+ * top-level block whose content node is named by its block type (`exampleMarker`,
+ * `testMeta`, `table`), so a single document-order walk yields them directly.
+ *
+ * Nothing is highlighted unless the document is a suite (see `isSuiteDocument`).
+ */
+function buildExampleTableDecorations(doc) {
+    const entries = [];
+    let firstBlockType;
+    let firstBlockMetaKind;
+    doc.descendants((node, pos, parent) => {
+        var _a;
+        // The first content node encountered under a blockContainer is the document's
+        // first block — capture its type/metaKind for the suite gate below.
+        if (firstBlockType === undefined && (parent === null || parent === void 0 ? void 0 : parent.type.name) === "blockContainer") {
+            firstBlockType = node.type.name;
+            const metaKind = (_a = node.attrs) === null || _a === void 0 ? void 0 : _a.metaKind;
+            firstBlockMetaKind = typeof metaKind === "string" ? metaKind : undefined;
+        }
+        const name = node.type.name;
+        if (name === "exampleMarker" || name === "testMeta" || name === "table") {
+            entries.push({ pos, size: node.nodeSize, name });
+            // No need to descend into table cells or the marker's (empty) internals.
+            return false;
+        }
+        // Descend through the blockGroup / blockContainer wrappers to reach content.
+        return undefined;
+    });
+    if (!isSuiteDocument(firstBlockType, firstBlockMetaKind)) {
+        return DecorationSet.empty;
+    }
+    const flags = markExampleTables(entries.map((entry) => entry.name));
+    const decorations = entries
+        .filter((_, index) => flags[index])
+        .map((entry) => Decoration.node(entry.pos, entry.pos + entry.size, {
+        class: "bn-example-table",
+    }));
+    return DecorationSet.create(doc, decorations);
+}
+const exampleTablePluginKey = new PluginKey("testomatioExampleTable");
+function exampleTablePlugin() {
+    return new Plugin({
+        key: exampleTablePluginKey,
+        state: {
+            init: (_config, state) => buildExampleTableDecorations(state.doc),
+            apply: (tr, value) => tr.docChanged ? buildExampleTableDecorations(tr.doc) : value,
+        },
+        props: {
+            decorations(state) {
+                return exampleTablePluginKey.getState(state);
+            },
+        },
+    });
+}
+/**
+ * BlockNote extension that grays the cells of the table following an
+ * `<!-- example -->` marker (bounded by the next test/suite comment or the end of
+ * the document).
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried by
+ * the schema, so consumers must add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [exampleTableHighlightExtension()],
+ * });
+ * ```
+ */
+export class ExampleTableHighlightExtension extends BlockNoteExtension {
+    static key() {
+        return "exampleTableHighlight";
+    }
+    constructor() {
+        super();
+        this.addProsemirrorPlugin(exampleTablePlugin());
+    }
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const exampleTableHighlightExtension = () => new ExampleTableHighlightExtension();

package/package/index.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ export { setMetaFieldSuggestions, getMetaFieldSuggestions, type MetaFieldSuggest
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, type TagMatch, } from "./editor/tagBadge";
 export { autoLinkExtension, AutoLinkExtension, detectLinks, type LinkMatch, } from "./editor/autoLink";
+export { exampleTableHighlightExtension, ExampleTableHighlightExtension, markExampleTables, } from "./editor/exampleTableHighlight";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, type MarkdownToBlocksOptions, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";

package/package/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ export { setMetaFieldSuggestions, getMetaFieldSuggestions, } from "./editor/test
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { tagBadgeExtension, TagBadgeExtension, TAGS_DETECT_REGEXP, detectTags, } from "./editor/tagBadge";
 export { autoLinkExtension, AutoLinkExtension, detectLinks, } from "./editor/autoLink";
+export { exampleTableHighlightExtension, ExampleTableHighlightExtension, markExampleTables, } from "./editor/exampleTableHighlight";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";

package/package/styles.css CHANGED Viewed

@@ -811,6 +811,37 @@ html.dark .testomatio-editor .bn-auto-link {
   opacity: 0.5;
 }
+/* Compact marker for `<!-- example -->` — a cropped variant of the testMeta bar
+   (fit-content width, not full editor width) labelling the table below it. */
+.bn-example-marker {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  background: var(--bg-muted);
+  border-top: 3px solid var(--color-slate-400);
+  margin-top: 1rem;
+  opacity: 0.6;
+}
+.bn-example-marker__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+/* Gray cells for the data table that follows an `<!-- example -->` marker. The
+   `.bn-example-table` class is applied by a ProseMirror decoration (see
+   exampleTableHighlight.ts), bounded to tables between the marker and the next
+   test/suite comment (or end of document). */
+.bn-editor [data-content-type="table"].bn-example-table td,
+.bn-editor [data-content-type="table"].bn-example-table th {
+  background: var(--bg-muted);
+}
 /* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
    always share one row. */
 .bn-testmeta__header {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.80",
+  "version": "0.4.83",
   "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 CHANGED Viewed

@@ -22,6 +22,7 @@ import { createMarkdownPasteHandler } from "./editor/createMarkdownPasteHandler"
 import { customSchema, type CustomEditor } from "./editor/customSchema";
 import { tagBadgeExtension } from "./editor/tagBadge";
 import { autoLinkExtension } from "./editor/autoLink";
+import { exampleTableHighlightExtension } from "./editor/exampleTableHighlight";
 import { setStepsFetcher, type StepJsonApiDocument } from "./editor/stepAutocomplete";
 import { setSnippetFetcher, type SnippetJsonApiDocument } from "./editor/snippetAutocomplete";
 import {
@@ -500,7 +501,7 @@ function CustomSlashMenu() {
 function App() {
   const editor = useCreateBlockNote({
     schema: customSchema,
-    extensions: [tagBadgeExtension(), autoLinkExtension()],
+    extensions: [tagBadgeExtension(), autoLinkExtension(), exampleTableHighlightExtension()],
     pasteHandler: createMarkdownPasteHandler(markdownToBlocks),
     uploadFile: async (file: File) => {
       const url = `https://placehold.co/600x400?text=${encodeURIComponent(file.name)}`;

package/src/editor/blocks/exampleMarker.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { createReactBlockSpec } from "@blocknote/react";
+/**
+ * A read-only marker rendered from the `<!-- example -->` HTML comment that
+ * precedes a data/examples table in a testomat.io test file. It shows a compact
+ * "examples" panel (a cropped variant of the SUITE/TEST metadata bar) so the
+ * marker reads as a UI label instead of raw comment text. It has no fields and
+ * round-trips back to `<!-- example -->` on serialize.
+ */
+export const exampleMarkerBlock = createReactBlockSpec(
+  { type: "exampleMarker", content: "none", propSchema: {} },
+  {
+    render: () => (
+      <div
+        className="bn-example-marker"
+        contentEditable={false}
+        suppressContentEditableWarning
+        draggable={false}
+      >
+        <span className="bn-example-marker__label">examples</span>
+      </div>
+    ),
+  },
+);

package/src/editor/blocks/step.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { createReactBlockSpec, useEditorChange } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField, StepFieldPreview } from "./stepField";
 import { StepHorizontalView } from "./stepHorizontalView";
 import { useStepImageUpload } from "../stepImageUpload";
@@ -375,53 +375,95 @@ function TestStepBlock({ block, editor }: { block: any; editor: any }) {
     setEditing(true);
   }, []);
-  // Mousedown rather than click so the editor mounts before focus settles, and
-  // preventDefault so the browser doesn't move focus to <body> when the preview
-  // (the mousedown target) unmounts mid-click — that stray blur would otherwise
-  // immediately tear the new editor back down.
-  const beginEditingFromPointer = useCallback(
-    (event: ReactMouseEvent) => {
-      event.preventDefault();
-      beginEditing();
-    },
-    [beginEditing],
-  );
   const endEditing = useCallback(() => setEditing(false), []);
-  if (editing) {
-    // Empty steps mounted eagerly (freshly inserted) auto-focus their title.
-    // A preview upgraded by a click focuses its field too, so a single click
-    // starts editing. The editor tears back down to a preview when focus
-    // leaves the step (see TestStepContent's blur handling).
-    return (
-      <TestStepContent
-        block={block}
-        editor={editor}
-        stepNumber={stepNumber}
-        viewMode={viewMode}
-        autoFocusEnabled={isEmptyStep}
-        focusOnMount={focusOnMountRef.current}
-        onEditEnd={endEditing}
-      />
-    );
-  }
+  // `editing` read from a ref so the single mousedown guard below (attached once)
+  // always sees the current state without re-binding.
+  const editingRef = useRef(editing);
+  editingRef.current = editing;
+  // Zero-box anchor (display: contents) used only to locate this block's node-view
+  // element; it adds no layout box, so the step renders exactly as before.
+  const anchorRef = useRef<HTMLDivElement>(null);
+  // The step is a ProseMirror atom node (content: "none") whose node-view
+  // (`.bn-block-content`) is wider than the visible step, so the empty area around
+  // it — and, in the collapsed preview, the whole strip to the right of the text —
+  // is inert atom surface. A plain mousedown there makes ProseMirror node-select the
+  // block (the stray blue outline) instead of editing it. One native listener on the
+  // node-view guards every mousedown in both the preview and editing states before
+  // ProseMirror sees it. Native (not onMouseDown) is required because React 18
+  // delegates at the app root, so its handlers run after ProseMirror's own.
+  useEffect(() => {
+    const blockEl = anchorRef.current?.closest(".bn-block-content") as HTMLElement | null;
+    if (!blockEl) {
+      return;
+    }
+    const handleMouseDown = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      // The real editor surface, form controls, and popovers/dialogs need the
+      // native mousedown (caret placement, typing, focus) to behave normally.
+      if (
+        target?.closest(
+          '.overtype-container, textarea, input, [role="dialog"], .bn-popover-content, .bn-form-popover',
+        )
+      ) {
+        return;
+      }
+      // Buttons and links (toolbar, view toggle, action bar, autocomplete
+      // suggestions): preventDefault keeps the focused field from blurring — a blur
+      // node-selects the atom and can trip the focusout teardown on re-render — but
+      // we don't stopPropagation, so their own click/mousedown handlers still run.
+      if (target?.closest("button, a[href]")) {
+        event.preventDefault();
+        return;
+      }
+      // Everything else — field labels, the timeline, the header, surrounding
+      // padding, and the empty node-view strip — is inert atom chrome. Swallow the
+      // mousedown so ProseMirror can't node-select the block; in the collapsed
+      // preview a click there means "edit this step", so begin editing.
+      event.preventDefault();
+      event.stopPropagation();
+      if (!editingRef.current) {
+        beginEditing();
+      }
+    };
+    blockEl.addEventListener("mousedown", handleMouseDown);
+    return () => blockEl.removeEventListener("mousedown", handleMouseDown);
+  }, [beginEditing]);
   return (
-    <div
-      className="bn-teststep-preview-wrapper"
-      tabIndex={0}
-      onMouseDownCapture={beginEditingFromPointer}
-      onFocusCapture={beginEditing}
-    >
-      <TestStepPreview
-        blockId={block.id}
-        stepNumber={stepNumber}
-        viewMode={viewMode}
-        stepTitle={(block.props.stepTitle as string) || ""}
-        stepData={(block.props.stepData as string) || ""}
-        expectedResult={(block.props.expectedResult as string) || ""}
-      />
+    <div ref={anchorRef} style={{ display: "contents" }}>
+      {editing ? (
+        // Empty steps mounted eagerly (freshly inserted) auto-focus their title. A
+        // preview upgraded by a click focuses its field too, so a single click starts
+        // editing. The editor tears back down to a preview when focus leaves the step
+        // (see TestStepContent's blur handling).
+        <TestStepContent
+          block={block}
+          editor={editor}
+          stepNumber={stepNumber}
+          viewMode={viewMode}
+          autoFocusEnabled={isEmptyStep}
+          focusOnMount={focusOnMountRef.current}
+          onEditEnd={endEditing}
+        />
+      ) : (
+        <div
+          className="bn-teststep-preview-wrapper"
+          tabIndex={0}
+          onFocusCapture={beginEditing}
+        >
+          <TestStepPreview
+            blockId={block.id}
+            stepNumber={stepNumber}
+            viewMode={viewMode}
+            stepTitle={(block.props.stepTitle as string) || ""}
+            stepData={(block.props.stepData as string) || ""}
+            expectedResult={(block.props.expectedResult as string) || ""}
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -460,6 +502,12 @@ function TestStepContent({
       const uploadImage = useStepImageUpload();
       const containerRef = useRef<HTMLDivElement>(null);
       const [forceVertical, setForceVertical] = useState(false);
+      // Set for a moment while a view-mode toggle is in flight. Switching into or
+      // out of the horizontal layout swaps the whole subtree, so the OverType editor
+      // unmounts and its blur would otherwise trip the focusout teardown below and
+      // collapse the step to a preview. The flag tells the teardown to re-focus the
+      // freshly mounted editor instead of ending the edit.
+      const viewTransitionRef = useRef(false);
       useEffect(() => {
         const el = containerRef.current?.parentElement;
@@ -504,6 +552,17 @@ function TestStepContent({
             ) {
               return;
             }
+            // A view-mode toggle remounted the editor; the blur isn't the user
+            // leaving the step. Keep editing and move focus into the freshly
+            // mounted layout instead of collapsing to a preview.
+            if (viewTransitionRef.current) {
+              viewTransitionRef.current = false;
+              const live = containerRef.current?.querySelector("textarea");
+              if (live) {
+                (live as HTMLTextAreaElement).focus();
+                return;
+              }
+            }
             onEditEnd();
           });
         };
@@ -642,6 +701,20 @@ function TestStepContent({
         } else {
           next = "vertical";
         }
+        // Only switching into or out of the horizontal layout swaps the subtree and
+        // remounts the editor; vertical↔compact reuse the same editor instance and
+        // never blur. Flag just the remounting transitions so the focusout teardown
+        // re-focuses the new editor instead of collapsing — and so a genuine
+        // click-away after a non-remounting toggle still tears down normally. Cleared
+        // on a timer as a safety net in case the expected blur never arrives.
+        if (viewMode === "horizontal" || next === "horizontal") {
+          viewTransitionRef.current = true;
+          if (typeof window !== "undefined") {
+            window.setTimeout(() => {
+              viewTransitionRef.current = false;
+            }, 300);
+          }
+        }
         writeStepViewMode(next);
         // The shared useStepViewMode hook (in every step, including this one)
         // listens for this event and re-reads the mode, so we don't track it

package/src/editor/customMarkdownConverter.test.ts CHANGED Viewed

@@ -3182,6 +3182,34 @@ describe("test/suite metadata comments", () => {
     expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
   });
+  it("parses an <!-- example --> marker into an exampleMarker block", () => {
+    const blocks = markdownToBlocks("<!-- example -->");
+    expect(blocks).toEqual([
+      {
+        type: "exampleMarker",
+        props: {},
+        children: [],
+      },
+    ]);
+  });
+  it("parses the plural <!-- examples --> spelling too", () => {
+    const blocks = markdownToBlocks("<!-- examples -->");
+    expect(blocks).toEqual([
+      {
+        type: "exampleMarker",
+        props: {},
+        children: [],
+      },
+    ]);
+  });
+  it("round-trips an <!-- example --> marker", () => {
+    const markdown = "<!-- example -->";
+    const blocks = markdownToBlocks(markdown);
+    expect(blocksToMarkdown(blocks as CustomEditorBlock[])).toBe(markdown);
+  });
   it("parses a multi-line suite block with ordered fields", () => {
     const markdown = [
       "<!-- suite",

package/src/editor/customMarkdownConverter.ts CHANGED Viewed

@@ -425,6 +425,8 @@ function serializeBlock(
       }
       return lines;
     }
+    case "exampleMarker":
+      return ["<!-- example -->"];
     case "testMeta": {
       const kind = (block.props as any).metaKind === "suite" ? "suite" : "test";
       const inline = Boolean((block.props as any).metaInline);
@@ -1435,6 +1437,23 @@ function parseParagraph(lines: string[], index: number): { block: CustomPartialB
 const META_COMMENT_OPEN_REGEX = /^<!--\s*(test|suite)(?=\s|-->|$)/i;
+// Marks the data/examples table that follows in a testomat.io test file. Accepts
+// both the singular `example` and plural `examples` spellings.
+const EXAMPLE_MARKER_REGEX = /^<!--\s*examples?\s*-->\s*$/i;
+function parseExampleMarker(
+  lines: string[],
+  index: number,
+): { block: CustomPartialBlock; nextIndex: number } | null {
+  if (!EXAMPLE_MARKER_REGEX.test(lines[index].trim())) {
+    return null;
+  }
+  return {
+    block: { type: "exampleMarker", props: {}, children: [] } as CustomPartialBlock,
+    nextIndex: index + 1,
+  };
+}
 // Keys whose value is a YAML-style list (`key:` followed by indented `- item`
 // lines) in the testomat.io comment format — e.g. `issues` holding URLs. These
 // round-trip back to a list on serialize; everything else stays a flat line.
@@ -1691,6 +1710,15 @@ export function markdownToBlocks(markdown: string, _options?: MarkdownToBlocksOp
       continue;
     }
+    // Caught before parseParagraph so the `<!-- example -->` marker renders as
+    // an "examples" panel instead of raw comment text.
+    const exampleMarker = parseExampleMarker(lines, index);
+    if (exampleMarker) {
+      blocks.push(exampleMarker.block);
+      index = exampleMarker.nextIndex;
+      continue;
+    }
     const snippetWrapper = stepsHeadingLevel !== null
       ? parseSnippetWrapper(lines, index)
       : null;

package/src/editor/customSchema.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
 import { testMetaBlock } from "./blocks/testMeta";
+import { exampleMarkerBlock } from "./blocks/exampleMarker";
 import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
@@ -13,6 +14,7 @@ export const customSchema = BlockNoteSchema.create({
     testStep: stepBlock,
     snippet: snippetBlock,
     testMeta: testMetaBlock,
+    exampleMarker: exampleMarkerBlock,
   },
 });

package/src/editor/exampleTableHighlight.test.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { isSuiteDocument, markExampleTables } from "./exampleTableHighlight";
+describe("isSuiteDocument", () => {
+  it("is true only when the first block is a suite testMeta", () => {
+    expect(isSuiteDocument("testMeta", "suite")).toBe(true);
+  });
+  it("is false for a document opening with a test (not a suite)", () => {
+    expect(isSuiteDocument("testMeta", "test")).toBe(false);
+  });
+  it("is false when the first block is not a testMeta", () => {
+    expect(isSuiteDocument("heading", undefined)).toBe(false);
+    expect(isSuiteDocument("paragraph", "suite")).toBe(false);
+  });
+  it("is false for an empty document", () => {
+    expect(isSuiteDocument(undefined, undefined)).toBe(false);
+  });
+});
+describe("markExampleTables", () => {
+  it("flags a table that follows an example marker", () => {
+    expect(markExampleTables(["exampleMarker", "paragraph", "table"])).toEqual([
+      false,
+      false,
+      true,
+    ]);
+  });
+  it("stops the region at the next test/suite comment", () => {
+    // First table is in the example region; the testMeta closes it, so the
+    // second table (belonging to the next test) is not flagged.
+    expect(
+      markExampleTables(["exampleMarker", "table", "testMeta", "table"]),
+    ).toEqual([false, true, false, false]);
+  });
+  it("does not flag tables without a preceding example marker", () => {
+    expect(markExampleTables(["table"])).toEqual([false]);
+    expect(markExampleTables(["testMeta", "table"])).toEqual([false, false]);
+  });
+  it("keeps the region open across headings and other blocks", () => {
+    expect(
+      markExampleTables(["exampleMarker", "heading", "paragraph", "table"]),
+    ).toEqual([false, false, false, true]);
+  });
+  it("flags every table in the region until the next test", () => {
+    expect(
+      markExampleTables(["exampleMarker", "table", "table", "testMeta", "table"]),
+    ).toEqual([false, true, true, false, false]);
+  });
+  it("reopens the region when a new example marker appears", () => {
+    expect(
+      markExampleTables(["exampleMarker", "table", "testMeta", "exampleMarker", "table"]),
+    ).toEqual([false, true, false, false, true]);
+  });
+  it("returns an empty array for no blocks", () => {
+    expect(markExampleTables([])).toEqual([]);
+  });
+});

package/src/editor/exampleTableHighlight.ts ADDED Viewed

@@ -0,0 +1,148 @@
+import { BlockNoteExtension } from "@blocknote/core";
+import type { Node as PMNode } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+/**
+ * An "example table" is a data table that belongs to a testomat.io `<!-- example -->`
+ * marker: it sits between that marker and the start of the next test — i.e. the next
+ * `testMeta` block (`<!-- test ... -->` / `<!-- suite ... -->`) — or the end of the
+ * document. Such tables are painted with a gray cell background so they read as the
+ * marker's data table.
+ *
+ * Given the block content-type names in document order, returns a boolean[] where
+ * entry `i` is `true` iff a `"table"` at index `i` falls inside an example region.
+ * `exampleMarker` opens a region; `testMeta` closes it; everything else (headings,
+ * paragraphs, …) leaves the region unchanged.
+ *
+ * Pure and DOM-free so it can be unit-tested directly.
+ */
+export function markExampleTables(types: readonly string[]): boolean[] {
+  const flags: boolean[] = [];
+  let active = false;
+  for (const name of types) {
+    if (name === "exampleMarker") {
+      active = true;
+      flags.push(false);
+    } else if (name === "testMeta") {
+      active = false;
+      flags.push(false);
+    } else {
+      flags.push(name === "table" && active);
+    }
+  }
+  return flags;
+}
+/**
+ * Example tables only occur in a *suite* document — one that opens with a
+ * `<!-- suite ... -->` comment (a `testMeta` block whose `metaKind` is `"suite"`).
+ * Gating on the first block lets the plugin skip the whole scan for any other
+ * document (a lone test, plain notes, …) instead of walking it on every change.
+ *
+ * Pure so it can be unit-tested directly.
+ */
+export function isSuiteDocument(
+  firstBlockType: string | undefined,
+  firstBlockMetaKind: string | undefined,
+): boolean {
+  return firstBlockType === "testMeta" && firstBlockMetaKind === "suite";
+}
+/**
+ * Build node decorations that add `.bn-example-table` to every table in an example
+ * region. Tables are only *painted* — the document is untouched, so markdown
+ * serialization round-trips unchanged.
+ *
+ * The `<!-- example -->` marker, the metadata comment, and the table each become a
+ * top-level block whose content node is named by its block type (`exampleMarker`,
+ * `testMeta`, `table`), so a single document-order walk yields them directly.
+ *
+ * Nothing is highlighted unless the document is a suite (see `isSuiteDocument`).
+ */
+function buildExampleTableDecorations(doc: PMNode): DecorationSet {
+  const entries: { pos: number; size: number; name: string }[] = [];
+  let firstBlockType: string | undefined;
+  let firstBlockMetaKind: string | undefined;
+  doc.descendants((node, pos, parent) => {
+    // The first content node encountered under a blockContainer is the document's
+    // first block — capture its type/metaKind for the suite gate below.
+    if (firstBlockType === undefined && parent?.type.name === "blockContainer") {
+      firstBlockType = node.type.name;
+      const metaKind = node.attrs?.metaKind;
+      firstBlockMetaKind = typeof metaKind === "string" ? metaKind : undefined;
+    }
+    const name = node.type.name;
+    if (name === "exampleMarker" || name === "testMeta" || name === "table") {
+      entries.push({ pos, size: node.nodeSize, name });
+      // No need to descend into table cells or the marker's (empty) internals.
+      return false;
+    }
+    // Descend through the blockGroup / blockContainer wrappers to reach content.
+    return undefined;
+  });
+  if (!isSuiteDocument(firstBlockType, firstBlockMetaKind)) {
+    return DecorationSet.empty;
+  }
+  const flags = markExampleTables(entries.map((entry) => entry.name));
+  const decorations = entries
+    .filter((_, index) => flags[index])
+    .map((entry) =>
+      Decoration.node(entry.pos, entry.pos + entry.size, {
+        class: "bn-example-table",
+      }),
+    );
+  return DecorationSet.create(doc, decorations);
+}
+const exampleTablePluginKey = new PluginKey<DecorationSet>("testomatioExampleTable");
+function exampleTablePlugin(): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: exampleTablePluginKey,
+    state: {
+      init: (_config, state) => buildExampleTableDecorations(state.doc),
+      apply: (tr, value) =>
+        tr.docChanged ? buildExampleTableDecorations(tr.doc) : value,
+    },
+    props: {
+      decorations(state) {
+        return exampleTablePluginKey.getState(state);
+      },
+    },
+  });
+}
+/**
+ * BlockNote extension that grays the cells of the table following an
+ * `<!-- example -->` marker (bounded by the next test/suite comment or the end of
+ * the document).
+ *
+ * Editor extensions are supplied at editor-creation time and cannot be carried by
+ * the schema, so consumers must add this to their `useCreateBlockNote` call:
+ *
+ * ```ts
+ * useCreateBlockNote({
+ *   schema: customSchema,
+ *   extensions: [exampleTableHighlightExtension()],
+ * });
+ * ```
+ */
+export class ExampleTableHighlightExtension extends BlockNoteExtension {
+  static key() {
+    return "exampleTableHighlight";
+  }
+  constructor() {
+    super();
+    this.addProsemirrorPlugin(exampleTablePlugin());
+  }
+}
+/** Factory for the `extensions` option of `useCreateBlockNote`. */
+export const exampleTableHighlightExtension = () => new ExampleTableHighlightExtension();

package/src/editor/styles.css CHANGED Viewed

@@ -811,6 +811,37 @@ html.dark .testomatio-editor .bn-auto-link {
   opacity: 0.5;
 }
+/* Compact marker for `<!-- example -->` — a cropped variant of the testMeta bar
+   (fit-content width, not full editor width) labelling the table below it. */
+.bn-example-marker {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  background: var(--bg-muted);
+  border-top: 3px solid var(--color-slate-400);
+  margin-top: 1rem;
+  opacity: 0.6;
+}
+.bn-example-marker__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+/* Gray cells for the data table that follows an `<!-- example -->` marker. The
+   `.bn-example-table` class is applied by a ProseMirror decoration (see
+   exampleTableHighlight.ts), bounded to tables between the marker and the next
+   test/suite comment (or end of document). */
+.bn-editor [data-content-type="table"].bn-example-table td,
+.bn-editor [data-content-type="table"].bn-example-table th {
+  background: var(--bg-muted);
+}
 /* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
    always share one row. */
 .bn-testmeta__header {

package/src/index.ts CHANGED Viewed

@@ -30,6 +30,12 @@ export {
   type LinkMatch,
 } from "./editor/autoLink";
+export {
+  exampleTableHighlightExtension,
+  ExampleTableHighlightExtension,
+  markExampleTables,
+} from "./editor/exampleTableHighlight";
 export {
   blocksToMarkdown,
   markdownToBlocks,