Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

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

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

yelvert opened this issue May 5, 2015 · 13 comments

Comments

@yelvert
Copy link

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
Copy link
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
Copy link
Author

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.

@yelvert yelvert closed this as completed May 6, 2015
@yelvert yelvert mentioned this issue May 6, 2015
Closed
@Veejay
Copy link

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
Copy link
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
Copy link

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
Copy link
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
Copy link
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
Copy link
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
Copy link
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
Copy link

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
@marijnh
Don't use position: fixed in context-menu hack
dfeafe0 
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
Copy link
Member

marijnh commented Feb 2, 2016

I think attached patch helps here.

@roelvanduijnhoven
Copy link

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 marijnh mentioned this issue Feb 16, 2016
Closed
@marijnh marijnh mentioned this issue Jul 19, 2016
Closed
@fviale fviale mentioned this issue Mar 10, 2017
Closed
@ryandemmer
Copy link

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

Does anyone else experience this?

@nijel nijel mentioned this issue Nov 29, 2017
Open
@gearskullguy gearskullguy mentioned this issue Jun 1, 2018
Closed
@gwarser gwarser mentioned this issue Jun 14, 2018
Closed
@THEtomaso THEtomaso mentioned this issue Jan 16, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@yelvert @Veejay @roelvanduijnhoven @marijnh @ryandemmer