From 44d486601177d46f34c6516ac54dbf7e22922b57 Mon Sep 17 00:00:00 2001
From: grnd-alt <salimbelakkaf@outlook.de>
Date: Wed, 27 Mar 2024 15:55:15 +0100
Subject: [PATCH 1/4] add Delete Button to link Previews

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
---
 src/components/Editor/PreviewOptions.vue | 13 ++++++++++++-
 src/nodes/ParagraphView.vue              |  6 +++++-
 src/nodes/Preview.vue                    |  4 ++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 5cbfeb3b041..e975289a24f 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -42,20 +42,31 @@
 			@change="e => $emit('update:value', e.currentTarget.value)">
 			{{ t('text', 'Show link preview') }}
 		</NcActionRadio>
+		<NcActionSeparator />
+		<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+			<template #icon>
+				<DeleteIcon :size="20" />
+			</template>
+			{{ t('text','delete') }}
+		</NcActionButton>
 	</NcActions>
 </template>
 
 <script>
-import { NcActions, NcActionRadio, NcActionCaption } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionRadio, NcActionCaption, NcActionSeparator } from '@nextcloud/vue'
 import DotsVerticalIcon from 'vue-material-design-icons/DotsVertical.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 
 export default {
 	name: 'PreviewOptions',
 	components: {
 		DotsVerticalIcon,
 		NcActions,
+		NcActionButton,
 		NcActionCaption,
 		NcActionRadio,
+		NcActionSeparator,
+		DeleteIcon,
 	},
 	props: {
 		value: {
diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
index 421c1e28d39..09dbdd822cf 100644
--- a/src/nodes/ParagraphView.vue
+++ b/src/nodes/ParagraphView.vue
@@ -25,7 +25,7 @@
 		<PreviewOptions v-if="editor.isEditable && isSelected && canConvertToPreview"
 			:value.sync="value"
 			@open="editor.commands.hideLinkBubble()"
-			@update:value="convertToPreview" />
+			@update:value="changeViewMode" />
 		<NodeViewContent class="paragraph-content" />
 	</NodeViewWrapper>
 </template>
@@ -74,6 +74,10 @@ export default {
 		this.editor.off('selectionUpdate', this.checkSelection)
 	},
 	methods: {
+		changeViewMode(value) {
+			if (value === 'delete-preview') this.deleteNode()
+			else if (value === 'link-preview') this.convertToPreview()
+		},
 		convertToPreview(...args) {
 			console.info(...args)
 			this.editor.chain()
diff --git a/src/nodes/Preview.vue b/src/nodes/Preview.vue
index 9bc01cbe65a..e8e3d296556 100644
--- a/src/nodes/Preview.vue
+++ b/src/nodes/Preview.vue
@@ -56,6 +56,10 @@ export default {
 		}
 	},
 	methods: {
+		changeViewMode(value) {
+			if (value === 'delete-preview') this.deleteNode()
+			else if (value === 'link-preview') this.convertToParagraph()
+		},
 		convertToParagraph(...args) {
 			console.info(...args)
 			this.$editor.chain()

From 89e995378d79c3a6bbe17aa0e5b5bf9d5aa44769 Mon Sep 17 00:00:00 2001
From: grnd-alt <salimbelakkaf@outlook.de>
Date: Wed, 27 Mar 2024 17:55:35 +0100
Subject: [PATCH 2/4] use correct function for value change

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
---
 src/nodes/Preview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/nodes/Preview.vue b/src/nodes/Preview.vue
index e8e3d296556..81b12b292f0 100644
--- a/src/nodes/Preview.vue
+++ b/src/nodes/Preview.vue
@@ -27,7 +27,7 @@
 		<NodeViewContent style="display:none" />
 		<PreviewOptions v-if="editor.isEditable"
 			:value.sync="value"
-			@update:value="convertToParagraph" />
+			@update:value="changeViewMode" />
 		<NcReferenceList :text="node.attrs.href"
 			:limit="1"
 			:interactive="!extension.options.isEmbedded" />
@@ -58,7 +58,7 @@ export default {
 	methods: {
 		changeViewMode(value) {
 			if (value === 'delete-preview') this.deleteNode()
-			else if (value === 'link-preview') this.convertToParagraph()
+			else if (value === 'text-only') this.convertToParagraph()
 		},
 		convertToParagraph(...args) {
 			console.info(...args)

From 3be23e532191c981b9c0ec274393141981673c31 Mon Sep 17 00:00:00 2001
From: grnd-alt <salimbelakkaf@outlook.de>
Date: Thu, 28 Mar 2024 10:26:56 +0100
Subject: [PATCH 3/4] adapt to nextcloud code style

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
---
 src/components/Editor/PreviewOptions.vue |  2 +-
 src/nodes/ParagraphView.vue              | 10 ++++++----
 src/nodes/Preview.vue                    | 10 ++++++----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index e975289a24f..cc2ed5a0f55 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -47,7 +47,7 @@
 			<template #icon>
 				<DeleteIcon :size="20" />
 			</template>
-			{{ t('text','delete') }}
+			{{ t('text','Remove link') }}
 		</NcActionButton>
 	</NcActions>
 </template>
diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
index 09dbdd822cf..505647bf2b7 100644
--- a/src/nodes/ParagraphView.vue
+++ b/src/nodes/ParagraphView.vue
@@ -75,11 +75,13 @@ export default {
 	},
 	methods: {
 		changeViewMode(value) {
-			if (value === 'delete-preview') this.deleteNode()
-			else if (value === 'link-preview') this.convertToPreview()
+			if (value === 'delete-preview') {
+				this.deleteNode()
+			} else if (value === 'link-preview') {
+				this.convertToPreview()
+			}
 		},
-		convertToPreview(...args) {
-			console.info(...args)
+		convertToPreview() {
 			this.editor.chain()
 				.focus()
 				.setTextSelection(this.getPos() + 1)
diff --git a/src/nodes/Preview.vue b/src/nodes/Preview.vue
index 81b12b292f0..c9a4e7569b6 100644
--- a/src/nodes/Preview.vue
+++ b/src/nodes/Preview.vue
@@ -57,11 +57,13 @@ export default {
 	},
 	methods: {
 		changeViewMode(value) {
-			if (value === 'delete-preview') this.deleteNode()
-			else if (value === 'text-only') this.convertToParagraph()
+			if (value === 'delete-preview') {
+				this.deleteNode()
+			} else if (value === 'text-only') {
+				this.convertToParagraph()
+			}
 		},
-		convertToParagraph(...args) {
-			console.info(...args)
+		convertToParagraph() {
 			this.$editor.chain()
 				.focus()
 				.setTextSelection(this.getPos() + 1)

From 986cc8ce6f5a6ba421f469ffe206314ea8cae061 Mon Sep 17 00:00:00 2001
From: grnd-alt <salimbelakkaf@outlook.de>
Date: Thu, 28 Mar 2024 12:10:41 +0100
Subject: [PATCH 4/4] add cypress test for PreviewOptions

Signed-off-by: grnd-alt <salimbelakkaf@outlook.de>
---
 cypress/e2e/nodes/PreviewOptions.spec.js | 64 ++++++++++++++++++++++++
 src/components/Editor/PreviewOptions.vue | 59 +++++++++++-----------
 2 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 cypress/e2e/nodes/PreviewOptions.spec.js

diff --git a/cypress/e2e/nodes/PreviewOptions.spec.js b/cypress/e2e/nodes/PreviewOptions.spec.js
new file mode 100644
index 00000000000..a101a752be1
--- /dev/null
+++ b/cypress/e2e/nodes/PreviewOptions.spec.js
@@ -0,0 +1,64 @@
+/**
+ * @copyright Copyright (c) 2022
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { initUserAndFiles, randUser } from '../../utils/index.js'
+
+const user = randUser()
+
+describe('Preview Options', function() {
+	before(function() {
+		initUserAndFiles(user, 'codeblock.md', 'empty.md')
+	})
+	beforeEach(function() {
+		cy.login(user)
+		cy.isolateTest({ sourceFile: 'empty.md' })
+		cy.openFile('empty.md')
+		cy.get('.entry-action__insert-link').click()
+		cy.get('li').get('[data-text-action-entry="insert-link-website"]').click()
+		cy.get('.input-field__input--trailing-icon').type('nextcloud.com')
+		cy.get('.input-field__trailing-button').click()
+		cy.get('.preview-options').click()
+	})
+
+	it('should render previewOptions correctly', function() {
+		cy.get('.action-button__text').contains('Remove link').should('be.visible')
+		cy.get('.action-radio__label').each(el => {
+			cy.wrap(el).invoke('text').should('match', /Text only|Show link preview/)
+		})
+	})
+
+	it('should toggle to Link Preview', function() {
+		cy.get('.preview').should('not.exist')
+		cy.get('.action-radio__label').each(el => {
+			cy.wrap(el).invoke('text').then(text => {
+				if (text === 'Show link preview') {
+					cy.wrap(el).click()
+				}
+			})
+		})
+		cy.get('.preview').should('be.visible')
+	})
+
+	it('should Remove link', function() {
+		cy.get('.paragraph-content').should('have.text', 'nextcloud.com')
+		cy.get('.action-button__text').contains('Remove link').click()
+		cy.get('.paragraph-content').should('not.have.text', 'nextcloud.com')
+	})
+})
diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index cc2ed5a0f55..150212de733 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -20,36 +20,39 @@
   -
   -->
 <template>
-	<NcActions data-text-preview-options="select"
-		@open="$emit('open')">
-		<template #icon>
-			<DotsVerticalIcon :size="20" />
-		</template>
-		<NcActionCaption :name="t('text', 'Preview options')" />
-		<NcActionRadio data-text-preview-option="text-only"
-			close-after-click
-			name="preview-option"
-			value="text-only"
-			:checked="value === 'text-only'"
-			@change="e => $emit('update:value', e.currentTarget.value)">
-			{{ t('text', 'Text only') }}
-		</NcActionRadio>
-		<NcActionRadio data-text-preview-option="link-preview"
-			close-after-click
-			name="preview-option"
-			value="link-preview"
-			:checked="value === 'link-preview'"
-			@change="e => $emit('update:value', e.currentTarget.value)">
-			{{ t('text', 'Show link preview') }}
-		</NcActionRadio>
-		<NcActionSeparator />
-		<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+	<div>
+		<NcActions data-text-preview-options="select"
+			class="preview-options"
+			@open="$emit('open')">
 			<template #icon>
-				<DeleteIcon :size="20" />
+				<DotsVerticalIcon :size="20" />
 			</template>
-			{{ t('text','Remove link') }}
-		</NcActionButton>
-	</NcActions>
+			<NcActionCaption :name="t('text', 'Preview options')" />
+			<NcActionRadio data-text-preview-option="text-only"
+				close-after-click
+				name="preview-option"
+				value="text-only"
+				:checked="value === 'text-only'"
+				@change="e => $emit('update:value', e.currentTarget.value)">
+				{{ t('text', 'Text only') }}
+			</NcActionRadio>
+			<NcActionRadio data-text-preview-option="link-preview"
+				close-after-click
+				name="preview-option"
+				value="link-preview"
+				:checked="value === 'link-preview'"
+				@change="e => $emit('update:value', e.currentTarget.value)">
+				{{ t('text', 'Show link preview') }}
+			</NcActionRadio>
+			<NcActionSeparator />
+			<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+				{{ t('text','Remove link') }}
+			</NcActionButton>
+		</NcActions>
+	</div>
 </template>
 
 <script>