Add dataset options to better link

Author: compulim

packages/component-better-link/src/betterLinkDocumentMod.dataset.spec.ts

@@ -0,0 +1,55 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+import * as JestGlobals from '@jest/globals';
+import { scenario } from '@testduet/given-when-then';
+import { micromark } from 'micromark';
+import betterLinkDocumentMod from './betterLinkDocumentMod';
+import parseDocumentFragmentFromString from './parseDocumentFragmentFromString';
+import serializeDocumentFragmentIntoString from './serializeDocumentFragmentIntoString';
+
+scenario(
+  '"dataset" option',
+  bdd => {
+    bdd
+      .given('the document fragment', () => ({
+        documentFragment: parseDocumentFragmentFromString(
+          micromark('[Example](https://example.com)', { allowDangerousHtml: true })
+        )
+      }))
+      .when('passing "attributes"', ({ documentFragment }) =>
+        betterLinkDocumentMod(documentFragment, () => ({
+          dataset: { hello: 'World!' }
+        }))
+      )
+      .then('should match snapshot', (_, actual) => {
+        expect(serializeDocumentFragmentIntoString(actual)).toBe(
+          '<p xmlns="http://www.w3.org/1999/xhtml"><a href="https://example.com" data-hello="World!">Example</a></p>'
+        );
+      });
+  },
+  JestGlobals
+);
+
+scenario(
+  '"dataset" option with "asButton: true"',
+  bdd => {
+    bdd
+      .given('the document fragment', () => ({
+        documentFragment: parseDocumentFragmentFromString(
+          micromark('[Example](https://example.com)', { allowDangerousHtml: true })
+        )
+      }))
+      .when('passing "attributes"', ({ documentFragment }) =>
+        betterLinkDocumentMod(documentFragment, () => ({
+          asButton: true,
+          dataset: { hello: 'World!' }
+        }))
+      )
+      .then('should match snapshot', (_, actual) => {
+        expect(serializeDocumentFragmentIntoString(actual)).toBe(
+          '<p xmlns="http://www.w3.org/1999/xhtml"><button type="button" value="https://example.com" data-hello="World!">Example</button></p>'
+        );
+      });
+  },
+  JestGlobals
+);

packages/component-better-link/src/betterLinkDocumentMod.ts

@@ -12,6 +12,9 @@ type BetterLinkDocumentModDecoration = {
   /** Value of "class" attribute of the link. If set to `false`, remove existing attribute. */
   className?: BetterLinkDocumentModAttributeSetter;
 
+  /** Value of "data-*" attributes to be added. */
+  dataset?: DOMStringMap | undefined;
+
   /** Alternate text of the image icon appended to the link. */
   iconAlt?: string;
 
@@ -65,7 +68,7 @@ function betterLinkDocumentMod<T extends Document | DocumentFragment>(
       continue;
     }
 
-    const { ariaLabel, asButton, className, iconAlt, iconClassName, rel, target, title, wrapZeroWidthSpace } =
+    const { ariaLabel, asButton, className, dataset, iconAlt, iconClassName, rel, target, title, wrapZeroWidthSpace } =
       decoration;
 
     setOrRemoveAttribute(anchor, 'aria-label', ariaLabel ?? false);
@@ -83,8 +86,10 @@ function betterLinkDocumentMod<T extends Document | DocumentFragment>(
       anchor.insertAdjacentElement('beforeend', image);
     }
 
+    let datasetTarget: HTMLAnchorElement | HTMLButtonElement = anchor;
+
     if (asButton) {
-      const button = document.createElement('button');
+      const button = (datasetTarget = document.createElement('button'));
 
       copyAttribute(anchor, button, 'aria-label');
       copyAttribute(anchor, button, 'class');
@@ -110,6 +115,18 @@ function betterLinkDocumentMod<T extends Document | DocumentFragment>(
         anchor.insertAdjacentText('afterend', ZERO_WIDTH_SPACE);
       }
     }
+
+    if (dataset) {
+      for (const [key, value] of Object.entries(dataset)) {
+        if (key === 'constructor' || key === 'proto' || key === 'prototype') {
+          continue;
+        }
+
+        // Filtered out dangerous property names.
+        // eslint-disable-next-line security/detect-object-injection
+        datasetTarget.dataset[key] = value;
+      }
+    }
   }
 
   return documentFragment;

packages/component/src/Utils/InlineMarkdown.tsx

@@ -10,15 +10,31 @@ import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyleOptions } from 'botframework-webchat-api/hook.js';
 import { micromark } from 'micromark';
 import React, { useCallback, useMemo } from 'react';
-import { array, function_, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import {
+  args,
+  array,
+  function_,
+  instance,
+  object,
+  optional,
+  parse,
+  pipe,
+  readonly,
+  string,
+  tuple,
+  union,
+  type InferInput
+} from 'valibot';
 
 import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import createCustomEvent from './createCustomEvent';
 
+const referenceEventSchema = union([instance(Event), object({ data: string() })]);
+
 const inlineMarkdownPropsSchema = pipe(
   object({
     markdown: string(),
-    onReference: function_(),
+    onReference: pipe(function_(), args(tuple([referenceEventSchema]))),
     references: optional(array(string()))
   }),
   readonly()
@@ -71,16 +87,13 @@ const InlineMarkdown = (props: InlineMarkdownProps) => {
 
     const documentFragment = parseDocumentFragmentFromString(micromark(markdownWithLinkReferenceDefinitions));
 
-    // Turn "<a href="#retry">Retry</a>" into "<button type="button" value="retry">Retry</button>"
+    // Turn "<a href="#retry">Retry</a>" into "<button type="button" data-markdown-ref="#retry">Retry</button>"
     betterLinkDocumentMod(documentFragment, href => {
       if (href.startsWith('#')) {
-        return { asButton: true };
+        return { asButton: true, dataset: { markdownHref: href } };
       }
     });
 
-    // TODO: [P*] Instead of <button value="">, it need to be <button data-markdown-href="a1b2c"> to trigger the CSS.
-    // TODO: [P*] Remove trailing <p></p>.
-
     return { __html: stripParagraphContainer(serializeDocumentFragmentIntoString(documentFragment)) };
   }, [markdown, references]);
 
@@ -90,7 +103,12 @@ const InlineMarkdown = (props: InlineMarkdownProps) => {
 
       const href = event.target.getAttribute('value') ?? undefined;
 
-      href && onReference?.(createCustomEvent('reference', { data: href }));
+      if (href) {
+        const event = createCustomEvent('reference', { data: href });
+
+        parse(referenceEventSchema, event);
+        onReference?.(event);
+      }
     },
     [onReference]
   );