From df6798b7ecc17e95ff4817c838a6437b3dcb4ee4 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Sun, 27 Apr 2025 16:07:15 -0600
Subject: [PATCH] prettier format

---
 src/features/attributeSelect.tsx | 185 +++++++++++++++++--------------
 1 file changed, 102 insertions(+), 83 deletions(-)

diff --git a/src/features/attributeSelect.tsx b/src/features/attributeSelect.tsx
index 3ef3be8..b1c927b 100644
--- a/src/features/attributeSelect.tsx
+++ b/src/features/attributeSelect.tsx
@@ -41,36 +41,40 @@ const CONFIG = `roam/js/attribute-select`;
 const TEMPLATE_MAP = {
   "No styling": {
     transform: (text: string) => text,
-    description: "No styling"
+    description: "No styling",
   },
   "Remove Double Brackets": {
-    transform: (text: string) => text.replace(/\[\[(.*?)\]\]/g, '$1'),
-    description: "Removes [[text]] format"
+    transform: (text: string) => text.replace(/\[\[(.*?)\]\]/g, "$1"),
+    description: "Removes [[text]] format",
   },
   "Convert to Uppercase": {
     transform: (text: string) => text.toUpperCase(),
-    description: "Makes text all caps"
+    description: "Makes text all caps",
   },
   "Capitalize Words": {
-    transform: (text: string) => text.split(' ').map(word => {
-      if (!word) return '';
-      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-    }).join(' '),
-    description: "Makes first letter of each word uppercase"
+    transform: (text: string) =>
+      text
+        .split(" ")
+        .map((word) => {
+          if (!word) return "";
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        })
+        .join(" "),
+    description: "Makes first letter of each word uppercase",
   },
   "Custom Format": {
     transform: (text: string, pattern?: string, replacement?: string) => {
       if (!pattern) return text;
       try {
         const regex = new RegExp(pattern);
-        return text.replace(regex, replacement || '');
+        return text.replace(regex, replacement || "");
       } catch (e) {
         console.error("Invalid regex:", e);
         return text;
       }
     },
-    description: "Apply custom regex pattern"
-  }
+    description: "Apply custom regex pattern",
+  },
 } as const;
 
 type TemplateName = keyof typeof TEMPLATE_MAP;
@@ -86,16 +90,16 @@ const applyFormatting = ({
   text,
   templateName,
   customPattern,
-  customReplacement
+  customReplacement,
 }: FormatParams): string => {
   try {
     const template = TEMPLATE_MAP[templateName as TemplateName];
     if (!template) return text;
-    
+
     if (templateName === "Custom Format" && customPattern) {
       return template.transform(text, customPattern, customReplacement);
     }
-    
+
     return template.transform(text);
   } catch (e) {
     console.error("Error in transform function:", e);
@@ -128,7 +132,7 @@ const AttributeButtonPopover = <T extends ReactText>({
   useEffect(() => {
     setSliderValue(Number(currentValue));
   }, [isOpen, currentValue]);
-  
+
   const formatConfig = useMemo(() => {
     try {
       const configUid = getPageUidByPageTitle(CONFIG);
@@ -140,39 +144,42 @@ const AttributeButtonPopover = <T extends ReactText>({
         key: attributeName,
         parentUid: attributesNode.uid,
       }).uid;
-      
+
       return {
-        templateName: getSettingValueFromTree({
-          key: "template",
-          parentUid: attributeUid,
-        }) || "No styling",
-        
+        templateName:
+          getSettingValueFromTree({
+            key: "template",
+            parentUid: attributeUid,
+          }) || "No styling",
+
         customPattern: getSettingValueFromTree({
           key: "customPattern",
           parentUid: attributeUid,
         }),
-        
+
         customReplacement: getSettingValueFromTree({
           key: "customReplacement",
           parentUid: attributeUid,
-        })
+        }),
       };
     } catch (e) {
       console.error("Error getting format config:", e);
       return {
         templateName: "No styling",
         customPattern: undefined,
-        customReplacement: undefined
+        customReplacement: undefined,
       };
     }
   }, [attributeName]);
 
-  const formatText = useMemo(() => 
-    (text: string) => applyFormatting({
-      text,
-      ...formatConfig
-    }),
-  [formatConfig]);
+  const formatText = useMemo(
+    () => (text: string) =>
+      applyFormatting({
+        text,
+        ...formatConfig,
+      }),
+    [formatConfig]
+  );
 
   // Only show filter if we have more than 10 items
   const shouldFilter = filterable && items.length > 10;
@@ -586,36 +593,41 @@ const TabsPanel = ({
   const [optionType, setOptionType] = useState(initialOptionType || "text");
   const [min, setMin] = useState(Number(rangeNode.children[0]?.text) || 0);
   const [max, setMax] = useState(Number(rangeNode.children[1]?.text) || 10);
-  
-  const { initialTemplate, initialCustomPattern, initialCustomReplacement } = useMemo(() => {
-    const savedTemplate = getSettingValueFromTree({
-      key: "template",
-      parentUid: attributeUid,
-    }) || "No styling";
-    
-    const savedCustomPattern = getSettingValueFromTree({
-      key: "customPattern",
-      parentUid: attributeUid,
-    }) || "";
-    
-    const savedCustomReplacement = getSettingValueFromTree({
-      key: "customReplacement",
-      parentUid: attributeUid,
-    }) || "";
-    
-    return { 
-      initialTemplate: savedTemplate, 
-      initialCustomPattern: savedCustomPattern,
-      initialCustomReplacement: savedCustomReplacement
-    };
-  }, [attributeUid]);
+
+  const { initialTemplate, initialCustomPattern, initialCustomReplacement } =
+    useMemo(() => {
+      const savedTemplate =
+        getSettingValueFromTree({
+          key: "template",
+          parentUid: attributeUid,
+        }) || "No styling";
+
+      const savedCustomPattern =
+        getSettingValueFromTree({
+          key: "customPattern",
+          parentUid: attributeUid,
+        }) || "";
+
+      const savedCustomReplacement =
+        getSettingValueFromTree({
+          key: "customReplacement",
+          parentUid: attributeUid,
+        }) || "";
+
+      return {
+        initialTemplate: savedTemplate,
+        initialCustomPattern: savedCustomPattern,
+        initialCustomReplacement: savedCustomReplacement,
+      };
+    }, [attributeUid]);
 
   const [selectedTemplate, setSelectedTemplate] = useState(initialTemplate);
   const [customPattern, setCustomPattern] = useState(initialCustomPattern);
-  const [customReplacement, setCustomReplacement] = useState(initialCustomReplacement);
+  const [customReplacement, setCustomReplacement] = useState(
+    initialCustomReplacement
+  );
   const [isValidRegex, setIsValidRegex] = useState(true);
 
-
   // For a better UX replace renderBlock with a controlled list
   // add Edit, Delete, and Add New buttons
   const contentRef = useRef(null);
@@ -712,7 +724,7 @@ const TabsPanel = ({
 
           {optionType === "text" && (
             <>
-              <FormGroup 
+              <FormGroup
                 label={
                   <div className="flex items-center gap-2">
                     <span>Display Format</span>
@@ -723,7 +735,7 @@ const TabsPanel = ({
                       <Icon icon="info-sign" className="opacity-80" />
                     </Tooltip>
                   </div>
-                } 
+                }
                 className="m-0"
               >
                 <div className="flex flex-col space-y-2">
@@ -740,31 +752,35 @@ const TabsPanel = ({
                       }}
                       activeItem={selectedTemplate}
                     />
-                    <Tooltip  
+                    <Tooltip
                       content={
                         <div className="text-sm">
                           <p className="font-bold mb-2">Available Templates:</p>
                           <ul className="list-disc list-inside space-y-1">
-                            {Object.entries(TEMPLATE_MAP).map(([name, { description }]) => (
-                              <li key={name}>
-                                <span className="font-mono">{name}:</span>{" "}
-                                {description}
-                              </li>
-                            ))}
+                            {Object.entries(TEMPLATE_MAP).map(
+                              ([name, { description }]) => (
+                                <li key={name}>
+                                  <span className="font-mono">{name}:</span>{" "}
+                                  {description}
+                                </li>
+                              )
+                            )}
                           </ul>
                         </div>
                       }
                       placement="top"
-                    >           
-                      <Icon icon="info-sign" className="opacity-80" />   
+                    >
+                      <Icon icon="info-sign" className="opacity-80" />
                     </Tooltip>
                   </div>
-                  
+
                   {selectedTemplate === "Custom Format" && (
                     <div className="space-y-2">
                       <FormGroup label="Pattern (regex)" className="m-0">
                         <input
-                          className={`bp3-input font-mono text-sm w-full ${!isValidRegex ? 'bp3-intent-danger' : ''}`}
+                          className={`bp3-input font-mono text-sm w-full ${
+                            !isValidRegex ? "bp3-intent-danger" : ""
+                          }`}
                           placeholder="E.g., \[\[(.*?)\]\]"
                           value={customPattern}
                           onChange={(e) => {
@@ -789,7 +805,7 @@ const TabsPanel = ({
                           </div>
                         )}
                       </FormGroup>
-                      
+
                       <FormGroup label="Replacement" className="m-0">
                         <input
                           className="bp3-input font-mono text-sm w-full"
@@ -806,22 +822,24 @@ const TabsPanel = ({
                           }}
                         />
                       </FormGroup>
-                      
+
                       <div className="bg-gray-100 p-2 rounded text-sm">
                         <div className="font-bold mb-1">Preview:</div>
                         <div>
-                          <span className="font-bold">Input:</span> <span className="font-mono">[[Example]]</span>
+                          <span className="font-bold">Input:</span>{" "}
+                          <span className="font-mono">[[Example]]</span>
                         </div>
                         <div>
-                          <span className="font-bold">Output:</span> <span className="font-mono">
-                            {customPattern ? 
-                              applyFormatting({
-                                text: "[[Example]]",
-                                templateName: "Custom Format",
-                                customPattern,
-                                customReplacement
-                              }) :
-                              "[[Example]]"}
+                          <span className="font-bold">Output:</span>{" "}
+                          <span className="font-mono">
+                            {customPattern
+                              ? applyFormatting({
+                                  text: "[[Example]]",
+                                  templateName: "Custom Format",
+                                  customPattern,
+                                  customReplacement,
+                                })
+                              : "[[Example]]"}
                           </span>
                         </div>
                       </div>
@@ -834,7 +852,8 @@ const TabsPanel = ({
                 text={"Find All Current Values"}
                 rightIcon={"search"}
                 onClick={() => {
-                  const potentialOptions = findAllPotentialOptions(attributeName);
+                  const potentialOptions =
+                    findAllPotentialOptions(attributeName);
                   setPotentialOptions(potentialOptions);
                   setShowPotentialOptions(true);
                 }}
@@ -1010,7 +1029,7 @@ export const toggleFeature = async (flag: boolean) => {
       .inline-menu-item-select > span > div {display:inline} 
       #attribute-select-config .rm-block-separator {display: none;}
     `);
-    
+
     definedAttributes = getDefinedAttributes();
     const pageUid =
       getPageUidByPageTitle(CONFIG) ||