Presenting TW5-CodeMirror-Plus, an inline wikitext syntax highlighter

[Adithya B]

Hi!

I have been working on an inline wikitext highlighter for the past few weeks. Its now at a stage when I can share with you guys. This is how the editor looks like:

To try it out: visit http://adithyab.tiddlyspot.com/ and edit any tiddler.

The github repo for collaboration/bug reports/etc: https://github.com/adithya-badidey/TW5-codemirror-plus

Thanks to JD for the encouragement and Mario for the help.

Whats next?

• Link hover and click
  • I need help with this. Anyone who has insight into how this can work, please reply.
• Auto list continuation (Saq has a plugin for the stock editor - something similar)
• Better support for macros

[Saq Imtiaz]

Good stuff. Thanks for sharing.

Regarding list continuation, you could definitely build that into this. Though if you don't mind loosing the ability to add an actual tab character, the autolists plugin I wrote should work with this just fine.

For links, perhaps a popup that shows when you hover over a link, with the popup containing a clickable link. There is a plugin for the popup on hover, though I don't use it and do not recall the name.

I'd also consider adding tiddler title autocompletion for links and transclusions.

Hope that helps.

Cheers,

Saq

[Joshua Fontany]

Agreed, good stuff! I will make time this week to check this out. Are your color schemes hard-coded, or do they reference the current wiki palette? (Idle thought from notes about converting my own highlighting code into TW.) If it is useful at all, I have a Visual Studio Code plugin full of regex for various tiddlywiki syntax highlighting contexts:

https://github.com/joshuafontany/VSCode-TW5-Syntax  

Best,
Joshua Fontany

[TW Tones]

Adithya,

This looks wonderful, do tell us when we can install it in another wiki.

Saq autolists is great but an easy toggle off would help.

Regards

Tones

[Adithya B]

Thanks Everyone :)

Saq, I tried adding your autolists plugin to this and it didnt work out of the box. I assumed it works closely with the default editor instead of codemirror. Can you help with porting it?

>> For links, perhaps a popup that shows when you hover over a link, with the popup containing a clickable link. There is a plugin for the popup >> on hover, though I don't use it and do not recall the name.

To do the above through codemirror, it seems I need access to the specific instance of texteditor to trigger the popup - I am stuck here. Are you suggesting I use a TW plugin instead?

Joshua- The many of the colours are referencing the pallete. The highlighting ones are hardcoded. Will figure out how to separate this in the future. The css is pretty easy to edit and customize. Also, The Regex might be useful. Thanks for sharing.

Tony, you can install by going to adithyab.tiddlyspot.com and following the directions there. Please do try and let me know. There are still some bugs but I am using it with my everyday TW and it is stable.

[Adithya B]

Regarding the Autocomplete, I am using a modified version of Saq's anyword replacement and it works just fine. I have added that too to the TW.

Saq, can that anyword.js to this plugin?

[Saq Imtiaz]

I added the autolists plugin to http://adithyab.tiddlyspot.com/ and it worked just fine in my limited testing on the Home tiddler.

 

Saq, I tried adding your autolists plugin to this and it didnt work out of the box. I assumed it works closely with the default editor instead of codemirror. Can you help with porting it?

What exactly happened?
Were you editing a tiddler with either no "type" field set, or "type" text/vnd.tiddlywiki? It wont work for other content types.

 

>> For links, perhaps a popup that shows when you hover over a link, with the popup containing a clickable link. There is a plugin for the popup >> on hover, though I don't use it and do not recall the name.

To do the above through codemirror, it seems I need access to the specific instance of texteditor to trigger the popup - I am stuck here. Are you suggesting I use a TW plugin instead?

You probably need to write an addon to extend codemirror, which might then be able to re-use existing TW plugins or might need a custom JavaScript based solution. 

 

[Adithya B]

You're right - it works with adithyab.tiddlyspot.com but not with my personal TW. Very strange. Maybe some other plugin is interfering. Will try to figure it out.

[JD]

So exciting and fun to use! Thanks so much Adithya! 

Maybe you can try using your own colour name, defining it in a color mapping tiddler

$:/config/DefaultColourMappings/<colour-name>

So you can use <<colour cm-highlight>>, for example, where cm-highlight is defined in 

$:/config/DefaultColourMappings/cm-highlight

(documentation here: https://tiddlywiki.com/#colour%20Macro)