From 9d623e9f470ab86d1cc6b982e9f7f87e8a6cda90 Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Wed, 23 Oct 2024 19:25:17 +0200
Subject: [PATCH] add inline editing to the window container title

---
 .../front-containers/browserwindow-shape.tsx              | 8 ++++----
 src/pods/canvas/model/inline-editable.model.ts            | 3 +++
 .../simple-container/browserwindow.renderer.tsx           | 2 ++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
index 524d8937..a40eca77 100644
--- a/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
+++ b/src/common/components/mock-components/front-containers/browserwindow-shape.tsx
@@ -21,7 +21,7 @@ export const getBrowserWindowShapeSizeRestrictions =
 const shapeType: ShapeType = 'browser';
 
 export const BrowserWindowShape = forwardRef<any, ShapeProps>((props, ref) => {
-  const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+  const { x, y, width, height, id, onSelected, text, ...shapeProps } = props;
   const restrictedSize = fitSizeToShapeSizeRestrictions(
     browserWindowShapeSizeRestrictions,
     width,
@@ -114,9 +114,9 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>((props, ref) => {
       <Text
         x={margin * 4}
         y={margin * 3.5 + titleBarHeight}
-        width={restrictedWidth - 50}
-        height={restrictedHeight - 50}
-        text="https://example.com"
+        width={restrictedWidth - margin * 7}
+        height={urlBarHeight}
+        text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={12}
         fill="black"
diff --git a/src/pods/canvas/model/inline-editable.model.ts b/src/pods/canvas/model/inline-editable.model.ts
index d7ef916e..946498f4 100644
--- a/src/pods/canvas/model/inline-editable.model.ts
+++ b/src/pods/canvas/model/inline-editable.model.ts
@@ -31,6 +31,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'tabsBar',
   'tooltip',
   'datepickerinput',
+  'browser',
 ]);
 
 // Check if a shape type allows inline editing
@@ -66,6 +67,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'datepickerinput',
+  'browser',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -98,6 +100,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
   datepickerinput: new Date().toLocaleDateString(),
+  browser: 'https://example.com',
 };
 
 export const generateDefaultTextValue = (
diff --git a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
index ccfd8809..aadcf152 100644
--- a/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-container/browserwindow.renderer.tsx
@@ -24,6 +24,8 @@ export const renderBrowserWindow = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };