Click here to find out more.
Click \u200Bhere\u200B to find out more.
Click here to find out more.
Click \u200Bhere\u200B to find out more.
\u200Bexample\u200B
\u200Bexample\u200B
\u200Bexample@test.com\u200B
\n' ); }); @@ -82,7 +82,7 @@ describe('renderMarkdown', () => { const styleOptions = { markdownRespectCRLF: true }; expect(renderMarkdown(`[(505)503-4455](tel:505-503-4455)`, styleOptions)).toBe( - '\n' + '\u200B(505)503-4455\u200B
\n' ); }); diff --git a/packages/bundle/src/markdown/markdownItPlugins/betterLink.ts b/packages/bundle/src/markdown/markdownItPlugins/betterLink.ts index e841bef644..5ff035d1fb 100644 --- a/packages/bundle/src/markdown/markdownItPlugins/betterLink.ts +++ b/packages/bundle/src/markdown/markdownItPlugins/betterLink.ts @@ -1,5 +1,5 @@ -import iterator from 'markdown-it-for-inline'; import MarkdownIt from 'markdown-it'; +import iterator from 'markdown-it-for-inline'; // Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS. const TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; @@ -30,11 +30,19 @@ type Decoration = { /** Value of "title" attribute of the link. If set to `false`, remove existing attribute. */ title?: AttributeSetter; + + /** Wraps the link with zero-width space. */ + wrapZeroWidthSpace?: boolean; }; // This is used for parsing Markdown for external links. const internalMarkdownIt = new MarkdownIt(); +const ZERO_WIDTH_SPACE_TOKEN = { + content: '\u200b', + type: 'text' +}; + function setTokenAttribute(attrs: Array<[string, string]>, name: string, value?: AttributeSetter) { const index = attrs.findIndex(entry => entry[0] === name); @@ -61,52 +69,65 @@ const betterLink = ( ): typeof MarkdownIt => markdown.use(iterator, 'url_new_win', 'link_open', (tokens, index) => { const indexOfLinkCloseToken = tokens.indexOf(tokens.slice(index + 1).find(({ type }) => type === 'link_close')); - const token = tokens[+index]; + // eslint-disable-next-line no-magic-numbers + const updatedTokens = tokens.splice(index, ~indexOfLinkCloseToken ? indexOfLinkCloseToken - index + 1 : 2); - const [, href] = token.attrs.find(([name]) => name === 'href'); - const nodesInLink = tokens.slice(index + 1, indexOfLinkCloseToken); + try { + const [linkOpenToken] = updatedTokens; + const linkCloseToken = updatedTokens[updatedTokens.length - 1]; - const textContent = nodesInLink - .filter(({ type }) => type === 'text') - .map(({ content }) => content) - .join(' '); + const [, href] = linkOpenToken.attrs.find(([name]) => name === 'href'); + const nodesInLink = updatedTokens.slice(1, updatedTokens.length - 1); - const decoration = decorate(href, textContent); + const textContent = nodesInLink + .filter(({ type }) => type === 'text') + .map(({ content }) => content) + .join(' '); - if (!decoration) { - return; - } + const decoration = decorate(href, textContent); - const { ariaLabel, asButton, className, iconAlt, iconClassName, rel, target, title } = decoration; + if (!decoration) { + return; + } - setTokenAttribute(token.attrs, 'aria-label', ariaLabel); - setTokenAttribute(token.attrs, 'class', className); - setTokenAttribute(token.attrs, 'title', title); + const { ariaLabel, asButton, className, iconAlt, iconClassName, rel, target, title, wrapZeroWidthSpace } = + decoration; - if (iconClassName) { - const iconTokens = internalMarkdownIt.parseInline(``)[0].children; + setTokenAttribute(linkOpenToken.attrs, 'aria-label', ariaLabel); + setTokenAttribute(linkOpenToken.attrs, 'class', className); + setTokenAttribute(linkOpenToken.attrs, 'title', title); - setTokenAttribute(iconTokens[0].attrs, 'class', iconClassName); - setTokenAttribute(iconTokens[0].attrs, 'title', iconAlt); + if (iconClassName) { + const iconTokens = internalMarkdownIt.parseInline(``)[0].children; - // Add an icon before . - ~indexOfLinkCloseToken && tokens.splice(indexOfLinkCloseToken, 0, ...iconTokens); - } + setTokenAttribute(iconTokens[0].attrs, 'class', iconClassName); + setTokenAttribute(iconTokens[0].attrs, 'title', iconAlt); + + // Add an icon before . + // eslint-disable-next-line no-magic-numbers + updatedTokens.splice(-1, 0, ...iconTokens); + } - if (asButton) { - setTokenAttribute(token.attrs, 'href', false); + if (asButton) { + setTokenAttribute(linkOpenToken.attrs, 'href', false); - token.tag = 'button'; + linkOpenToken.tag = 'button'; - setTokenAttribute(token.attrs, 'type', 'button'); - setTokenAttribute(token.attrs, 'value', href); + setTokenAttribute(linkOpenToken.attrs, 'type', 'button'); + setTokenAttribute(linkOpenToken.attrs, 'value', href); - if (~indexOfLinkCloseToken) { - tokens[+indexOfLinkCloseToken].tag = 'button'; + linkCloseToken.tag = 'button'; + } else { + setTokenAttribute(linkOpenToken.attrs, 'rel', rel); + setTokenAttribute(linkOpenToken.attrs, 'target', target); } - } else { - setTokenAttribute(token.attrs, 'rel', rel); - setTokenAttribute(token.attrs, 'target', target); + + if (wrapZeroWidthSpace) { + updatedTokens.splice(0, 0, ZERO_WIDTH_SPACE_TOKEN); + updatedTokens.splice(Infinity, 0, ZERO_WIDTH_SPACE_TOKEN); + } + } finally { + tokens.splice(index, 0, ...updatedTokens); } }); diff --git a/packages/bundle/src/markdown/renderMarkdown.ts b/packages/bundle/src/markdown/renderMarkdown.ts index 846fa0f848..d3a63e3494 100644 --- a/packages/bundle/src/markdown/renderMarkdown.ts +++ b/packages/bundle/src/markdown/renderMarkdown.ts @@ -2,9 +2,9 @@ import { onErrorResumeNext } from 'botframework-webchat-core'; import MarkdownIt from 'markdown-it'; import sanitizeHTML from 'sanitize-html'; -import { pre as respectCRLFPre } from './markdownItPlugins/respectCRLF'; import ariaLabel, { post as ariaLabelPost, pre as ariaLabelPre } from './markdownItPlugins/ariaLabel'; import betterLink from './markdownItPlugins/betterLink'; +import { pre as respectCRLFPre } from './markdownItPlugins/respectCRLF'; import iterateLinkDefinitions from './private/iterateLinkDefinitions'; const SANITIZE_HTML_OPTIONS = Object.freeze({ @@ -88,7 +88,8 @@ export default function render( .use(betterLink, (href: string, textContent: string): BetterLinkDecoration | undefined => { const decoration: BetterLinkDecoration = { rel: 'noopener noreferrer', - target: '_blank' + target: '_blank', + wrapZeroWidthSpace: true }; const ariaLabelSegments: string[] = [textContent]; @@ -101,10 +102,12 @@ export default function render( linkDefinition.title || onErrorResumeNext(() => new URL(linkDefinition.url).host) || linkDefinition.url ); - linkDefinition.identifier === textContent && classes.add('webchat__render-markdown__pure-identifier'); + // linkDefinition.identifier is uppercase, while linkDefinition.label is as-is. + linkDefinition.label === textContent && classes.add('webchat__render-markdown__pure-identifier'); } - if (protocol === 'cite:') { + // For links that would be sanitized out, let's turn them into a button so we could handle them later. + if (!SANITIZE_HTML_OPTIONS.allowedSchemes.map(scheme => `${scheme}:`).includes(protocol)) { decoration.asButton = true; classes.add('webchat__render-markdown__citation'); diff --git a/packages/component/package-lock.json b/packages/component/package-lock.json index a21ebbfb44..4e77c87c41 100644 --- a/packages/component/package-lock.json +++ b/packages/component/package-lock.json @@ -13,6 +13,7 @@ "base64-js": "1.5.1", "classnames": "2.3.2", "compute-scroll-into-view": "1.0.20", + "deep-freeze-strict": "^1.1.1", "event-target-shim": "6.0.2", "markdown-it": "13.0.2", "math-random": "2.0.1", @@ -2771,6 +2772,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/deep-freeze-strict": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/deep-freeze-strict/-/deep-freeze-strict-1.1.1.tgz", + "integrity": "sha512-QemROZMM2IvhAcCFvahdX2Vbm4S/txeq5rFYU9fh4mQP79WTMW5c/HkQ2ICl1zuzcDZdPZ6zarDxQeQMsVYoNA==" + }, "node_modules/define-properties": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", @@ -6892,6 +6898,11 @@ "character-entities": "^2.0.0" } }, + "deep-freeze-strict": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/deep-freeze-strict/-/deep-freeze-strict-1.1.1.tgz", + "integrity": "sha512-QemROZMM2IvhAcCFvahdX2Vbm4S/txeq5rFYU9fh4mQP79WTMW5c/HkQ2ICl1zuzcDZdPZ6zarDxQeQMsVYoNA==" + }, "define-properties": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", diff --git a/packages/component/package.json b/packages/component/package.json index 3db8cb0958..7cbeeb3b8f 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -100,6 +100,7 @@ "botframework-webchat-core": "0.0.0-0", "classnames": "2.3.2", "compute-scroll-into-view": "1.0.20", + "deep-freeze-strict": "^1.1.1", "event-target-shim": "6.0.2", "markdown-it": "13.0.2", "math-random": "2.0.1", diff --git a/packages/component/src/ActivityStatus/OthersActivityStatus.tsx b/packages/component/src/ActivityStatus/OthersActivityStatus.tsx index ac76fb25ff..6ab15ed222 100644 --- a/packages/component/src/ActivityStatus/OthersActivityStatus.tsx +++ b/packages/component/src/ActivityStatus/OthersActivityStatus.tsx @@ -1,54 +1,80 @@ -import { type WebChatActivity } from 'botframework-webchat-core'; +import { + getOrgSchemaMessage, + OrgSchemaAction, + OrgSchemaProject, + parseAction, + parseClaim, + warnOnce, + type WebChatActivity +} from 'botframework-webchat-core'; import classNames from 'classnames'; -import React, { memo, type ReactNode, useMemo } from 'react'; +import React, { memo, useMemo, type ReactNode } from 'react'; -import { isReplyAction, type ReplyAction } from '../types/external/OrgSchema/ReplyAction'; -import { isThing, type Thing } from '../types/external/OrgSchema/Thing'; -import { isVoteAction, type VoteAction } from '../types/external/OrgSchema/VoteAction'; -import { type TypeOfArray } from '../types/internal/TypeOfArray'; +import useStyleSet from '../hooks/useStyleSet'; +import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes'; import Feedback from './private/Feedback/Feedback'; import Originator from './private/Originator'; import Slotted from './Slotted'; import Timestamp from './Timestamp'; -import useStyleSet from '../hooks/useStyleSet'; -type WebChatEntity = TypeOfArray