Merge pull request #170 from RDFLib/fix-render-html

Render property fields with type rdf:HTML

package.json

@@ -27,6 +27,7 @@
         "pinia": "^2.1.7",
         "vite-plugin-rewrite-all": "=1.0.1",
         "vue": "^3.3.0",
+        "vue-dompurify-html": "^5.1.0",
         "vue-router": "^4.2.5"
     },
     "devDependencies": {

src/components/proptable/ObjectCell.vue

@@ -11,6 +11,10 @@ const geometryPreds = [
     "http://www.opengis.net/ont/geosparql#wktLiteral"
 ];
 
+const renderHTMLPreds = [
+    "http://www.w3.org/1999/02/22-rdf-syntax-ns#HTML"
+]
+
 const MAX_GEOM_LENGTH = 100; // max character length for geometry strings
 </script>
 
@@ -30,6 +34,7 @@ const MAX_GEOM_LENGTH = 100; // max character length for geometry strings
                     <pre>{{ props.value.length > MAX_GEOM_LENGTH ? `${props.value.slice(0, MAX_GEOM_LENGTH)}...` : props.value }}</pre>
                     <button class="btn outline sm" title="Copy geometry" @click="copyToClipboard(props.value)"><i class="fa-regular fa-clipboard"></i></button>
                 </div>
+                <div v-else-if="props.datatype && renderHTMLPreds.includes(props.datatype.value)" class="html-cell" v-dompurify-html="props.value"></div>
                 <div v-else-if="props.datatype && props.datatype.qname === 'xsd:double'">
                     {{ Number(props.value) }}
                 </div>

src/components/proptable/PropTable.vue

@@ -35,6 +35,16 @@ function buildRows(properties: AnnotatedTriple[]): PropTableRow[] {
     return Object.values(propRows).sort((a, b) => a.order - b.order);
 }
 
+function isHTML(content: string): boolean {
+    let ret = false;
+    for (let tag of ["<h2","<h3", "<p"]) {
+        if (content.indexOf(tag) !== -1) {
+            ret = true;
+            break;
+        }
+    }
+    return ret;
+}
 onMounted(() => {
     const properties = props.properties.filter(p => !props.hiddenPredicates.includes(p.predicate.value));
     rows.value = buildRows(properties);
@@ -67,7 +77,8 @@ onMounted(() => {
         </small>
     </h1>
     <slot name="map"></slot>
-    <p v-if="!!props.item.description"><em>{{ props.item.description }}</em></p>
+    <div v-if="(!!props.item.description && isHTML(props.item.description))" v-dompurify-html="props.item.description"></div>
+    <p v-else-if="!!props.item.description"><em>{{ props.item.description }}</em></p>
     <table>
         <slot name="top"></slot>
         <PropRow v-for="row in rows" v-bind="row" />

src/main.ts

@@ -6,6 +6,7 @@ import config from "@/config";
 import { sidenavConfigKey, enabledPrezsConfigKey, apiBaseUrlConfigKey, mapConfigKey, perPageConfigKey, conceptPerPageConfigKey, enableScoresKey } from "@/types";
 import type { PrezFlavour } from "@/types";
 import { Tooltip } from "floating-vue";
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 import VueGoogleMaps from "@fawmi/vue-google-maps";
 
 import "floating-vue/dist/style.css";
@@ -30,6 +31,7 @@ app.use(VueGoogleMaps, {
         libraries: "drawing"
     },
 })
+app.use(VueDOMPurifyHTML);
 app.component("Tooltip", Tooltip);
 // disable warnings for TreeSelect
 app.component("transition", Transition);