CSS conflict with reveal.js

[viebel]

I'm trying to have codemirror on my slides with reveal.js and there seems to be a css conflict.

Look at this page that reproduces the issue: http://viebel.github.io/klipse/misc/reveal-codemirror.html.

There are a couple of issues:

1. The code is centered instead of aligned left
2. When trying to navigate the code with the keyboard arrows, it feels very weird
3. The cursor is not visible when editing the code

[ntantri]

You would have to override the css for CodeMirror, because reveal css will change/modify the properties of div's and so on.

What you would have to alter is as follows:

.reveal .CodeMirror-lines {
    text-align: left !important;
    ......
    ......
}

Alter the CSS for getting the result, because, your CodeMirror is inside a reveal div and that will obviously add it's own css, like:

.reveal .slides {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: visible;
    z-index: 1;
    text-align: center;  /* Culprit -- changing the alignment */
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 40%;
    perspective-origin: 50% 40%;
}

[viebel]

Thanks.

But my problem is with the less trivial css than text-align.
As I mentioned above:

1. When trying to navigate the code with the keyboard arrows, it feels very weird
2. The cursor is not visible when editing the code

What css should I override to fix that?

[marijnh]

You could try wrapping your editor instances inside web components. That should remove the problems caused by agressive, unscoped CSS in reveal.js.

But in general, I'm not taking responsibility for issues like this, produced by outside CSS. You'll just have to find the relevant properties and reset them in your own CSS.

[viebel]

Per @marijnh suggestion, I've tried to put my editor instance inside a web component but still some CSS is bleeding into the editor:

• CodeMirror with reveal: you cannot move with arrows until the end of the line and you cannot insert a space.
• CodeMirror without reveal: it works fine.

I know that it is probably an issue with reveal so I am reporting also in reveal repo.

Maybe you guys at CodeMirror can think of a workaround?

[RopoMen]

Moving with arrows or using space is related in to Reveal.js keyboard bindings.
https://github.com/hakimel/reveal.js/#keyboard-bindings

https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4201

You need to be able to stop event propagation from CodeMirror editor in to Reveal.js handler.

[viebel]

@RopoMen Here is a version with a code mirror editor on slide 1 and a textarea on slide 2.
As you can see, inside the textarea, arrows and space work fine.

[RopoMen]

It's because

https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L4144

// Check if there's a focused element that could be using
// the keyboard
var activeElementIsCE = document.activeElement && document.activeElement.contentEditable !== 'inherit';
var activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
var activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);

If you inspect DOM in first slide you can see that CodeMirror editor is not directly using input/textarea when content is edited. (if I'm correct)

[RopoMen]

I think that reveal.js should have attribute 'reveal-keyboard-off' and code should also check whether the element has that attribute. If it has, keyboard event handler should not do anything on those events.

[viebel]

Thanks a lot @RopoMen
It looks much better now.

But I'm still having weird issues. For instance, if you put the cursor at the beginning of (map inc [1 2 3]) and press the right arrow 8 times, the cursor will be at the beginning of the c - see screnshot below. And if you press space, a backspace will be added after the c.

In general, if you play a bit with arrows and spaces, you will feel that something is really not working well.

Do you know why it happens and how coud I solve it?

[RopoMen]

I checked and couldn't see any extra characters in DOM after 'c'. That kind of bug sounds like more CodeMirror issue. (Using Chrome)

ps. How did you handled those keyboard bindings? Quickly looked in to your example and couldn't find "obvious" solution :)

[viebel]

I have handled the keyboard binding issue by adding contenteditable="true". See viebel/klipse@67b9abc

[viebel]

@marijnh maybe you can help with this part of the problem that I mentioned above: #4189 (comment)

[RopoMen]

I did see that on Reveal rules but I thought that it would not work because contenteditable would make the element editable, like <div> or <p> but it actually does not work like that with custom elements :) nice.

I have looked in to web components / custom html elements because to major benefit is the style isolation.

[viebel]

@RopoMen so why doesn't it work properly yet ?

[RopoMen]

@viebel
this works fine.

<klipse-snippet id="code" contenteditable="true"></klipse-snippet>

What I meant was that if you add contenteditable for example:

<p contenteditable="true">Edit me</p>

Browser is making <p> tag editable and browser is not making <klipse-snippet> editable in a same way. What I thought initially was that if you add contenteditable for the custom element, browser would make it editable in a same way as it was <p> -tag.

[viebel]

I mean why do we still have this issue #4189 (comment)

I'm so frustrated: we are so close but still not there!

[timothypratley]

@viebel I think I found something!
I get the problem you describe when I have the chrome inspector open.
But when I close the inspector/console... it works perfectly.
I think that CodeMirror calculates cursor/selection related things in a way that is affected by the changed size of the HTML area when the inspector is open????

[timothypratley]

Actually, it's a little more complicated than what I described above.
The cursor behavior is affected by the dimensions of the page.
Having the inspector open or closed affects the dimensions of the page... but any kind of resizing does as well. If the page is too narrow, the selection area is smaller than the real text. If the page is too wide, you cannot click on the text. I'll dig a bit deeper.

[timothypratley]

@viebel O.K. I got it to work...
I set these in the .adoc file
:revealjs_minScale: 1.0
:revealjs_maxScale: 1.0
This prevents the scaling when the screen is narrow or wide. The scaling does not play well with codemirror.