@eccenca/gui-elements 25.0.0 → 25.1.0-rc.0

package/dist/types/components/Application/ApplicationViewability.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+type media = "print" | "screen";
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{
+        className?: string;
+    }>;
+}
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided & (ApplicationViewabilityShow | ApplicationViewabilityHide);
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export declare const ApplicationViewability: ({ children, show, hide }: ApplicationViewabilityProps) => React.ReactElement<{
+    className?: string;
+}, string | React.JSXElementConstructor<any>>;
+export default ApplicationViewability;

package/dist/types/components/Application/index.d.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";

package/dist/types/components/Icon/IconButton.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { ButtonProps } from "../Button/Button";
+import { TestableComponent } from "../interfaces";
 import { ValidIconName } from "./canonicalIconNames";
 import { TestIconProps } from "./TestIcon";
-import { TestableComponent } from "../interfaces";
 interface ExtendedButtonProps extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.

package/dist/types/components/Structure/TitleSubsection.d.ts

@@ -132,7 +132,7 @@ export declare const TitleSubsection: ({ children, className, useHtmlElement, ..
     onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
     onChange?: React.FormEventHandler<HTMLElement> | undefined;
     onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
     onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
     onInput?: React.FormEventHandler<HTMLElement> | undefined;
     onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;

package/dist/types/components/Tabs/Tab.d.ts

@@ -154,7 +154,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
     onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
@@ -432,7 +432,7 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
     onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;

package/dist/types/components/Typography/InlineText.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { TestableComponent } from "../interfaces";
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export declare const InlineText: ({ className, children, ...otherProps }: InlineTextProps) => React.JSX.Element;
+export default InlineText;

package/dist/types/components/Typography/index.d.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/dist/types/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.d.ts

@@ -1,10 +1,10 @@
+import { html } from "@codemirror/lang-html";
 import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
 import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
 import { yaml } from "@codemirror/lang-yaml";
-import { html } from "@codemirror/lang-html";
 import { StreamParser } from "@codemirror/language";
 declare const supportedModes: {
     readonly markdown: typeof markdown;

package/dist/types/extensions/codemirror/tests/codemirrorTestHelper.d.ts

@@ -5,7 +5,7 @@
  *              'EditorView is not a constructor'
  * This errors do not exist during compilation only during testing.
  */
-import { Extension, Compartment } from "@codemirror/state";
+import { Compartment, Extension } from "@codemirror/state";
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export declare const adaptedPlaceholder: (text?: string) => Extension;
 /** current error '_view.Editor is not a constructor' */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "25.0.0",
+    "version": "25.1.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,29 +68,29 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.8",
-        "@blueprintjs/core": "^5.18.0",
-        "@blueprintjs/select": "^5.3.19",
-        "@carbon/icons": "^11.58.0",
-        "@carbon/react": "^1.80.1",
-        "@codemirror/lang-html": "^6.4.9",
-        "@codemirror/lang-javascript": "^6.2.3",
-        "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-markdown": "^6.3.2",
-        "@codemirror/lang-sql": "^6.8.0",
+        "@blueprintjs/colors": "^5.1.11",
+        "@blueprintjs/core": "^5.19.1",
+        "@blueprintjs/select": "^5.3.21",
+        "@carbon/icons": "^11.70.0",
+        "@carbon/react": "^1.96.0",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/lang-sql": "^6.10.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/legacy-modes": "^6.5.0",
+        "@codemirror/legacy-modes": "^6.5.2",
         "@mavrin/remark-typograf": "^2.2.0",
-        "@xyflow/react": "^12.6.0",
+        "@xyflow/react": "^12.9.3",
         "classnames": "^2.5.1",
-        "codemirror": "^6.0.1",
+        "codemirror": "^6.0.2",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.1",
         "he": "^1.2.0",
         "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "n3": "^1.25.1",
+        "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.14.0",
@@ -98,7 +98,7 @@
         "react-inlinesvg": "^3.0.3",
         "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^15.6.1",
+        "react-syntax-highlighter": "^15.6.6",
         "rehype-external-links": "^3.0.0",
         "rehype-raw": "^7.0.0",
         "remark-definition-list": "^2.0.0",
@@ -107,55 +107,54 @@
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.5"
+        "xml-formatter": "^3.6.7"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.10",
-        "@babel/plugin-transform-class-properties": "^7.25.9",
-        "@babel/plugin-transform-private-methods": "^7.25.9",
-        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
-        "@babel/preset-env": "^7.26.9",
-        "@babel/preset-flow": "^7.25.9",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.27.0",
-        "@eslint/compat": "^1.2.8",
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-class-properties": "^7.27.1",
+        "@babel/plugin-transform-private-methods": "^7.27.1",
+        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-flow": "^7.27.1",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@eslint/compat": "^1.4.1",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "^9.24.0",
-        "@storybook/addon-actions": "^8.6.12",
-        "@storybook/addon-essentials": "^8.6.12",
-        "@storybook/addon-jest": "^8.6.12",
-        "@storybook/addon-links": "^8.6.12",
+        "@eslint/js": "^9.39.1",
+        "@storybook/addon-actions": "^8.6.14",
+        "@storybook/addon-essentials": "^8.6.14",
+        "@storybook/addon-jest": "^8.6.14",
+        "@storybook/addon-links": "^8.6.14",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-        "@storybook/cli": "^8.6.12",
+        "@storybook/cli": "^8.6.14",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.6.12",
-        "@storybook/react-webpack5": "^8.6.12",
-        "@storybook/test": "^8.6.12",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@storybook/react": "^8.6.14",
+        "@storybook/react-webpack5": "^8.6.14",
+        "@storybook/test": "^8.6.14",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^12.1.5",
-        "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/he": "^1.2.3",
-        "@types/jest": "^29.5.14",
+        "@types/jest": "^30.0.0",
         "@types/jshint": "^2.12.4",
-        "@types/lodash": "^4.17.16",
-        "@types/n3": "^1.24.2",
-        "@types/react-is": "^19.0.0",
+        "@types/lodash": "^4.17.21",
+        "@types/n3": "^1.26.1",
+        "@types/react-is": "^19.2.0",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.30.1",
-        "@typescript-eslint/parser": "^8.30.1",
-        "babel-jest": "^29.7.0",
-        "chromatic": "^11.28.0",
-        "eslint": "^9.24.0",
+        "@typescript-eslint/eslint-plugin": "^8.47.0",
+        "@typescript-eslint/parser": "^8.47.0",
+        "babel-jest": "^30.2.0",
+        "chromatic": "^13.3.4",
+        "eslint": "^9.39.1",
         "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^30.2.0",
         "jest-environment-jsdom": "^30.2.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.5.1",
+        "lint-staged": "^15.5.2",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -165,7 +164,7 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.6.12",
+        "storybook": "^8.6.14",
         "stylelint": "^16.18.0",
         "stylelint-config-recess-order": "^6.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
@@ -180,8 +179,8 @@
         "react": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "**/@types/react": "^17.0.90",
+        "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
         "hast-util-from-parse5": "8.0.0"

package/src/cmem/ActivityControl/SilkActivityControl.tsx

@@ -196,7 +196,7 @@ export function useSilkActivityControl({
             registerForUpdates(updateActivityStatus);
             return unregisterFromUpdates;
         },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+         
         []
     );
 

package/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx

@@ -58,7 +58,7 @@ export function ContentBlobToggler({
                     {previewContent}
                     {enableToggler && (
                         <>
-                            &hellip;{" "}
+                            {" "}&hellip;{" "}
                             <Link
                                 href="#more"
                                 data-test-id={"content-blob-toggler-more-link"}

package/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx

@@ -1,30 +1,46 @@
 import React from "react";
 
-import { ContentBlobToggler, ContentBlobTogglerProps, Markdown } from "./..";
+import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index";
 
 export interface StringPreviewContentBlobTogglerProps
     extends Omit<ContentBlobTogglerProps, "previewContent" | "enableToggler"> {
     /**
-     The preview content will be cut to this length if it is too long.
+     * The preview content will be cut to this length if it is too long.
      */
     previewMaxLength?: number;
     /**
-     The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+     * The content string.
+     * If it is smaller than `previewMaxLength` this will be displayed in full, else `fullviewContent` will be displayed.
      */
     content: string;
-    /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
-    firstNonEmptyLineOnly?: boolean;
-    /** If enabled the preview is rendered as markdown. */
+    /**
+     * Use only parts of `content` in the preview.
+     * `firstMarkdownSection` uses the content until the first double line return.
+     * Currently overwritten by `firstNonEmptyLineOnly`.
+     */
+    useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
+    /**
+     * If enabled the preview is rendered as Markdown.
+     */
     renderPreviewAsMarkdown?: boolean;
-    /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+    /**
+     * White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled.
+     */
     allowedHtmlElementsInPreview?: string[];
-    /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+    /**
+     * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
      * This allows to add non-string elements to both the full-view content and the pure string content.
      */
     noTogglerContentSuffix?: JSX.Element;
+    /**
+     * If only the first non-empty line should be shown in the preview.
+     * This will in addition also be shortened according to `previewMaxLength`.
+     * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
+     */
+    firstNonEmptyLineOnly?: boolean;
 }
 
-/** Version of the content toggler for text only content. */
+/** Version of the content toggler for text centric content. */
 export function StringPreviewContentBlobToggler({
     className = "",
     previewMaxLength,
@@ -33,14 +49,28 @@ export function StringPreviewContentBlobToggler({
     content,
     fullviewContent,
     startExtended,
-    firstNonEmptyLineOnly,
+    useOnly,
     renderPreviewAsMarkdown = false,
     allowedHtmlElementsInPreview,
     noTogglerContentSuffix,
+    firstNonEmptyLineOnly,
 }: StringPreviewContentBlobTogglerProps) {
-    const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
-    const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
-    const enableToggler = previewString !== content;
+    // need to test `firstNonEmptyLineOnly` until property is removed
+    const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
+        ? "firstNonEmptyLine"
+        : useOnly;
+
+    let previewString = content;
+    switch (useOnlyTest) {
+        case "firstNonEmptyLine":
+            previewString = useOnlyPart(content, regexFirstNonEmptyLine);
+            break;
+        case "firstMarkdownSection":
+            previewString = useOnlyPart(content, regexFirstMarkdownSection);
+    }
+
+    let enableToggler = previewString !== content;
+
     let previewContent = renderPreviewAsMarkdown ? (
         <Markdown key="markdown-content" allowedElements={allowedHtmlElementsInPreview}>
             {previewString}
@@ -48,6 +78,15 @@ export function StringPreviewContentBlobToggler({
     ) : (
         previewString
     );
+
+    if (
+        previewMaxLength &&
+        utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
+    ) {
+        previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+        enableToggler = true;
+    }
+
     if (!enableToggler && noTogglerContentSuffix) {
         previewContent = (
             <>
@@ -60,7 +99,7 @@ export function StringPreviewContentBlobToggler({
     return (
         <ContentBlobToggler
             className={className}
-            previewContent={previewContent}
+            previewContent={<InlineText>{previewContent}</InlineText>}
             toggleExtendText={toggleExtendText}
             toggleReduceText={toggleReduceText}
             fullviewContent={fullviewContent}
@@ -70,17 +109,26 @@ export function StringPreviewContentBlobToggler({
     );
 }
 
-const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstNonEmptyLine = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstMarkdownSection = new RegExp("\r\n\r\n|\n\n"); // eslint-disable-line
 
 /**
  * Takes the first non-empty line from a preview string.
  */
 function firstNonEmptyLine(preview: string) {
+    return useOnlyPart(preview, regexFirstNonEmptyLine);
+}
+
+/**
+ * Returns only the first part from a preview string.
+ * Or the full string as fallback.
+ */
+function useOnlyPart(preview: string, regexTest: RegExp): string {
     const previewString = preview.trim();
-    const result = newLineRegex.exec(previewString);
-    return result !== null ? previewString.substr(0, result.index) : previewString;
+    const result = regexTest.exec(previewString);
+    return result !== null ? result.input.slice(0, result.index) : previewString;
 }
 
 export const stringPreviewContentBlobTogglerUtils = {
     firstNonEmptyLine,
-};
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Markdown, StringPreviewContentBlobToggler } from "../../../index";
+
+const config = {
+    title: "CMEM/ContentBlobToggler/StringPreview",
+    component: StringPreviewContentBlobToggler,
+} as Meta<typeof StringPreviewContentBlobToggler>;
+export default config;
+
+const Template: StoryFn<typeof StringPreviewContentBlobToggler> = (args) => (
+    <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).";
+
+export const Default = Template.bind({});
+Default.args = {
+    content: initialTeststring,
+    fullviewContent: <Markdown htmlContentBlockProps={{ large: true }}>{initialTeststring}</Markdown>,
+    previewMaxLength: 64,
+    renderPreviewAsMarkdown: true,
+    toggleExtendText: "show more",
+    toggleReduceText: "show less",
+};

package/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import {
+    StringPreviewContentBlobToggler,
+    StringPreviewContentBlobTogglerProps,
+} from "../StringPreviewContentBlobToggler";
+
+import { Default as StringPreviewContentBlobTogglerStory } from "./../stories/StringPreviewContentBlobToggler.stories";
+
+describe("StringPreviewContentBlobToggler", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should cut preview and show toggler to extend", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show more");
+    });
+    it("should display full view if `startExtended` is enabled, and show toggler to reduce", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                startExtended
+            />
+        );
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "show less");
+    });
+    it('should display only first content line on `useOnly={"firstNonEmptyLine"}`', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstNonEmptyLine"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustNotExist(queryByText, "In order to create");
+    });
+    it('should use first Markdown paragraph as preview content on `useOnly={"firstMarkdownSection"}` but shorten it', () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                useOnly={"firstMarkdownSection"}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(queryByText, "In order to create");
+        textMustNotExist(queryByText, "please have look at the documentation at");
+    });
+    it("should display full preview and no toggler if content is short enough", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustNotExist(queryByText, "show more");
+    });
+    it("should not use Markdown rendering on `renderPreviewAsMarkdown={false}`", () => {
+        const { queryByText } = render(
+            <StringPreviewContentBlobToggler
+                {...(StringPreviewContentBlobTogglerStory.args as StringPreviewContentBlobTogglerProps)}
+                previewMaxLength={144}
+                renderPreviewAsMarkdown={false}
+            />
+        );
+        textMustExist(queryByText, "A library for GUI elements.");
+        textMustExist(
+            queryByText,
+            "In order to create graphical user interfaces, please have look at the documentation at"
+        );
+        textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+        textMustExist(queryByText, "show more");
+    });
+});

package/src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -9,6 +9,7 @@ import {
 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
 
 export type ReactFlowV12ContainerProps = ReactFlowV12Props;

package/src/common/Intent/index.ts

@@ -1,6 +1,7 @@
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 export type IntentBlueprint = BlueprintIntent;
 export const DefinitionsBlueprint = BlueprintIntent;