Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add vue-3-sanitize and linkifyjs to allow safe link formatting in notes

Browse Source
This commit is contained in:
Joshua Taillon 2022-11-05 00:53:54 -06:00
parent da5f7d12e7
commit fb10a87444
5 changed files with 62 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fittrackee_client/package.json
View File

@ -25,8 +25,11 @@
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.7",
"leaflet": "^1.9.2",
"linkify-string": "^4.0.2",
"linkifyjs": "^4.0.2",
"register-service-worker": "^1.7.1",
"vue": "^3.2.41",
"vue-3-sanitize": "^0.1.4",
"vue-chart-3": "3.1.1",
"vue-fullscreen": "^3.1.1",
"vue-i18n": "^9.2.2",

29
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutNotes.vue
View File

@ -3,30 +3,31 @@
<Card>
<template #title>{{ $t('workouts.NOTES') }}</template>
<template #content>
{{ notes && notes !== '' ? notes : $t('workouts.NO_NOTES') }}
<span v-html="notes !== '' ? $sanitize(linkifyStr(notes, { target: '_blank' })) : $t('workouts.NO_NOTES')" />
</template>
</Card>
</div>
</template>
<script setup lang="ts">
import { toRefs, withDefaults } from 'vue'
import linkifyStr from 'linkify-string'
import { toRefs, withDefaults } from 'vue'
interface Props {
notes?: string | null
}
const props = withDefaults(defineProps<Props>(), {
notes: () => null,
})
interface Props {
notes?: string | null
}
const props = withDefaults(defineProps<Props>(), {
notes: () => null,
})
const { notes } = toRefs(props)
const { notes } = toRefs(props)
</script>
<style lang="scss" scoped>
#workout-note {
::v-deep(.card-content) {
font-style: italic;
white-space: pre-wrap;
}
#workout-note {
::v-deep(.card-content) {
font-style: italic;
white-space: pre-wrap;
}
}
</style>

2
fittrackee_client/src/main.ts
View File

@ -14,6 +14,7 @@ import {
} from 'chart.js'
import ChartDataLabels from 'chartjs-plugin-datalabels'
import { createApp } from 'vue'
import Vue3Sanitize from "vue-3-sanitize"
import VueFullscreen from 'vue-fullscreen'
import './registerServiceWorker'
@ -47,6 +48,7 @@ const app = createApp(App)
.use(store)
.use(router)
.use(VueFullscreen, { name: 'VFullscreen' })
.use(Vue3Sanitize, { allowedTags: ['a'] })
.directive('click-outside', clickOutsideDirective)
customComponents.forEach((component) => {

1
fittrackee_client/src/vue-3-sanitize.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'vue-3-sanitize';

43
fittrackee_client/yarn.lock
View File

@ -4567,7 +4567,7 @@ html-webpack-plugin@^5.1.0:
pretty-error "^4.0.0"
tapable "^2.0.0"
htmlparser2@^6.1.0:
htmlparser2@^6.0.0, htmlparser2@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@ -4885,6 +4885,11 @@ is-plain-object@^2.0.4:
dependencies:
isobject "^3.0.1"
is-plain-object@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
is-potential-custom-element-name@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
@ -5231,6 +5236,16 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
linkify-string@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/linkify-string/-/linkify-string-4.0.2.tgz#9f785f4e910375b2399f94ff0f3e213a02c350ca"
integrity sha512-+HoBme50rPaKxh5TrEJqRLq4gphks1zj3cz6gMBKIHwJCFYVwHig8ii9aCzqGUz8DxF2otbq+Z3AJmKUnfOtKg==
linkifyjs@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.0.2.tgz#5844ea70f4427004e50036d983b66da50fe13389"
integrity sha512-/VSoCZiglX0VMsXmL5PN3lRg45M86lrD9PskdkA2abWaTKap1bIcJ11LS4EE55bcUl9ZOR4eZ792UtQ9E/5xLA==
loader-runner@^4.1.0, loader-runner@^4.2.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@ -5952,6 +5967,11 @@ parse-json@^5.0.0:
json-parse-even-better-errors "^2.3.0"
lines-and-columns "^1.1.6"
parse-srcset@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
parse5-htmlparser2-tree-adapter@^6.0.0:
version "6.0.1"
resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@ -6320,7 +6340,7 @@ postcss@^7.0.36:
picocolors "^0.2.1"
source-map "^0.6.1"
postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.7:
postcss@^8.1.10, postcss@^8.2.6, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.7:
version "8.4.18"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
@ -6711,6 +6731,18 @@ safe-regex-test@^1.0.0:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sanitize-html@^2.0.0:
version "2.7.3"
resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.3.tgz#166c868444ee4f9fd7352ac8c63fa86c343fc2bd"
integrity sha512-jMaHG29ak4miiJ8wgqA1849iInqORgNv7SLfSw9LtfOhEUQ1C0YHKH73R+hgyufBW9ZFeJrb057k9hjlfBCVlw==
dependencies:
deepmerge "^4.2.2"
escape-string-regexp "^4.0.0"
htmlparser2 "^6.0.0"
is-plain-object "^5.0.0"
parse-srcset "^1.0.2"
postcss "^8.3.11"
sass-loader@^13.1.0:
version "13.1.0"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.1.0.tgz#e5b9acf14199a9bc6eaed7a0b8b23951c2cebf6f"
@ -7620,6 +7652,13 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
vue-3-sanitize@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/vue-3-sanitize/-/vue-3-sanitize-0.1.4.tgz#1bb23279e9dd6e39e2c9d992ebb366da3e6f49a2"
integrity sha512-8+iU+MC94ibyOBUpn4g2hk8Dy32M7PKIi3UoUG+6Pd47J/uHIDdOdeXEEmCM/rVdyFqNXqLfO+yZT2BesGNlXA==
dependencies:
sanitize-html "^2.0.0"
vue-chart-3@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.1.1.tgz#7498c580444a92513bbea4f5df7803d295c20c9b"