fix: support duplicate SmartBlock buttons with same label (#136)

src/index.ts

@@ -603,16 +603,18 @@ export default runExtension(async ({ extensionAPI }) => {
     el,
     parentUid,
     hideIcon,
+    occurrenceIndex = 0,
   }: {
     textContent: string;
     text: string;
     el: HTMLElement;
     parentUid: string;
     hideIcon?: boolean;
+    occurrenceIndex?: number;
   }) => {
     // We include textcontent here bc there could be multiple smartblocks in a block
     const label = textContent.trim();
-    const parsed = parseSmartBlockButton(label, text);
+    const parsed = parseSmartBlockButton(label, text, occurrenceIndex);
     if (parsed) {
       const { index, full, buttonContent, workflowName, variables } = parsed;
       const clickListener = () => {
@@ -811,29 +813,107 @@ export default runExtension(async ({ extensionAPI }) => {
   };
 
   const unloads = new Set<() => void>();
+  // Track button occurrences per block: blockUid -> label -> count
+  const buttonOccurrences = new Map<string, Map<string, number>>();
+  const buttonTextByBlockUid = new Map<string, string>();
+  const buttonGenerationByBlockUid = new Map<string, number>();
+  const buttonCleanupByElement = new Map<HTMLElement, () => void>();
+  const buttonElementsByBlockUid = new Map<string, Set<HTMLElement>>();
+
   const buttonLogoObserver = createHTMLObserver({
     className: "bp3-button bp3-small dont-focus-block",
     tag: "BUTTON",
     callback: (b) => {
       const parentUid = getBlockUidFromTarget(b);
       if (parentUid && !b.hasAttribute("data-roamjs-smartblock-button")) {
+        // Clean up disconnected elements first so stale counts don't break
+        // occurrence tracking during re-renders.
+        const trackedButtons = buttonElementsByBlockUid.get(parentUid);
+        if (trackedButtons) {
+          Array.from(trackedButtons).forEach((el) => {
+            if (!el.isConnected) {
+              buttonCleanupByElement.get(el)?.();
+            }
+          });
+        }
+
         const text = getTextByBlockUid(parentUid);
         b.setAttribute("data-roamjs-smartblock-button", "true");
 
-        // We include textcontent here bc there could be multiple smartblocks in a block
-        // TODO: if multiple smartblocks have the same textContent, we need to distinguish them
+        const cachedText = buttonTextByBlockUid.get(parentUid);
+        if (cachedText !== text) {
+          buttonTextByBlockUid.set(parentUid, text);
+          buttonGenerationByBlockUid.set(
+            parentUid,
+            (buttonGenerationByBlockUid.get(parentUid) || 0) + 1
+          );
+          buttonOccurrences.set(parentUid, new Map());
+        } else if (!buttonOccurrences.has(parentUid)) {
+          buttonOccurrences.set(parentUid, new Map());
+        }
+
+        // Track occurrence index for buttons with the same label in the same block
+        const label = (b.textContent || "").trim();
+        const blockOccurrences = buttonOccurrences.get(parentUid)!;
+        const occurrenceIndex = blockOccurrences.get(label) || 0;
+        blockOccurrences.set(label, occurrenceIndex + 1);
+        const generation = buttonGenerationByBlockUid.get(parentUid) || 0;
+
         const unload = registerElAsSmartBlockTrigger({
           textContent: b.textContent || "",
           text,
           el: b,
           parentUid,
+          occurrenceIndex,
         });
-        unloads.add(() => {
+        const cleanup = () => {
+          if (!buttonCleanupByElement.has(b)) return;
+          buttonCleanupByElement.delete(b);
+          unloads.delete(cleanup);
           b.removeAttribute("data-roamjs-smartblock-button");
           unload();
-        });
+          const blockButtons = buttonElementsByBlockUid.get(parentUid);
+          if (blockButtons) {
+            blockButtons.delete(b);
+            if (blockButtons.size === 0) {
+              buttonElementsByBlockUid.delete(parentUid);
+              buttonOccurrences.delete(parentUid);
+              buttonTextByBlockUid.delete(parentUid);
+              buttonGenerationByBlockUid.delete(parentUid);
+            }
+          }
+          if ((buttonGenerationByBlockUid.get(parentUid) || 0) !== generation) {
+            return;
+          }
+          // Clean up occurrence tracking when button is removed
+          const blockOccurrences = buttonOccurrences.get(parentUid);
+          if (blockOccurrences) {
+            const currentCount = blockOccurrences.get(label) || 0;
+            if (currentCount <= 1) {
+              blockOccurrences.delete(label);
+              if (blockOccurrences.size === 0) {
+                buttonOccurrences.delete(parentUid);
+                if (!buttonElementsByBlockUid.get(parentUid)?.size) {
+                  buttonTextByBlockUid.delete(parentUid);
+                  buttonGenerationByBlockUid.delete(parentUid);
+                }
+              }
+            } else {
+              blockOccurrences.set(label, currentCount - 1);
+            }
+          }
+        };
+        const blockButtons =
+          buttonElementsByBlockUid.get(parentUid) || new Set<HTMLElement>();
+        blockButtons.add(b);
+        buttonElementsByBlockUid.set(parentUid, blockButtons);
+        buttonCleanupByElement.set(b, cleanup);
+        unloads.add(cleanup);
       }
     },
+    removeCallback: (b) => {
+      buttonCleanupByElement.get(b)?.();
+    },
   });
 
   const todoObserver = createHTMLObserver({

src/utils/parseSmartBlockButton.ts

@@ -1,6 +1,10 @@
+const escapeRegex = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
 export const parseSmartBlockButton = (
   label: string,
-  text: string
+  text: string,
+  occurrenceIndex: number = 0
 ):
   | {
       index: number;
@@ -14,11 +18,22 @@ export const parseSmartBlockButton = (
   const trimmedLabel = label.trim();
   const buttonRegex = trimmedLabel
     ? new RegExp(
-        `{{(${trimmedLabel.replace(/\\+/g, "\\+")}):(?:42)?SmartBlock:(.*?)}}`
+        `{{(${escapeRegex(trimmedLabel)}):(?:42)?SmartBlock:(.*?)}}`,
+        "g"
       )
-    : /{{\s*:(?:42)?SmartBlock:(.*?)}}/;
-  const match = buttonRegex.exec(text);
-  if (!match) return null;
+    : /{{\s*:(?:42)?SmartBlock:(.*?)}}/g;
+
+  // Find all matches
+  const matches = Array.from(text.matchAll(buttonRegex));
+  if (
+    matches.length === 0 ||
+    occurrenceIndex < 0 ||
+    occurrenceIndex >= matches.length
+  ) {
+    return null;
+  }
+
+  const match = matches[occurrenceIndex];
   const index = match.index;
   const full = match[0];
   const buttonContent = trimmedLabel ? match[1] || "" : "";

tests/buttonParsing.test.ts

@@ -65,3 +65,68 @@ test("parses SmartBlock button for today's entry", () => {
     ButtonContent: "Create Today's Entry",
   });
 });
+
+test("parses multiple labeled SmartBlock buttons in the same block", () => {
+  const text =
+    "{{Run It:SmartBlock:WorkflowOne:RemoveButton=false}} and {{Run It:SmartBlock:WorkflowTwo:Icon=locate,Order=last}}";
+  const first = parseSmartBlockButton("Run It", text, 0);
+  const second = parseSmartBlockButton("Run It", text, 1);
+  expect(first?.workflowName).toBe("WorkflowOne");
+  expect(first?.variables).toMatchObject({
+    RemoveButton: "false",
+    ButtonContent: "Run It",
+  });
+  expect(second?.workflowName).toBe("WorkflowTwo");
+  expect(second?.variables).toMatchObject({
+    Icon: "locate",
+    Order: "last",
+    ButtonContent: "Run It",
+  });
+});
+
+test("parses multiple unlabeled SmartBlock buttons in the same block", () => {
+  const text =
+    "{{:SmartBlock:first:Icon=locate}} and {{:SmartBlock:second:RemoveButton=false}}";
+  const first = parseSmartBlockButton("", text, 0);
+  const second = parseSmartBlockButton("", text, 1);
+  expect(first?.buttonText).toBe("first:Icon=locate");
+  expect(first?.variables).toMatchObject({
+    Icon: "locate",
+    ButtonContent: "",
+  });
+  expect(second?.buttonText).toBe("second:RemoveButton=false");
+  expect(second?.variables).toMatchObject({
+    RemoveButton: "false",
+    ButtonContent: "",
+  });
+});
+
+test("returns null when occurrence index is out of bounds", () => {
+  const text = "{{Only One:SmartBlock:Workflow}}";
+  const result = parseSmartBlockButton("Only One", text, 2);
+  expect(result).toBeNull();
+});
+
+test("returns null when occurrence index is negative", () => {
+  const text = "{{Only One:SmartBlock:Workflow}}";
+  const result = parseSmartBlockButton("Only One", text, -1);
+  expect(result).toBeNull();
+});
+
+test("parses SmartBlock button label containing plus signs", () => {
+  const text = "{{Add+More:SmartBlock:PlusWorkflow}}";
+  const result = parseSmartBlockButton("Add+More", text);
+  expect(result?.workflowName).toBe("PlusWorkflow");
+  expect(result?.variables).toMatchObject({
+    ButtonContent: "Add+More",
+  });
+});
+
+test("parses SmartBlock button label with regex special characters", () => {
+  const text = "{{Add+(Test)[One]?:SmartBlock:WeirdWorkflow}}";
+  const result = parseSmartBlockButton("Add+(Test)[One]?", text);
+  expect(result?.workflowName).toBe("WeirdWorkflow");
+  expect(result?.variables).toMatchObject({
+    ButtonContent: "Add+(Test)[One]?",
+  });
+});