feat: HTML component, option to toggle visibility condition & more

frontend/components.d.ts

@@ -51,6 +51,7 @@ declare module 'vue' {
     FormDialog: typeof import('./src/components/FormDialog.vue')['default']
     Grid: typeof import('./src/components/Grid.vue')['default']
     Header: typeof import('./src/components/AppLayout/Header.vue')['default']
+    HTML: typeof import('./src/components/AppLayout/HTML.vue')['default']
     IconButton: typeof import('./src/components/IconButton.vue')['default']
     ImageView: typeof import('./src/components/AppLayout/ImageView.vue')['default']
     InlineInput: typeof import('./src/components/InlineInput.vue')['default']

frontend/package.json

@@ -18,7 +18,6 @@
 		"@codemirror/lang-html": "^6.4.9",
 		"@codemirror/lang-javascript": "^6.2.4",
 		"@codemirror/lang-json": "^6.0.1",
-		"@codemirror/lang-python": "^6.2.1",
 		"@replit/codemirror-indentation-markers": "^6.5.3",
 		"@vitejs/plugin-vue": "^5.2.0",
 		"@vueuse/components": "^10.11.1",

frontend/src/components/AppLayout/HTML.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="!relative" ref="component" v-html="_html"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import type { HTMLProps } from "@/types/studio_components/HTML"
+import { isEditor } from "@/utils/helpers"
+
+const component = ref<HTMLElement | null>(null)
+const props = defineProps<HTMLProps>()
+
+const _html = computed(() => {
+	if (isEditor()) {
+		return `
+			<div class="absolute top-0 bottom-0 right-0 left-0"></div>
+			${props.html}
+		`
+	}
+	return props.html
+})
+
+defineExpose({
+	component,
+})
+</script>