fix: Insert attachments and menubar stickyness

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -29,7 +29,7 @@
 
 		<NcModal v-if="cardDetailsInModal && $route.params.cardId"
 			:clear-view-delay="0"
-			:title="t('deck', 'Card details')"
+			:close-button-contained="true"
 			size="large"
 			@close="hideModal()">
 			<div class="modal__content modal__card">

src/components/card/Description.vue

@@ -49,9 +49,9 @@
 			</NcActions>
 		</h5>
 
-		<template v-if="textAppAvailable">
+		<div v-if="textAppAvailable" class="description__text">
 			<div ref="editor" />
-		</template>
+		</div>
 		<template v-else>
 			<div v-if="!descriptionEditing && hasDescription"
 				id="description-preview"
@@ -190,25 +190,24 @@ export default {
 		this?.editor?.destroy()
 	},
 	methods: {
-		setupEditor() {
+		async setupEditor() {
-			this?.editor?.vm?.$destroy()
+			this?.editor?.destroy()
-			this.$refs.editor.innerHTML = ''
+			this.editor = await window.OCA.Text.createEditor({
-			const element = document.createElement('div')
+				el: this.$refs.editor,
-			this.$refs.editor.appendChild(element)
-			this.editor = window.OCA.Text.createEditor({
-				el: element,
 				content: this.card.description,
 				readOnly: !this.canEdit,
 				onUpdate: ({ markdown }) => {
 					this.description = markdown
 					this.updateDescription()
 				},
+				onFileInsert: () => {
+					this.showAttachmentModal()
+				},
 			})
 
 		},
 		addKeyListeners() {
 			this.$refs.markdownEditor.easymde.codemirror.on('keydown', (a, b) => {
-
 				if (this.keyExitState === 0 && (b.key === 'Meta' || b.key === 'Alt')) {
 					this.keyExitState = 1
 				}
@@ -243,17 +242,23 @@ export default {
 			this.modalShow = true
 		},
 		addAttachment(attachment) {
-			const descString = this.$refs.markdownEditor.easymde.value()
+			const asImage = (attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image')
-			let embed = ''
+			if (this.editor) {
-			if ((attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image')) {
+				this.editor.insertAtCursor(
-				embed = '!'
+					asImage
+						? `<a href="${this.attachmentPreview(attachment)}"><img src="${this.attachmentPreview(attachment)}" alt="${attachment.data}" /></a>`
+						: `<a href="${this.attachmentPreview(attachment)}">${attachment.data}</a>`
+				)
+				return
+			} else {
+				const attachmentString = (asImage ? '!' : '') + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')'
+				const descString = this.$refs.markdownEditor.easymde.value()
+				const newContent = descString + '\n' + attachmentString
+				this.$refs.markdownEditor.easymde.value(newContent)
+				this.description = newContent
 			}
-			const attachmentString = embed + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')'
-			const newContent = descString + '\n' + attachmentString
-			this.$refs.markdownEditor.easymde.value(newContent)
-			this.description = newContent
-			this.modalShow = false
 			this.updateDescription()
+			this.modalShow = false
 		},
 		clickedPreview(e) {
 			if (e.target.getAttribute('type') === 'checkbox') {
@@ -409,4 +414,12 @@ h5 {
 .vue-easymde .cm-s-easymde .cm-formatting.cm-image {
 	color: var(--color-text-maxcontrast);
 }
+
+.app-sidebar__tab .description__text .text-menubar {
+	top: -10px !important;
+}
+
+.modal__card .description__text .text-menubar {
+	top: 142px !important;
+}
 </style>