Add Web view tab for HTML/XHTML snippets and transform outputs

- Add synthetic "Web view" language tab when an example snippet has
  language html/xml and a url field (analogous to "Map view" for GeoJSON)
- Add "Web" toggle button in transform output panel when output media
  type is text/html or application/xhtml+xml
- Render content via SandboxedIframe (sandbox="allow-same-origin") which
  auto-sizes to content height on load, capped at 600px, with a
  resize handle for manual adjustment; falls back to 300px for
  cross-origin URLs

Author: avillar

src/components/bblock/BuildingBlockExamples.vue

@@ -49,11 +49,11 @@
 
 <script setup>
 import {defineAsyncComponent, onMounted, ref, watch} from 'vue';
-import {knownLanguages, geoJsonLanguageIds} from "@/models/mime-types";
+import {knownLanguages, geoJsonLanguageIds, htmlLanguageIds} from "@/models/mime-types";
 import {useNavigationStore} from "@/stores/navigation";
+import LanguageTabs from "@/components/bblock/LanguageTabs.vue";
 
 const ExampleViewer = defineAsyncComponent(() => import("@/components/bblock/ExampleViewer.vue"));
-const LanguageTabs = defineAsyncComponent(() => import("@/components/bblock/LanguageTabs.vue"));
 
 const props = defineProps({
   bblock: Object,
@@ -122,6 +122,13 @@ function processExamples() {
       exampleLanguageTabs.push({id: 'map-view', order: -1, label: 'Map view'});
     }
 
+    const htmlSnippet = example.snippets?.find(snippet =>
+      htmlLanguageIds.has(snippet.language?.id) && /^https?:\/\//.test(snippet.url)
+    );
+    if (htmlSnippet) {
+      exampleLanguageTabs.push({id: 'web-view', order: -1, label: 'Web view'});
+    }
+
     if (props.bblock.transforms?.length) {
       const transformEntries = [];
       props.bblock.transforms.forEach(transform => {
@@ -171,7 +178,7 @@ function processExamples() {
       a.order === b.order ? a.label.localeCompare(b.label) : a.order - b.order
     );
     newExpandedExamples.push(exampleIdx);
-    newSelectedLanguageTabs[exampleIdx] = exampleLanguageTabs.find(e => e.id !== 'map-view')?.id;
+    newSelectedLanguageTabs[exampleIdx] = exampleLanguageTabs.find(e => e.id !== 'map-view' && e.id !== 'web-view')?.id;
     newLanguageTabs[exampleIdx] = exampleLanguageTabs;
   });
 

src/components/bblock/ExampleViewer.vue

@@ -122,6 +122,10 @@
                     :ld-context="bblock.ldContext"
                   />
                 </div>
+                <sandboxed-iframe
+                  v-else-if="transformOutputView === 'web' && transformOutputIsHtml && language.transformEntry.url"
+                  :src="language.transformEntry.url"
+                />
                 <div v-else style="max-height: 30em; overflow-y: auto">
                   <code-viewer
                     :code="transformOutputStatus.contents"
@@ -136,14 +140,15 @@
           </div>
           <div class="d-flex align-center mt-1" v-if="language.transformEntry.success && transformOutputStatus.contents">
             <v-btn-toggle
-              v-if="transformOutputGeoJson"
+              v-if="transformOutputGeoJson || transformOutputIsHtml"
               v-model="transformOutputView"
               mandatory
               density="compact"
               rounded="1"
             >
               <v-btn value="code" size="small" prepend-icon="mdi-code-tags">Code</v-btn>
-              <v-btn value="map" size="small" prepend-icon="mdi-map">Map</v-btn>
+              <v-btn v-if="transformOutputGeoJson" value="map" size="small" prepend-icon="mdi-map">Map</v-btn>
+              <v-btn v-if="transformOutputIsHtml" value="web" size="small" prepend-icon="mdi-web">Web</v-btn>
             </v-btn-toggle>
             <v-spacer />
             <copy-to-clipboard-button :text="transformOutputStatus.contents" color="primary" variant="flat">Copy to clipboard</copy-to-clipboard-button>
@@ -180,6 +185,9 @@
             <geo-json-map-viewer :geojson="geoJsonData" :ld-context="bblock.ldContext"></geo-json-map-viewer>
           </div>
         </template>
+        <template v-else-if="isWebView && webViewUrl">
+          <sandboxed-iframe :src="webViewUrl" />
+        </template>
         <template v-else-if="currentSnippet">
           <div style="max-height: 30em; overflow-y: auto">
             <code-viewer
@@ -268,12 +276,13 @@ import JsonLdIcon from '@/assets/json-ld-data-white.svg';
 import MarkdownText from "@/components/MarkdownText.vue";
 import GeoJsonMapViewer from "@/components/bblock/GeoJsonMapViewer.vue";
 import TransformInfo from "@/components/bblock/TransformInfo.vue";
-import { geoJsonLanguageIds } from "@/models/mime-types";
+import { geoJsonLanguageIds, htmlLanguageIds } from "@/models/mime-types";
 import { getTypeColor } from "@/models/transforms";
 import { useFetchDocumentByUrl } from "@/composables/bblock";
 import { useBBlockNavigation } from "@/composables/bblock-navigation";
 import CopyToClipboardButton from "@/components/CopyToClipboardButton.vue";
 import ProfilesValidationReportDialog from "@/components/bblock/ProfilesValidationReportDialog.vue";
+import SandboxedIframe from "@/components/bblock/SandboxedIframe.vue";
 import bblockService from "@/services/bblock.service";
 
 const props = defineProps({
@@ -309,10 +318,18 @@ watch(() => props.language?.transformEntry?.profilesValidation, async (pv) => {
 }, { immediate: true });
 
 const isMapView = computed(() => props.language?.id === 'map-view');
+const isWebView = computed(() => props.language?.id === 'web-view');
 const isTransformView = computed(() => props.language?.isTransform === true);
 
+const webViewUrl = computed(() => {
+  if (!isWebView.value) return null;
+  return props.example?.snippets?.find(s =>
+    htmlLanguageIds.has(s.language?.id) && /^https?:\/\//.test(s.url)
+  )?.url ?? null;
+});
+
 const currentSnippet = computed(() => {
-  if (isTransformView.value) return null;
+  if (isTransformView.value || isWebView.value) return null;
   return (props.language && props.example?.snippets?.find(s => !s.language || s.language.id === props.language.id))
     || props.example?.snippets?.[0];
 });
@@ -362,6 +379,17 @@ const transformOutputStatus = reactive(useFetchDocumentByUrl(
   computed(() => props.language?.transformEntry?.url ?? null)
 ));
 
+const htmlMimeTypes = new Set(['text/html', 'application/xhtml+xml']);
+
+const transformOutputIsHtml = computed(() => {
+  const mediaTypes = props.language?.transform?.outputs?.mediaTypes;
+  if (!mediaTypes?.length) return false;
+  return mediaTypes.some(mt => {
+    const mime = typeof mt === 'string' ? mt : mt?.mimeType;
+    return mime && htmlMimeTypes.has(mime);
+  });
+});
+
 const transformOutputGeoJson = computed(() => {
   if (!transformOutputStatus.contents) return null;
   try {

src/components/bblock/SandboxedIframe.vue

@@ -0,0 +1,34 @@
+<template>
+  <iframe
+    ref="iframeEl"
+    :src="src"
+    sandbox="allow-same-origin"
+    :style="{ width: '100%', height: height + 'px', border: 'none', display: 'block', resize: 'vertical', overflow: 'auto' }"
+    @load="onLoad"
+  ></iframe>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  src: { type: String, required: true },
+  fallbackHeight: { type: Number, default: 300 },
+  maxHeight: { type: Number, default: 600 },
+});
+
+const iframeEl = ref(null);
+const height = ref(props.fallbackHeight);
+
+function onLoad() {
+  try {
+    const doc = iframeEl.value?.contentDocument;
+    if (!doc) return;
+    const h = doc.documentElement?.scrollHeight || doc.body?.scrollHeight;
+    if (h) {
+      height.value = Math.min(h, props.maxHeight);
+    }
+  } catch {
+    // cross-origin — keep fallback height
+  }
+}
+</script>

src/models/mime-types.js

@@ -109,4 +109,6 @@ const getHighlightLanguage = lang => {
 
 const geoJsonLanguageIds = new Set(['json', 'jsonld', 'geojson']);
 
-export { knownLanguages, getHighlightLanguage, geoJsonLanguageIds };
+const htmlLanguageIds = new Set(['html', 'xml']);
+
+export { knownLanguages, getHighlightLanguage, geoJsonLanguageIds, htmlLanguageIds };