Fully Modularised Toolbar

[SimeonC]

This is a light spec for the feature requested in #40 and #41.

textAngular as it stands has all the buttons in the toolbar as customisable plugins that the user can change at will. The core issue raised in #40 and #41 is that the toolbar itself cannot be customised so easily.

In short there were 2 requests:

• Ability to update ANY editor using a single toolbar.
• Ability to show and hide the toolbar on set conditions ([Improvement] Make a Office 2010 floating/transitioning toolbar #41 also requires us to be able to detect selection ranges being created)

To solve these I think the following needs to be done:

• Allow init of toolbar and editors independently.
• Editor toolbar target option, if not set it will init a new toolbar specifically for the editor. This allows for Toolbar A to be used for editor 1, 2 and 3, then toolbar B for editor 4.
• Add additional events to the editor, to start with onSelectRange, onFocusIn and onFocusOut. (mostly these will be convenience functions as you should be able to do those three already with custom code outside of textAngular).

Potential Issues:

• Active buttons logic (i.e. setting the B button as depressed when caret/cursor is in Bold text).
• Detecting which editor is focussed when applying styles.
• Disabling editors when NOT in focus.
• This can have some UX issues when you have multiple text areas for one toolbar.

Anyone else have any thoughts?

[bastienJS]

Hello Simeon,

Thank you for accepting my feature request. Some years ago I have made the same feature request for the free WPF RichTextBox from Microsoft which is used by the WPF toolkit on codeplex. It got also implemented and the people liked it so they will like your control when you have implemented it :)

I really vote for the convenience functions ;-) about the rest I agree.

About what UX issues do you speak?
like
"should all other text areas be disabled" when the user has clicked in one certain text area" ? or
"should a "Bold" button have a pressed state when in multiple text areas is selected text and to which text selection does the active Bold button refer" ?

[SimeonC]

No I was thinking more around if you use multiple toolbars, say if you wanted editor instances 1 and 2 to have ability to toggle HTML then editors 3 and 4 to only have bold/italics then there is the possibility for user confusion on which toolbar is active for my current editor.
I think the best way to deal with this is to make sure that for every state change there is a corresponding class change in all relevant places.

As to your second point, as we use contenteditable areas I don't think you can select text in more than one editor at a time (I haven't tested this thou).

[bastienJS]

"I don't think you can select text in more than one editor at a time "

True just checked it.

"...then there is the possibility for user confusion on which toolbar is active for my current editor...."

Well I would say I have to operate on the one toolbar placed over the text editor?

[SimeonC]

"Well I would say I have to operate on the one toolbar placed over the text editor?"

I was getting at this change has the potential to have toolbars placed in funny places relative to editors (for whatever reason). Also even if the toolbars are sensibly placed we'd still want to make a class change to the active toolbar so that the developer can make a visual update via css/js if they want.
In thinking it through, all UX issues that could be introduced can be mitigated by the developer if we put enough transparency and clarity in events being fired.

[bastienJS]

Yes Yes Yes think it throught you can do it man. If you need free beer lemme know ;-)

[SimeonC]

How about more time, I could do with that :). In all likely-hood it will take me until Feb 2014 to look into this as I'm on leave very soon. If anyone else does this @fraywing should be able to look into it as a pull request if he gets the time. Otherwise it'll take some time before I start.

[SimeonC]

Implemented in 1.2.0 branch.