Codemirror - auto close tags in tiddlywiki code?

hi all,
i have just installed the fantastic CodeMirror plugin and was especially excited about the auto-closing html tags. however, i have found that they only work on html type tiddlers and so they won’t autoclose widgets (which are specialized html elements anyways). is there a way to enable this functionality for the standard text/vnd.tiddlywiki type tiddlers?

for example, if I type <$list ...> i want it to automatically create the </$list> tag and put it after the cursor.

thanks!
scribs

Hi Scirbs,
That does not work out of the box. The auto-close html-tags is “bound” to text/html setting. We would need to create a new plugin that knows the TW widget names in addition to the HTML tag names.

Since text/vnd.tiddlywiki can have HMTL tags and widgets names mixed. It would be a completely new addOn.

I did a fast hack, that only checks for the list-widget. BUT it has a problem with the auto indent. It works OK for eg. the DIV but it also indents the end-marker for the list-widget.

So It’s more complex than I thought. I though it would be as simple as add the widget names to the HTML-tags array. Obviously it’s not. :confused:

As you can see the type is text/html, which is unusable for wikitext atm.

The addOn code for the close-tag option is at: https://codemirror.net/5/addon/edit/closetag.js

More testing would need to be done and we would also register the addOn for text/vnd.tiddlywiki to be active.

just some thoughts.
-mario

1 Like

i see, thank you for looking into it. i was hoping it could recognize any < ... > structure (which would include widgets, though it should exclude << ... >> variable calls) and add the corresponding </ ... > structure after it.

it does seem to be able to recognize these, as it uses them for the autocomplete – for example, if i have <div> and a <$keyboard> tags open, [ctrl+space] gives me a list with both div and $keyboard.

i feel that this would be a fantastic addition to codemirror, especially with the upcoming custom widgets in 5.3.0. i wish i had the javascript skills to give it a go myself…

That’s a coincidence. The autocomplete addOn just searches all the words it finds in the current tiddler and shows them. So if you eg: type “action” ctrl-space and you have no action-something text in your tiddler it will not show any hints.

just wanted to give this a quick bump and add that a great start would be to have < autoclose like ( [ { etc. on text/vnd.tiddlywiki tiddlers. maybe i will look into seeing if I can add that in for my use.

I did a bit more testing. It turns out it would be needed to change 2 CM-AddOns code. That’s not, what we want. Usually we use 3rd party code as is, to make updates easier.

So it’s more work than just a fast hack. :confused:

As I did play with auto-closing tags, I found out that auto-closing is not what I really want. What I really want is widget-hits for every widget parameter.

So if I type <$list<space> I want to be shown a list of all possible parameters until I’m done with the parms. Then if I close the widget with > … then it would be nice to auto-close.

There is some XML editor demo with a customized behaviour as described: CodeMirror: XML Autocomplete Demo

It may be even easier to create, but a lot more work to define all the params.

Thinking about it I may even have some code that will do a somewhat similar thing with or without any codemirror plugins.

-m

@Scribs, it’s not exactly what you’re looking for, but the Auto Complete plugin might be a good stop-gap solution, and it’s much easier to populate with the widgets and elements of your choice. There’s a demo showcasing its use for auto completing widget names, but IIRC someone was working on a filter that retrieved widget attributes as well, and “add the corresponding closing tag” would be an easy addition.

1 Like

thank you both! i did notice that in html tiddlers, anything will autoclose when put in angle brackets - if we could extend that to vnd.tiddlywiki tiddlers we shouldn’t need to give it every widget name. auto-suggestions are nice but i don’t particularly need them.

i have been unsuccessful in getting the autoComplete plugin to work with my wiki… i have tried several times and don’t know why, but it won’t actually run anything on [ctrl+space]. i have tried disabling and even deleting (on a backup) every other plugin and it still doesn’t work. but regardless, i am more looking for the auto-close brackets and tags feature that is already part of codemirror.

i realize i am straying out of my wikitext comfort zone and into dev-land… but it would be so much easier to design wikitext and tiddlyscript (however it’s called) with functional editing features like that, that are already present for editing html.

You can do the following hack.

Install CodeMirror Mode HTML Mixed as shown in the screenshot.

  • Open the tiddler $:/plugins/tiddlywiki/codemirror/mode/htmlmixed/htmlmixed.js in edit mode

  • Scroll to the end of the tiddler
  • Copy the code snippet: p.defineMIME("text/html","htmlmixed"), duplicate and modify it like so:

  • new: p.defineMIME("text/html","htmlmixed");p.defineMIME("text/vnd.tiddlywiki","htmlmixed");
  • save tiddler
  • save wiki → reload wiki.

Now it should automatically close widgets.

To avoid the auto-indent of the next line change the setting: Enable Smart indent in
ControlPanel → Settings → CodeMirror

That should be it. It worked for me.
have fun!
-mario

1 Like

Not withstanding @pmario’s solution;

@Scribs I just want to point out @etardiff’s suggestion of Auto complete is spot on, I used this to respond to open braces to include providing the close braces.

I have also made a tool to wrap content in open and close tags <tagname>selection</tagname> when tag name can also be $widgetname.

So there are a few ways to address your need, perhaps we need to package some “best of breed” solutions.

1 Like

this works perfectly for me, thank you so much! it will be a great workaround until TW script syntax detection is added (is that planned?). i will have to save this so i can make this change again if it gets overwritten in updates!