Roam: [Eng-610] tag assignment in roam dg plugin settings menu (#297)

* real time validation

* use on blur validation, add tag to config page, settings, extract with other data

* use live validation, don't save conflicting state to roam

* address review

* remove unused

Author: sid597

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

@@ -79,6 +79,10 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
                   text: "Shortcut",
                   children: [{ text: label.slice(0, 1).toUpperCase() }],
                 },
+                {
+                  text: "Tag",
+                  children: [{ text: "" }],
+                },
                 {
                   text: "Format",
                   children: [
@@ -96,6 +100,7 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
                   type: valueUid,
                   text: label,
                   shortcut: "",
+                  tag: "",
                   specification: [],
                   backedBy: "user",
                   canvasSettings: {},

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

@@ -1,17 +1,103 @@
-import React, { useState } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
 import BlocksPanel from "roamjs-components/components/ConfigPanels/BlocksPanel";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import { getSubTree } from "roamjs-components/util";
 import Description from "roamjs-components/components/Description";
-import { Label, Tabs, Tab, TabId } from "@blueprintjs/core";
+import { Label, Tabs, Tab, TabId, InputGroup } from "@blueprintjs/core";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings from "./DiscourseNodeCanvasSettings";
 import DiscourseNodeIndex from "./DiscourseNodeIndex";
 import { OnloadArgs } from "roamjs-components/types";
+import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
+import createBlock from "roamjs-components/writes/createBlock";
+import updateBlock from "roamjs-components/writes/updateBlock";
+
+const ValidatedInputPanel = ({
+  label,
+  description,
+  value,
+  onChange,
+  onBlur,
+  error,
+  placeholder,
+}: {
+  label: string;
+  description: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
+  error: string;
+  placeholder?: string;
+}) => (
+  <>
+    <Label>
+      {label}
+      <Description description={description} />
+      <InputGroup
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder={placeholder}
+      />
+    </Label>
+    {error && (
+      <div className="mt-1 text-sm font-medium text-red-600">{error}</div>
+    )}
+  </>
+);
+
+const useDebouncedRoamUpdater = (
+  uid: string,
+  initialValue: string,
+  isValid: boolean,
+) => {
+  const [value, setValue] = useState(initialValue);
+  const debounceRef = useRef(0);
+  const isValidRef = useRef(isValid);
+  isValidRef.current = isValid;
+
+  const saveToRoam = useCallback(
+    (text: string, timeout: boolean) => {
+      window.clearTimeout(debounceRef.current);
+      debounceRef.current = window.setTimeout(
+        () => {
+          if (!isValidRef.current) {
+            return;
+          }
+          const existingBlock = getBasicTreeByParentUid(uid)[0];
+          if (existingBlock) {
+            if (existingBlock.text !== text) {
+              updateBlock({ uid: existingBlock.uid, text });
+            }
+          } else if (text) {
+            createBlock({ parentUid: uid, node: { text } });
+          }
+        },
+        timeout ? 500 : 0,
+      );
+    },
+    [uid],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      saveToRoam(newValue, true);
+    },
+    [saveToRoam],
+  );
+
+  const handleBlur = useCallback(() => {
+    saveToRoam(value, false);
+  }, [value, saveToRoam]);
+
+  return { value, handleChange, handleBlur };
+};
 
 const NodeConfig = ({
   node,
@@ -28,6 +114,7 @@ const NodeConfig = ({
   const formatUid = getUid("Format");
   const descriptionUid = getUid("Description");
   const shortcutUid = getUid("Shortcut");
+  const tagUid = getUid("Tag");
   const templateUid = getUid("Template");
   const overlayUid = getUid("Overlay");
   const canvasUid = getUid("Canvas");
@@ -40,6 +127,72 @@ const NodeConfig = ({
   });
 
   const [selectedTabId, setSelectedTabId] = useState<TabId>("general");
+  const [tagError, setTagError] = useState("");
+  const [formatError, setFormatError] = useState("");
+  const isConfigurationValid = !tagError && !formatError;
+
+  const {
+    value: tagValue,
+    handleChange: handleTagChange,
+    handleBlur: handleTagBlurFromHook,
+  } = useDebouncedRoamUpdater(tagUid, node.tag || "", isConfigurationValid);
+  const {
+    value: formatValue,
+    handleChange: handleFormatChange,
+    handleBlur: handleFormatBlurFromHook,
+  } = useDebouncedRoamUpdater(formatUid, node.format, isConfigurationValid);
+
+  const getCleanTagText = (tag: string): string => {
+    return tag.replace(/^#+/, "").trim().toUpperCase();
+  };
+
+  const validate = useCallback((tag: string, format: string) => {
+    const cleanTag = getCleanTagText(tag);
+
+    if (!cleanTag) {
+      setTagError("");
+      setFormatError("");
+      return;
+    }
+
+    const roamTagRegex = /#?\[\[(.*?)\]\]|#(\S+)/g;
+    const matches = format.matchAll(roamTagRegex);
+    const formatTags: string[] = [];
+    for (const match of matches) {
+      const tagName = match[1] || match[2];
+      if (tagName) {
+        formatTags.push(tagName.toUpperCase());
+      }
+    }
+
+    const hasConflict = formatTags.includes(cleanTag);
+
+    if (hasConflict) {
+      setFormatError(
+        `The format references the node's tag "${tag}". Please use a different format or tag.`,
+      );
+      setTagError(
+        `The tag "${tag}" is referenced in the format. Please use a different tag or format.`,
+      );
+    } else {
+      setTagError("");
+      setFormatError("");
+    }
+  }, []);
+
+  useEffect(() => {
+    validate(tagValue, formatValue);
+  }, [tagValue, formatValue, validate]);
+
+  const handleTagBlur = useCallback(() => {
+    handleTagBlurFromHook();
+    validate(tagValue, formatValue);
+  }, [handleTagBlurFromHook, tagValue, formatValue, validate]);
+
+  const handleFormatBlur = useCallback(() => {
+    handleFormatBlurFromHook();
+    validate(tagValue, formatValue);
+  }, [handleFormatBlurFromHook, tagValue, formatValue, validate]);
 
   return (
     <>
@@ -52,7 +205,7 @@ const NodeConfig = ({
           id="general"
           title="General"
           panel={
-            <div className="flex flex-col gap-4 p-1">
+            <div className="flex flex-row gap-4 p-1">
               <TextPanel
                 title="Description"
                 description={`Describing what the ${node.text} node represents in your graph.`}
@@ -69,6 +222,15 @@ const NodeConfig = ({
                 uid={shortcutUid}
                 defaultValue={node.shortcut}
               />
+              <ValidatedInputPanel
+                label="Tag"
+                description={`Designate a hashtag for marking potential ${node.text}.`}
+                value={tagValue}
+                onChange={handleTagChange}
+                onBlur={handleTagBlur}
+                error={tagError}
+                placeholder={`#${node.text}`}
+              />
             </div>
           }
         />
@@ -90,13 +252,13 @@ const NodeConfig = ({
           title="Format"
           panel={
             <div className="flex flex-col gap-4 p-1">
-              <TextPanel
-                title="Format"
+              <ValidatedInputPanel
+                label="Format"
                 description={`DEPRECATED - Use specification instead. The format ${node.text} pages should have.`}
-                order={0}
-                parentUid={node.type}
-                uid={formatUid}
-                defaultValue={node.format}
+                value={formatValue}
+                onChange={handleFormatChange}
+                onBlur={handleFormatBlur}
+                error={formatError}
               />
               <Label>
                 Specification

apps/roam/src/utils/getDiscourseNodes.ts

@@ -15,6 +15,7 @@ export type DiscourseNode = {
   text: string;
   type: string;
   shortcut: string;
+  tag?: string;
   specification: Condition[];
   backedBy: "user" | "default" | "relation";
   canvasSettings: {
@@ -85,6 +86,7 @@ const getDiscourseNodes = (relations = getDiscourseRelations()) => {
         format: getSettingValueFromTree({ tree: children, key: "format" }),
         text,
         shortcut: getSettingValueFromTree({ tree: children, key: "shortcut" }),
+        tag: getSettingValueFromTree({ tree: children, key: "tag" }),
         type,
         specification: getSpecification(children),
         backedBy: "user",

apps/roam/src/utils/initializeDiscourseNodes.ts

@@ -16,6 +16,7 @@ const initializeDiscourseNodes = async () => {
             tree: [
               { text: "Format", children: [{ text: n.format || "" }] },
               { text: "Shortcut", children: [{ text: n.shortcut || "" }] },
+              { text: "Tag", children: [{ text: n.tag || "" }] },
               { text: "Graph Overview" },
               {
                 text: "Canvas",

apps/roam/src/utils/renderNodeConfigPage.ts

@@ -90,6 +90,13 @@ export const renderNodeConfigPage = ({
             // @ts-ignore
             Panel: TextPanel,
           },
+          {
+            title: "Tag",
+            description: `Designate a hashtag for marking potential ${nodeText}.`,
+            defaultValue: "",
+            // @ts-ignore
+            Panel: TextPanel,
+          },
           {
             title: "Description",
             description: `Describing what the ${nodeText} node represents in your graph.`,