From dd382e02dd03202430670d4208b0c343a4ba618f Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Mon, 19 Feb 2024 14:22:38 -0500
Subject: [PATCH 1/6] changed from link-specific message to general copy-paste
 message

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 src/mixins/CopyToClipboardMixin.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/mixins/CopyToClipboardMixin.js b/src/mixins/CopyToClipboardMixin.js
index d350e06352c..0ebd3177c32 100644
--- 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

From ca0d4b0bdd0a612a3114f8ee00f751234e3267bf Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Mon, 19 Feb 2024 14:24:09 -0500
Subject: [PATCH 2/6] added code block copy button

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 src/nodes/CodeBlockView.vue | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index 6780cf31aa2..0c03c8d4043 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/src/nodes/CodeBlockView.vue
@@ -1,8 +1,21 @@
 <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"
+						: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" :aria-label="t('text', 'Code block options')">
 					<NcActionInput :label="t('text', 'Code block language')"
 						:value="type"
 						:show-trailing-button="false"
@@ -59,7 +72,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 +81,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 +102,11 @@ export default {
 		NcActionInput,
 		NcActionLink,
 		NcActionSeparator,
+		NcLoadingIcon,
 		NodeViewWrapper,
 		NodeViewContent,
 	},
+	mixins: [CopyToClipboardMixin],
 	props: {
 		node: {
 			type: Object,
@@ -104,6 +125,9 @@ export default {
 		}
 	},
 	computed: {
+		hasCode() {
+			return this.node.textContent
+		},
 		type() {
 			return this.node?.attrs?.language || ''
 		},
@@ -169,6 +193,9 @@ export default {
 		})
 	},
 	methods: {
+		async copyCode() {
+			await this.copyToClipboard(this.node?.textContent)
+		},
 		updateLanguage(event) {
 			this.updateAttributes({
 				language: event.target.value,
@@ -180,6 +207,7 @@ export default {
 	},
 }
 </script>
+
 <style lang="scss" scoped>
 .code-block {
 	background-color: var(--color-background-dark);

From 81960db791b2979ad70f27edd190eaa3beea1c9e Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Tue, 20 Feb 2024 12:18:51 -0500
Subject: [PATCH 3/6] fixed cypress test and added test for copy code button

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 cypress/e2e/nodes/CodeBlock.spec.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/nodes/CodeBlock.spec.js b/cypress/e2e/nodes/CodeBlock.spec.js
index fb49f3b4750..fec5a4e0cd4 100644
--- 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('.view-switch > button').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('.view-switch div div button').click()
 			// FIXME: Label behaviour changed, should be back once https://github.com/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('.view-switch div div button').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')

From 0a70ed5cf5d7d1d88ca4123505d6fe6273f580b0 Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Tue, 20 Feb 2024 12:22:10 -0500
Subject: [PATCH 4/6] added optional chaining to hasCode property for
 consistency

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 cypress/e2e/nodes/CodeBlock.spec.js | 16 ++++++++--------
 src/nodes/CodeBlockView.vue         |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/nodes/CodeBlock.spec.js b/cypress/e2e/nodes/CodeBlock.spec.js
index fec5a4e0cd4..c35b9c8dd8a 100644
--- a/cypress/e2e/nodes/CodeBlock.spec.js
+++ b/cypress/e2e/nodes/CodeBlock.spec.js
@@ -46,14 +46,14 @@ describe('Front matter support', function() {
 
 			// 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)
-					})
-				})
-			)
+				.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 div div button').click()
diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index 0c03c8d4043..cdb9d06ccf1 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/src/nodes/CodeBlockView.vue
@@ -126,7 +126,7 @@ export default {
 	},
 	computed: {
 		hasCode() {
-			return this.node.textContent
+			return this.node?.textContent
 		},
 		type() {
 			return this.node?.attrs?.language || ''

From 8b3360d848138063b18c53fdc32e85cb2c8ce566 Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Tue, 20 Feb 2024 19:40:59 -0500
Subject: [PATCH 5/6] improved cypress element selectors according to best
 practices

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 cypress/e2e/nodes/CodeBlock.spec.js | 6 +++---
 src/nodes/CodeBlockView.vue         | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/nodes/CodeBlock.spec.js b/cypress/e2e/nodes/CodeBlock.spec.js
index c35b9c8dd8a..1a825932850 100644
--- a/cypress/e2e/nodes/CodeBlock.spec.js
+++ b/cypress/e2e/nodes/CodeBlock.spec.js
@@ -42,7 +42,7 @@ 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('.view-switch > button').click()
+			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')
@@ -56,7 +56,7 @@ describe('Front matter support', function() {
 				)
 
 			// Remove language
-			cy.getContent().find('.code-block').eq(1).find('.view-switch div div 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://github.com/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()
@@ -66,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 div div 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')
diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index cdb9d06ccf1..afe689b03fe 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/src/nodes/CodeBlockView.vue
@@ -4,6 +4,7 @@
 			<div class="view-switch">
 				<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">
@@ -15,8 +16,11 @@
 					</NcActionButton>
 				</NcActions>
 
-				<NcActions v-if="isEditable" :aria-label="t('text', 'Code block options')">
-					<NcActionInput :label="t('text', 'Code block language')"
+				<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"
 						:placeholder="t('text', 'e.g. php, javascript, json…')"

From bb24bcabd555897f84882a05bfa4301a0e9119f9 Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Tue, 20 Feb 2024 19:50:44 -0500
Subject: [PATCH 6/6] fix linting errors

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 src/nodes/CodeBlockView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index afe689b03fe..234b9fa2b3f 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/src/nodes/CodeBlockView.vue
@@ -19,8 +19,7 @@
 				<NcActions v-if="isEditable"
 					data-cy="code-action-group"
 					:aria-label="t('text', 'Code block options')">
-					<NcActionInput
-						:label="t('text', 'Code block language')"
+					<NcActionInput :label="t('text', 'Code block language')"
 						:value="type"
 						:show-trailing-button="false"
 						:placeholder="t('text', 'e.g. php, javascript, json…')"