WiP editing rect-node via contenteditable and storing

Author: devhelpr

apps/vps-web/src/app/custom-nodes/classes/rect-node-class.tsx

@@ -2,15 +2,24 @@ import {
   createJSXElement,
   FlowNode,
   IComputeResult,
+  IRectNodeComponent,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
 
 export class RectNode {
   nodeRenderElement: HTMLElement | undefined = undefined;
   rectElement: HTMLElement | undefined = undefined;
   id: string;
-  constructor(id: string) {
+  node: IRectNodeComponent<NodeInfo> | undefined = undefined;
+  updated: () => void;
+  constructor(
+    id: string,
+    updated: () => void,
+    node: IRectNodeComponent<NodeInfo>
+  ) {
     this.id = id;
+    this.updated = updated;
+    this.node = node;
   }
   compute = (
     input: string,
@@ -48,6 +57,14 @@ w-min h-min
           }px ${nodeInfo?.strokeColor ?? 'white'} solid;color:${
             nodeInfo?.strokeColor ?? 'white'
           }`}
+          blur={() => {
+            console.log('blur', this.rectElement?.textContent);
+            if (this.node?.nodeInfo) {
+              (this.node.nodeInfo as any).text = this.rectElement?.textContent;
+            }
+            this.updated();
+          }}
+          contentEditable={true}
         >
           {nodeInfo?.text ?? ''}
         </div>

apps/vps-web/src/app/custom-nodes/rect-node.tsx

@@ -22,7 +22,7 @@ const familyName = 'flow-canvas';
 export const getRectNode =
   () =>
   (
-    _updated: () => void,
+    updated: () => void,
     _theme?: Theme,
     flowNode?: FlowNode<NodeInfo>
   ): NodeTask<NodeInfo> => {
@@ -68,7 +68,7 @@ export const getRectNode =
         rect = nodeInstance.rect;
         node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
 
-        rectNode = new RectNode(node.id);
+        rectNode = new RectNode(node.id, updated, node);
 
         const childNodeWrapper = (nodeRenderElement = (
           rect?.nodeComponent?.domElement as HTMLElement

libs/app-canvas/src/app/app.element.tsx

@@ -413,7 +413,7 @@ export class AppElement<T extends BaseNodeInfo> {
       ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].indexOf(
         (event.target as HTMLElement)?.tagName
       ) >= 0;
-    if (!inInputControle) {
+    if (!inInputControle || !(event.target as HTMLElement)?.isContentEditable) {
       if ((event.ctrlKey || event.metaKey || this.metaKeyDown) && key === 'c') {
         event.preventDefault();
         this.removeFormElement();
@@ -462,7 +462,7 @@ export class AppElement<T extends BaseNodeInfo> {
         (event.target as HTMLElement)?.tagName
       ) >= 0;
     if (key === 'backspace' || key === 'delete' || key === 'enter') {
-      if (inInputControle) {
+      if (inInputControle || (event.target as HTMLElement)?.isContentEditable) {
         return;
       }
       this.removeFormElement();