Syntax Highlighting for snippet, plugin, module and chunk editing using EditArea

<?php
/**
 * @name       EditArea Plugin
 * @purpose    Replaces standard textarea with EditArea (c) C.Dolivet
 * @status     Experimental 
 * @version    0.1.6 Beta - 21/11/06
 * @depend     MODx 0.9.5 Rev.2000+   
 *
 * @author     Gildas       <[email protected]>
 *             Pixelchutes  <http://www.pixelchutes.com>
 *               
 * @copyright  Copyright (c) 2006 Krismas.net
 * @license    GNU General Public License 2.0
 *
 * @see        http://www.cdolivet.net/editarea
 *
 * @history    [Gildas      - 0.1.1 - 26/10/06] Create from CodePress plugin based on an original idea of pixelchutes
 *             [Gildas      - 0.1.1 - 26/10/06] Change edit_area location from /manager/media to /assets/plugins
 *             [Gildas      - 0.1.1 - 26/10/06] Change default font size to a smaller one : 9pt
 *             [Gildas      - 0.1.1 - 26/10/06] Update Traces and correct invalid test ;-) 
 *             [Gildas      - 0.1.2 - 27/10/06] Change algorithm for New Documents and Links support
 *             [Gildas      - 0.1.2 - 27/10/06] Support for BottomButtonBar is native. Thanks to EditArea ;-)
 *             [Gildas      - 0.1.2 - 27/10/06] Add an handler for changeRTE()
 *             [Pixelchutes - 0.1.3 - 02/11/06] Update editAreaLoader.init
 *             [Gildas      - 0.1.3 - 08/11/06] Tested with EditArea 0.6.1 (2006-11-03) - OK
 *             [Gildas      - 0.1.3 - 08/11/06] Add installation steps
 *             [Gildas      - 0.1.3 - 08/11/06] Add support for EditArea Debug mode (cf. $debug)
 *             [Gildas      - 0.1.4 - 13/11/06] Add a little hack to support Prototype.js (Thanks to prototypify.js)
 *             [Gildas      - 0.1.4 - 13/11/06] Remove reference to document.mutate in onChangeEditArea()
 *             [Gildas      - 0.1.4 - 16/11/06] Make some tests after Prototype.js was replaced by Mootools (Rev 2017)
 *             [Gildas      - 0.1.5 - 20/11/06] Tested with EditArea 0.6.2 (2006-11-20) - OK
 *             [Gildas      - 0.1.5 - 20/11/06] EditArea is now compatible with "Prototype" (1.5) and "Mootools" (release 83)
 *             [Gildas      - 0.1.6 - 21/11/06] Add the ability to save position. Helpful for "Continue Editing"
 *
 * @Todo       X Suggest some improvements to C.Dolivet
 *             - Change Cookie management ie Serialization & Domain
 *             - Change save/restorePosition calling methods
 *             - Add some configuration parameters : Font size, Debug mode...
 *             - Create a "Resource Wizard" package
 *             - Add support to EditArea on the Frontend within QuickEdit
 *             - Save current position for "Continue editing"   
 *             - Add support to CodePress with the same plugin code !? 
 *              
 * @notes      - If scriptaculous/prototype.js is loaded EditArea stop working... Indeed Prototype was interfering with the associative 
 *               arrays of certain scripts. The solution is to load BEFORE prototype.js, prototypify.js. This has been done in MODx  
 *               Rev. 1934 for Snippets, Plugins and Modules but not for Documents, Templates and Chunks !? There is no problem to add
 *               prototypify.js for Templates, but for Chunks and Documents, a JS error appear when switching from RTE do EditArea !!!  
 *  
 * @install    - Download EditArea from http://prdownloads.sourceforge.net/editarea/edit_area_0_6_0_1.zip?download
 *             - After you've unzipped the archive, you should see the edit_area_0_6_0_1 folder with 3 sub-folders: docs, edit_area, exemples
 *             - Upload only the edit_area folder into the /assets/plugins/ folder.
 *             - Copy and paste de plugin code (without the begin/end PHP tags)
 *             - Select on or more events in this list :
 *
 *                  OnTempFormRender   (Template editor - html highlighting)
 *                  OnChunkFormRender  (Chunk    editor - html highlighting)
 *                  OnDocFormRender    (Document editor - html highlighting)
 *                  OnSnipFormRender   (Snippet  editor - php  highlighting)
 *                  OnPluginFormRender (Plugin   editor - php  highlighting)
 *                  OnModFormRender    (Module   editor - php  highlighting)
 */
global $content;

/*
 * $debug : In debug mode EditArea plugin don't use EditArea ;-)
 */
$debug = false;

/*
 * Collect current MODx Event & Initialize some data
 */
$evt   = &$modx->Event;
$code  = '';
$ta    = 'post';
$oname = $content['name'];
$lang  = strtolower(substr($modx->config['manager_language'], 0, 2));
$eadbg = ($debug ? 'true' : 'false');
$otype = substr($evt->name, 2, 1);

/*
 * This plugin is only valid in "text" mode. So check for the current Editor 
 */
$prte  = (isset($_POST['which_editor']) ? $_POST['which_editor'] : '');
$srte  = ($modx->config['use_editor'] ? $modx->config['which_editor'] : 'none');

/*
 * Check Event to define language
 */
switch ($evt->name) {
    case 'OnTempFormRender'  :
        $oname = $content['templatename'];
    case 'OnChunkFormRender' :
        $rte   = ($prte ? $prte : 'none');
        $code  = 'html';
        break;
    case 'OnDocFormRender'   :
        $ta    = 'ta';
        $oname = $content['pagetitle'];
        $rte   = ($prte ? $prte : ($content['id'] ? ($content['richtext'] ? $srte : 'none') : $srte));
        $code  = (('reference' == $content['type']) ? '' : 'html');
        break;
    case 'OnSnipFormRender'  :
    case 'OnPluginFormRender':
    case 'OnModFormRender'   :
        $rte   = ($prte ? $prte : 'none');
        $code  = 'php';
        break;
}

/*
 * Compute Object key
 */
$okey = $otype.'-'.$oname;

/*
 * Add some Trace for Debug purpose... 
 */
if ($lang) {
    /* 
     * Some Traces
     */
    $evt->output('<!--  EditArea Plugin Debug for : '.$evt->name.' in '.$oname.' ['.$okey.']['.$code.']['.$lang.'] RichText ['.$rte.'|'.$prte.'|'.$srte.'] ');
    $evt->output('Settings Use Editor ['.$modx->config['use_editor'].'] Which Editor ['.$modx->config['which_editor'].'] ');
    $evt->output('Doc. ID ['.$content['id'].'] Doc. Type ['.$content['type'].'] RichText ['.$content['richtext'].'] -->');
}

/*
 * Create JS code if needed
 */
if (('none' == $rte) && $code && !($debug && ('editarea' == strtolower($oname)))) {
    /*
     * Now create the JS code to add at the end of the current page
     */
    $output = <<< HEREDOC

    <!-- EditArea Plugin -->
    <script type="text/javascript">
        /*
         * Add EditArea specific action to the standard "Change RTE Process"
         */
        function EAonChangeRTE () {
            ta.value = editAreaLoader.getValue('myeditarea'); 
            changeRTE();
        }

        /*
         * Call when the onchange event of the textarea will be triggered
         */
        function EAonChange (id) {savePosition(id);}

        /*
         * Save/Restore position (Need Mootools API)
         */
        function savePosition (id) {
            var sr = editAreaLoader.getSelectionRange(id)
            Cookie.set('$okey', sr.start, 1);
        }
        function restorePosition (id) {
            var start = (Cookie.get('$okey') ? Cookie.get('$okey') : 0);
            editAreaLoader.setSelectionRange(id, start, start);
        }

        /* 
         * Locate the textarea named "post" or "ta"
         */
        var ta = document.getElementsByName('$ta')[0];
       
        /* 
         * If we have found a valid textarea then change it to an EditArea one...
         *
         * EditArea is able to save modified textarea content without
         * any modification on "Button1" ;-)
         */
        if (ta && ('textarea' == ta.type)) {
            /* 
             * Add an ID to the textarea
             * modify "on save" actions
             */
            ta.id = 'myeditarea'; 

            /* 
             * Modify the "OnChange" action on "which_editor" select
             */
            if (document.getElementById('which_editor')) {
                document.getElementById('which_editor').onchange = EAonChangeRTE;
            }
        }
        else {
            ta = null;
        }
    </script>
    <script language="javascript" type="text/javascript" src="../assets/plugins/edit_area/edit_area_full.js"></script>
    <script language="javascript" type="text/javascript">
        /*
         * Some params (IF CHANGED) will (currently) bomb in MODx! Trying to save after a bomb erases your content! :( This params are :
         *          
         * allow_toggle : Allows toggling between normal textarea and syntax highlighting (editarea). Toggling (more than once) bombs in MODx
         * allow_resize : Should allow you to resize your container, but container disappears and saving has nothing to reference, thus overwrites leaving it empty.
         * display      : When set to "later" delays automatic syntax highlighting, waiting for the user to toggle the editor. See "allow_toggle" below:
         */
        if (ta) {
            editAreaLoader.init({
                id: 'myeditarea'                // textarea id
                ,syntax: '$code'                // Code-syntax to be highlighted (NOTE: For the 'CHUNK' section, syntax: "html" may be more appropriate)
                ,start_highlight: true          // Display highlight-mode on start-up
                ,language: '$lang'              // Language support
                ,font_size: 9                   // Code font size
                ,debug:$eadbg                   // Debug mode
                ,allow_toggle: false            // Allow toggling on/off [For MODx, set to false!]
                ,allow_resize: 'no'             // Allow resizing [For MODx, set to NO!]
                ,change_callback: 'EAonChange'  // Call when the onchange event of the textarea will be triggered
            });
            window.setTimeout('restorePosition(ta.id)', 500);
        }
    </script>
    <!-- /EditArea Plugin -->
HEREDOC;
    
    /*
     * Output JS code
     */
    $evt->output($output);
}
?>

allow_toggle: true            // Allow toggling on/off ... can re-render the editor, too, if needed MODx, set to false!

            ta.style.height = '800px'; // Enter desired default height in pixels