Add icon argument to smartblock buttons (#134)

* Add icon customization for SmartBlock buttons with Blueprint icons

Co-authored-by: mclicks <mclicks@gmail.com>

* Update documentation for SmartBlock icon parameter and refactor icon handling in code

- Corrected capitalization of the `icon` parameter to `Icon` in documentation.
- Enhanced examples to reflect the updated parameter name.
- Refactored icon handling logic in the code to validate Blueprint icon names and improve icon display logic.
- Adjusted default icon display behavior based on the new parameter structure.

* 1.11.0

* Update SmartBlock icon examples in documentation to reflect actual Blueprint.js icons

* Update SmartBlock icon documentation to clarify Blueprint.js icon names

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: mdroidian

docs/060-alternative-methods.md

@@ -50,7 +50,7 @@ The caption of the button is also available in the SmartBlock workflow under the
 
 ## Predefined Variables
 
-There are currently 5 predefined variables: `RemoveButton`, `Order`, `TargetRef`, `Clear`, and `Sibling`.
+There are currently 6 predefined variables: `RemoveButton`, `Order`, `TargetRef`, `Clear`, `Sibling`, and `Icon`.
 
 ### Remove Button
 
@@ -110,6 +110,25 @@ This button will not remove the Smartblock button, clear existing text on the bl
 
 https://github.com/RoamJS/smartblocks/assets/3792666/eed8027b-179d-437b-a0be-c88b1d577c6a
 
+### Icon
+
+By default, SmartBlock buttons display a lego icon. You can customize or disable this icon using the `Icon` parameter:
+
+**Examples**
+
+- `{{Today:SmartBlock:myWorkflow:Icon=false}}` - No icon will be displayed
+- `{{Today:SmartBlock:myWorkflow:Icon=none}}` - No icon will be displayed
+- `{{Today:SmartBlock:myWorkflow:Icon=clipboard}}` - Display a Blueprint.js clipboard icon
+- `{{Today:SmartBlock:myWorkflow:Icon=refresh}}` - Display a Blueprint.js refresh icon
+
+The Icon parameter accepts:
+
+- `false` or `none` - Hides the icon completely
+- Any valid [Blueprint.js icon name](https://blueprintjs.com/docs/versions/3/#icons) - Displays that Blueprint icon instead of the default lego icon
+- When omitted - Shows the default lego icon
+
+Note: The global "Hide Button Icon" setting overrides the `Icon` parameter.
+
 # Bulk Trigger
 
 You can run multiple SmartBlock workflows across multiple pages. In the Roam command palette, there will be an option called "Run Multiple SmartBlocks", which will open this dialog on click:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "smartblocks",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Create custom and programmable templates from within Roam!",
   "main": "./build/main.js",
   "scripts": {

package.json

@@ -45,6 +45,7 @@ import DailyConfigComponent from "./components/DailyConfigComponent";
 import { runDaily } from "./utils/scheduleNextDailyRun";
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
 import { zCommandOutput } from "./utils/zodTypes";
+import { IconNames } from "@blueprintjs/icons";
 
 const getLegacy42Setting = (name: string) => {
   const settings = Object.fromEntries(
@@ -556,11 +557,21 @@ export default runExtension(async ({ extensionAPI }) => {
         [0]: full,
       } = match;
       const [workflowName, args = ""] = buttonText.split(":");
+      const variables = Object.fromEntries(
+        args
+          .replace(/\[\[[^\]]+\]\]/g, (m) => m.replace(/,/g, "ESCAPE_COMMA"))
+          .split(",")
+          .filter((s) => !!s)
+          .map((v) => v.replace(/ESCAPE_COMMA/g, ",").split("="))
+          .map(([k, v = ""]) => [k, v])
+      );
+      variables["ButtonContent"] = buttonContent;
       const clickListener = () => {
         const workflows = getCustomWorkflows();
         const availableWorkflows = getCleanCustomWorkflows(workflows);
         const { uid: srcUid } =
           availableWorkflows.find(({ name }) => name === workflowName) || {};
+
         if (!srcUid) {
           createBlock({
             node: {
@@ -570,18 +581,6 @@ export default runExtension(async ({ extensionAPI }) => {
             parentUid,
           });
         } else {
-          const variables = Object.fromEntries(
-            args
-              .replace(/\[\[[^\]]+\]\]/g, (m) =>
-                m.replace(/,/g, "ESCAPE_COMMA")
-              )
-              .split(",")
-              .filter((s) => !!s)
-              .map((v) => v.replace(/ESCAPE_COMMA/g, ",").split("="))
-              .map(([k, v = ""]) => [k, v])
-          );
-          variables["ButtonContent"] = buttonContent;
-
           const keepButton =
             /false/i.test(variables["RemoveButton"]) ||
             /false/i.test(variables["42RemoveButton"]);
@@ -710,20 +709,48 @@ export default runExtension(async ({ extensionAPI }) => {
           }
         }
       };
+
       el.addEventListener("click", clickListener);
-      if (!hideButtonIcon && !hideIcon) {
-        const img = new Image();
-        img.src =
-          "https://raw.githubusercontent.com/RoamJS/smartblocks/main/src/img/lego3blocks.png";
-        img.width = 17;
-        img.height = 14;
-        img.style.marginRight = "7px";
-        el.insertBefore(img, el.firstChild);
+
+      const iconSetting = variables["Icon"]?.toLowerCase();
+
+      const shouldHideIcon =
+        hideButtonIcon ||
+        hideIcon ||
+        iconSetting === "false" ||
+        iconSetting === "none";
+
+      const isValidBlueprintIcon = (
+        name: string
+      ): name is (typeof IconNames)[keyof typeof IconNames] =>
+        Object.values(IconNames).includes(name as any);
+
+      if (!shouldHideIcon) {
+        let iconElement: HTMLElement | null = null;
+
+        if (iconSetting && isValidBlueprintIcon(iconSetting)) {
+          iconElement = document.createElement("span");
+          iconElement.className = `bp3-icon bp3-icon-${iconSetting}`;
+          iconElement.style.marginRight = "7px";
+          iconElement.style.marginLeft = "0px";
+        } else {
+          // Default lego icon
+          const img = new Image();
+          img.src =
+            "https://raw.githubusercontent.com/RoamJS/smartblocks/main/src/img/lego3blocks.png";
+          img.style.marginRight = "7px";
+          img.width = 17;
+          img.height = 14;
+          iconElement = img;
+        }
+
+        el.insertBefore(iconElement, el.firstChild);
         return () => {
-          img.remove();
+          iconElement?.remove();
           el.removeEventListener("click", clickListener);
         };
       }
+
       return () => {
         el.removeEventListener("click", clickListener);
       };