fix: multiple titles/urls doesn't work properly (#349)

* refactor: extract buildTemplate for testing

* test: add test for buildTemplate

* fix: buildTemplate

* chore(build): eslint-disable

Author: zaki-yama

src/options/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { Options } from "./Options";
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Options />

src/popup/index.tsx

@@ -16,6 +16,7 @@ chrome.tabs.query(queryInfo, function (tabs) {
     const url = tab.url || "";
     copyToClipboard(options.format, title, escapeBrackets(url));
 
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ReactDOM.createRoot(document.getElementById("root")!).render(
       <React.StrictMode>
         <Popup title={title} url={escapeBrackets(url)} />

src/util.test.ts

@@ -2,6 +2,7 @@ import {
   escapeTabsAndNewLines,
   unescapeTabsAndNewLines,
   escapeBrackets,
+  buildTemplate,
 } from "./util";
 import { describe, test, expect } from "vitest";
 
@@ -39,3 +40,31 @@ describe("escapeBrackets", () => {
     expect(escapeBrackets(arg)).toBe(expected);
   });
 });
+
+describe("buildTemplate", () => {
+  test.each([
+    {
+      template: "[${title}](${url})",
+      title: "dummy title",
+      url: "https://example.com",
+      expected: "[dummy title](https://example.com)",
+    },
+    // multiple titles
+    // ref. #348
+    {
+      template: "${title} - [${title}](${url})",
+      title: "dummy title",
+      url: "https://example.com",
+      expected: "dummy title - [dummy title](https://example.com)",
+    },
+    // multiple urls
+    {
+      template: "${url} - [${title}](${url})",
+      title: "dummy title",
+      url: "https://example.com",
+      expected: "https://example.com - [dummy title](https://example.com)",
+    },
+  ])("build templates", ({ template, title, url, expected }) => {
+    expect(buildTemplate(template, title, url)).toBe(expected);
+  });
+});

src/util.ts

@@ -14,10 +14,14 @@ export function escapeBrackets(str: string) {
     .replace(/\]/g, escape);
 }
 
+export function buildTemplate(template: string, title: string, url: string) {
+  return template.replaceAll("${title}", title).replaceAll("${url}", url);
+}
+
 export function copyToClipboard(template: string, title: string, url: string) {
   console.log("copyToClipboard", template, title, url);
 
-  const textToCopy = template.replace("${title}", title).replace("${url}", url);
+  const textToCopy = buildTemplate(template, title, url);
 
   const listener = (event: any) => {
     event.clipboardData.setData("text/plain", `${textToCopy}`);