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-${c.slug}-middle.png` + ); + }); + } +}); + +test.describe('EnrichedText ellipsize - recomputes on style change', () => { + type StyleChangeCase = EllipsizeCase & { override: OverrideKey }; + + const styleChangeCases: StyleChangeCase[] = [ + { + name: 'recomputes when the text style (fontSize, lineHeight) changes', + slug: 'style-fontsize', + override: 'style', + html: LOREM_IPSUM, + numberOfLines: 3, + }, + { + name: 'recomputes when the heading font sizes in htmlStyle change', + slug: 'htmlstyle-heading-fontsize', + override: 'headings', + html: `first line
A fairly long level four heading that wraps onto more lines
`, + numberOfLines: 2, + }, + { + name: 'recomputes when the ordered list marginLeft in htmlStyle changes', + slug: 'htmlstyle-ol-marginleft', + override: 'ol', + html: + `- first item that is reasonably long and wraps to a new line ` + + `
- second item also long enough to wrap onto another line ` + + `
- third item that is long enough to overflow the given lines
`, + numberOfLines: 3, + }, + ]; + + for (const c of styleChangeCases) { + test(c.name, async ({ page }) => { + await gotoTestEllipsize(page); + await setValue(page, c.html); + await setNumberOfLines(page, c.numberOfLines); + await setMode(page, 'tail'); + + await toggleOverride(page, c.override); + + await expect(displayLocator(page)).toHaveScreenshot( + `ellipsize-${c.slug}-recompute.png` + ); + }); + } +}); diff --git a/apps/example-web/src/App.tsx b/apps/example-web/src/App.tsx index 929d0dbea..b447699c8 100644 --- a/apps/example-web/src/App.tsx +++ b/apps/example-web/src/App.tsx @@ -234,7 +234,8 @@ function App() { ?.getHTML() .then((html) => { setEnrichedTextValue(html); - ref.current?.setValue(''); + // temporary for making the testing easier + // ref.current?.setValue(''); }) .catch((error: unknown) => { setEnrichedTextValue(''); diff --git a/apps/example-web/src/RouteSelector.tsx b/apps/example-web/src/RouteSelector.tsx index c31df8dd0..e40322d84 100644 --- a/apps/example-web/src/RouteSelector.tsx +++ b/apps/example-web/src/RouteSelector.tsx @@ -5,6 +5,7 @@ import { TestSetSelection } from './testScreens/TestSetSelection'; import { VisualRegression } from './testScreens/VisualRegression'; import { TestSubmitProps } from './testScreens/TestSubmitProps'; import { TestEnrichedText } from './testScreens/TestEnrichedText'; +import { TestEllipsize } from './testScreens/TestEllipsize'; import { useEffect, useState } from 'react'; export default function RouteSelector() { @@ -45,5 +46,9 @@ export default function RouteSelector() { returnthis is a pretty long blockquote - a different block style paragraph, long enough to overflow in the given number of lines.
+
+ );
+}
diff --git a/apps/example-web/src/components/TextRenderer.tsx b/apps/example-web/src/components/TextRenderer.tsx
index 552f16d6b..01b597efc 100644
--- a/apps/example-web/src/components/TextRenderer.tsx
+++ b/apps/example-web/src/components/TextRenderer.tsx
@@ -1,5 +1,5 @@
-import { useRef } from 'react';
-import type { TextStyle } from 'react-native';
+import { useRef, useState } from 'react';
+import type { TextProps, TextStyle } from 'react-native';
import {
EnrichedText,
type BlurEvent,
@@ -9,6 +9,7 @@ import {
type OnMentionPressEvent,
} from 'react-native-enriched-html';
import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
+import { EnrichedTextActions } from './EnrichedTextActions';
interface TextRendererProps {
htmlValue: string;
@@ -17,6 +18,10 @@ interface TextRendererProps {
export function TextRenderer({ htmlValue }: TextRendererProps) {
const ref = useRef
+ {ELLIPSIZE_MODES.map((mode) => (
+
+ ))}
+
+
+ {LINE_OPTIONS.map((lines) => (
+
+ ))}
+
+
-
-
-
);
}
diff --git a/apps/example-web/src/testScreens/TestEllipsize.tsx b/apps/example-web/src/testScreens/TestEllipsize.tsx
new file mode 100644
index 000000000..43949bcc6
--- /dev/null
+++ b/apps/example-web/src/testScreens/TestEllipsize.tsx
@@ -0,0 +1,199 @@
+import { useMemo, useState, type ChangeEvent } from 'react';
+import {
+ EnrichedText,
+ type EnrichedTextProps,
+ type HtmlStyle,
+} from 'react-native-enriched-html';
+import type { TextStyle } from 'react-native';
+import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
+
+type EllipsizeMode = NonNullable
+
+
+ {value}
+
+
+
+
+
+ ) => {
+ setNumberOfLines(Number(e.target.value));
+ }}
+ />
+
+
+
+ {ELLIPSIZE_MODES.map((mode) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+