[tw5] Ready-to-play prototype: Syntax-Highlighting Tiny Editor

[Charlie_Veniot]

Attachment: Download and drag into TiddlyWiki.com for import of three tiddlers.

• Charlie’s Syntax Highlighting Tiny Editor (this is the meaty one)
• Charlie’s Syntax Highlighting Tiny Editor Info (just “about” info shown in a details element in the meaty tiddler)
• Charlie’s Syntax Highlighting Tiny Editor Toolbar Button (adds an “alternative edit button” to tiddler toolbars; use it to edit a tiddler with the tiny editor displayed in a modal window)
  Very early going, all about the “architecture” with one thing getting highlighted to start with.

Nothing particularly useful just yet. Good enough for working proof of concept and fun code to study for anybody who wants to get into the weeds.

Some Screenshots:

The toolbar button to open the tiny editor:

(no-fuss-no-muss standard edit button with a pastel-coloured background to distinguish it)

Editing the “Saving” tiddler with the tiny editor:

(highlighting the first part of widgets)

SyntaxHighlightingTinyEditor.json (2.96 KB)

[Charlie_Veniot]

Latest version (attached) highlights wikilinks.

Something to test and keep in mind: parsing through the text and highlighting things is a sequential process. Gotta watch out for syntax processing further down the process messing up syntax highlighting done earlier in the process.

SyntaxHighlightingTinyEditor.json (3.14 KB)

[Charlie_Veniot]

Latest version highlights quotation blocks. (with color purple and, to try out, overline for the opening <<< and underline for the closing <<<

I am not getting too caught up in color selections just yet. Everything is about architectural components right now. Color choices for later, along with a proper GUI to adjust the colors.

Download the attachment and drag into tiddlywiki.com to play.

In this screenshot, the editor is showing the bottom-most content (the quotes) in the HelloThere tiddler.

SyntaxHighlightingTinyEditor.json (3.53 KB)

[HistoryBuff]

Hi Charlie,

I played around with your editor a tiny bit today. There seems to be some sort of issue with word wrapping. If I narrow the window, the issue goes away.

Damon

[HistoryBuff]

Other than the word wrapping issue, I like it better than the http://sideeditor.tiddlyspot.com/. It seems more flexible in some ways.

Damon

[Charlie_Veniot]

G’day Damon,

Good catch! This editor has two layers: the edit widget in the bottom layer and div on the top layer.

The div on the top layer provides the syntax coloring.

It looks like the div and the editor are handling wrapping differently. I’ll do some digging and see if I can find the CSS magic to fix things.

Much appreciated !

[Charlie_Veniot]

There’s a lot of search-replace regexp going on, and it is pretty tricky.

I think best to not have this thing as a plugin that supplants the standard TiddlyWiki tiddler editor, and best to rather have it as a secondary side editor.

If you have any thoughts about that, please share.

Next on my mind is syntax colouring for bold, italic, underline. I’m on the fence: just color the start and end tags, or color them and all the text in between. I’m going to be hemming and hawing on that for another bit.

[Charlie_Veniot]

I think I fixed the wrapping problem. Well, I at least fixed a problem if not that one.

The highlighting setup for widgets (the “opening” part of widgets) was buggy, but seems to be A-1 in this updated version.

I’ve also added highlight of the wiki codes for text formatting: bold, italic, underline, strikethrough, superscript, and subscript. Just highlighting the codes and not the content between the codes.

Latest version attached, for download and dragging into TiddlyWiki.com to import the three tiddlers.

SyntaxHighlightingTinyEditor.json (3.85 KB)

[HistoryBuff]

Hey Charlie,

Played around with it for a few minutes this afternoon. The wrapping issue is definitely fixed. I want to spend much more time testing it, but don’t have time right now.

[Charlie_Veniot]

Slow and steady is my cup o’ tea.

I’m not the kind to win any races. As long as we have a sense of heading in the right general direction, then I am a happy camper.

Little doses of testing/communication/work/whatever as sanity/insanity breaks is my philosophy.

Thanks for giving the latest a spin with that use case.

Cheers !