From 354ae15270745c74d93d936abd2fa0a68bc923f7 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 11 Nov 2025 14:29:48 +0100
Subject: [PATCH 1/3] fix(useCopy): refactor, move to shared composable
 directory

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../NcFormBoxCopyButton/NcFormBoxCopyButton.vue       | 11 +++--------
 .../NcFormBoxCopyButton => composables}/useCopy.ts    |  8 +++++++-
 2 files changed, 10 insertions(+), 9 deletions(-)
 rename src/{components/NcFormBoxCopyButton => composables}/useCopy.ts (72%)

diff --git a/src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue b/src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue
index 52ff5a2dc5..557b1bd0c9 100644
--- a/src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue
+++ b/src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue
@@ -6,13 +6,10 @@
 <script setup lang="ts">
 import type { Slot } from 'vue'
 
-import { mdiCheck, mdiContentCopy } from '@mdi/js'
 import { whenever } from '@vueuse/core'
-import { computed } from 'vue'
 import NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
-import { t } from '../../l10n.ts'
-import { useCopy } from './useCopy.ts'
+import { useCopy } from '../../composables/useCopy.ts'
 
 const {
 	label = undefined,
@@ -37,9 +34,7 @@ defineSlots<{
 	default?: Slot
 }>()
 
-const { isCopied, copy } = useCopy(() => value)
-
-const icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy)
+const { isCopied, copy, icon, altText } = useCopy(() => value)
 
 whenever(isCopied, () => emit('copy'))
 </script>
@@ -51,7 +46,7 @@ whenever(isCopied, () => emit('copy'))
 		@click="copy">
 		<template v-if="$slots.default || label" #default>
 			<span class="hidden-visually">
-				{{ isCopied ? t('Copied') : t('Copy to clipboard') }}
+				{{ altText }}
 			</span>
 			<slot>
 				{{ label }}
diff --git a/src/components/NcFormBoxCopyButton/useCopy.ts b/src/composables/useCopy.ts
similarity index 72%
rename from src/components/NcFormBoxCopyButton/useCopy.ts
rename to src/composables/useCopy.ts
index 04db6c5f68..9727bcc238 100644
--- a/src/components/NcFormBoxCopyButton/useCopy.ts
+++ b/src/composables/useCopy.ts
@@ -5,7 +5,9 @@
 
 import type { MaybeRefOrGetter } from 'vue'
 
-import { ref, toValue } from 'vue'
+import { mdiCheck, mdiContentCopy } from '@mdi/js'
+import { computed, ref, toValue } from 'vue'
+import { t } from '../l10n.ts'
 
 const DELAY = 2000
 
@@ -16,6 +18,8 @@ const DELAY = 2000
  */
 export function useCopy(content: MaybeRefOrGetter<string>) {
 	const isCopied = ref(false)
+	const icon = computed(() => isCopied.value ? mdiCheck : mdiContentCopy)
+	const altText = computed(() => isCopied.value ? t('Copied') : t('Copy to clipboard'))
 
 	/**
 	 * Copy the content to clipboard
@@ -42,5 +46,7 @@ export function useCopy(content: MaybeRefOrGetter<string>) {
 	return {
 		isCopied,
 		copy,
+		icon,
+		altText,
 	}
 }

From 2e4058276e1f825f036abdec8842e79b5c51e77d Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 11 Nov 2025 15:42:46 +0100
Subject: [PATCH 2/3] fix(NcRichText): make code blocks scrollable

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcRichText.vue | 17 +++++++++++++++++
 src/components/NcRichText/highlight.scss |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 51bae5792f..906c7d82ef 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -559,6 +559,13 @@ export default {
 						&& props?.class?.includes('language')) {
 						importRehypeHighlightLibrary()
 					}
+
+					if (String(type) === 'pre' && children && String(children.type) === 'code') {
+						return h('p', { class: 'rich-text__code-block' }, [
+							h(type, props, children),
+						])
+					}
+
 					if (String(type) === 'li' && Array.isArray(children)
 						&& children.length !== 0
 						&& children[0].type === 'input'
@@ -784,4 +791,14 @@ a:not(.rich-text--component) {
 		@include highlight.highlight-light-colors;
 	}
 }
+
+.rich-text__code-block {
+	position: relative;
+	padding-inline-end: calc(var(--clickable-area-small) + var(--default-grid-baseline));
+
+	& pre {
+		width: 100%;
+		overflow-x: auto;
+	}
+}
 </style>
diff --git a/src/components/NcRichText/highlight.scss b/src/components/NcRichText/highlight.scss
index 4cde8c69a4..8027846be9 100644
--- a/src/components/NcRichText/highlight.scss
+++ b/src/components/NcRichText/highlight.scss
@@ -54,7 +54,7 @@
 }
 
 @mixin highlight-rules {
-	pre:has(.hljs) {
+	.rich-text__code-block:has(.hljs) {
 		color: var(--hljs-color);
 		background: var(--hljs-background-color);
 	}

From 9cf7ad799729d2b86d1f3572d7981ccb91ded81f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 11 Nov 2025 15:46:20 +0100
Subject: [PATCH 3/3] feat(NcRichText): add 'Copy to clipboard' button for code
 blocks

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/NcRichText/NcRichText.vue      | 18 +++++++++-
 .../NcRichText/NcRichTextCopyButton.vue       | 34 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NcRichText/NcRichTextCopyButton.vue

diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 906c7d82ef..1bac71d5c1 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -314,6 +314,7 @@ import { Fragment, h, ref, resolveComponent } from 'vue'
 import { RouterLink } from 'vue-router'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 import NcReferenceList from './NcReferenceList.vue'
+import NcRichTextCopyButton from './NcRichTextCopyButton.vue'
 import { createElementId } from '../../utils/createElementId.ts'
 import { getRoute, parseUrl, remarkAutolink } from './autolink.ts'
 import { remarkPlaceholder } from './remarkPlaceholder.ts'
@@ -561,8 +562,10 @@ export default {
 					}
 
 					if (String(type) === 'pre' && children && String(children.type) === 'code') {
+						const id = this.parentId + '-code-block-' + createElementId()
 						return h('p', { class: 'rich-text__code-block' }, [
-							h(type, props, children),
+							h(type, { ...props, id }, children),
+							h(NcRichTextCopyButton, { class: 'rich-text__code-block-button', contentId: id }),
 						])
 					}
 
@@ -800,5 +803,18 @@ a:not(.rich-text--component) {
 		width: 100%;
 		overflow-x: auto;
 	}
+
+	.rich-text__code-block-button {
+		position: absolute;
+		top: var(--default-grid-baseline);
+		inset-inline-end: var(--default-grid-baseline);
+		opacity: 0;
+	}
+
+	&:hover .rich-text__code-block-button,
+	&:focus-within .rich-text__code-block-button,
+	& .rich-text__code-block-button:focus {
+		opacity: 1;
+	}
 }
 </style>
diff --git a/src/components/NcRichText/NcRichTextCopyButton.vue b/src/components/NcRichText/NcRichTextCopyButton.vue
new file mode 100644
index 0000000000..bd0bb2c413
--- /dev/null
+++ b/src/components/NcRichText/NcRichTextCopyButton.vue
@@ -0,0 +1,34 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import NcButton from '../NcButton/NcButton.vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+import { useCopy } from '../../composables/useCopy.ts'
+
+const { contentId } = defineProps<{
+	/** Node representing code block content */
+	contentId: string
+}>()
+
+const { copy, icon, altText } = useCopy(() => document.getElementById(contentId)!.textContent)
+</script>
+
+<template>
+	<NcButton
+		variant="tertiary"
+		size="small"
+		:aria-label="altText"
+		:title="altText"
+		@click="copy">
+		<template #icon>
+			<NcIconSvgWrapper :path="icon" inline />
+		</template>
+	</NcButton>
+</template>
+
+<docs>
+An internal component
+</docs>