Feat: Add API for setting field colors for JSON nodes

src/containers/Editor/components/views/GraphView/CustomNode/TextRenderer.tsx

@@ -32,9 +32,10 @@ const Linkify = (text: string) => {
 
 interface TextRendererProps {
   children: string;
+  fieldColors?: Record<string, string>;
 }
 
-export const TextRenderer = ({ children }: TextRendererProps) => {
+export const TextRenderer = ({ children, fieldColors = {} }: TextRendererProps) => {
   const text = children?.replaceAll('"', "");
 
   if (isURL(text)) return Linkify(text);
@@ -47,7 +48,9 @@ export const TextRenderer = ({ children }: TextRendererProps) => {
       </StyledRow>
     );
   }
-  return <>{children}</>;
+
+  const color = fieldColors[text];
+  return <span style={{ color }}>{children}</span>;
 };
 
 function isColorFormat(colorString: string) {

src/containers/Editor/components/views/GraphView/CustomNode/index.tsx

@@ -12,6 +12,7 @@ export interface CustomNodeProps {
   x: number;
   y: number;
   hasCollapse?: boolean;
+  fieldColors?: Record<string, string>;
 }
 
 const rootProps = {
@@ -46,7 +47,15 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData["data"]>) => {
           return <ObjectNode node={node as NodeData} x={x} y={y} />;
         }
 
-        return <TextNode node={node as NodeData} hasCollapse={!!data?.childrenCount} x={x} y={y} />;
+        return (
+          <TextNode
+            node={node as NodeData}
+            hasCollapse={!!data?.childrenCount}
+            x={x}
+            y={y}
+            fieldColors={nodeProps.properties.fieldColors}
+          />
+        );
       }}
     </Node>
   );

src/containers/Editor/components/views/GraphView/CustomNode/styles.tsx

@@ -26,6 +26,10 @@ function getTextColor({ $value, $type, $parent, theme }: TextColorFn) {
   return theme.NODE_COLORS.NODE_VALUE;
 }
 
+function getDynamicTextColor(fieldColors: Record<string, string>, key: string): string | undefined {
+  return fieldColors[key];
+}
+
 export const StyledLinkItUrl = styled(LinkItUrl)`
   text-decoration: underline;
   pointer-events: all;

src/containers/Editor/components/views/GraphView/index.tsx

@@ -86,6 +86,21 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
   const edges = useGraph(state => state.edges);
   const [paneWidth, setPaneWidth] = React.useState(2000);
   const [paneHeight, setPaneHeight] = React.useState(2000);
+  const [fieldColors, setFieldColors] = React.useState<Record<string, string>>({});
+
+  React.useEffect(() => {
+    const fetchFieldColors = async () => {
+      try {
+        const response = await fetch("/api/fieldColors");
+        const data = await response.json();
+        setFieldColors(data);
+      } catch (error) {
+        console.error("Failed to fetch field colors:", error);
+      }
+    };
+
+    fetchFieldColors();
+  }, []);
 
   const onLayoutChange = React.useCallback(
     (layout: ElkRoot) => {
@@ -112,7 +127,7 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
     <Canvas
       className="jsoncrack-canvas"
       onLayoutChange={onLayoutChange}
-      node={p => <CustomNode {...p} />}
+      node={p => <CustomNode {...p} fieldColors={fieldColors} />}
       edge={p => <CustomEdge {...p} />}
       nodes={nodes}
       edges={edges}

src/pages/api/fieldColors.ts

@@ -0,0 +1,19 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+let fieldColors: Record<string, string> = {};
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === 'GET') {
+    res.status(200).json(fieldColors);
+  } else if (req.method === 'POST') {
+    const { key, color } = req.body;
+    if (key && color) {
+      fieldColors[key] = color;
+      res.status(200).json({ message: 'Color set successfully' });
+    } else {
+      res.status(400).json({ message: 'Invalid request' });
+    }
+  } else {
+    res.status(405).json({ message: 'Method not allowed' });
+  }
+}