Conversation
Add a tabs example. A `tabs` container holds `tab` panels, and each panel holds any block. The open tab is kept for each reader, outside the document. The open tab of a panel opens a menu to rename, move or delete it. Tabs can be dragged to reorder them.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueThanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/diagram-block
@blocknote/mantine
@blocknote/math-block
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
@blocknote/xl-typst-exporter
commit: |
|
Add a stepper example built on container blocks. `stepper` holds only `step` children, and `step` is `placeable: "namedOnly"`. The numbers are a CSS counter. "Add step" and Enter on an empty last block start a new step, and reordering or deleting a step uses the side menu. Known limitations: - The step title is not enforced. A step has no text of its own; its title is its first child, a heading, which the user can change or delete. A block with its own text cannot be `placeable: "namedOnly"` (that needs a container), and `children.allow` can only name containers. - A step whose title is an empty paragraph is removed by the container repair, so new steps start with an empty heading. Drag and drop fixes for blocks inside a container (core): - dragStart sets `view.dragging` to the selected nodes. Before, the side menu parsed them back from `blocknote/html` into a `blockGroup`, which wrapped a `namedOnly` block in a new parent, so dropping a step created a new stepper. - The drop cursor measures the first child of a `display: contents` node view. Before, it drew a 0px line for steps. - The drag preview finds the dragged block through a node view's wrapper elements, and clears `display: contents` on the clone. Before, the preview of a step was empty.
YousefED
marked this pull request as draft
September 29, 2026 15:04
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds examples that use the container block API. Each example shows a block that holds other blocks.
Examples
Tabs (
06-custom-schema/14-tabs-block)A
tabscontainer holdstabpanels. Each panel holds any block. The schema keeps a panel inside a tab set.Stepper (
06-custom-schema/15-stepper-block)A
steppercontainer holdsstepchildren. Astepisplaceable: "namedOnly", so a step can only be inside a stepper. Each step holds any block.Known limitations:
placeable: "namedOnly"needs a container (a block without content), andchildren.allowcan only name containers. A possible fix (own node types for blocks with content and owned children) is discussed in this proposal. It is out of scope for this PR.Drag and drop of blocks in a container (core)
The stepper found three problems when the user drags a block that is in a container. This PR fixes them:
dragStartgives ProseMirror the dragged nodes directly.display: contents, so it has no box. The drop cursor now measures the first child of such a node view.The drag and drop end-to-end tests pass (
dragdropanddraghandle, Chromium). A drag between two editors does the same as before.Toggle heading
To be added.
Known issues
An empty panel is deleted with its title. The container repair looks only at the content of a child. A panel that holds only an empty paragraph is "empty", so the repair deletes it. The repair ignores the props of the panel, so the title is also lost. The repair deletes all empty panels, not only the panel that changed. If fewer panels than
minstay, the complete tab set is removed. Examples:A block cannot stop this. The children config has only
allowandmin.Suggested fix: let the block decide if a child is empty. Only the author of a block knows if its props hold information (for example the title of a tab, or the width of a column). A simpler alternative is a third option in the children config, for example
children: { allow, min, keepEmpty: true }, which stops the repair from removing empty children.The side menu does not work well for blocks in a panel. The side menu shows to the left of a block. In a panel, it covers the chrome of the panel. This is the same problem as the side menu in columns. It was reported in this comment on #3059.
🤖 Generated with Claude Code