From 00175ff1cb01a9e10001a04c5c019c33fdcb05ea Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 22 Feb 2022 00:14:48 +0800
Subject: [PATCH] fix copy/paste for readonly code interface (#11769)

---
 app/src/interfaces/input-code/input-code.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/src/interfaces/input-code/input-code.vue b/app/src/interfaces/input-code/input-code.vue
index 9c2286dd9d..426fec05dc 100644
--- a/app/src/interfaces/input-code/input-code.vue
+++ b/app/src/interfaces/input-code/input-code.vue
@@ -28,6 +28,7 @@ import 'codemirror/keymap/sublime.js';
 
 import formatTitle from '@directus/format-title';
 import importCodemirrorMode from './import-codemirror-mode';
+import { useWindowSize } from '@/composables/use-window-size';
 
 export default defineComponent({
 	props: {
@@ -72,6 +73,8 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
+		const { width } = useWindowSize();
+
 		const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
 		let codemirror: CodeMirror.Editor | null;
 
@@ -217,6 +220,16 @@ export default defineComponent({
 			return 0;
 		});
 
+		const readOnly = computed(() => {
+			if (width.value < 600) {
+				// mobile requires 'nocursor' to avoid bringing up the keyboard
+				return props.disabled ? 'nocursor' : false;
+			} else {
+				// desktop cannot use 'nocursor' as it prevents copy/paste
+				return props.disabled;
+			}
+		});
+
 		const defaultOptions: CodeMirror.EditorConfiguration = {
 			tabSize: 4,
 			autoRefresh: true,
@@ -229,6 +242,7 @@ export default defineComponent({
 			},
 			matchBrackets: true,
 			showCursorWhenSelecting: true,
+			lineWiseCopyCut: false,
 			theme: 'default',
 			extraKeys: { Ctrl: 'autocomplete' },
 			lint: true,
@@ -242,7 +256,8 @@ export default defineComponent({
 				{
 					lineNumbers: props.lineNumber,
 					lineWrapping: props.lineWrapping,
-					readOnly: props.disabled ? 'nocursor' : false,
+					readOnly: readOnly.value,
+					cursorBlinkRate: props.disabled ? -1 : 530,
 					mode: props.language,
 					placeholder: props.placeholder,
 				},
@@ -253,7 +268,8 @@ export default defineComponent({
 		watch(
 			() => props.disabled,
 			(disabled) => {
-				codemirror?.setOption('readOnly', disabled ? 'nocursor' : false);
+				codemirror?.setOption('readOnly', readOnly.value);
+				codemirror?.setOption('cursorBlinkRate', disabled ? -1 : 530);
 			},
 			{ immediate: true }
 		);