Presenting: EditorMagic - the editor as an assistant

[Mat]

[Update: Firefox has issues with this that are resolved in 5.1.22]

TWaddle Corona Labs proudly unleash

the solution to the pollution

the vaccine to the wolverine

the tiddler for the quibbler:

EditorMagic

- make your editor into an assistant!

Occasionally I feel I'm onto something that should really make a big impact. I'm usually wrong. This time I had better be right or you are wrong ;-) ;-)

Unfortunately it is still half-baked but I'm releasing it hoping people will see its potential so it can be collectively improved upon.

<:-)

[TonyM]

Mat,

I started looking, very exciting. I will look tomorrow.

Sounds like a great idea, not only could design be quicker but potentially less bugs and typos.

For such design tools I think we should make it easy to remove them once a design is complete, only possible if no dependencies are left behind. 

Very Promising thanks

Tony

[PMario]

Hi Mat,

An interesting approach. Did you consider a dynamic "Magic" sidebar tab instead of the popup?

-m

[Mat]

PMario wrote:

Did you consider a dynamic "Magic" sidebar tab instead of the popup?

Well, what I really want is for the popup to appear directly below the word you're typing for superior access without moving away on the screen. See for example the CKEditor feature "Balloon editor" - below the video, in the editable text select/click on any word to get the balloon to pop up. 

Consider that these are tools that become very momentarily needed as you type. To have these in the sidebar or even in the tiddler margin (as in the current EditorMagic design) is suboptimal. The same holds for the native editor toolbar by the way. The tools should ideally "move along" (un-intrusively/invisibly) with the cursor and appear "at need". I am not happy with the current EditorMagic look - it should not be visible by default (not even transparent) because it is ugly - but I do this to show the concept.

Snowgoons Edit Comptext plugin does move along so he has solved this, with js. Snowgoon states: "A module to compute the pixel position of the cursor : $:/plugins/snowgoon88/edit-comptext/cursor-position.js". I have no idea how to reuse or recreate this and would really appreciate help with this.

<:-)

[Jeremy Ruston]

Hi Mat

I really like this for a several reasons:

* Despite its limitations you’ve made enough of it to clearly communicate your underlying vision, and give people an opportunity to see what it feels like

* It helps to identify the primitives we might need to make a “production” version

* It’s a tour de force of your wikitext skills

I know that CodeMirror has a bunch of features for adding autocomplete to the editor, and I wonder if that might be the quickest route to something really usable.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3859d919-84a3-47ae-8f94-3b1a7496a995%40googlegroups.com.

[Mark S.]

It looks like magic!

Am I supposed to be able to insert stuff with this? Or just look at it? So far nothing I have done actually inserts text. Perhaps there's a magic step I'm missing?

Once I've typed in <table or <table> or <table> </table> , the bar on the right is stuck and I'm not able to use EM any more. How do I clear it without actually deleting text?

Thanks!

[Mat]

Jeremy, thank you, that's encouraging.

* It helps to identify the primitives we might need to make a “production” version

IMO, a key aspect is to separate the popup mechanism from the popup content. If there is a mechanism to show/appear things on command in the editor, then what is shown is a separate matter. 

I know that CodeMirror has a bunch of features for adding autocomplete to the editor, and I wonder if that might be the quickest route to something really usable.

Manipulating CodeMirror stuff will have to be for the big boys. But, frankly, it was surprisingly simple to create autocompletes that seem usable enough. The difficulty, for me, is to define good regexps such as something that understands that <$widget ANYTHINGHERE /> is a completed string.

<:-)

 

[Mat]

Mark S. wrote:

Am I supposed to be able to insert stuff with this? Or just look at it? So far nothing I have done actually inserts text. Perhaps there's a magic step I'm missing?

Once I've typed in <table or <table> or <table> </table> , the bar on the right is stuck and I'm not able to use EM any more. How do I clear it without actually deleting text?

Yes, the idea is to be able to insert stuff. BUT, as noted in the ToDo, one prominent problem is what I think you're describing. If you type <tabel and click table you should get a table stamped. This works when I do it. BUT a buch of other stuff appears in the popup at the same time. This is not supposed to happen but it happens because I don't know how to define the regexps properly so that it triggers on e.g <table but not <table> or <table foo>. These filters are defined in EditTemplate/EditorMagic which is the key tiddler for the whole concept.

<:-)

[Mat]

Mark S. wrote:

Am I supposed to be able to insert stuff with this? Or just look at it? So far nothing I have done actually inserts text. Perhaps there's a magic step I'm missing?

...or are you saying that clicking blue titles in the popup don't actually insert anything at all?

<:-)

[Jon]

Hi Mat,

If this is as good as your humour it will be a welcome addition!

Regards

Jon

[Mark S.]

I have not gotten anything to insert from any of the selections I've tried. I type say <$ and a menu popup appears on the right. I select say buttonwidget and ... nothing happens. Is something supposed to happen?

Maybe there's some sequence of keys I'm supposed to press?

Thanks!

[Mark S.]

Example two, [[ completion. I type [[Ab and then click on the "About" link that appears on the right. Nothing is inserted. Is it just a reference?

Thanks!

[Diego Mesa]

Mat,

Bravo!

IMO, a key aspect is to separate the popup mechanism from the popup content. If there is a mechanism to show/appear things on command in the editor, then what is shown is a separate matter. 

All, please show your support for this on this issue:

https://github.com/Jermolene/TiddlyWiki5/issues/3784

I think this is a huge leap in making TW more usable!

[Mat]

Mark S. wrote:

Example two, [[ completion. I type [[Ab and then click on the "About" link that appears on the right. Nothing is inserted.

That should definitely work. It works for me. The code for that specific template is EditorMagic/TitlePicker. Since it works for me, I can't tell what could be wrong. However, if the replacement in the editor doesn't happen for any of the triggers, then maybe it is a central problem with viewtemplate, i.e EditTemplate/EditorMagic - but again, it works for me so I can't tell what might be wrong. The codes in these tiddlers is fairly simple though, so do have a look and I'll answer any questions.

What system are you on, Mark?

Is anyone else having this problem?

<:-)

[Mat]

Jon wrote:

If this is as good as your humour it will be a welcome addition!

Heh! Thanks Jon. Both the humour and my tiddly stuff fails at times, but at least I am having fun  ;-)

<:-)

[Mark S.]

Windows 7, desktop Firefox 73.0.1.

Just turned off Privacy Badger and Ad Block for your site. No change.

[TiddlyTweeter]

Right

On Firefox latest nothing happens.

TT

[Mat]

OK, I'm also confirming no-worky on FF. My normal use is Chrome, Win.

No idea why. Will look into later today.

<:-)

[Mark S.]

Trying it in TiddlyDesktop. How is the trigger supposed to distinguish between looking up

widget documentation and an actual widget? Both use <$ . Is there some way to force

a widget selection?

Thanks!

[Mat]

OK, so it seems action-setfield doesn't work properly on editmode tiddlers in FF in the current version of TW. See github issue.

<:-)

[Mat]

Mark S. wrote:

Trying it in TiddlyDesktop. How is the trigger supposed to distinguish between looking up

widget documentation and an actual widget? Both use <$ . Is there some way to force

a widget selection?

That's not a real problem. It is up to the templates what triggers they use. The popup will show all of them if they use the same trigger. As you note, there are three templates that use <$. Two of them are variants of the same thing which is to show a SelectWidget with available widget titles (BTW, this problem is the background to why I asked about how to reshape strings) and selecting a title should open some iframes (which is why I asked about links to static tiddlers). Neither of the generated widgetlist-names work properly, so I've kept both. An option would be a hard coded list of widget names, which sucks but which is what I use for the third <$ ...but this template generates the picklist of widgettitles, not a SelectWidget. The (my!) desired look is to have the selectwidget on top and the picklist under it. So, yeah, there can be several templates using the same trigger :-)

<:-)

[Mark S.]

Ok, I see. The length of the first two templates prevented me from seeing that there was a 3rd option at the bottom.

Thanks!

[Mat]

Regarding the Firefox issue - the test case posted here above was faulty so I created a proper one as a github issue (and updated the post above).

<:-)

[TonyM]

Mat,

There was some previous work and a concept which would allow wikitext macros to be inserted like the excel formulas tool, Jeremy drew a mock up and others have constructed "syntax" guides. We may locate this prior work for you as it could add value and simplify your effort.

Regards

Tony

[Mat]

Tony, thanks for input. I don't know what you're referring to though. If I see it maybe I will understand. What would an "excel formulas tool" do in this context? Might be useful.

<:-)

[TonyM]

Mat,

It is a method by which to construct a macro or widget call where by first you select the widget (Formulae) then a dialogue/modal appears as guided selection even entry of the parameters relevant to the given widget and the values of those parameters.  At the end click inserts the full "statement".

Have you thought of using modals to simplify the interface with the editor? We would want to insert a result in the modal back to the editing tiddler.

If you could make youp popup able to list tagged modals (and regilar tiddler links) and open them if clicked it could be a great generic tool. 

Regards

Tony

[Mat]

TonyM wrote:

It is a method by which to construct a macro or widget call where by first you select the widget (Formulae) then a dialogue/modal appears as guided selection even entry of the parameters relevant to the given widget and the values of those parameters.  At the end click inserts the full "statement".

Sounds useful. 

Have you thought of using modals to simplify the interface with the editor? We would want to insert a result in the modal back to the editing tiddler.

You mean, how do I like to show an annoyingly small frame and block of the rest of the screen including the very text I'm authoring? Sounds terrible ;-)  But, who knows, for the applications you have in mind it might make sense. For small things like title completion it would disturb the authoring flow. Instead I'm hoping for something similar to the CKEditor feature "Balloon editor" - scroll to below the video and, in the editable text, select/click on any word to get the balloon to pop up. This is minimally intrusive.

A key aspect of that "balloon editor" is to be able to position the popup where the cursor is. Snowgoon does this in TW with his comptext plugin, but it is in js so I have no idea how. There was just a popup-action widget added to core (thank you BurningTreeC and Jermolene) but while it has coordinates I have not yet asked how to use it and I doubt it would solve the "at cursor" problem.

<:-)

[LinOnetwo]

I  really like this, it looks like Notion's early design:

where you can see macros on the right.

When will it be a stable relese? I'd like to use in my wiki!

在 2020年3月3日星期二 UTC+8下午5:19:17，Mat写道：

[Update: Firefox has issues with this that are resolved in 5.1.22]

[Mat]

LinOnetwo wrote:

where you can see macros on the right.

My hope is for the popup to be at the caret position though. IMO "controls" should be as accessible as possible (but not in the way).

When will it be a stable relese? I'd like to use in my wiki!

Yeah... the main obstacle is that I really need help with the regexps. For example, for:

There was a [[cat in a hat]] that [[sat on the mat

...find only the incomplete link.

<:-)

[林东吴]

Hi, Mat:

In notion's latest version, when you type / , a dowpdown menu full of searchable macros are shown at caret position. Several other note app also adapt this design. If you can achieve this, it would be great!

And maybe I can help with Regex, I'm quite good at that.

How do you develop your plugin? I didn't find the Github link.

I mainly develop plugin using JS, so I don't quite know the workflow for wikitext plugin development.

Mat <matia...@gmail.com> 于2020年4月10日周五 下午3:36写道：

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/73b7a129-261d-4792-9582-4d15c6041130%40googlegroups.com.

[Lin Onetwo]

Maybe you can write request about regex and the examples it should match in the github issue, and I can try to solve.

在 2020年4月10日星期五 UTC+8下午3:36:46，Mat写道：

[Mat]

Lin Onetwo wrote:

In notion's latest version, when you type / , a dowpdown menu full of searchable macros are shown at caret position. Several other note app also adapt this design. If you can achieve this, it would be great!

I have a thread here that hopefully leads to somewhere.

 

And maybe I can help with Regex, I'm quite good at that.

How do you develop your plugin? I didn't find the Github link.

Your help is more than welcome! 

I do my work directly in TW. Typically directly on tiddlyspot. I made SideEditor to let me see the output "live", but it definitely has flaws. One day EditorMagic will help even more ;-)

I have decided to deal with one issue at a time so the first "magic" to get to work is title completion so I set up http://titlepicker.tiddlyspot.com It works to some extent but the regexps need improvement... or maybe it is the way the string operators work in TW. I can't quite tell. I'll start a new thread and I hope you can participate.

<:-)

[Télumire]

Mat, chat GPT will probably be a huge help to find regex expression :)

Here's one that match the example you gave:

\[\[([^\[\]]+)(?![\s\S]*\])

Try it : https://regex101.com/r/eHsUg1/1

Explanation given by chat GPT:

To match the text immediately after [[ in a string, but only if it is not followed by ]] anywhere in the following text, you can use the following regular expression:

\[\[([^\[\]]+)(?![\s\S]*\]\])

This regular expression uses the following elements:

• \[\[ matches two literal square brackets
• ([^\[\]]+) matches one or more characters that are not square brackets ([^\[\]]) and captures the match as a group
• (?![\s\S]*\]\]) is a negative lookahead assertion that matches a location in the string only if it is not followed by ]] anywhere in the following text ([\s\S]* matches any character, including newlines, zero or more times)

The regular expression will match the text immediately after the opening square brackets, provided that it is not followed by the closing square brackets anywhere in the following text. The matched text will be captured as a group, so you can access it using a capturing group (e.g. $1 in some programming languages).

For example, in the string There was a [[cat in a hat]] that [[sat on the mat the regular expression would match cat in a hat as a group.