move autoshrink element creation from chat into own reusable component

Author: haschek

CHANGELOG.md

@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 -   `<ChatArea />`
     -   combine a list of chat contents and user input box
+-   `<ContentShrinker />`
+    -   displays all HTML content as only 1 ellipsed text line
 
 ## [24.4.1] - 2025-08-25
 

src/components/Chat/ChatContent.tsx

@@ -1,16 +1,15 @@
 import React from "react";
-import { renderToString } from "react-dom/server";
-import * as ReactIs from "react-is";
 
 import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
 import { IconButton } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
-import { HtmlContentBlock, OverflowText, OverflowTextProps } from "./../Typography";
+import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     /**
@@ -97,35 +96,6 @@ export const ChatContent = ({
     const content =
         markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
 
-    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
-        if (children instanceof Array) {
-            return children
-                .map((child: React.ReactNode) => {
-                    return onlyText(child);
-                })
-                .join(" ");
-        }
-
-        return React.Children.toArray(children)
-            .map((child) => {
-                if (ReactIs.isFragment(child)) {
-                    return onlyText(child.props?.children);
-                }
-                if (typeof child === "string") {
-                    return child;
-                }
-                if (typeof child === "number") {
-                    return child.toString();
-                }
-                if (ReactIs.isElement(child)) {
-                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
-                    return renderToString(<span>{child}</span>);
-                }
-                return "";
-            })
-            .join(" ");
-    };
-
     const chatitem = (
         <div
             className={
@@ -143,13 +113,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? (
-                <OverflowText passDown>
-                    <Markdown removeMarkup>{onlyText(content)}</Markdown>
-                </OverflowText>
-            ) : (
-                content
-            )}
+            {displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
         </div>
     );
 

src/components/ContentShrinker/ContentShrinker.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ContentShrinker, HtmlContentBlock } from "../../../index";
+
+export default {
+    title: "Components/ContentShrinker",
+    component: ContentShrinker,
+    argTypes: {},
+} as Meta<typeof ContentShrinker>;
+
+const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: (
+        <>
+            simple text child
+            <HtmlContentBlock>
+                <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+            </HtmlContentBlock>
+        </>
+    ),
+};

src/components/ContentShrinker/ContentShrinker.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Markdown } from "./../../cmem/markdown/Markdown";
+import { OverflowText, OverflowTextProps } from "./../Typography";
+
+export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
+
+/**
+ * Component to shrink HTML markup content to 1 single text line.
+ * Display is based on `OverflowText`.
+ */
+export const ContentShrinker = ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => {
+    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
+        if (children instanceof Array) {
+            return children
+                .map((child: React.ReactNode) => {
+                    return onlyText(child);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ");
+    };
+
+    return (
+        <OverflowText
+            className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
+            passDown
+            {...otherOverflowProps}
+        >
+            <Markdown removeMarkup inheritBlock>
+                {onlyText(children)}
+            </Markdown>
+        </OverflowText>
+    );
+};
+
+export default ContentShrinker;

src/components/index.ts

@@ -10,6 +10,7 @@ export * from "./Button/Button";
 export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
+export * from "./ContentShrinker/ContentShrinker";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";