How to keep toolbar options from changing back to default values

[Tca1107]

I am having trouble with the toolbar options. Please have a look at this example, which somebody posted on another issue earlier: http://codepen.io/anon/pen/BQXEJL

In it, some configurations have been made in the JS code concerning tohe toolbar (example: quill.format('header', '1');). However, whenever I click somewhere in the toolbar, these configurations are gone. Instead the default values are reinstalled. For instance, "Heading 1" changes back to "Normal". The same keeps happening when I actually want to change the font size myself. If I click on the dropdown menu, the selection suddenly shows "Normal" instead of the correct selection, which would be "Heading 1".

Is there any way to prevent quill from showing this behavior? I mean, a way to make it keep the right selection (in my case: "Heading 1")?

Thank you for you help!

[benbro]

quill.format('header', '1') doesn't change the default, it just set the current used format.

Please provide the exact steps to reproduce the "Heading 1" changes back to "Normal" issue including browser, OS and Quill version.

[Tca1107]

Hello benbro and thank you for your answer.

Browser: Chrome Version 55.0.2883.87 OS: Windows 10 Quill: 1.1.5

Steps to reproduce the problem:

1. Click in the editor-container and type a few letters
2. Hover over the "Heading 1" selection in the dropdwon menu in the toolbar
3. Click on "Heading 1" in order to select a new font size -> Behavior: The current selection in the dropdown shows "Normal" instead of the"Heading 1" selection, which would be correct

Steps to reproduce a similar problem:

1. Click in the editor-container and type a few letters
2. Click somewhere in the toolbar (in white space or text alignment for instance) -> Behavior: The current selection in the dropdown changes from "Heading 1" to "Normal" and the toolbar icons are not blue (in focus) anymore. Please note that this behavior cannot be observed, if you click on the direction icon in step 2.

Is there maybe a way to change the default value ("Normal") to the last selection that was last active?

Thanks for your help.

[benbro]

Again, in your example you didn't set the default format you only changed the active format so I don't think there is an issue here.

Not sure it makes much sense to make H1 or Bold the default. Maybe you can change the default look with CSS instead? @jhchen is there a way to set a default format?

[Tca1107]

Thanks for your answer. I see that I did not change the default format.

Maybe try it this way:

1. Delete the three lines of code in the javascript file that set the active format, that is to say: quill.format('direction', 'rtl'); quill.format('align', 'center'); quill.format('header', '1');
2. Click in the editor and write a few words
3. Mark the words you wrote and make them "Heading 1" in the font size dropdown
4. Click on the font size dropdown again (suppose you want to the marked text to "Heading 2") -> Behavior: The current selection in the dropdown (in light grey) is "Normal" instead of "Heading 1".

or:

1. see above
2. see above
3. see above
4. Click somewhere in the toolbar or in the white space below the "editor-container" div. -> Behavior: The current selection in the dropdown (in light grey) is "Normal" instead of "Heading 1".

I guess what I am looking for is a way to make the dropdown menu show its last active value, if I click out of the text area or in the dropdown menu itself..

Thanks for your help.

Edit: If you add another dropdown for selecting font families a similiar behavior can be observed. If you mark some text in the editor, and set the font size as well as the font itself to another than the default values and then click again on one of the two dropdowns, both of the current selections change to the default values. I know what I am trying to describe is a bit confusing, sorry about that.

[jhchen]

So you want an the editor to always be heading: 1 unless the user specifies otherwise? I'm not sure I understand what you are trying to do.

[Tca1107]

Hello jhchen and thank for your answer.

Hm, no, that is not what I mean. Maybe "default" is not the right word to describe what I am trying to explain. I think I confused the header option with the size option before. Sorry for the confusion. I created another example, maybe that will make it clearer. The main problem concerns the current selection which the different dropdowns (for font size and font family) display when the user formats text they wrote. You can find the new example here: http://codepen.io/anon/pen/XpWmLM

Steps:

1. Click in the editor and write a few words
2. Mark the words you wrote and make them a different font size by selecting the respective option in the sizes dropdown (e.g. "huge")
3. With the text still marked, click on the font family dropdown in order to select a new font for the marked text but do not select an option yet; just open the dropdown menu.

Behavior: When you click on the font family dropdown menu to open the different options available, the current selection of the font size dropdown does no longer show the selection you made in step 2 ("huge"); instead, it displays "normal". However, as soon as you click on a font family option and thus select a new font for your text, the current font size selection shows the previously selected value again.