Merge pull request #5395 from nextcloud/feat/4750

Feat/4750 Make code type fields copyable
nextcloud · Feb 21, 2024 · 53858a1 · 53858a1
2 parents 1b27980 + bb24bca
commit 53858a1
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/cypress/e2e/nodes/CodeBlock.spec.js b/cypress/e2e/nodes/CodeBlock.spec.js
@@ -42,8 +42,21 @@ describe('Front matter support', function() {
  cy.getContent().find('code').eq(1).find('.hljs-string').eq(0).contains('"bar"')
  cy.getContent().find('code').eq(1).find('.hljs-keyword').eq(1).contains('function')
 
+ cy.getContent().find('.code-block').eq(1).find('[data-cy="copy-code"]').click()
+
+ // Copy code to clipboard
+ cy.getContent().find('code').eq(1).invoke('text')
+ .then(code =>
+ cy.window().then(win => {
+ win.navigator.clipboard.readText()
+ .then(copiedCode => {
+ expect(copiedCode).to.equal(code)
+ })
+ }),
+ )
+
  // Remove language
- cy.getContent().find('.code-block').eq(1).find('.view-switch button').click()
+ cy.getContent().find('.code-block').eq(1).find('[data-cy="code-action-group"]').find('div:first-child').click()
  // FIXME: Label behaviour changed, should be back once https:/nextcloud-libraries/nextcloud-vue/pull/4484 is merged
  // cy.get('.action-input__text-label').contains('Code block language')
  cy.get('.input-field__input:visible').clear()
@@ -53,7 +66,7 @@ describe('Front matter support', function() {
  cy.getContent().find('code').eq(1).find('.hljs-keyword').should('not.exist')
 
  // Re-add language
- cy.getContent().find('.code-block').eq(1).find('.view-switch button').click()
+ cy.getContent().find('.code-block').eq(1).find('[data-cy="code-action-group"]').find('div:first-child').click()
  cy.get('.input-field__input:visible').type('javascript')
 
  cy.getContent().find('code').eq(1).find('.hljs-keyword').eq(0).contains('const')
@@ -136,17 +149,17 @@ describe('Front matter support', function() {
  cy.get('.split-view__code').find('code').should('be.visible')
  cy.get('.split-view__preview').find('svg').should('be.visible')
 
- cy.getContent().find('.code-block').eq(0).find('.view-switch button').click()
+ cy.getContent().find('.code-block').eq(0).find('.view-switch div div button').click()
  cy.get('.action-button').eq(0).contains('Source code').click()
  cy.get('.split-view__code').find('code').should('be.visible')
  cy.get('.split-view__preview').find('svg').should('not.be.visible')
 
- cy.getContent().find('.code-block').eq(0).find('.view-switch button').click()
+ cy.getContent().find('.code-block').eq(0).find('.view-switch div div button').click()
  cy.get('.action-button').eq(1).contains('Diagram').click()
  cy.get('.split-view__code').find('code').should('not.be.visible')
  cy.get('.split-view__preview').find('svg').should('be.visible')
 
- cy.getContent().find('.code-block').eq(0).find('.view-switch button').click()
+ cy.getContent().find('.code-block').eq(0).find('.view-switch div div button').click()
  cy.get('.action-button').eq(2).contains('Both').click()
  cy.get('.split-view__code').find('code').should('be.visible')
  cy.get('.split-view__preview').find('svg').should('be.visible')

diff --git a/src/mixins/CopyToClipboardMixin.js b/src/mixins/CopyToClipboardMixin.js
@@ -10,23 +10,23 @@ export default {
  },
 
  methods: {
- async copyToClipboard(url) {
+ async copyToClipboard(content) {
  // change to loading status
  this.copyLoading = true
 
  // copy link to clipboard
  try {
- await navigator.clipboard.writeText(url)
+ await navigator.clipboard.writeText(content)
  this.copySuccess = true
  this.copied = true
 
  // Notify success
- showSuccess(t('collectives', 'Link copied'))
+ showSuccess(t('text', 'Copied to the clipboard'))
  } catch (error) {
  this.copySuccess = false
  this.copied = true
  showError(
- `<div>${t('collectives', 'Could not copy link to the clipboard:')}</div><div>${url}</div>`,
+ `<div>${t('text', 'Could not copy to the clipboard')}</div>`,
  { isHTML: true })
  } finally {
  this.copyLoading = false

diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
@@ -1,8 +1,24 @@
 <template>
  <NodeViewWrapper as="div" :data-mode="viewMode" class="code-block">
- <div v-if="isEditable" class="code-block-header">
+ <div class="code-block-header">
  <div class="view-switch">
- <NcActions :aria-label="t('text', 'Code block options')">
+ <NcActions :aria-label="t('text', 'Copy code block')">
+ <NcActionButton v-if="hasCode"
+ data-cy="copy-code"
+ :aria-label="t('text', 'Copy code')"
+ :close-after-click="false"
+ @click="copyCode">
+ <template #icon>
+ <Check v-if="copySuccess" :size="20" />
+ <NcLoadingIcon v-else-if="copyLoading" :size="20" />
+ <ContentCopy v-else :size="20" />
+ </template>
+ </NcActionButton>
+ </NcActions>
+
+ <NcActions v-if="isEditable"
+ data-cy="code-action-group"
+ :aria-label="t('text', 'Code block options')">
  <NcActionInput :label="t('text', 'Code block language')"
  :value="type"
  :show-trailing-button="false"
@@ -59,7 +75,7 @@
 <script>
 import debounce from 'debounce'
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
-import { NcActions, NcActionButton, NcActionInput, NcActionLink, NcActionSeparator } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionInput, NcActionLink, NcActionSeparator, NcLoadingIcon } from '@nextcloud/vue'
 import mermaid from 'mermaid'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -68,13 +84,19 @@ import CodeBraces from 'vue-material-design-icons/CodeBraces.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import MarkerIcon from 'vue-material-design-icons/Marker.vue'
 import Help from 'vue-material-design-icons/Help.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+
+import CopyToClipboardMixin from '../mixins/CopyToClipboardMixin.js'
 
 export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'CodeBlockView',
  components: {
  MarkerIcon,
+ ContentCopy,
  Help,
+ Check,
  Eye,
  ViewSplitVertical,
  CodeBraces,
@@ -83,9 +105,11 @@ export default {
  NcActionInput,
  NcActionLink,
  NcActionSeparator,
+ NcLoadingIcon,
  NodeViewWrapper,
  NodeViewContent,
  },
+ mixins: [CopyToClipboardMixin],
  props: {
  node: {
  type: Object,
@@ -104,6 +128,9 @@ export default {
  }
  },
  computed: {
+ hasCode() {
+ return this.node?.textContent
+ },
  type() {
  return this.node?.attrs?.language || ''
  },
@@ -169,6 +196,9 @@ export default {
  })
  },
  methods: {
+ async copyCode() {
+ await this.copyToClipboard(this.node?.textContent)
+ },
  updateLanguage(event) {
  this.updateAttributes({
  language: event.target.value,
@@ -180,6 +210,7 @@ export default {
  },
 }
 </script>
+
 <style lang="scss" scoped>
 .code-block {
  background-color: var(--color-background-dark);