Codemirror - auto close tags in tiddlywiki code?

[Scribs]

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

[pmario]

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.

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

[Scribs]

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…

[pmario]

@Scribs

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.

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.

[Scribs]

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.

[pmario]

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. …

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

[etardiff]

@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.

[Scribs]

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.

[pmario]

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

[TW_Tones]

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.

[Scribs]

@pmario

…
p.defineMIME(“text/html”,“htmlmixed”);p.defineMIME(“text/vnd.tiddlywiki”,“htmlmixed”);
…

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!