Edit Functionality

src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx

@@ -4,15 +4,21 @@ import { NODE_DIMENSIONS } from "../../../../../constants/graph";
 import type { NodeData } from "../../../../../types/graph";
 import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
+import useGraph from "../stores/useGraph";
+import useJson from "../../../../../store/useJson";
+import { useNodeEdit } from "../../../../../store/useNodeEdit";
+import updateJsonStyles from "../../../../../lib/utils/json/updateJsonStyles";
+import styled from "styled-components";
 
 type RowProps = {
   row: NodeData["text"][number];
   x: number;
   y: number;
   index: number;
+  styles?: { displayName?: string } | null;
 };
 
-const Row = ({ row, x, y, index }: RowProps) => {
+const Row = ({ row, x, y, index, styles }: RowProps) => {
   const rowPosition = index * NODE_DIMENSIONS.ROW_HEIGHT;
 
   const getRowText = () => {
@@ -21,6 +27,9 @@ const Row = ({ row, x, y, index }: RowProps) => {
     return row.value;
   };
 
+  // if this row is the "name" key and styles.displayName exists, show the displayName instead of original value
+  const valueToRender = row.key === "name" && styles?.displayName ? styles.displayName : getRowText();
+
   return (
     <Styled.StyledRow
       $value={row.value}
@@ -29,25 +38,103 @@ const Row = ({ row, x, y, index }: RowProps) => {
       data-y={y + rowPosition}
     >
       <Styled.StyledKey $type="object">{row.key}: </Styled.StyledKey>
-      <TextRenderer>{getRowText()}</TextRenderer>
+      <TextRenderer>{valueToRender}</TextRenderer>
     </Styled.StyledRow>
   );
 };
 
-const Node = ({ node, x, y }: CustomNodeProps) => (
-  <Styled.StyledForeignObject
-    data-id={`node-${node.id}`}
-    width={node.width}
-    height={node.height}
-    x={0}
-    y={0}
-    $isObject
-  >
-    {node.text.map((row, index) => (
-      <Row key={`${node.id}-${index}`} row={row} x={x} y={y} index={index} />
-    ))}
-  </Styled.StyledForeignObject>
-);
+const EditControlsWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* default click-through so node selection works by clicking anywhere */
+  pointer-events: none;
+`;
+
+const EditButton = styled.button`
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  background: transparent;
+  border: 1px solid rgba(0,0,0,0.08);
+  padding: 2px 6px;
+  font-size: 11px;
+  cursor: pointer;
+  pointer-events: all;
+  z-index: 20;
+`;
+
+const EditForm = styled.div`
+  position: absolute;
+  right: 6px;
+  top: 28px;
+  background: white;
+  border: 1px solid #ddd;
+  padding: 8px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: all;
+`;
+
+const Node = ({ node, x, y }: CustomNodeProps) => {
+  const selectedNode = useGraph(state => state.selectedNode);
+  const isSelected = selectedNode?.id === node.id;
+
+  const json = useJson(state => state.json);
+  const setJson = useJson(state => state.setJson);
+
+  const { open, editingNodeId, draft, start, updateDraft, reset, suppressInline } = useNodeEdit();
+
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    // pick first row as default name and coerce to string
+    const defaultName = node.text?.[0]?.value ?? "";
+    start(node.id, { name: String(defaultName), color: "#4C6EF5" });
+  };
+
+  const handleSave = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const next = updateJsonStyles(json, node.id, { displayName: draft.name, color: draft.color });
+    setJson(next);
+    reset();
+  };
+
+  const handleCancel = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    reset();
+  };
+
+  return (
+    <Styled.StyledForeignObject
+      data-id={`node-${node.id}`}
+      width={node.width}
+      height={node.height}
+      x={0}
+      y={0}
+      $isObject
+    >
+      <EditControlsWrapper>
+        {(() => {
+          try {
+            const parsed = JSON.parse(useJson.getState().json || "{}");
+            const styles = parsed?._styles?.[node.id] ?? null;
+            return node.text.map((row, index) => (
+              <Row key={`${node.id}-${index}`} row={row} x={x} y={y} index={index} styles={styles} />
+            ));
+          } catch (e) {
+            return node.text.map((row, index) => (
+              <Row key={`${node.id}-${index}`} row={row} x={x} y={y} index={index} styles={null} />
+            ));
+          }
+        })()}
+
+        {/* Inline edit UI removed — editing should happen only via the modal */}
+      </EditControlsWrapper>
+    </Styled.StyledForeignObject>
+  );
+};
 
 function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
   return (

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

@@ -5,6 +5,10 @@ import useConfig from "../../../../../store/useConfig";
 import { isContentImage } from "../lib/utils/calculateNodeSize";
 import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
+import useGraph from "../stores/useGraph";
+import useJson from "../../../../../store/useJson";
+import { useNodeEdit } from "../../../../../store/useNodeEdit";
+import updateJsonStyles from "../../../../../lib/utils/json/updateJsonStyles";
 
 const StyledTextNodeWrapper = styled.span<{ $isParent: boolean }>`
   display: flex;
@@ -26,11 +30,79 @@ const StyledImage = styled.img`
   background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
 `;
 
+const EditControlsWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /* keep node content click-through by default; only interactive children opt-in */
+  pointer-events: none;
+`;
+
+const EditButton = styled.button`
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  background: transparent;
+  border: 1px solid rgba(0,0,0,0.08);
+  padding: 2px 6px;
+  font-size: 11px;
+  cursor: pointer;
+  pointer-events: all; /* allow clicking the button */
+  z-index: 20;
+`;
+
+const EditForm = styled.div`
+  position: absolute;
+  right: 6px;
+  top: 28px;
+  background: white;
+  border: 1px solid #ddd;
+  padding: 8px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  pointer-events: all; /* make the form interactive */
+`;
+
 const Node = ({ node, x, y }: CustomNodeProps) => {
   const { text, width, height } = node;
   const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
   const isImage = imagePreviewEnabled && isContentImage(JSON.stringify(text[0].value));
   const value = text[0].value;
+  const json = useJson(state => state.json);
+  const setJson = useJson(state => state.setJson);
+
+  // read styles for displayName
+  let displayName: string | undefined;
+  try {
+    const parsed = JSON.parse(json ?? "{}");
+    const styles = parsed?._styles?.[node.id];
+    if (styles && styles.displayName) displayName = String(styles.displayName);
+  } catch (e) {
+    displayName = undefined;
+  }
+  const selectedNode = useGraph(state => state.selectedNode);
+  const isSelected = selectedNode?.id === node.id;
+
+  const { open, editingNodeId, draft, start, updateDraft, reset, suppressInline } = useNodeEdit();
+
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    start(node.id, { name: String(value ?? ""), color: "#4C6EF5" });
+  };
+
+  const handleSave = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const next = updateJsonStyles(json, node.id, { displayName: draft.name, color: draft.color });
+    setJson(next);
+    reset();
+  };
+
+  const handleCancel = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    reset();
+  };
 
   return (
     <Styled.StyledForeignObject
@@ -45,16 +117,20 @@ const Node = ({ node, x, y }: CustomNodeProps) => {
           <StyledImage src={JSON.stringify(text[0].value)} width="70" height="70" loading="lazy" />
         </StyledImageWrapper>
       ) : (
-        <StyledTextNodeWrapper
-          data-x={x}
-          data-y={y}
-          data-key={JSON.stringify(text)}
-          $isParent={false}
-        >
-          <Styled.StyledKey $value={value} $type={typeof text[0].value}>
-            <TextRenderer>{value}</TextRenderer>
-          </Styled.StyledKey>
-        </StyledTextNodeWrapper>
+  <EditControlsWrapper data-x={x} data-y={y} data-key={JSON.stringify(text)}>
+          <StyledTextNodeWrapper
+            data-x={x}
+            data-y={y}
+            data-key={JSON.stringify(text)}
+            $isParent={false}
+          >
+            <Styled.StyledKey $value={value} $type={typeof text[0].value}>
+              <TextRenderer>{displayName ?? value}</TextRenderer>
+            </Styled.StyledKey>
+          </StyledTextNodeWrapper>
+
+          {/* Inline edit UI intentionally removed — editing happens only via the modal */}
+        </EditControlsWrapper>
       )}
     </Styled.StyledForeignObject>
   );

src/features/editor/views/GraphView/CustomNode/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useComputedColorScheme } from "@mantine/core";
 import type { NodeProps } from "reaflow";
 import { Node } from "reaflow";
+import useJson from "../../../../../store/useJson";
 import { useModal } from "../../../../../store/useModal";
 import type { NodeData } from "../../../../../types/graph";
 import useGraph from "../stores/useGraph";
@@ -41,13 +42,24 @@ const CustomNodeWrapper = (nodeProps: NodeProps<NodeData>) => {
         ev.currentTarget.style.stroke = colorScheme === "dark" ? "#424242" : "#BCBEC0";
       }}
       style={{
-        fill: colorScheme === "dark" ? "#292929" : "#ffffff",
+        fill: (() => {
+          try {
+            const json = useJson.getState().json;
+            const parsed = JSON.parse(json || "{}");
+            const styles = parsed?._styles?.[nodeProps.properties.id];
+            if (styles && styles.color) return styles.color;
+          } catch (e) {
+            // ignore
+          }
+          return colorScheme === "dark" ? "#292929" : "#ffffff";
+        })(),
         stroke: colorScheme === "dark" ? "#424242" : "#BCBEC0",
         strokeWidth: 1,
       }}
     >
       {({ node, x, y }) => {
-        const hasKey = nodeProps.properties.text[0].key;
+        // Guard against accessing text[0] when it doesn't exist
+        const hasKey = nodeProps.properties.text?.[0]?.key;
         if (!hasKey) return <TextNode node={nodeProps.properties as NodeData} x={x} y={y} />;
 
         return <ObjectNode node={node as NodeData} x={x} y={y} />;

src/features/editor/views/GraphView/lib/jsonParser.ts

@@ -65,6 +65,8 @@ export const parser = (json: string): Graph => {
       if (!child.children || !child.children[1]) return traverse(child, id);
 
       const key = child.children[0].value ?? null;
+      // ignore internal sidecar used for presentation (styles) so it doesn't become graph nodes
+      if (key === "_styles") return;
       const valueNode = child.children[1];
       const type = valueNode.type;
 

src/features/editor/views/GraphView/stores/useGraph.ts

@@ -60,9 +60,14 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
       });
     }
 
+    // refresh selected node reference so modal / inline UI sees latest data
+    const prevSelected = get().selectedNode;
+    const refreshedSelected = prevSelected ? nodes.find(n => n.id === prevSelected.id) ?? null : null;
+
     set({
       nodes,
       edges,
+      selectedNode: refreshedSelected,
       aboveSupportedLimit: false,
       ...options,
     });