use escape-key to cancel (and store) contenteditable nodes

Author: devhelpr

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

@@ -57,6 +57,7 @@ w-min h-min
           }px ${nodeInfo?.strokeColor ?? 'white'} solid;color:${
             nodeInfo?.strokeColor ?? 'white'
           }`}
+          spellcheck="false"
           blur={() => {
             console.log('blur', this.rectElement?.textContent);
             if (this.node?.nodeInfo) {

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

@@ -461,6 +461,16 @@ export class AppElement<T extends BaseNodeInfo> {
       ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].indexOf(
         (event.target as HTMLElement)?.tagName
       ) >= 0;
+    if (
+      key === 'escape' &&
+      !inInputControle &&
+      (event.target as HTMLElement)?.isContentEditable
+    ) {
+      if (document.activeElement) {
+        (document.activeElement as HTMLElement).blur();
+      }
+      return;
+    }
     if (key === 'backspace' || key === 'delete' || key === 'enter') {
       if (inInputControle || (event.target as HTMLElement)?.isContentEditable) {
         return;