From 536cdd82fcc4565c72d7e49d0afb7e41dfb212de Mon Sep 17 00:00:00 2001
From: Jack <jack20220723@gmail.com>
Date: Wed, 18 Oct 2023 19:27:03 +0800
Subject: [PATCH] Make node & edge labels content-editable

---
 .../PropertiesTable/PropertiesTable.tsx       | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
index 7a2455e3a66..c341ae52cec 100644
--- a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
+++ b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
@@ -41,6 +41,21 @@ type ExpandableValueProps = {
   width: number
   type: string
 }
+
+// https://stackoverflow.com/a/49639256
+const ContentEditable = ({ children }: any): JSX.Element => {
+  return (
+    <div
+      contentEditable="true"
+      onInput={e =>
+        console.log('content editable clicked!!!' + e.currentTarget.textContent)
+      }
+    >
+      {children}
+    </div>
+  )
+}
+
 function ExpandableValue({ value, width, type }: ExpandableValueProps) {
   const [expanded, setExpanded] = useState(false)
 
@@ -56,7 +71,7 @@ function ExpandableValue({ value, width, type }: ExpandableValueProps) {
   valueShown += valueIsTrimmed ? ELLIPSIS : ''
 
   return (
-    <>
+    <ContentEditable>
       {type.startsWith('Array') && '['}
       <ClickableUrls text={valueShown} />
       {valueIsTrimmed && (
@@ -65,7 +80,7 @@ function ExpandableValue({ value, width, type }: ExpandableValueProps) {
         </StyledExpandValueButton>
       )}
       {type.startsWith('Array') && ']'}
-    </>
+    </ContentEditable>
   )
 }