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

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

Projects

None yet

4 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
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
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 May 6, 2015
@Veejay
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
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

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

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 marijnh added a commit that referenced this issue Feb 2, 2016
@marijnh marijnh 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
dfeafe0
@marijnh
Member
marijnh commented Feb 2, 2016

I think attached patch helps here.

@roelvanduijnhoven

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

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