ENG-921 - normalize tag comparison in observer (#470)

* normalize tag comparison in observer

* use existing getCleanTag

Author: mdroidian

apps/roam/src/components/settings/NodeConfig.tsx

@@ -25,6 +25,10 @@ import createBlock from "roamjs-components/writes/createBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
 
+export const getCleanTagText = (tag: string): string => {
+  return tag.replace(/^#+/, "").trim().toUpperCase();
+};
+
 const ValidatedInputPanel = ({
   label,
   description,
@@ -215,10 +219,6 @@ const NodeConfig = ({
     true,
   );
 
-  const getCleanTagText = (tag: string): string => {
-    return tag.replace(/^#+/, "").trim().toUpperCase();
-  };
-
   const validate = useCallback((tag: string, format: string) => {
     const cleanTag = getCleanTagText(tag);
 

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -49,6 +49,7 @@ import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSetting
 import { getSetting } from "./extensionSettings";
 import { mountLeftSidebar } from "~/components/LeftSidebarView";
 import { getUidAndBooleanSetting } from "./getExportSettings";
+import { getCleanTagText } from "~/components/settings/NodeConfig";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -109,8 +110,11 @@ export const initObservers = async ({
     callback: (s: HTMLSpanElement) => {
       const tag = s.getAttribute("data-tag");
       if (tag) {
+        const normalizedTag = getCleanTagText(tag);
+
         for (const node of getDiscourseNodes()) {
-          if (tag.toLowerCase() === node.tag?.toLowerCase()) {
+          const normalizedNodeTag = node.tag ? getCleanTagText(node.tag) : "";
+          if (normalizedTag === normalizedNodeTag) {
             renderNodeTagPopupButton(s, node, onloadArgs.extensionAPI);
             if (node.canvasSettings?.color) {
               s.style.color = formatHexColor(node.canvasSettings.color);