Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.
npm install testomatio-editor-blocksCustom BlockNote blocks, schema, and Markdown conversion helpers for Testomatio-style test cases and steps. The repository bundles two things:
- A Vite playground (npm run dev) for trying the blocks in isolation.
- A publishable package (npm run build:package) that writes the distributable files to package/.
- Node.js 20+
- npm 9+
Install once after cloning:
``bash`
npm install
Start the Vite dev server:
`bash`
npm run dev
The app defaults to http://localhost:5173. Paste Markdown (including tables or step blocks) directly into the editor to see it converted into structured blocks, while the right-hand panels display the Markdown and block JSON previews.
Create the publishable bundle (JavaScript, type declarations, and stylesheet) by running:
`bash`
npm run build:package
The compiled files land in package/:
- package/index.js and package/index.d.ts export the schema plus converters.package/editor/...
- contains the underlying source hierarchy for easier debugging.package/styles.css
- ships all required styles for the blocks.
Running npm run build will also invoke Vite and place the playground site in dist/, which you can upload to Cloudflare Pages if you want a hosted demo.
1. Install
Add testomatio-editor-blocks alongside the BlockNote packages you already use:
`bash`
npm install testomatio-editor-blocks @blocknote/react @blocknote/core
(If you are working locally before publishing, use npm install ../path/to/testomatio-editor-blocks --save.)
2. Load the schema and helpers
`jsx
import { BlockNoteView } from "@blocknote/mantine";
import { useCreateBlockNote, useEditorChange } from "@blocknote/react";
import {
customSchema,
markdownToBlocks,
blocksToMarkdown,
testomatioEditorClassName,
} from "testomatio-editor-blocks";
import "testomatio-editor-blocks/styles.css";
const editor = useCreateBlockNote({
schema: customSchema,
pasteHandler: ({ event, editor, defaultPasteHandler }) => {
const text = event.clipboardData?.getData("text/plain") ?? "";
if (!text.trim()) {
return defaultPasteHandler();
}
try {
const blocks = markdownToBlocks(text);
editor.insertBlocks(blocks);
return true;
} catch {
return defaultPasteHandler();
}
},
});
useEditorChange((instance) => {
const markdown = blocksToMarkdown(instance.document);
// Persist markdown to your backend or trigger app logic.
console.log(markdown);
}, editor);
return (
className={testomatioEditorClassName}
slashMenu={false}
/>
);
`
3. Work with Markdown
- markdownToBlocks(markdown: string) converts Testomatio Markdown into BlockNote block definitions ready for insertion.blocksToMarkdown(blocks)
- serialises editor content back into Markdown for storing or syncing.testomatioEditorClassName
- gives you the markdown wrapper class so the editor inherits the same Tailwind typography styles as your read-only view.
4. Blocks Available
- testStep: inline WYSIWYG inputs for Step Title, Data, and Expected Result with bold/italic/underline formatting/images.snippet
- : dropdown to pick a reusable snippet and editable body (no formatting buttons).
Configure everything via JS—no React providers required:
`ts
import {
customSchema,
setStepsFetcher,
} from "testomatio-editor-blocks";
import { setSnippetFetcher } from "testomatio-editor-blocks/snippets";
// Step suggestions (fetch or return an array of { id, title, ... })
setStepsFetcher(async () => {
const res = await fetch("https://api.testomatio.com/v1/steps");
return res.json();
});
setSnippetFetcher(async () => {
const res = await fetch("https://api.testomatio.com/v1/snippets");
return res.json();
});
// Image upload uses BlockNote's uploadFile handler you pass to useCreateBlockNote.`
// No extra setup is required for step/snippet fields.
For snippets, provide a suggestions fetcher that returns { id, title, body, ... } or a JSON:API document and map it with setSnippetFetcher. Selecting a snippet fills its body; Markdown is wrapped with ... .
Step suggestions accept either an array of { id, title, ... } or the JSON:API shape:
`json`
{
"data": [
{
"id": "145",
"type": "step",
"attributes": {
"title": "Donec placerat, dui vitae",
"description": null,
"kind": "manual",
"labels": [],
"keywords": [],
"usage-count": 23,
"comments-count": 0,
"is-snippet": null
}
}
]
}
When a user types in Step Title, autocomplete filters these titles; Tab/Enter/Ctrl/Cmd+Space or the ⌄ button will insert the selection.
Vitest covers the Markdown/block converter. Run the suite with:
`bash`
npm run test:run
Use npm run test` if you prefer the interactive watcher.