@vixoniccom/news-internal 0.4.22 → 0.4.23-dev.0

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.4.22",
+  "version": "0.4.23-dev.0",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/components/FormattedHtmlText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useLayoutEffect, useRef, useState } from 'react'
 import { TextFormat } from '@vixoniccom/modules'
 import { parseFontName } from '../FontLoader'
 import DOMPurify from 'dompurify'
@@ -42,26 +42,53 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
   const font = format?.font
   const alignment = format?.alignment
   const fontColor = format?.fontColor
-  const fontSize = format?.fontSize
+  const fontSize = format?.fontSize || defaults.fontSize
+  const lineHeightPx = (props.lineHeight || 1.2) * fontSize
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [maxLines, setMaxLines] = useState<number | undefined>(undefined)
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container || !props.multiline) return
+
+    const updateMaxLines = () => {
+      const availableHeight = container.clientHeight
+      setMaxLines(Math.max(1, Math.floor(availableHeight / lineHeightPx)))
+    }
+
+    updateMaxLines()
+    const observer = new ResizeObserver(updateMaxLines)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [props.multiline, lineHeightPx])
+
   const containerStyle = {
     display: 'inline-flex',
     justifyContent: getHorizontalAlignment(alignment?.horizontal || defaults.alignment),
     ...props.style
   }
 
-  return <div style={containerStyle}>
+  return <div ref={containerRef} style={containerStyle}>
     <div style={{
       color: fontColor || defaults.fontColor,
       width: '100%',
       fontFamily: font?.filename && `"${parseFontName(font.filename)}"` || undefined,
-      fontSize: `${fontSize || defaults.fontSize}${props.unit}`,
+      fontSize: `${fontSize}${props.unit}`,
       textAlignLast: alignment?.horizontal || defaults.alignment,
       lineHeight: props.lineHeight,
       overflow: 'hidden',
-      whiteSpace: props.multiline ? 'pre-wrap' : 'nowrap'
+      whiteSpace: props.multiline ? 'pre-wrap' : 'nowrap',
+      textOverflow: props.multiline ? undefined : 'ellipsis'
     }}>
       <div className='ql-editor'
-        style={{ padding: 0, overflow: 'hidden', textAlign: alignment?.horizontal || defaults.alignment }}
+        style={{
+          padding: 0,
+          overflow: 'hidden',
+          textAlign: alignment?.horizontal || defaults.alignment,
+          ...(props.multiline && maxLines !== undefined
+            ? { display: '-webkit-box', WebkitBoxOrient: 'vertical', WebkitLineClamp: maxLines }
+            : undefined)
+        }}
         dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }}
       />
     </div>

package/src/components/TextContainer/index.tsx

@@ -16,19 +16,22 @@ export const TextContainer: React.FunctionComponent<Props> = (props) => {
     flexDirection: 'column',
     justifyContent: parameters.textAlignment || 'center',
     height: '100%',
-    flex: 1
+    flex: 1,
+    overflow: 'hidden'
   }}>
     {parameters.titleEnabled && <FormattedText text={item.title || ''} unit={'px'}
       format={parameters.titleFormat} lineHeight={parameters.titleLineHeight}
-      style={
-        (parameters.textSeparation && parameters.titleEnabled && parameters.descriptionEnabled)
+      style={{
+        flexShrink: 0,
+        ...(parameters.textSeparation && parameters.titleEnabled && parameters.descriptionEnabled
           ? { marginBottom: Number(parameters.textSeparation) }
-          : undefined
-      } multiline />
+          : undefined)
+      }} multiline />
     }
     {parameters.descriptionEnabled && <FormattedHtmlText html={item.description || ''} unit={'px'}
       format={parameters.descriptionFormat} lineHeight={parameters.descriptionLineHeight}
       defaults={{ fontSize: 10, fontColor: 'black', alignment: 'left' }}
+      style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}
       multiline />
     }
   </div>