From b1fc8f322b20e9ed031838673393b8facc201e8a Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Wed, 2 Apr 2025 13:39:14 -0400
Subject: [PATCH 1/3] add formating option

---
 src/features/attributeSelect.tsx | 180 ++++++++++++++++++++++++++++---
 1 file changed, 163 insertions(+), 17 deletions(-)

diff --git a/src/features/attributeSelect.tsx b/src/features/attributeSelect.tsx
index 09bcb4d..f0cdac4 100644
--- a/src/features/attributeSelect.tsx
+++ b/src/features/attributeSelect.tsx
@@ -12,6 +12,8 @@ import {
   NumericInput,
   Slider,
   Popover,
+  Icon,
+  Tooltip,
 } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";
 import createHTMLObserver from "roamjs-components/dom/createHTMLObserver";
@@ -35,6 +37,17 @@ import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromT
 
 const CONFIG = `roam/js/attribute-select`;
 
+const TEMPLATE_MAP = {
+  "No styling": "text => text",
+  "Remove Double Brackets": `text => text.replace(/^\\[\\[(.*?)\\]\\]$/g, '$1')`,
+  "Convert to Uppercase": "text => text.toUpperCase()",
+  "Add Prefix": "text => `Status: ${text}`",
+  "Capitalize Words": "text => text.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')",
+  "Custom Format": "text => text"
+} as const;
+
+type TemplateName = keyof typeof TEMPLATE_MAP;
+
 type AttributeButtonPopoverProps<T> = {
   items: T[];
   onItemSelect?: (selectedItem: T) => void;
@@ -59,17 +72,40 @@ const AttributeButtonPopover = <T extends ReactText>({
     return String(item).toLowerCase().includes(query.toLowerCase());
   };
   const [sliderValue, setSliderValue] = useState(0);
+
   useEffect(() => {
     setSliderValue(Number(currentValue));
   }, [isOpen, currentValue]);
 
   const formatDisplayText = (text: string): string => {
-    // TODO: for doantrang982/eng-77-decouple-display-from-output: Create formatDisplayText from configPage
-    // const match = text.match(/\[\[(.*?)\]\]/);
-    // if (match && match[1]) {
-    //   return match[1];
-    // }
-    return text;
+    try {
+      const configUid = getPageUidByPageTitle(CONFIG);
+      const attributesNode = getSubTree({
+        key: "attributes",
+        parentUid: configUid,
+      });
+      const attributeUid = getSubTree({
+        key: attributeName,
+        parentUid: attributesNode.uid,
+      }).uid;
+      const format = getSettingValueFromTree({
+        key: "format",
+        parentUid: attributeUid,
+      }) || "text => text";
+
+      const transform = new Function("text", `
+        try {
+          return (${format})(text);
+        } catch (e) {
+          console.error("Error in transform function:", e);
+          return text;
+        }
+      `) as (text: string) => string;
+      return transform(text);
+    } catch (e) {
+      console.error("Invalid transformation function:", e);
+      return text;
+    }
   };
 
   // Only show filter if we have more than 10 items
@@ -82,7 +118,7 @@ const AttributeButtonPopover = <T extends ReactText>({
       items={items}
       activeItem={currentValue as T}
       filterable={shouldFilter}
-      // transformItem={(item) => formatDisplayText(String(item))}
+      transformItem={(item) => formatDisplayText(String(item))}
       onItemSelect={(s) => {
         updateBlock({
           text: `${attributeName}:: ${s}`,
@@ -471,6 +507,33 @@ 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 { initialFormat, initialTemplate } = useMemo(() => {
+    const savedFormat = getSettingValueFromTree({
+      key: "format",
+      parentUid: attributeUid,
+    }) || "text => text";
+    
+    const savedTemplate = getSettingValueFromTree({
+      key: "template",
+      parentUid: attributeUid,
+    });
+    
+    if (savedTemplate) {
+      return { initialFormat: savedFormat, initialTemplate: savedTemplate };
+    }
+    
+    const matchingTemplate = Object.entries(TEMPLATE_MAP).find(
+      ([_, func]) => func === savedFormat
+    );
+    return { 
+      initialFormat: savedFormat, 
+      initialTemplate: matchingTemplate ? matchingTemplate[0] : "No styling" 
+    };
+  }, [attributeUid]);
+
+  const [transformFunction, setTransformFunction] = useState(initialFormat);
+  const [selectedTemplate, setSelectedTemplate] = useState(initialTemplate);
 
   // For a better UX replace renderBlock with a controlled list
   // add Edit, Delete, and Add New buttons
@@ -567,16 +630,99 @@ const TabsPanel = ({
           </FormGroup>
 
           {optionType === "text" && (
-            <Button
-              intent="primary"
-              text={"Find All Current Values"}
-              rightIcon={"search"}
-              onClick={() => {
-                const potentialOptions = findAllPotentialOptions(attributeName);
-                setPotentialOptions(potentialOptions);
-                setShowPotentialOptions(true);
-              }}
-            />
+            <>
+              <FormGroup 
+                label={
+                  <div className="flex items-center gap-2">
+                    <span>Display Format</span>
+                    <Tooltip
+                      content="JavaScript function that takes 'text' as input and returns formatted string"
+                      placement="top"
+                    >
+                      <Icon icon="info-sign" className="opacity-80" />
+                    </Tooltip>
+                  </div>
+                } 
+                className="m-0"
+              >
+                <div className="flex flex-col space-y-2">
+                  <div className="flex items-center gap-2">
+                    <MenuItemSelect
+                      items={Object.keys(TEMPLATE_MAP)}
+                      onItemSelect={(template) => {
+                        const newFunction = TEMPLATE_MAP[template as TemplateName];
+                        setSelectedTemplate(template);
+                        setTransformFunction(newFunction);
+                        setInputSetting({
+                          blockUid: attributeUid,
+                          key: "format",
+                          value: newFunction,
+                        });
+                        setInputSetting({
+                          blockUid: attributeUid,
+                          key: "template",
+                          value: template,
+                        });
+                      }}
+                      activeItem={selectedTemplate}
+                    />
+                    <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, func]) => (
+                              <li key={name}>
+                                <span className="font-mono">{name}:</span>{" "}
+                                {name === "Remove Double Brackets" && "Removes [[text]] format"}
+                                {name === "Convert to Uppercase" && "Makes text all caps"}
+                                {name === "Add Prefix" && "Adds \"Status:\" before text"}
+                                {name === "Capitalize Words" && "Makes first letter of each word uppercase"}
+                                {name === "Custom Format" && "Start with a blank template"}
+                                {name === "No styling" && "No styling"}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      }
+                      placement="top"
+                    >           
+                      <Icon icon="info-sign" className="opacity-80" />   
+                    </Tooltip>
+                  </div>
+                  <textarea
+                    className="bp3-input font-mono text-sm min-h-[100px] p-2 resize-y"
+                    placeholder="text => text"
+                    value={transformFunction}
+                    onChange={(e) => {
+                      const newValue = e.target.value;
+                      setTransformFunction(newValue);
+                      setSelectedTemplate("Custom Format");
+                      setInputSetting({
+                        blockUid: attributeUid,
+                        key: "format",
+                        value: newValue,
+                      });
+                      setInputSetting({
+                        blockUid: attributeUid,
+                        key: "template",
+                        value: "Custom Format",
+                      });
+                    }}
+                  />
+                </div>
+              </FormGroup>
+              <Button
+                intent="primary"
+                text={"Find All Current Values"}
+                rightIcon={"search"}
+                onClick={() => {
+                  const potentialOptions = findAllPotentialOptions(attributeName);
+                  setPotentialOptions(potentialOptions);
+                  setShowPotentialOptions(true);
+                }}
+              />
+            </>
           )}
           <div
             className="flex items-start space-x-4"

From bf677a87dc2d026700f357e429897acb4e0941a7 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 7 Apr 2025 00:47:55 -0400
Subject: [PATCH 2/3] address PR comment

---
 src/features/attributeSelect.tsx | 215 +++++++++++++++++++++----------
 1 file changed, 144 insertions(+), 71 deletions(-)

diff --git a/src/features/attributeSelect.tsx b/src/features/attributeSelect.tsx
index f0cdac4..2b6f4e1 100644
--- a/src/features/attributeSelect.tsx
+++ b/src/features/attributeSelect.tsx
@@ -38,16 +38,60 @@ import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromT
 const CONFIG = `roam/js/attribute-select`;
 
 const TEMPLATE_MAP = {
-  "No styling": "text => text",
-  "Remove Double Brackets": `text => text.replace(/^\\[\\[(.*?)\\]\\]$/g, '$1')`,
-  "Convert to Uppercase": "text => text.toUpperCase()",
-  "Add Prefix": "text => `Status: ${text}`",
-  "Capitalize Words": "text => text.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')",
-  "Custom Format": "text => text"
+  "No styling": {
+    transform: (text: string) => text,
+    description: "No styling"
+  },
+  "Remove Double Brackets": {
+    transform: (text: string) => text.replace(/^\[\[(.*?)\]\]$/g, '$1'),
+    description: "Removes [[text]] format"
+  },
+  "Convert to Uppercase": {
+    transform: (text: string) => text.toUpperCase(),
+    description: "Makes text all caps"
+  },
+  "Capitalize Words": {
+    transform: (text: string) => text.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).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 || '');
+      } catch (e) {
+        console.error("Invalid regex:", e);
+        return text;
+      }
+    },
+    description: "Apply custom regex pattern"
+  }
 } as const;
 
 type TemplateName = keyof typeof TEMPLATE_MAP;
 
+const applyFormatting = (
+  text: string, 
+  templateName: string, 
+  customPattern?: string, 
+  customReplacement?: string
+): 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);
+    return text;
+  }
+};
+
 type AttributeButtonPopoverProps<T> = {
   items: T[];
   onItemSelect?: (selectedItem: T) => void;
@@ -88,22 +132,30 @@ const AttributeButtonPopover = <T extends ReactText>({
         key: attributeName,
         parentUid: attributesNode.uid,
       }).uid;
-      const format = getSettingValueFromTree({
-        key: "format",
+      
+      const template = getSettingValueFromTree({
+        key: "template",
         parentUid: attributeUid,
-      }) || "text => text";
-
-      const transform = new Function("text", `
-        try {
-          return (${format})(text);
-        } catch (e) {
-          console.error("Error in transform function:", e);
-          return text;
-        }
-      `) as (text: string) => string;
-      return transform(text);
+      }) || "No styling";
+      
+      const customPattern = getSettingValueFromTree({
+        key: "customPattern",
+        parentUid: attributeUid,
+      });
+      
+      const customReplacement = getSettingValueFromTree({
+        key: "customReplacement",
+        parentUid: attributeUid,
+      });
+      
+      return applyFormatting(
+        text, 
+        template, 
+        customPattern, 
+        customReplacement
+      );
     } catch (e) {
-      console.error("Invalid transformation function:", e);
+      console.error("Error formatting text:", e);
       return text;
     }
   };
@@ -508,32 +560,32 @@ const TabsPanel = ({
   const [min, setMin] = useState(Number(rangeNode.children[0]?.text) || 0);
   const [max, setMax] = useState(Number(rangeNode.children[1]?.text) || 10);
   
-  const { initialFormat, initialTemplate } = useMemo(() => {
-    const savedFormat = getSettingValueFromTree({
-      key: "format",
-      parentUid: attributeUid,
-    }) || "text => text";
-    
+  const { initialTemplate, initialCustomPattern, initialCustomReplacement } = useMemo(() => {
     const savedTemplate = getSettingValueFromTree({
       key: "template",
       parentUid: attributeUid,
-    });
+    }) || "No styling";
     
-    if (savedTemplate) {
-      return { initialFormat: savedFormat, initialTemplate: savedTemplate };
-    }
+    const savedCustomPattern = getSettingValueFromTree({
+      key: "customPattern",
+      parentUid: attributeUid,
+    }) || "";
+    
+    const savedCustomReplacement = getSettingValueFromTree({
+      key: "customReplacement",
+      parentUid: attributeUid,
+    }) || "";
     
-    const matchingTemplate = Object.entries(TEMPLATE_MAP).find(
-      ([_, func]) => func === savedFormat
-    );
     return { 
-      initialFormat: savedFormat, 
-      initialTemplate: matchingTemplate ? matchingTemplate[0] : "No styling" 
+      initialTemplate: savedTemplate, 
+      initialCustomPattern: savedCustomPattern,
+      initialCustomReplacement: savedCustomReplacement
     };
   }, [attributeUid]);
 
-  const [transformFunction, setTransformFunction] = useState(initialFormat);
   const [selectedTemplate, setSelectedTemplate] = useState(initialTemplate);
+  const [customPattern, setCustomPattern] = useState(initialCustomPattern);
+  const [customReplacement, setCustomReplacement] = useState(initialCustomReplacement);
 
   // For a better UX replace renderBlock with a controlled list
   // add Edit, Delete, and Add New buttons
@@ -636,7 +688,7 @@ const TabsPanel = ({
                   <div className="flex items-center gap-2">
                     <span>Display Format</span>
                     <Tooltip
-                      content="JavaScript function that takes 'text' as input and returns formatted string"
+                      content="Select a template or use a custom regex pattern"
                       placement="top"
                     >
                       <Icon icon="info-sign" className="opacity-80" />
@@ -650,14 +702,7 @@ const TabsPanel = ({
                     <MenuItemSelect
                       items={Object.keys(TEMPLATE_MAP)}
                       onItemSelect={(template) => {
-                        const newFunction = TEMPLATE_MAP[template as TemplateName];
                         setSelectedTemplate(template);
-                        setTransformFunction(newFunction);
-                        setInputSetting({
-                          blockUid: attributeUid,
-                          key: "format",
-                          value: newFunction,
-                        });
                         setInputSetting({
                           blockUid: attributeUid,
                           key: "template",
@@ -671,15 +716,10 @@ const TabsPanel = ({
                         <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, func]) => (
+                            {Object.entries(TEMPLATE_MAP).map(([name, { description }]) => (
                               <li key={name}>
                                 <span className="font-mono">{name}:</span>{" "}
-                                {name === "Remove Double Brackets" && "Removes [[text]] format"}
-                                {name === "Convert to Uppercase" && "Makes text all caps"}
-                                {name === "Add Prefix" && "Adds \"Status:\" before text"}
-                                {name === "Capitalize Words" && "Makes first letter of each word uppercase"}
-                                {name === "Custom Format" && "Start with a blank template"}
-                                {name === "No styling" && "No styling"}
+                                {description}
                               </li>
                             ))}
                           </ul>
@@ -690,26 +730,58 @@ const TabsPanel = ({
                       <Icon icon="info-sign" className="opacity-80" />   
                     </Tooltip>
                   </div>
-                  <textarea
-                    className="bp3-input font-mono text-sm min-h-[100px] p-2 resize-y"
-                    placeholder="text => text"
-                    value={transformFunction}
-                    onChange={(e) => {
-                      const newValue = e.target.value;
-                      setTransformFunction(newValue);
-                      setSelectedTemplate("Custom Format");
-                      setInputSetting({
-                        blockUid: attributeUid,
-                        key: "format",
-                        value: newValue,
-                      });
-                      setInputSetting({
-                        blockUid: attributeUid,
-                        key: "template",
-                        value: "Custom Format",
-                      });
-                    }}
-                  />
+                  
+                  {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"
+                          placeholder="E.g., \[\[(.*?)\]\]"
+                          value={customPattern}
+                          onChange={(e) => {
+                            const newValue = e.target.value;
+                            setCustomPattern(newValue);
+                            setInputSetting({
+                              blockUid: attributeUid,
+                              key: "customPattern",
+                              value: newValue,
+                            });
+                          }}
+                        />
+                      </FormGroup>
+                      
+                      <FormGroup label="Replacement" className="m-0">
+                        <input
+                          className="bp3-input font-mono text-sm w-full"
+                          placeholder="E.g., $1"
+                          value={customReplacement}
+                          onChange={(e) => {
+                            const newValue = e.target.value;
+                            setCustomReplacement(newValue);
+                            setInputSetting({
+                              blockUid: attributeUid,
+                              key: "customReplacement",
+                              value: newValue,
+                            });
+                          }}
+                        />
+                      </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>
+                        </div>
+                        <div>
+                          <span className="font-bold">Output:</span> <span className="font-mono">
+                            {customPattern ? 
+                              applyFormatting("[[Example]]", "Custom Format", customPattern, customReplacement) :
+                              "[[Example]]"}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
               </FormGroup>
               <Button
@@ -893,6 +965,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) ||

From 9d5af5c15a30179964877cb571a4146500642026 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 14 Apr 2025 12:04:27 -0400
Subject: [PATCH 3/3] address PR comments

---
 src/features/attributeSelect.tsx | 108 ++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 37 deletions(-)

diff --git a/src/features/attributeSelect.tsx b/src/features/attributeSelect.tsx
index 2b6f4e1..274f626 100644
--- a/src/features/attributeSelect.tsx
+++ b/src/features/attributeSelect.tsx
@@ -43,7 +43,7 @@ const TEMPLATE_MAP = {
     description: "No styling"
   },
   "Remove Double Brackets": {
-    transform: (text: string) => text.replace(/^\[\[(.*?)\]\]$/g, '$1'),
+    transform: (text: string) => text.replace(/\[\[(.*?)\]\]/g, '$1'),
     description: "Removes [[text]] format"
   },
   "Convert to Uppercase": {
@@ -51,7 +51,10 @@ const TEMPLATE_MAP = {
     description: "Makes text all caps"
   },
   "Capitalize Words": {
-    transform: (text: string) => text.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
+    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": {
@@ -71,12 +74,19 @@ const TEMPLATE_MAP = {
 
 type TemplateName = keyof typeof TEMPLATE_MAP;
 
-const applyFormatting = (
-  text: string, 
-  templateName: string, 
-  customPattern?: string, 
-  customReplacement?: string
-): string => {
+type FormatParams = {
+  text: string;
+  templateName: string;
+  customPattern?: string;
+  customReplacement?: string;
+};
+
+const applyFormatting = ({
+  text,
+  templateName,
+  customPattern,
+  customReplacement
+}: FormatParams): string => {
   try {
     const template = TEMPLATE_MAP[templateName as TemplateName];
     if (!template) return text;
@@ -120,8 +130,8 @@ const AttributeButtonPopover = <T extends ReactText>({
   useEffect(() => {
     setSliderValue(Number(currentValue));
   }, [isOpen, currentValue]);
-
-  const formatDisplayText = (text: string): string => {
+  
+  const formatConfig = useMemo(() => {
     try {
       const configUid = getPageUidByPageTitle(CONFIG);
       const attributesNode = getSubTree({
@@ -133,32 +143,38 @@ const AttributeButtonPopover = <T extends ReactText>({
         parentUid: attributesNode.uid,
       }).uid;
       
-      const template = getSettingValueFromTree({
-        key: "template",
-        parentUid: attributeUid,
-      }) || "No styling";
-      
-      const customPattern = getSettingValueFromTree({
-        key: "customPattern",
-        parentUid: attributeUid,
-      });
-      
-      const customReplacement = getSettingValueFromTree({
-        key: "customReplacement",
-        parentUid: attributeUid,
-      });
-      
-      return applyFormatting(
-        text, 
-        template, 
-        customPattern, 
-        customReplacement
-      );
+      return {
+        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 formatting text:", e);
-      return text;
+      console.error("Error getting format config:", e);
+      return {
+        templateName: "No styling",
+        customPattern: undefined,
+        customReplacement: undefined
+      };
     }
-  };
+  }, [attributeName]);
+
+  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;
@@ -170,7 +186,7 @@ const AttributeButtonPopover = <T extends ReactText>({
       items={items}
       activeItem={currentValue as T}
       filterable={shouldFilter}
-      transformItem={(item) => formatDisplayText(String(item))}
+      transformItem={(item) => formatText(String(item))}
       onItemSelect={(s) => {
         updateBlock({
           text: `${attributeName}:: ${s}`,
@@ -586,6 +602,8 @@ const TabsPanel = ({
   const [selectedTemplate, setSelectedTemplate] = useState(initialTemplate);
   const [customPattern, setCustomPattern] = useState(initialCustomPattern);
   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
@@ -735,12 +753,18 @@ const TabsPanel = ({
                     <div className="space-y-2">
                       <FormGroup label="Pattern (regex)" className="m-0">
                         <input
-                          className="bp3-input font-mono text-sm w-full"
+                          className={`bp3-input font-mono text-sm w-full ${!isValidRegex ? 'bp3-intent-danger' : ''}`}
                           placeholder="E.g., \[\[(.*?)\]\]"
                           value={customPattern}
                           onChange={(e) => {
                             const newValue = e.target.value;
                             setCustomPattern(newValue);
+                            try {
+                              if (newValue) new RegExp(newValue);
+                              setIsValidRegex(true);
+                            } catch (e) {
+                              setIsValidRegex(false);
+                            }
                             setInputSetting({
                               blockUid: attributeUid,
                               key: "customPattern",
@@ -748,6 +772,11 @@ const TabsPanel = ({
                             });
                           }}
                         />
+                        {!isValidRegex && (
+                          <div className="text-red-500 text-xs mt-1">
+                            Invalid regular expression
+                          </div>
+                        )}
                       </FormGroup>
                       
                       <FormGroup label="Replacement" className="m-0">
@@ -775,7 +804,12 @@ const TabsPanel = ({
                         <div>
                           <span className="font-bold">Output:</span> <span className="font-mono">
                             {customPattern ? 
-                              applyFormatting("[[Example]]", "Custom Format", customPattern, customReplacement) :
+                              applyFormatting({
+                                text: "[[Example]]",
+                                templateName: "Custom Format",
+                                customPattern,
+                                customReplacement
+                              }) :
                               "[[Example]]"}
                           </span>
                         </div>