Documentation Request: can BlockNote use TipTap extensions (e.g. for Tables)

[brandondrew]

BlockNote looks absolutely amazing, but my requirement (unfortunately) includes a need to support user-editable tables. Can BlockNote use TipTap extensions? Will they automatically appear in the slash menu? I would love some documentation on using TipTap extensions in BlockNote, if it is possible.

Thanks!

[YousefED]

Thanks @brandondrew! We're currently working to make (re)design API surface for custom elements, documentation will be part of this, keep you posted!

[samlroberts]

Very curious about this

Thanks @brandondrew! We're currently working to make (re)design API surface for custom elements, documentation will be part of this, keep you posted!

Love to learn more about this, and any progress. I can even offer to help out if needed.

[YousefED]

The current focus is to separate the React UI layer #74 #75. This will improve the overall architecture. We expect his will be done in January. Then, we'll start looking at the extensibility API surface

Your input will definitely be useful! Can you share what kind of elements or other functionality you'd like to add?

[maxswjeon]

Hello, I approciate your hard work. Is there an update about this issue? Seems the PRs that you mentioned are already merged.

[maxswjeon]

Read some codes, found out that I can add extensions by adding _tiptapOptions.extensions. Might be only a documentational issue, right?

[brandondrew]

@maxswjeon please report back if you're able to add extensions. thanks!

[maxswjeon]

For the record, the tiptap extension initialization is occured in packages/core/src/BlockNoteExtensions.ts. The key function, getBlockNoteExtensions is called by packages/core/src/BlockNoteEditor.ts#L129 and integrated in packages/core/src/BlockNoteEditor.ts#L161-164. The _tiptapOptions is in BlockNoteEditorOptions, undocumented.

[maxswjeon]

Checked and made a PoC(Proof of Concept) for it, but it was not successful.

• Enter Key handling by addKeyboardShortcuts might not be compatible with other extensions, especially the Keyboard Handling methods in packages/core/src/extensions/Blocks/nodes/BlockContainer.ts.
• InputRules are also not working, because of the packages/core/src/extensions/Blocks/nodes/BlockContainer.ts.

Might need a factory method, such as toBlockNoteExtension(extension: TipTapExtension) that extends the original Tiptap extension to work in BlockNote.

It would be great if the maintainers check about this, if possible. (since I don't know the codebase that well.)

[YousefED]

Hi all!

While this indeed is technically possible, there are two tricky things here why it's currently not encouraged:

• maintainability: We're not 100% sure if we'll keep building on top of TipTap in the long term. For the foreseeable future, yes, but the most important core framework is Prosemirror - and there's something to be said for not having too many layers of abstractions
• compatibility: as @maxswjeon noticed; not all functionality in TipTap Extensions might work well with the Block-based system.

Instead, we'll work on a plugin system (such as #164 ) to be able to add your own custom blocks. This might include a helper to transform Tiptap Nodes into custom blocks.

Hope this helps!

[maxswjeon]

Thanks for @YousefED for the review! If possible, I will take a look at #164 too! Again, thanks for your hard work!