[ Demo ] : floating editor toolbar

[Saq Imtiaz]

When early morning conference calls run too long, you get demos. 

Here is a very quick and rough proof of concept of an alternative approach to the editor toolbar:

Edit a tiddler, and select some text to make the toolbar appear:

https://saqimtiaz.github.io/sq-tw/floating-menu.html

Caveats:

- Not all buttons are related to selections and some would need to be available without a selection.

- Probably a fair few other things, haven't tested it beyond selecting some text and triggering a button.

Cheers,

Saq

PS: I think "demo" (or "POC" / proof of concept) and "UI" tags would be handy for posts.

[Ste Wilson]

On mobile for me (android, chrome)ha long press and drag to select text doesn't make the edit bar appear. A double tap to select a word makes it appear but it likes being covered over by the android copy paste options but an awesome thing. Here's t long conference calls!

[Saq Imtiaz]

@Ste it works based on the click event for now, which isn't triggered when selecting text on mobile.

Similarly if you select text on a desktop using just the keyboard it also won't trigger the menu. If you click and drag to select, that triggers the menu.

All of these things can be managed... It's just a quick proof of concept for now as to what an alternative editor toolbar UI could be like.

[Saq Imtiaz]

I've made a tiny change that will hopefully make this work better on mobile too.

Let me know if it helps.

[PMario]

On Wednesday, July 8, 2020 at 9:58:06 AM UTC+2, Saq Imtiaz wrote:

Edit a tiddler, and select some text to make the toolbar appear:

https://saqimtiaz.github.io/sq-tw/floating-menu.html

Hi,

Using FF 78.0.1 .. Doesn't work for me there.

-m

[Saq Imtiaz]

@pmario Hmm. Must have broken in the update I made to make it work better on mobile, I tested it on FF earlier but not after that change. Will investigate later.

[Saq Imtiaz]

@pmario I've uploaded a quick fix for FF that gets it close to the Chrome behaviour... hopefully good enough at least for a proof of concept.

Background: FF doesn't fire selectionchange events in input/textarea elements, whereas all other major browsers do.

On Wednesday, July 8, 2020 at 10:15:28 PM UTC+2, PMario wrote:

[Mat]

Saq Imtiaz wrote:

When early morning conference calls run too long, you get demos. 

@everybody - quicky, lets set up a lot of boring conference calls for Saq!

Thank you for this demo Saq! I think this is superior to the default editor toolbar - i.e for those tools that require a selection (I do note it is slimmed down compared to native toolbar). Do you have any conceptual idea how to approach the tools that don't require a selection, e.g the stamp or the image picker? Just curious.

<:-)

[TW Tones]

Saq,

I just managed to review it and its nice, popup buttons any where down a long tiddlywiki in edit mode is desirable. I agree with others that a method to nominate EditorToolbar buttons that belong on the "Text select" menu, would be nice. On one of my wikis the EditorToolbar is setup to float as a I scroll down the tiddler, I lost track of how this was achieved but the two approaches would be nice companions, the non-select based buttons at the top and float, the select based buttons in the popup.

My only concern or warning is of late the development of a range of other solutions on the cards like EditorMagic, Command and others that use editor context popups. We should do everything we can to keep these compatible. 

My view is with this example of yours and others the editor may soon be the most powerful  and efficient way to edit text, rather than the poor cousin to other editors.

Regards

Tony

[Saq Imtiaz]

@Mat: Regarding tools that don't require selections: I haven't really given any of this a lot of thought. This was a quick hack combining bits from other things I have worked on, prompted by a request for a more slimmed down editor toolbar in Streams.

In general I favour a minimal UI when writing, so I would not want a small toolbar at the top of the textarea with those tools. My natural preference might be for bringing up a different popup menu at the caret position, prompted by a keyboard shortcut. However I realize that not everyone is a fan of keyboard shortcuts. Or you know, we could let EditorMagic deal with that ;)

@Tony: there is a rough version of a configuration panel for buttons for the toolbar at https://saqimtiaz.github.io/sq-tw/floating-menu.html#config

That's pretty much how far I got before the call ended, and it is sufficient for a proof of concept.

[Ste Wilson]

@saq
That does under work wonderfully!

[Duarte Farrajota Ramos]

On Wednesday, 8 July 2020 23:36:43 UTC+1, Mat wrote:

Saq Imtiaz wrote:

When early morning conference calls run too long, you get demos. 

@everybody - quicky, lets set up a lot of boring conference calls for Saq!

Count me in!

This is great! I know tiddlers are by definition meant to be atomic and short, but sometimes they do grow large and editing long texts make the default toolbar scroll ou of view.
While the default behavior still works by pressing hotkeys and even does scroll the popovers (like to add links) into view correctly, this is much more convenient and makes editing a lot more natural and less "jumpy".

The way I see it, the perfect behavior would be to eventually complement this with an option to have a "sticky" toolbar for selection independent tools that is always kept in view like the sticky titles option.

Great work this is fantastic. 

[TW Tones]

Saq,

Once before I created a new "toolbar" one could manage inside control panel appearance toolbars. We could just list all EditorToolbar items and a checkbox would place it on the popup. This provides the standard way to select and reorder.

Also with the Active tiddler discussion in dev tools even editor toolbar options that do not relate to selecting text could be placed in a sidebar.

Perhaps after POC?

Regards

Tony

[Saq Imtiaz]

The default UI for toolbar is very easy to set up but I don't like the user experience. What is in the demo is unfinished and just a bare minimum to make things workable. I have something different in mind if I do get around to taking this further.

Cheers,

Saq

[Saq Imtiaz]

I've updated the configuration UI to represent the design concept I have in mind:

https://saqimtiaz.github.io/sq-tw/floating-menu.html#config:config%20%5B%5BDraft%20of%20'RikerIpsum'%5D%5D

[Mat]

Saq Imtiaz wrote:

the configuration UI

+1

IMO that should be the UI for setting toolbars in TW. The horizontal display of the selected tools directly reflects how they are displayed in the tiddler and the current use of checkboxes for these settings is an extra visual abstraction.

Is there a reason why you have the icons to the right of the item, rather than on the left which probably would make for an even less cluttered display?

<:-)

[Saq Imtiaz]

@Mat:

 

Is there a reason why you have the icons to the right of the item, rather than on the left which probably would make for an even less cluttered display?

Lack of time: since I first posted this I've only worked on the bit above the divider line, that is the display for what is in the toolbar.

The lower bit (Unused buttons) as of yet has not gotten any attention.

[Stephen Kimmel]

I definitely like the idea of the pop-up editor toolbar though I do have a difficulty or two that I haven't worked my way through yet. Perhaps my biggest gripe is that the preview window changed position from beside the editing window to below and to the right of the editing window.

I'm working with FF but I've seen the same effect using Chrome and Brave as well.

Stephen

[Saq Imtiaz]

Hi Stephen, 

Let me just re-iterate that this a quick 30 minute hack meant to serve as a demo/proof of concept for an alternative way to implement a text formatting toolbar. It is not meant for anyone to use. There are fair few edge cases that cause issues, and no affordance for toolbar buttons that do not depend on a selection.

That said, thank you for bringing the issue with the preview to my attention. As I never use the preview option I likely would not have realized. This at least, should be an easy fix.

Cheers,
Saq

[TW Tones]

Saq,

I love the solution so far, however I have a range of editor Toolbar buttons, I use for insert rather than act on a selection, so I need some way to open the toolbar at a cursor only.

I would be happy if I could still use and select what appears in the standard toolbar. I like your minimalist approach but we need to use both if possible. 

Further I have a fix I can't find the doco  for that. (primarily css and the Z value). It makes the existing editorToolbar remain at the top of the visible window when you scroll down long tiddlers, so its always in view until you scroll away from a tiddler in edit mode.

A hybrid would be ideal, with any thing in the popup not showing in the standard toolbar.

Regards

Tony

[Stephen Kimmel]

As it runs out the fix to the preview was easy enough. All I had to do was to move the opening <div style="position:relative;"> to a new position directly in front of the reveal pop-up line.

I was also able to put back the standard editor tool bar by adding the removed code ahead of the relocated position:relative div line.

I look forward to seeing the improvements you have in mind.

Stephen

[Saq Imtiaz]

@Stephen good catch on that div. Though now that you have pointed it out, I will try to remove the need for that div altogether. Will just require tweaking the calculations for the position of the popup menu a little bit.

As you have discovered adding back the standard toolbar is quite easy. You can also easily exclude from the standard toolbar, the buttons in the floating toolbar by tweaking the filter:

[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]] -[list[$:/config/sq/floating-toolbar/button-list]]

 I have a different design concept in mind that I want to explore first, which is why I have not as of yet gone this route. While this is an acceptable solution for the regular editor, for the Streams plugin in particular, I would like something with less visual clutter.

@Tony : as Stephen points out, it is pretty easy to add back in the standard editor tool bar. Just compare $:/core/ui/EditTemplate/body/editor to the unmodified shadow tiddler. 

Cheers,

Saq

[TW Tones]

Saq,

@Tony : as Stephen points out, it is pretty easy to add back in the standard editor tool bar. Just compare $:/core/ui/EditTemplate/body/editor to the unmodified shadow tiddler. 

Will do, I have no problem for me, I am suggesting it be part of the final solution if possible. 

• Allow people to put back what you taketh away, that's all. And no hurry.
• And consider incorporating the "sliding tool bar with the floating one.

Keep up the good work, this is very promising.

Regards

Tony

[Saq Imtiaz]

 

Will do, I have no problem for me, I am suggesting it be part of the final solution if possible. 

Tony: I am not planning to develop this further, except maybe as an optional add-on for Streams.  

But if there is interest maybe someone else will choose to do so.

Cheers,

Saq

[TW Tones]

Saq

However you wish, perhaps I will run with some packaging of it?

With this solution of yours I now have a nice suit of editor toolbar tools, Some my own and others enhancements and tweaks. I am planning to bundle them for use during wiki design activities. I have achieved real development productivity of late.

Thanks for your contribution
TW tones

[Saq Imtiaz]

@Tony please feel free. The purpose of sharing the demo is after all to inspire ideas in the community.

Note however that the JavaScript portion is far from robust, needs clean up, and is not something that I will be offering support for.

Cheers,

Saq