fix(files): create suggestions bar

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

src/components/Editor.vue

@@ -58,6 +58,7 @@
 				</template>
 				<ContentContainer v-show="contentLoaded"
 					ref="contentWrapper" />
+				<SuggestionsBar v-if="isEmptyContent && contentLoaded" />
 			</MainContainer>
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
@@ -126,6 +127,7 @@ import Assistant from './Assistant.vue'
 import Translate from './Modal/Translate.vue'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { fetchNode } from '../services/WebdavClient.ts'
+import SuggestionsBar from './SuggestionsBar.vue'
 
 export default {
 	name: 'Editor',
@@ -141,6 +143,7 @@ export default {
 		Status,
 		Assistant,
 		Translate,
+		SuggestionsBar,
 	},
 	mixins: [
 		isMobile,
@@ -271,6 +274,7 @@ export default {
 			contentWrapper: null,
 			translateModal: false,
 			translateContent: '',
+			isEmptyContent: true,
 		}
 	},
 	computed: {
@@ -612,6 +616,7 @@ export default {
 			this.emit('update:content', {
 				markdown: proseMirrorMarkdown,
 			})
+			this.isEmptyContent = editor.state.doc.nodeSize <= 4
 		},
 
 		onSync({ steps, document }) {

src/components/SuggestionsBar.vue

@@ -0,0 +1,95 @@
+<template>
+	<div class="container-suggestions">
+		<NcButton type="tertiary"
+			size="normal"
+			@click="$callChooseLocalAttachment">
+			<template #icon>
+				<Document :size="20" />
+			</template>
+			{{ t('text', 'Add image') }}
+		</NcButton>
+
+		<NcButton ref="suggestButtonFile"
+			type="tertiary"
+			size="normal"
+			@click="$callChooseLocalAttachment">
+			<template #icon>
+				<Document :size="20" />
+			</template>
+			{{ t('text', 'Link to file') }}
+		</NcButton>
+
+		<NcButton type="tertiary"
+			size="normal"
+			@click="insertTable">
+			<template #icon>
+				<Table :size="20" />
+			</template>
+			{{ t('text', 'Insert Table') }}
+		</NcButton>
+
+		<NcButton type="tertiary"
+			size="normal"
+			@click="linkPicker">
+			<template #icon>
+				<Shape :size="20" />
+			</template>
+			{{ t('text', 'Smart Picker') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import { NcButton } from '@nextcloud/vue'
+import { Document, Table, Shape } from './icons.js'
+import { useActionChooseLocalAttachmentMixin } from './Editor/MediaHandler.provider.js'
+import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import { useEditorMixin } from './Editor.provider.js'
+
+export default {
+	name: 'SuggestionsBar',
+	components: {
+		Table,
+		Document,
+		NcButton,
+		Shape,
+	},
+	mixins: [
+		useActionChooseLocalAttachmentMixin,
+		useEditorMixin,
+	],
+
+	methods: {
+		linkPicker() {
+			getLinkWithPicker(null, true)
+				.then(link => {
+					const chain = this.$editor.chain()
+					if (this.$editor.view.state?.selection.empty) {
+						chain.focus().insertPreview(link).run()
+					} else {
+						chain.setLink({ href: link }).focus().run()
+					}
+				})
+				.catch(error => {
+					console.error('Smart picker promise rejected', error)
+				})
+		},
+		insertTable() {
+			this.$editor.chain().focus().insertTable()?.run()
+		},
+	},
+
+}
+
+</script>
+
+<style scoped lang="scss">
+
+.container-suggestions {
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	align-content: flex-end;
+	position: sticky;
+}
+</style>