{"id":46278237,"url":"https://github.com/testomatio/block-editor","last_synced_at":"2026-03-13T10:05:22.400Z","repository":{"id":341953841,"uuid":"1077175997","full_name":"testomatio/block-editor","owner":"testomatio","description":"Block editor for Testomatio","archived":false,"fork":false,"pushed_at":"2026-03-04T03:31:29.000Z","size":488,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-04T07:35:20.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://blocks.testomatio.work","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/testomatio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-10-15T22:14:57.000Z","updated_at":"2026-03-04T03:31:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/testomatio/block-editor","commit_stats":null,"previous_names":["testomatio/block-editor"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/testomatio/block-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testomatio%2Fblock-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testomatio%2Fblock-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testomatio%2Fblock-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testomatio%2Fblock-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/testomatio","download_url":"https://codeload.github.com/testomatio/block-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/testomatio%2Fblock-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30302384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T14:33:48.460Z","status":"ssl_error","status_checked_at":"2026-03-09T14:33:48.027Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-04T05:06:15.299Z","updated_at":"2026-03-13T10:05:22.379Z","avatar_url":"https://github.com/testomatio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Testomatio Editor Blocks\n\nCustom BlockNote blocks, schema, and Markdown conversion helpers for Testomatio-style test cases and steps. The repository bundles two things:\n\n- A Vite playground (`npm run dev`) for trying the blocks in isolation.\n- A publishable package (`npm run build:package`) that writes the distributable files to `package/`.\n\n## Prerequisites\n\n- Node.js 20+\n- npm 9+\n\nInstall once after cloning:\n\n```bash\nnpm install\n```\n\n## Running The UI\n\nStart the Vite dev server:\n\n```bash\nnpm run dev\n```\n\nThe 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.\n\n## Building the Package\n\nCreate the publishable bundle (JavaScript, type declarations, and stylesheet) by running:\n\n```bash\nnpm run build:package\n```\n\nThe compiled files land in `package/`:\n\n- `package/index.js` and `package/index.d.ts` export the schema plus converters.\n- `package/editor/...` contains the underlying source hierarchy for easier debugging.\n- `package/styles.css` ships all required styles for the blocks.\n\nRunning `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.\n\n## Using Inside Any BlockNote Editor\n\n1. **Install**\n\n   Add `testomatio-editor-blocks` alongside the BlockNote packages you already use:\n\n   ```bash\n   npm install testomatio-editor-blocks @blocknote/react @blocknote/core\n   ```\n\n   (If you are working locally before publishing, use `npm install ../path/to/testomatio-editor-blocks --save`.)\n\n2. **Load the schema and helpers**\n\n```jsx\nimport { BlockNoteView } from \"@blocknote/mantine\";\nimport { useCreateBlockNote, useEditorChange } from \"@blocknote/react\";\nimport {\n  customSchema,\n  markdownToBlocks,\n  blocksToMarkdown,\n  testomatioEditorClassName,\n} from \"testomatio-editor-blocks\";\nimport \"testomatio-editor-blocks/styles.css\";\n\nconst editor = useCreateBlockNote({\n  schema: customSchema,\n  pasteHandler: ({ event, editor, defaultPasteHandler }) =\u003e {\n    const text = event.clipboardData?.getData(\"text/plain\") ?? \"\";\n    if (!text.trim()) {\n      return defaultPasteHandler();\n    }\n    try {\n      const blocks = markdownToBlocks(text);\n      editor.insertBlocks(blocks);\n      return true;\n    } catch {\n      return defaultPasteHandler();\n    }\n  },\n});\n\nuseEditorChange((instance) =\u003e {\n  const markdown = blocksToMarkdown(instance.document);\n  // Persist markdown to your backend or trigger app logic.\n  console.log(markdown);\n}, editor);\n\nreturn (\n  \u003cBlockNoteView\n    editor={editor}\n    className={testomatioEditorClassName}\n    slashMenu={false}\n  /\u003e\n);\n```\n\n3. **Work with Markdown**\n\n- `markdownToBlocks(markdown: string)` converts Testomatio Markdown into BlockNote block definitions ready for insertion.\n- `blocksToMarkdown(blocks)` serialises editor content back into Markdown for storing or syncing.\n- `testomatioEditorClassName` gives you the `markdown` wrapper class so the editor inherits the same Tailwind typography styles as your read-only view.\n\n4. **Blocks Available**\n\n   - `testStep`: inline WYSIWYG inputs for Step Title, Data, and Expected Result with bold/italic/underline formatting/images.\n   - `snippet`: dropdown to pick a reusable snippet and editable body (no formatting buttons).\n\n## Step Autocomplete \u0026 Image Upload Hooks\n\nConfigure everything via JS—no React providers required:\n\n```ts\nimport {\n  customSchema,\n  setStepsFetcher,\n} from \"testomatio-editor-blocks\";\nimport { setSnippetFetcher } from \"testomatio-editor-blocks/snippets\";\n\n// Step suggestions (fetch or return an array of { id, title, ... })\nsetStepsFetcher(async () =\u003e {\n  const res = await fetch(\"https://api.testomatio.com/v1/steps\");\n  return res.json();\n});\n\nsetSnippetFetcher(async () =\u003e {\n  const res = await fetch(\"https://api.testomatio.com/v1/snippets\");\n  return res.json();\n});\n\n// Image upload uses BlockNote's `uploadFile` handler you pass to `useCreateBlockNote`.\n// No extra setup is required for step/snippet fields.\n```\n\nFor 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 `\u003c!-- begin snippet #id --\u003e ... \u003c!-- end snippet #id --\u003e`.\n\nStep suggestions accept either an array of `{ id, title, ... }` or the JSON:API shape:\n\n```json\n{\n  \"data\": [\n    {\n      \"id\": \"145\",\n      \"type\": \"step\",\n      \"attributes\": {\n        \"title\": \"Donec placerat, dui vitae\",\n        \"description\": null,\n        \"kind\": \"manual\",\n        \"labels\": [],\n        \"keywords\": [],\n        \"usage-count\": 23,\n        \"comments-count\": 0,\n        \"is-snippet\": null\n      }\n    }\n  ]\n}\n```\n\nWhen a user types in Step Title, autocomplete filters these titles; Tab/Enter/Ctrl/Cmd+Space or the ⌄ button will insert the selection.\n\n## Running Tests\n\nVitest covers the Markdown/block converter. Run the suite with:\n\n```bash\nnpm run test:run\n```\n\nUse `npm run test` if you prefer the interactive watcher.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestomatio%2Fblock-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftestomatio%2Fblock-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftestomatio%2Fblock-editor/lists"}