Skip to content

Commit 8f8931d

Browse files
juliusknorrjuliusknorr
authored
Merge pull request #5580 from nextcloud/backport/5575/stable29
2 parents ba2e343 + e31628e commit 8f8931d

4 files changed

Lines changed: 120 additions & 30 deletions

File tree

‎cypress/e2e/nodes/PreviewOptions.spec.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* @copyright Copyright (c) 2022
3+
*
4+
* @license AGPL-3.0-or-later
5+
*
6+
* This program is free software: you can redistribute it and/or modify
7+
* it under the terms of the GNU Affero General Public License as
8+
* published by the Free Software Foundation, either version 3 of the
9+
* License, or (at your option) any later version.
10+
*
11+
* This program is distributed in the hope that it will be useful,
12+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
* GNU Affero General Public License for more details.
15+
*
16+
* You should have received a copy of the GNU Affero General Public License
17+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
18+
*
19+
*/
20+
21+
import { initUserAndFiles, randUser } from '../../utils/index.js'
22+
23+
const user = randUser()
24+
25+
describe('Preview Options', function() {
26+
before(function() {
27+
initUserAndFiles(user, 'codeblock.md', 'empty.md')
28+
})
29+
beforeEach(function() {
30+
cy.login(user)
31+
cy.isolateTest({ sourceFile: 'empty.md' })
32+
cy.openFile('empty.md')
33+
cy.get('.entry-action__insert-link').click()
34+
cy.get('li').get('[data-text-action-entry="insert-link-website"]').click()
35+
cy.get('.input-field__input--trailing-icon').type('nextcloud.com')
36+
cy.get('.input-field__trailing-button').click()
37+
cy.get('.preview-options').click()
38+
})
39+
40+
it('should render previewOptions correctly', function() {
41+
cy.get('.action-button__text').contains('Remove link').should('be.visible')
42+
cy.get('.action-radio__label').each(el => {
43+
cy.wrap(el).invoke('text').should('match', /Text only|Show link preview/)
44+
})
45+
})
46+
47+
it('should toggle to Link Preview', function() {
48+
cy.get('.preview').should('not.exist')
49+
cy.get('.action-radio__label').each(el => {
50+
cy.wrap(el).invoke('text').then(text => {
51+
if (text === 'Show link preview') {
52+
cy.wrap(el).click()
53+
}
54+
})
55+
})
56+
cy.get('.preview').should('be.visible')
57+
})
58+
59+
it('should Remove link', function() {
60+
cy.get('.paragraph-content').should('have.text', 'nextcloud.com')
61+
cy.get('.action-button__text').contains('Remove link').click()
62+
cy.get('.paragraph-content').should('not.have.text', 'nextcloud.com')
63+
})
64+
})

‎src/components/Editor/PreviewOptions.vue‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,56 @@
2020
-
2121
-->
2222
<template>
23-
<NcActions data-text-preview-options="select"
24-
@open="$emit('open')">
25-
<template #icon>
26-
<DotsVerticalIcon :size="20" />
27-
</template>
28-
<NcActionCaption :name="t('text', 'Preview options')" />
29-
<NcActionRadio data-text-preview-option="text-only"
30-
close-after-click
31-
name="preview-option"
32-
value="text-only"
33-
:checked="value === 'text-only'"
34-
@change="e => $emit('update:value', e.currentTarget.value)">
35-
{{ t('text', 'Text only') }}
36-
</NcActionRadio>
37-
<NcActionRadio data-text-preview-option="link-preview"
38-
close-after-click
39-
name="preview-option"
40-
value="link-preview"
41-
:checked="value === 'link-preview'"
42-
@change="e => $emit('update:value', e.currentTarget.value)">
43-
{{ t('text', 'Show link preview') }}
44-
</NcActionRadio>
45-
</NcActions>
23+
<div>
24+
<NcActions data-text-preview-options="select"
25+
class="preview-options"
26+
@open="$emit('open')">
27+
<template #icon>
28+
<DotsVerticalIcon :size="20" />
29+
</template>
30+
<NcActionCaption :name="t('text', 'Preview options')" />
31+
<NcActionRadio data-text-preview-option="text-only"
32+
close-after-click
33+
name="preview-option"
34+
value="text-only"
35+
:checked="value === 'text-only'"
36+
@change="e => $emit('update:value', e.currentTarget.value)">
37+
{{ t('text', 'Text only') }}
38+
</NcActionRadio>
39+
<NcActionRadio data-text-preview-option="link-preview"
40+
close-after-click
41+
name="preview-option"
42+
value="link-preview"
43+
:checked="value === 'link-preview'"
44+
@change="e => $emit('update:value', e.currentTarget.value)">
45+
{{ t('text', 'Show link preview') }}
46+
</NcActionRadio>
47+
<NcActionSeparator />
48+
<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
49+
<template #icon>
50+
<DeleteIcon :size="20" />
51+
</template>
52+
{{ t('text','Remove link') }}
53+
</NcActionButton>
54+
</NcActions>
55+
</div>
4656
</template>
4757

4858
<script>
49-
import { NcActions, NcActionRadio, NcActionCaption } from '@nextcloud/vue'
59+
import { NcActions, NcActionButton, NcActionRadio, NcActionCaption, NcActionSeparator } from '@nextcloud/vue'
5060
import DotsVerticalIcon from 'vue-material-design-icons/DotsVertical.vue'
61+
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
5162
5263
export default {
5364
name: 'PreviewOptions',
5465
components: {
5566
DotsVerticalIcon,
5667
NcActions,
68+
NcActionButton,
5769
NcActionCaption,
5870
NcActionRadio,
71+
NcActionSeparator,
72+
DeleteIcon,
5973
},
6074
props: {
6175
value: {

‎src/nodes/ParagraphView.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<PreviewOptions v-if="editor.isEditable && isSelected && canConvertToPreview"
2626
:value.sync="value"
2727
@open="editor.commands.hideLinkBubble()"
28-
@update:value="convertToPreview" />
28+
@update:value="changeViewMode" />
2929
<NodeViewContent class="paragraph-content" />
3030
</NodeViewWrapper>
3131
</template>
@@ -74,8 +74,14 @@ export default {
7474
this.editor.off('selectionUpdate', this.checkSelection)
7575
},
7676
methods: {
77-
convertToPreview(...args) {
78-
console.info(...args)
77+
changeViewMode(value) {
78+
if (value === 'delete-preview') {
79+
this.deleteNode()
80+
} else if (value === 'link-preview') {
81+
this.convertToPreview()
82+
}
83+
},
84+
convertToPreview() {
7985
this.editor.chain()
8086
.focus()
8187
.setTextSelection(this.getPos() + 1)

‎src/nodes/Preview.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<NodeViewContent style="display:none" />
2828
<PreviewOptions v-if="editor.isEditable"
2929
:value.sync="value"
30-
@update:value="convertToParagraph" />
30+
@update:value="changeViewMode" />
3131
<NcReferenceList :text="node.attrs.href"
3232
:limit="1"
3333
:interactive="!extension.options.isEmbedded" />
@@ -56,8 +56,14 @@ export default {
5656
}
5757
},
5858
methods: {
59-
convertToParagraph(...args) {
60-
console.info(...args)
59+
changeViewMode(value) {
60+
if (value === 'delete-preview') {
61+
this.deleteNode()
62+
} else if (value === 'text-only') {
63+
this.convertToParagraph()
64+
}
65+
},
66+
convertToParagraph() {
6167
this.$editor.chain()
6268
.focus()
6369
.setTextSelection(this.getPos() + 1)

0 commit comments

Comments
 (0)