{segment.slice(1, -1)};
}
return segment;
});
};
const renderInlineMarkup = (value, keyPrefix = 'subtitle') => {
if (typeof value !== 'string') {
return value;
}
return value.split(/(\*\*[\s\S]+?\*\*)/g).map((segment, index) => {
if (segment.startsWith('**') && segment.endsWith('**')) {
const inner = segment.slice(2, -2);
return
{renderInlineCode(inner, `${keyPrefix}-strong-${index}`)}
;
}
return renderInlineCode(segment, `${keyPrefix}-${index}`);
});
};
const renderContent = (value, keyPrefix) => {
if (Array.isArray(value)) {
return value.map((item, index) => renderContent(item, `${keyPrefix}-${index}`));
}
return renderInlineMarkup(value, keyPrefix);
};
const variants = {
default: {
fontSize: '1rem',
fontStyle: 'italic',
color: 'var(--lp-color-accent)',
marginBottom: 0
},
changelog: {
fontSize: '0.8rem',
fontStyle: 'normal',
fontWeight: 700,
color: 'var(--lp-color-text-primary)',
marginBottom: 0
}
};
const base = variants[variant] || variants.default;
return
{renderContent(text, 'text')}
{renderContent(children, 'children')}
;
};
export const ScrollBox = ({children, maxHeight = 300, showHint = true, ariaLabel = "Scrollable content", style = {}, className = "", ...rest}) => {
const contentRef = useRef(null);
const [isOverflowing, setIsOverflowing] = useState(false);
useEffect(() => {
const checkOverflow = () => {
if (contentRef.current) {
const maxHeightPx = typeof maxHeight === "number" ? maxHeight : parseInt(maxHeight, 10) || 300;
setIsOverflowing(contentRef.current.scrollHeight > maxHeightPx);
}
};
checkOverflow();
window.addEventListener("resize", checkOverflow);
return () => window.removeEventListener("resize", checkOverflow);
}, [maxHeight, children]);
return