Merge pull request #10122 from nextcloud/feat/mention

feat: add mention to mail

lib/Controller/ContactIntegrationController.php

@@ -15,18 +15,27 @@
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\Attribute\OpenAPI;
 use OCP\AppFramework\Http\JSONResponse;
+use OCP\ICache;
+use OCP\ICacheFactory;
 use OCP\IRequest;
 
 #[OpenAPI(scope: OpenAPI::SCOPE_IGNORE)]
 class ContactIntegrationController extends Controller {
 	private ContactIntegrationService $service;
+	private ICache $cache;
+	private string $uid;
+
 
 	public function __construct(string $appName,
 		IRequest $request,
-		ContactIntegrationService $service) {
+		ContactIntegrationService $service,
+		ICacheFactory $cacheFactory,
+		string $UserId) {
 		parent::__construct($appName, $request);
 
 		$this->service = $service;
+		$this->cache = $cacheFactory->createLocal('mail.contacts');
+		$this->uid = $UserId;
 	}
 
 	/**
@@ -75,8 +84,16 @@ public function newContact(?string $contactName = null, ?string $mail = null): J
 	 * @return JSONResponse
 	 */
 	#[TrapError]
-	public function autoComplete(string $term): JSONResponse {
-		$res = $this->service->autoComplete($term);
-		return (new JSONResponse($res))->cacheFor(60 * 60, false, true);
+	public function autoComplete(string $term, bool $forceSAB = false): JSONResponse {
+		$cached = $this->cache->get($this->uid.$term);
+		if($cached !== null) {
+			$decoded = json_decode($cached, true);
+			if($decoded !== null) {
+				return new JSONResponse($decoded);
+			}
+		}
+		$res = $this->service->autoComplete($term, $forceSAB);
+		$this->cache->set($this->uid.$term, json_encode($res), 24 * 3600);
+		return new JSONResponse($res);
 	}
 }

lib/Service/ContactIntegration/ContactIntegrationService.php

@@ -32,7 +32,7 @@ public function newContact(string $name, string $mail): ?array {
 		return $this->contactsIntegration->newContact($name, $mail);
 	}
 
-	public function autoComplete(string $term): array {
-		return $this->contactsIntegration->getContactsWithName($term);
+	public function autoComplete(string $term, bool $forceSAB = false): array {
+		return $this->contactsIntegration->getContactsWithName($term, $forceSAB);
 	}
 }

src/ckeditor/smartpicker/InsertItemCommand.js

@@ -19,29 +19,32 @@ export default class InsertItemCommand extends Command {
 			// @TODO Add error to handle such a situation in the callback
 			return
 		}
-
 		const range = editor.model.createRange(
 			currentPosition.getShiftedBy(-5),
 			currentPosition,
 		)
-
 		// Iterate over all items in this range:
 		const walker = range.getWalker({ shallow: false, direction: 'backward' })
 
 		for (const value of walker) {
 			if (value.type === 'text' && value.item.data.includes(trigger)) {
 				writer.remove(value.item)
-
 				const text = value.item.data
 				const lastSlash = text.lastIndexOf(trigger)
-
 				const textElement = writer.createElement('paragraph')
 				writer.insertText(text.substring(0, lastSlash), textElement)
 				editor.model.insertContent(textElement)
 
-				const itemElement = writer.createElement('paragraph')
-				writer.insertText(item, itemElement)
-				editor.model.insertContent(itemElement)
+				if (trigger === '@') {
+					const mailtoHref = `mailto:${item.email}`
+					const anchorText = `@${item.label}`
+					const textElement = writer.createText(anchorText, { linkHref: mailtoHref })
+					editor.model.insertContent(textElement)
+				} else {
+					const itemElement = writer.createElement('paragraph')
+					writer.insertText(item, itemElement)
+					editor.model.insertContent(itemElement)
+				}
 
 				return
 			}

src/components/Composer.vue

@@ -245,6 +245,7 @@
 				:bus="bus"
 				@input="onEditorInput"
 				@ready="onEditorReady"
+				@mention="handleMention"
 				@show-toolbar="handleShow" />
 			<MailvelopeEditor v-else
 				ref="mailvelopeEditor"
@@ -1240,6 +1241,10 @@ export default {
 			this.mailvelope.keyRing = await mailvelope.getKeyring()
 			await this.checkRecipientsKeys()
 		},
+		handleMention(option) {
+			this.editorMode = EDITOR_MODE_HTML
+			this.onNewToAddr(option)
+		},
 		onNewToAddr(option) {
 			this.onNewAddr(option, this.selectTo, 'to')
 		},

src/components/TextEditor.vue

@@ -45,6 +45,7 @@ import { searchProvider, getLinkWithPicker } from '@nextcloud/vue/dist/Component
 import { getLanguage } from '@nextcloud/l10n'
 import logger from '../logger.js'
 import PickerPlugin from '../ckeditor/smartpicker/PickerPlugin.js'
+import { autoCompleteByName } from '../service/ContactIntegrationService.js'
 import { emojiSearch, emojiAddRecent } from '@nextcloud/vue'
 
 export default {
@@ -86,6 +87,7 @@ export default {
 			QuotePlugin,
 			PickerPlugin,
 			Mention,
+			LinkPlugin,
 		]
 		const toolbar = ['undo', 'redo']
 
@@ -96,7 +98,6 @@ export default {
 				BoldPlugin,
 				ItalicPlugin,
 				BlockQuotePlugin,
-				LinkPlugin,
 				ListStyle,
 				FontPlugin,
 				RemoveFormat,
@@ -151,6 +152,11 @@ export default {
 							feed: this.getLink,
 							itemRenderer: this.customLinkRenderer,
 						},
+						{
+							marker: '@',
+							feed: this.getContact,
+							itemRenderer: this.customContactRenderer,
+						},
 					],
 				},
 			},
@@ -174,6 +180,14 @@ export default {
 				emojiResults.unshift(':' + text)
 			}
 			return emojiResults
+		},
+		async getContact(text) {
+			if (text.length === 0) {
+				return []
+			}
+			let contactResults = await autoCompleteByName(text, true)
+			contactResults = contactResults.filter(result => result.email.length > 0)
+			return contactResults
 		},
 		 customEmojiRenderer(item) {
 			const itemElement = document.createElement('span')
@@ -207,6 +221,20 @@ export default {
 
 			return itemElement
 		},
+		customContactRenderer(item) {
+			const itemElement = document.createElement('span')
+
+			itemElement.classList.add('custom-item')
+			itemElement.id = `mention-list-item-id-${item.id}`
+			const usernameElement = document.createElement('p')
+
+			usernameElement.classList.add('custom-item-username')
+			usernameElement.textContent = item.label
+
+			itemElement.appendChild(usernameElement)
+
+			return itemElement
+		},
 		overrideDropdownPositionsToNorth(editor, toolbarView) {
 			const {
 				south, north, southEast, southWest, northEast, northWest,
@@ -312,6 +340,10 @@ export default {
 							console.debug('Smart picker promise rejected:', error)
 						})
 				}
+				if (eventData.marker === '@') {
+					this.editorInstance.execute('insertItem', { email: item.email[0], label: item.label }, '@')
+					this.$emit('mention', { email: item.email[0], label: item.label })
+				}
 			}, { priority: 'high' })
 			this.editorInstance = editor
 

src/service/ContactIntegrationService.js

@@ -26,10 +26,16 @@ export const newContact = (name, mailAddr) => {
 	return Axios.put(url, { contactName: name, mail: mailAddr }).then((resp) => resp.data)
 }
 
-export const autoCompleteByName = (term) => {
+export const autoCompleteByName = (term, forceSAB = false) => {
 	const url = generateUrl('/apps/mail/api/contactIntegration/autoComplete/{term}', {
 		term,
 	})
 
-	return Axios.get(url).then((resp) => resp.data)
+	const config = {
+		params: {
+			forceSAB,
+		},
+	}
+
+	return Axios.get(url, config).then((resp) => resp.data)
 }