fix: Properly show attachment extension

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2024-08-30 13:17:42 +02:00
committed by Julius Knorr
parent 89bb483a0d
commit 9746870ad6
3 changed files with 19 additions and 5 deletions

View File

@@ -114,7 +114,8 @@ describe('Card', function() {
cy.get('.file-picker__main [data-filename="welcome.txt"]').should('be.visible')
.click()
cy.get('.dialog__actions button.button-vue--vue-primary').click()
cy.get('.attachment-list .basename').contains('welcome.txt')
cy.get('.attachment-list .filename').contains('welcome')
cy.get('.attachment-list .filename .extension').contains('txt')
})
it('Shows the modal with the editor', () => {

View File

@@ -41,7 +41,8 @@
<div class="details">
<a>
<div class="filename">
<span class="basename">{{ attachment.name }}</span>
<span>{{ attachmentBasename(attachment) }}</span>
<span class="extension">.{{ attachmentExtension(attachment) }}</span>
</div>
<progress :value="attachment.progress" max="100" />
</a>
@@ -58,7 +59,8 @@
<div class="details">
<a :href="internalLink(attachment)" @click.prevent="showViewer(attachment)">
<div class="filename">
<span class="basename">{{ attachment.data }}</span>
<span>{{ attachmentBasename(attachment) }}</span>
<span class="extension">.{{ attachmentExtension(attachment) }}</span>
</div>
<div v-if="attachment.deletedAt === 0">
<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
@@ -200,6 +202,14 @@ export default {
return t('deck', 'Drop your files to upload')
}
},
attachmentBasename() {
return (attachment) => attachment?.extendedData?.info.filename
?? (attachment?.name ?? attachment.data).replace(/\.[^/.]+$/, '')
},
attachmentExtension() {
return (attachment) => attachment?.extendedData?.info?.extension
?? (attachment?.name ?? attachment.data).split('.').pop()
},
},
watch: {
cardId: {

View File

@@ -255,15 +255,18 @@ export default {
},
addAttachment(attachment) {
const asImage = (attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image')
// We need to strip those as text does not support rtl yet, so we cannot insert them separately
const stripRTLO = (text) => text.replaceAll('\u202e', '')
const fileName = stripRTLO(attachment.extendedData.info.filename) + '.' + stripRTLO(attachment.extendedData.info.extension)
if (this.editor) {
this.editor.insertAtCursor(
asImage
? `<a href="${this.attachmentPreview(attachment)}"><img src="${this.attachmentPreview(attachment)}" alt="${attachment.data}" /></a>`
: `<a href="${this.attachmentPreview(attachment)}">${attachment.data}</a>`,
: `<a href="${this.attachmentPreview(attachment)}">${fileName}</a>`,
)
return
} else {
const attachmentString = (asImage ? '!' : '') + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')'
const attachmentString = (asImage ? '!' : '') + '[📎 ' + fileName + '](' + this.attachmentPreview(attachment) + ')'
const descString = this.$refs.markdownEditor.easymde.value()
const newContent = descString + '\n' + attachmentString
this.$refs.markdownEditor.easymde.value(newContent)