hello that is a paragraph that should fit and require no ellipsis
`, + numberOfLines: 2, + }, + { + name: 'single word wrapping to multiple lines', + slug: 'single-word', + html: + `Verylongpieceoftextfitintoonelinesowecancheckthiscasewherethereis` + + `averylongpieceoftextanditwrapsaroundsomenumberoflinesandthatwillbetruncated` + + `accordinglytothesetellipsizemodeintheenrichedtextcomponent
`, + numberOfLines: 2, + }, + { + name: 'a long word that causes line wrapping', + slug: 'one-word-wrapping', + html: + `Some paragraph with a long word that will not fit and wrap.` + + ` The long word: Konstantynopolitanczykowianeczka
`, + numberOfLines: 2, + }, + { + name: 'paragraph with a number of lines much greater than the given limit', + slug: 'very-long-paragraph', + html: LOREM_IPSUM, + numberOfLines: 2, + }, + { + name: 'a number of paragraphs much greater than the given limit', + slug: 'multiple-short-paragraphs', + html: `first
second
third
fourth
fifth
sixth
seventh
`, + numberOfLines: 4, + }, + { + name: 'a number of paragraphs much greater than the given limit and the last one overflows', + slug: 'multiple-short-paragraphs-with-last-overflow', + html: `first
second
third
fourth
fifth
sixth
seventh line that will be long enough that it overflows to the next 8th line
`, + numberOfLines: 4, + }, + { + name: 'some text between empty paragraphs', + slug: 'between-empty-paragraphs', + html: `between empty paragraphs
`, + numberOfLines: 2, + }, + { + name: 'some text between multiple empty lines', + slug: 'between-multiple-empty-lines', + html: `
between empty paragraphs
`, + numberOfLines: 2, + }, + { + name: 'some empty paragraphs in the middle', + slug: 'empty-in-the-middle', + html: `
first line
last line
`, + numberOfLines: 2, + }, + { + name: 'unordered list', + slug: 'unordered-list', + html: `- first
- second
- third
- second
- fourth
- first
- second
- third
- second
- fourth
- first
- second
- third
- second
- fourth
`, + numberOfLines: 2, + }, + { + name: 'different paragraph style with an empty line', + slug: 'different-paragraph-style-with-empty-line', + html: `this is a pretty long blockquote - a different block style paragraph, long enough to overflow in the given number of lines.
`, + numberOfLines: 2, + }, + { + name: 'mixing different paragraph styles', + slug: 'paragraph-styles-mix', + html: `this is a pretty short blockquote.
This is a line after an empty line.
This is a normal paragraph.
This is a codeblock that will be long enough to overflow.
This is a line with an inline image.` +
+ `
This is a second line and the inline image ` +
+ `will make it overflow to the next line.
This is the last line with an inline image.
This is a fairly long paragraph that should wrap` + + ` across three lines so the truncation has something to chew on.
`, + numberOfLines: 2, + }, + { + name: 'all text within one paragraph, but with at least two lines exceeding the limit', + slug: 'one-paragraph-many-lines-overflowing', + html: + `This is a fairly long paragraph that should wrap across four lines so the` + + ` truncation has something to chew on. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
`, + numberOfLines: 2, + }, + { + name: 'all text within one paragraph but with multiple inline images', + slug: 'one-paragraph-many-inline-images', + html: + `Some paragraph text overflowing but with some inline images
insi
de the eaten text and before, after dummytext the rendered
ellipsis
first paragraph.
Different paragraph style that will overflow to the next line
`, + numberOfLines: 2, + }, + { + name: 'different paragraph style with many lines', + slug: 'different-paragraph-style-multiple-lines', + html: + `first paragraph.
Different paragraph style and the text ` + + `that will overflow to the next lines of that block verylongwordthatwillnotfitinthelineandwilloverflow
Normal style.
`, + numberOfLines: 5, + }, + { + name: 'empty lines are preserved', + slug: 'empty-lines', + html: `First line before empty ones.
Last ` + + `paragraph inside a block style that will overflow to three different lines, so we can check this case.
first line
last line that will overflow and will have an ellipsis
`, + numberOfLines: 4, + }, + // tests checking a proper fallback to the head ellipsis + { + name: 'when the overflowing lines are different blocks, it fallbacks to head ellipsis', + slug: 'different-blocks-head-fallback', + html: `first line
second line
third line
`, + numberOfLines: 2, + }, + { + name: 'breaklines inside a block style are considered as different paragraphs', + slug: 'breaklines-head-fallback', + html: ``, + numberOfLines: 2, + }, + ]; + + for (const c of middleEllipsizeCases) { + test(c.name, async ({ page }) => { + await gotoTestEllipsize(page); + await setValue(page, c.html); + await setNumberOfLines(page, c.numberOfLines); + await setMode(page, 'middle'); + + await expect(displayLocator(page)).toHaveScreenshot( + `ellipsize-middle-${c.slug}.png` + ); + }); + } +}); diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx index 8fa6e035..05e6ed04 100644 --- a/apps/example-web/src/App.tsx +++ b/apps/example-web/src/App.tsx @@ -236,7 +236,8 @@ function App() { ?.getHTML() .then((html) => { setEnrichedTextValue(html); - ref.current?.setValue(''); + // temporary for making the testing easier + // ref.current?.setValue(''); }) .catch((error: unknown) => { setEnrichedTextValue(''); @@ -334,6 +335,15 @@ function App() {first line
Enriched Text
+
+
+
+ {value}
+
+
+
+
+
+ ) => {
+ setNumberOfLines(Number(e.target.value));
+ }}
+ />
+
+
+
+ {ELLIPSIZE_MODES.map((mode) => (
+
+ ))}
+
+
+