fix(NcRichContenteditable): bring back label prop for autocomplete

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud-libraries · Feb 5, 2024 · 5103725 · 5103725
1 parent f2473fb
commit 5103725
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
@@ -34,10 +34,10 @@
 				:status="status.status" />
 		</div>
 
-		<!-- Title and subline -->
+		<!-- Label and subline -->
 		<span class="autocomplete-result__content">
-			<span class="autocomplete-result__title" :title="title">
-				{{ title }}
+			<span class="autocomplete-result__title" :title="labelWithFallback">
+				{{ labelWithFallback }}
 			</span>
 			<span v-if="subline" class="autocomplete-result__subline">
 				{{ subline }}
@@ -59,9 +59,18 @@ export default {
 	},
 
 	props: {
+		/**
+		 * @deprecated Use `label` instead
+		 */
 		title: {
 			type: String,
-			required: true,
+			required: false,
+			default: null,
+		},
+		label: {
+			type: String,
+			required: false,
+			default: null,
 		},
 		subline: {
 			type: String,
@@ -98,6 +107,10 @@ export default {
 				? this.getAvatarUrl(this.id, 44)
 				: null
 		},
+		// For backwards compatibility
+		labelWithFallback() {
+			return this.label || this.title
+		},
 	},
 
 	methods: {

diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -70,14 +70,14 @@ export default {
 				Test01: {
 					icon: 'icon-user',
 					id: 'Test01',
-					title: 'Test01',
+					label: 'Test01',
 					source: 'users',
 					primary: true,
 				},
 				Test02: {
 					icon: 'icon-user',
 					id: 'Test02',
-					title: 'Test02',
+					label: 'Test02',
 					source: 'users',
 					status: {
 						clearAt: null,
@@ -90,7 +90,7 @@ export default {
 				'Test@User': {
 					icon: 'icon-user',
 					id: 'Test@User',
-					title: 'Test 03',
+					label: 'Test 03',
 					source: 'users',
 					status: {
 						clearAt: null,
@@ -103,7 +103,7 @@ export default {
 				'Test Offline': {
 					icon: 'icon-user',
 					id: 'Test Offline',
-					title: 'Test Offline',
+					label: 'Test Offline',
 					source: 'users',
 					status: {
 						clearAt: null,
@@ -116,7 +116,7 @@ export default {
 				'Test DND': {
 					icon: 'icon-user',
 					id: 'Test DND',
-					title: 'Test DND',
+					label: 'Test DND',
 					source: 'users',
 					status: {
 						clearAt: null,
@@ -560,8 +560,8 @@ export default {
 				// Allow spaces in the middle of mentions
 				allowSpaces: true,
 				fillAttr: 'id',
-				// Search against id and title (display name)
-				lookup: result => `${result.id} ${result.title}`,
+				// Search against id and label (display name) (fallback to title for v8.0.0..8.6.1 compatibility)
+				lookup: result => `${result.id} ${result.label ?? result.title}`,
 				// Where to inject the menu popup
 				menuContainer: this.menuContainer,
 				// Popup mention autocompletion templates

diff --git a/tests/unit/mixins/richEditor.spec.js b/tests/unit/mixins/richEditor.spec.js
@@ -70,7 +70,7 @@ describe('richEditor.js', () => {
 					userData: {
 						jdoe: {
 							id: 'jdoe',
-							title: 'J. Doe',
+							label: 'J. Doe',
 							source: 'users',
 							icon: 'icon-user',
 						},