[stable29] Feat/5524 link preview add button to delete links in preview mode

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')
+	})
+})

src/components/Editor/PreviewOptions.vue

@@ -20,42 +20,56 @@
   -
   -->
 <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>
-	</NcActions>
+	<div>
+		<NcActions data-text-preview-options="select"
+			class="preview-options"
+			@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')">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+				{{ t('text','Remove link') }}
+			</NcActionButton>
+		</NcActions>
+	</div>
 </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: {

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,8 +74,14 @@ export default {
 		this.editor.off('selectionUpdate', this.checkSelection)
 	},
 	methods: {
-		convertToPreview(...args) {
-			console.info(...args)
+		changeViewMode(value) {
+			if (value === 'delete-preview') {
+				this.deleteNode()
+			} else if (value === 'link-preview') {
+				this.convertToPreview()
+			}
+		},
+		convertToPreview() {
 			this.editor.chain()
 				.focus()
 				.setTextSelection(this.getPos() + 1)

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" />
@@ -56,8 +56,14 @@ export default {
 		}
 	},
 	methods: {
-		convertToParagraph(...args) {
-			console.info(...args)
+		changeViewMode(value) {
+			if (value === 'delete-preview') {
+				this.deleteNode()
+			} else if (value === 'text-only') {
+				this.convertToParagraph()
+			}
+		},
+		convertToParagraph() {
 			this.$editor.chain()
 				.focus()
 				.setTextSelection(this.getPos() + 1)