Codemirror plugin questions

75 views
Skip to first unread message

Mat

unread,
Apr 29, 2018, 11:20:55 AM4/29/18
to TiddlyWiki
Looking at the Codemirror plugin demo which also has the autocomplete addon installed...

I note that if I create a new tiddler, named New Tiddler and, in another tiddler, type [[ I automatically get also the closing brackets [[]] (and cursor conveniently placed in between) but as I begin to type New there is no text autocompletion or suggestions

Generally put, If I type [[ or <$ or << then I want for all tiddlers / widgets / macros to have a list show from which I can select an entry. If the string is extended to e.g 

Does this functionality not exist? What would be required to make it exist? I cannot find any instrux for that "Autocompletion" addon.

Also, writing class="foo should show a select list of all classes prefixed foo.

Further, it seems that when I in a Stylesheet type bord (as in "border") that is recognized as an attribute name because it remains colored red until I've typed the last letter in border (and before any eventual space character). But I barely see any point with this recognition without autocomplete - ?

I also want be able to hover or click on certain keywords and have some info text come up. For example, if I click on a macro then perhaps the parameter list shows (extracted from some docs or from the macro definition) and if I click on a style def attribute then it's possible values come up. 

What would it take to enable this type of functionality? It is all about some pattern recognition and showing a list of stuff pulled from either some dictionary or a search in the code.

Thanx!

<:-)

BurningTreeC

unread,
Apr 29, 2018, 11:33:10 AM4/29/18
to TiddlyWiki
Hi Mat, if the autocompletion plugin is installed, you can autocomplete with Ctrl+Space

in normal tiddlers it autocompletes text that is already in the "buffer" - that means, text that's already in the tiddler text field

you'll get a dropdown to select from if there are more possible autocomplete - hits


you can also take a look at the codemirror demo page: https://tiddlywiki.com/plugins/tiddlywiki/codemirror/

there's a lot of useful information


cheers, Simon

Mat

unread,
Apr 29, 2018, 11:50:20 AM4/29/18
to TiddlyWiki
Thanks Simon but looking at the Codemirror demo (which is exactly what I did before) where the autocompletion plugin seems to be installed, I still don't get how to make it work. If I type "Hel" in the LoremIpsum tiddler... how do I get it to autocomplete into "HelloThere"? Clicking Ctrl+Space does nothing. I bet it's obvious once you know... but I don't.

<:-)

BurningTreeC

unread,
Apr 29, 2018, 12:00:33 PM4/29/18
to TiddlyWiki
@Mat 

in the lorem ipsum tiddler there's no "Hello" and no "There" - that's because you don't get the autocompletion. It's not global, only per tiddler and there only per text field.

It may be possible (with help) to extend that autocomplete function, therefor one would have to look deeper into the codemirror docs https://codemirror.net

But as of now, the autocompletion works but only with text that's present in the current's tiddler text field


try writing "Lo" in the Lorem ipsum tiddler, then hit Ctrl+Space


PMario

unread,
Apr 29, 2018, 12:50:33 PM4/29/18
to TiddlyWiki
On Sunday, April 29, 2018 at 6:00:33 PM UTC+2, BurningTreeC wrote:
try writing "Lo" in the Lorem ipsum tiddler, then hit Ctrl+Space

Type needs to be "text/vnd.tiddlywiki" to get the "in tiddler" auto-complete.

-m

PMario

unread,
Apr 29, 2018, 1:19:01 PM4/29/18
to tiddl...@googlegroups.com
On Sunday, April 29, 2018 at 5:20:55 PM UTC+2, Mat wrote:
I note that if I create a new tiddler, named New Tiddler and, in another tiddler, type [[ I automatically get also the closing brackets [[]] (and cursor conveniently placed in between)

That's because of the "-closebrackets" addOn. It basically auto-closes  (), [], {}

 
but as I begin to type New there is no text autocompletion or suggestions

The current implementation has no idea about TW-titles. ... We would need an eg: "title-hint.js" function.

There may be a tag-hint.js, field-hint.js .... and so on.
 
Generally put, If I type [[ or <$ or << then I want for all tiddlers / widgets / macros to have a list show from which I can select an entry. If the string is extended to e.g 

<$... Oh, that's a widget-hint.js functionality, which nobody wrote yet. ...
 
Does this functionality not exist?

Yes. .. It doesn't exist.
 
What would be required to make it exist?

Programmers with some love to detail. ...

eg:
The existing -closetag AddOn allows us to say eg: <div>  .. As soon as you hit the > letter it will add </div> ... Which is nice. ..
The problem is, that it only works if type is set to "text/html"

So we will need to investigate to enable the possibilities with text/vnd.tiddlywiki .... Where basically all the addOns could be needed at the same time.

The problem is: It's complex to guess what the user actually wants to see, without a specific type definition. ...

Codemirror library knows about a mixed mode, which may be possible to be used. But as I wrote. The real challenge is to detect which mode should be active. ... We will need to detect the users intention while they are typing. ...
 
I cannot find any instrux for that "Autocompletion" addon.

We did the basics. ... But nobody said, it's finished. ;)
 

Also, writing class="foo should show a select list of all classes prefixed foo.

This will be extremely complicated and probably slow. TW allows macro calls in StyleSheet tiddlers. So it's close to impossible. So about 99.7%. ... or may be 98,7% :))


Further, it seems that when I in a Stylesheet type bord (as in "border") that is recognized as an attribute name because it remains colored red until I've typed the last letter in border (and before any eventual space character). But I barely see any point with this recognition without autocomplete - ?

Yea type: text/CSS ... knows a lot about CSS parameters. .. CTRL-SPACE is key here. IMO it's already useful, if you don't know the exact parameter names. It may help a lot with typos.

I also want be able to hover or click on certain keywords and have some info text come up. For example, if I click on a macro then perhaps the parameter list shows (extracted from some docs or from the macro definition) and if I click on a style def attribute then it's possible values come up. 

So if we come up with a "doc-format" you volunteer to implement the texts .... right?

The final goal needs to be, that the TW build system auto-creates the basic structure. But the "prose text" will be user-made.
 
What would it take to enable this type of functionality?

A lot of work and spare time.
 
It is all about some pattern recognition and showing a list of stuff pulled from either some dictionary or a search in the code.

codemirror docs will have the info. ... But it's relatively low level developer stuff.  But the existing addOns can be used as examples. ..

have fun!
mario

Mat

unread,
Apr 29, 2018, 6:36:18 PM4/29/18
to TiddlyWiki
Simon and Mario - big thanks for clarifications!



The current implementation has no idea about TW-titles. ... We would need an eg: "title-hint.js" function. 

Seems like a most common use case. There's a limited set of titles and easily findable. Could maybe even have all titles in a hash table that is updated on either tiddler save or wiki save.

 
tag-hint.js, field-hint.js , widget-hint.js

eg:
The existing -closetag AddOn allows us to say eg: <div>  .. As soon as you hit the > letter it will add </div> ... Which is nice. ..
The problem is, that it only works if type is set to "text/html"

Ah. In deed a severe limitation!  (...and I fail to understand why it can't be just made to work also in text/vnd.tiddlywiki. I mean, if the user hits the > and Ctrl+space then he wants <this-string repeated again with a / after the <. What does this have to do with tiddler type? )


The problem is: It's complex to guess what the user actually wants to see, without a specific type definition. ...

Could you give an example of what could be misunderstood?

I understand I'm naive about it but doesn't the user 'simply' want to do the usual TW stuff? I.e primarily wikitext and occasionally html and css? These are all covered in text/vnd.tiddlywiki.


Also, writing class="foo should show a select list of all classes prefixed foo.

This will be extremely complicated and probably slow. TW allows macro calls in StyleSheet tiddlers. So it's close to impossible. So about 99.7%. ... or may be 98,7% :))

Again, I understand I'm naive but... there is clearly some already implemented mechanism that keeps track of, or seeks out, the style classes.... so isn't it "just a matter of" comparing that foo pattern with those? (...and, "Well Mat, if you think it's so simple, then you do it" ...unfortunately it is not simple for me but for other reasons.)

 
Further, it seems that when I in a Stylesheet type bord (as in "border") that is recognized as an attribute name because it remains colored red until I've typed the last letter in border (and before any eventual space character). But I barely see any point with this recognition without autocomplete - ?

Yea type: text/CSS ... knows a lot about CSS parameters. .. CTRL-SPACE is key here. IMO it's already useful, if you don't know the exact parameter names. It may help a lot with typos.

But so it does know that it is the beginning letters of a CSS parameter? ... and then couldn't it just instead list those and let me select the desired one?
 

I also want be able to hover or click on certain keywords and have some info text come up. For example, if I click on a macro then perhaps the parameter list shows (extracted from some docs or from the macro definition) and if I click on a style def attribute then it's possible values come up. 

So if we come up with a "doc-format" you volunteer to implement the texts .... right?

Well, the reasonable thing is to use an automated template that e.g extracts the parameter list or some defined field in the docs. As for style def attributes, it seems it is built into the browser inspector so I guess there is a db in every browser.
 

It is all about some pattern recognition and showing a list of stuff pulled from either some dictionary or a search in the code.

codemirror docs will have the info. ... But it's relatively low level developer stuff.  But the existing addOns can be used as examples. ..


Is there little generality in the -hint.js stuff done so far? Or is every -hint.js different?


<:-)
Reply all
Reply to author
Forward
0 new messages