feat: add borders to pad.ws elements to enhance ergonomy

Author: atyrode

src/frontend/index.scss

@@ -39,11 +39,6 @@ body {
     display: none !important;
 }
 
-.excalidraw__embeddable__outer {
-    padding: 0px !important;
-    pointer-events: all !important;
-}
-
 .excalidraw .layer-ui__wrapper__top-right {
     gap: 0rem;
 }
@@ -67,4 +62,20 @@ body {
 
 .excalidraw .Modal__content {
     animation: Modal__content_fade-in 0.3s ease-out forwards !important;
-}
+}
+
+/* Embeddables */
+
+.excalidraw__embeddable-container { /* 1st layer */
+    display: block;
+}
+
+.excalidraw__embeddable-container__inner { /* 2nd layer */
+    border-color: #525252 !important;
+}
+
+.excalidraw__embeddable__outer { /* 3rd layer */
+    padding: 0px !important;
+    pointer-events: all !important;
+    display: flex;
+}

src/frontend/src/CustomEmbeddableRenderer.scss

@@ -1,6 +1,7 @@
 .custom-rendered-embeddable {
     height: 100%;
     width: 100%;
-    position: absolute;
-    z-index: 1;
+    display: flex;
+    border-radius: 0px !important;
+    border: 0px !important;
 }

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -19,28 +19,37 @@ export const renderCustomEmbeddable = (
 
   if (element.link && element.link.startsWith('!')) {
     let path = element.link.split('!')[1];
+    let content;
 
     switch (path) {
       case 'html':
-        return <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        break;
       case 'editor':
-        return <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        break;
       case 'state':
-        return <StateIndicator />;
+        content = <StateIndicator />;
+        break;
       case 'control':
-        return <ControlButton />;
+        content = <ControlButton />;
+        break;
       case 'button':
-        return <ActionButton
+        content = <ActionButton
           target="code"
           element={element}
           excalidrawAPI={excalidrawAPI}
           settingsEnabled={true}
         />;
+        break;
       case 'dashboard':
-        return <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        break;
       default:
         return null;
     }
+    
+    return <div className="custom-rendered-embeddable">{content}</div>;
   } else {
     return <iframe className="custom-rendered-embeddable" src={element.link} />;
   }

src/frontend/src/utils/canvasUtils.ts

@@ -20,6 +20,15 @@ export function normalizeCanvasData(data: any) {
   if ("height" in appState) {
     delete appState.height;
   }
+
+  appState.pad = { 
+    moduleBorderOffset: {
+      left: 10,
+      right: 10,
+      top: 30,
+      bottom: 10,
+    },
+  };
 
   // Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)
   appState.collaborators = new Map();

src/frontend/yarn.lock

@@ -2,10 +2,8 @@
 # yarn lockfile v1
 
 
-"@atyrode/excalidraw@^0.18.0-2":
+"@atyrode/excalidraw@file:../../../excalipad/packages/excalidraw":
   version "0.18.0-2"
-  resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-2.tgz#66be05d5b8a2458dd65fb58baa104fd803a41c5d"
-  integrity sha512-z3scC5BzVnu8ddS1TJTNxX+wPa3bj72j9RVleSV7iDZsClLDqgcrW+Z/cVHEphWpvBKlMzRo31vDdg+dqE6dDg==
   dependencies:
     "@braintree/sanitize-url" "6.0.2"
     "@excalidraw/laser-pointer" "1.3.1"
@@ -537,29 +535,29 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz#fd92d31a2931483c25677b9c6698106490cbbc76"
   integrity sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==
 
-"@tanstack/[email protected].4":
-  version "5.74.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.4.tgz#08c4f88f336738d822d9242c5e7d2be50f5c25b3"
-  integrity sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A==
+"@tanstack/[email protected].7":
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.7.tgz#beb565a5f3d95a1e3bd756e5eb1e41c3eb48ae7f"
+  integrity sha512-X3StkN/Y6KGHndTjJf8H8th7AX4bKfbRpiVhVqevf0QWlxl6DhyJ0TYG3R0LARa/+xqDwzU9mA4pbJxzPCI29A==
 
-"@tanstack/[email protected].6":
-  version "5.74.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.6.tgz#88a29fac2ba3db6c9bda8f40808f808d7a88df0b"
-  integrity sha512-djaFT11mVCOW3e0Ezfyiq7T6OoHy2LRI1fUFQvj+G6+/4A1FkuRMNUhQkdP1GXlx8id0f1/zd5fgDpIy5SU/Iw==
+"@tanstack/[email protected].7":
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz#c9b022b386ac86e6395228b5d6912e6444b3b971"
+  integrity sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==
 
 "@tanstack/react-query-devtools@^5.74.3":
-  version "5.74.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.6.tgz#169a3e2beab0c87ce3ebbda909bbd2c6590239f8"
-  integrity sha512-vlsDwz4/FsblK0h7VAlXUdJ+9OV+i1n8OLb8CLLAZqu0M9GCnbajytZwsRmns33PXBZ6wQBJ859kg6aajx+e9Q==
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.7.tgz#97fd56ae76996467d544b546a1bd38aab4a94d1e"
+  integrity sha512-j60esTQF+ES0x52kQUYOX0Z8AJUcqCGANj6GaOf8J3YQz2bZPB1imLSw4SFeM3Ozv8uO/X/Dmh3IT1z+y57ZLQ==
   dependencies:
-    "@tanstack/query-devtools" "5.74.6"
+    "@tanstack/query-devtools" "5.74.7"
 
 "@tanstack/react-query@^5.74.3":
-  version "5.74.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.4.tgz#d73ee1899c08a227519cbf53b9a0e0b1e67cd3fe"
-  integrity sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q==
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.7.tgz#3507541b43de72399a19a71ff66828a12b859581"
+  integrity sha512-u4o/RIWnnrq26orGZu2NDPwmVof1vtAiiV6KYUXd49GuK+8HX+gyxoAYqIaZogvCE1cqOuZAhQKcrKGYGkrLxg==
   dependencies:
-    "@tanstack/query-core" "5.74.4"
+    "@tanstack/query-core" "5.74.7"
 
 "@types/d3-scale-chromatic@^3.0.0":
   version "3.1.0"
@@ -603,9 +601,9 @@
   integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
 
 "@types/node@^22.14.0":
-  version "22.15.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.1.tgz#4cd2c8717a61ae2979c6a0624b4d1b67415bf2c0"
-  integrity sha512-gSZyd0Qmv7qvbd2fJ9HGdYmv1yhNdelIA4YOtN6vkcmSwFhthxSEsBgU/JYZcXjWT6DFzoATcHrc52Ckh8SeRA==
+  version "22.15.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.2.tgz#1db55aa64618ee93a58c8912f74beefe44aca905"
+  integrity sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==
   dependencies:
     undici-types "~6.21.0"
 
@@ -1646,9 +1644,9 @@ postcss@^8.4.36:
     source-map-js "^1.2.1"
 
 posthog-js@^1.236.0:
-  version "1.236.6"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.6.tgz#f4d73d25773f4e4bafd7632717c97b27bd9f1b7c"
-  integrity sha512-IX4fkn3HCK+ObdHr/AuWd+Ks7bgMpRpOQB93b5rDJAWkG4if4xFVUn5pgEjyCNeOO2GM1ECnp08q9tYNYEfwbA==
+  version "1.236.7"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.7.tgz#6a071905d4466573b80fd52bad1d3478594805b7"
+  integrity sha512-HatTinqAt/6aAraCgbnP+2MTeVTChdf6TDsQkef4/yUnXeA4tsHmXnGGJ3vnzQk7N//R6lIHN189BZDO9kuKAg==
   dependencies:
     core-js "^3.38.1"
     fflate "^0.4.8"