Ace and Markdown Editor messing up chunk code view

Support Extras
1

Summary

I’ve installed Ace and Markdown Editor. When I edit any chunk the code view is limited to only 4 lines visible. It works fine for snippets and elements, it’s only the chunks code view which is way too small to work with (fullscreen still works as workaround). I’ve tweaked some settings for Ace already including the ace.height. Except for chunks, the setting works fine. Any ideas?

Steps to reproduce

Install both Ace and Markdown Editor. (Try) edit a chunk.

Observed behavior

The chunks code view is limited to 4 lines only.

Expected behavior

The chunks code view should be as set by default or the custom setting of ace.height.

Environment

MODX 2.7.1-pl
Ace 1.8.0-pl
Markdown Editor 1.1.0-pl

2

You may wish to contact @bezumkin2 about specific issues with Ace as he’s currently maintaining it. Though, I am not sure if you can use Markdown Editor with Ace in a Chunk.

Some additional questions:

  • What are your editor system settings?
  • What are your elements editor system settings?
  • What happens when you disable the Markdown Editor Plugin?
3

To clarify: I don’t want the Markdown Editor to show during chunk editing. It’s just that the general code area which I use with Ace is only showing 4 lines while Markdown Editor is installed.

Markdown Editor and RTE Settings

markdown_1
markdown_11294×1228 39.6 KB

markdown_2
markdown_21293×1074 34.8 KB

rte
rte1298×361 10.7 KB

Ace Settings

ace
ace1039×630 14.8 KB

Everything works as usual: the chunk code view is (as set) at 800px height. I think the issue might be that Markdown Editor also is build on Ace itself.

4

So I’ve done some further investigation and as expected something is overwriting my system setting ace.height inline to 60px. Again, this only happens while editing chunks so I’ve compared the two div containers of a snippet code window and a chunk code window:

// Snippet

<div 
   class="x-form-textarea x-form-field ace_editor ace-idle-fingers ace_dark" 
   style="width: 2122px; height: 748px; font-size: 14px; padding: 0px;" 
   id="ext-comp-1040">[...]</div>

// Chunk

<div 
   class="x-form-textarea x-form-field ace_editor ace-idle-fingers ace_dark" 
   style="width: 100%; height: 60px; font-size: 14px;" 
   id="ext-comp-1039">[...]</div>

As you can see the classes are exactly the same but still different styling is added. I guess this has something to do with them having a different id? Any suggestions on how to find out what’s causing this?