@meetelise/chat 1.53.0 → 1.53.1

package/src/WebComponent/pubnub-message.ts

@@ -107,21 +107,25 @@ export class PubnubMessage extends LitElement {
         const allWords = this.preserveHTMLTags(sanitizedLine);
         if (!allWords) return html``;
         return html`${allWords.map((word) => {
-            if (hyperlinks.find((obj) => obj.id === word)) {
-              // EliseAI made hyperlink
-              const link = hyperlinks.find((obj) => obj.id === word);
-              if (!link) return;
-              imagesToDisplay.push({
-                redirectTo: link?.link,
-                source: link?.link,
+            const markedLinks = hyperlinks.filter((obj) =>
+              word.includes(obj.id)
+            );
+            if (markedLinks.length) {
+              // EliseAI made hyperlink, possibly inside markdown formatting like <b>
+              let wordWithLinks = word;
+              markedLinks.forEach((link) => {
+                imagesToDisplay.push({
+                  redirectTo: link.link,
+                  source: link.link,
+                });
+                wordWithLinks = wordWithLinks.replace(
+                  link.id,
+                  this.hyperlinkHTML(link.link, link.hyperlink)
+                );
               });
-              return html`<a
-                class="redirect-link"
-                href="${link?.link}"
-                target="_blank"
-                rel="noopener noreferrer"
-                >${link?.hyperlink}
-              </a>`;
+              return html`${unsafeHTML(
+                DOMPurify.sanitize(wordWithLinks, { ADD_ATTR: ["target"] })
+              )} `;
             }
             if (urlRegex.test(word)) {
               // general url
@@ -145,6 +149,16 @@ export class PubnubMessage extends LitElement {
     });
   }
 
+  private hyperlinkHTML(link: string, hyperlink: string): string {
+    const anchor = document.createElement("a");
+    anchor.className = "redirect-link";
+    anchor.href = link;
+    anchor.target = "_blank";
+    anchor.rel = "noopener noreferrer";
+    anchor.textContent = hyperlink;
+    return anchor.outerHTML;
+  }
+
   private preserveHTMLTags(text: string): string[] {
     const tagRegex = /(<\/?[a-z][^>]*>[^<]*<\/?[a-z]*>|[^\s]+[.,?!]?|\S)/gi;
     const splitTags = text.match(tagRegex);

package/src/pubnub-message.test.ts

@@ -0,0 +1,44 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import type { SimpleTextChatMessage } from "./MyPubnub";
+import type { PubnubMessage } from "./WebComponent/pubnub-message";
+
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+const renderMessage = async (message: string): Promise<ShadowRoot> => {
+  const element = document.createElement("pubnub-message") as PubnubMessage;
+  element.message = {
+    timestamp: 100,
+    message,
+    isLeadMessage: false,
+    chunks: [{ text: message, order: 0, isDone: true }],
+    type: "text" as SimpleTextChatMessage["type"],
+  };
+  document.body.appendChild(element);
+  await element.updateComplete;
+  await element.updateComplete;
+  return element.shadowRoot as ShadowRoot;
+};
+
+it("renders bolded and plain markdown links as links to the community", async () => {
+  const root = await renderMessage(
+    "- **[Alder House](https://www.clg-test.com/alder)** apartment 109\n" +
+      "- [Cedar Row](https://www.clg-test.com/cedar) apartment 103"
+  );
+
+  const boldLink = root.querySelector("b a.redirect-link");
+  expect(boldLink?.getAttribute("href")).to.equal(
+    "https://www.clg-test.com/alder"
+  );
+  expect(boldLink?.getAttribute("target")).to.equal("_blank");
+  expect(boldLink?.textContent?.trim()).to.equal("Alder House");
+
+  const plainLink = Array.from(root.querySelectorAll("a.redirect-link")).find(
+    (anchor) => anchor.textContent?.trim() === "Cedar Row"
+  );
+  expect(plainLink?.getAttribute("href")).to.equal(
+    "https://www.clg-test.com/cedar"
+  );
+  expect(plainLink?.getAttribute("target")).to.equal("_blank");
+  expect(root.textContent).not.to.match(/[0-9a-f]{32}/);
+});