mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.9 KiB
83 lines
1.9 KiB
<template>
|
|
<span>
|
|
<template
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
>
|
|
<a
|
|
v-if="item.startsWith('<a') && item.endsWith('</a>')"
|
|
:href="sanitizeUrl(extractAttr(item, 'href'))"
|
|
rel="noopener noreferrer nofollow"
|
|
:class="extractAttr(item, 'class') || 'link'"
|
|
target="_blank"
|
|
>
|
|
{{ extractText(item) }}
|
|
</a>
|
|
<b
|
|
v-else-if="item.startsWith('<b>') || item.startsWith('<strong>')"
|
|
>
|
|
{{ extractText(item) }}
|
|
</b>
|
|
<i
|
|
v-else-if="item.startsWith('<i>') || item.startsWith('<em>')"
|
|
>
|
|
{{ extractText(item) }}
|
|
</i>
|
|
<br
|
|
v-else-if="item === '<br>' || item === '\n'"
|
|
>
|
|
<template
|
|
v-else
|
|
>
|
|
{{ item }}
|
|
</template>
|
|
</template>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
import snarkdown from 'snarkdown'
|
|
import { sanitizeUrl } from '@braintree/sanitize-url'
|
|
|
|
const htmlSplitRegexp = /(<a.+?<\/a>|<i>.+?<\/i>|<b>.+?<\/b>|<em>.+?<\/em>|<strong>.+?<\/strong>|<br>)/
|
|
|
|
export default {
|
|
name: 'MarkdownContent',
|
|
props: {
|
|
string: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
items () {
|
|
const linkParts = this.string.split(/(https?:\/\/[^\s)]+)/g)
|
|
|
|
const text = linkParts.map((part, index) => {
|
|
if (part.match(/^https?:\/\//) && !linkParts[index - 1]?.match(/\(\s*$/) && !linkParts[index + 1]?.match(/^\s*\)/)) {
|
|
return `[${part}](${part})`
|
|
} else {
|
|
return part
|
|
}
|
|
}).join('')
|
|
|
|
return snarkdown(text.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
|
|
}
|
|
},
|
|
methods: {
|
|
sanitizeUrl,
|
|
extractAttr (text, attr) {
|
|
if (text.includes(attr)) {
|
|
return text.split(attr).pop().split('"')[1]
|
|
}
|
|
},
|
|
extractText (text) {
|
|
if (text) {
|
|
return text.match(/>(.+?)</)?.[1]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|