From 2e901a286f0326faf821cdb70e46cb5771204f65 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 17 Oct 2024 15:19:54 +0200
Subject: [PATCH 1/3] feat(NcRichText): allow to make interactive widgets
 opt-in from NcRichText

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcRichText.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index f321dd3c16..892f14b511 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -330,6 +330,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		referenceInteractiveOptIn: {
+			type: Boolean,
+			default: false,
+		},
 		/** Provide data upfront to avoid extra http request */
 		references: {
 			type: Object,
@@ -419,6 +423,7 @@ export default {
 								text: this.text,
 								referenceData: this.references,
 								interactive: this.referenceInteractive,
+								interactiveOptIn: this.referenceInteractiveOptIn,
 							},
 						}),
 					])
@@ -544,6 +549,7 @@ export default {
 								text: this.text,
 								referenceData: this.references,
 								interactive: this.referenceInteractive,
+								interactiveOptIn: this.referenceInteractiveOptIn,
 							},
 						}),
 					])

From b5e950b154be8d1817c8ab5f2ba8e551f9b5740f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 17 Oct 2024 15:25:41 +0200
Subject: [PATCH 2/3] feat(NcReferenceList): ease template, fix min-height

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcReferenceList.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/NcRichText/NcReferenceList.vue b/src/components/NcRichText/NcReferenceList.vue
index 514b9df395..2d1053f721 100644
--- a/src/components/NcRichText/NcReferenceList.vue
+++ b/src/components/NcRichText/NcReferenceList.vue
@@ -5,9 +5,11 @@
 
 <template>
 	<div v-if="isVisible" class="widgets--list" :class="{'icon-loading': loading }">
-		<div v-for="reference in displayedReferences" :key="reference?.openGraphObject?.id">
-			<NcReferenceWidget :reference="reference" :interactive="interactive" :interactive-opt-in="interactiveOptIn" />
-		</div>
+		<NcReferenceWidget v-for="reference in displayedReferences"
+			:key="reference?.openGraphObject?.id"
+			:reference="reference"
+			:interactive="interactive"
+			:interactive-opt-in="interactiveOptIn" />
 	</div>
 </template>
 <script>
@@ -146,11 +148,8 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.widget--list {
-	width: var(--widget-full-width, 100%);
-}
-
-.widgets--list.icon-loading {
+.widgets--list {
+	width: 100%;
 	min-height: var(--default-clickable-area);
 }
 </style>

From 98b4fc982f1126baf98d50f630f1ee317417ff14 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 17 Oct 2024 16:02:26 +0200
Subject: [PATCH 3/3] feat(NcReferenceWidget): move toggle-interactive button

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcReferenceWidget.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
index 6e9fbce605..7f97d9a3a3 100644
--- a/src/components/NcRichText/NcReferenceWidget.vue
+++ b/src/components/NcRichText/NcReferenceWidget.vue
@@ -229,7 +229,7 @@ export default {
 	margin-top: calc(var(--default-grid-baseline, 4px) * 3);
 	overflow: hidden;
 	border: 2px solid var(--color-border);
-	border-radius: var(--border-radius-large);
+	border-radius: var(--border-radius-container);
 	background-color: transparent;
 	display: flex;
 }
@@ -317,17 +317,9 @@ export default {
 	position: relative;
 	.toggle-interactive--button {
 		position: absolute;
-		top: 50%;
+		bottom: var(--default-grid-baseline);
+		right: var(--default-grid-baseline);
 		z-index: 10000;
-		left: 50%;
-		transform: translateX(-50%) translateY(-50%);
-		opacity: 0;
-	}
-
-	&:focus-within, &:hover {
-		.toggle-interactive--button {
-			opacity: 1;
-		}
 	}
 }
 </style>