codemirror copies text even if blurred

v6
1

Hi @marijn,

Its difficult to explain so I recorded it. pgadmin-copy-cm-issue.mov - Google Drive
Basically, when I select something in codemirror, then go to some outside element and hit copy - then it still copies codemirror text. When I do the same thing but before going to outside element, I focus on a input element like textarea, then go to some outside element and hit copy - then it works fine.

Issue raised in pgAdmin - Ctrl+C to copy does not work in data grid · Issue #7920 · pgadmin-org/pgadmin4 · GitHub

Edited: The grid below handles keydown and on ctrl+c copies the code to clipboard. I tried to preventDefault/stopPropagation from grid but it didn’t work.

Appreciate your efforts.

2

I don’t know what the page your are on in that screencast is doing with focus and DOM selection, but if I try to reproduce this with a simple focusable non-input element (a paragraph with tabindex=0), I cannot copy the previously-selected text from CodeMirror after I focus that element.

3

Hi @marijn,

Thank you for looking into it. I will try to create a minimal reproducible stackblitz if there is any issue with CM.

4

Hi @marijn,

I create a stackblitz here - Vitejs - Vite (forked) - StackBlitz.
In this example, select the code in the CM window and then click on ‘click here’.
The winow.getSelection().isCollapsed remain false. And when Ctrl+C is pressed it copies from CM window.

Let me know if you need more details.

5

There is still a ton of React stuff going on in that reproduction. I’m not going to pick through that to figure out what’s happening. If you can reduce this to a simple raw DOM setup, I can take a look.

6

Sure let me try creating a very simple example with only CM.

7

Hi @marijn,

Here’s a codepen with only CM lib. No other libs - https://codepen.io/adityatoshniwal14/pen/VYZrZWj?editors=1111

8

This seems to be how browsers treat the selection when you click into a tabindex=0 element. If you use a simple <div contenteditable=true>abcd</div> element instead of the CodeMirror editor, the behavior you see is the same. The active selection remains in the editable element, even though the focus moved to the other element. I don’t think there’s a reason for CodeMirror to fight the native behavior in this case.

9

Oh I see. I had compared with textarea but didn’t check with content editable.
Thank you for looking into this.

10

Hi @marijn,

The selection part is understood and is behaving same as native.
But how can I avoid CM copy handler when it is not in focus?
Focus is clearly on some other div and I don’t want CM to call its own copy handler.

11

I mean, you could just remove your user-select: none style and sidestep this whole thing. Or try to write a copy handler for the editor that calls preventDefault when the editor doesn’t have focus.

12

So I added a domeventhandler for copy and added below. But the code is called only when CM is focussed :frowning: However, copying is called.

function handleCopy(e, view) {
  if(view.hasFocus) {
    e.preventDefault();
  }
}