fix(shared-notes): keep BlockNote table add-row handle inside the panel#25
Closed
imdt-claudiop wants to merge 6 commits into
Closed
Conversation
Add a proof-of-concept LaTeX math formula block to the BlockNote editor in Shared Notes. Users can type /latex to insert a formula block that renders using KaTeX. - New LatexBlock custom block spec using createReactBlockSpec - Edit mode: textarea for LaTeX input - Render mode: KaTeX-rendered formula display - Slash menu integration via SuggestionMenuController - Lightweight: uses katex (~300KB) for rendering Co-authored-by: leme.guilherme.p@gmail.com
The BlockNote formatting toolbar disappeared when editing a LaTeX custom block because the block is declared with content: 'none'. BlockNote's toolbar components (BasicTextStyleButton, BlockTypeSelect, ColorStyleButton, NestBlockButton, UnnestBlockButton, TextAlignSelect) return null when the active block has no inline content, causing the entire toolbar to vanish. Create custom wrapper components that render inert placeholders on content-less blocks, keeping the toolbar layout intact. Toggle actions are disabled (no-op) on blocks where they don't apply. Also adds an E2E test verifying the toolbar stays visible while editing a LaTeX block.
Adds a "chart" custom block to the Shared Notes BlockNote editor,
mirroring the existing LaTeX block. The chart JSON spec is stored as a
single string prop (BlockNote propSchema holds primitives only) and
parsed at render time by a pure, React-free validator that degrades
gracefully on malformed input instead of crashing the collaborative doc.
Renders pie and scatter charts with recharts (already a dependency, used
by the chat poll results). Wires a slash-menu item ("Chart", aliases
chart/pie/scatter/graph) and block CSS alongside the LaTeX block.
parseChartSpec is unit-tested (pie, scatter with required x/y and
optional label, missing/wrong-typed fields, empty data, malformed JSON,
unknown type) via the Node built-in test runner.
Co-Authored-By: Guilherme <leme.guilherme.p@gmail.com>
When a poll is published, akka broadcasts PollShowResultEvtMsg on the from-akka-apps-redis-channel that bbb-shared-notes-server already subscribes to. Handle it by appending a pie chart block (mirroring the html5 BlockNote chart block) to the meeting's Shared Notes pad. - handler: parse the SimplePollResultOutVO broadcast and build the pie data defensively (non-empty label fallback, finite value >= 0) so the html5 validator never silently drops slices. - notesSchema: a server-side ServerBlockNoteEditor whose schema mirrors the html5 editor (default blocks minus media, plus latex + chart), so existing blocks survive the read/append round-trip and the chart block's type/propSchema/content stay byte-for-byte identical to the client. - appendPollChart: append to the existing fragment (not the empty-pad seed path), and stay idempotent by keying the block on pollId embedded in the chart spec - a republished poll replaces its chart in place instead of stacking duplicates. Co-Authored-By: Guilherme <leme.guilherme.p@gmail.com>
…e panel The BlockNote editor in shared-notes uses a narrow panel (~260px). A table wider than the panel had its floating "add row" handle (.bn-extend-button- add-remove-rows, width:100% of the table) spill past the panel's right edge, making the handle overflow the editor and partly render off-screen. The upstream BlockNote fix (TypeCellOS/BlockNote#2729, released in 0.51.0) made the floating-handle portal target configurable and moved the default back into .bn-container. BBB already ships @blocknote 0.51.3, so the remaining overflow is a BBB-specific symptom: the panel is narrow, the default table is already wider than it, and .bn-editor's overflow-x is visible, so the full-width handle spills instead of being contained. Fix: scope a CSS clamp inside bn-shared-notes that limits the floating add-row/add-column handles to the editor's visible content width (max-width: calc(100cqw - 60px)) using a container query on .bn-container. The table itself stays fully scrollable via its own .tableWrapper (overflow-x: auto) -- only the handles are clamped, so columns remain reachable and the left add-block side menu is left untouched (never clipped). Configurable via public.sharedNotes.containTableControlsOverflow (default true) because the upstream fix is already released: an admin can disable this BBB override if a future @blocknote version makes it redundant or conflicting. Test: sharednotes/blocknote "Wide table controls stay inside the shared notes panel" asserts the table overflows its wrapper (precondition), the left side menu stays visible inside the panel, and the add-row handle's right edge does not exceed the editor's right edge. Fails before the fix (handle at 649px, ~150px past the 499px editor) and passes after (474px). Refs: TypeCellOS/BlockNote#2692, TypeCellOS/BlockNote#2729 Co-Authored-By: Guilherme Leme <leme.guilherme.p@gmail.com>
|
Thank you for this contribution! |
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
2 participants
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.
What is happening
The BigBlueButton shared-notes editor can run on BlockNote (the modern block-based editor) instead of the legacy Etherpad. When a meeting is created with
sharedNotesEditor=blockNote, users get a Notion-like editing experience with slash commands, custom blocks (LaTeX, charts), and tables.The shared-notes panel in BBB is intentionally narrow (~260px) so it behaves as a side panel alongside the presentation. BlockNote tables, however, default to a width that already exceeds this panel — and the floating "add row" handle that appears on hover (
+below the last row) is sized to the full table width (width: 100%). The result: on a wide table, that handle spills past the panel's right edge and renders partly off-screen, which is the bug reported upstream in TypeCellOS/BlockNote#2692.Why this happens (and why an upgrade doesn't fix it)
BlockNote's floating table handles used to portal to
document.body, which broke their positioning. The upstream fix (TypeCellOS/BlockNote#2729, released in@blocknote0.51.0) made the portal target configurable and moved the default back into.bn-container. BBB already ships@blocknote0.51.3, so that upstream fix is already present.The overflow that remains is BBB-specific: the panel is narrow, the default table is already wider than it, and
.bn-editorusesoverflow-x: visible, so the full-width handle spills instead of being contained. Upgrading@blocknotefurther does not address this — the cause lives in how the narrow panel interacts with the table handle sizing.The fix
A scoped CSS override inside the existing
bn-shared-notescomponent (the same component already injects a<style>block of.bn-*overrides, so this follows the established pattern):.bn-containeras a container (container-type: inline-size).max-width: calc(100cqw - 60px)(where100cqwis the.bn-containerinline size and60pxis the editor's horizontal padding,padding-inline: 35px 25px).Critically, only the floating handles are clamped:
.tableWrapper(overflow-x: auto) — every column remains reachable by scrolling, nothing is clipped..bn-side-menu, the+/drag handle on the left gutter of each block) is not touched, so it is never clipped. A naiveoverflow-x: hiddenon the container would clip both sides; this approach contains only the right-side overflow.Because the upstream BlockNote fix is already released, the BBB override is made configurable via
public.sharedNotes.containTableControlsOverflow(defaulttrue), mirroring the existingstaticFormattingToolbarflag. An admin can disable this override if a future@blocknoteversion makes it redundant or conflicting.Behavior
Before (flag off) — the add-row handle overflows the panel
Preview animated below — click the GIF to open the MP4 (higher quality, with controls):
The floating
+handle is pinned to the panel's right edge and overflows by ~150px (handle right edge at 649px vs editor right edge at 499px).After (flag on) — the handle stays inside the panel
Preview animated below — click the GIF to open the MP4 (higher quality, with controls):
The handle is clamped (right edge at 474px ≤ editor 499px), the table grid stays intact and scrollable, and the left add-block side menu remains fully visible.
Tests
New E2E test
sharednotes/blocknote→Wide table controls stay inside the shared notes panel(bigbluebutton-tests/playwright/sharednotes/blocknote/sharednotes.spec.ts):.bn-side-menu) stays inside the panel and is not clipped (non-zero width, left edge ≥ panel left, right edge ≤ panel right).Test evidence (geometry is the authoritative proof — the on-screen delta on the default table is modest, ~150px):
Full blocknote suite passes with the fix enabled (4/4: the new test, LaTeX toolbar visibility, export-empty-notes-as-PDF) — no regressions.
Files changed
bigbluebutton-html5/imports/ui/components/bn-shared-notes/component.tsx— flag read + scoped CSS clamp.bigbluebutton-html5/private/config/settings.yml— newpublic.sharedNotes.containTableControlsOverflowflag (defaulttrue).bigbluebutton-tests/playwright/sharednotes/blocknote/sharednotes.spec.ts— new test case.bigbluebutton-tests/playwright/sharednotes/blocknote/sharednotes.ts—tableControlsStayWithinPanelhelper + selectors.Notes / risks
60pxconstant incalc(100cqw - 60px)reflects the editor's current horizontal padding (padding-inline: 35px 25px). If that padding changes upstream, the clamp should be revisited — it is documented in a comment at the override site..bn-extend-button-add-remove-columnsselector is included for symmetry/defensive coverage; in@blocknote0.51.3 the column handle iswidth: 18pxso the clamp is inert there today, but it guards against a futurewidth: 100%regression on that handle.Refs: TypeCellOS/BlockNote#2692, TypeCellOS/BlockNote#2729
Co-Authored-By: Guilherme Leme leme.guilherme.p@gmail.com