fix(RichTextEditor, ScrollArea): wrap long words and URLs instead of scrolling horizontally #2781
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| "@frontify/fondue-rte": patch | ||
| --- | ||
|
|
||
| fix(RichTextEditor): wrap long words and URLs instead of scrolling horizontally | ||
|
|
||
| Long unbreakable strings (URLs, long words) in rich text no longer force a sideways scroll. Paragraphs and list items — while editing and in the serialized rendition — use `overflow-wrap: anywhere`, which lowers the reported min-content width so the text wraps even inside a shrink-wrapping container (such as a `ScrollArea` viewport). Genuinely wide, unshrinkable content (fixed-width media, `nowrap`) still scrolls horizontally. |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* (c) Copyright Frontify Ltd., all rights reserved. */ | ||
|
|
||
| import { ScrollArea } from '@frontify/fondue-components'; | ||
| import { type Meta, type StoryFn } from '@storybook/react-vite'; | ||
| import { ELEMENT_LI, ELEMENT_LIC, ELEMENT_UL } from '@udecode/plate-list'; | ||
| import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; | ||
| import { type CSSProperties, type ReactNode } from 'react'; | ||
|
|
||
| import { | ||
| OrderedListPlugin, | ||
| ParagraphPlugin, | ||
| PluginComposer, | ||
| SoftBreakPlugin, | ||
| TextStylePlugin, | ||
| UnorderedListPlugin, | ||
| } from './Plugins'; | ||
| import { RichTextEditor } from './RichTextEditor'; | ||
|
|
||
| const LONG_URL = `https://example.com/some/really/long/path/${'segment'.repeat(20)}?token=${'x'.repeat(80)}`; | ||
| const LONG_WORD = 'a'.repeat(120); | ||
|
|
||
| const plugins = new PluginComposer() | ||
| .setPlugin(new SoftBreakPlugin()) | ||
| .setPlugin(new TextStylePlugin({ textStyles: [new ParagraphPlugin()] })) | ||
| .setPlugin([new UnorderedListPlugin(), new OrderedListPlugin()]); | ||
|
|
||
| const value = JSON.stringify([ | ||
| { type: ELEMENT_PARAGRAPH, children: [{ text: `Paragraph with a long URL: ${LONG_URL}` }] }, | ||
| { | ||
| type: ELEMENT_UL, | ||
| children: [ | ||
| { type: ELEMENT_LI, children: [{ type: ELEMENT_LIC, children: [{ text: `List item, long word: ${LONG_WORD}` }] }] }, | ||
| { type: ELEMENT_LI, children: [{ type: ELEMENT_LIC, children: [{ text: `List item, long URL: ${LONG_URL}` }] }] }, | ||
| ], | ||
| }, | ||
| ]); | ||
|
|
||
| const Editor = () => <RichTextEditor border={false} plugins={plugins} value={value} />; | ||
|
|
||
| const Resizable = ({ label, children }: { label: string; children: ReactNode }) => ( | ||
| <div style={{ marginBottom: 32 }}> | ||
| <p style={{ marginBottom: 8, fontFamily: 'sans-serif', fontSize: 13, color: '#555' }}> | ||
| {label} — drag the bottom-right corner to resize the width. | ||
| </p> | ||
| <div | ||
| style={{ | ||
| resize: 'horizontal', | ||
| overflow: 'auto', | ||
| width: 360, | ||
| minWidth: 120, | ||
| maxWidth: '100%', | ||
| border: '1px solid #d1d1d1', | ||
| borderRadius: 4, | ||
| padding: 8, | ||
| }} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| // Radix ScrollArea's viewport wraps its content in `display: table; min-width: 100%`, which | ||
| // shrink-wraps to the widest token — the context in which the overflow bug appears. | ||
| const SHRINK_WRAP_CONTEXT: CSSProperties = { display: 'table', minWidth: '100%' }; | ||
|
|
||
| const Template: StoryFn = () => ( | ||
| <div style={{ maxWidth: 680 }}> | ||
| <Resizable label="Shrink-wrapping context (reproduces the bug — mirrors Radix ScrollArea's viewport)"> | ||
| <div style={SHRINK_WRAP_CONTEXT}> | ||
| <Editor /> | ||
| </div> | ||
| </Resizable> | ||
|
|
||
| <Resizable label="Real Fondue ScrollArea"> | ||
| <ScrollArea maxHeight="200px"> | ||
| <Editor /> | ||
| </ScrollArea> | ||
| </Resizable> | ||
|
|
||
| <Resizable label="Plain block (baseline — always wraps)"> | ||
| <Editor /> | ||
| </Resizable> | ||
| </div> | ||
| ); | ||
|
|
||
| export default { | ||
| title: 'Legacy Components/Rich Text Editor/Long Content Wrapping', | ||
| component: RichTextEditor, | ||
| } as Meta; | ||
|
|
||
| export const LongUnbreakableContent = Template.bind({}); |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /* (c) Copyright Frontify Ltd., all rights reserved. */ | ||
|
|
||
| import { ELEMENT_LI, ELEMENT_LIC, ELEMENT_UL } from '@udecode/plate-list'; | ||
| import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; | ||
| import { type CSSProperties, type ReactElement } from 'react'; | ||
|
|
||
| import { OrderedListPlugin, PluginComposer, UnorderedListPlugin } from '../Plugins'; | ||
| import { RichTextEditor } from '../RichTextEditor'; | ||
| import { serializeRawToHtml } from '../serializer'; | ||
|
|
||
| const CONTAINER_WIDTH = 240; | ||
| const LONG_UNBREAKABLE_TOKEN = `https://example.com/${'a'.repeat(160)}`; | ||
| const SCROLL_CONTAINER_TEST_ID = 'wrap-scroll-container'; | ||
|
|
||
| const listPlugins = new PluginComposer().setPlugin([new UnorderedListPlugin(), new OrderedListPlugin()]); | ||
|
|
||
| // Mirrors Radix ScrollArea's viewport wrapper (`display: table; min-width: 100%`): it shrink-wraps to | ||
| // the widest token, the context where `overflow-wrap: break-word` fails to wrap and only `anywhere` | ||
| // (which lowers the reported min-content width) does. | ||
| const RADIX_VIEWPORT_CONTENT: CSSProperties = { display: 'table', minWidth: '100%' }; | ||
|
|
||
| const InShrinkWrappingScrollContainer = ({ children }: { children: ReactElement }) => ( | ||
| <div data-test-id={SCROLL_CONTAINER_TEST_ID} style={{ width: CONTAINER_WIDTH, overflow: 'auto' }}> | ||
| <div style={RADIX_VIEWPORT_CONTENT}>{children}</div> | ||
| </div> | ||
| ); | ||
|
|
||
| const paragraphValue = JSON.stringify([{ type: ELEMENT_PARAGRAPH, children: [{ text: LONG_UNBREAKABLE_TOKEN }] }]); | ||
|
|
||
| const unorderedListValue = JSON.stringify([ | ||
| { | ||
| type: ELEMENT_UL, | ||
| children: [{ type: ELEMENT_LI, children: [{ type: ELEMENT_LIC, children: [{ text: LONG_UNBREAKABLE_TOKEN }] }] }], | ||
| }, | ||
| ]); | ||
|
|
||
| const expectNoHorizontalOverflow = () => { | ||
| cy.get(`[data-test-id=${SCROLL_CONTAINER_TEST_ID}]`).should('contain.text', 'https://example.com/'); | ||
| cy.get(`[data-test-id=${SCROLL_CONTAINER_TEST_ID}]`).should(($container) => { | ||
| const { scrollWidth, clientWidth } = $container[0]; | ||
| expect( | ||
| scrollWidth, | ||
| `content width (${scrollWidth}px) stays within its container (${clientWidth}px) — the long token wrapped instead of forcing a horizontal scrollbar`, | ||
| ).to.be.at.most(clientWidth + 1); | ||
| }); | ||
| }; | ||
|
|
||
| describe('RichTextEditor wraps long unbreakable content in a shrink-wrapping container', () => { | ||
| it('wraps a long token while editing a paragraph', () => { | ||
|
Contributor
Author
There was a problem hiding this comment. Do we also have the |
||
| cy.mount( | ||
| <InShrinkWrappingScrollContainer> | ||
| <RichTextEditor border={false} value={paragraphValue} /> | ||
| </InShrinkWrappingScrollContainer>, | ||
| ); | ||
|
|
||
| expectNoHorizontalOverflow(); | ||
| }); | ||
|
|
||
| it('wraps a long token while editing a list item', () => { | ||
| cy.mount( | ||
| <InShrinkWrappingScrollContainer> | ||
| <RichTextEditor border={false} plugins={listPlugins} value={unorderedListValue} /> | ||
| </InShrinkWrappingScrollContainer>, | ||
| ); | ||
|
|
||
| expectNoHorizontalOverflow(); | ||
| }); | ||
|
|
||
| it('wraps a long token in the serialized (posted) list item', () => { | ||
| const html = serializeRawToHtml(unorderedListValue, listPlugins); | ||
|
|
||
| cy.mount( | ||
| <InShrinkWrappingScrollContainer> | ||
| {/* serializer output of a fixed test string — no untrusted input */} | ||
| {/* eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml */} | ||
| <div dangerouslySetInnerHTML={{ __html: html }} /> | ||
| </InShrinkWrappingScrollContainer>, | ||
| ); | ||
|
|
||
| expectNoHorizontalOverflow(); | ||
| }); | ||
| }); | ||
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
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
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
break-worddoesn't affect the reported min-content width of the text element, it only wraps the text visually, therefore causing the width to still grow.overflow-wrap: anywherealso lowers the reported min width, but might have other implications that need to be checkedThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought so too, but I couldn't test it manually. How can we test this manually? Maybe it's right somehow as the tests seem to be correct – but I don't believe them in this case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I could now test it manually and fixed it. You were right (unsurprisingly). The
overflow-wrap: anywhereseems to fix it. See the updated description for the fix.