From 2115ccceeeb9edf52bd78e41d3a34f02b175ff23 Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Mon, 5 Aug 2024 20:25:44 +0200
Subject: [PATCH] Make the button editable inline edition

---
 src/common/components/front-components/button-shape.tsx       | 4 ++--
 src/pods/canvas/canvas.model.ts                               | 3 +++
 .../shape-renderer/simple-component/button.renderer.tsx       | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/common/components/front-components/button-shape.tsx b/src/common/components/front-components/button-shape.tsx
index 9afb71e2..86f2437c 100644
--- a/src/common/components/front-components/button-shape.tsx
+++ b/src/common/components/front-components/button-shape.tsx
@@ -17,7 +17,7 @@ export const getButtonShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   buttonShapeRestrictions;
 
 export const ButtonShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(buttonShapeRestrictions, width, height);
 
@@ -46,7 +46,7 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
           y={20}
           width={width}
           height={height - 20}
-          text="Click Me!"
+          text={text}
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}
           fill="black"
diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
index 48e30d00..54c4d36d 100644
--- a/src/pods/canvas/canvas.model.ts
+++ b/src/pods/canvas/canvas.model.ts
@@ -97,6 +97,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
   switch (shapeType) {
     case 'input':
     case 'label':
+    case 'button':
       return true;
     default:
       return false;
@@ -109,6 +110,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return '';
     case 'label':
       return 'Label';
+    case 'button':
+      return 'Click Me!';
     default:
       return undefined;
   }
diff --git a/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx
index e40fa7ed..91998dbc 100644
--- a/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx
@@ -24,6 +24,8 @@ export const renderButton = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };