How use cursor-position.js ?

twMat commented 4 years ago

Hi @snowgoon88

Much inspired by your plugin, I'm working on something related (as proposed in #13 ): http://editormagic.tiddlyspot.com/

I'm hoping to reuse the cursor-position.js you're using.

Could you give some guidance how it can be used in TW? To a large extent this question is about how to use a js function in wikitext. Any pointers are appreciated.

Thank you.

snowgoon88 commented 4 years ago

Hello twMat,

as I see it, your magical editor is way more general than the link-completion plugin that I developped.

I am not very deep into TW and I used the cursor-position.js script in order to compute where a popup window should appear. And I did this only in JS, not dealing at all with wikitext.

In fact my editor tiddler is entirely written in JS. I copied the code from the editor tiddler of TW and added my plugin to it. The basic concepts of my plugin are :

create in the DOM a DIV element (that will be the popup) that is hidden
track the text entered by the user on the TEXTAREA of the tiddler
when the text matches some patterns, look in a list of possible completion and if some choices are possible, make the popup DIV appear, at a position computed by cursor-position.js
watch for ENTER, arrow UP, DOWN and if a completion is selected, insert it into the TEXTAREA and hide the popup DIV.

All this is done only using javascript. cursor-position.js is needed because there is not universal way to know the pixel position of the cursor of a TEXTAREA.

Finally, I must say that if I had the courage, I could make a better, lighter and smarter version of the plugin. As it was done while I was learning javascript. Now, I know a bit more.

Snow

diego898 commented 4 years ago

Hello @snowgoon88! I'd just like to add there is a lot of momentum in the community right now about getting a feature like this updated and supported (hopefully in the core!), (in support of making a general note-taking workflow like the very popular Roam tool).

I'm sure I can say the community would greatly appreciate any time and effort your willing to spend to work with Mat on this! Your current plugin is already a must-have for many users!

snowgoon88 / TW5-extendedit

How use cursor-position.js ? #14