get CodeMirror working in post editor

[roots]

get CodeMirror working in post editor

[chadskeers]

It seems that this also disables the accordion feature of the admin menu. Menu items are revealed if you click on the parent, but clicking on the arrow does nothing when the Codemirror javascript is loaded. I'm looking into it.

[chadskeers]

What kind of feature set are we looking for with CodeMirror? Pretty much anything that the normal Wordpress editor does needs to be re-implemented to work. I've just removed the quicktag buttons from the HTML editor because I figure if you're using a code-editor you won't be using those. Word count and resizing shouldn't be too big of an issue, but what else?

[retlehs]

ideally codemirror would just be replacing the textarea on the html editor and have all the buttons still work, if that's not easy then we can ignore it for now

need to also make sure that drafts still get automatically saved

[chadskeers]

I'll dig into the TinyMCE source more and see what's possible. I've got drafts saving automatically.

[chadskeers]

Ok, sweet, the insertion buttons are working. Had some thoughts about a couple of enhancements. How about making the b and i buttons actually insert their respective tags instead of strong and em, and adding buttons for those two now that all four are a part of the html5 spec. My other thought was to add a prompts for title to the link insertion dialog.

[retlehs]

all of the above sounds good, i'll check out your repo tonight :)

[chadskeers]

Haven't added any enhancements yet, still working on getting resize working. I pushed my current hack so you can take a look, there are some comments in there detailing the problem as it stands.

Other than that it's all good I think, though some of it could use to be cleaned up a bit. Any pointers are appreciated--this is my first time coding after nine months in Africa so I'm a little rusty.

Once resize is done, I'll add the other features I mentioned. Is it worth adding a page to the wiki outlining my changes?

[retlehs]

sorry, still haven't checked this out yet but i haven't forgotten! will get back to you soon

[twaiiiin]

@chadskeers: I'm testing your fork. CodeMirror is great and working. Word count and autosave too.
It's too bad that CodeMirror disable the TinyMCE. It would be amazing if the work tab "Visual" also works.

@retlehs: I flew over the code. There are plenty of code and files only for CodeMirror.
This is not a problem for Roots?

[chadskeers]

@monsiert: I think I can get the visual tab working. I'll get back to you on that. As for the numerous files: this isn't production quality code. The workarounds for word count and the quicktag toolbar require dequeueing some stuff that wordpress inserts all packaged up and minified. I want to minify all of the business logic for codemirror, quicktags, and the word count so that it can be one file.

What I was really hoping or was some input about the resizing problem that I discuss in scripts.js. For now how about I make a production quality branch that doesn't have resizing enabled and continue work on resizing and enabling the visual editor?

[retlehs]

@chadskeers - production branch sounds good. i'd say resizing and visual tab are necessary in order for us to roll this out

thx a lot for working on this

edit: might be best to work on this in a wordpress 3.2 environment just to be safe

[chadskeers]

Visual tab is working, going to dig into TinyMCE to see how they do resizing. Hopefully I can make it consistent between the two.

[twaiiiin]

Awesome ! :)
There is a place where you can test it?
Did you commit on your repo?

[chadskeers]

@monsiert: Well, to be honest I somehow bricked my repo so I deleted it and reforked. I think it's better this way anyway though because I'm keeping all the CodeMirror stuff in a branch now. I'm hoping to have the whole thing sorted out and pushed to my repo by Sunday night.

What do you mean exactly by a place to test it? I'm testing it on my local machine...

[twaiiiin]

I mean: where can I download/test/fork it ? But you already answered to my question.
Thank you. :)

[retlehs]

@chadskeers: ty sir!

[chadskeers]

Ok ran into some snags, there's a branch up called codemirror you can look at though. I think I'm going to have to add editor.js to my list of WP script files to override. That script does a ton of substitutions when switching back and forth between HTML and Visual mode, and it ends up stripping out some

tags as well as removing all the indenting that codemirror does--essentially undoing all the prettification that codemirror provides.

Still no resize, though it will check cookies and take on the size of TinyMCE. I'm going to be relocating over the next week so I doubt I'll get time to work on it in the short-term. My first priority for the moment is figuring out a way to retain the structure between editor modes.

Right now there are a whopping 8 files just for codemirror, 9 if I rework editor.js, but I think it could be feasibly cut down to three. Minification can wait til the rest is working though.

[retlehs]

@chadskeers after talking with @swalkinshaw and based on how much modification has to be done to get this to work we suggest that you convert your work to be a plugin

there's a bunch of existing codemirror plugins but they either don't work or don't work on the post/page editor, it'd definitely be nice to have one up on the wordpress plugin directory

[chadskeers]

Yeah that makes good sense. Still on the move but when I get settled down
I'll take a look at making the conversion.

On Thu, Jun 23, 2011 at 12:37 AM, retlehs <
[email protected]>wrote:

@chadskeers after talking with @swalkinshaw and based on how much
modification has to be done to get this to work we suggest that you convert
your work to be a plugin

there's a bunch of existing codemirror plugins but they either don't work
or don't work on the post/page editor, it'd definitely be nice to have one
up on the wordpress plugin directory

Reply to this email directly or view it on GitHub:
#2 (comment)