[ENG-1481] Bug fix inserting node via relations menu on tldraw canvas (#863)

* bug fix

* lint

Author: trangdoan982

apps/obsidian/src/components/canvas/DiscourseRelationTool.ts

@@ -6,7 +6,7 @@ import { getRelationTypeById } from "~/utils/typeUtils";
 import { DiscourseRelationShape } from "./shapes/DiscourseRelationShape";
 import { getNodeTypeById } from "~/utils/typeUtils";
 import { showToast } from "./utils/toastUtils";
-import { DEFAULT_TLDRAW_COLOR } from "~/utils/tldrawColors";
+import { toTldrawColor } from "~/utils/tldrawColors";
 
 type RelationToolContext = {
   plugin: DiscourseGraphPlugin;
@@ -251,7 +251,7 @@ class Pointing extends StateNode {
       props: {
         relationTypeId: relationToolContext.relationTypeId,
         text: relationType?.label ?? "",
-        color: relationType?.color ?? DEFAULT_TLDRAW_COLOR,
+        color: toTldrawColor(relationType?.color),
         scale: this.editor.user.getIsDynamicResizeMode()
           ? 1 / this.editor.getZoomLevel()
           : 1,

apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx

@@ -19,7 +19,7 @@ import {
 import { getFrontmatterForFile } from "~/components/canvas/shapes/discourseNodeShapeUtils";
 import { getRelationTypeById } from "~/utils/typeUtils";
 import { showToast } from "~/components/canvas/utils/toastUtils";
-import { DEFAULT_TLDRAW_COLOR } from "~/utils/tldrawColors";
+import { toTldrawColor } from "~/utils/tldrawColors";
 import {
   getNodeInstanceIdForFile,
   getRelationsForNodeInstanceId,
@@ -400,7 +400,7 @@ export const RelationsPanel = ({
           dash: "draw",
           size: "m",
           fill: "none",
-          color: relationType?.color ?? DEFAULT_TLDRAW_COLOR,
+          color: toTldrawColor(relationType?.color),
           labelColor: "black",
           bend: 0,
           // Will be updated by bindings

apps/obsidian/src/utils/tldrawColors.ts

@@ -58,3 +58,26 @@ export const COLOR_PALETTE: Record<string, string> = {
   white: "#ffffff",
   yellow: "#ffc078",
 };
+
+/**
+ * Ensures a color value is a valid TldrawColorName.
+ * If the value is already a valid name, returns it directly.
+ * If it's a hex value, finds the matching tldraw color.
+ * Falls back to DEFAULT_TLDRAW_COLOR if no match is found.
+ */
+export const toTldrawColor = (color: string | undefined): TldrawColorName => {
+  if (!color) return DEFAULT_TLDRAW_COLOR;
+
+  if (TLDRAW_COLOR_NAMES.includes(color as TldrawColorName)) {
+    return color as TldrawColorName;
+  }
+
+  const hex = color.toLowerCase();
+  for (const [name, paletteHex] of Object.entries(COLOR_PALETTE)) {
+    if (paletteHex.toLowerCase() === hex) {
+      return name as TldrawColorName;
+    }
+  }
+
+  return DEFAULT_TLDRAW_COLOR;
+};