TW - CodeMirror2 wrapper alpha testing :)

[PMario]

Hi folks,
I've uploaded an alpha TW [1] to dropbox for experimenting.
It contains a TW wrapper for CodeMirror text editor [2], which I think
has some potential :) CM has different modes for real time syntax
highlighting.

At the moment, there are just 2 ToolbarCommands "cmEdit" and "cmSave"
in the CMEditCommands tiddler. (mode is hardcoded to javascript)

All CodeMirror libs are seperate tiddlers. Will be less in production.

It's main purpose is, to get some feedback :)

a) It's easy to know, if a tiddler should be edited in "javascript"
mode. You have to look at the "systemConfig" tag. For all other
tiddlers, it is a bit more complicated.

b) I use systemTheme tag a lot. So I know how to handle this one.

c) With TiddlySpace, there is the field: "server.content-type", which
I will deffinitely check. The problem here is, that it is not common
with file TWs.

d) I tend to use a "systemCSS" tag for css files.

e) If you create a "new tiddler" it is automatically opened with the
default editor. I tend to have a look at the tagging function. If
someone sets a known tag, I'll switch the mode accordingly.

f) The most interesting function of CM is mixed modes [3]. It would be
nice to get some ideas, about, how to identify those :)

What do you think?

====
Planned functions:
- use CM as a syntax highlighter in view mode.
-- {{{ ... text
-- //{{{ ... code
-- /*{{{*/ ... css
-- <!--{{{--> ... xml
-- <code some params> ... </code>
-- may be; I'll make this one compatible with my
syntaxHighlighter3Plugin.

thanks for you feedback
-mario

[1] http://dl.dropbox.com/u/28489257/upstream.html
[2] http://codemirror.net/
[3] http://codemirror.net/mode/htmlmixed/index.html

[PMario]

Newer version uploaded.

* Edit mode still hardcoded to "javascript" mode
* TW code block rendering now uses CodeMirror2Plugin's syntax
highlighting

-- {{{ ... text
-- //{{{ ... code
-- /*{{{*/ ... css
-- <!--{{{--> ... xml
-- <code some params> ... </code>

<code class="python"> ... seems to have a bug. so it's not working.

feedback would be very welcome :)
-m

[PMario]

The dev (marijnh) fixed the python bug.
Uploaded a newer version.
-m

[Måns]

Hi Mario

> It's main purpose is, to get some feedback :)

> What do you think?
> ====
> Planned functions:
> - use CM as a syntax highlighter in view mode.
> -- {{{ ... text
> -- //{{{ ... code
> -- /*{{{*/ ... css
> -- <!--{{{--> ... xml
> -- <code some params> ... </code>
> -- may be; I'll make this one compatible with my
> syntaxHighlighter3Plugin.

To me it looks as if you are very close in creating a wysiwyg for
programmers!!
Even if (as you know) I'm not a programmer - I believe I can see the
potential.
I like the idea that you can open a tiddler with almost unreadable
code - hit edit, and get a rendition with syntaxhighligting, for
better recognition - and edit!!

If you combine your syntaxHighlighter3Plugin with this - or make CM
work in view mode as well - it will be "true" WYSIWYG for
programmers...

I hope some "real" coders/programmers will step in - and give you some
constructive feedback from their povs - because my 2 cents aren't
really from a users perspective, as I'm not used to work with
syntaxhighligters at all...

Thank you for showing more of your splendid work with TW - Its magic
you know ;-)

Cheers Måns Mårtensson

[PMario]

On Sep 4, 10:39 am, Måns <humam...@gmail.com> wrote:

> To me it looks as if you are very close in creating a wysiwyg for
> programmers!!

jup. syntax highlighting helps (me) to recognising the structure of a
programm. And if TW itself can do it, there's no need to copy paste it
to a "real" code editor to get a better understanding.

> Even if (as you know) I'm not a programmer - I believe I can see the
> potential.
> I like the idea that you can open a tiddler with almost unreadable
> code - hit edit, and get a rendition with syntaxhighligting, for
> better recognition - and edit!!

that's the idea.

> If you combine your syntaxHighlighter3Plugin with this - or make CM
> work in view mode as well - it will be "true" WYSIWYG for
> programmers...

View mode is done allready. All the "runMode***" tiddlers use the CM
formatter, that is very very similar to the syntax highlighter
plugin :) I like the result. CM will replace the SH plugin in my
spaces, since the later can do highlight only.

> I hope some "real" coders/programmers will step in - and give you some
> constructive feedback from their povs - because my 2 cents aren't
> really from a users perspective, as I'm not used to work with
> syntaxhighligters at all...

The really cool thing would be a TW syntax highlighter. Which in _no_
way would be WYSIWYG (like TW rendering) but would make the TW plain
text more readable too :)

-m

[Yakov]

This is really amazing. I'm just starting to learn development for TW
and I always though: "hey, TW could be a very nice tool for coding:
look at this fine hypertext structure, no need of this linear mess!".
And this can actually bring a new age of coding (for TW) -- I mean,
when TW becomes ready to be the _main_ tool for coding.

Not much to say about the highlightning -- it is great, although in
the cmEdit mode it's poorer than in the view mode (especially for
CSS).

Actually, I haven't understood the thing about those tags and fields
in a)-d). Do you mean that you want to figure how to declare in which
mode the highlightning should be used (XML, CSS, JS or Python)? I
think it can be set on user to decide (just make some settings so that
one can choose which tag/field defines each mode). As for the mixed
mode, aside elaborate templates (like in TiddlyTools) it seems that
usually the only need for mixed mode which happens in TW is CSS + JS
in the same plugin tiddler, isn't it?

Some side notes:
* if it is possible to read the core code of TW highlighted within TW
it adds more perspective for development (I mean, this would introduce
more explorability of the core, although cooked TW is less readable
than separate .js files)
* it seems that there are some other things to overcome so that TW
become a really good tool for development (including a "cooking"
engine within TW), but anyway this is a great step forward
* I have no idea why Python is here? Do you intend to use TW as a
development tool for Python?

Thanks for working on this,
looking forward for the separate plugin version.
Yakov.

[PMario]

On Sep 5, 12:19 am, Yakov <yakov.litvin.publi...@gmail.com> wrote:
> This is really amazing. ..
thx:)
> .. I'm just starting to learn development for TW

> and I always though: "hey, TW could be a very nice tool for coding:
> look at this fine hypertext structure, no need of this linear mess!".
> And this can actually bring a new age of coding (for TW) -- I mean,
> when TW becomes ready to be the _main_ tool for coding.

The main tool for TW coding is a little bit hard to achieve, since IMO
it would need a "real time" syntax checker too. But it's a good
strart :)

> Not much to say about the highlightning -- it is great, although in
> the cmEdit mode it's poorer than in the view mode (especially for
> CSS).

jup ... since edit mode is hardcoded to "javascript" mode at the
moment, for every tiddler. (It's alpha :))

> Actually, I haven't understood the thing about those tags and fields
> in a)-d). Do you mean that you want to figure how to declare in which

> mode the highlightning should be used (XML, CSS, JS or Python)? ...
If a tiddler is tagged "systemConfig" it deffinitely is a plugin. TW
plugins are allways "javascript".
"systemThemes" I use a lot, becuase theme switchers use it to identify
themes. themes will be "xml" or "html mixed"
....
> ... I

> think it can be set on user to decide (just make some settings so that

> one can choose which tag/field defines each mode). ...
I did some more thinking allready, to use the given UI.
Since CodeMirror has a lot of config options [1] I was thinking about
a config tiddler like this:

! global
enterMode: keep
indentWithTabs: true
lineNumbers: true
matchBrackets: true

! javascript
content-types: text/javascript application/json
tags: systemConfig anOtherTagThatActivatesJS
mode: javascript

! xml
tags: systemTheme aTagThatActivatesXML
mode: xml
...

The plan is, to have the following rule, for determe the tiddler edit
type.
The higher number wins:

1) (tiddlyspace) server.content-type: text/javascript
2) (tiddler field) content-type:
3) (tiddler tag) eg: systemConfig

> ... As for the mixed

> mode, aside elaborate templates (like in TiddlyTools) it seems that
> usually the only need for mixed mode which happens in TW is CSS + JS
> in the same plugin tiddler, isn't it?

Mixed mode will be low priority, since we'll need to see what's
needed ...

> Some side notes:
> * if it is possible to read the core code of TW highlighted within TW
> it adds more perspective for development (I mean, this would introduce
> more explorability of the core, although cooked TW is less readable
> than separate .js files)

That's why I think, you should fork and download tw from github, and
use a "native" source editor, for this.

> * I have no idea why Python is here? Do you intend to use TW as a
> development tool for Python?

TiddlySpace is written in Python and I needed a language, that is not
"default" to different type of TW code indicators.
eg:
{{{ ... text
//{{{ ... code

python needs <code class"python">..</code>. So it's just to test the
new formatter. There are a lot of "alien" languages supported by
CodeMirror and it should be possible to highlight all of them with
TW :) See "Suported Modes" [2]

-m

[1] http://codemirror.net/manual.html#config
[2] http://codemirror.net/

[PMario]

Uploaded latest version: http://dl.dropbox.com/u/28489257/upstream.html

There is a configuration tiddler now:
http://dl.dropbox.com/u/28489257/upstream.html#CodeMirror2Config that
allows you to assign several tags to CM edit modes. It is a shadow
tiddler. So if you mess up the config, just delete it and start over
again.

! global
section is used for global settings

! mode
sections will overwrite global settings. So you just need to add
changes here.

Any feedback would be welcome
-m

[Yakov]

Hi Mario.

I'd say the HelloWorld tiddler clearly needs the mentioning of the
plugin first and the runMode header is rather unclear (I'd say "Test
examples (runMode)"). Also, I can't see any highlightning in the edit
mode at all (in both Opera and FireFox). The HelloWorld (or, more
precisely, it's "edit text" field) runs out of borders in the cmEdit
mode. Finally, I can see an "&nbsp;" thing before "1" in the
numeration colomn.

Yeah, the "Alpha - Alpha - Alpha - Alpha - Alpha - Alpha" makes me
smile :)

[PMario]

On Sep 6, 5:27 pm, Yakov <yakov.litvin.publi...@gmail.com> wrote:
> I'd say the HelloWorld tiddler clearly needs the mentioning of the
> plugin first and the runMode header is rather unclear (I'd say "Test
> examples (runMode)"). Also, I can't see any highlightning in the edit
> mode at all (in both Opera and FireFox).

I am testing with FF. runMode tiddlers have no deffinition for edit
mode.
test*** have :)

> The HelloWorld (or, more
> precisely, it's "edit text" field) runs out of borders in the cmEdit
> mode.

jup. this seems to be a general problem. have seen some posts in CM
group allready.

> .. Finally, I can see an "&nbsp;" thing before "1" in the
> numeration colomn.
I saw this, but didn't ask the cm group yet, since it doesn't hurt too
much :)

>Yeah, the "Alpha - Alpha - Alpha - Alpha - Alpha - Alpha" makes me
>smile :)

hihi - it's the details, that bite you :)

thx for your feedback
-m