mirror of https://github.com/docusealco/docuseal
Pete Matsyburka
2 years ago
parent
55616ac321
commit
cfe5610ec9
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<span>
|
||||
<template
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
v-if="item.startsWith('<a') && item.endsWith('</a>')"
|
||||
:href="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'
|
||||
|
||||
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 () {
|
||||
return snarkdown(this.string.replace(/\n/g, '<br>')).split(htmlSplitRegexp)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
extractAttr (text, attr) {
|
||||
if (text.includes(attr)) {
|
||||
return text.split(attr).pop().split('"')[1]
|
||||
}
|
||||
},
|
||||
extractText (text) {
|
||||
if (text) {
|
||||
return text.match(/>(.+?)</)?.[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div
|
||||
class="modal modal-open items-start !animate-none overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 bottom-0 right-0 left-0"
|
||||
@click.prevent="$emit('close')"
|
||||
/>
|
||||
<div class="modal-box pt-4 pb-6 px-6 mt-20 max-h-none w-full max-w-xl">
|
||||
<div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
|
||||
<span>
|
||||
{{ field.name || buildDefaultName(field, template.fields) }}
|
||||
</span>
|
||||
<a
|
||||
href="#"
|
||||
class="text-xl"
|
||||
@click.prevent="$emit('close')"
|
||||
>×</a>
|
||||
</div>
|
||||
<div>
|
||||
<form @submit.prevent="saveAndClose">
|
||||
<div class="space-y-1 mb-1">
|
||||
<div>
|
||||
<label
|
||||
dir="auto"
|
||||
class="label text-sm"
|
||||
for="title_field"
|
||||
>
|
||||
{{ t('description') }}
|
||||
</label>
|
||||
<textarea
|
||||
id="description_field"
|
||||
ref="textarea"
|
||||
v-model="description"
|
||||
dir="auto"
|
||||
class="base-textarea !text-base w-full"
|
||||
@input="resizeTextarea"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
dir="auto"
|
||||
class="label text-sm"
|
||||
for="title_field"
|
||||
>
|
||||
{{ t('display_title') }} ({{ t('optional') }})
|
||||
</label>
|
||||
<input
|
||||
id="title_field"
|
||||
v-model="title"
|
||||
dir="auto"
|
||||
class="base-input !text-base w-full"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="base-button w-full mt-4"
|
||||
>
|
||||
{{ t('save') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DescriptionModal',
|
||||
inject: ['t', 'save', 'template'],
|
||||
props: {
|
||||
field: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
buildDefaultName: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
data () {
|
||||
return {
|
||||
description: this.field.description,
|
||||
title: this.field.title
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.resizeTextarea()
|
||||
},
|
||||
methods: {
|
||||
saveAndClose () {
|
||||
this.field.description = this.description
|
||||
this.field.title = this.title
|
||||
|
||||
this.save()
|
||||
this.$emit('close')
|
||||
},
|
||||
resizeTextarea () {
|
||||
const textarea = this.$refs.textarea
|
||||
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = textarea.scrollHeight + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue