@chayns-components/core 5.5.3 → 5.5.7

package/AGENTS.md

@@ -1,8 +1,8 @@
 # @chayns-components/core
 
-React component package providing 46 documented components for chayns applications.
+React component package providing 47 documented components for chayns applications.
 
-Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `Masonry`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
+Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `CopyableContent`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `Masonry`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
 
 ## Import
 
@@ -27,6 +27,7 @@ import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/cor
 - `ComboBox`
 - `ContentCard`
 - `ContextMenu`
+- `CopyableContent`
 - `ExpandableContent`
 - `FileInput`
 - `FileList`
@@ -1463,6 +1464,90 @@ No additional exported types documented.
 
 ### Anti Patterns
 
+- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
+## CopyableContent
+
+`CopyableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { CopyableContent } from '@chayns-components/core';
+```
+
+### Examples
+
+#### Short
+
+```tsx
+<CopyableContent
+    content={'Vielen Dank für eure Rückmeldungen. Der Termin für das gemeinsame Sommerfest steht nun fest: Samstag, 22. August, ab 15 Uhr.'}
+/>
+```
+
+#### Long
+
+```tsx
+<CopyableContent
+    content={Array.from(
+            { length: 8 },
+            (_, index) =>
+                `### Abschnitt ${index + 1}\n\nDas Planungsteam hat die Hinweise aus den Gesprächen aufgenommen und bereitet jetzt die nächsten Schritte vor. Bis Ende der Woche sammeln wir noch Rückmeldungen, damit alle Beteiligten zuverlässig informiert sind.`,
+        ).join('\n\n')}
+/>
+```
+
+#### Markdown
+
+```tsx
+<CopyableContent
+    content={`# Projekt-Update: Sommerfest
+    
+    Die Vorbereitungen für das Sommerfest gehen in die letzte Runde. Das Organisationsteam hat die Rückmeldungen aus den einzelnen Gruppen zusammengeführt und den Ablauf für den Nachmittag angepasst.
+    
+    ## Was bereits feststeht
+    
+    - Der Aufbau beginnt am Freitag um 16:30 Uhr am Bürgerhaus.
+    - Für Kinder gibt es eine Kreativstation, eine kleine Rallye und einen ruhigen Rückzugsbereich.
+    - Getränke und vegetarische Speisen werden vor Ort angeboten.
+    
+    > Bitte gebt Rückmeldung, falls ihr beim Aufbau helfen könnt oder besondere Anforderungen an die Verpflegung habt.
+    
+    Weitere Informationen stehen im [gemeinsamen Ablaufplan](https://example.com/veranstaltungen/sommerfest-2026/ablauf-und-helferinnen).`}
+/>
+```
+
+#### Long Url
+
+```tsx
+<CopyableContent
+    content={'Die vollständige Materialliste findet ihr unter https://example.com/veranstaltungen/sommerfest-2026/organisation/materialien/helferinnen-und-helfer/abstimmung-und-zeitplan.'}
+/>
+```
+
+#### Dark
+
+```tsx
+<CopyableContent
+    content={`${PROJECT_UPDATE}\n\n---\n\nDiese Story bitte mit dunklem Storybook-Hintergrund prüfen.`}
+/>
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `CopyableContent` directly from `@chayns-components/core` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
 - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
 ## ExpandableContent
 

package/lib/cjs/components/checkbox/Checkbox.js

@@ -46,7 +46,8 @@ const Checkbox = ({
   }, [shouldShowCentered]);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
   return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, {
-    ref: checkboxRootRef
+    ref: checkboxRootRef,
+    className: "beta-chayns-checkbox"
   }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     checked: isChecked,

package/lib/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","createElement","StyledCheckbox","ref","StyledCheckboxInput","$shouldShowKeyboardHighlighting","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    KeyboardEvent,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","createElement","StyledCheckbox","ref","className","StyledCheckboxInput","$shouldShowKeyboardHighlighting","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    KeyboardEvent,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n            <StyledCheckboxInput\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/copyable-content/CopyableContent.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _format = require("@chayns-components/format");
+var _textstring = require("@chayns-components/textstring");
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
+var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _CopyableContent = require("./CopyableContent.styles");
+var _copyableContentClipboard = require("./copyableContentClipboard");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const STICKY_ACTION_OFFSET = 8;
+const CopyableContent = ({
+  content,
+  children,
+  copiedMessage,
+  copyFailedMessage
+}) => {
+  const [isActionGroupSticky, setIsActionGroupSticky] = (0, _react.useState)(false);
+  const actionGroupRef = (0, _react.useRef)(null);
+  const defaultCopyButtonText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copy)
+  });
+  const defaultCopiedMessage = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copied)
+  });
+  const defaultCopyFailedMessage = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copyFailed)
+  });
+  const shareText = (0, _textstring.useTextstringValue)({
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.share)
+  });
+  const html = (0, _react.useMemo)(() => (0, _format.formatStringToHtml)(content).html, [content]);
+  (0, _react.useEffect)(() => {
+    const updateStickyState = () => {
+      var _actionGroupRef$curre;
+      const actionGroupTop = (_actionGroupRef$curre = actionGroupRef.current) === null || _actionGroupRef$curre === void 0 ? void 0 : _actionGroupRef$curre.getBoundingClientRect().top;
+      setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
+    };
+    updateStickyState();
+    document.addEventListener('scroll', updateStickyState, true);
+    window.addEventListener('resize', updateStickyState);
+    return () => {
+      document.removeEventListener('scroll', updateStickyState, true);
+      window.removeEventListener('resize', updateStickyState);
+    };
+  }, []);
+  const handleCopy = (0, _react.useCallback)(async () => {
+    try {
+      await (0, _copyableContentClipboard.copyableContentToClipboard)(content);
+      void (0, _chaynsApi.createDialog)({
+        showCloseIcon: true,
+        text: copiedMessage ?? defaultCopiedMessage,
+        toastType: _chaynsApi.ToastType.SUCCESS,
+        type: _chaynsApi.DialogType.TOAST
+      }).open();
+    } catch {
+      void (0, _chaynsApi.createDialog)({
+        showCloseIcon: true,
+        text: copyFailedMessage ?? defaultCopyFailedMessage,
+        toastType: _chaynsApi.ToastType.ERROR,
+        type: _chaynsApi.DialogType.TOAST
+      }).open();
+    }
+  }, [content, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);
+  return /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContent, {
+    className: "copyable-content"
+  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActions, {
+    ref: actionGroupRef
+  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
+    $isSticky: isActionGroupSticky,
+    "aria-label": defaultCopyButtonText,
+    onClick: () => {
+      void handleCopy();
+    },
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa-light fa-copy']
+  })), /*#__PURE__*/_react.default.createElement(_SharingContextMenu.default, {
+    link: content,
+    shouldUseDefaultTriggerStyles: false
+  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
+    $isSticky: isActionGroupSticky,
+    "aria-label": shareText,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-share-nodes']
+  }))))), /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentBody, null, children ?? /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  })));
+};
+CopyableContent.displayName = 'CopyableContent';
+var _default = exports.default = CopyableContent;
+//# sourceMappingURL=CopyableContent.js.map

package/lib/cjs/components/copyable-content/CopyableContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_SharingContextMenu","_Icon","_CopyableContent","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","STICKY_ACTION_OFFSET","CopyableContent","content","children","copiedMessage","copyFailedMessage","isActionGroupSticky","setIsActionGroupSticky","useState","actionGroupRef","useRef","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopiedMessage","copied","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","updateStickyState","_actionGroupRef$curre","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","useCallback","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyableContent","className","StyledCopyableContentActions","ref","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldUseDefaultTriggerStyles","StyledCopyableContentBody","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n    StyledCopyableContent,\n    StyledCopyableContentActionGroup,\n    StyledCopyableContentActions,\n    StyledCopyableContentBody,\n    StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nexport type CopyableContentProps = {\n    content: string;\n    children?: ReactNode;\n    copiedMessage?: string;\n    copyFailedMessage?: string;\n};\n\nconst STICKY_ACTION_OFFSET = 8;\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n    content,\n    children,\n    copiedMessage,\n    copyFailedMessage,\n}) => {\n    const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);\n\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n\n    const defaultCopyButtonText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n    });\n    const defaultCopiedMessage = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copied),\n    });\n    const defaultCopyFailedMessage = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.copyableContent.share),\n    });\n\n    const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n    useEffect(() => {\n        const updateStickyState = () => {\n            const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;\n            setIsActionGroupSticky(\n                actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET,\n            );\n        };\n\n        updateStickyState();\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('resize', updateStickyState);\n\n        return () => {\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('resize', updateStickyState);\n        };\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await copyableContentToClipboard(content);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedMessage ?? defaultCopiedMessage,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedMessage ?? defaultCopyFailedMessage,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [content, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);\n\n    return (\n        <StyledCopyableContent className=\"copyable-content\">\n            <StyledCopyableContentActions ref={actionGroupRef}>\n                <StyledCopyableContentActionGroup>\n                    <StyledCopyableContentButton\n                        $isSticky={isActionGroupSticky}\n                        aria-label={defaultCopyButtonText}\n                        onClick={() => {\n                            void handleCopy();\n                        }}\n                        type=\"button\"\n                    >\n                        <Icon icons={['fa-light fa-copy']} />\n                    </StyledCopyableContentButton>\n                    <SharingContextMenu link={content} shouldUseDefaultTriggerStyles={false}>\n                        <StyledCopyableContentButton\n                            $isSticky={isActionGroupSticky}\n                            aria-label={shareText}\n                            type=\"button\"\n                        >\n                            <Icon icons={['fa fa-share-nodes']} />\n                        </StyledCopyableContentButton>\n                    </SharingContextMenu>\n                </StyledCopyableContentActionGroup>\n            </StyledCopyableContentActions>\n            <StyledCopyableContentBody>\n                {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n            </StyledCopyableContentBody>\n        </StyledCopyableContent>\n    );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/copyable-content/CopyableContent.styles.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCopyableContentButton = exports.StyledCopyableContentBody = exports.StyledCopyableContentActions = exports.StyledCopyableContentActionGroup = exports.StyledCopyableContent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.default.section`
+    --copyable-content-action-size: 32px;
+    --copyable-content-action-inset: 8px;
+
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: clip;
+    overflow-wrap: anywhere;
+    padding-top: calc(
+        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2
+    );
+    border-radius: ${({
+  theme
+}) => theme.cardBorderRadius}px;
+    background-color: rgba(
+        ${({
+  theme
+}) => theme['secondary-100-rgb']},
+        ${({
+  theme
+}) => theme.cardBackgroundOpacity}
+    );
+    color: ${({
+  theme
+}) => theme.text};
+`;
+const StyledCopyableContentActions = exports.StyledCopyableContentActions = _styledComponents.default.div`
+    position: sticky;
+    top: var(--copyable-content-action-inset);
+    z-index: 1;
+    display: flex;
+    justify-content: flex-end;
+    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));
+    margin-top: calc(
+        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1
+    );
+    padding-right: var(--copyable-content-action-inset);
+`;
+const StyledCopyableContentActionGroup = exports.StyledCopyableContentActionGroup = _styledComponents.default.div`
+    display: flex;
+    gap: 4px;
+    height: var(--copyable-content-action-size);
+`;
+const StyledCopyableContentButton = exports.StyledCopyableContentButton = _styledComponents.default.button`
+    box-sizing: border-box;
+    border: 1px solid ${({
+  $isSticky,
+  theme
+}) => $isSticky ? theme['202'] : 'transparent'};
+    border-radius: 4px;
+    width: var(--copyable-content-action-size);
+    height: var(--copyable-content-action-size);
+    padding: 0;
+    cursor: pointer;
+    background-color: ${({
+  $isSticky,
+  theme
+}) => $isSticky ? theme['100'] : 'transparent'};
+    color: ${({
+  theme
+}) => theme.text};
+    box-shadow: ${({
+  $isSticky
+}) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.16)' : 'none'};
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
+
+    &:hover {
+        background-color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.1);
+        box-shadow: inset 0 0 0 1px rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.06);
+    }
+
+    &:active {
+        transform: scale(0.9);
+    }
+
+    &:focus-visible {
+        outline: 2px solid ${({
+  theme
+}) => theme.buttonBackgroundColor};
+        outline-offset: 2px;
+    }
+`;
+const StyledCopyableContentBody = exports.StyledCopyableContentBody = _styledComponents.default.div`
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    padding: 0 12px 12px;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol,
+    blockquote {
+        margin: 0 0 12px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: ${({
+  theme
+}) => theme.headline};
+    }
+
+    ul,
+    ol {
+        padding-left: 24px;
+    }
+
+    blockquote {
+        padding-left: 12px;
+        border-left: 3px solid ${({
+  theme
+}) => theme['202']};
+    }
+
+    a {
+        color: ${({
+  theme
+}) => theme.primary};
+        overflow-wrap: anywhere;
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+`;
+//# sourceMappingURL=CopyableContent.styles.js.map

package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledCopyableContent","exports","styled","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\ntype StyledCopyableContentProps = WithTheme<unknown>;\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n    --copyable-content-action-size: 32px;\n    --copyable-content-action-inset: 8px;\n\n    min-width: 0;\n    max-width: 100%;\n    overflow-x: clip;\n    overflow-wrap: anywhere;\n    padding-top: calc(\n        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n    );\n    border-radius: ${({ theme }) => theme.cardBorderRadius}px;\n    background-color: rgba(\n        ${({ theme }) => theme['secondary-100-rgb']},\n        ${({ theme }) => theme.cardBackgroundOpacity}\n    );\n    color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n    $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div<StyledCopyableContentProps>`\n    position: sticky;\n    top: var(--copyable-content-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n    margin-top: calc(\n        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n    );\n    padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n    border-radius: 4px;\n    width: var(--copyable-content-action-size);\n    height: var(--copyable-content-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n    color: ${({ theme }) => theme.text};\n    box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.16)' : 'none')};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n        box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n    }\n\n    &:active {\n        transform: scale(0.9);\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n        outline-offset: 2px;\n    }\n`;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentProps>`\n    min-width: 0;\n    max-width: 100%;\n    overflow-wrap: anywhere;\n    padding: 0 12px 12px;\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol,\n    blockquote {\n        margin: 0 0 12px;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        color: ${({ theme }) => theme.headline};\n    }\n\n    ul,\n    ol {\n        padding-left: 24px;\n    }\n\n    blockquote {\n        padding-left: 12px;\n        border-left: 3px solid ${({ theme }) => theme['202']};\n    }\n\n    a {\n        color: ${({ theme }) => theme.primary};\n        overflow-wrap: anywhere;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACC,gBAAgB;AAC1D;AACA,UAAU,CAAC;EAAED;AAAM,CAAC,KAAKA,KAAK,CAAC,mBAAmB,CAAC;AACnD,UAAU,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACpD;AACA,aAAa,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,CAAC;AAMM,MAAMC,4BAA4B,GAAAP,OAAA,CAAAO,4BAAA,GAAGN,yBAAM,CAACO,GAA+B;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gCAAgC,GAAAT,OAAA,CAAAS,gCAAA,GAAGR,yBAAM,CAACO,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAME,2BAA2B,GAAAV,OAAA,CAAAU,2BAAA,GAAGT,yBAAM,CAACU,MAAwC;AAC1F;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,kBAAkB,CAAC;EAAEM;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAET;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjE,2CAA2C,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACU,qBAAqB;AACvE;AACA;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAd,OAAA,CAAAc,yBAAA,GAAGb,yBAAM,CAACO,GAA+B;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEL;AAAM,CAAC,KAAKA,KAAK,CAACY,QAAQ;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEZ;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5D;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACa,OAAO;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/copyable-content/CopyableContent.test.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _vitest = require("vitest");
+var _CopyableContent = _interopRequireDefault(require("./CopyableContent"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } /* eslint-disable @typescript-eslint/no-unsafe-call */
+_vitest.vi.mock('../icon/Icon', () => ({
+  default: () => /*#__PURE__*/_react2.default.createElement("span", null)
+}));
+_vitest.vi.mock('../sharing-context-menu/SharingContextMenu', () => ({
+  default: ({
+    children
+  }) => children
+}));
+_vitest.vi.mock('chayns-api', async importOriginal => ({
+  ...(await importOriginal()),
+  createDialog: _vitest.vi.fn(() => ({
+    open: _vitest.vi.fn()
+  }))
+}));
+const readBlob = blob => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onerror = () => reject(reader.error);
+  reader.onload = () => resolve(reader.result);
+  reader.readAsText(blob);
+});
+(0, _vitest.describe)('CopyableContent', () => {
+  (0, _vitest.it)('renders formatted markdown without active input HTML', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CopyableContent.default, {
+      content: '# Heading\n\n- Entry\n\n[Link](https://example.com)\n<script onload="x">bad</script>'
+    }));
+    (0, _vitest.expect)(_react.screen.getByRole('heading', {
+      name: 'Heading'
+    })).toBeInTheDocument();
+    (0, _vitest.expect)(_react.screen.getByRole('link', {
+      name: 'Link'
+    })).toHaveAttribute('href', 'https://example.com');
+    (0, _vitest.expect)(document.querySelector('script')).not.toBeInTheDocument();
+    (0, _vitest.expect)(document.querySelector('[onload]')).not.toBeInTheDocument();
+  });
+  (0, _vitest.it)('copies content instead of custom children', async () => {
+    const write = _vitest.vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CopyableContent.default, {
+      content: "source markdown"
+    }, "Visible replacement"));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Kopieren'
+    }));
+    await (0, _react.waitFor)(() => (0, _vitest.expect)(write).toHaveBeenCalled());
+    const item = write.mock.calls[0][0][0];
+    await (0, _vitest.expect)(readBlob(await item.getType('text/plain'))).resolves.toBe('source markdown');
+  });
+  (0, _vitest.it)('shows a toast after a successful copy', async () => {
+    _vitest.vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CopyableContent.default, {
+      content: "source",
+      copiedMessage: "Done"
+    }));
+    _react.fireEvent.click(_react.screen.getByRole('button', {
+      name: 'Kopieren'
+    }));
+    await (0, _react.waitFor)(async () => {
+      const {
+        createDialog
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('chayns-api')));
+      (0, _vitest.expect)(createDialog).toHaveBeenCalledWith(_vitest.expect.objectContaining({
+        text: 'Done'
+      }));
+    });
+    (0, _vitest.expect)(_react.screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+  (0, _vitest.it)('offers sharing actions', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CopyableContent.default, {
+      content: "source"
+    }));
+    (0, _vitest.expect)(_react.screen.getByRole('button', {
+      name: 'Teilen'
+    })).toBeInTheDocument();
+  });
+});
+//# sourceMappingURL=CopyableContent.test.js.map

package/lib/cjs/components/copyable-content/CopyableContent.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableContent.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_CopyableContent","e","__esModule","default","_interopRequireWildcard","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","vi","mock","createElement","children","importOriginal","createDialog","fn","open","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","it","render","content","expect","screen","getByRole","name","toBeInTheDocument","toHaveAttribute","document","querySelector","not","write","spyOn","navigator","clipboard","mockResolvedValue","fireEvent","click","waitFor","toHaveBeenCalled","item","calls","getType","resolves","toBe","copiedMessage","then","toHaveBeenCalledWith","objectContaining","text","queryByRole"],"sources":["../../../../src/components/copyable-content/CopyableContent.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport CopyableContent from './CopyableContent';\n\nvi.mock('../icon/Icon', () => ({\n    default: () => <span />,\n}));\n\nvi.mock('../sharing-context-menu/SharingContextMenu', () => ({\n    default: ({ children }: { children: React.ReactNode }) => children,\n}));\n\nvi.mock('chayns-api', async (importOriginal) => ({\n    ...(await importOriginal<typeof import('chayns-api')>()),\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\nconst readBlob = (blob: Blob) =>\n    new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onerror = () => reject(reader.error);\n        reader.onload = () => resolve(reader.result as string);\n        reader.readAsText(blob);\n    });\n\ndescribe('CopyableContent', () => {\n    it('renders formatted markdown without active input HTML', () => {\n        render(\n            <CopyableContent\n                content={\n                    '# Heading\\n\\n- Entry\\n\\n[Link](https://example.com)\\n<script onload=\"x\">bad</script>'\n                }\n            />,\n        );\n\n        expect(screen.getByRole('heading', { name: 'Heading' })).toBeInTheDocument();\n        expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(\n            'href',\n            'https://example.com',\n        );\n        expect(document.querySelector('script')).not.toBeInTheDocument();\n        expect(document.querySelector('[onload]')).not.toBeInTheDocument();\n    });\n\n    it('copies content instead of custom children', async () => {\n        const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        render(<CopyableContent content=\"source markdown\">Visible replacement</CopyableContent>);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(() => expect(write).toHaveBeenCalled());\n        const item = write.mock.calls[0][0][0] as unknown as ClipboardItem;\n        await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('source markdown');\n    });\n\n    it('shows a toast after a successful copy', async () => {\n        vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        render(<CopyableContent content=\"source\" copiedMessage=\"Done\" />);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(async () => {\n            const { createDialog } = await import('chayns-api');\n            expect(createDialog).toHaveBeenCalledWith(expect.objectContaining({ text: 'Done' }));\n        });\n        expect(screen.queryByRole('status')).not.toBeInTheDocument();\n    });\n\n    it('offers sharing actions', () => {\n        render(<CopyableContent content=\"source\" />);\n\n        expect(screen.getByRole('button', { name: 'Teilen' })).toBeInTheDocument();\n    });\n});\n"],"mappings":";;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAgD,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,wBAAAH,CAAA,EAAAI,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,uBAAA,YAAAA,CAAAH,CAAA,EAAAI,CAAA,SAAAA,CAAA,IAAAJ,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAQ,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAT,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAU,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAZ,CAAA,UAAAQ,CAAA,CAAAK,GAAA,CAAAb,CAAA,GAAAQ,CAAA,CAAAM,GAAA,CAAAd,CAAA,EAAAU,CAAA,gBAAAN,CAAA,IAAAJ,CAAA,gBAAAI,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAI,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAI,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAJ,CAAA,CAAAI,CAAA,WAAAM,CAAA,KAAAV,CAAA,EAAAI,CAAA,KAJhD;AAMAgB,UAAE,CAACC,IAAI,CAAC,cAAc,EAAE,OAAO;EAC3BnB,OAAO,EAAEA,CAAA,kBAAMN,OAAA,CAAAM,OAAA,CAAAoB,aAAA,aAAO;AAC1B,CAAC,CAAC,CAAC;AAEHF,UAAE,CAACC,IAAI,CAAC,4CAA4C,EAAE,OAAO;EACzDnB,OAAO,EAAEA,CAAC;IAAEqB;EAAwC,CAAC,KAAKA;AAC9D,CAAC,CAAC,CAAC;AAEHH,UAAE,CAACC,IAAI,CAAC,YAAY,EAAE,MAAOG,cAAc,KAAM;EAC7C,IAAI,MAAMA,cAAc,CAA8B,CAAC,CAAC;EACxDC,YAAY,EAAEL,UAAE,CAACM,EAAE,CAAC,OAAO;IAAEC,IAAI,EAAEP,UAAE,CAACM,EAAE,CAAC;EAAE,CAAC,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,MAAME,QAAQ,GAAIC,IAAU,IACxB,IAAIC,OAAO,CAAS,CAACC,OAAO,EAAEC,MAAM,KAAK;EACrC,MAAMC,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAC/BD,MAAM,CAACE,OAAO,GAAG,MAAMH,MAAM,CAACC,MAAM,CAACG,KAAK,CAAC;EAC3CH,MAAM,CAACI,MAAM,GAAG,MAAMN,OAAO,CAACE,MAAM,CAACK,MAAgB,CAAC;EACtDL,MAAM,CAACM,UAAU,CAACV,IAAI,CAAC;AAC3B,CAAC,CAAC;AAEN,IAAAW,gBAAQ,EAAC,iBAAiB,EAAE,MAAM;EAC9B,IAAAC,UAAE,EAAC,sDAAsD,EAAE,MAAM;IAC7D,IAAAC,aAAM,eACF9C,OAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,gBAAA,CAAAG,OAAe;MACZyC,OAAO,EACH;IACH,CACJ,CACL,CAAC;IAED,IAAAC,cAAM,EAACC,aAAM,CAACC,SAAS,CAAC,SAAS,EAAE;MAAEC,IAAI,EAAE;IAAU,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC5E,IAAAJ,cAAM,EAACC,aAAM,CAACC,SAAS,CAAC,MAAM,EAAE;MAAEC,IAAI,EAAE;IAAO,CAAC,CAAC,CAAC,CAACE,eAAe,CAC9D,MAAM,EACN,qBACJ,CAAC;IACD,IAAAL,cAAM,EAACM,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAACC,GAAG,CAACJ,iBAAiB,CAAC,CAAC;IAChE,IAAAJ,cAAM,EAACM,QAAQ,CAACC,aAAa,CAAC,UAAU,CAAC,CAAC,CAACC,GAAG,CAACJ,iBAAiB,CAAC,CAAC;EACtE,CAAC,CAAC;EAEF,IAAAP,UAAE,EAAC,2CAA2C,EAAE,YAAY;IACxD,MAAMY,KAAK,GAAGjC,UAAE,CAACkC,KAAK,CAACC,SAAS,CAACC,SAAS,EAAE,OAAO,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACxE,IAAAf,aAAM,eAAC9C,OAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,gBAAA,CAAAG,OAAe;MAACyC,OAAO,EAAC;IAAiB,GAAC,qBAAoC,CAAC,CAAC;IAExFe,gBAAS,CAACC,KAAK,CAACd,aAAM,CAACC,SAAS,CAAC,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAC,CAAC,CAAC;IAEjE,MAAM,IAAAa,cAAO,EAAC,MAAM,IAAAhB,cAAM,EAACS,KAAK,CAAC,CAACQ,gBAAgB,CAAC,CAAC,CAAC;IACrD,MAAMC,IAAI,GAAGT,KAAK,CAAChC,IAAI,CAAC0C,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAA6B;IAClE,MAAM,IAAAnB,cAAM,EAAChB,QAAQ,CAAC,MAAMkC,IAAI,CAACE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAACC,QAAQ,CAACC,IAAI,CAAC,iBAAiB,CAAC;EAC7F,CAAC,CAAC;EAEF,IAAAzB,UAAE,EAAC,uCAAuC,EAAE,YAAY;IACpDrB,UAAE,CAACkC,KAAK,CAACC,SAAS,CAACC,SAAS,EAAE,OAAO,CAAC,CAACC,iBAAiB,CAAC,CAAC;IAC1D,IAAAf,aAAM,eAAC9C,OAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,gBAAA,CAAAG,OAAe;MAACyC,OAAO,EAAC,QAAQ;MAACwB,aAAa,EAAC;IAAM,CAAE,CAAC,CAAC;IAEjET,gBAAS,CAACC,KAAK,CAACd,aAAM,CAACC,SAAS,CAAC,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAW,CAAC,CAAC,CAAC;IAEjE,MAAM,IAAAa,cAAO,EAAC,YAAY;MACtB,MAAM;QAAEnC;MAAa,CAAC,GAAG,MAAAK,OAAA,CAAAC,OAAA,GAAAqC,IAAA,OAAAjE,uBAAA,CAAAR,OAAA,CAAa,YAAY,GAAC;MACnD,IAAAiD,cAAM,EAACnB,YAAY,CAAC,CAAC4C,oBAAoB,CAACzB,cAAM,CAAC0B,gBAAgB,CAAC;QAAEC,IAAI,EAAE;MAAO,CAAC,CAAC,CAAC;IACxF,CAAC,CAAC;IACF,IAAA3B,cAAM,EAACC,aAAM,CAAC2B,WAAW,CAAC,QAAQ,CAAC,CAAC,CAACpB,GAAG,CAACJ,iBAAiB,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,IAAAP,UAAE,EAAC,wBAAwB,EAAE,MAAM;IAC/B,IAAAC,aAAM,eAAC9C,OAAA,CAAAM,OAAA,CAAAoB,aAAA,CAACvB,gBAAA,CAAAG,OAAe;MAACyC,OAAO,EAAC;IAAQ,CAAE,CAAC,CAAC;IAE5C,IAAAC,cAAM,EAACC,aAAM,CAACC,SAAS,CAAC,QAAQ,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;EAC9E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/components/copyable-content/copyableContentClipboard.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyableContentToClipboard = void 0;
+var _format = require("@chayns-components/format");
+const RICH_MIME_TYPES = ['text/plain', 'text/markdown', 'text/html'];
+const createClipboardItem = data => new ClipboardItem(data);
+const supportsRichMimeTypes = () => {
+  if (typeof ClipboardItem === 'undefined' || typeof ClipboardItem.supports !== 'function') {
+    return true;
+  }
+  return RICH_MIME_TYPES.every(mimeType => ClipboardItem.supports(mimeType));
+};
+const copyPlainText = async source => {
+  if (typeof ClipboardItem !== 'undefined') {
+    try {
+      await navigator.clipboard.write([createClipboardItem({
+        'text/plain': new Blob([source], {
+          type: 'text/plain'
+        })
+      })]);
+      return;
+    } catch {
+      // Use writeText as the final browser-compatible fallback.
+    }
+  }
+  await navigator.clipboard.writeText(source);
+};
+const copyableContentToClipboard = async source => {
+  if (!navigator.clipboard) {
+    throw new Error('Clipboard API is not available.');
+  }
+  if (typeof ClipboardItem === 'undefined' || !supportsRichMimeTypes()) {
+    await copyPlainText(source);
+    return;
+  }
+  const {
+    html
+  } = (0, _format.formatStringToHtml)(source);
+  try {
+    await navigator.clipboard.write([createClipboardItem({
+      'text/plain': new Blob([source], {
+        type: 'text/plain'
+      }),
+      'text/markdown': new Blob([source], {
+        type: 'text/markdown'
+      }),
+      'text/html': new Blob([html], {
+        type: 'text/html'
+      })
+    })]);
+  } catch {
+    await copyPlainText(source);
+  }
+};
+exports.copyableContentToClipboard = copyableContentToClipboard;
+//# sourceMappingURL=copyableContentClipboard.js.map