From fdee2082971a269ddd9103a64cd684ab27622222 Mon Sep 17 00:00:00 2001
From: Magnus Bendix Borregaard <51884390+magnus-bb@users.noreply.github.com>
Date: Wed, 12 Jul 2023 12:13:35 +0200
Subject: [PATCH] Fix formatted Kanban card text including HTML tags (#19112)

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/plenty-dragons-drop.md |  5 +++++
 app/src/layouts/kanban/kanban.vue | 23 +++++++++++++++++++----
 contributors.yml                  |  1 +
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/plenty-dragons-drop.md

diff --git a/.changeset/plenty-dragons-drop.md b/.changeset/plenty-dragons-drop.md
new file mode 100644
index 0000000000..1595a37bf4
--- /dev/null
+++ b/.changeset/plenty-dragons-drop.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed display of formatted values used as card text in Kanban layout
diff --git a/app/src/layouts/kanban/kanban.vue b/app/src/layouts/kanban/kanban.vue
index d3c4f09bf0..9c06658c37 100644
--- a/app/src/layouts/kanban/kanban.vue
+++ b/app/src/layouts/kanban/kanban.vue
@@ -53,7 +53,16 @@
 							<router-link :to="getItemRoute(collection, element.id)" class="item">
 								<div v-if="element.title" class="title">{{ element.title }}</div>
 								<img v-if="element.image" class="image" :src="element.image" />
-								<div v-if="element.text" class="text">{{ element.text }}</div>
+								<render-display
+									v-if="element.text && textFieldConfiguration"
+									:collection="collection"
+									:value="element.text"
+									:type="textFieldConfiguration.type"
+									:field="layoutOptions.textField"
+									:display="textFieldConfiguration.meta?.display"
+									:options="textFieldConfiguration.meta?.options"
+									:interface="textFieldConfiguration.meta?.interface"
+								/>
 								<display-labels
 									v-if="element.tags"
 									:value="element.tags"
@@ -111,16 +120,17 @@ export default {
 import { addTokenToURL } from '@/api';
 import { getItemRoute } from '@/utils/get-item-route';
 import { getRootPath } from '@/utils/get-root-path';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Draggable from 'vuedraggable';
-import type { ChangeEvent, Group, Item } from './types';
+import type { ChangeEvent, Group, Item, LayoutOptions } from './types';
+import type { Field } from '@directus/types';
 
 const props = withDefaults(
 	defineProps<{
 		collection?: string | null;
 		groupCollection?: string | null;
-		fieldsInCollection?: Record<string, any>[];
+		fieldsInCollection?: Field[];
 		primaryKeyField?: Record<string, any> | null;
 		groupedItems?: Group[];
 		groupTitle?: string | null;
@@ -134,6 +144,7 @@ const props = withDefaults(
 		sortField?: string | null;
 		userField?: string | null;
 		groupsSortField?: string | null;
+		layoutOptions: LayoutOptions;
 	}>(),
 	{
 		collection: null,
@@ -185,6 +196,10 @@ function saveChanges() {
 	editDialogOpen.value = null;
 	editTitle.value = '';
 }
+
+const textFieldConfiguration = computed<Field | undefined>(() => {
+	return props.fieldsInCollection.find((field) => field.field === props.layoutOptions.textField);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/contributors.yml b/contributors.yml
index a3e25c7fa2..04b16d6239 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -51,3 +51,4 @@
 - v1b3m
 - ceptonit
 - luochuanyuewu
+- magnus-bb