[ENG-926] Add tag as a field in setting (Obsidian) (#475)

* add tag as a field in setting

* address PR comment

* make the placeholder dynamic

* address PR comments

* Revert pnpm-lock.yaml to main

* change observer and validating rule

* change the setting

Author: trangdoan982

apps/obsidian/src/components/NodeTypeSettings.tsx

@@ -7,6 +7,24 @@ import { DiscourseNode } from "~/types";
 import { ConfirmationModal } from "./ConfirmationModal";
 import { getTemplateFiles, getTemplatePluginInfo } from "~/utils/templates";
 
+const generateTagPlaceholder = (format: string, nodeName?: string): string => {
+  if (!format) return "Enter tag (e.g., clm-candidate or #clm-candidate)";
+
+  // Extract the prefix before " - {content}" or " -{content}" or " -{content}" etc.
+  const match = format.match(/^([A-Z]+)\s*-\s*\{content\}/i);
+  if (match && match[1]) {
+    const prefix = match[1].toLowerCase();
+    return `Enter tag (e.g., ${prefix}-candidate)`;
+  }
+
+  if (nodeName && nodeName.length >= 3) {
+    const prefix = nodeName.substring(0, 3).toLowerCase();
+    return `Enter tag (e.g., ${prefix}-candidate)`;
+  }
+
+  return "Enter tag (e.g., clm-candidate)";
+};
+
 type EditableFieldKey = keyof Omit<DiscourseNode, "id" | "shortcut">;
 
 type BaseFieldConfig = {
@@ -75,6 +93,29 @@ const FIELD_CONFIGS: Record<EditableFieldKey, BaseFieldConfig> = {
     type: "color",
     required: false,
   },
+  tag: {
+    key: "tag",
+    label: "Node tag",
+    description: "Tags that signal a line is a node candidate",
+    type: "text",
+    required: false,
+    validate: (value: string) => {
+      if (!value.trim()) return { isValid: true };
+      if (/\s/.test(value)) {
+        return { isValid: false, error: "Tag cannot contain spaces" };
+      }
+      const invalidTagChars = /[^a-zA-Z0-9-]/;
+      const invalidCharMatch = value.match(invalidTagChars);
+      if (invalidCharMatch) {
+        return {
+          isValid: false,
+          error: `Tag contains invalid character: ${invalidCharMatch[0]}. Tags can only contain letters, numbers, and dashes.`,
+        };
+      }
+
+      return { isValid: true };
+    },
+  },
 };
 
 const FIELD_CONFIG_ARRAY = Object.values(FIELD_CONFIGS);
@@ -84,20 +125,32 @@ const TextField = ({
   value,
   error,
   onChange,
+  nodeType,
 }: {
   fieldConfig: BaseFieldConfig;
   value: string;
   error?: string;
   onChange: (value: string) => void;
-}) => (
-  <input
-    type="text"
-    value={value || ""}
-    onChange={(e) => onChange(e.target.value)}
-    placeholder={fieldConfig.placeholder}
-    className={`w-full ${error ? "input-error" : ""}`}
-  />
-);
+  nodeType?: DiscourseNode;
+}) => {
+  // Generate dynamic placeholder for tag field based on node format and name
+  const getPlaceholder = (): string => {
+    if (fieldConfig.key === "tag" && nodeType?.format) {
+      return generateTagPlaceholder(nodeType.format, nodeType.name);
+    }
+    return fieldConfig.placeholder || "";
+  };
+
+  return (
+    <input
+      type="text"
+      value={value || ""}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={getPlaceholder()}
+      className={`w-full ${error ? "input-error" : ""}`}
+    />
+  );
+};
 
 const ColorField = ({
   value,
@@ -163,8 +216,12 @@ const FieldWrapper = ({
       <div className="setting-item-description">{fieldConfig.description}</div>
     </div>
     <div className="setting-item-control">
-      {children}
-      {error && <div className="text-error mt-1 text-xs">{error}</div>}
+      <div className="flex flex-col">
+        {children}
+        <div className="mt-1 min-h-[1rem] text-xs">
+          {error && <div className="text-error">{error}</div>}
+        </div>
+      </div>
     </div>
   </div>
 );
@@ -256,6 +313,7 @@ const NodeTypeSettings = () => {
       name: "",
       format: "",
       template: "",
+      tag: "",
     };
     setEditingNodeType(newNodeType);
     setSelectedNodeIndex(nodeTypes.length);
@@ -403,6 +461,7 @@ const NodeTypeSettings = () => {
             value={value}
             error={error}
             onChange={handleChange}
+            nodeType={editingNodeType}
           />
         )}
       </FieldWrapper>

apps/obsidian/src/constants.ts

@@ -13,12 +13,14 @@ export const DEFAULT_NODE_TYPES: Record<string, DiscourseNode> = {
     name: "Claim",
     format: "CLM - {content}",
     color: "#7DA13E",
+    tag: "#clm-candidate",
   },
   Evidence: {
     id: generateUid("node"),
     name: "Evidence",
     format: "EVD - {content}",
     color: "#DB134A",
+    tag: "#evd-candidate",
   },
 };
 export const DEFAULT_RELATION_TYPES: Record<string, DiscourseRelationType> = {

apps/obsidian/src/types.ts

@@ -8,6 +8,7 @@ export type DiscourseNode = {
   description?: string;
   shortcut?: string;
   color?: string;
+  tag?: string;
 };
 
 export type DiscourseRelationType = {

apps/obsidian/src/utils/tagNodeHandler.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/naming-convention */
 import { App, Editor, Notice, MarkdownView } from "obsidian";
 import { DiscourseNode } from "~/types";
@@ -152,15 +153,17 @@ export class TagNodeHandler {
     }
 
     this.plugin.settings.nodeTypes.forEach((nodeType) => {
-      const nodeTypeName = nodeType.name.toLowerCase();
-      const tagSelector = `.cm-tag-${nodeTypeName}`;
+      if (!nodeType.tag) {
+        return;
+      }
+
+      const tag = nodeType.tag as string;
+      const tagSelector = `.cm-tag-${tag}`;
 
-      // Check if the element itself matches
       if (element.matches(tagSelector)) {
         this.applyDiscourseTagStyling(element, nodeType);
       }
 
-      // Check all children
       const childTags = element.querySelectorAll(tagSelector);
       childTags.forEach((tagEl) => {
         if (tagEl instanceof HTMLElement) {
@@ -257,7 +260,7 @@ export class TagNodeHandler {
     }
 
     const cleanText = sanitizeTitle(
-      extractedData.fullLineContent.replace(/#\w+/g, ""),
+      extractedData.fullLineContent.replace(/#[^\s]+/g, ""),
     );
 
     new CreateNodeModal(this.app, {
@@ -428,7 +431,6 @@ export class TagNodeHandler {
 
     const hideTooltip = () => {
       if (this.currentTooltip) {
-        console.log("Removing tooltip");
         this.currentTooltip.remove();
         this.currentTooltip = null;
       }