use MArkdown cutOff to improve preview when MArkdown is allowed

Author: haschek

src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { utils } from "../../common";
 import InlineText from "../../components/Typography/InlineText";
-import { Markdown } from "../markdown/Markdown";
+import { Markdown, markdownAllowedInlineElements } from "../markdown/Markdown";
 
 import { ContentBlobToggler, ContentBlobTogglerProps } from "./ContentBlobToggler";
 
@@ -57,7 +57,7 @@ export function StringPreviewContentBlobToggler({
     startExtended,
     useOnly,
     renderPreviewAsMarkdown = false,
-    allowedHtmlElementsInPreview,
+    allowedHtmlElementsInPreview = markdownAllowedInlineElements,
     noTogglerContentSuffix,
     firstNonEmptyLineOnly,
     ...otherContentBlobTogglerProps
@@ -90,7 +90,18 @@ export function StringPreviewContentBlobToggler({
         previewMaxLength &&
         utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
     ) {
-        previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+        previewContent = renderPreviewAsMarkdown ? (
+            <Markdown
+                key="markdown-content"
+                allowedElements={allowedHtmlElementsInPreview}
+                cutOff={previewMaxLength}
+                cutOffSuffix={""}
+            >
+                {previewString}
+            </Markdown>
+        ) : (
+            utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength)
+        );
         enableToggler = true;
     }
 

src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx

@@ -14,7 +14,7 @@ const Template: StoryFn<typeof StringPreviewContentBlobToggler> = (args) => (
 );
 
 const initialTeststring =
-    "A library for GUI elements.\nIn order to create graphical user interfaces, please have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
+    "# A library for [GUI elements](https://github.com/eccenca/gui-elements).\nIn order to create graphical user interfaces, please\n* have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
 
 export const Default = Template.bind({});
 Default.args = {