botframework-webchat 4.16.1-main.20240405.136b5a4 → 4.17.0-main.20240408.d0aa541

package/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(`![](${TRANSPARENT_GIF})`)[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(`![](${TRANSPARENT_GIF})`)[0].children;
 
-      // Add an icon before </a>.
-      ~indexOfLinkCloseToken && tokens.splice(indexOfLinkCloseToken, 0, ...iconTokens);
-    }
+        setTokenAttribute(iconTokens[0].attrs, 'class', iconClassName);
+        setTokenAttribute(iconTokens[0].attrs, 'title', iconAlt);
+
+        // Add an icon before </a>.
+        // 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);
     }
   });
 

package/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');