diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png deleted file mode 100644 index 572ed48e3c..0000000000 Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-1-snap.png and /dev/null differ diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png deleted file mode 100644 index f535c49191..0000000000 Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-2-snap.png and /dev/null differ diff --git a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png b/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png deleted file mode 100644 index b9eb49a501..0000000000 Binary files a/__tests__/__image_snapshots__/html/copy-button-js-copy-button-should-work-3-snap.png and /dev/null differ diff --git a/__tests__/html/copyButton.denied.js b/__tests__/html/copyButton.denied.js deleted file mode 100644 index e62a0ae418..0000000000 --- a/__tests__/html/copyButton.denied.js +++ /dev/null @@ -1,3 +0,0 @@ -/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ - -test('copy button with denied permission should be disabled', () => runHTML('copyButton.denied')); diff --git a/__tests__/html/copyButton.disabled.js b/__tests__/html/copyButton.disabled.js deleted file mode 100644 index 4381b312c1..0000000000 --- a/__tests__/html/copyButton.disabled.js +++ /dev/null @@ -1,3 +0,0 @@ -/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ - -test('copy button should be able to disable', () => runHTML('copyButton.disabled')); diff --git a/__tests__/html/copyButton.hideAndShow.js b/__tests__/html/copyButton.hideAndShow.js deleted file mode 100644 index dfdde9572d..0000000000 --- a/__tests__/html/copyButton.hideAndShow.js +++ /dev/null @@ -1,3 +0,0 @@ -/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ - -test('copy button should not show as copied on hide/show', () => runHTML('copyButton.hideAndShow')); diff --git a/__tests__/html/copyButton.js b/__tests__/html/copyButton.js deleted file mode 100644 index b0e1a879eb..0000000000 --- a/__tests__/html/copyButton.js +++ /dev/null @@ -1,3 +0,0 @@ -/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ - -test('copy button should work', () => runHTML('copyButton')); diff --git a/__tests__/html/copyButton.layout.js b/__tests__/html/copyButton.layout.js deleted file mode 100644 index bdf462a54e..0000000000 --- a/__tests__/html/copyButton.layout.js +++ /dev/null @@ -1,12 +0,0 @@ -/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */ - -describe.each([ - ['light', 'white label'], - ['dark', 'fluent'], - ['dark', 'copilot'], - ['light', 'fluent'], - ['light', 'copilot'] -])('with %s theme and %s variant', (theme, variant) => - test('copy button should layout properly', () => - runHTML(`copyButton.layout?${new URLSearchParams({ theme, variant }).toString()}`)) -); diff --git a/__tests__/html/copyButton.denied.html b/__tests__/html2/copyButton/behavior.denied.html similarity index 97% rename from __tests__/html/copyButton.denied.html rename to __tests__/html2/copyButton/behavior.denied.html index 770a09c9cb..946dd70f2f 100644 --- a/__tests__/html/copyButton.denied.html +++ b/__tests__/html2/copyButton/behavior.denied.html @@ -59,13 +59,13 @@ expect(copyButton.getAttribute('aria-disabled')).toBe('true'); // THEN: Should match screenshot. - await host.snapshot(); + await host.snapshot('local'); // WHEN: Clicks the "Copy" button. await host.click(copyButton); // THEN: The copy button should not change to "Copied". - await host.snapshot(); + await host.snapshot('local'); }); diff --git a/__tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-1-snap.png b/__tests__/html2/copyButton/behavior.denied.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-1-snap.png rename to __tests__/html2/copyButton/behavior.denied.html.snap-1.png diff --git a/__tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-2-snap.png b/__tests__/html2/copyButton/behavior.denied.html.snap-2.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-denied-js-copy-button-with-denied-permission-should-be-disabled-2-snap.png rename to __tests__/html2/copyButton/behavior.denied.html.snap-2.png diff --git a/__tests__/html/copyButton.disabled.html b/__tests__/html2/copyButton/behavior.disabled.html similarity index 97% rename from __tests__/html/copyButton.disabled.html rename to __tests__/html2/copyButton/behavior.disabled.html index 1956fbdb82..4ef5e95b74 100644 --- a/__tests__/html/copyButton.disabled.html +++ b/__tests__/html2/copyButton/behavior.disabled.html @@ -59,13 +59,13 @@ expect(copyButton.getAttribute('aria-disabled')).toBe('true'); // THEN: Should match screenshot. - await host.snapshot(); + await host.snapshot('local'); // WHEN: Clicks the "Copy" button. await host.click(copyButton); // THEN: The copy button should not change to "Copied". - await host.snapshot(); + await host.snapshot('local'); }); diff --git a/__tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-1-snap.png b/__tests__/html2/copyButton/behavior.disabled.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-1-snap.png rename to __tests__/html2/copyButton/behavior.disabled.html.snap-1.png diff --git a/__tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-2-snap.png b/__tests__/html2/copyButton/behavior.disabled.html.snap-2.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-disabled-js-copy-button-should-be-able-to-disable-2-snap.png rename to __tests__/html2/copyButton/behavior.disabled.html.snap-2.png diff --git a/__tests__/html/copyButton.hideAndShow.html b/__tests__/html2/copyButton/behavior.hideAndShow.html similarity index 96% rename from __tests__/html/copyButton.hideAndShow.html rename to __tests__/html2/copyButton/behavior.hideAndShow.html index f66d3623f5..e23d33596c 100644 --- a/__tests__/html/copyButton.hideAndShow.html +++ b/__tests__/html2/copyButton/behavior.hideAndShow.html @@ -63,13 +63,13 @@ await host.click(document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`)); // THEN: The "Copy" button should say "Copied". - await host.snapshot(); + await host.snapshot('local'); // WHEN: After 1 second. await testHelpers.sleep(1_000); // THEN: The "Copy" button should back to normal. - await host.snapshot(); + await host.snapshot('local'); // WHEN: Hiding Web Chat and showing it back. document.getElementById('webchat').style.display = 'none'; @@ -77,7 +77,7 @@ document.getElementById('webchat').style.display = ''; // THEN: The "Copy" button should kept at normal. - await host.snapshot(); + await host.snapshot('local'); }); diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-1-snap.png rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-1.png diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-2.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-2-snap.png rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-2.png diff --git a/__tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png b/__tests__/html2/copyButton/behavior.hideAndShow.html.snap-3.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-hide-and-show-js-copy-button-should-not-show-as-copied-on-hide-show-3-snap.png rename to __tests__/html2/copyButton/behavior.hideAndShow.html.snap-3.png diff --git a/__tests__/html/copyButton.html b/__tests__/html2/copyButton/behavior.html similarity index 84% rename from __tests__/html/copyButton.html rename to __tests__/html2/copyButton/behavior.html index 14edc9db93..d75ef9e43d 100644 --- a/__tests__/html/copyButton.html +++ b/__tests__/html2/copyButton/behavior.html @@ -73,7 +73,7 @@ type: 'https://schema.org/Message' } ], - text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi.', + text: 'Mollit *aute* **aute** dolor ea ex magna incididunt nostrud sit nisi. ![Icon](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFvSURBVHgB7ZPdcYJAFIUX9D2UgBWIFQS0AUsgFYQOhA7sILGCkAIUUkGwA0og7/zku8mSWYHM+OKbd8bhsufcc84uq1L3unn5vu+u1+u3K7lSu+G6PVywLCtr2/asrqsC/hbh6EJj4Bzatv14Op2eSLvrum6VZdlWjRO6Yg4e8OowI0EWeZ5Xo6QQnwEPMsRryFA0FY/hEu47vxd6SVsgHKrh9hFyAF1IOYTodzYvDdzTZj+FeQxf1hzMDywtR6Lz+dwDPOvES0k8OJZP2bKRtoIvph5YSb8YidZ1XQE+6BRfs9nM6TH6Spsps+BXaqLMMxU3Vw8XTdN4PXA8HlMEAsxW5jB84RQEkrk/gwvrzWaTIZaIgWxXRMxzNUtuBw9XbkoQBClBUvrXYVJx/gDcaaGEfj8lKB+NR4hpoq/XshcciQLEPBz5l9DvMYmnROUa6aOo9MdLTNyaSOGy9ZQhv7/M/xVHEMFz4MXqXjetb0P8xVy6y7nkAAAAAElFTkSuQmCC)', type: 'message' }); @@ -88,13 +88,13 @@ const copyButton = document.querySelector(`[data-testid="${WebChat.testIds.copyButton}"]`); expect(document.activeElement).toBe(copyButton); - await host.snapshot(); + await host.snapshot('local'); // WHEN: Press ENTER on the "Copy" button. await host.sendKeys('ENTER'); // THEN: The copy button should change to "Copied". - await host.snapshot(); + await host.snapshot('local'); // WHEN: Paste into plain text and rich text text box. await host.click(document.querySelector('[data-testid="plain-text-box"]')); @@ -109,7 +109,7 @@ await testHelpers.sleep(500); // THEN: Plain text box should contains plain text, while rich text box should contains rich text. - await host.snapshot(); + await host.snapshot('local'); }); diff --git a/__tests__/html2/copyButton/behavior.html.snap-1.png b/__tests__/html2/copyButton/behavior.html.snap-1.png new file mode 100644 index 0000000000..90cacf6298 Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-1.png differ diff --git a/__tests__/html2/copyButton/behavior.html.snap-2.png b/__tests__/html2/copyButton/behavior.html.snap-2.png new file mode 100644 index 0000000000..07e6a7c7cf Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-2.png differ diff --git a/__tests__/html2/copyButton/behavior.html.snap-3.png b/__tests__/html2/copyButton/behavior.html.snap-3.png new file mode 100644 index 0000000000..d6e1c2174c Binary files /dev/null and b/__tests__/html2/copyButton/behavior.html.snap-3.png differ diff --git a/__tests__/html2/copyButton/layout.copilot.dark.html b/__tests__/html2/copyButton/layout.copilot.dark.html new file mode 100644 index 0000000000..ec7f21581e --- /dev/null +++ b/__tests__/html2/copyButton/layout.copilot.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png rename to __tests__/html2/copyButton/layout.copilot.dark.html.snap-1.png diff --git a/__tests__/html2/copyButton/layout.copilot.light.html b/__tests__/html2/copyButton/layout.copilot.light.html new file mode 100644 index 0000000000..fa677a562d --- /dev/null +++ b/__tests__/html2/copyButton/layout.copilot.light.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.copilot.light.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-copilot-variant-copy-button-should-layout-properly-1-snap.png rename to __tests__/html2/copyButton/layout.copilot.light.html.snap-1.png diff --git a/__tests__/html2/copyButton/layout.fluent.dark.html b/__tests__/html2/copyButton/layout.fluent.dark.html new file mode 100644 index 0000000000..07bda13301 --- /dev/null +++ b/__tests__/html2/copyButton/layout.fluent.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-dark-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png rename to __tests__/html2/copyButton/layout.fluent.dark.html.snap-1.png diff --git a/__tests__/html2/copyButton/layout.fluent.light.html b/__tests__/html2/copyButton/layout.fluent.light.html new file mode 100644 index 0000000000..b4d2f7c4aa --- /dev/null +++ b/__tests__/html2/copyButton/layout.fluent.light.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.fluent.light.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-fluent-variant-copy-button-should-layout-properly-1-snap.png rename to __tests__/html2/copyButton/layout.fluent.light.html.snap-1.png diff --git a/__tests__/html/copyButton.layout.html b/__tests__/html2/copyButton/layout.html similarity index 97% rename from __tests__/html/copyButton.layout.html rename to __tests__/html2/copyButton/layout.html index 63417e7746..6a9c2531ff 100644 --- a/__tests__/html/copyButton.layout.html +++ b/__tests__/html2/copyButton/layout.html @@ -57,9 +57,7 @@ const root = createRoot(document.getElementById('webchat')); - if (searchParams.get('variant') === 'white label') { - root.render(); - } else { + if (searchParams.get('variant') === 'copilot' || searchParams.get('variant') === 'fluent') { root.render( ); + } else { + root.render(); } await pageConditions.uiConnected(); @@ -139,7 +139,7 @@ ); // THEN: "Copy" button should appear after the message. - await host.snapshot(); + await host.snapshot('local'); }); diff --git a/__tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-white-label-variant-copy-button-should-layout-properly-1-snap.png b/__tests__/html2/copyButton/layout.html.snap-1.png similarity index 100% rename from __tests__/__image_snapshots__/html/copy-button-layout-js-with-light-theme-and-white-label-variant-copy-button-should-layout-properly-1-snap.png rename to __tests__/html2/copyButton/layout.html.snap-1.png diff --git a/docs/HOOKS.md b/docs/HOOKS.md index 645e9111bf..4fa084f891 100644 --- a/docs/HOOKS.md +++ b/docs/HOOKS.md @@ -1007,7 +1007,7 @@ This function is for rendering the avatar of an activity. The caller will need t ```js useRenderMarkdownAsHTML( - mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'clipboard' | 'message activity' = 'message activity' + mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'message activity' = 'message activity' ): (markdown: string): string ``` diff --git a/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx b/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx index 680f400f37..c8fd4afc98 100644 --- a/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx +++ b/packages/component/src/Attachment/Text/private/ActivityCopyButton.tsx @@ -1,7 +1,6 @@ import { hooks } from 'botframework-webchat-api'; import classNames from 'classnames'; -import React, { memo, useCallback, useEffect, useRef, useState } from 'react'; -import { useRefFrom } from 'use-ref-from'; +import React, { memo, useCallback, useEffect, useRef, useState, type RefObject } from 'react'; import useStyleSet from '../../../hooks/useStyleSet'; import ActivityButton from './ActivityButton'; @@ -9,20 +8,17 @@ const { useLocalizer, useUIState } = hooks; type Props = Readonly<{ className?: string | undefined; - htmlText?: string | undefined; - plainText: string; + targetRef?: RefObject; }>; const COPY_ICON_URL = `data:image/svg+xml;utf8,${encodeURIComponent('')}`; -const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => { +const ActivityCopyButton = ({ className, targetRef }: Props) => { const [{ activityButton, activityCopyButton }] = useStyleSet(); const [permissionGranted, setPermissionGranted] = useState(false); const [uiState] = useUIState(); const buttonRef = useRef(null); - const htmlTextRef = useRefFrom(htmlText); const localize = useLocalizer(); - const plainTextRef = useRefFrom(plainText); const copiedText = localize('COPY_BUTTON_COPIED_TEXT'); const copyText = localize('COPY_BUTTON_TEXT'); @@ -41,13 +37,14 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => { }, [buttonRef]); const handleClick = useCallback(() => { - const { current: htmlText } = htmlTextRef; + const htmlText = targetRef.current?.outerHTML; + const plainText = targetRef.current?.textContent; navigator.clipboard ?.write([ new ClipboardItem({ ...(htmlText ? { 'text/html': new Blob([htmlText], { type: 'text/html' }) } : {}), - 'text/plain': new Blob([plainTextRef.current], { type: 'text/plain' }) + ...(plainText ? { 'text/plain': new Blob([plainText], { type: 'text/plain' }) } : {}) }) ]) .catch(error => console.error(`botframework-webchat-fluent-theme: Failed to copy to clipboard.`, error)); @@ -60,7 +57,7 @@ const ActivityCopyButton = ({ className, htmlText, plainText }: Props) => { buttonRef.current?.offsetWidth; buttonRef.current?.classList.add('webchat__activity-copy-button--copied'); - }, [buttonRef, htmlTextRef, plainTextRef]); + }, [buttonRef, targetRef]); useEffect(() => { let unmounted = false; diff --git a/packages/component/src/Attachment/Text/private/CitationModalContent.tsx b/packages/component/src/Attachment/Text/private/CitationModalContent.tsx index a6836bbc1e..38186a38a0 100644 --- a/packages/component/src/Attachment/Text/private/CitationModalContent.tsx +++ b/packages/component/src/Attachment/Text/private/CitationModalContent.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { Fragment, memo } from 'react'; +import React, { Fragment, memo, useMemo } from 'react'; import useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML'; import useStyleSet from '../../../hooks/useStyleSet'; @@ -13,6 +13,8 @@ const CitationModalContent = memo(({ headerText, markdown }: Props) => { const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet(); const renderMarkdownAsHTML = useRenderMarkdownAsHTML('citation modal'); + const html = useMemo(() => ({ __html: renderMarkdownAsHTML(markdown) }), [markdown, renderMarkdownAsHTML]); + return ( {headerText &&

{headerText}

} @@ -25,7 +27,7 @@ const CitationModalContent = memo(({ headerText, markdown }: Props) => { )} // The content rendered by `renderMarkdownAsHTML` is sanitized. // eslint-disable-next-line react/no-danger - dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(markdown) }} + dangerouslySetInnerHTML={html} /> ) : (
{markdown}
diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx index 0172f33ce9..b5bdbc2d73 100644 --- a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx +++ b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx @@ -9,7 +9,7 @@ import { import classNames from 'classnames'; import type { Definition } from 'mdast'; import { fromMarkdown } from 'mdast-util-from-markdown'; -import React, { memo, useCallback, useMemo, type MouseEventHandler, type ReactNode } from 'react'; +import React, { memo, useCallback, useMemo, useRef, type MouseEventHandler, type ReactNode } from 'react'; import { useRefFrom } from 'use-ref-from'; import { LinkDefinitionItem, LinkDefinitions } from '../../../LinkDefinition/index'; @@ -54,10 +54,10 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { textContent: textContentStyleSet } ] = useStyleSet(); + const contentRef = useRef(null); const localize = useLocalizer(); const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]); const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity'); - const renderMarkdownAsHTMLForClipboard = useRenderMarkdownAsHTML('clipboard'); const showModal = useShowModal(); const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]); @@ -73,11 +73,6 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { [renderMarkdownAsHTML, markdown] ); - const htmlTextForClipboard = useMemo( - () => (markdown ? renderMarkdownAsHTMLForClipboard(markdown) : undefined), - [markdown, renderMarkdownAsHTMLForClipboard] - ); - const markdownDefinitions = useMemo( () => fromMarkdown(markdown).children.filter((node): node is Definition => node.type === 'definition'), [markdown] @@ -215,6 +210,7 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={dangerouslySetInnerHTML} onClick={handleClick} + ref={contentRef} /> {children} {!!entries.length && ( @@ -246,11 +242,7 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { /> ) : null} {activity.type === 'message' && activity.text && messageThing?.keywords?.includes('AllowCopy') ? ( - + ) : null} diff --git a/packages/component/src/LiveRegion/LiveRegionActivity.tsx b/packages/component/src/LiveRegion/LiveRegionActivity.tsx index ad25e39ed3..8fd87e3aa8 100644 --- a/packages/component/src/LiveRegion/LiveRegionActivity.tsx +++ b/packages/component/src/LiveRegion/LiveRegionActivity.tsx @@ -42,7 +42,7 @@ const LiveRegionActivity: VFC = ({ activity }) => { const fallbackText: string | undefined = type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined; const localize = useLocalizer(); - const renderMarkdownAsHTML = useRenderMarkdownAsHTML(); + const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name'); const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + ''; const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]); diff --git a/packages/component/src/hooks/useRenderMarkdownAsHTML.ts b/packages/component/src/hooks/useRenderMarkdownAsHTML.ts index df3192f98a..8eae1dd4a7 100644 --- a/packages/component/src/hooks/useRenderMarkdownAsHTML.ts +++ b/packages/component/src/hooks/useRenderMarkdownAsHTML.ts @@ -11,7 +11,7 @@ import useStyleSet from './useStyleSet'; const { useLocalizer, useStyleOptions } = hooks; export default function useRenderMarkdownAsHTML( - mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'clipboard' | 'message activity' = 'message activity' + mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'message activity' = 'message activity' ): | (( markdown: string, @@ -34,9 +34,8 @@ export default function useRenderMarkdownAsHTML( { 'webchat__render-markdown--adaptive-cards': mode === 'adaptive cards', 'webchat__render-markdown--citation': mode === 'citation modal', - 'webchat__render-markdown--clipboard': mode === 'clipboard', 'webchat__render-markdown--message-activity': - mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal' && mode !== 'clipboard' + mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal' }, renderMarkdownStyleSet + '' ),