Copy/Cut/Paste not available in context-menu #3238

Closed
opened 2015-05-06 00:02:55 +02:00 by marijnh · 18 comments
marijnh commented 2015-05-06 00:02:55 +02:00 (Migrated from gitlab.com)

This is Chrome on OSX
image copy/cut/paste isn't available on any browser on any OS. Im using angular ui-codemirror but ive tried initializing it manually and have the same problem so I don't think its related.

The options I'm using are:

$scope.editorOptions = {
              tabSize: 4,
              mode: 'none',
              viewportMargin: Infinity,
              lineWrapping: true,
              extraKeys: {
                'Shift-2': function (cm) {
                  // custom stuff :)
                }
              }
            };
This is Chrome on OSX ![image](https://cloud.githubusercontent.com/assets/7054/7483790/8c487f08-f347-11e4-87c9-779048cdf338.png) copy/cut/paste isn't available on any browser on any OS. Im using angular ui-codemirror but ive tried initializing it manually and have the same problem so I don't think its related. The options I'm using are: ``` $scope.editorOptions = { tabSize: 4, mode: 'none', viewportMargin: Infinity, lineWrapping: true, extraKeys: { 'Shift-2': function (cm) { // custom stuff :) } } }; ```
marijnh commented 2015-05-06 14:43:00 +02:00 (Migrated from gitlab.com)

Does the problem occur on the demos on http://codemirror.net? I just tried (Chrome 42, Mountain Lion), and copy/paste from the context menu worked fine.

Does the problem occur on the demos on http://codemirror.net? I just tried (Chrome 42, Mountain Lion), and copy/paste from the context menu worked fine.
marijnh commented 2015-05-06 18:04:47 +02:00 (Migrated from gitlab.com)

Well, yes, the demos work, and after some digging I realized that the fix I did here github.com/yelvert/CodeMirror@714cf11e6c to fix image is what caused the context menu yo stop working correctly. So my real issue is the text box showing up when right clicking and never going away. If I need to create a new ticket I will.

Well, yes, the demos work, and after some digging I realized that the fix I did here https://github.com/yelvert/CodeMirror/commit/714cf11e6cc7d2aea96f51b6dbb0d9ccf178f689 to fix ![image](https://cloud.githubusercontent.com/assets/7054/7497332/5538bef4-f3df-11e4-9e77-fc771341f442.png) is what caused the context menu yo stop working correctly. So my real issue is the text box showing up when right clicking and never going away. If I need to create a new ticket I will.
marijnh (Migrated from gitlab.com) closed this issue 2015-05-06 19:53:14 +02:00
marijnh commented 2015-05-06 19:58:53 +02:00 (Migrated from gitlab.com)

mentioned in issue #3241

mentioned in issue #3241
marijnh commented 2015-11-20 14:33:22 +01:00 (Migrated from gitlab.com)

I'm experiencing the same issue. The demos on CodeMirror's website are fine (I have copy/cut/paste in the context menu), but in the editor we use in our application, no dice in any browser. Is there a workaround I could use to work around this issue? Thank you.

I'm experiencing the same issue. The demos on CodeMirror's website are fine (I have copy/cut/paste in the context menu), but in the editor we use in our application, no dice in any browser. Is there a workaround I could use to work around this issue? Thank you.
marijnh commented 2015-11-20 14:42:57 +01:00 (Migrated from gitlab.com)

Try to narrow it down -- something in your site is causing it, so remove pieces one by one until it goes away, then figure out what precise line did it. It is likely a CSS conflict, but might be something else.

Try to narrow it down -- something in your site is causing it, so remove pieces one by one until it goes away, then figure out what precise line did it. It is likely a CSS conflict, but might be something else.
marijnh commented 2016-01-26 16:21:05 +01:00 (Migrated from gitlab.com)

I can reproduce this in Chrome using the example given in #2154 (http://output.jsbin.com/ihunin/328/). Thus that is not only a FF bug.

The editor is in my case in a modal screen which has transform CSS options. When I move the editor out of the modal screen it does work.

Any clue? I guess using a CSS transform should not remove copy/paste functionallity.

I can reproduce this in Chrome using the example given in #2154 (http://output.jsbin.com/ihunin/328/). Thus that is not only a FF bug. The editor is in my case in a modal screen which has transform CSS options. When I move the editor out of the modal screen it _does_ work. Any clue? I guess using a CSS transform should not remove copy/paste functionallity.
marijnh commented 2016-01-27 21:32:01 +01:00 (Migrated from gitlab.com)

In the JSBin case, it seems to be caused by a mysterious no-op CSS transform they inject:

body { transform: translate3d(0,0,0); }

Why a zero-translate would have an effect on the position of the textarea I don't know.

In the JSBin case, it seems to be caused by a mysterious no-op CSS transform they inject: ``` body { transform: translate3d(0,0,0); } ``` Why a zero-translate would have an effect on the position of the textarea I don't know.
marijnh commented 2016-01-27 21:38:00 +01:00 (Migrated from gitlab.com)

Actually, some further testing suggests that a 3d transform prevents the trick where CodeMirror puts a textarea under the cursor from working because it makes it appear on the screen asynchronously, possibly due to some interaction with the graphics hardware being needed, which prevents the context menu click from taking effect on that textarea.

So yeah, 3d transforms on the body break CodeMirror's textarea hack.

Actually, some further testing suggests that a 3d transform prevents the trick where CodeMirror puts a textarea under the cursor from working because it makes it appear on the screen asynchronously, possibly due to some interaction with the graphics hardware being needed, which prevents the context menu click from taking effect on that textarea. So yeah, 3d transforms on the body break CodeMirror's textarea hack.
marijnh commented 2016-01-27 21:45:27 +01:00 (Migrated from gitlab.com)

Hold on, I misdiagnosed that. It's not about async/sync relayout, it's about a weird position computation for a position: fixed element in a body that has a transform. You can see the effect using this test HTML:

<!doctype html>

<body style="margin: 10px">
  <div style="position: fixed; left: 0px; top: 0px; border: 1px solid black">Fixed at 0,0px</div>
  <button onclick="document.body.style.transform = document.body.style.transform ? '' : 'translate(0,0)'">Toggle transform</button>
</body>

Chrome and Firefox share this behavior so I guess it is somehow standard? Seems somewhat awful regardless.

Hold on, I misdiagnosed that. It's not about async/sync relayout, it's about a weird position computation for a `position: fixed` element in a body that has a transform. You can see the effect using this test HTML: ``` html <!doctype html> <body style="margin: 10px"> <div style="position: fixed; left: 0px; top: 0px; border: 1px solid black">Fixed at 0,0px</div> <button onclick="document.body.style.transform = document.body.style.transform ? '' : 'translate(0,0)'">Toggle transform</button> </body> ``` Chrome and Firefox share this behavior so I guess it is somehow standard? Seems somewhat awful regardless.
marijnh commented 2016-01-27 21:59:00 +01:00 (Migrated from gitlab.com)

Okay, I'll stop spamming soon. It appears that you can't use position: fixed in its normal way inside of a transformed container. This means that JSBin appears to be breaking fixed positioning, and that you have to be pretty careful with transforms in general.

Okay, I'll stop spamming soon. It [appears](http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue) that you can't use `position: fixed` in its normal way inside of a transformed container. This means that JSBin appears to be breaking fixed positioning, and that you have to be pretty careful with transforms in general.
marijnh commented 2016-01-28 16:48:27 +01:00 (Migrated from gitlab.com)

Mm that sucks :/. Thanks for helping me out here!

The thing is: my use case is pretty normal (I guess) as I am rendering Codemirror inside of a Bootstrap modal. The modal-dialog class uses a transform of translate3d(0, 0, 0) (new versions use a 2d transform; but they fail as well).

Mm that sucks :/. Thanks for helping me out here! The thing is: my use case is pretty normal (I guess) as I am rendering Codemirror inside of a Bootstrap modal. The `modal-dialog` class uses a `transform` of `translate3d(0, 0, 0)` (new versions use a 2d transform; but they fail as well).
marijnh commented 2016-02-02 11:33:39 +01:00 (Migrated from gitlab.com)

I think attached patch helps here.

I think attached patch helps here.
marijnh commented 2016-02-02 12:11:15 +01:00 (Migrated from gitlab.com)

And.. it's gone! That totally fixes the problem. Thank you very much for helping out. Once new release lands I'll update.

PS. also thank you for your awesome book that I'll pass around to new faces at our company ;)

And.. it's gone! That totally fixes the problem. Thank you very much for helping out. Once new release lands I'll update. PS. also thank you for your awesome book that I'll pass around to new faces at our company ;)
marijnh commented 2016-02-16 17:02:11 +01:00 (Migrated from gitlab.com)

mentioned in issue #3827

mentioned in issue #3827
marijnh commented 2016-07-19 10:10:45 +02:00 (Migrated from gitlab.com)

mentioned in merge request !11267

mentioned in merge request !11267
marijnh commented 2017-04-04 12:41:28 +02:00 (Migrated from gitlab.com)

I have had to revert this fix - github.com/codemirror/CodeMirror@dfeafe0c14 - when loading CodeMirror inside an iframe.

Does anyone else experience this?

I have had to revert this fix - https://github.com/codemirror/CodeMirror/commit/dfeafe0c14478404288dc1f188a0b54baf0f40d5 - when loading CodeMirror inside an iframe. Does anyone else experience this?
ghost1 commented 2018-06-14 12:32:29 +02:00 (Migrated from gitlab.com)

mentioned in issue #71

mentioned in issue #71
marijnh commented 2020-01-16 15:18:32 +01:00 (Migrated from gitlab.com)

mentioned in issue #7

mentioned in issue #7
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/codemirror5#3238
No description provided.