@chayns-components/core 5.5.20 → 5.5.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js +2 -2
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/cjs/components/copyable-content/copyableContentClipboard.test.js +7 -0
- package/lib/cjs/components/copyable-content/copyableContentClipboard.test.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.styles.js +2 -2
- package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/esm/components/copyable-content/copyableContentClipboard.test.js +7 -0
- package/lib/esm/components/copyable-content/copyableContentClipboard.test.js.map +1 -1
- package/lib/types/components/copyable-content/CopyableContent.d.ts +9 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_SharingContextMenu","_Icon","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","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 { useStickyActionState } from '../../hooks/useStickyActionState';\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 { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n content: string;\n children?: ReactNode;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\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 () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\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, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\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={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\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\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_SharingContextMenu","_Icon","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","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 { useStickyActionState } from '../../hooks/useStickyActionState';\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 { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\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 () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\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, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\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={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\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\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,7 +12,7 @@ const getBackgroundColor = ({
|
|
|
12
12
|
theme
|
|
13
13
|
}) => {
|
|
14
14
|
if ($appearance === _CopyableContent.CopyableContentAppearance.Chat) {
|
|
15
|
-
return 'rgba(0, 0, 0, 0.
|
|
15
|
+
return 'rgba(0, 0, 0, 0.12)';
|
|
16
16
|
}
|
|
17
17
|
const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
|
|
18
18
|
const opacity = theme.cardBackgroundOpacity ?? 1;
|
|
@@ -22,7 +22,7 @@ const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.
|
|
|
22
22
|
--copyable-content-action-size: 32px;
|
|
23
23
|
--copyable-content-action-inset: 8px;
|
|
24
24
|
|
|
25
|
-
margin:
|
|
25
|
+
margin: 8px 0;
|
|
26
26
|
min-width: 0;
|
|
27
27
|
max-width: 100%;
|
|
28
28
|
overflow-x: clip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","getBackgroundColor","$appearance","theme","CopyableContentAppearance","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","exports","styled","section","cardBorderRadius","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';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","getBackgroundColor","$appearance","theme","CopyableContentAppearance","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","exports","styled","section","cardBorderRadius","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';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 8px 0;\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: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\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<WithTheme<unknown>>`\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":"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","ignoreList":[]}
|
|
@@ -13,6 +13,7 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
13
13
|
(0, _vitest.describe)('copyableContentToClipboard', () => {
|
|
14
14
|
(0, _vitest.afterEach)(() => {
|
|
15
15
|
_vitest.vi.restoreAllMocks();
|
|
16
|
+
_vitest.vi.unstubAllGlobals();
|
|
16
17
|
});
|
|
17
18
|
(0, _vitest.it)('writes readable plain text first and safe HTML second', async () => {
|
|
18
19
|
const write = _vitest.vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
|
|
@@ -38,5 +39,11 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
38
39
|
await (0, _copyableContentClipboard.copyableContentToClipboard)(source);
|
|
39
40
|
(0, _vitest.expect)(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
40
41
|
});
|
|
42
|
+
(0, _vitest.it)('uses writeText when ClipboardItem is unavailable', async () => {
|
|
43
|
+
_vitest.vi.stubGlobal('ClipboardItem', undefined);
|
|
44
|
+
const writeText = _vitest.vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();
|
|
45
|
+
await (0, _copyableContentClipboard.copyableContentToClipboard)(source);
|
|
46
|
+
(0, _vitest.expect)(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
47
|
+
});
|
|
41
48
|
});
|
|
42
49
|
//# sourceMappingURL=copyableContentClipboard.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyableContentClipboard.test.js","names":["_format","require","_vitest","_copyableContentClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","afterEach","vi","restoreAllMocks","it","write","spyOn","navigator","clipboard","mockResolvedValue","copyableContentToClipboard","item","mock","calls","expect","Object","keys","items","toEqual","getType","resolves","toBe","formatStringToHtml","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\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('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":";;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,yBAAA,GAAAF,OAAA;AAEA,MAAMG,MAAM,GAAG,0CAA0C;AAEzD,MAAMC,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,4BAA4B,EAAE,MAAM;EACzC,IAAAC,iBAAS,EAAC,MAAM;IACZC,UAAE,CAACC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"copyableContentClipboard.test.js","names":["_format","require","_vitest","_copyableContentClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","afterEach","vi","restoreAllMocks","unstubAllGlobals","it","write","spyOn","navigator","clipboard","mockResolvedValue","copyableContentToClipboard","item","mock","calls","expect","Object","keys","items","toEqual","getType","resolves","toBe","formatStringToHtml","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith","stubGlobal","undefined"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\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('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n vi.unstubAllGlobals();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n\n it('uses writeText when ClipboardItem is unavailable', async () => {\n vi.stubGlobal('ClipboardItem', undefined);\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","SharingContextMenu","Icon","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","dangerouslySetInnerHTML","__html","displayName"],"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 { useStickyActionState } from '../../hooks/useStickyActionState';\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 { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n content: string;\n children?: ReactNode;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\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 () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\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, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\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={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\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\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,+BAA+B;AACpF,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,YAAY;AAChE,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/F,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,kBAAkB,MAAM,4CAA4C;AAC3E,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,qBAAqB,EACrBC,gCAAgC,EAChCC,4BAA4B,EAC5BC,yBAAyB,EACzBC,2BAA2B,QACxB,0BAA0B;AACjC,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE,MAAMC,sBAAsB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","SharingContextMenu","Icon","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","dangerouslySetInnerHTML","__html","displayName"],"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 { useStickyActionState } from '../../hooks/useStickyActionState';\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 { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\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 () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\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, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\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={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\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\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ const getBackgroundColor = ({
|
|
|
5
5
|
theme
|
|
6
6
|
}) => {
|
|
7
7
|
if ($appearance === CopyableContentAppearance.Chat) {
|
|
8
|
-
return 'rgba(0, 0, 0, 0.
|
|
8
|
+
return 'rgba(0, 0, 0, 0.12)';
|
|
9
9
|
}
|
|
10
10
|
const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
|
|
11
11
|
const opacity = theme.cardBackgroundOpacity ?? 1;
|
|
@@ -15,7 +15,7 @@ export const StyledCopyableContent = styled.section`
|
|
|
15
15
|
--copyable-content-action-size: 32px;
|
|
16
16
|
--copyable-content-action-inset: 8px;
|
|
17
17
|
|
|
18
|
-
margin:
|
|
18
|
+
margin: 8px 0;
|
|
19
19
|
min-width: 0;
|
|
20
20
|
max-width: 100%;
|
|
21
21
|
overflow-x: clip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","cardBorderRadius","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';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","cardBorderRadius","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';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 8px 0;\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: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\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<WithTheme<unknown>>`\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,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,yBAAyB,QAAQ,yBAAyB;AAMnE,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAAkC,CAAC,KAAK;EAC/E,IAAID,WAAW,KAAKF,yBAAyB,CAACI,IAAI,EAAE;IAChD,OAAO,qBAAqB;EAChC;EAEA,MAAMC,cAAc,GAAGF,KAAK,CAAC,mBAAmB,CAAC,IAAI,eAAe;EACpE,MAAMG,OAAO,GAAGH,KAAK,CAACI,qBAAqB,IAAI,CAAC;EAEhD,OAAO,QAAQF,cAAc,KAAKC,OAAO,GAAG;AAChD,CAAC;AAED,OAAO,MAAME,qBAAqB,GAAGT,MAAM,CAACU,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEN;AAAM,CAAC,KAAKA,KAAK,CAACO,gBAAgB;AAC1D,wBAAwBT,kBAAkB;AAC1C,aAAa,CAAC;EAAEE;AAAM,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACtC,CAAC;AAMD,OAAO,MAAMC,4BAA4B,GAAGb,MAAM,CAACc,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACc,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,2BAA2B,GAAGhB,MAAM,CAACiB,MAAwC;AAC1F;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAEd;AAAM,CAAC,KAAMc,SAAS,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEc,SAAS;EAAEd;AAAM,CAAC,KAAMc,SAAS,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACtC,kBAAkB,CAAC;EAAEM;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEd;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,CAACe,qBAAqB;AACvE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGpB,MAAM,CAACc,GAAuB;AACvE;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;EAAEV;AAAM,CAAC,KAAKA,KAAK,CAACiB,QAAQ;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEjB;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5D;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACkB,OAAO;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
11
11
|
describe('copyableContentToClipboard', () => {
|
|
12
12
|
afterEach(() => {
|
|
13
13
|
vi.restoreAllMocks();
|
|
14
|
+
vi.unstubAllGlobals();
|
|
14
15
|
});
|
|
15
16
|
it('writes readable plain text first and safe HTML second', async () => {
|
|
16
17
|
const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
|
|
@@ -36,5 +37,11 @@ describe('copyableContentToClipboard', () => {
|
|
|
36
37
|
await copyableContentToClipboard(source);
|
|
37
38
|
expect(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
38
39
|
});
|
|
40
|
+
it('uses writeText when ClipboardItem is unavailable', async () => {
|
|
41
|
+
vi.stubGlobal('ClipboardItem', undefined);
|
|
42
|
+
const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();
|
|
43
|
+
await copyableContentToClipboard(source);
|
|
44
|
+
expect(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
45
|
+
});
|
|
39
46
|
});
|
|
40
47
|
//# sourceMappingURL=copyableContentClipboard.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyableContentClipboard.test.js","names":["formatStringToHtml","afterEach","describe","expect","it","vi","copyableContentToClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","restoreAllMocks","write","spyOn","navigator","clipboard","mockResolvedValue","item","mock","calls","Object","keys","items","toEqual","getType","resolves","toBe","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\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('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE,MAAMC,MAAM,GAAG,0CAA0C;AAEzD,MAAMC,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;AAENP,QAAQ,CAAC,4BAA4B,EAAE,MAAM;EACzCD,SAAS,CAAC,MAAM;IACZI,EAAE,CAACe,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"copyableContentClipboard.test.js","names":["formatStringToHtml","afterEach","describe","expect","it","vi","copyableContentToClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","restoreAllMocks","unstubAllGlobals","write","spyOn","navigator","clipboard","mockResolvedValue","item","mock","calls","Object","keys","items","toEqual","getType","resolves","toBe","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith","stubGlobal","undefined"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\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('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n vi.unstubAllGlobals();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n\n it('uses writeText when ClipboardItem is unavailable', async () => {\n vi.stubGlobal('ClipboardItem', undefined);\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,8 +5,17 @@ export type CopyableContentProps = {
|
|
|
5
5
|
* Controls the visual surface of the content block.
|
|
6
6
|
*/
|
|
7
7
|
appearance?: CopyableContentAppearance;
|
|
8
|
+
/**
|
|
9
|
+
* Markdown source used for rendering and clipboard data.
|
|
10
|
+
*/
|
|
8
11
|
content: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces only the visible rendered content and never the copied source.
|
|
14
|
+
*/
|
|
9
15
|
children?: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Replaces the localized error message shown when copying fails.
|
|
18
|
+
*/
|
|
10
19
|
copyFailedMessage?: string;
|
|
11
20
|
};
|
|
12
21
|
declare const CopyableContent: FC<CopyableContentProps>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.22",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
"vitest": "^1.6.1"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@chayns-components/format": "^5.5.
|
|
79
|
-
"@chayns-components/textstring": "^5.5.
|
|
78
|
+
"@chayns-components/format": "^5.5.21",
|
|
79
|
+
"@chayns-components/textstring": "^5.5.21",
|
|
80
80
|
"@chayns/colors": "^2.0.2",
|
|
81
81
|
"@chayns/uac-service": "~0.0.62",
|
|
82
82
|
"clsx": "^2.1.1",
|