Merge pull request #4286 from nextcloud/backport/4249/stable30

[stable30] Implement support for insertion of multimedia from Nextcloud assets

Author: elzody

docs/frontend-integration.md

@@ -100,6 +100,10 @@ The following handlers are currently supported:
 - insertGraphic: will be called when an image from the Nextcloud storage should be inserted
   - Arguments
     - insertFileFromPath(path): Callback to trigger the actual inserting of the graphic from an absolute file path
+- insertFile: will be called when a file (e.g., multimedia) from the Nextcloud storage should be inserted (generalized insertGraphic)
+  - Arguments
+    - mimeTypeFilter: array of MIME types (strings) to filter in the UI
+    - insertFileFromPath(path): Callback to trigger the actual inserting of the file from an absolute file path
 
 In addition, the following handlers can be used to overwrite the handling of file actions that are rendered in the Nextcloud header bar:
 - actionDetails

lib/Controller/WopiController.php

@@ -153,6 +153,7 @@ public function checkFileInfo($fileId, $access_token) {
 			'SupportsRename' => !$isVersion && !$wopi->isRemoteToken(),
 			'UserCanRename' => !$isPublic && !$isVersion && !$wopi->isRemoteToken(),
 			'EnableInsertRemoteImage' => !$isPublic,
+			'EnableInsertRemoteFile' => !$isPublic,
 			'EnableShare' => $file->isShareable() && !$isVersion && !$isPublic,
 			'HideUserList' => '',
 			'EnableOwnerTermination' => $wopi->getCanwrite() && !$isPublic,

src/components/Modal/ZoteroHint.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcModal :show="show" @close="close" :name="t('richdocument', 'Link to your Zotero library')">
+	<NcModal :show="show" :name="t('richdocument', 'Link to your Zotero library')" @close="close">
 		<div class="zotero-hint">
 			<h2>{{ t('richdocument', 'Link to your Zotero library') }}</h2>
 			<BookOpenPageVariantOutline :size="96" />

src/view/FilesAppIntegration.js

@@ -149,30 +149,30 @@ export default {
 		}
 	},
 
-	insertGraphic(insertFile) {
+	insertFile_impl(mimeTypeFilter, insertFileProc, insertHandler) {
 		if (isPublic) {
-			console.error('[FilesAppIntegration] insertGraphic is not supported')
+			console.error('[FilesAppIntegration] insertFile is not supported')
 		}
 
 		const insertFileFromPath = async (path) => {
 			const filename = path.substring(path.lastIndexOf('/') + 1)
 			const { data } = await axios.post(generateUrl('apps/richdocuments/assets'), { path })
-			insertFile(filename, data.url)
+			insertFileProc(filename, data.url)
 		}
 
-		if (this.handlers.insertGraphic && this.handlers.insertGraphic(this, { insertFileFromPath })) {
+		if (insertHandler && insertHandler(this, mimeTypeFilter, { insertFileFromPath })) {
 			return
 		}
 
-		getFilePickerBuilder(t('richdocuments', 'Insert image from {name}', { name: OC.theme.name }))
-			.setMimeTypeFilter(['image/png', 'image/gif', 'image/jpeg', 'image/svg'])
+		getFilePickerBuilder(t('richdocuments', 'Insert file from {name}', { name: OC.theme.name }))
+			.setMimeTypeFilter(mimeTypeFilter)
 			.setFilter((node) => {
 				const downloadShareAttribute = JSON.parse(node.attributes['share-attributes']).find((shareAttribute) => shareAttribute.key === 'download')
 				const downloadPermissions = downloadShareAttribute !== undefined ? (downloadShareAttribute.enabled || downloadShareAttribute.value) : true
 				return (node.permissions & OC.PERMISSION_READ) && downloadPermissions
 			})
 			.addButton({
-				label: t('richdocuments', 'Insert image'),
+				label: t('richdocuments', 'Insert file'),
 				callback: (files) => {
 					if (files && files.length) {
 						insertFileFromPath(files[0].path)
@@ -183,6 +183,16 @@ export default {
 			.pick()
 	},
 
+	insertGraphic(insertFileProc) {
+		this.insertFile_impl(['image/png', 'image/gif', 'image/jpeg', 'image/svg'],
+			insertFileProc,
+			(filesAppIntegration, mimeTypeFilter, { insertFileFromPath }) => { return this.handlers.insertGraphic && this.handlers.insertGraphic(filesAppIntegration, { insertFileFromPath }) })
+	},
+
+	insertFile(mimeTypeFilter, insertFileProc) {
+		this.insertFile_impl(mimeTypeFilter, insertFileProc, this.handlers.insertFile)
+	},
+
 	getFileList() {
 		if (this.fileList) {
 			return this.fileList

src/view/Office.vue

@@ -428,6 +428,14 @@ export default {
 					})
 				})
 				break
+			case 'UI_InsertFile':
+				FilesAppIntegration.insertFile(args.mimeTypeFilter, (filename, url) => {
+					this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, args.callback, {
+						filename,
+						url,
+					})
+				})
+				break
 			case 'UI_Mention':
 				this.uiMention(parsed.args)
 				break