Skip to content

Embed table wrapper#551

Merged
zoltanhosszu merged 10 commits intomainfrom
embed-table-wrapper
Jan 9, 2026
Merged

Embed table wrapper#551
zoltanhosszu merged 10 commits intomainfrom
embed-table-wrapper

Conversation

@zoltanhosszu
Copy link
Contributor

@zoltanhosszu zoltanhosszu commented Jan 9, 2026

Tables are weird creatures of HTML. No matter how you force them to have a max-width of 100%, if their content is larger, they flow out of their container. So adding a wrapper element around them with overflow-x: auto allows us to limit this to a scrollable container.

We can easily wrap them in a container inside the editor with setScrollableTablesActive(this.editor, true), but that doesn't change the output.

Previously we didn't include a wrapper around the tables to leave it for the rendering to handle it, but decided with @samuelpecher that we probably should, to ease the use of pure Lexxy outputs.

With this PR tables are now getting wrapped within a <figure class="lexxy-content__table-wrapper"> element.

This allow the output of very large tables to be scrollable instead of extending their view.
Copy link
Collaborator

@samuelpecher samuelpecher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. Lexical solution for Lexical issues.

I like that this prevents the issue down-stream. If users don't like it it's simple to pop the table out of its wrapper.

As a comment to future me: this would be nicely collapsed into a Lexical extension

find_editor.toggle_command("insertTable")

html = find_editor.value
assert_match(/<figure[^>]*class=["'][^"']*lexxy-content__table-wrapper[^"']*["'][^>]*>\s*<table>.*?<\/table>\s*<\/figure>/m, html, "Table should be wrapped in figure.lexxy-content__table-wrapper")
Copy link
Collaborator

@samuelpecher samuelpecher Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can use Rails' selectors

    assert_select "figure.lexxy-content__table-wrapper > table, "Table should..."

edit for posterity: No you can't since it's not a Capybara::Node. Yet.

Copy link
Member

@jorgemanrubia jorgemanrubia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@zoltanhosszu zoltanhosszu merged commit c9ca2e7 into main Jan 9, 2026
5 checks passed
@zoltanhosszu zoltanhosszu deleted the embed-table-wrapper branch January 9, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants