feat: added iframe component

docs/docs/component-list.md

@@ -23,6 +23,7 @@ outline: [2, 2]
         "Content": "Components that present content and are meaningful by themselves. For example, charts, images or text.",
         "Input": "Components whose main objective is to allow the user to input data into the app.",
         "Other": "These components occupy a special role and are amongst the most powerful in the framework.",
+        "Embed": "Components that integrate external functionalities seamlessly.",
         "Root": "These components are the top-level containers."
     };     
 </script>

ui/package.json

@@ -16,7 +16,7 @@
 		"marked": "^7.0.2",
 		"monaco-editor": "^0.41.0",
 		"plotly.js-dist-min": "^2.22.0",
-		"remixicon": "latest",
+		"remixicon": "4.1.0",
 		"typescript": "^5.0.4",
 		"vega": "^5.22.1",
 		"vega-embed": "^6.22.1",

ui/src/builder/BuilderSidebarToolbar.vue

@@ -87,6 +87,10 @@ const categoriesData:Ref<Record<string, CategoryData>> = ref({
 		icon: "ri-flow-chart",
 		isCollapsed: false,
 	},
+	Embed: {
+		icon: "ri-code-s-slash-line",
+		isCollapsed: false,
+	},
 });
 
 function toggleCollapseCategory(categoryId: string) {

ui/src/core/templateMap.ts

@@ -19,6 +19,7 @@ import CoreSeparator from "../core_components/CoreSeparator.vue";
 import CoreTab from "../core_components/CoreTab.vue";
 import CoreTabs from "../core_components/CoreTabs.vue";
 import CoreImage from "../core_components/CoreImage.vue";
+import CoreIFrame from "../core_components/CoreIFrame.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
 import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
@@ -64,6 +65,7 @@ const templateMap = {
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,
+	iframe: CoreIFrame,
 	icon: CoreIcon,
 	timer: CoreTimer,
 	textinput: CoreTextInput,

ui/src/core_components/CoreIFrame.vue

@@ -0,0 +1,99 @@
+<template>
+	<div class="CoreIFrame" ref="rootEl">
+		<iframe
+      @load="handleLoad" 
+			:src="fields.src.value"
+			draggable="false"
+		/>
+    <div class="mask" />
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
+import { getClick } from "../renderer/syntheticEvents";
+
+const description = "A component to embed an external resource in an iframe.";
+
+const loadHandlerStub = `
+def load_handler(state):
+
+	# Sets status message when resource is loaded
+
+	state["status"] = "Page loaded"`;
+
+export default {
+	streamsync: {
+		name: "IFrame",
+		description,
+		category: "Embed",
+		fields: {
+			src: {
+				name: "Source",
+				default: '',
+				desc: "A valid URL",
+				type: FieldType.Text,
+			},
+			cssClasses,
+		},
+		events: {
+			"ss-load": {
+				desc: "Fires when the resource has successfully loaded.",
+				stub: loadHandlerStub.trim(),
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const rootEl:Ref<HTMLElement> = ref(null); 
+const fields = inject(injectionKeys.evaluatedFields);
+
+function handleLoad(ev) {
+	const event = new CustomEvent("ss-load");
+	rootEl.value.dispatchEvent(event);
+}
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreIFrame {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+}
+
+.CoreIFrame  iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  border-radius: 12px;
+  border: 1px solid var(--separatorColor);
+}
+
+.CoreIFrame .mask {
+  pointer-events: none;
+}
+
+.CoreIFrame.beingEdited .mask {
+  pointer-events: all;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 12px;
+}
+
+.CoreIFrame.selected .mask {
+  pointer-events: none;
+}
+</style>

ui/src/renderer/ComponentProxy.vue

@@ -216,6 +216,7 @@ export default {
 					childless: isChildless.value,
 					selected: isSelected.value,
 					disabled: isDisabled.value,
+					beingEdited: isBeingEdited.value,
 					...fieldBasedCssClasses.value
 				},
 				style: {