Announcing Monaco (VS Code) Editor for TiddlyWiki

Plugins
#1

Hey everyone!

As a developer I use Visual Studio Code often and so I got pretty comfortable with editing text in it. Every time I used any kind of other editor in TiddlyWiki, I longed for similar editing features.

But then I thought, hey, VS Code’s editor - Monaco - is open source, what if … we just integrate it into TiddlyWiki?

Behold, my first attempt:

https://smilyorg.github.io/tw5-monaco/

screenshot
screenshot924×750 36.4 KB

Feel free to give it a spin and copy it into your own wiki!

Source is on GitHub.

Let me know what you think! :blush:

19 Likes
#2

Oh man, that editor is a thing of beauty. So is your work integrating that into TiddlyWiki.

Congrats !

The second that works offline, I’ll be looking into using that in BASIC Anywhere Machine.

ASIDE: Yours is a kick-caboose first post to this forum. Holy mackerel …

#3

Delayed side-thought:

Man, that “outliner” right-sidebar (whatever it is called) rocks something silly.

That would be awesome not just editing tiddlers, but also viewing tiddlers. Euphoria just thinking about it …

2 Likes
#4

Oooh, very interesting. How do I link to a tiddler, e.g the tiddler “github-readme” (which is not camelcased)?

1 Like
#5

G’day,

Same as normal, unless your tiddler is “Markdown” type. Not sure how that works.

EDIT: tw5-monaco — Monaco Editor for TiddlyWiki (usage tab … I’m just looking at it now.)

3 Likes
#6

Thanks! :grin:

With offline do you mean self-hosting the Monaco files or embedding the source into tiddlers so it works as a single-file html?

#7

You mean the minimap? It’s pretty neat yeah. Not sure how easy it would be to extract it for general use though if you wanted to use it for viewing :sweat_smile:

#8

Ah… I’m a discourse noob, I just realized you can quote directly, this looks better.

Not sure what you mean, but all the features of markdown/wikitext remain the same, this only changes the edit mode of the tiddler.

I realize it might be confusing to present a markdown tiddler as the default demo though as I assume most people are using wikitext instead. Wikitext support is kinda boring right now though, so it makes for a lame demo :grin:

In any case, for markdown, you can write [github-readme](#github-readme) to link to a tiddler as shown in the markdowndemo.

#9

Yup, that’s right. (If something doesn’t work offline, I won’t put it in any of my TiddlyWiki instances.)

I was going based on this particular limitation in your plugin’s readme:

Online only. The Monaco editor source itself will be loaded remotely from unpkg.com, so editing while offline isn’t possible at this point.

#10

That is short and sweet compared to my wordiness …

Just dreaming of monaco being used in the preview pane, but I’m betting monaco wouldn’t be able to handle displaying the rendered goodies, because it is a text editor, not an HTML renderer.

Now I’ll be scanning the web to see if there is such a thing as a minimap for HTML web pages.

#11

I can see that.

So for nodejs-hosted wikis it should be pretty easy to add as you could put the Monaco source in the static files. But that’s more “self-hosted” than “offline” really.

For “true offline”, i.e. the whole Monaco source embedded as tiddlers so you can have a single-file html, it seems a lot trickier.

I tried to do this initially and fell down the rabbit hole of trying to make Monaco work with TiddlyWiki’s commonjs loader and it was not simple at all, so I just scrapped it :sweat_smile:

If someone has a good idea on how to do that in a simple way I’m all ears though :blush:

#12

I mean, you could probably embed the entirety of VS Code into the tiddler edit mode view… so you would have linked edit & preview, which would get you somewhat close, but that’s … I’m not going there right now. :joy:

Good question, I found dom-minimap, which looks interesting.

1 Like
#13

I’m guessing somebody with javascript chops could work something like the following into TiddlyWiki (for individual tiddlers and/or the entire TiddlyWiki), similar to what you found already:

Way beyond my abilities. A nice potential plugin independent from your project.

2 Likes
#14

Wow, I had no idea element() existed, that’s really neat, thanks for linking! Seems like it’s only natively supported on Firefox, but seems like there are fallbacks available as well.

Yeah would be interesting to see!

1 Like
#15

Ah, I missed the # character. Thanks.

1 Like
#16

Can https://github.com/joshuafontany/VSCode-TW5-Syntax be integrated to make wikitext less boring?

#17

That would be great, yeah! That extension will surely come in handy - if it can’t be used directly, then at least bits and pieces.

Considering that the editor here is running from within Tiddlywiki, I’m looking at how far we could go by hooking into the Tiddlywiki parser directly though :thinking: The Monaco API is just begging to be attached to all sorts of TW internals…

2 Likes
#18

Charlie_:

I’m probably missing something but I feel it might to possible to have your off-line capabilities by "self-host"ing via your local-store code.

A simple Yes/No reply might keep me from spinning around pointless ideas.

Hans.

1 Like
#19

What a contribution.

I just tried it on a copy of tiddlywiki.com and the HelloThere text/vnd.tiddlywiki tiddler and the preview works.

The clickable text display in the top right to jump with in the tiddler (after limiting the editor Hight) is a wonderful feature. Is this part of the editor or a seperate tool?, because it could be a plugin in its own right.

Love your work.

#20

Hey, thanks! The wikitext experience is a little boring right now, but that might change soon hint :sweat_smile:

Interesting that this stands out so much. :grin: It’s called the “minimap” and it’s part of the editor by default. Technically you might be able to extract it into its own plugin, but I’m guessing it’s too integrated with how the editor works to be useful outside without a lot of work.