Repository files navigation

OpenProject extensions for theBlockNote editor.

This repo is split into two parts:

• The library itself, which is located in the/lib folder and can be built and packaged withnpm run build.
• A demo app, which is located in thesrc/App.tsx file and can be run locally withnpm run dev.

Include the following entry to yourpackage.json.

"op-blocknote-extensions":"https://github.com/opf/op-blocknote-extensions/releases/download/<VERSION>/op-blocknote-extensions-<VERSION>.tgz"

(please note: at the time being, you need to replace the version in two places of the url.)

First thing is to initialize the library configuration...

initOpenProjectApi({baseUrl:"https://my.openproject.url"});

... then setup a blocknote schema extending it with blocks offered by this library...

constschema=BlockNoteSchema.create().extend({blockSpecs:{"openProjectWorkPackage":openProjectWorkPackageBlockSpec(),},});typeEditorType=typeofschema.BlockNoteEditor;consteditor=useCreateBlockNote({ schema});

... same for slash menus ...

constgetCustomSlashMenuItems=(editor:EditorType)=>{return[      ...getDefaultReactSlashMenuItems(editor),openProjectWorkPackageSlashMenu(editor),];};

... and include them all in a BlockNote instance

return(<BlockNoteVieweditor={editor}><SuggestionMenuControllertriggerCharacter="/"getItems={async(query:string)=>filterSuggestionItems(getCustomSlashMenuItems(editor),query)}/></BlockNoteView>);

There's a working example in thesrc/App.tsx in this repository. You can test it locally by running:

npm run dev

Which will start a vite server with a BlockNote editor instance including the available extensions.

This project usesstyledComponents 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 ourShadowDomWrapper component targeting the root for the styles.

<ShadowDomWrappertarget={targetHtmlElementOrShadowRoot}><MyBlockNoteView/></ShadowDomWrapper>

Step 1: Make sure that the OpenProject instance URL is correct in App.tsx

initOpenProjectApi({ baseUrl: "https://" });

Step 2: Enable CORS and set the local address of this application athttps://openproject.local/admin/settings/api

Set "http://localhost:5173" as the address

Step 3: Generate an API key in OpenProject athttps://openproject.local/my/access_tokens

Step 4: Set it in the .env file (may need to copy .env.example to .env) with the key VITE_API_KEY

Step 5: Start the development server -npm run dev

To build the library and generate types and source maps. This will update thedist folder.

npm run build

To develop with OpenProject locally

npm run buildnpm packcp op-blocknote-extensions-*.tgz ../openproject/frontendcd ../openproject/frontendnpm i -S op-blocknote-extensions-*.tgz

This should make sure that the package is available for OpenProject even if running on a container.

Updating 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.

To publish a new release, simply update the version in package.json and merge the changes into the main branch.