From c0967c1c05298ba3fb506f2e7ef05073ed7c709b Mon Sep 17 00:00:00 2001
From: Marco Christian Krenn <marco.krenn@gmail.com>
Date: Tue, 26 Nov 2024 13:14:58 +0100
Subject: [PATCH 1/6] fixes node title not changing

---
 .changeset/olive-rockets-repeat.md            |  5 ++
 .../components/panels/nodeSettings/index.tsx  | 52 ++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/olive-rockets-repeat.md

diff --git a/.changeset/olive-rockets-repeat.md b/.changeset/olive-rockets-repeat.md
new file mode 100644
index 00000000..05503e82
--- /dev/null
+++ b/.changeset/olive-rockets-repeat.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+fix token title not changes
diff --git a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
index 7534f7fe..d7bc8d16 100644
--- a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
+++ b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
@@ -81,34 +81,48 @@ const Annotations = observer(({ annotations }: Record<string, unknown>) => {
   );
 });
 
-const NodeTitle = ({ selectedNode }: { selectedNode: Node }) => {
+const NodeTitle = observer(({ selectedNode }: { selectedNode: Node }) => {
+  const [localTitle, setLocalTitle] = React.useState(
+    (selectedNode.annotations[title] as string) || '',
+  );
+
+  // Update local state when the annotation changes
+  React.useEffect(() => {
+    setLocalTitle((selectedNode.annotations[title] as string) || '');
+  }, [selectedNode.annotations[title]]);
+
   const onChangeTitle = useCallback(
-    (e) => {
-      selectedNode.annotations[title] = e.target.value;
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setLocalTitle(newValue);
+      selectedNode.setAnnotation(title, newValue);
     },
-    [selectedNode.annotations],
+    [selectedNode],
   );
 
   return (
     <Stack direction="column" gap={2}>
       <Label>Title</Label>
-      <TextInput
-        onChange={onChangeTitle}
-        value={selectedNode.annotations[title] as string}
-      />
+      <TextInput onChange={onChangeTitle} value={localTitle} />
     </Stack>
   );
-};
+});
+
+const NodeDescription = observer(({ selectedNode }: { selectedNode: Node }) => {
+  const [localDescription, setLocalDescription] = React.useState(
+    (selectedNode.annotations[description] as string) || '',
+  );
+
+  // Update local state when the annotation changes
+  React.useEffect(() => {
+    setLocalDescription(
+      (selectedNode.annotations[description] as string) || '',
+    );
+  }, [selectedNode.annotations[description]]);
 
-const NodeDescription = ({
-  selectedNode,
-  annotations,
-}: {
-  selectedNode: Node;
-  annotations: Record<string, unknown>;
-}) => {
   const onChangeDesc = useCallback(
     (newString: string) => {
+      setLocalDescription(newString);
       selectedNode.setAnnotation(description, newString);
     },
     [selectedNode],
@@ -120,11 +134,11 @@ const NodeDescription = ({
       <Textarea
         placeholder={selectedNode.factory.description}
         onChange={onChangeDesc}
-        value={annotations[description] as string}
+        value={localDescription}
       />
     </Stack>
   );
-};
+});
 
 const NodeSettings = ({
   selectedNode,
@@ -144,7 +158,7 @@ const NodeSettings = ({
         {selectedNode?.factory.type}
       </Text>
       <NodeTitle selectedNode={selectedNode} />
-      <NodeDescription selectedNode={selectedNode} annotations={annotations} />
+      <NodeDescription selectedNode={selectedNode} />
       <Label>Annotations</Label>
       <Annotations annotations={annotations} />
     </Stack>

From f06170cdbd61449e51944e8ead1ab400ee418cd2 Mon Sep 17 00:00:00 2001
From: Marco Christian Krenn <marco.krenn@gmail.com>
Date: Tue, 26 Nov 2024 13:43:01 +0100
Subject: [PATCH 2/6] Revert "fixes node title not changing"

This reverts commit c0967c1c05298ba3fb506f2e7ef05073ed7c709b.
---
 .changeset/olive-rockets-repeat.md            |  5 --
 .../components/panels/nodeSettings/index.tsx  | 52 +++++++------------
 2 files changed, 19 insertions(+), 38 deletions(-)
 delete mode 100644 .changeset/olive-rockets-repeat.md

diff --git a/.changeset/olive-rockets-repeat.md b/.changeset/olive-rockets-repeat.md
deleted file mode 100644
index 05503e82..00000000
--- a/.changeset/olive-rockets-repeat.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tokens-studio/graph-editor": patch
----
-
-fix token title not changes
diff --git a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
index d7bc8d16..7534f7fe 100644
--- a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
+++ b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
@@ -81,48 +81,34 @@ const Annotations = observer(({ annotations }: Record<string, unknown>) => {
   );
 });
 
-const NodeTitle = observer(({ selectedNode }: { selectedNode: Node }) => {
-  const [localTitle, setLocalTitle] = React.useState(
-    (selectedNode.annotations[title] as string) || '',
-  );
-
-  // Update local state when the annotation changes
-  React.useEffect(() => {
-    setLocalTitle((selectedNode.annotations[title] as string) || '');
-  }, [selectedNode.annotations[title]]);
-
+const NodeTitle = ({ selectedNode }: { selectedNode: Node }) => {
   const onChangeTitle = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-      setLocalTitle(newValue);
-      selectedNode.setAnnotation(title, newValue);
+    (e) => {
+      selectedNode.annotations[title] = e.target.value;
     },
-    [selectedNode],
+    [selectedNode.annotations],
   );
 
   return (
     <Stack direction="column" gap={2}>
       <Label>Title</Label>
-      <TextInput onChange={onChangeTitle} value={localTitle} />
+      <TextInput
+        onChange={onChangeTitle}
+        value={selectedNode.annotations[title] as string}
+      />
     </Stack>
   );
-});
-
-const NodeDescription = observer(({ selectedNode }: { selectedNode: Node }) => {
-  const [localDescription, setLocalDescription] = React.useState(
-    (selectedNode.annotations[description] as string) || '',
-  );
-
-  // Update local state when the annotation changes
-  React.useEffect(() => {
-    setLocalDescription(
-      (selectedNode.annotations[description] as string) || '',
-    );
-  }, [selectedNode.annotations[description]]);
+};
 
+const NodeDescription = ({
+  selectedNode,
+  annotations,
+}: {
+  selectedNode: Node;
+  annotations: Record<string, unknown>;
+}) => {
   const onChangeDesc = useCallback(
     (newString: string) => {
-      setLocalDescription(newString);
       selectedNode.setAnnotation(description, newString);
     },
     [selectedNode],
@@ -134,11 +120,11 @@ const NodeDescription = observer(({ selectedNode }: { selectedNode: Node }) => {
       <Textarea
         placeholder={selectedNode.factory.description}
         onChange={onChangeDesc}
-        value={localDescription}
+        value={annotations[description] as string}
       />
     </Stack>
   );
-});
+};
 
 const NodeSettings = ({
   selectedNode,
@@ -158,7 +144,7 @@ const NodeSettings = ({
         {selectedNode?.factory.type}
       </Text>
       <NodeTitle selectedNode={selectedNode} />
-      <NodeDescription selectedNode={selectedNode} />
+      <NodeDescription selectedNode={selectedNode} annotations={annotations} />
       <Label>Annotations</Label>
       <Annotations annotations={annotations} />
     </Stack>

From a9791e7d4f5203f800f435d7288cb5957f195b66 Mon Sep 17 00:00:00 2001
From: Marco Christian Krenn <marco.krenn@gmail.com>
Date: Tue, 26 Nov 2024 13:53:00 +0100
Subject: [PATCH 3/6] add observers

---
 .../components/panels/nodeSettings/index.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
index 7534f7fe..2abac7fd 100644
--- a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
+++ b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
@@ -15,7 +15,7 @@ import { observer } from 'mobx-react-lite';
 import { useGraph } from '@/hooks/useGraph.js';
 import { useSelector } from 'react-redux';
 
-export function NodeSettingsPanel() {
+export const NodeSettingsPanel = observer(() => {
   const graph = useGraph();
   const nodeID = useSelector(currentNode);
   const selectedNode = useMemo(() => graph?.getNode(nodeID), [graph, nodeID]);
@@ -39,7 +39,7 @@ export function NodeSettingsPanel() {
       </Box>
     </Stack>
   );
-}
+});
 
 const Annotations = observer(({ annotations }: Record<string, unknown>) => {
   return (
@@ -81,12 +81,12 @@ const Annotations = observer(({ annotations }: Record<string, unknown>) => {
   );
 });
 
-const NodeTitle = ({ selectedNode }: { selectedNode: Node }) => {
+const NodeTitle = observer(({ selectedNode }: { selectedNode: Node }) => {
   const onChangeTitle = useCallback(
     (e) => {
-      selectedNode.annotations[title] = e.target.value;
+      selectedNode.setAnnotation(title, e.target.value);
     },
-    [selectedNode.annotations],
+    [selectedNode],
   );
 
   return (
@@ -98,9 +98,9 @@ const NodeTitle = ({ selectedNode }: { selectedNode: Node }) => {
       />
     </Stack>
   );
-};
+});
 
-const NodeDescription = ({
+const NodeDescription = observer(({
   selectedNode,
   annotations,
 }: {
@@ -124,9 +124,9 @@ const NodeDescription = ({
       />
     </Stack>
   );
-};
+});
 
-const NodeSettings = ({
+const NodeSettings = observer(({
   selectedNode,
   annotations,
 }: {
@@ -149,4 +149,4 @@ const NodeSettings = ({
       <Annotations annotations={annotations} />
     </Stack>
   );
-};
+});

From 793ee9c28064028c5533678dfccf74b25e1f3bbb Mon Sep 17 00:00:00 2001
From: Marco Christian Krenn <marco.krenn@gmail.com>
Date: Tue, 26 Nov 2024 13:54:25 +0100
Subject: [PATCH 4/6] format and changeset

---
 .changeset/slow-donuts-look.md                |   5 +
 .../components/panels/nodeSettings/index.tsx  | 103 ++++++++++--------
 2 files changed, 60 insertions(+), 48 deletions(-)
 create mode 100644 .changeset/slow-donuts-look.md

diff --git a/.changeset/slow-donuts-look.md b/.changeset/slow-donuts-look.md
new file mode 100644
index 00000000..05503e82
--- /dev/null
+++ b/.changeset/slow-donuts-look.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+fix token title not changes
diff --git a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
index 2abac7fd..99b5e4ca 100644
--- a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
+++ b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
@@ -100,53 +100,60 @@ const NodeTitle = observer(({ selectedNode }: { selectedNode: Node }) => {
   );
 });
 
-const NodeDescription = observer(({
-  selectedNode,
-  annotations,
-}: {
-  selectedNode: Node;
-  annotations: Record<string, unknown>;
-}) => {
-  const onChangeDesc = useCallback(
-    (newString: string) => {
-      selectedNode.setAnnotation(description, newString);
-    },
-    [selectedNode],
-  );
+const NodeDescription = observer(
+  ({
+    selectedNode,
+    annotations,
+  }: {
+    selectedNode: Node;
+    annotations: Record<string, unknown>;
+  }) => {
+    const onChangeDesc = useCallback(
+      (newString: string) => {
+        selectedNode.setAnnotation(description, newString);
+      },
+      [selectedNode],
+    );
 
-  return (
-    <Stack direction="column" gap={2}>
-      <Label>Description</Label>
-      <Textarea
-        placeholder={selectedNode.factory.description}
-        onChange={onChangeDesc}
-        value={annotations[description] as string}
-      />
-    </Stack>
-  );
-});
+    return (
+      <Stack direction="column" gap={2}>
+        <Label>Description</Label>
+        <Textarea
+          placeholder={selectedNode.factory.description}
+          onChange={onChangeDesc}
+          value={annotations[description] as string}
+        />
+      </Stack>
+    );
+  },
+);
 
-const NodeSettings = observer(({
-  selectedNode,
-  annotations,
-}: {
-  selectedNode: Node;
-  annotations: Record<string, unknown>;
-}) => {
-  return (
-    <Stack direction="column" gap={2}>
-      <Label>Node ID</Label>
-      <Text size="xsmall" muted>
-        {selectedNode?.id}
-      </Text>
-      <Label>Node Type</Label>
-      <Text size="xsmall" muted>
-        {selectedNode?.factory.type}
-      </Text>
-      <NodeTitle selectedNode={selectedNode} />
-      <NodeDescription selectedNode={selectedNode} annotations={annotations} />
-      <Label>Annotations</Label>
-      <Annotations annotations={annotations} />
-    </Stack>
-  );
-});
+const NodeSettings = observer(
+  ({
+    selectedNode,
+    annotations,
+  }: {
+    selectedNode: Node;
+    annotations: Record<string, unknown>;
+  }) => {
+    return (
+      <Stack direction="column" gap={2}>
+        <Label>Node ID</Label>
+        <Text size="xsmall" muted>
+          {selectedNode?.id}
+        </Text>
+        <Label>Node Type</Label>
+        <Text size="xsmall" muted>
+          {selectedNode?.factory.type}
+        </Text>
+        <NodeTitle selectedNode={selectedNode} />
+        <NodeDescription
+          selectedNode={selectedNode}
+          annotations={annotations}
+        />
+        <Label>Annotations</Label>
+        <Annotations annotations={annotations} />
+      </Stack>
+    );
+  },
+);

From 4924310b105127c329b0e2597a5cc16a0bb2bc1d Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:31:35 +0200
Subject: [PATCH 5/6] Remove extraneous observer

---
 .../graph-editor/src/components/panels/nodeSettings/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
index 99b5e4ca..c7418624 100644
--- a/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
+++ b/packages/graph-editor/src/components/panels/nodeSettings/index.tsx
@@ -15,7 +15,7 @@ import { observer } from 'mobx-react-lite';
 import { useGraph } from '@/hooks/useGraph.js';
 import { useSelector } from 'react-redux';
 
-export const NodeSettingsPanel = observer(() => {
+export const NodeSettingsPanel = () => {
   const graph = useGraph();
   const nodeID = useSelector(currentNode);
   const selectedNode = useMemo(() => graph?.getNode(nodeID), [graph, nodeID]);
@@ -39,7 +39,7 @@ export const NodeSettingsPanel = observer(() => {
       </Box>
     </Stack>
   );
-});
+};
 
 const Annotations = observer(({ annotations }: Record<string, unknown>) => {
   return (

From a70b5b1588e19d54c7c2b86d3b30519febc1cc8d Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:33:05 +0200
Subject: [PATCH 6/6] Add changeset

---
 .changeset/eighty-chicken-beg.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/eighty-chicken-beg.md

diff --git a/.changeset/eighty-chicken-beg.md b/.changeset/eighty-chicken-beg.md
new file mode 100644
index 00000000..35305828
--- /dev/null
+++ b/.changeset/eighty-chicken-beg.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Fixes an issue where the node title was not updating correctly and only changing the last character