New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yelvert opened this Issue May 5, 2015 · 13 comments

Comments

Projects
None yet
5 participants
@yelvert

yelvert commented May 5, 2015

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 :)
                }
              }
            };
@marijnh

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh May 6, 2015

Member

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.

Member

marijnh commented May 6, 2015

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.

@yelvert

This comment has been minimized.

Show comment
Hide comment
@yelvert

yelvert May 6, 2015

Well, yes, the demos work, and after some digging I realized that the fix I did here yelvert@714cf11 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.

yelvert commented May 6, 2015

Well, yes, the demos work, and after some digging I realized that the fix I did here yelvert@714cf11 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.

@Veejay

This comment has been minimized.

Show comment
Hide comment
@Veejay

Veejay Nov 20, 2015

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.

Veejay commented Nov 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Nov 20, 2015

Member

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.

Member

marijnh commented Nov 20, 2015

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.

@roelvanduijnhoven

This comment has been minimized.

Show comment
Hide comment
@roelvanduijnhoven

roelvanduijnhoven Jan 26, 2016

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

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Jan 27, 2016

Member

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.

Member

marijnh commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Jan 27, 2016

Member

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.

Member

marijnh commented Jan 27, 2016

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

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Jan 27, 2016

Member

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.

Member

marijnh commented Jan 27, 2016

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.

@marijnh

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Jan 27, 2016

Member

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.

Member

marijnh commented Jan 27, 2016

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.

@roelvanduijnhoven

This comment has been minimized.

Show comment
Hide comment
@roelvanduijnhoven

roelvanduijnhoven Jan 28, 2016

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 added a commit that referenced this issue Feb 2, 2016

Don't use position: fixed in context-menu hack
It doesn't work inside of a transformed container, even for zero
transforms (which some components seem to love putting on root
elements, for whichever reason)

Closes #3238
@marijnh

This comment has been minimized.

Show comment
Hide comment
@marijnh

marijnh Feb 2, 2016

Member

I think attached patch helps here.

Member

marijnh commented Feb 2, 2016

I think attached patch helps here.

@roelvanduijnhoven

This comment has been minimized.

Show comment
Hide comment
@roelvanduijnhoven

roelvanduijnhoven Feb 2, 2016

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 ;)

@ryandemmer

This comment has been minimized.

Show comment
Hide comment
@ryandemmer

ryandemmer Apr 4, 2017

I have had to revert this fix - dfeafe0 - when loading CodeMirror inside an iframe.

Does anyone else experience this?

I have had to revert this fix - dfeafe0 - when loading CodeMirror inside an iframe.

Does anyone else experience this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment