fix lint, prettier, remove the complexity from nodeconfig.tsx

Author: sid597

apps/roam/src/components/DiscourseNodeSearchMenu.tsx

@@ -26,10 +26,6 @@ import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpr
 import { Result } from "~/utils/types";
 import { getSetting } from "~/utils/extensionSettings";
 import MiniSearch from "minisearch";
-import {
-  getPersonalSetting,
-  setPersonalSetting,
-} from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea: HTMLTextAreaElement;

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

@@ -25,7 +25,13 @@ export const formatHexColor = (color: string) => {
   return "";
 };
 
-const DiscourseNodeCanvasSettings = ({ nodeType, uid }: { nodeType: string; uid: string }) => {
+const DiscourseNodeCanvasSettings = ({
+  nodeType,
+  uid,
+}: {
+  nodeType: string;
+  uid: string;
+}) => {
   const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]);
   const [color, setColor] = useState<string>(() => {
     const color = getSettingValueFromTree({ tree, key: "color" });

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

@@ -6,26 +6,26 @@ import React, {
   useMemo,
 } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
+import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
 import BlocksPanel from "roamjs-components/components/ConfigPanels/BlocksPanel";
 import { getSubTree } from "roamjs-components/util";
 import Description from "roamjs-components/components/Description";
 import { Label, Tabs, Tab, TabId, InputGroup } from "@blueprintjs/core";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import DiscourseNodeSpecification from "./DiscourseNodeSpecification";
 import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
-import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel";
 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";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import {
   DiscourseNodeTextPanel,
   DiscourseNodeFlagPanel,
 } from "./components/BlockPropSettingPanels";
-import createBlock from "roamjs-components/writes/createBlock";
-import updateBlock from "roamjs-components/writes/updateBlock";
 
 export const getCleanTagText = (tag: string): string => {
   return tag.replace(/^#+/, "").trim().toUpperCase();
@@ -65,7 +65,9 @@ const ValidatedInputPanel = ({
   </div>
 );
 
-const useDebouncedRoamUpdater = (
+const useDebouncedRoamUpdater = <
+  T extends HTMLInputElement | HTMLTextAreaElement,
+>(
   uid: string,
   initialValue: string,
   isValid: boolean,
@@ -99,7 +101,7 @@ const useDebouncedRoamUpdater = (
   );
 
   const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+    (e: React.ChangeEvent<T>) => {
       const newValue = e.target.value;
       setValue(newValue);
       saveToRoam(newValue, true);
@@ -160,34 +162,21 @@ const NodeConfig = ({
   });
 
   const [selectedTabId, setSelectedTabId] = useState<TabId>("general");
+  const [tagError, setTagError] = useState("");
   const [formatError, setFormatError] = useState("");
-  const [tagValue, setTagValue] = useState(node.tag || "");
+  const isConfigurationValid = !tagError && !formatError;
 
+  const [tagValue, setTagValue] = useState(node.tag || "");
   const {
     value: formatValue,
     handleChange: handleFormatChange,
     handleBlur: handleFormatBlurFromHook,
-  } = useDebouncedRoamUpdater(formatUid, node.format, !formatError);
-
-  const validateTag = useCallback(
-    (tag: string): string | undefined => {
-      const cleanTag = getCleanTagText(tag);
-      if (!cleanTag) return undefined;
-      const roamTagRegex = /#?\[\[(.*?)\]\]|#(\S+)/g;
-      const formatTags: string[] = [];
-      for (const match of formatValue.matchAll(roamTagRegex)) {
-        const tagName = match[1] || match[2];
-        if (tagName) formatTags.push(tagName.toUpperCase());
-      }
-      if (formatTags.includes(cleanTag)) {
-        return `The tag "${tag}" is referenced in the format. Please use a different tag or format.`;
-      }
-      return undefined;
-    },
-    [formatValue],
+  } = useDebouncedRoamUpdater<HTMLInputElement>(
+    formatUid,
+    node.format,
+    isConfigurationValid,
   );
-
-  const validateFormat = useCallback(
+  const validate = useCallback(
     ({
       tag,
       format,
@@ -203,12 +192,14 @@ const NodeConfig = ({
           key: "enabled",
         })?.uid?.length;
       if (format.trim().length === 0 && !isSpecificationEnabled) {
+        setTagError("");
         setFormatError("Error: you must set either a format or specification");
         return;
       }
       const cleanTag = getCleanTagText(tag);
 
       if (!cleanTag) {
+        setTagError("");
         setFormatError("");
         return;
       }
@@ -229,21 +220,25 @@ const NodeConfig = ({
         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("");
       }
     },
     [specificationUid],
   );
 
   useEffect(() => {
-    validateFormat({ tag: tagValue, format: formatValue });
-  }, [tagValue, formatValue, validateFormat]);
+    validate({ tag: tagValue, format: formatValue });
+  }, [tagValue, formatValue, validate]);
 
   const handleFormatBlur = useCallback(() => {
     handleFormatBlurFromHook();
-    validateFormat({ tag: tagValue, format: formatValue });
-  }, [handleFormatBlurFromHook, tagValue, formatValue, validateFormat]);
+    validate({ tag: tagValue, format: formatValue });
+  }, [handleFormatBlurFromHook, tagValue, formatValue, validate]);
 
   return (
     <>
@@ -263,6 +258,7 @@ const NodeConfig = ({
                 description={`Describing what the ${node.text} node represents in your graph.`}
                 settingKeys={["description"]}
                 initialValue={node.description}
+                multiline
                 order={1}
                 parentUid={node.type}
                 uid={descriptionUid}
@@ -284,7 +280,7 @@ const NodeConfig = ({
                 settingKeys={["tag"]}
                 initialValue={node.tag}
                 placeholder={generateTagPlaceholder(node)}
-                getValidationError={validateTag}
+                error={tagError}
                 onChange={setTagValue}
                 order={2}
                 parentUid={node.type}
@@ -330,7 +326,7 @@ const NodeConfig = ({
                   node={node}
                   parentUid={specificationUid}
                   parentSetEnabled={(isSpecificationEnabled) => {
-                    validateFormat({
+                    validate({
                       tag: tagValue,
                       format: formatValue,
                       isSpecificationEnabled,
@@ -388,7 +384,7 @@ const NodeConfig = ({
               <DiscourseNodeFlagPanel
                 nodeType={node.type}
                 title="Graph Overview"
-                description="Whether to color the node in the graph overview based on canvas color. This is based on the node's plain title as described by a `has title` condition in its specification."
+                description="Whether to color the node in the graph overview based on canvas color.  This is based on the node's plain title as described by a \`has title\` condition in its specification."
                 settingKeys={["graphOverview"]}
                 initialValue={node.graphOverview}
                 order={0}

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

@@ -13,6 +13,7 @@ import {
   HTMLSelect,
   Button,
   Tag,
+  TextArea,
 } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import useSingleChildValue from "roamjs-components/components/ConfigPanels/useSingleChildValue";
@@ -39,17 +40,15 @@ type FlagSetter = (keys: string[], value: boolean) => void;
 type NumberSetter = (keys: string[], value: number) => void;
 
 type MultiTextSetter = (keys: string[], value: string[]) => void;
-type ValidationError = string;
-type Validator<T> = (value: T) => ValidationError | undefined;
-
 type BaseTextPanelProps = {
   title: string;
   description: string;
   settingKeys: string[];
   setter: TextSetter;
   initialValue?: string;
   placeholder?: string;
-  getValidationError?: Validator<string>;
+  multiline?: boolean;
+  error?: string;
   onChange?: (value: string) => void;
 } & RoamBlockSyncProps;
 
@@ -103,14 +102,16 @@ const BaseTextPanel = ({
   setter,
   initialValue,
   placeholder,
-  getValidationError,
+  multiline,
+  error,
   onChange,
   parentUid,
   uid,
   order,
 }: BaseTextPanelProps) => {
   const [value, setValue] = useState(() => initialValue ?? "");
-  const error = getValidationError?.(value);
+  const errorRef = useRef(error);
+  errorRef.current = error;
   const debounceRef = useRef(0);
   const hasBlockSync = parentUid !== undefined && order !== undefined;
   const { onChange: rawSyncToBlock } = useSingleChildValue({
@@ -128,15 +129,16 @@ const BaseTextPanel = ({
     return () => window.clearTimeout(debounceRef.current);
   }, []);
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     const newValue = e.target.value;
     setValue(newValue);
     onChange?.(newValue);
 
-    if (getValidationError?.(newValue)) return;
-
     window.clearTimeout(debounceRef.current);
     debounceRef.current = window.setTimeout(() => {
+      if (errorRef.current) return;
       setter(settingKeys, newValue);
       syncToBlock?.(newValue);
     }, DEBOUNCE_MS);
@@ -147,11 +149,21 @@ const BaseTextPanel = ({
       <Label>
         {title}
         <Description description={description} />
-        <InputGroup
-          value={value}
-          onChange={handleChange}
-          placeholder={placeholder || initialValue}
-        />
+        {multiline ? (
+          <TextArea
+            value={value}
+            onChange={handleChange}
+            placeholder={placeholder || initialValue}
+            className="w-full"
+            style={{ minHeight: 80, resize: "vertical" }}
+          />
+        ) : (
+          <InputGroup
+            value={value}
+            onChange={handleChange}
+            placeholder={placeholder || initialValue}
+          />
+        )}
       </Label>
       {error && (
         <div className="mt-1 text-sm font-medium text-red-600">{error}</div>
@@ -584,7 +596,8 @@ export const DiscourseNodeTextPanel = ({
   RoamBlockSyncProps & {
     initialValue?: string;
     placeholder?: string;
-    getValidationError?: Validator<string>;
+    multiline?: boolean;
+    error?: string;
     onChange?: (value: string) => void;
   }) => (
   <BaseTextPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />