diff --git a/src/backend/default_canvas.json b/src/backend/default_canvas.json
index 8abf154..3ecb6dc 100644
--- a/src/backend/default_canvas.json
+++ b/src/backend/default_canvas.json
@@ -2146,21 +2146,21 @@
"lastCommittedPoint": null
},
{
- "x": 0,
- "y": 0,
+ "x": 20,
+ "y": -20,
"id": "1igpgsvrsh3",
"link": "!dashboard",
"seed": 76441,
"type": "embeddable",
"angle": 0,
"index": "b0q",
- "width": 340,
- "height": 280,
+ "width": 420,
+ "height": 320,
"locked": false,
"frameId": null,
"opacity": 100,
- "updated": 1744437345493,
- "version": 1890,
+ "updated": 1745779075413,
+ "version": 2052,
"groupIds": [],
"fillStyle": "solid",
"isDeleted": false,
@@ -2172,40 +2172,13 @@
"strokeColor": "#ced4da",
"strokeStyle": "solid",
"strokeWidth": 2,
- "versionNonce": 1530984984,
+ "versionNonce": 692312488,
"boundElements": [],
- "backgroundColor": "#e9ecef"
- },
- {
- "x": 755.6666259765625,
- "y": 137.1666259765625,
- "id": "g8btk6ouog",
- "link": "https://coder.pad.ws/@romaincourtoismails/ubuntu.main/terminal",
- "seed": 2344,
- "type": "embeddable",
- "angle": 0,
- "index": "b0r",
- "width": 600,
- "height": 400,
- "locked": false,
- "frameId": null,
- "opacity": 100,
- "updated": 1744437380078,
- "version": 3,
- "groupIds": [],
- "fillStyle": "solid",
- "isDeleted": true,
- "roughness": 1,
- "roundness": {
- "type": 3
- },
- "isSelected": true,
- "strokeColor": "#1e1e1e",
- "strokeStyle": "solid",
- "strokeWidth": 2,
- "versionNonce": 748163688,
- "boundElements": null,
- "backgroundColor": "#ffffff"
+ "backgroundColor": "#e9ecef",
+ "customData": {
+ "showHyperlinkIcon": false
+ }
}
]
-}
\ No newline at end of file
+}
+
diff --git a/src/frontend/index.scss b/src/frontend/index.scss
index c302f5a..9807f32 100644
--- a/src/frontend/index.scss
+++ b/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,21 @@ body {
.excalidraw .Modal__content {
animation: Modal__content_fade-in 0.3s ease-out forwards !important;
-}
\ No newline at end of file
+}
+
+/* Embeddables */
+
+.excalidraw__embeddable-container { /* 1st layer */
+ display: block;
+}
+
+.excalidraw__embeddable-container__inner { /* 2nd layer */
+ border-color: #525252 !important;
+ overflow: visible !important;
+}
+
+.excalidraw__embeddable__outer { /* 3rd layer */
+ padding: 0px !important;
+ pointer-events: all !important;
+ display: flex;
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 48e8371..d68c2be 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -3,7 +3,7 @@
"version": "1.0.0",
"private": true,
"dependencies": {
- "@atyrode/excalidraw": "^0.18.0-2",
+ "@atyrode/excalidraw": "^0.18.0-3",
"@monaco-editor/react": "^4.7.0",
"@tanstack/react-query": "^5.74.3",
"@tanstack/react-query-devtools": "^5.74.3",
diff --git a/src/frontend/src/CustomEmbeddableRenderer.scss b/src/frontend/src/CustomEmbeddableRenderer.scss
index a5d9bc2..7e8bb3d 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.scss
+++ b/src/frontend/src/CustomEmbeddableRenderer.scss
@@ -1,6 +1,34 @@
-.custom-rendered-embeddable {
+.custom-embed {
height: 100%;
width: 100%;
- position: absolute;
- z-index: 1;
-}
+ display: flex;
+ justify-content: center;
+ border: 0px !important;
+
+ &__title-bar {
+ position: absolute;
+ top: -30px;
+ pointer-events: none;
+
+ &__text {
+ font-family: 'Roboto', sans-serif;
+ color: #d3d3d3;
+ pointer-events: none;
+ font-size: 18px;
+ }
+ }
+
+ &__content {
+ height: 100%;
+ width: 100%;
+
+ &--iframe {
+ height: 100%;
+ width: 100%;
+ border: 0px !important;
+ overflow: hidden;
+ border-bottom-left-radius: var(--embeddable-radius);
+ border-bottom-right-radius: var(--embeddable-radius);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 4e6f7a8..ee65e42 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -19,29 +19,69 @@ export const renderCustomEmbeddable = (
if (element.link && element.link.startsWith('!')) {
let path = element.link.split('!')[1];
+ let content;
+ let title;
switch (path) {
case 'html':
- return ;
+ content = ;
+ title = "HTML Editor";
case 'editor':
- return ;
+ content = ;
+ title = "Code Editor";
+ break;
case 'state':
- return ;
+ content = ;
+ title = "State Indicator";
+ break;
case 'control':
- return ;
+ content = ;
+ title = "Control Button";
+ break;
case 'button':
- return ;
+ title = "Action Button";
+ break;
case 'dashboard':
- return ;
+ content = ;
+ title = "Dashboard";
+ break;
default:
+ title = "Untitled";
return null;
}
+
+ if (element.customData?.title) {
+ title = element.customData.title;
+ }
+
+ return (
+
+ );
} else {
- return ;
+ const title = element.customData?.title || element.link || "Untitled";
+
+ return (
+
+ );
}
};
diff --git a/src/frontend/src/pad/editors/Editor.scss b/src/frontend/src/pad/editors/Editor.scss
index 84685cc..0653cce 100644
--- a/src/frontend/src/pad/editors/Editor.scss
+++ b/src/frontend/src/pad/editors/Editor.scss
@@ -10,8 +10,6 @@
display: flex;
justify-content: right;
padding: 8px;
- background-color: #1e1e1e;
- border-bottom: 1px solid #333;
}
&__language-selector {
diff --git a/src/frontend/src/ui/MainMenu.tsx b/src/frontend/src/ui/MainMenu.tsx
index b69c5a7..da211ac 100644
--- a/src/frontend/src/ui/MainMenu.tsx
+++ b/src/frontend/src/ui/MainMenu.tsx
@@ -53,8 +53,8 @@ export const MainMenuConfig: React.FC = ({
const dashboardElement = ExcalidrawElementFactory.createEmbeddableElement({
link: "!dashboard",
- width: 460,
- height: 80
+ width: 360,
+ height: 360
});
ExcalidrawElementFactory.placeInScene(dashboardElement, excalidrawAPI, {
diff --git a/src/frontend/src/utils/canvasUtils.ts b/src/frontend/src/utils/canvasUtils.ts
index fa1dc3d..41b8ad9 100644
--- a/src/frontend/src/utils/canvasUtils.ts
+++ b/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: 40,
+ bottom: 10,
+ },
+ };
// Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)
appState.collaborators = new Map();
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index b6b25d0..723d6a2 100644
--- a/src/frontend/yarn.lock
+++ b/src/frontend/yarn.lock
@@ -2,10 +2,10 @@
# yarn lockfile v1
-"@atyrode/excalidraw@^0.18.0-2":
- 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==
+"@atyrode/excalidraw@^0.18.0-3":
+ version "0.18.0-3"
+ resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-3.tgz#445176d5b9828f033205a46f227fd76e722019ec"
+ integrity sha512-iWLyYMZNV9VQCcWAtrLmg52NkfCw1CDrigXXRrxa3H2KW6nyrlbFm3KZAF5Y0mOJDYzAtxclPvHoTvcRruMjGg==
dependencies:
"@braintree/sanitize-url" "6.0.2"
"@excalidraw/laser-pointer" "1.3.1"
@@ -537,29 +537,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/query-core@5.74.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/query-core@5.74.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/query-devtools@5.74.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/query-devtools@5.74.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 +603,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 +1646,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"