refacto: change avec description is handled with new lines
All checks were successful
repod / xml (push) Successful in 17s
repod / php (push) Successful in 51s
repod / nodejs (push) Successful in 2m14s
repod / release (push) Has been skipped

This commit is contained in:
Michel Roux 2024-01-14 11:44:49 +01:00
parent b389200017
commit 861ecf0db1
3 changed files with 12 additions and 8 deletions

View File

@ -1,3 +1,4 @@
<!-- eslint-disable vue/no-v-html -->
<template> <template>
<div class="header"> <div class="header">
<img class="background" :src="imageUrl"> <img class="background" :src="imageUrl">
@ -15,7 +16,7 @@
</a> </a>
<br><br> <br><br>
<p> <p>
<small>{{ strippedDescription }}</small> <small v-html="strippedDescription" />
</p> </p>
</div> </div>
<NcAppNavigationNew v-if="!isSubscribed" <NcAppNavigationNew v-if="!isSubscribed"
@ -34,6 +35,7 @@
import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue' import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
import Plus from 'vue-material-design-icons/Plus.vue' import Plus from 'vue-material-design-icons/Plus.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { cleanHtml } from '../../utils/text.js'
import { decodeUrl } from '../../utils/url.js' import { decodeUrl } from '../../utils/url.js'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
@ -75,9 +77,7 @@ export default {
return this.$store.state.subscriptions.subscriptions.includes(this.url) return this.$store.state.subscriptions.subscriptions.includes(this.url)
}, },
strippedDescription() { strippedDescription() {
const pre = document.createElement('pre') return cleanHtml(this.description)
pre.innerHTML = this.description
return pre.textContent || pre.innerText || ''
}, },
}, },
methods: { methods: {

View File

@ -32,6 +32,7 @@
import { NcAvatar, NcButton } from '@nextcloud/vue' import { NcAvatar, NcButton } from '@nextcloud/vue'
import Download from 'vue-material-design-icons/Download.vue' import Download from 'vue-material-design-icons/Download.vue'
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue' import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
import { cleanHtml } from '../../utils/text.js'
import { humanFileSize } from '../../utils/size.js' import { humanFileSize } from '../../utils/size.js'
export default { export default {
@ -77,10 +78,7 @@ export default {
return humanFileSize(this.size) return humanFileSize(this.size)
}, },
strippedDescription() { strippedDescription() {
const pre = document.createElement('pre') return cleanHtml(this.description)
pre.innerHTML = this.description
const strippedDescription = pre.textContent || pre.innerText || ''
return strippedDescription.replace(/\n/g, '<br>')
}, },
}, },
} }

6
src/utils/text.js Normal file
View File

@ -0,0 +1,6 @@
export const cleanHtml = (text) => {
const pre = document.createElement('pre')
pre.innerHTML = text.replace(/<br\s*\/?>/mg, '\n')
const strippedText = pre.textContent || pre.innerText || ''
return strippedText.replace(/\n/mg, '<br>')
}