Using codemirror #21

pabloko · 2015-07-02T01:33:55Z

I needed to add some syntax highligter to the file editor, so added codemirror to the project, just clone the codemirror git on unauthenticated/codemirror and do these changes:

file_editor.cgi

use HTML::Entities;
#...
print $head;
print "<link rel=\"stylesheet\" href=\"unauthenticated/codemirror/lib/codemirror.css\" />";
print "<script src=\"unauthenticated/codemirror/lib/codemirror.js\"></script>";
print "<script src=\"unauthenticated/codemirror/addon/mode/loadmode.js\"></script>";
print "<script src=\"unauthenticated/codemirror/mode/meta.js\"></script>";
print "<script src=\"unauthenticated/codemirror/mode/javascript/javascript.js\"></script>";
print "<script src=\"unauthenticated/codemirror/mode/scheme/scheme.js\"></script>";
print "<style type=\"text/css\">.CodeMirror {height: auto;}</style>";
#...
#print &ui_textarea("data", $data, 35, 50, "off", undef, "class='container'");
print "<div style='border:1px solid #ccc;radius:5px;'><textarea style='display: inline; width: 100%;' class='form-control' name='data' id='code'>";
print encode_entities($data);
print "</textarea></div>";
print &ui_hidden("path", $path);
print &ui_form_end([ [ save, $text{'save'} ] ]);

print "<script type=\"text/javascript\" src=\"unauthenticated/js/cmauto.js\"></script>";
print "<script type=\"text/javascript\">\$(document).ready( function() { change('".$in{'file'}."'); });</script>";

&ui_print_footer("index.cgi?path=$path", $text{'previous_page'});

unauthenticated/js/cmauto.js

CodeMirror.modeURL = "unauthenticated/codemirror/mode/%N/%N.js";
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: "scheme",
    lineNumbers: true,
    viewportMargin: Infinity
  });
  var pending;

  function looksLikeScheme(code) {
    return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
  }
  function update() {
    editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
    console.log(looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
  }

function change(val) {
  if (m = /.+\.([^.]+)$/.exec(val)) 
  {
    var info = CodeMirror.findModeByExtension(m[1]);
    if (info) {
      mode = info.mode;
      spec = info.mime;
      editor.setOption("mode", spec);
      CodeMirror.autoLoadMode(editor, mode);
      console.log(mode);
    } else {
      update();
    }
  } else {
    update();
  }
}

It will try to detect the markup to use by file name or guessing it if fails. needed to use HTML:Entities to fix some bugs when displaying some codes. Also have auto growing.

The question is, why the hell is not this module by default on webmin??

Real-Gecko · 2015-07-07T07:19:20Z

Authentic theme already includes CodeMirror for textarea fields, however file type is not detected to provide correct syntax highlighting. I'll work on file type recognition.

iliajie · 2015-07-07T07:53:58Z

Is there a such functionality? I could include it!

Real-Gecko · 2015-07-07T08:08:07Z

I dunno, I never used CodeMirror, I'll RTFM to figure it out :)

Real-Gecko · 2015-07-07T08:51:15Z

Well CodeMirror manual says that there're some methods to "tell" which syntax is used:

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});

or

require([
  "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
], function(CodeMirror) {
  CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "htmlmixed"
  });
});

Any way you'll have to inlcude additional files for this. All supported modes are listed here: https://github.com/codemirror/CodeMirror/tree/master/mode
What if we will set required mode through GET variable like this ?cm_mode=javascript, ?cm_mode=htmlmixed, this will require additional work on Authentic side.

iliajie · 2015-07-07T09:03:57Z

Additional work? I could add all of those filetype-highlights to the distro? They are very small in size.

Real-Gecko · 2015-07-07T09:19:43Z

Yeah, maybe add some code on CodeMirror init like pabloko suggested

CodeMirror.modeURL = "unauthenticated/codemirror/mode/%N/%N.js";

and then in Authentic's default.min.js

var e=CodeMirror.fromTextArea(g,{mode:$.urlParam('cm_mode'),...

where urlParam is like

$.urlParam = function(name){
    var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
    return results[1] || 0;
}

And I will add cm_mode param to edit file links like this

edit_file.cgi?file=myscript.js&path=/home/realgecko/public_html/js&cm_mode=javascript

iliajie · 2015-07-07T10:00:43Z

OK, will add it to my todo. Thanks!

pabloko · 2015-07-07T11:20:24Z

my code tries to determine syntax by file extension, if there arent results, it tries to guess the syntax...

noticed sorting by file size isnt working properly there are modules for datatable

jQuery.fn.dataTable.ext.type.order['file-size-pre'] = function ( data ) {
    var units = data.replace(/(<([^>]+)>)/ig,"").replace(" ", "").replace( /[\d\.]/g, '' ).toLowerCase();
    var multiplier = 1;

    if ( units === 'kb' ) {
        multiplier = 1000;
    } else if ( units === 'k' ) {
        multiplier = 1000;
    } else if ( units === 'mb' ) {
        multiplier = 1000000;
    } else if ( units === 'm' ) {
        multiplier = 1000000;
    } else if ( units === 'gb' ) {
        multiplier = 1000000000;
    } else if ( units === 'g' ) {
        multiplier = 1000000000;
    } else if ( units === 'tb' ) {
        multiplier = 1000000000000;
    } else if ( units === 't' ) {
        multiplier = 1000000000000;
    } 
    console.log("data = "+data.replace(/(<([^>]+)>)/ig,"")+" mult: "+parseFloat( data.replace(/(<([^>]+)>)/ig,"") ) * multiplier+" unit: "+units);
    return parseFloat( data.replace(/(<([^>]+)>)/ig,"") ) * multiplier;
};

regards

iliajie · 2015-07-07T11:22:43Z

@pabloko I made file size work in Authentic Theme. You can check it. I made it work with the following units (TB|GB|MB|KB|Byte|Bytes|ТБ|ГБ|МБ|КБ|Байт)|(Unlimited|Ubegrenset|Nielimitowane|Ilimitado|无限制|Не ограничено|No Limit|Same as admin)

pabloko · 2015-07-07T11:26:45Z

@qooob fancy stuff, will try it for sure :)

Real-Gecko · 2015-07-07T11:28:43Z

Shall we try to add content of unauthenticated/js/cmauto.js described above in Authentic?
This will provide autorecognition of file type?

iliajie · 2015-07-07T11:30:21Z

@pabloko


$.fn.dataTable.ext.type.detect.unshift(
    function (sData) {
        if (/((\d+(\s+)|\d+\.\d+(\s+)))(TB|GB|MB|KB|Byte|Bytes|ТБ|ГБ|МБ|КБ|Байт)|(Unlimited|Ubegrenset|Nielimitowane|Ilimitado|无限制|Не ограничено|No Limit|Same as admin)/i.test(sData)) {
            return 'file-size';
        }
        return null;
    }
);

$.fn.extend(jQuery.fn.dataTableExt.oSort, {
    "file-size-pre": function (a) {
        z = a.match(/<[^>]*>([\s\S]*?)<.*>/);
        z && z[1] ? (y = z[1]) : (y = a);
        x = y.match(/(\+|-)?((\d+(\.\d+)?)|(\.\d+))/);
        x && (x = x[0]);
        return (a.match(/TB/i) || a.match(/ТБ/i)) ? (x * 1024 * 1024 * 1024 * 1024) : (a.match(/GB/i) || a.match(/ГБ/i)) ? (x * 1024 * 1024 * 1024) : (a.match(/MB/i) || a.match(/МБ/i)) ? (x * 1024 * 1024) : (a.match(/kB/i) || a.match(/КБ/i)) ? (x * 1024) : 1;
    },
    "file-size-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "file-size-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

@Real-Gecko Yes, just let's call it codemirror.modes.js

Real-Gecko · 2015-07-07T11:32:17Z

@qooob can you add this to theme?

iliajie · 2015-07-07T11:34:18Z

Yes, if it works and doesn't break anything - I will! Just maybe worth adding all modes there in one file. The size is very small? Or better to load on demand?

Real-Gecko · 2015-07-07T11:41:03Z

The whole mode folder is 1.4MB in size. It will be very heavy on user side. I think @pabloko 's solution detects and inludes reuqired files automatically. @pabloko can you confirm? Unfortunately I cannot test thing right now myself :(

iliajie · 2015-07-07T11:42:56Z

I can't test this right now as well. Probably by the end of September I will get back to heavy development. So far only bug fixes. Just beautify current default.min.js and make changes. Then send one and I will take a look.

Real-Gecko · 2015-07-07T11:52:40Z

Ok, I'll try as soon as I have some time.

pabloko · 2015-07-07T11:55:39Z

Well ive using it since installed without any problems or issues, but tbh dont mind me im a noob here, just discovered webmin and needed to do some specific things.

@qooob thanks for the snip

Real-Gecko · 2015-07-07T11:59:20Z

Well Webmin is great, but it's interface API is a little outdated. That's why we are here trying to solve all those issues, to make Webmin even better :)

iliajie · 2015-07-18T14:44:27Z

@Real-Gecko and @pabloko and @Zen4All Guys, if I add to /unauthenticated/codemirror/mode/*.js highlight-modes for files and then you could use it anyway you want. You are using js on Filemin anyway. Starting from version 14, I will just not initialize CodeMirror for filemin so you could do it the best way yourself.

How does it sound?

Real-Gecko · 2015-07-19T05:19:40Z

Yep, that will be nice :)

iliajie · 2015-07-19T05:53:16Z

Will release updated version 14 with new features soon and mention your beautiful project on changelog, so people would know. I'll be on ICQ today.

iliajie · 2015-07-23T22:25:06Z

OK, guys. Please update Filemin, as people already asking where the CodeHighligh went away. Authentic Theme Version 14 has no code highlight for Filemin. Modes you need you will find in js/codemirror/modes folder.

swelljoe · 2015-07-27T23:15:42Z

This is super cool! You guys are awesome.

Real-Gecko · 2015-07-28T08:04:48Z

I've tried to use Codemirror's modes shipped with Authentic 14, but I could not make things work, maybe tis because each mode file has require('../../lib/codemirror').
I've implemented @pabloko's solution and it works fine, it reuqires shipping another copy of codemirror with the module itself, but works on old themes too.
I think we have to discuss creation of new module with Jamie Cameron, that will bundle all those cool JS libraries together in one place.

iliajie · 2015-07-28T21:30:32Z

Actually, nothing stop you from shipping it. And I thinks it will be the right way. What do you think? If you agree I would actually like to remove it from the theme distro?

Real-Gecko · 2015-07-29T04:15:44Z

Yeah, I will ship it with the module, it's better not to overload your theme :)

iliajie · 2015-07-29T07:50:37Z

Alright, superb! ;)

iliajie · 2015-07-30T15:27:28Z

Well, I must apologize! Authentic Theme will fully support FIlemin and you don't have to worry about it!!

I just realized how COOL it is to use Custom Commands->Editor File and make it automatically detect/highlight user files.

iliajie · 2015-07-30T15:27:41Z

Version 14.01 - will have it all!!

Real-Gecko · 2015-07-30T15:30:44Z

Nice, then I'll rollback my changes :)

iliajie · 2015-07-30T15:31:05Z

I AM SORRY!!!!!

Real-Gecko · 2015-07-30T15:33:33Z

I'ts OK :)

iliajie · 2015-07-30T17:40:37Z

Please update to test version 14.01, has better support for Filemin!

Real-Gecko · 2015-07-31T09:07:00Z

Fixed in 0.9.4.
Under Authentic uses version shipped with theme.
Under other themes uses version shipped with module.
Thanks, people!

Real-Gecko closed this as completed Jul 31, 2015

Using codemirror #21

Using codemirror #21

Comments

pabloko commented Jul 2, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

pabloko commented Jul 7, 2015

iliajie commented Jul 7, 2015

pabloko commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

pabloko commented Jul 7, 2015

Real-Gecko commented Jul 7, 2015

iliajie commented Jul 18, 2015

Real-Gecko commented Jul 19, 2015

iliajie commented Jul 19, 2015

iliajie commented Jul 23, 2015

swelljoe commented Jul 27, 2015

Real-Gecko commented Jul 28, 2015

iliajie commented Jul 28, 2015

Real-Gecko commented Jul 29, 2015

iliajie commented Jul 29, 2015

iliajie commented Jul 30, 2015

iliajie commented Jul 30, 2015

Real-Gecko commented Jul 30, 2015

iliajie commented Jul 30, 2015

Real-Gecko commented Jul 30, 2015

iliajie commented Jul 30, 2015

Real-Gecko commented Jul 31, 2015