{"id":30176268,"url":"https://github.com/opf/op-blocknote-extensions","last_synced_at":"2026-02-27T10:51:21.271Z","repository":{"id":298510201,"uuid":"997345750","full_name":"opf/op-blocknote-extensions","owner":"opf","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-20T11:17:50.000Z","size":537,"stargazers_count":0,"open_issues_count":3,"forks_count":2,"subscribers_count":0,"default_branch":"dev","last_synced_at":"2026-02-20T15:39:04.021Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":"COPYRIGHT.md","agents":null,"dco":null,"cla":null}},"created_at":"2025-06-06T11:21:33.000Z","updated_at":"2026-02-19T09:22:23.000Z","dependencies_parsed_at":"2025-06-11T13:55:21.790Z","dependency_job_id":"3d01f6ff-95a7-41e3-84bb-0141f90fa4b8","html_url":"https://github.com/opf/op-blocknote-extensions","commit_stats":null,"previous_names":["opf/op-blocknote-extensions"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/opf/op-blocknote-extensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opf%2Fop-blocknote-extensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opf%2Fop-blocknote-extensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opf%2Fop-blocknote-extensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opf%2Fop-blocknote-extensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opf","download_url":"https://codeload.github.com/opf/op-blocknote-extensions/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opf%2Fop-blocknote-extensions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29892063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T09:48:51.284Z","status":"ssl_error","status_checked_at":"2026-02-27T09:48:43.992Z","response_time":57,"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":"2025-08-12T02:44:58.721Z","updated_at":"2026-02-27T10:51:21.264Z","avatar_url":"https://github.com/opf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenProject BlockNote extensions\n\n[OpenProject](https://www.openproject.org/) extensions for the [BlockNote](https://www.blocknotejs.org/) editor.\n\n## About this repo\n\nThis repo is split into two parts:\n\n- The library itself, which is located in the `/lib` folder and can be built and packaged with `npm run build`.\n- A demo app, which is located in the `src/App.tsx` file and can be run locally with `npm run dev`.\n\n## Usage\n\n### Installation\n\nInclude the following entry to your _package.json_.\n\n```json\n\"op-blocknote-extensions\": \"https://github.com/opf/op-blocknote-extensions/releases/download/\u003cVERSION\u003e/op-blocknote-extensions-\u003cVERSION\u003e.tgz\"\n```\n\n(please note: at the time being, you need to replace the version in two places of the url.)\n\n### Implementation\n\nFirst thing is to initialize the library configuration...\n\n```js\n  initOpenProjectApi({ baseUrl: \"https://my.openproject.url\" });\n```\n\n... then setup a blocknote schema extending it with blocks offered by this library...\n\n```jsx\n  const schema = BlockNoteSchema.create().extend({\n    blockSpecs: {\n      \"openProjectWorkPackage\": openProjectWorkPackageBlockSpec(),\n    },\n  });\n  type EditorType = typeof schema.BlockNoteEditor;\n\n  const editor = useCreateBlockNote({ schema });\n```\n\n... same for slash menus ...\n\n```jsx\n  const getCustomSlashMenuItems = (editor: EditorType) =\u003e {\n    return [\n      ...getDefaultReactSlashMenuItems(editor),\n      openProjectWorkPackageSlashMenu(editor),\n    ];\n  };\n```\n\n... and include them all in a BlockNote instance\n\n```jsx\n  return (\n    \u003cBlockNoteView editor={editor}\u003e\n      \u003cSuggestionMenuController\n        triggerCharacter=\"/\"\n        getItems={async (query: string) =\u003e\n          filterSuggestionItems(getCustomSlashMenuItems(editor), query)\n        }\n      /\u003e\n    \u003c/BlockNoteView\u003e\n  );\n```\n\nThere's a working example in the [src/App.tsx](src/App.tsx) in this repository. You can test it locally by running:\n\n```sh\nnpm run dev\n```\n\nWhich will start a vite server with a BlockNote editor instance including the available extensions.\n\n#### Usage within a shadow dom root\n\nThis project uses `styledComponents` to define styles. This means that styles are, by default, injected onto the page header. To be able to use styles onto a shadow dom root it is necessary to use our `ShadowDomWrapper` component targeting the root for the styles.\n\n```tsx\n  \u003cShadowDomWrapper target={targetHtmlElementOrShadowRoot}\u003e\n    \u003cMyBlockNoteView /\u003e\n  \u003c/ShadowDomWrapper\u003e\n```\n\n### To run locally with valid API requests to an OpenProject instance\n\nStep 1: Make sure that the OpenProject instance URL is correct in App.tsx\n\n\u003e  initOpenProjectApi({ baseUrl: \"https://\" });\n\nStep 2: Enable CORS and set the local address of this application at https://openproject.local/admin/settings/api\n\n\u003e Set \"http://localhost:5173\" as the address\n\nStep 3: Generate an API key in OpenProject at https://openproject.local/my/access_tokens\n\nStep 4: Set it in the .env file (may need to copy .env.example to .env) with the key VITE_API_KEY\n\nStep 5: Start the development server - `npm run dev`\n\n## Components in this library\n\n|Component|Description|\n|--|--|\n|WorkPackage block|Search and display elegantly work package links|\n|...|...|\n\n## Build\n\nTo build the library and generate types and source maps. This will update the `dist` folder.\n\n```sh\nnpm run build\n```\n\nTo develop with OpenProject locally\n\n```sh\nnpm run build\nnpm pack\ncp op-blocknote-extensions-*.tgz ../openproject/frontend\ncd ../openproject/frontend\nnpm i -S op-blocknote-extensions-*.tgz\n```\n\nThis should make sure that the package is available for OpenProject even if running on a container.\n\n### Releases\n\nUpdating the version field in package.json will automatically create a new Git tag with the corresponding version. Pushing this tag to the repository triggers the generation of a new release.\n\nTo publish a new release, simply update the version in package.json and merge the changes into the main branch.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopf%2Fop-blocknote-extensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopf%2Fop-blocknote-extensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopf%2Fop-blocknote-extensions/lists"}