Make node & edge labels content-editable

QubitPi · Oct 18, 2023 · 536cdd8 · 536cdd8
1 parent c25b0e8
commit 536cdd8
Showing 1 changed file with 17 additions and 2 deletions.
diff --git 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>
   )
 }