Question about a 'feature'

[kolbykruger]

Hi @Indigo744,

Thanks for the great extra. For one of my current projects, I am using a TV with a bit of code that is unique to each page. Currently I have a plugin running for the old ACE extra to syntax highlight the TV (that is set to a textarea).

I was wondering if there's any short way to have ACE syntax highlight based on a TV; i.e. how you can set chunks language in their description, but a similar way with TVs. I can post the plugin code that I have working with the old ACE extra if you would like.

This might be something totally unnecessary, so there's no worries to pass.

Thanks again!

[Indigo744]

@c0mat0se Yes I would like to see the code!

[kolbykruger]

Sorry to get back to you late...

The plugin below has the following system events, and works for the old Ace.

• OnDocFormPrerender
• OnDocFormRender

Thanks for checking this out :)

<?php
//Apply ace editor to TV with id 5 and 7
//Found in assets/components/ace/modx.texteditor.js
$tvs = array(
    array(
        'id' => 15,
        'height' => '500px',
        'mimeType' => 'text/css'
    ),
    array(
        'id' => 16,
        'height' => '500px',
        'mimeType' => 'application/javascript'
    ),
    array(
        'id' => 14,
        'height' => '500px',
        'mimeType' => 'text/html'
    ),
    array(
        'id' => 20,
        'height' => '500px',
        'mimeType' => 'application/x-php'
    ),
    array(
        'id' => 17,
        'height' => '150px',
        'mimeType' => 'text/html'
    ),
    array(
        'id' => 38,
        'height' => '150px',
        'mimeType' => 'text/html'
    ),
    array(
        'id' => 39,
        'height' => '150px',
        'mimeType' => 'text/html'
    )
);

if ($modx->getOption('which_element_editor', null, 'Ace') !== 'Ace') {
    return;
}

$script = '';
foreach ($tvs as $tv) {
    $id = is_array($tv) ? $tv['id'] : $tv;
    $height = isset($tv['height']) ? $tv['height'] : '';
    $mimeType = isset($tv['mimeType']) ? $tv['mimeType'] : '';
    $tvId = '#tv' . $id;
    $setHeightScript = !empty($height) ? 'this.style.height="' . $height . '";' : '';
    $aceScript = 'MODx.ux.Ace.replaceTextAreas([this], "' . $mimeType . '");';
    $script .= 'Ext.each(Ext.query("' . $tvId . '"), function() { ' . $setHeightScript . $aceScript . '});' . PHP_EOL;
}

if ($script) {
    $modx->controller->addHtml('<script>Ext.onReady(function() {' . $script . '});</script>');
}

[mindeffects]

Yes, please! This is also my MOST WANTED feature! I use the above code, too.

More on the code and the comments are to be found here: https://github.com/danyaPostfactum/modx-ace/pull/9#issuecomment-420868801

[Indigo744]

Alright, I'll try to find time to look into it! I should have some time next week.

Don't hesitate to remind me if you see I haven't reply in a while :wink:

[Indigo744]

@c0mat0se @mindeffects Could you try the latest beta? https://github.com/Indigo744/Modx-Revo-Simple-Ace-Code-Editor/releases/tag/1.5.0-beta1

You'll need to set a proper Mime type in the TV description. Example:

Note: Using : part is not mandatory. The plugin only looks for mime type.

A list of Mime type is available here.

[kolbykruger]

It works for me, as long as I set a Mime type.

The only thing that is kind of quirky is the height of the code area. I think it was the old ace that had a system setting for a 'default height' that somehow carried over to the TVs. Not 100% necessary in this case, however it definitely made editing in the textarea's a little easier.

This is great though, now I can completely remove old Ace altogether!

Cheers for jumping on this!

[Indigo744]

I may try to add a setting or something. How would you expect to be able to set the textarea height?

[kolbykruger]

It looks like the old Ace just had a system setting called 'Edit area height' with a description of 'Editor height in pixel unit. If left blank, a default height will be used."

It's a nice option to have, especially when editing a file and you have a bunch of extra page space to take up.

[Indigo744]

I see. Imay try to offer the possibility to set the height for each different TV fields. A parameter with something like tvname=250px ; tvanothername=500px

[kolbykruger]

That sounds even better to me!

[Indigo744]

@c0mat0se Could you try the 1.5.0-beta2? I've added 2 properties EditorHeight and EditorTVHeight to give you the ability to set the height.

I didn't want to make this too complex so I settle on simpler solution than the one I evoked. Hope it's enough.

[kolbykruger]

This is perfect! Works nicely, and it's simple. Thank you for putting the time into this. Definitely uninstalling old Ace now!

[Indigo744]

Thanks 😺

@mindeffects do you want to chime in and try out before I publish 1.5.0?

[mindeffects]

Would love to! Right now I am organizing the MODX Bughunt in Cologne, but this here could be one part of the stuff I do there. So, yes, I will test it this weekend (seeing it as a "feature", not a "bug"! ;-) )

[Indigo744]

Great. I'll hold off the release and wait for your feedback. Thanks 😉

[Indigo744]

@mindeffects when testing, check for the latest beta. Right now, 1.5.0-beta3 is available (see #11)

[mindeffects]

It's working fine. Nice!

[mindeffects]

When using "rem" as height unit it translates very well to "lines", e.g. "12rem" will be 12 lines high.

[mindeffects]

I was wondering: Why are you using "properties" instead of "system settings" for configuration? Just curious. ;-)

[Indigo744]

Thanks! Glad you like it 😸

Regarding properties, it's just a personal choice... I didn't find any recommendation on "modx right way ©" of offering properties. It was already a chore to understand how to package a plugin for public release... I mean, it's so complicated I had to use 3 different tutorials to understand what I was doing...

However, I think you actually can use system settings. The code looks first for plugin properties, then system settings. But I think it means deleting all plugin's properties... Which could be an issue when updating (i.e. deleting again the plugin's properties).

When using System Settings, the name become SimpleAceCodeEditor.AcePath and so on...

I didn't even plan for it, mind. It's just how the example I used was designed...

[mindeffects]

Everything is fine! :-)

[Indigo744]

Alright 😸 1.5.0 is released!