diff --git a/ui/src/core_components/embed/CoreGoogleMaps.vue b/ui/src/core_components/embed/CoreGoogleMaps.vue
index 0b50b944a..a0bd5d17f 100644
--- a/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/ui/src/core_components/embed/CoreGoogleMaps.vue
@@ -1,19 +1,20 @@
 <template>
-	<div class="CoreGoogleMaps" ref="rootEl">
-		<div class="map" ref="mapEl" />
-    <div class="mask" />
+	<div ref="rootEl" class="CoreGoogleMaps">
+		<div ref="mapEl" class="map" />
+		<div class="mask" />
 	</div>
 </template>
 
 <script lang="ts">
+/* global google */
 import { FieldType } from "../../streamsyncTypes";
 import { cssClasses } from "../../renderer/sharedStyleFields";
 
-
-const description = "A component to embed a Google Map. It can be used to display a map with markers.";
+const description =
+	"A component to embed a Google Map. It can be used to display a map with markers.";
 
 const markersDefaultData = [
-	{lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker"}
+	{ lat: 37.79322359164316, lng: -122.39999318828129, name: "Marker" },
 ];
 
 export default {
@@ -24,19 +25,19 @@ export default {
 		fields: {
 			apiKey: {
 				name: "API Key",
-				default: '',
+				default: "",
 				desc: "API Key from Google Cloud Console",
 				type: FieldType.Text,
 			},
 			mapId: {
 				name: "Map ID",
-				default: '',
+				default: "",
 				desc: "ID of map from Google Cloud Console, needed for markers",
 				type: FieldType.Text,
 			},
 			mapType: {
 				name: "Map type",
-				default: 'roadmap',
+				default: "roadmap",
 				type: FieldType.Text,
 				desc: "One of 'roadmap', 'satellite', 'hybrid' or 'terrain'",
 			},
@@ -78,21 +79,23 @@ export default {
 <script setup lang="ts">
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
-import { Loader } from "@googlemaps/js-api-loader"
+import { Loader } from "@googlemaps/js-api-loader";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
-let map : google.maps.Map | null = null;
+let map: google.maps.Map | null = null;
 let markers = [];
 
-const center = computed<{ lat: number; lng: number; }>(() => ({ lat: fields.lat.value, lng: fields.lng.value }));;
-const mapType = computed(() => (
-	['roadmap', 'satellite', 'hybrid', 'terrain'].includes(fields.mapType.value) 
-		? fields.mapType.value 
-		: 'roadmap'
-));
-
+const center = computed<{ lat: number; lng: number }>(() => ({
+	lat: fields.lat.value,
+	lng: fields.lng.value,
+}));
+const mapType = computed(() =>
+	["roadmap", "satellite", "hybrid", "terrain"].includes(fields.mapType.value)
+		? fields.mapType.value
+		: "roadmap",
+);
 
 const initMap = async () => {
 	clearMarkers();
@@ -108,7 +111,7 @@ const initMap = async () => {
 		mapId: fields.mapId.value,
 	});
 
-	map.addListener('click', (e: any) => {
+	map.addListener("click", (e: any) => {
 		const event = new CustomEvent("gmap-click", {
 			detail: {
 				payload: e.latLng.toJSON(),
@@ -118,14 +121,20 @@ const initMap = async () => {
 	});
 
 	buildMarkers();
-}
+};
 
 const buildMarkers = async () => {
 	if (!fields.mapId.value) return;
 	if (!fields.markers.value) return;
-	const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
+	const { AdvancedMarkerElement } = (await google.maps.importLibrary(
+		"marker",
+	)) as google.maps.MarkerLibrary;
 	clearMarkers();
-	const markersData = fields.markers.value as ({ lat: number; lng: number; name: string; }[])
+	const markersData = fields.markers.value as {
+		lat: number;
+		lng: number;
+		name: string;
+	}[];
 	markersData.forEach((markerData) => {
 		const marker = new AdvancedMarkerElement({
 			position: {
@@ -138,7 +147,7 @@ const buildMarkers = async () => {
 
 		markers.push(marker);
 
-		marker.addListener('click', () => {
+		marker.addListener("click", () => {
 			const event = new CustomEvent("gmap-marker-click", {
 				detail: {
 					payload: markerData,
@@ -178,8 +187,6 @@ watch(mapType, async (newVal) => {
 watch(fields.markers, buildMarkers);
 watch(fields.apiKey, initMap);
 watch(fields.mapId, initMap);
-
-
 </script>
 
 <style scoped>
@@ -191,28 +198,28 @@ watch(fields.mapId, initMap);
 	height: 80vh;
 }
 
-.CoreGoogleMaps .map{
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+.CoreGoogleMaps .map {
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CoreGoogleMaps .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .CoreGoogleMaps.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 
 .CoreGoogleMaps.beingEdited.selected .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
index 5c0eab4cb..3c6a911cd 100644
--- a/ui/src/core_components/embed/CoreIFrame.vue
+++ b/ui/src/core_components/embed/CoreIFrame.vue
@@ -65,15 +65,15 @@ function handleLoad() {
 }
 
 .CoreIFrame.beingEdited:not(.selected) iframe {
-    pointer-events: none;
+	pointer-events: none;
 }
 
-.CoreIFrame  iframe {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+.CoreIFrame iframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CoreIFrame .mask {
@@ -81,13 +81,13 @@ function handleLoad() {
 }
 
 .CoreIFrame.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
 }
 
 .CoreIFrame.beingEdited.selected .mask {
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index f5b32a30a..2d4fdb15d 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -1,8 +1,14 @@
 <template>
 	<div class="CorePDF">
-		<object class="pdf" :data="fields.source.value" :key="fields.source.value" type="application/pdf">
+		<object
+			:key="fields.source.value"
+			class="pdf"
+			:data="fields.source.value"
+			type="application/pdf"
+		>
 			<p>
-				You're not authorised to embed in the browser or you don't have PDF plugin
+				You're not authorised to embed in the browser or you don't have
+				PDF plugin
 				<a :href="fields.source.value">download the PDF file. </a>
 			</p>
 		</object>
@@ -10,12 +16,11 @@
 	</div>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import { FieldType } from "../../streamsyncTypes";
 import { cssClasses } from "../../renderer/sharedStyleFields";
 
-const description =
-	"A component to embed a PDF document.";
+const description = "A component to embed a PDF document.";
 
 export default {
 	streamsync: {
@@ -43,9 +48,9 @@ const fields = inject(injectionKeys.evaluatedFields);
 <style scoped>
 @import "../../renderer/sharedStyles.css";
 .CorePDF {
-  position: relative;
-  width: 100%;
-  height: 80vh;
+	position: relative;
+	width: 100%;
+	height: 80vh;
 }
 
 .CorePDF.beingEdited:not(.selected) object {
@@ -53,29 +58,28 @@ const fields = inject(injectionKeys.evaluatedFields);
 }
 
 .CorePDF .pdf {
-  width: 100%;
-  height: 100%;
-  display: block;
-  margin: auto;
-  border: 1px solid var(--separatorColor);
+	width: 100%;
+	height: 100%;
+	display: block;
+	margin: auto;
+	border: 1px solid var(--separatorColor);
 }
 
 .CorePDF .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .CorePDF.beingEdited .mask {
-  pointer-events: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
 }
 
 .CorePDF.beingEdited.selected .mask {
-  pointer-events: none;
+	pointer-events: none;
 }
 </style>
-