feat: Toggle blocks #1707
feat: Toggle blocks #1707
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-ai-server
@blocknote/xl-docx-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
| export const ToggleHeading = createBlockSpec( | ||
| { | ||
| ...headingConfig, | ||
| type: "toggleHeading", | ||
| }, | ||
| { | ||
| ...headingImplementation, | ||
| render: (block, editor) => | ||
| createToggleWrapper( | ||
| block, | ||
| editor, | ||
| headingImplementation.render(block, editor), | ||
| ), | ||
| }, | ||
| ); |
There was a problem hiding this comment.
This is fantastic, composability!
There was a problem hiding this comment.
Now, this is creating a new block type, can we instead just "wrap over" heading, and if it has a prop isToggleable it switches it's render implementation from the default, into using this toggle wrapper?
So that there is only one heading implementation.
There was a problem hiding this comment.
Should I also revert the heading block to using createStronglyTypedTiptapNode? Since the keyboard shortcuts and input rules won't work if we stick with createBlockSpec. Or do you wanna see how it looks using the createBlockSpec first?
There was a problem hiding this comment.
For now, it is more important to see that the pattern can work before being caught up in those sort of details.
Once we can see that it works for headings, we can see if we can do it for something like list items
There was a problem hiding this comment.
Makes sense, updated the code👍
There was a problem hiding this comment.
Great, this looks about right. Ideally it'd be "around" the heading component, but that is minor and fixable.
To explain more, like this you made this:
function Heading(props){
function renderHeading(){}
return props.isToggleable ? <Toggle>{renderHeading()}</Toggle> : renderHeading()
}
blocks: { heading: Heading }Where I'd like something more like this:
function Heading() {
return renderHeading()
}
const WrapWithToggle=(component) => props => {
return props.isToggleable ? <Toggle>{component}</Toggle> : component
}
blocks: { heading: WrapWithToggle(heading) }There was a problem hiding this comment.
Now that we've validated this approach, I do think you have the right idea with making this a strongly typed tiptap node to keep all previous functionality.
There was a problem hiding this comment.
Implemented your suggestions, think it looks pretty decent. There are 2 things that aren't super nice though:
- Headings now always need to include a node view, even if they're not togglable.
- Because
createStronglyTypedTiptapNodeworks on the TipTap API level whilecreateToggleWrapperworks on the BlockNote API level, we have to convert from a node to a block in the node view and do some slightly weird stuff there.
How much of a concern are those 2?
There was a problem hiding this comment.
- should be fine, node views are essentially "ejecting" from normal rendering but shouldn't be different (if in pure JS not react)
- Yea, so the ideal here is to build everything in terms of the blocknote API instead in the future, just don't wanna invest into that at the moment. May be worth extracting into something common, but not necessary for the moment either.
So, I think this is good from here. 🚦 green light to implement the lists & other ones, it seems like a sound approach for the moment.
…stead of `createBlockSpec`
This PR adds toggle blocks, which have a button in them to show/hide their children.
TODO: