diff --git a/package.json b/package.json index 77bfccc..20b66e1 100644 --- a/package.json +++ b/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": { diff --git a/src/components/proptable/ObjectCell.vue b/src/components/proptable/ObjectCell.vue index 1c158f8..c6a902b 100644 --- a/src/components/proptable/ObjectCell.vue +++ b/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 @@ -30,6 +34,7 @@ const MAX_GEOM_LENGTH = 100; // max character length for geometry strings
{{ props.value.length > MAX_GEOM_LENGTH ? `${props.value.slice(0, MAX_GEOM_LENGTH)}...` : props.value }}
+
{{ Number(props.value) }}
diff --git a/src/components/proptable/PropTable.vue b/src/components/proptable/PropTable.vue index 5c21054..40f2135 100644 --- a/src/components/proptable/PropTable.vue +++ b/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 [" { const properties = props.properties.filter(p => !props.hiddenPredicates.includes(p.predicate.value)); rows.value = buildRows(properties); @@ -67,7 +77,8 @@ onMounted(() => { -

{{ props.item.description }}

+
+

{{ props.item.description }}

diff --git a/src/main.ts b/src/main.ts index 6f9947f..769f361 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import router from "@/router"; import config from "@/config"; import { sidenavConfigKey, enabledPrezsConfigKey, apiBaseUrlConfigKey, mapConfigKey, perPageConfigKey, conceptPerPageConfigKey, enableScoresKey } 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"; @@ -29,6 +30,7 @@ app.use(VueGoogleMaps, { libraries: "drawing" }, }) +app.use(VueDOMPurifyHTML); app.component("Tooltip", Tooltip); // disable warnings for TreeSelect app.component("transition", Transition);