Release: InputfieldCodeMirror

[Adam Kiss]

I needed code editor with syntax highlighting in one of my projects, so I took CodeMirror from [http://codemirror.net] and did a little inputfield module.

v0.3 has this features:

- includes CodeMirror in you fieldtype options

features to come:

- license – probably GPL, although CM is distributed under MIT (so PW's GPL takes precedence here, I think)

- custom colors to fit ProcessWire (possible theme selection later)

- possibility to switch between html and php (both with JS & CSS)

- there is a great chance, that PW tags (once they're out) will have their highlighting too (shouldn't be too hard to code)

GitHub: https://github.com/adamkiss/InputfieldCodeMirror

Edit: Edited the text a little (so I don't sound like idiot) and added link to author of original syntax highlighting I used, because I realized it might sound I wrote full parser/highlighter

[ryan]

Very cool Adam. I just installed and tested it out on one of my existing textarea fields and it works great! This opens up some cool new possibilities, like having pages as CSS or JS files. Tell me more about the way you are using it in your own projects? Nice work.

Thanks,

Ryan

[apeisa]

I like it too, great job!

Also interested to hear more about how you are using this. Sometimes would be nice to have small css-snippets per page, without adding body.page-2323 hooks to normal css, or external files per page, if chance is very small.

if($page->css) {
  echo "<style> /* Some css just for this page */";
  echo $page->css;
  echo "</style>";
}

[Adam Kiss]

Oh, I used it for:

– very 'block'-y site: It's built with very flexible grid and every hX and/or div has several class, like .grid-5, .pull-2, etc. And since every page (virtually) is different, I couldn't come up with one set of fields

– I have one site, where all pages are very similar (like 9 out of 10 fields similar), but each has block, which can be very different one from another. Again, small HTML snippet is much better then adding like 20 fields and 40 different templates

[Adam Kiss]

Question for Ryan: Ryan, when I save page with this field [named body_more], PW always informs me, that there has been change in this field. Content appears the same, I am unable to spot the difference, yet every page save, this field is 'changed'. Could you have a quick look at it, maybe there's something wrong with my code, maybe it's some combination of characters, i don't know?

[ryan]

Adam, I can't seem to duplicate that here. I've tested InputfieldCodeMirror on a field here and am only getting the 'changed' messages when I've changed something. Are there any other factors? I don't think that the content of the field would matter unless something is appending some whitespace to the value (like the javascript perhaps), or converting one type of whitespace to another (like tabs to spaces or spaces to tabs, etc.). First we need to determine where it's changing, so this might be a good place to start... add this to your setAttribute() function in your module file:

if($key == 'value') $this->message(md5($value));  

That will display a message at the top of the screen when editing a page with the field. When you edit and save the page, and edit again, is the MD5 value always the same? If it's not, then something is changing, so try this:

if($key == 'value') $this->message(md5(preg_replace('/[\s\r\n]*/', '', $value)));  

If the MD5 hashes are now the same, then it means something is messing with the whitespace in the value (likely javascript related). If they still aren't the same, then you may just want to stuff the entire $value into that message() function and copy them out to run a diff.

If all of these return the same MD5 hashes, then tell me how to duplicate exactly, including your field settings and the content of the field, and I can do more testing here.

[Soma]

Just installed on latest PW21. Thank for this great addition! Works so far.

Just one thing noticed (using chrome at least) when using this input type on a seperate tab it's bugged. It doesn't show the text until i click and select all it re-appears. This doesn't occur when using this in content tab.

[Adam Kiss]

Hi Soma; since original release, my core work duties have shifted, so this Inputfield was created and not maintained ever since. But don't worry, it's planned somewhere in near future, to be either discontinued or updated (together with updated scripts from original authors), checked with PW21.

Unfortunately, due to sheer amount of work I have, not everything is going according to plan